From 2c5ec5649072c5269af0ad100994d9fe7bd248e8 Mon Sep 17 00:00:00 2001 From: Ashish Sam Date: Sat, 9 Sep 2023 16:08:07 +0530 Subject: [PATCH] Implement basic functionalities of Family Page --- .../src/externalized-data/graphqlMutations.js | 26 ++ .../src/externalized-data/graphqlQueries.js | 18 ++ Tithe-Vue/src/views/FamilyView.vue | 233 ++++++++++-------- Tithe-Vue/src/views/KoottaymaView.vue | 6 +- 4 files changed, 183 insertions(+), 100 deletions(-) diff --git a/Tithe-Vue/src/externalized-data/graphqlMutations.js b/Tithe-Vue/src/externalized-data/graphqlMutations.js index 712f94e..2cc76b1 100644 --- a/Tithe-Vue/src/externalized-data/graphqlMutations.js +++ b/Tithe-Vue/src/externalized-data/graphqlMutations.js @@ -76,6 +76,32 @@ export const activateKoottaymaMutation = `mutation activateKoottayma ($koottayma } `; +// Family Mutations + +export const createFamilyMutation = `mutation createFamily ($family: FamilyMutationInput!){ + createOneFamily (family: $family){ + familyId + familyName + } +} +`; + +export const deactivateFamilyMutation = `mutation removeFamily ($familyId: ID!){ + deactivateOneFamily (familyId: $familyId){ + familyId + familyName + } +} +`; + +export const activateFamilyMutation = `mutation activateFamily ($familyId: ID!){ + activateOneFamily (familyId: $familyId){ + familyId + familyName + } +} +`; + // Address Mutations export const createStreetMutation = `mutation createNewStreet ($streetName: String!){ diff --git a/Tithe-Vue/src/externalized-data/graphqlQueries.js b/Tithe-Vue/src/externalized-data/graphqlQueries.js index 169c0bc..d135ca4 100644 --- a/Tithe-Vue/src/externalized-data/graphqlQueries.js +++ b/Tithe-Vue/src/externalized-data/graphqlQueries.js @@ -285,10 +285,28 @@ export const familyAllFamilyListQuery = `query familyPageActiveFamily ($parishId } }`; +export const familyAllKoottaymaListQuery = koottaymaAllKoottaymaListQuery; + export const familyPageActiveEnityCountQuery = `query activeCountByFamily ($id: ID!) { getPersonCountByFamily (familyId: $id) }`; +export const familyPageActivePersonTableQuery = `query activePersonByFamily ($familyId: ID!){ + getAllPersonsByFamily (familyId: $familyId) { + personId + personName + baptismName + gender + dob + relation{ + relationName + } + family{ + familyName + } + } +}`; + // Person Page export const personAllForaneListQuery = foraneAllForaneListQuery; diff --git a/Tithe-Vue/src/views/FamilyView.vue b/Tithe-Vue/src/views/FamilyView.vue index 9db0a7c..8b9eaf7 100644 --- a/Tithe-Vue/src/views/FamilyView.vue +++ b/Tithe-Vue/src/views/FamilyView.vue @@ -6,12 +6,10 @@ import { useLazyQuery, useMutation, useQuery } from "@vue/apollo-composable"; import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue"; import { ChevronUpIcon } from "@heroicons/vue/20/solid"; import { - mdiChurch, mdiReload, mdiFinance, mdiEye, mdiChartTimelineVariant, - mdiHandsPray, mdiAccountMultiple, mdiAccount, mdiCashMultiple, @@ -41,18 +39,15 @@ import { familyAllParishListQuery, familyAllFamilyListQuery, familyPageActiveEnityCountQuery, - parishPageActiveKoottaymaTableQuery, - parishPageActiveFamilyTableQuery, - parishPageActivePersonTableQuery, + familyAllKoottaymaListQuery, + familyPageActivePersonTableQuery, } from "@/externalized-data/graphqlQueries"; import { - createParishMutation, - deactivateParishMutation, + createFamilyMutation, + deactivateFamilyMutation, } from "@/externalized-data/graphqlMutations"; import { familyPageTableTabTitle, - koottaymaTableHeaders, - familyTableHeaders, personTableHeaders, } from "@/externalized-data/tableData"; @@ -149,7 +144,7 @@ const loadFamiliesByParish = (query, setOptions) => { ); }; -// Entity Count in Parish Page +// Entity Count in Family Page const activeEntityByFamilyCountEnabled = ref(false); const ACTIVE_ENTITY_BY_FAMILY_COUNT_QUERY = gql` @@ -180,8 +175,8 @@ watch(family, () => { activeEntityByFamilyCountEnabled.value = true; }); -const createParishForm = reactive({ - parishName: "", +const createFamilyForm = reactive({ + familyName: "", address: { buildingName: "", streetId: "", @@ -191,14 +186,68 @@ const createParishForm = reactive({ pincodeId: "", }, phone: "", - foraneId: "", + koottaymaId: "", }); // Form Forane Search Box const formForane = ref(); -watch(formForane, (value) => { - createParishForm.foraneId = value.id; +// Form Parish Search Box +const formParish = ref(); + +const { + result: activeFormParishList, + load: activeFormParishListLoad, + refetch: activeFormParishListRefetch, +} = useLazyQuery(ACTIVE_PARISH_BY_FORANE_LIST_QUERY, () => ({ + foraneId: formForane.value.id, +})); +const loadFormParishesByForane = (query, setOptions) => { + setOptions( + activeFormParishList.value?.getAllParishesByForane?.map((entity) => { + return { + id: entity.parishId, + label: entity.parishName, + }; + }) ?? [] + ); +}; + +// Form Koottayma Search Box +const formKoottayma = ref(); + +const ACTIVE_KOOTTAYMA_BY_PARISH_LIST_QUERY = gql` + ${familyAllKoottaymaListQuery} +`; + +const { + result: activeFormKoottaymaList, + load: activeFormKoottaymaListLoad, + refetch: activeFormKoottaymaListRefetch, +} = useLazyQuery(ACTIVE_KOOTTAYMA_BY_PARISH_LIST_QUERY, () => ({ + parishId: formParish.value.id, +})); +const loadFormKoottaymasByParish = (query, setOptions) => { + setOptions( + activeFormKoottaymaList.value?.getAllKoottaymasByParish?.map((entity) => { + return { + id: entity.koottaymaId, + label: entity.koottaymaName, + }; + }) ?? [] + ); +}; + +watch(formForane, () => { + activeFormParishListLoad(); +}); + +watch(formParish, () => { + activeFormKoottaymaListLoad(); +}); + +watch(formKoottayma, (value) => { + createFamilyForm.koottaymaId = value.id; }); // Code for checking whether object has empty values @@ -221,35 +270,35 @@ function hasEmptyValues(obj, arrKey) { const changeInAddressFormData = (eventData) => { console.log(eventData); - createParishForm.address = eventData; + createFamilyForm.address = eventData; }; const addressFormComponent = ref(null); -// Submit Create Parish Form -const CREATE_PARISH_MUTATION = gql` - ${createParishMutation} +// Submit Create Family Form +const CREATE_FAMILY_MUTATION = gql` + ${createFamilyMutation} `; const { - mutate: createParish, - loading: createParishLoading, - onDone: createParishDone, -} = useMutation(CREATE_PARISH_MUTATION); - -const submitCreateParishForm = () => { - if (hasEmptyValues(createParishForm, ["buildingName", "phone"])) { - console.log("Empty Values: " + createParishForm); + mutate: createFamily, + loading: createFamilyLoading, + onDone: createFamilyDone, +} = useMutation(CREATE_FAMILY_MUTATION); + +const submitCreateFamilyForm = () => { + if (hasEmptyValues(createFamilyForm, ["buildingName", "phone"])) { + console.log("Empty Values: " + createFamilyForm); } else { - console.log("Complete Values: " + createParishForm); - createParish({ parish: createParishForm }); + console.log("Complete Values: " + createFamilyForm); + createFamily({ family: createFamilyForm }); } }; -watch(createParishLoading, (value) => { - infoNotificationEnabled.value = createParishLoading.value; +watch(createFamilyLoading, (value) => { + infoNotificationEnabled.value = createFamilyLoading.value; if (value === true) { - infoNotificationHeading.value = "Creating Parish."; + infoNotificationHeading.value = "Creating Family."; infoNotificationContent.value = "Please Wait..."; } else { infoNotificationHeading.value = ""; @@ -257,16 +306,18 @@ watch(createParishLoading, (value) => { } }); -createParishDone(() => { +createFamilyDone(() => { console.log("onDone called"); successNotificationEnabled.value = true; - successNotificationHeading.value = "Created Parish."; + successNotificationHeading.value = "Created Family."; successNotificationContent.value = ""; - createParishForm.parishName = ""; - createParishForm.phone = ""; - createParishForm.address.buildingName = ""; + createFamilyForm.koottaymaName = ""; + createFamilyForm.phone = ""; + createFamilyForm.address.buildingName = ""; formForane.value = ""; + formParish.value = ""; + formKoottayma.value = ""; addressFormComponent.value.clearAddressFields(); setTimeout(() => { @@ -276,30 +327,30 @@ createParishDone(() => { }, 3000); }); -// Remove Parish -const DEACTIVATE_PARISH_MUTATION = gql` - ${deactivateParishMutation} +// Remove Family +const DEACTIVATE_FAMILY_MUTATION = gql` + ${deactivateFamilyMutation} `; const { - mutate: deactivateParish, - loading: deactivateParishLoading, - onDone: deactivateParishDone, - onError: deactivateParishError, -} = useMutation(DEACTIVATE_PARISH_MUTATION); + mutate: deactivateFamily, + loading: deactivateFamilyLoading, + onDone: deactivateFamilyDone, + onError: deactivateFamilyError, +} = useMutation(DEACTIVATE_FAMILY_MUTATION); -const deactivateParishButtonMethod = () => { +const deactivateFamilyButtonMethod = () => { if (parish.value.id != "") { - deactivateParish({ parishId: parish.value.id }); + deactivateFamily({ familyId: family.value.id }); } else { - console.log("Parish ID is empty"); + console.log("Family ID is empty"); } }; -watch(deactivateParishLoading, (value) => { - infoNotificationEnabled.value = deactivateParishLoading.value; +watch(deactivateFamilyLoading, (value) => { + infoNotificationEnabled.value = deactivateFamilyLoading.value; if (value === true) { - infoNotificationHeading.value = "Removing Parish."; + infoNotificationHeading.value = "Removing Family."; infoNotificationContent.value = "Please Wait..."; } else { infoNotificationHeading.value = ""; @@ -307,12 +358,12 @@ watch(deactivateParishLoading, (value) => { } }); -deactivateParishDone(() => location.reload()); +deactivateFamilyDone(() => location.reload()); -deactivateParishError(() => { - console.log("Some Error occured while removing parish"); +deactivateFamilyError(() => { + console.log("Some Error occured while removing family"); dangerNotificationEnabled.value = true; - dangerNotificationHeading.value = "Error Removing Parish."; + dangerNotificationHeading.value = "Error Removing Family."; dangerNotificationContent.value = "Try Again"; }); @@ -328,49 +379,19 @@ onMounted(() => { }); // ================= -// Koottayma Table Data -const ACTIVE_KOOTTAYMA_QUERY = gql` - ${parishPageActiveKoottaymaTableQuery} -`; -const { - result: activeKoottaymaData, - load: activeKoottaymaDataLoad, - refetch: activeKoottaymaDataRefetch, -} = useLazyQuery(ACTIVE_KOOTTAYMA_QUERY, () => ({ - parishId: parish.value.id, -})); -const getActiveKoottaymaRows = computed(() => { - return activeKoottaymaData.value?.getAllKoottaymasByParish ?? []; -}); - -// Family Table Data -const ACTIVE_FAMILY_QUERY = gql` - ${parishPageActiveFamilyTableQuery} -`; -const { - result: activeFamilyData, - load: activeFamilyDataLoad, - refetch: activeFamilyDataRefetch, -} = useLazyQuery(ACTIVE_FAMILY_QUERY, () => ({ - parishId: parish.value.id, -})); -const getActiveFamilyRows = computed(() => { - return activeFamilyData.value?.getAllFamiliesByParish ?? []; -}); - // Person Table Data const ACTIVE_PERSON_QUERY = gql` - ${parishPageActivePersonTableQuery} + ${familyPageActivePersonTableQuery} `; const { result: activePersonData, load: activePersonDataLoad, refetch: activePersonDataRefetch, } = useLazyQuery(ACTIVE_PERSON_QUERY, () => ({ - parishId: parish.value.id, + familyId: family.value.id, })); const getActivePersonRows = computed(() => { - return activePersonData.value?.getAllPersonsByParish ?? []; + return activePersonData.value?.getAllPersonsByFamily ?? []; }); @@ -416,24 +437,24 @@ const getActivePersonRows = computed(() => { - Create New Parish + Create New Family - + @@ -445,9 +466,27 @@ const getActivePersonRows = computed(() => { bg-color="#1e293b" /> + + + + + + @@ -460,7 +499,7 @@ const getActivePersonRows = computed(() => { class="baseButtonStyle" color="info" label="Submit" - @click="submitCreateParishForm" + @click="submitCreateFamilyForm" /> @@ -469,7 +508,7 @@ const getActivePersonRows = computed(() => { heading="Remove Family" content="Are you sure you want to remove this family" button-label="Yes, Remove this Family" - :button-method="deactivateParishButtonMethod" + :button-method="deactivateFamilyButtonMethod" /> diff --git a/Tithe-Vue/src/views/KoottaymaView.vue b/Tithe-Vue/src/views/KoottaymaView.vue index ae5580a..1f82c7f 100644 --- a/Tithe-Vue/src/views/KoottaymaView.vue +++ b/Tithe-Vue/src/views/KoottaymaView.vue @@ -234,7 +234,7 @@ function hasEmptyValues(obj, arrKey) { return false; } -// Submit Create Parish Form +// Submit Create Koottayma Form const CREATE_KOOTTAYMA_MUTATION = gql` ${createKoottaymaMutation} `; @@ -282,7 +282,7 @@ createKoottaymaDone(() => { }, 3000); }); -// Remove Parish +// Remove Koottayma const DEACTIVATE_KOOTTAYMA_MUTATION = gql` ${deactivateKoottaymaMutation} `; @@ -437,7 +437,7 @@ const getActivePersonRows = computed(() => { :load-options="loadFormParishesByForane" :create-option="false" :reload-method="activeFormParishListRefetch" - bg-color="#0f172a" + bg-color="#1e293b" />