Reference materials rule fix (#367)

* Fix reviewer materials length rule

* Add loading indicators to reviewer materials

Author: naglepuff

client/src/api/api.ts

@@ -634,10 +634,10 @@ async function getVettingDetailsForUser(userId: number) {
 }
 
 async function createOrUpdateVettingDetailsForUser(userId: number, referenceMaterials: string) {
-  return await axiosInstance.post<UpdateVettingDetails, VettingDetails>(
+  return (await axiosInstance.post<VettingDetails>(
     `/vetting/user/${userId}`,
     { 'reference_materials': referenceMaterials }
-  );
+  )).data;
 }
 
 export interface Contour {

client/src/components/ReferenceMaterialsDialog.vue

@@ -1,26 +1,40 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { createOrUpdateVettingDetailsForUser } from '@api/api';
 import useState from '@use/useState';
 
-const { currentUserId, reviewerMaterials } = useState();
+const { currentUserId, reviewerMaterials, loadReviewerMaterials } = useState();
 
 const referenceDialog = ref(false);
 const reviewerMaterialsDisplay = ref('');
+const loadingMaterials = ref(false);
 const valid = ref(true);
 const error = ref('');
 
+
 async function saveReviewerMaterials() {
   if (!currentUserId.value || !valid.value) return;
   try {
+    loadingMaterials.value = true;
     const details = await createOrUpdateVettingDetailsForUser(currentUserId.value, reviewerMaterialsDisplay.value);
     reviewerMaterials.value = details.reference_materials;
+    loadingMaterials.value = false;
+    error.value = '';
   } catch(err) {
     error.value = 'There was a problem saving your changes. Please try again';
   }
 }
 
+async function fetchMaterials() {
+  loadingMaterials.value = true;
+  await loadReviewerMaterials();
+  loadingMaterials.value = false;
+}
+
 watch(reviewerMaterials, () => reviewerMaterialsDisplay.value = reviewerMaterials.value);
+watch(currentUserId, async () => await fetchMaterials());
+
+onMounted(fetchMaterials);
 
 </script>
 
@@ -39,6 +53,12 @@ watch(reviewerMaterials, () => reviewerMaterialsDisplay.value = reviewerMaterial
     <v-card>
       <v-card-title>
         Reference Materials
+        <v-progress-circular
+          v-if="loadingMaterials"
+          indeterminate
+          size="24"
+          color="primary"
+        />
       </v-card-title>
       <v-card-text>
         <v-form
@@ -48,8 +68,9 @@ watch(reviewerMaterials, () => reviewerMaterialsDisplay.value = reviewerMaterial
             v-model="reviewerMaterialsDisplay"
             placeholder="Describe any reference materials used during labeling"
             :rules="[
-              v => v.length <= 2000 || 'Only 2000 characters are allowed'
+              v => (v?.length || 0) <= 2000 || 'Only 2000 characters are allowed'
             ]"
+            :disabled="loadingMaterials"
             counter="2000"
           />
           <span
@@ -68,7 +89,7 @@ watch(reviewerMaterials, () => reviewerMaterialsDisplay.value = reviewerMaterial
         </v-btn>
         <v-btn
           color="primary"
-          :disabled="!valid"
+          :disabled="!valid || loadingMaterials"
           @click="saveReviewerMaterials"
         >
           Save