Create Fields for changing head of family

- Change Head of Family
- Change relation of famiy members when head of family is changed
- Add mutation for changing head of family
- Add query for getting persons in a family

Tithe-Vue/src/components/AddressForm.vue

@@ -52,6 +52,7 @@ const {
   },
   () => ({
     enabled: streetListQueryEnabled,
+    fetchPolicy: "no-cache",
   })
 );
 
@@ -118,17 +119,19 @@ const {
   onError: createStreetError,
 } = useMutation(CREATE_STREET_MUTATION);
 
-const createStreetOption = (option, setSelected) => {
+const createStreetOption = async (option, select$) => {
   createStreet({ streetName: option.label });
 
   // Not using loading for now
 
-  createStreetDone((mutationResult) => {
-    setSelected({
-      id: mutationResult.data?.createOneStreet?.streetId ?? "",
-      label: mutationResult.data?.createOneStreet?.streetName ?? "",
+  await new Promise((resolve, reject) => {
+    createStreetDone(() => {
+      select$.clear();
+      resolve("Success");
     });
   });
+
+  return false;
 };
 
 // City Search Box
@@ -150,6 +153,7 @@ const {
   },
   () => ({
     enabled: cityListQueryEnabled,
+    fetchPolicy: "no-cache",
   })
 );
 
@@ -216,17 +220,17 @@ const {
   onError: createCityError,
 } = useMutation(CREATE_CITY_MUTATION);
 
-const createCityOption = (option, setSelected) => {
+const createCityOption = async (option, select$) => {
   createCity({ cityName: option.label });
 
-  // Not using loading for now
-
-  createCityDone((mutationResult) => {
-    setSelected({
-      id: mutationResult.data?.createOneCity?.cityId ?? "",
-      label: mutationResult.data?.createOneCity?.cityName ?? "",
+  await new Promise((resolve, reject) => {
+    createCityDone(() => {
+      select$.clear();
+      resolve("Success");
     });
   });
+
+  return false;
 };
 
 // District Search Box
@@ -248,6 +252,7 @@ const {
   },
   () => ({
     enabled: districtListQueryEnabled,
+    fetchPolicy: "no-cache",
   })
 );
 
@@ -297,17 +302,17 @@ const {
   onError: createDistrictError,
 } = useMutation(CREATE_DISTRICT_MUTATION);
 
-const createDistrictOption = (option, setSelected) => {
+const createDistrictOption = async (option, select$) => {
   createDistrict({ districtName: option.label });
 
-  // Not using loading for now
-
-  createDistrictDone((mutationResult) => {
-    setSelected({
-      id: mutationResult.data?.createOneDistrict?.districtId ?? "",
-      label: mutationResult.data?.createOneDistrict?.districtName ?? "",
+  await new Promise((resolve, reject) => {
+    createDistrictDone(() => {
+      select$.clear();
+      resolve("Success");
     });
   });
+
+  return false;
 };
 
 // State Search Box
@@ -329,6 +334,7 @@ const {
   },
   () => ({
     enabled: stateListQueryEnabled,
+    fetchPolicy: "no-cache",
   })
 );
 
@@ -378,17 +384,17 @@ const {
   onError: createStateError,
 } = useMutation(CREATE_STATE_MUTATION);
 
-const createStateOption = (option, setSelected) => {
+const createStateOption = async (option, select$) => {
   createState({ stateName: option.label });
 
-  // Not using loading for now
-
-  createStateDone((mutationResult) => {
-    setSelected({
-      id: mutationResult.data?.createOneState?.stateId ?? "",
-      label: mutationResult.data?.createOneState?.stateName ?? "",
+  await new Promise((resolve, reject) => {
+    createStateDone(() => {
+      select$.clear();
+      resolve("Success");
     });
   });
+
+  return false;
 };
 
 // Pincode Search Box
@@ -410,6 +416,7 @@ const {
   },
   () => ({
     enabled: pincodeListQueryEnabled,
+    fetchPolicy: "no-cache",
   })
 );
 
@@ -459,17 +466,17 @@ const {
   onError: createPincodeError,
 } = useMutation(CREATE_PINCODE_MUTATION);
 
-const createPincodeOption = (option, setSelected) => {
+const createPincodeOption = async (option, select$) => {
   createPincode({ pincode: option.label });
 
-  // Not using loading for now
-
-  createPincodeDone((mutationResult) => {
-    setSelected({
-      id: mutationResult.data?.createOnePincode?.pincodeId ?? "",
-      label: mutationResult.data?.createOnePincode?.pincode ?? "",
+  await new Promise((resolve, reject) => {
+    createPincodeDone(() => {
+      select$.clear();
+      resolve("Success");
     });
   });
+
+  return false;
 };
 
 const addressRef = ref(null);
@@ -517,8 +524,10 @@ defineExpose({
       :can-deselect="false"
       :can-clear="false"
       :searchable="true"
+      :create-option="true"
       :resolve-on-load="false"
       :min-chars="1"
+      :on-create="createStreetOption"
       class="multipleSelectAddressBox"
       @search-change="streetSearchChange"
       @value-change="changeInStreet"
@@ -531,8 +540,10 @@ defineExpose({
       :can-deselect="false"
       :can-clear="false"
       :searchable="true"
+      :create-option="true"
       :resolve-on-load="false"
       :min-chars="1"
+      :on-create="createCityOption"
       class="multipleSelectAddressBox"
       @search-change="citySearchChange"
       @value-change="changeInCity"
@@ -545,8 +556,10 @@ defineExpose({
       :can-deselect="false"
       :can-clear="false"
       :searchable="true"
+      :create-option="true"
       :resolve-on-load="false"
       :min-chars="1"
+      :on-create="createDistrictOption"
       class="multipleSelectAddressBox"
       @search-change="districtSearchChange"
       @value-change="changeInDistrict"
@@ -559,8 +572,10 @@ defineExpose({
       :can-deselect="false"
       :can-clear="false"
       :searchable="true"
+      :create-option="true"
       :resolve-on-load="false"
       :min-chars="1"
+      :on-create="createStateOption"
       class="multipleSelectAddressBox"
       @search-change="stateSearchChange"
       @value-change="changeInState"
@@ -573,8 +588,10 @@ defineExpose({
       :can-deselect="false"
       :can-clear="false"
       :searchable="true"
+      :create-option="true"
       :resolve-on-load="false"
       :min-chars="1"
+      :on-create="createPincodeOption"
       class="multipleSelectAddressBox"
       @search-change="pincodeSearchChange"
       @value-change="changeInPincode"

Tithe-Vue/src/components/FormControl.vue

@@ -48,6 +48,7 @@ const props = defineProps({
   borderless: Boolean,
   transparent: Boolean,
   ctrlKFocus: Boolean,
+  disabled: Boolean,
 });
 
 const emit = defineEmits(["update:modelValue", "setRef"]);
@@ -163,6 +164,7 @@ if (props.ctrlKFocus) {
       :autocomplete="autocomplete"
       :required="required"
       :placeholder="placeholder"
+      :disabled="disabled"
       :type="computedType"
       :class="inputElClass"
     />

Tithe-Vue/src/components/MultiSelectBox/Multiselect.vue

@@ -259,9 +259,9 @@
               :is-pointed="isPointed"
               :search="search"
             >
-              <span>{{ localize(option[label]) }} </span>
+              <span> {{ localize(option[label]) }} </span>
               <span v-if="metaLabelEnabled" class="meta-label"
-                >{{ Object.values(option?.meta ?? {}).join(",") }}
+                >{{ Object.values(option?.meta ?? {}).join(", ") }}
               </span>
             </slot>
           </li>

Tithe-Vue/src/components/SearchBoxes/FamilyByParishSingleSelectBox.vue

@@ -42,6 +42,12 @@ const loadFamilies = computed((query, setOptions) => {
         value: {
           id: entity.familyId,
           label: entity.familyName,
+          headOfFamily: entity.headOfFamily,
+          persons: entity.persons,
+        },
+        meta: {
+          headOfFamily: entity.headOfFamily?.personName ?? "",
+          address: entity.address?.street?.streetName ?? "",
         },
       };
     }) ?? []
@@ -74,7 +80,7 @@ defineExpose({
       :can-deselect="false"
       :can-clear="false"
       :searchable="true"
-      :meta-label-enabled="false"
+      :meta-label-enabled="true"
       @value-change="changeInFamily"
     />
   </FormField>

Tithe-Vue/src/components/SearchBoxes/SingleSelectBox.vue

@@ -13,7 +13,12 @@ defineProps({
   canClear: Boolean,
   searchable: Boolean,
   metaLabelEnabled: Boolean,
+  createOption: Boolean,
   resolveOnLoad: Boolean,
+  onCreate: {
+    type: Function,
+    default: () => {},
+  },
 });
 
 const emit = defineEmits(["valueChange", "searchChange"]);
@@ -46,6 +51,8 @@ defineExpose({
     :can-clear="canClear"
     :searchable="searchable"
     :meta-label-enabled="metaLabelEnabled"
+    :create-option="createOption"
+    :on-create="onCreate"
     :resolve-on-load="resolveOnLoad"
     class="multiselect-theme"
     @search-change="searchChange"

Tithe-Vue/src/externalized-data/graphqlMutations.js

@@ -86,6 +86,22 @@ export const createFamilyMutation = `mutation createFamily ($family: FamilyMutat
 }
 `;
 
+export const createFamilyMembers = `mutation createFamilyMembers ($familyId: ID!, $persons: [PersonMutationThroughFamilyInput]!){
+    createManyPersonsInOneFamily (familyId: $familyId, persons: $persons){
+        personId
+        personName
+    }
+}
+`;
+
+export const changeHeadOfFamily = `mutation changeHeadOfFamily ($familyId: ID!, $newHeadOfFamily: PersonRelationSchema!, $persons: [PersonRelationSchema]){
+    changeHeadOfFamily (familyId: $familyId, newHeadOfFamily: $newHeadOfFamily, persons: $persons){
+        familyId
+        familyName
+    }
+}
+`;
+
 export const deactivateFamilyMutation = `mutation removeFamily ($familyId: ID!){
     deactivateOneFamily (familyId: $familyId){
         familyId

Tithe-Vue/src/externalized-data/graphqlQueries.js

@@ -292,6 +292,29 @@ export const familyAllFamilyListQuery = `query familyPageActiveFamily ($parishId
   getAllFamiliesByParish (parishId: $parishId){
     familyId
     familyName
+    headOfFamily{
+      personId
+      personName
+      baptismName
+      relation{
+        relationId
+        relationName
+      }
+    }
+    address{
+      street{
+        streetName
+      }
+    }
+    persons{
+      personId
+      personName
+      baptismName
+      relation{
+        relationId
+        relationName
+      }
+    }
   }
 }`;
 
@@ -301,6 +324,18 @@ export const familyPageActiveEnityCountQuery = `query activeCountByFamily ($id:
     getPersonCountByFamily (familyId: $id)
   }`;
 
+export const familyPagePersonsQuery = `query familyMembersQuery ($id: ID!){
+  getAllPersonsByFamily (familyId: $id) {
+    personId
+    personName
+    baptismName
+    relation{
+      relationId
+      relationName
+    }
+  }
+}`;
+
 export const familyPageActivePersonTableQuery = `query activePersonByFamily ($familyId: ID!){
   getAllPersonsByFamily (familyId: $familyId) {
     personId