diff --git a/Tithe-Vue/src/externalized-data/graphqlMutations.js b/Tithe-Vue/src/externalized-data/graphqlMutations.js index 2cc76b1..2e9fe82 100644 --- a/Tithe-Vue/src/externalized-data/graphqlMutations.js +++ b/Tithe-Vue/src/externalized-data/graphqlMutations.js @@ -102,6 +102,39 @@ export const activateFamilyMutation = `mutation activateFamily ($familyId: ID!){ } `; +// Person Mutations + +export const createPersonMutation = `mutation createPerson ($person: PersonMutationInput!){ + createOnePerson (person: $person){ + personId + personName + } +} +`; + +export const deactivatePersonMutation = `mutation removePerson ($personId: ID!){ + deactivateOnePerson (personId: $personId){ + personId + personName + } +} +`; + +export const activatePersonMutation = `mutation activatePerson ($personId: ID!){ + activateOnePerson (personId: $personId){ + personId + personName + } +} +`; + +export const createRelationMutation = `mutation createRelation ($relation: String!){ + createOneRelation(relation: $relation){ + relationId + relationName + } +}`; + // 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 d135ca4..5ae1aeb 100644 --- a/Tithe-Vue/src/externalized-data/graphqlQueries.js +++ b/Tithe-Vue/src/externalized-data/graphqlQueries.js @@ -320,6 +320,15 @@ export const personAllPersonListQuery = `query personPageActivePerson ($parishId } }`; +export const personAllFamilyListQuery = familyAllFamilyListQuery; + +export const personAllRelationListQuery = `query personPageRelations{ + getAllRelations{ + relationId + relationName + } +}`; + // Address Queries export const similarStreetListQuery = `query similarStreetList ($streetName: String!){ diff --git a/Tithe-Vue/src/views/PersonView.vue b/Tithe-Vue/src/views/PersonView.vue index 0b231b6..629e5a6 100644 --- a/Tithe-Vue/src/views/PersonView.vue +++ b/Tithe-Vue/src/views/PersonView.vue @@ -6,13 +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, mdiTableLarge, @@ -22,6 +19,7 @@ import SearchBox from "@/components/SearchBox.vue"; import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue"; import SectionMain from "@/components/SectionMain.vue"; import FormField from "@/components/FormField.vue"; +import FormCheckRadioGroup from "@/components/FormCheckRadioGroup.vue"; import FormControl from "@/components/FormControl.vue"; import BaseButton from "@/components/BaseButton.vue"; import BaseButtons from "@/components/BaseButtons.vue"; @@ -32,7 +30,6 @@ import CardBoxWidget from "@/components/CardBoxWidget.vue"; import LineChart from "@/components/Charts/LineChart.vue"; import AllNotifications from "@/components/AllNotifications.vue"; import TableSampleClients from "@/components/TableSampleClients.vue"; -import AddressForm from "@/components/AddressForm.vue"; import RemoveEntityDisclosure from "@/components/RemoveEntityDisclosure.vue"; import TableTabs from "@/components/TableTabs.vue"; @@ -40,20 +37,16 @@ import { personAllForaneListQuery, personAllParishListQuery, personAllPersonListQuery, - parishPageActiveEnityCountQuery, - parishPageActiveKoottaymaTableQuery, - parishPageActiveFamilyTableQuery, parishPageActivePersonTableQuery, + personAllFamilyListQuery, + personAllRelationListQuery, } from "@/externalized-data/graphqlQueries"; import { - createParishMutation, - deactivateParishMutation, + createPersonMutation, + deactivatePersonMutation, + createRelationMutation, } from "@/externalized-data/graphqlMutations"; -import { - koottaymaTableHeaders, - familyTableHeaders, - personTableHeaders, -} from "@/externalized-data/tableData"; +import { personTableHeaders } from "@/externalized-data/tableData"; // Notification Settings @@ -148,58 +141,158 @@ const loadPersonsByParish = (query, setOptions) => { ); }; -// Entity Count in Parish Page -const activeEntityByParishCountEnabled = ref(false); +// Entity Count in Person Page +// const activeEntityByPersonCountEnabled = ref(false); -const ACTIVE_ENTITY_BY_PARISH_COUNT_QUERY = gql` - ${parishPageActiveEnityCountQuery} -`; +// const ACTIVE_ENTITY_BY_PERSON_COUNT_QUERY = gql` +// ${personPageActiveEnityCountQuery} +// `; -const { - result: activeEntityByParishCount, - refetch: activeEntityByParishCountRefetch, -} = useQuery( - ACTIVE_ENTITY_BY_PARISH_COUNT_QUERY, - () => ({ id: parish.value.id }), - () => ({ enabled: activeEntityByParishCountEnabled }) -); -const activeKoottaymaCount = computed( - () => activeEntityByParishCount.value?.getKoottaymaCountByParish ?? 0 -); -const activeFamilyCount = computed( - () => activeEntityByParishCount.value?.getFamilyCountByParish ?? 0 -); -const activePersonCount = computed( - () => activeEntityByParishCount.value?.getPersonCountByParish ?? 0 -); +// const { +// result: activeEntityByPersonCount, +// refetch: activeEntityByPersonCountRefetch, +// } = useQuery( +// ACTIVE_ENTITY_BY_PERSON_COUNT_QUERY, +// () => ({ id: parish.value.id }), +// () => ({ enabled: activeEntityByPersonCountEnabled }) +// ); watch(forane, () => { activeParishListLoad(); }); watch(parish, () => { - activeEntityByParishCountEnabled.value = true; + activePersonListLoad(); }); -const createParishForm = reactive({ - parishName: "", - address: { - buildingName: "", - streetId: "", - cityId: "", - districtId: "", - stateId: "", - pincodeId: "", - }, +// watch(person, () => { +// activeEntityByParishCountEnabled.value = true; +// }); + +const createPersonForm = reactive({ + personName: "", + baptismName: "", + gender: "", + dob: "", phone: "", - foraneId: "", + familyId: "", + relationId: "", + educationIds: [], + occupationIds: [], }); // 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 Family Search Box +const formFamily = ref(); + +const ACTIVE_FAMILY_BY_PARISH_LIST_QUERY = gql` + ${personAllFamilyListQuery} +`; + +const { + result: activeFormFamilyList, + load: activeFormFamilyListLoad, + refetch: activeFormFamilyListRefetch, +} = useLazyQuery(ACTIVE_FAMILY_BY_PARISH_LIST_QUERY, () => ({ + parishId: formParish.value.id, +})); +const loadFormFamiliesByParish = (query, setOptions) => { + setOptions( + activeFormFamilyList.value?.getAllFamiliesByParish?.map((entity) => { + return { + id: entity.familyId, + label: entity.familyName, + }; + }) ?? [] + ); +}; + +watch(formForane, () => { + activeFormParishListLoad(); +}); + +watch(formParish, () => { + activeFormFamilyListLoad(); +}); + +watch(formFamily, (value) => { + createPersonForm.familyId = value.id; +}); + +// Form Relation Search Box +const formRelation = ref(); + +const RELATION_LIST_QUERY = gql` + ${personAllRelationListQuery} +`; + +const { + result: formRelationList, + load: formRelationListLoad, + refetch: formRelationListRefetch, +} = useLazyQuery(RELATION_LIST_QUERY); +formRelationListLoad(); +const loadFormRelations = (query, setOptions) => { + setOptions( + formRelationList.value?.getAllRelations?.map((entity) => { + return { + id: entity.relationId, + label: entity.relationName, + }; + }) ?? [] + ); +}; + +// Create Relation Option +const CREATE_RELATION_MUTATION = gql` + ${createRelationMutation} +`; + +const { + mutate: createRelation, + loading: createRelationLoading, + onDone: createRelationDone, + onError: createRelationError, +} = useMutation(CREATE_RELATION_MUTATION); + +const createRelationOption = (option, setSelected) => { + createRelation({ relation: option.label }); + + // Not using loading for now + + createRelationDone((mutationResult) => { + setSelected({ + id: mutationResult.data?.createOneRelation?.relationId ?? "", + label: mutationResult.data?.createOneRelation?.relationName ?? "", + }); + }); +}; + +watch(formRelation, (value) => { + createPersonForm.relationId = value.id; }); // Code for checking whether object has empty values @@ -220,37 +313,37 @@ function hasEmptyValues(obj, arrKey) { return false; } -const changeInAddressFormData = (eventData) => { - console.log(eventData); - createParishForm.address = eventData; -}; - -const addressFormComponent = ref(null); - -// Submit Create Parish Form -const CREATE_PARISH_MUTATION = gql` - ${createParishMutation} +// Submit Create Person Form +const CREATE_PERSON_MUTATION = gql` + ${createPersonMutation} `; const { - mutate: createParish, - loading: createParishLoading, - onDone: createParishDone, -} = useMutation(CREATE_PARISH_MUTATION); - -const submitCreateParishForm = () => { - if (hasEmptyValues(createParishForm, ["buildingName", "phone"])) { - console.log("Empty Values: " + createParishForm); + mutate: createPerson, + loading: createPersonLoading, + onDone: createPersonDone, +} = useMutation(CREATE_PERSON_MUTATION); + +const submitCreatePersonForm = () => { + if ( + hasEmptyValues(createPersonForm, [ + "buildingName", + "phone", + "educationIds", + "occupationIds", + ]) + ) { + console.log("Empty Values: " + createPersonForm); } else { - console.log("Complete Values: " + createParishForm); - createParish({ parish: createParishForm }); + console.log("Complete Values: " + createPersonForm); + createPerson({ person: createPersonForm }); } }; -watch(createParishLoading, (value) => { - infoNotificationEnabled.value = createParishLoading.value; +watch(createPersonLoading, (value) => { + infoNotificationEnabled.value = createPersonLoading.value; if (value === true) { - infoNotificationHeading.value = "Creating Parish."; + infoNotificationHeading.value = "Creating Person."; infoNotificationContent.value = "Please Wait..."; } else { infoNotificationHeading.value = ""; @@ -258,17 +351,21 @@ watch(createParishLoading, (value) => { } }); -createParishDone(() => { +createPersonDone(() => { console.log("onDone called"); successNotificationEnabled.value = true; - successNotificationHeading.value = "Created Parish."; + successNotificationHeading.value = "Created Person."; successNotificationContent.value = ""; - createParishForm.parishName = ""; - createParishForm.phone = ""; - createParishForm.address.buildingName = ""; + createPersonForm.personName = ""; + createPersonForm.baptismName = ""; + createPersonForm.gender = ""; + createPersonForm.dob = ""; + createPersonForm.phone = ""; formForane.value = ""; - addressFormComponent.value.clearAddressFields(); + formParish.value = ""; + formFamily.value = ""; + formRelation.value = ""; setTimeout(() => { successNotificationEnabled.value = false; @@ -278,29 +375,29 @@ createParishDone(() => { }); // Remove Parish -const DEACTIVATE_PARISH_MUTATION = gql` - ${deactivateParishMutation} +const DEACTIVATE_PERSON_MUTATION = gql` + ${deactivatePersonMutation} `; const { - mutate: deactivateParish, - loading: deactivateParishLoading, - onDone: deactivateParishDone, - onError: deactivateParishError, -} = useMutation(DEACTIVATE_PARISH_MUTATION); - -const deactivateParishButtonMethod = () => { - if (parish.value.id != "") { - deactivateParish({ parishId: parish.value.id }); + mutate: deactivatePerson, + loading: deactivatePersonLoading, + onDone: deactivatePersonDone, + onError: deactivatePersonError, +} = useMutation(DEACTIVATE_PERSON_MUTATION); + +const deactivatePersonButtonMethod = () => { + if (person.value.id != "") { + deactivatePerson({ personId: person.value.id }); } else { - console.log("Parish ID is empty"); + console.log("Person ID is empty"); } }; -watch(deactivateParishLoading, (value) => { - infoNotificationEnabled.value = deactivateParishLoading.value; +watch(deactivatePersonLoading, (value) => { + infoNotificationEnabled.value = deactivatePersonLoading.value; if (value === true) { - infoNotificationHeading.value = "Removing Parish."; + infoNotificationHeading.value = "Removing Person."; infoNotificationContent.value = "Please Wait..."; } else { infoNotificationHeading.value = ""; @@ -308,12 +405,12 @@ watch(deactivateParishLoading, (value) => { } }); -deactivateParishDone(() => location.reload()); +deactivatePersonDone(() => location.reload()); -deactivateParishError(() => { - console.log("Some Error occured while removing parish"); +deactivatePersonError(() => { + console.log("Some Error occured while removing person"); dangerNotificationEnabled.value = true; - dangerNotificationHeading.value = "Error Removing Parish."; + dangerNotificationHeading.value = "Error Removing Person."; dangerNotificationContent.value = "Try Again"; }); @@ -329,50 +426,20 @@ 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} -`; -const { - result: activePersonData, - load: activePersonDataLoad, - refetch: activePersonDataRefetch, -} = useLazyQuery(ACTIVE_PERSON_QUERY, () => ({ - parishId: parish.value.id, -})); -const getActivePersonRows = computed(() => { - return activePersonData.value?.getAllPersonsByParish ?? []; -}); +// const ACTIVE_PERSON_QUERY = gql` +// ${parishPageActivePersonTableQuery} +// `; +// const { +// result: activePersonData, +// load: activePersonDataLoad, +// refetch: activePersonDataRefetch, +// } = useLazyQuery(ACTIVE_PERSON_QUERY, () => ({ +// parishId: parish.value.id, +// })); +// const getActivePersonRows = computed(() => { +// return activePersonData.value?.getAllPersonsByParish ?? []; +// });