Create dynamic form component for adding persons to family

Tithe-Vue/src/components/Forms/AddPersonInFamilyForm.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from "vue";
+
+import { mdiClose, mdiPlus } from "@mdi/js";
+
+import FormField from "@/components/FormField.vue";
+import FormControl from "@/components/FormControl.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import PersonForm from "@/components/Forms/PersonForm.vue";
+
+const persons = ref([]);
+
+const addInput = () => {
+  persons.value.push({});
+};
+
+const removeInput = (counter) => {
+  persons.value.splice(counter, 1);
+};
+</script>
+
+<template>
+  <div v-for="(person, index) in persons" :key="index">
+    <FormField>
+      <div class="flex justify-between">
+        <span>Person {{ index + 1 }}</span>
+        <BaseButton
+          color="danger"
+          :icon="mdiClose"
+          :outline="true"
+          :rounded-full="false"
+          @click="removeInput(index)"
+        />
+      </div>
+    </FormField>
+    <!-- <FormField>
+      <FormControl
+        v-model="persons[index]"
+        type="text"
+        :borderless="false"
+        placeholder="Shalom House"
+      />
+    </FormField> -->
+    <PersonForm v-model="persons[index]" />
+    <span></span>
+  </div>
+  <FormField class="text-center">
+    <BaseButton
+      color="contrast"
+      label="Add Family Member"
+      :icon="mdiPlus"
+      :small="true"
+      :outline="true"
+      :rounded-full="true"
+      @click="addInput"
+    />
+  </FormField>
+</template>

Tithe-Vue/src/components/Forms/PersonForm.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { computed, ref, watch, watchEffect } from "vue";
+
+import { mdiAccount } from "@mdi/js";
+
+import FormField from "@/components/FormField.vue";
+import FormCheckRadioGroup from "@/components/FormCheckRadioGroup.vue";
+import FormControl from "@/components/FormControl.vue";
+import ForaneSingleSelectBox from "@/components/SearchBoxes/ForaneSingleSelectBox.vue";
+import ParishByForaneSingleSelectBox from "@/components/SearchBoxes/ParishByForaneSingleSelectBox.vue";
+import FamilyByParishSingleSelectBox from "@/components/SearchBoxes/FamilyByParishSingleSelectBox.vue";
+import RelationSingleSelectBox from "@/components/SearchBoxes/RelationSingleSelectBox.vue";
+
+const props = defineProps({
+  // Since this form is being used in both family and person page
+  isFamilyRequired: Boolean,
+  modelValue: {
+    type: Object,
+    default: (props) =>
+      props.isFamilyRequired
+        ? {
+            personName: "",
+            baptismName: "",
+            gender: "",
+            dob: "",
+            phone: "",
+            familyId: "",
+            relationId: "",
+            educationIds: [],
+            occupationIds: [],
+          }
+        : {
+            personName: "",
+            baptismName: "",
+            gender: "",
+            dob: "",
+            phone: "",
+            relationId: "",
+            educationIds: [],
+            occupationIds: [],
+          },
+  },
+});
+
+const emits = defineEmits(["update:modelValue", "changeInPersonForm"]);
+
+// const createPersonForm = props.isFamilyRequired
+//   ? reactive({
+//       personName: "",
+//       baptismName: "",
+//       gender: "",
+//       dob: "",
+//       phone: "",
+//       familyId: "",
+//       relationId: "",
+//       educationIds: [],
+//       occupationIds: [],
+//     })
+//   : reactive({
+//       personName: "",
+//       baptismName: "",
+//       gender: "",
+//       dob: "",
+//       phone: "",
+//       relationId: "",
+//       educationIds: [],
+//       occupationIds: [],
+//     });
+
+const createPersonForm = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits("update:modelValue", value);
+  },
+});
+
+const formForane = ref();
+const formParish = ref();
+const formFamily = ref();
+
+const changeInFormForane = (entity) => {
+  formForane.value = entity;
+};
+
+const changeInFormParish = (entity) => {
+  formParish.value = entity;
+};
+
+const changeInFormFamily = (entity) => {
+  formFamily.value = entity;
+};
+
+const changeInFormRelation = (entity) => {
+  createPersonForm.value.relationId = entity.id;
+};
+
+watch(formFamily, (value) => {
+  createPersonForm.value.familyId = value.id;
+});
+
+watchEffect(() => {
+  //   emits("changeInPersonForm", createPersonForm);
+  emits("update:modelValue", createPersonForm);
+});
+</script>
+
+<template>
+  <FormField label="Person Name">
+    <FormControl
+      v-model="createPersonForm.personName"
+      type="text"
+      :icon="mdiAccount"
+      placeholder="Mathew"
+    />
+  </FormField>
+  <FormField label="Baptism Name">
+    <FormControl
+      v-model="createPersonForm.baptismName"
+      type="text"
+      placeholder="Matt"
+    />
+  </FormField>
+  <FormField label="Gender">
+    <FormCheckRadioGroup
+      v-model="createPersonForm.gender"
+      name="sample-radio"
+      type="radio"
+      :options="{ M: 'Male', F: 'Female' }"
+    />
+  </FormField>
+  <FormField label="Date of Birth">
+    <FormControl
+      v-model="createPersonForm.dob"
+      type="text"
+      placeholder="YYYY-MM-DD"
+    />
+  </FormField>
+  <FormField label="Phone">
+    <FormControl
+      v-model="createPersonForm.phone"
+      type="tel"
+      placeholder="04792662745"
+    />
+  </FormField>
+  <ForaneSingleSelectBox
+    v-if="props.isFamilyRequired"
+    heading="Forane"
+    class="multipleSelectAddressBox"
+    @change-in-forane="changeInFormForane"
+  />
+  <ParishByForaneSingleSelectBox
+    v-if="props.isFamilyRequired"
+    heading="Parish"
+    :selected-forane="formForane"
+    class="multipleSelectAddressBox"
+    @change-in-parish="changeInFormParish"
+  />
+  <FamilyByParishSingleSelectBox
+    v-if="props.isFamilyRequired"
+    heading="Family"
+    :selected-parish="formParish"
+    class="multipleSelectAddressBox"
+    @change-in-family="changeInFormFamily"
+  />
+  <RelationSingleSelectBox
+    heading="Relation"
+    class="multipleSelectAddressBox"
+    @change-in-relation="changeInFormRelation"
+  />
+</template>
+
+<style scoped>
+.multipleSelectAddressBox :deep(.multiselect-theme) {
+  --ms-bg: #1e293b;
+  --ms-dropdown-bg: #1e293b;
+  --ms-dropdown-border-color: #1e293b;
+
+  --ms-py: 0.757rem;
+}
+</style>

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

@@ -0,0 +1,72 @@
+<script setup>
+import { computed, watchEffect } from "vue";
+import gql from "graphql-tag";
+import { useLazyQuery } from "@vue/apollo-composable";
+
+import FormField from "@/components/FormField.vue";
+import SingleSelectBox from "@/components/SearchBoxes/SingleSelectBox.vue";
+
+import { familyAllFamilyListQuery } from "@/externalized-data/graphqlQueries";
+
+const props = defineProps({
+  heading: {
+    type: String,
+    default: "Select Family",
+  },
+  selectedParish: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const emits = defineEmits(["changeInFamily"]);
+
+const ACTIVE_FAMILY_BY_PARISH_LIST_QUERY = gql`
+  ${familyAllFamilyListQuery}
+`;
+
+const {
+  result: activeFamilyList,
+  load: activeFamilyListLoad,
+  refetch: activeFamilyListRefetch,
+} = useLazyQuery(ACTIVE_FAMILY_BY_PARISH_LIST_QUERY, () => ({
+  parishId: props.selectedParish?.id,
+}));
+
+const loadFamilies = computed((query, setOptions) => {
+  return (
+    activeFamilyList.value?.getAllFamiliesByParish?.map((entity) => {
+      return {
+        id: entity.familyId,
+        label: entity.familyName,
+        value: {
+          id: entity.familyId,
+          label: entity.familyName,
+        },
+      };
+    }) ?? []
+  );
+});
+
+watchEffect(() => {
+  console.log(props.selectedParish);
+  activeFamilyListLoad();
+});
+
+const changeInFamily = (entity) => {
+  emits("changeInFamily", entity);
+};
+</script>
+
+<template>
+  <FormField :label="props.heading">
+    <SingleSelectBox
+      :options="loadFamilies"
+      :can-deselect="false"
+      :can-clear="false"
+      :searchable="true"
+      :meta-label-enabled="false"
+      @value-change="changeInFamily"
+    />
+  </FormField>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup>
+import { computed, ref } from "vue";
+import gql from "graphql-tag";
+import { useLazyQuery } from "@vue/apollo-composable";
+
+import FormField from "@/components/FormField.vue";
+import SingleSelectBox from "@/components/SearchBoxes/SingleSelectBox.vue";
+
+import { personAllRelationListQuery } from "@/externalized-data/graphqlQueries";
+
+const props = defineProps({
+  heading: {
+    type: String,
+    default: "Select Relation",
+  },
+});
+
+const emits = defineEmits(["changeInRelation"]);
+
+const RELATION_LIST_QUERY = gql`
+  ${personAllRelationListQuery}
+`;
+
+const {
+  result: formRelationList,
+  load: formRelationListLoad,
+  refetch: formRelationListRefetch,
+} = useLazyQuery(RELATION_LIST_QUERY);
+formRelationListLoad();
+
+const loadRelations = computed((query, setOptions) => {
+  return (
+    formRelationList.value?.getAllRelations?.map((entity) => {
+      return {
+        id: entity.relationId,
+        label: entity.relationName,
+        value: {
+          id: entity.relationId,
+          label: entity.relationName,
+        },
+      };
+    }) ?? []
+  );
+});
+
+const changeInRelation = (entity) => {
+  emits("changeInRelation", entity);
+};
+</script>
+
+<template>
+  <FormField :label="props.heading">
+    <SingleSelectBox
+      :options="loadRelations"
+      :can-deselect="false"
+      :can-clear="false"
+      :searchable="true"
+      :meta-label-enabled="false"
+      @value-change="changeInRelation"
+    />
+  </FormField>
+</template>