fix/Edit Administrations

src/components/CreateAdministration.vue

@@ -111,11 +111,12 @@
         <TaskPicker
           :all-variants="variantsByTaskId"
           :input-variants="preSelectedVariants"
+          :pre-existing-assessment-info="preExistingAssessmentInfo"
           @variants-changed="handleVariantsChanged"
         />
         <div v-if="!isLevante" class="mt-2 flex w-full">
           <ConsentPicker :legal="state.legal" @consent-selected="handleConsentSelected" />
-          <small v-if="submitted && !isLevante && noConsent === ''" class="p-error mt-2"
+          <small v-if="submitted && v$.consent.$invalid && v$.consent.$invalid" class="p-error mt-2"
             >Please select a consent/assent form.</small
           >
         </div>
@@ -164,7 +165,7 @@ import { onMounted, reactive, ref, toRaw, computed, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import _filter from 'lodash/filter';
 import _isEmpty from 'lodash/isEmpty';
 import _toPairs from 'lodash/toPairs';
@@ -192,6 +193,8 @@ const props = defineProps({
   adminId: { type: String, required: false, default: null },
 });
 
+const queryClient = useQueryClient();
+
 const header = computed(() => {
   if (props.adminId) {
     return 'Edit an administration';
@@ -215,6 +218,10 @@ const submitLabel = computed(() => {
   return 'Create Administration';
 });
 
+const preExistingAssessmentInfo = computed(() => {
+  return _get(preExistingAdminInfo.value, 'assessments', []);
+});
+
 const router = useRouter();
 const toast = useToast();
 const initialized = ref(false);
@@ -396,16 +403,16 @@ const minEndDate = computed(() => {
   return new Date();
 });
 
-let noConsent = '';
+let noConsent = ref('');
 
 const rules = {
   administrationName: { required },
   administrationPublicName: { required },
   dateStarted: { required },
   dateClosed: { required },
   sequential: { required },
-  consent: { requiredIf: requiredIf(!isLevante && noConsent !== '') },
-  assent: { requiredIf: requiredIf(!isLevante && noConsent !== '') },
+  consent: { requiredIf: requiredIf(!isLevante && noConsent.value === '') },
+  assent: { requiredIf: requiredIf(!isLevante && noConsent.value === '') },
 };
 
 const v$ = useVuelidate(rules, state);
@@ -448,13 +455,16 @@ const handleVariantsChanged = (newVariants) => {
 
 const handleConsentSelected = (newConsentAssent) => {
   if (newConsentAssent !== 'No Consent') {
-    noConsent = '';
+    noConsent.value = '';
     state.consent = newConsentAssent.consent;
     state.assent = newConsentAssent.assent;
     state.amount = newConsentAssent.amount;
     state.expectedTime = newConsentAssent.expectedTime;
   } else {
-    noConsent = newConsentAssent;
+    // Set to "No Consent"
+    noConsent.value = newConsentAssent;
+    state.consent = newConsentAssent;
+    state.assent = newConsentAssent;
   }
 };
 
@@ -551,10 +561,6 @@ const submit = async () => {
             });
             administrationQueryKeyIndex.value += 1;
 
-            // TODO: Invalidate for administrations query.
-            // This does not work in prod for some reason.
-            // queryClient.invalidateQueries({ queryKey: ['administrations'] })
-
             router.push({ name: 'Home' });
           })
           .catch((error) => {
@@ -595,6 +601,8 @@ unsubscribe = authStore.$subscribe(async (mutation, state) => {
 
 onMounted(async () => {
   if (roarfirekit.value.restConfig) init();
+  // Invalidate the query to allow a re-fetch of the data when editing an administration
+  await queryClient.invalidateQueries(['administration', props.adminId]);
 });
 
 watch([preExistingAdminInfo, allVariants], ([adminInfo, allVariantInfo]) => {
@@ -614,9 +622,53 @@ watch([preExistingAdminInfo, allVariants], ([adminInfo, allVariantInfo]) => {
       }
     });
     state.legal = adminInfo.legal;
+    state.consent = adminInfo?.legal?.consent ?? null;
+    state.assent = adminInfo?.legal?.assent ?? null;
+
+    if (state.consent === 'No Consent') {
+      noConsent.value = state.consent;
+    }
   }
 });
 
+// Set up watchers for changes to orgs as a result of editing an administration
+watch(districtsToGrab, async (updatedValue) => {
+  // Invalidate the districts query and re-fetch the data based on the updated value
+  await queryClient.invalidateQueries(['districts', props.adminId]);
+  preDistricts.value = queryClient.fetchQuery(['districts', props.adminId], () => fetchDocsById(updatedValue));
+  state.districts = (await preDistricts.value) ?? [];
+});
+
+watch(schoolsToGrab, async (updatedValue) => {
+  // Invalidate the schools query and re-fetch the data based on the updated value
+  await queryClient.invalidateQueries(['schools', 'minimalOrgs', props.adminId]);
+  preSchools.value = queryClient.fetchQuery(['schools', 'minimalOrgs', props.adminId], () =>
+    fetchDocsById(updatedValue),
+  );
+  state.schools = (await preSchools.value) ?? [];
+});
+
+watch(classesToGrab, async (updatedValue) => {
+  // Invalidate the classes query and re-fetch the data based on the updated value
+  await queryClient.invalidateQueries(['classes', 'minimal', props.adminId]);
+  preClasses.value = queryClient.fetchQuery(['classes', 'minimal', props.adminId], () => fetchDocsById(updatedValue));
+  state.classes = (await preClasses.value) ?? [];
+});
+
+watch(groupsToGrab, async (updatedValue) => {
+  // Invalidate the groups query and re-fetch the data based on the updated value
+  await queryClient.invalidateQueries(['groups', props.adminId]);
+  preGroups.value = queryClient.fetchQuery(['groups', props.adminId], () => fetchDocsById(updatedValue));
+  state.groups = (await preGroups.value) ?? [];
+});
+
+watch(familiesToGrab, async (updatedValue) => {
+  // Invalidate the families query and re-fetch the data based on the updated value
+  await queryClient.invalidateQueries(['families', props.adminId]);
+  preFamilies.value = queryClient.fetchQuery(['families', props.adminId], () => fetchDocsById(updatedValue));
+  state.families = (await preFamilies.value) ?? [];
+});
+
 function findVariantWithParams(variants, params) {
   console.log(`attempting to find variant of ${variants[0].task.id}`);
 
@@ -625,7 +677,6 @@ function findVariantWithParams(variants, params) {
     const cleanInputParams = removeNull(params);
     return _isEqual(cleanInputParams, cleanVariantParams);
   });
-
   if (found) {
     console.log('found', found);
   }

src/components/TaskPicker.vue

@@ -143,7 +143,7 @@
   </PvPanel>
 </template>
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import _filter from 'lodash/filter';
 import _findIndex from 'lodash/findIndex';
 import _debounce from 'lodash/debounce';
@@ -188,6 +188,15 @@ watch(
   () => props.inputVariants,
   (newVariants) => {
     selectedVariants.value = _union(selectedVariants.value, newVariants);
+
+    // Update the conditions for the variants that were pre-existing
+    selectedVariants.value = selectedVariants.value.map((variant) => {
+      const preExistingInfo = props.preExistingAssessmentInfo.find((info) => info?.variantId === variant?.id);
+      if (preExistingInfo) {
+        return { ...variant, variant: { ...variant?.variant, conditions: preExistingInfo.conditions } };
+      }
+      return variant;
+    });
   },
 );