Ofmcc 658 add request single facility (#48)

* Updated facility logic. Moved isFormComplete flag out of request. Added new component for labels. * Fixed attributes. * Added Select All. --------- Co-authored-by: weskubo-cgi <[email protected]>
bcgov · Nov 28, 2023 · 7f997b8 · 7f997b8
1 parent 0eecc35
commit 7f997b8
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 50 deletions.
diff --git a/frontend/src/components/messages/NewRequestDialog.vue b/frontend/src/components/messages/NewRequestDialog.vue
@@ -2,10 +2,10 @@
   <v-container>
     <AppDialog v-model="isDisplayed" title="New request" :isLoading="isLoading" persistent max-width="70%" @close="closeNewRequestDialog">
       <template #content>
-        <v-form ref="newRequestForm" v-model="newRequestModel.isFormComplete" class="px-12 mx-8">
+        <v-form ref="newRequestForm" v-model="isFormComplete" class="px-12 mx-8">
           <v-row no-gutters class="mt-4">
-            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blue-text pt-3">
-              <strong>Topic:</strong>
+            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 pt-3">
+              <AppLabel variant="modal">Topic:</AppLabel>
             </v-col>
             <v-col class="v-col-12 v-col-md-9 v-col-xl-10">
               <v-select
@@ -19,50 +19,64 @@
             </v-col>
           </v-row>
           <v-row no-gutters class="mt-2">
-            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blue-text pt-3">
-              <strong>Subject:</strong>
+            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 pt-3">
+              <AppLabel variant="modal">Subject:</AppLabel>
             </v-col>
             <v-col class="v-col-12 v-col-md-9 v-col-xl-10">
               <v-text-field v-model="newRequestModel.subject" placeholder="Brief summary of request" counter maxlength="100" variant="outlined" :rules="rules.required"></v-text-field>
             </v-col>
           </v-row>
           <v-row no-gutters class="mt-2">
-            <v-col class="v-col-12 blue-text pb-0">
-              <strong>Request description:</strong>
+            <v-col class="v-col-12 pb-0">
+              <AppLabel variant="modal">Request description:</AppLabel>
             </v-col>
             <v-col class="v-col-12">
               <v-textarea v-model="newRequestModel.description" placeholder="Detailed description of request" counter maxlength="1000" variant="outlined" :rules="rules.required"></v-textarea>
             </v-col>
           </v-row>
           <v-row no-gutters class="mt-2">
-            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blue-text pt-3">
-              <strong>Facility(s):</strong>
+            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 pt-3">
+              <AppLabel variant="modal">Facility(s):</AppLabel>
             </v-col>
             <v-col class="v-col-12 v-col-md-9 v-col-xl-10">
               <v-select
+                id="selectFacility"
                 v-model="newRequestModel.facilities"
                 placeholder="[selected facility] (add more)"
                 variant="outlined"
+                chips
                 multiple
                 :rules="rules.listIsNotEmpty"
                 :items="facilities"
                 item-title="facilityName"
-                return-object></v-select>
+                return-object>
+                <template v-slot:prepend-item>
+                  <v-list-item title="Select All" @click="toggleFacilities">
+                    <template v-slot:prepend>
+                      <v-checkbox-btn
+                        :color="someFacilitiesSelected ? '#003366' : undefined"
+                        :indeterminate="someFacilitiesSelected && !allFacilitiesSelected"
+                        :model-value="someFacilitiesSelected"></v-checkbox-btn>
+                    </template>
+                  </v-list-item>
+
+                  <v-divider class="mt-2"></v-divider>
+                </template>
+              </v-select>
             </v-col>
           </v-row>
           <v-row no-gutters align="center">
-            <div class="blue-text mr-8">
-              <strong>Supporting documents</strong>
-              (optional):
+            <div class="mr-8">
+              <AppLabel variant="modal">Supporting documents (optional):</AppLabel>
             </div>
             <AppButton id="upload-document" :primary="false" @click="false">
               <v-icon class="mr-3">mdi-tray-arrow-up</v-icon>
               Upload
             </AppButton>
           </v-row>
           <v-row no-gutters class="mt-2">
-            <v-col class="v-col-12 blue-text pb-0">
-              <strong>Preferred method of contact:</strong>
+            <v-col class="v-col-12 pb-0">
+              <AppLabel variant="modal">Preferred method of contact:</AppLabel>
             </v-col>
             <v-col class="v-col-12">
               <v-radio-group v-model="newRequestModel.contactMethod" :rules="rules.required" inline color="primary">
@@ -71,9 +85,9 @@
               </v-radio-group>
             </v-col>
           </v-row>
-          <v-row v-if="newRequestModel.contactMethod == '2'" no-gutters class="mt-2">
-            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 blue-text pt-3">
-              <strong>Business phone:</strong>
+          <v-row v-if="newRequestModel.contactMethod === '2'" no-gutters class="mt-2">
+            <v-col class="v-col-12 v-col-md-3 v-col-xl-2 pt-3">
+              <AppLabel variant="modal">Business phone:</AppLabel>
             </v-col>
             <v-col class="v-col-12 v-col-md-9 v-col-xl-10">
               <v-text-field v-model="newRequestModel.phone" variant="outlined" :rules="[...rules.required, rules.phone]" />
@@ -99,13 +113,14 @@ import { useAppStore } from '@/stores/app'
 import { useMessagesStore } from '@/stores/messages'
 import AppButton from '@/components/ui/AppButton.vue'
 import AppDialog from '@/components/ui/AppDialog.vue'
+import AppLabel from '@/components/ui/AppLabel.vue'
 import rules from '@/utils/rules'
 import NewRequestConfirmationDialog from '@/components/messages/NewRequestConfirmationDialog.vue'
 import alertMixin from '@/mixins/alertMixin'
 
 export default {
   name: 'NewRequestDialog',
-  components: { AppButton, AppDialog, NewRequestConfirmationDialog },
+  components: { AppButton, AppDialog, AppLabel, NewRequestConfirmationDialog },
   mixins: [alertMixin],
   props: {
     show: {
@@ -116,6 +131,7 @@ export default {
   emits: ['close'],
   data() {
     return {
+      isFormComplete: false,
       newRequestModel: {},
       rules,
       isDisplayed: false,
@@ -126,17 +142,28 @@ export default {
   },
   computed: {
     ...mapState(useAppStore, ['requestCategories']),
-    ...mapState(useAuthStore, ['userInfo']),
+    ...mapState(useAuthStore, ['currentFacility', 'userInfo']),
     facilities() {
       return this.userInfo?.facilities
     },
+    allFacilitiesSelected() {
+      return this.newRequestModel.facilities.length == this.facilities.length
+    },
+    someFacilitiesSelected() {
+      return this.newRequestModel.facilities.length > 0
+    },
   },
   watch: {
     show: {
       handler(value) {
         this.isDisplayed = value
       },
     },
+    currentFacility: {
+      handler() {
+        this.setUpDefaultNewRequestModel()
+      },
+    },
   },
   created() {
     this.setUpDefaultNewRequestModel()
@@ -147,11 +174,19 @@ export default {
     setUpDefaultNewRequestModel() {
       this.newRequestModel = {
         contactId: this.userInfo?.contactId,
-        facilities: this.facilities?.filter((facility) => facility.facilityStateCode === 0), // statecode: 0 = Active, 1 = Inactive
+        // Default to the user's current facility
+        facilities: [this.facilities?.find((facility) => facility.facilityId === this.currentFacility.facilityId)],
         contactMethod: '1',
         phone: this.userInfo?.phone,
       }
     },
+    toggleFacilities() {
+      if (this.allFacilitiesSelected) {
+        this.newRequestModel.facilities = []
+      } else {
+        this.newRequestModel.facilities = this.facilities.slice()
+      }
+    },
 
     resetForm() {
       this.$refs.newRequestForm?.reset()
@@ -165,7 +200,7 @@ export default {
 
     async submit() {
       this.$refs.newRequestForm?.validate()
-      if (this.newRequestModel?.isFormComplete) {
+      if (this.isFormComplete) {
         try {
           this.isLoading = true
           const response = await this.createAssistanceRequest(this.newRequestModel)
@@ -189,10 +224,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-.blue-text {
-  color: #003366;
-  font-size: 1.25em;
-}
-</style>
diff --git a/frontend/src/components/messages/ReplyRequestDialog.vue b/frontend/src/components/messages/ReplyRequestDialog.vue
@@ -1,16 +1,14 @@
 <template>
   <v-container>
-    <AppDialog v-model="isDisplayed" :title="`Request ${referenceNumber}`" persistent max-width="50%"
-      @close="closeReplyRequestDialog">
+    <AppDialog v-model="isDisplayed" :title="`Request ${referenceNumber}`" persistent max-width="50%" @close="closeReplyRequestDialog">
       <template #content>
         <v-form ref="replyRequestForm" v-model="isFormComplete" class="px-12 mx-8">
           <v-row no-gutters class="mt-2">
-            <v-col class="v-col-12 blue-text pb-0">
-              <strong>Reply to request:</strong>
+            <v-col class="v-col-12 pb-0">
+              <AppLabel variant="modal">Reply to request:</AppLabel>
             </v-col>
             <v-col class="v-col-12">
-              <v-textarea v-model="message" placeholder="Enter message text" counter
-                maxlength="1000" variant="outlined" :rules="rules.required" :rows="6"></v-textarea>
+              <v-textarea v-model="message" placeholder="Enter message text" counter maxlength="1000" variant="outlined" :rules="rules.required" :rows="6"></v-textarea>
             </v-col>
           </v-row>
           <v-row class="d-flex justify-end mt-0">
@@ -23,11 +21,8 @@
       </template>
       <template #button>
         <v-row class="mt-6" justify="space-around">
-          <AppButton id="cancel-reply-request" :primary="false" size="large" width="200px"
-            @click="closeReplyRequestDialog()"
-            :loading="isLoading">Cancel</AppButton>
-          <AppButton id="submit-reply-request" size="large" width="200px" @click="submit()" :loading="isLoading">Submit
-          </AppButton>
+          <AppButton id="cancel-reply-request" :primary="false" size="large" width="200px" @click="closeReplyRequestDialog()" :loading="isLoading">Cancel</AppButton>
+          <AppButton id="submit-reply-request" size="large" width="200px" @click="submit()" :loading="isLoading">Submit</AppButton>
         </v-row>
       </template>
     </AppDialog>
@@ -39,12 +34,13 @@ import { mapActions } from 'pinia'
 import { useMessagesStore } from '@/stores/messages'
 import AppButton from '@/components/ui/AppButton.vue'
 import AppDialog from '@/components/ui/AppDialog.vue'
+import AppLabel from '@/components/ui/AppLabel.vue'
 import rules from '@/utils/rules'
 import { ASSISTANCE_REQUEST_STATUS_CODES } from '@/utils/constants'
 
 export default {
   name: 'ReplyRequestDialog',
-  components: { AppButton, AppDialog },
+  components: { AppButton, AppDialog, AppLabel },
   props: {
     show: {
       type: Boolean,
@@ -97,7 +93,7 @@ export default {
       this.$emit('close')
     },
 
-    /** 
+    /**
      * Create the reply, update status to assigned, and emit success event.
      */
     async submit() {
@@ -159,14 +155,7 @@ export default {
         console.log(`Failed to update Assistance Request in store - ${error}`)
         throw error
       }
-    }
+    },
   },
 }
 </script>
-
-<style scoped>
-.blue-text {
-  color: #003366;
-  font-size: 1.25em;
-}
-</style>
diff --git a/frontend/src/components/ui/AppLabel.vue b/frontend/src/components/ui/AppLabel.vue
@@ -0,0 +1,38 @@
+<template>
+  <label :class="labelClass">
+    <slot></slot>
+  </label>
+</template>
+<script>
+export default {
+  inheritAttrs: true,
+  props: {
+    variant: {
+      // plain/modal
+      type: String,
+      default: 'plain',
+    },
+  },
+  computed: {
+    labelClass() {
+      return {
+        'modal-label': this.variant === 'modal',
+        'plain-label': this.variant === 'plain',
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.plain-label {
+  color: #000000;
+  font-size: 1.1em;
+  font-weight: 800;
+}
+.modal-label {
+  color: #003366;
+  font-size: 1.1em;
+  font-weight: 800;
+}
+</style>