Group suborg

src/components/CreateOrgs.vue

@@ -19,7 +19,7 @@
               <PvDropdown
                 v-model="orgType"
                 input-id="org-type"
-                :options="isLevante ? levanteOrgTypes : orgTypes"
+                :options="orgTypes"
                 show-clear
                 option-label="singular"
                 placeholder="Select an org type"
@@ -31,6 +31,39 @@
           </div>
         </div>
 
+        <div v-if="orgType?.singular === 'group'" class="flex flex-row align-items-center justify-content-start gap-2">
+          <PvCheckbox v-model="groupHasParentOrg" input-id="chbx-group-parent-org" :binary="true" />
+          <label for="chbx-group-parent-org">This group belongs to a parent organization</label>
+        </div>
+
+        <OrgPicker
+          v-if="groupHasParentOrg"
+          for-parent-org="true"
+          class="mt-4"
+          @selection="selection($event)"
+        />
+
+        <!-- <div v-if="groupHasParentOrg" class="grid mt-4">
+          <div class="col-12 md:col-6 lg:col-4">
+            <span class="p-float-label">
+              <PvDropdown
+                v-model="selectedTestOrg"
+                input-id="parent-org"
+                :options="testOrgs"
+                show-clear
+                option-label="label"
+                option-group-label="label"
+                option-group-children="items"
+                placeholder="Select a parent organization"
+                filter
+                class="w-full"
+                data-cy="dropdown-parent-org"
+              />
+              <label for="parent-org">Parent Organization<span id="required-asterisk">*</span></label>
+            </span>
+          </div>
+        </div> -->
+
         <div v-if="parentOrgRequired" class="grid mt-4">
           <div class="col-12 md:col-6 lg:col-4">
             <span class="p-float-label">
@@ -214,10 +247,14 @@ import useDistrictSchoolsQuery from '@/composables/queries/useDistrictSchoolsQue
 import useSchoolClassesQuery from '@/composables/queries/useSchoolClassesQuery';
 import useGroupsListQuery from '@/composables/queries/useGroupsListQuery';
 import { isLevante } from '@/helpers';
+import OrgPicker from '@/components/OrgPicker.vue';
+import _toPairs from 'lodash/toPairs';
+import _isEmpty from 'lodash/isEmpty';
 
 const initialized = ref(false);
 const isTestData = ref(false);
 const isDemoData = ref(false);
+const groupHasParentOrg = ref(false);
 const toast = useToast();
 const authStore = useAuthStore();
 const { roarfirekit } = storeToRefs(authStore);
@@ -233,6 +270,13 @@ const state = reactive({
   tags: [],
 });
 
+const groupParentOrgs = reactive({
+  districts: [],
+  schools: [],
+  classes: [],
+  groups: [],
+});
+
 let unsubscribe;
 const initTable = () => {
   if (unsubscribe) unsubscribe();
@@ -297,8 +341,6 @@ const orgTypes = [
   { firestoreCollection: 'groups', singular: 'group' },
 ];
 
-const levanteOrgTypes = [{ firestoreCollection: 'groups', singular: 'group' }];
-
 const orgType = ref();
 const orgTypeLabel = computed(() => {
   if (orgType.value) {
@@ -327,6 +369,15 @@ const grades = [
   { name: 'Grade 12', value: 12 },
 ];
 
+const selection = (selected) => {
+  console.log('groupParentOrgs before selection:', groupParentOrgs);
+  for (const [key, value] of _toPairs(toRaw(selected))) {
+    groupParentOrgs[key] = value;
+  }
+
+  console.log('groupParentOrgs after selection:', groupParentOrgs);
+};
+
 const allTags = computed(() => {
   const districtTags = (districts.value ?? []).map((org) => org.tags);
   const schoolTags = (districts.value ?? []).map((org) => org.tags);
@@ -372,6 +423,24 @@ const removeAddress = () => {
 const submit = async () => {
   submitted.value = true;
   const isFormValid = await v$.value.$validate();
+
+  if (groupHasParentOrg.value) {
+    const rawParentOrgs = toRaw(groupParentOrgs);
+    console.log('isEmpty result:', _isEmpty(rawParentOrgs.districts));
+    console.log('districts:', rawParentOrgs.districts);
+
+    if (
+      _isEmpty(rawParentOrgs.districts) &&
+      _isEmpty(rawParentOrgs.schools) &&
+      _isEmpty(rawParentOrgs.classes) &&
+      _isEmpty(rawParentOrgs.groups)
+    ) {
+      toast.add({ severity: 'error', summary: 'Error', detail: 'Please select a parent organization', life: 3000 });
+      submitted.value = false;
+      return;
+    }
+  }
+
   if (isFormValid) {
     let orgData = {
       name: state.orgName,
@@ -390,33 +459,18 @@ const submit = async () => {
       orgData.districtId = toRaw(state.parentDistrict).id;
     }
 
-    if (isLevante) {
-      await roarfirekit.value
-        .createLevanteGroup(orgData)
-        .then(() => {
-          toast.add({ severity: 'success', summary: 'Success', detail: 'Org created', life: 3000 });
-          submitted.value = false;
-          resetForm();
-        })
-        .catch((error) => {
-          toast.add({ severity: 'error', summary: 'Error', detail: error.message, life: 3000 });
-          console.error('Error creating org:', error);
-          submitted.value = false;
-        });
-    } else {
-      await roarfirekit.value
-        .createOrg(orgType.value.firestoreCollection, orgData, isTestData.value, isDemoData.value)
-        .then(() => {
-          toast.add({ severity: 'success', summary: 'Success', detail: 'Org created', life: 3000 });
-          submitted.value = false;
-          resetForm();
-        })
-        .catch((error) => {
-          toast.add({ severity: 'error', summary: 'Error', detail: error.message, life: 3000 });
-          console.error('Error creating org:', error);
-          submitted.value = false;
-        });
-    }
+    await roarfirekit.value
+      .createOrg(orgType.value.firestoreCollection, orgData, isTestData.value, isDemoData.value)
+      .then((data) => {
+        toast.add({ severity: 'success', summary: 'Success', detail: 'Org created', life: 3000 });
+        submitted.value = false;
+        resetForm();
+      })
+      .catch((error) => {
+        toast.add({ severity: 'error', summary: 'Error', detail: error.message, life: 3000 });
+        console.error('Error creating org:', error);
+        submitted.value = false;
+      });
   } else {
     console.error('Form is invalid');
   }

src/components/OrgPicker.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="grid">
     <div class="col-12 md:col-6">
-      <PvPanel class="m-0 p-0" header="Select organizations here">
+      <PvPanel class="m-0 p-0" :header="`Select ${forParentOrg ? 'parent organization' : 'organization(s)'}`">
         <PvTabView v-if="claimsLoaded" v-model:activeIndex="activeIndex" class="m-0 p-0" lazy>
           <PvTabPanel v-for="orgType in orgHeaders" :key="orgType" :header="orgType.header">
             <div class="grid column-gap-3">
@@ -47,7 +47,7 @@
               <PvListbox
                 v-model="selectedOrgs[activeOrgType]"
                 :options="orgData"
-                multiple
+                :multiple="!forParentOrg"
                 :meta-key-selection="false"
                 option-label="name"
                 class="w-full"
@@ -65,7 +65,7 @@
         </PvTabView>
       </PvPanel>
     </div>
-    <div class="col-12 md:col-6">
+    <div v-if="!forParentOrg" class="col-12 md:col-6">
       <PvPanel class="h-full" header="Selected organizations">
         <PvScrollPanel style="width: 100%; height: 26rem">
           <div v-for="orgKey in Object.keys(selectedOrgs)" :key="orgKey">
@@ -121,6 +121,11 @@ const props = defineProps({
       };
     },
   },
+  forParentOrg: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const selectedOrgs = reactive({
@@ -238,6 +243,10 @@ const { data: orgData } = useQuery({
   staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
+watch(orgData, (newValue) => {
+  console.log('orgData: ', newValue);
+});
+
 const isSelected = (orgType, orgId) => {
   return selectedOrgs[orgType].map((org) => org.id).includes(orgId);
 };

src/helpers/query/orgs.js

@@ -274,8 +274,12 @@ export const orgFetcher = async (
     } else if (orgType === 'schools') {
       console.log(`Fetching ${orgType} for ${districtId}`);
     }
+
+    const response = axiosInstance.post(':runQuery', requestBody).then(({ data }) => {
+      return mapFields(data);
+      })
 
-    return axiosInstance.post(':runQuery', requestBody).then(({ data }) => mapFields(data));
+    return response;
   } else {
     if (['groups', 'families'].includes(orgType)) {
       const promises = (adminOrgs.value[orgType] ?? []).map((orgId) => {