feat: Notes and Status Dropdown (#1316)

* collapsable notes panel * collapsable status panel * added RTL support * resize buttons, added notes count * moved status and assigned to in the status header * fix spacing issue and adjusting on small screens * added internationalization * fix syntax error
bcgov · Apr 8, 2024 · 871c7b3 · 871c7b3
1 parent 6a7b4f5
commit 871c7b3
Show file tree

Hide file tree

Showing 21 changed files with 236 additions and 98 deletions.
diff --git a/app/frontend/src/components/forms/FormSubmission.vue b/app/frontend/src/components/forms/FormSubmission.vue
@@ -185,9 +185,6 @@ export default {
           class="review-form"
           :disabled="!submissionReadOnly"
         >
-          <h2 class="review-heading" :class="{ 'dir-rtl': isRTL }" :lang="lang">
-            {{ $t('trans.formSubmission.status') }}
-          </h2>
           <StatusPanel
             :submission-id="submissionId"
             :form-id="form.id"

diff --git a/app/frontend/src/components/forms/submission/NotesPanel.vue b/app/frontend/src/components/forms/submission/NotesPanel.vue
@@ -22,6 +22,7 @@ export default {
       notesPerPage: 3,
       page: 1,
       showNoteField: false,
+      showNotesContent: false,
     };
   },
   computed: {
@@ -82,22 +83,39 @@ export default {
     type="list-item-two-line"
     class="bgtrans"
   >
-    <div class="mt-6 d-flex flex-md-row justify-space-between">
+    <div
+      class="d-flex flex-md-row justify-space-between"
+      @click="showNotesContent = !showNotesContent"
+    >
       <div cols="12" sm="6">
         <h2 class="note-heading" :lang="lang">
           {{ $t('trans.notesPanel.notes') }}
+          <v-icon>{{
+            showNotesContent
+              ? 'mdi:mdi-chevron-down'
+              : isRTL
+              ? 'mdi:mdi-chevron-left'
+              : 'mdi:mdi-chevron-right'
+          }}</v-icon>
         </h2>
       </div>
-      <div :class="{ 'text-left': isRTL }">
+
+      <div :class="[{ 'text-left': isRTL }, 'd-flex', 'align-items-center']">
+        <!-- Text for number of notes -->
+        <span class="notes-text" :lang="lang">
+          <strong>{{ $t('trans.notesPanel.totalNotes') }}</strong>
+          {{ notes.length }}
+        </span>
         <v-tooltip location="bottom">
           <template #activator="{ props }">
             <v-btn
-              class="mx-1"
+              class="notes-button"
               color="primary"
               icon
               size="x-small"
               v-bind="props"
-              @click="showNoteField = true"
+              @click.stop="showNoteField = true"
+              @click="showNotesContent = true"
             >
               <v-icon icon="mdi:mdi-plus"></v-icon>
             </v-btn>
@@ -106,69 +124,93 @@ export default {
         </v-tooltip>
       </div>
     </div>
+    <div v-if="showNotesContent" class="mt-4">
+      <v-form v-if="showNoteField">
+        <v-textarea
+          v-model="newNote"
+          :class="{ 'dir-rtl': isRTL }"
+          :rules="[(v) => v.length <= 4000 || $t('trans.notesPanel.maxChars')]"
+          counter
+          auto-grow
+          density="compact"
+          variant="outlined"
+          solid
+          :lang="lang"
+        />
+        <v-row>
+          <v-col>
+            <v-btn
+              class="wide-button"
+              color="primary"
+              variant="outlined"
+              @click="showNoteField = false"
+            >
+              <span :lang="lang">{{ $t('trans.notesPanel.cancel') }}</span>
+            </v-btn>
+            <v-btn
+              class="wide-button"
+              color="primary"
+              data-test="btn-add-note"
+              :disabled="!newNote"
+              @click="addNote"
+            >
+              <span :lang="lang">{{ $t('trans.notesPanel.addNote') }}</span>
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-form>
 
-    <v-form v-if="showNoteField">
-      <div class="mb-2" :class="{ 'dir-rtl': isRTL }" :lang="lang">
-        {{ $t('trans.notesPanel.note') }}
-      </div>
-      <v-textarea
-        v-model="newNote"
-        :class="{ 'dir-rtl': isRTL }"
-        :rules="[(v) => v.length <= 4000 || $t('trans.notesPanel.maxChars')]"
-        counter
-        auto-grow
-        density="compact"
-        variant="outlined"
-        solid
-        :lang="lang"
-      />
-      <v-row>
-        <v-col cols="12" sm="6" xl="4">
-          <v-btn
-            block
-            color="primary"
-            variant="outlined"
-            @click="showNoteField = false"
-          >
-            <span :lang="lang">{{ $t('trans.notesPanel.cancel') }}</span>
-          </v-btn>
-        </v-col>
-        <v-col cols="12" sm="6" xl="4" order="first" order-sm="last">
-          <v-btn
-            block
-            color="primary"
-            data-test="btn-add-note"
-            :disabled="!newNote"
-            @click="addNote"
-          >
-            <span :lang="lang">{{ $t('trans.notesPanel.addNote') }}</span>
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-form>
-
-    <v-data-iterator :items="notes" :items-per-page="notesPerPage" :page="page">
-      <template #default="props">
-        <ul class="mt-5" :class="{ 'dir-rtl': isRTL, 'mr-2': isRTL }">
-          <li v-for="note in props.items" :key="note.id">
-            <strong>
-              {{ $filters.formatDateLong(note.raw.createdAt) }} -
-              {{ note.raw.createdBy }}
-            </strong>
-            <br />
-            {{ note.raw.note }}
-          </li>
-        </ul>
-      </template>
-      <template #footer="{ pageCount }">
-        <v-pagination v-model="page" :length="pageCount"></v-pagination>
-      </template>
-    </v-data-iterator>
+      <v-data-iterator
+        :items="notes"
+        :items-per-page="notesPerPage"
+        :page="page"
+      >
+        <template #default="props">
+          <ul class="mt-5" :class="{ 'dir-rtl': isRTL, 'mr-2': isRTL }">
+            <li v-for="note in props.items" :key="note.id">
+              <strong>
+                {{ $filters.formatDateLong(note.raw.createdAt) }} -
+                {{ note.raw.createdBy }}
+              </strong>
+              <br />
+              {{ note.raw.note }}
+            </li>
+          </ul>
+        </template>
+        <template #footer="{ pageCount }">
+          <v-pagination v-model="page" :length="pageCount"></v-pagination>
+        </template>
+      </v-data-iterator>
+    </div>
   </v-skeleton-loader>
 </template>
 
 <style lang="scss" scoped>
 .note-heading {
   color: #003366;
+  margin-bottom: 0;
+  .v-icon {
+    transition: transform 0.3s ease;
+  }
+}
+
+.notes-text {
+  margin-right: 15px;
+  margin-left: 15px;
+}
+
+.notes-button {
+  margin-right: 1px;
+  margin-left: 1px;
+}
+
+.wide-button {
+  width: 200px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+.wide-button:last-child {
+  margin-right: 0;
 }
 </style>
diff --git a/app/frontend/src/components/forms/submission/StatusPanel.vue b/app/frontend/src/components/forms/submission/StatusPanel.vue
@@ -41,6 +41,7 @@ export default {
       statusToSet: '',
       valid: false,
       showSendConfirmEmail: false,
+      showStatusContent: false,
     };
   },
   computed: {
@@ -299,13 +300,40 @@ export default {
 
 <template>
   <div :class="{ 'dir-rtl': isRTL }">
+    <div class="flex-container" @click="showStatusContent = !showStatusContent">
+      <h2 class="status-heading" :class="{ 'dir-rtl': isRTL }" :lang="lang">
+        {{ $t('trans.formSubmission.status') }}
+        <v-icon>{{
+          showStatusContent
+            ? 'mdi:mdi-chevron-down'
+            : isRTL
+            ? 'mdi:mdi-chevron-left'
+            : 'mdi:mdi-chevron-right'
+        }}</v-icon>
+      </h2>
+      <!-- Show <p> here for screens greater than 959px  -->
+      <p class="hide-on-narrow" :lang="lang">
+        <span :class="isRTL ? 'status-details-rtl' : 'status-details'">
+          <strong>{{ $t('trans.statusPanel.currentStatus') }}</strong>
+          {{ currentStatus.code }}
+        </span>
+        <span :class="isRTL ? 'status-details-rtl' : 'status-details'">
+          <strong>{{ $t('trans.statusPanel.assignedTo') }}</strong>
+          {{ currentStatus.user ? currentStatus.user.fullName : 'N/A' }}
+          <span v-if="currentStatus.user"
+            >({{ currentStatus.user.email }})</span
+          >
+        </span>
+      </p>
+    </div>
     <v-skeleton-loader
       :loading="loading"
       type="list-item-two-line"
       class="bgtrans"
     >
-      <div class="d-flex flex-column flex-1-1-100">
-        <p :lang="lang">
+      <div v-if="showStatusContent" class="d-flex flex-column flex-1-1-100">
+        <!-- Show <p> here for screens less than 960px  -->
+        <p class="hide-on-wide" :lang="lang">
           <strong>{{ $t('trans.statusPanel.currentStatus') }}</strong>
           {{ currentStatus.code }}
           <br />
@@ -315,7 +343,6 @@ export default {
             >({{ currentStatus.user.email }})</span
           >
         </p>
-
         <v-form
           ref="statusPanelForm"
           v-model="valid"
@@ -444,12 +471,12 @@ export default {
           </div>
 
           <v-row class="mt-3">
-            <v-col cols="12" sm="6" xl="4">
+            <v-col>
               <v-dialog v-model="historyDialog" width="1200">
                 <template #activator="{ props }">
                   <v-btn
                     id="btnText"
-                    block
+                    class="wide-button"
                     variant="outlined"
                     color="textLink"
                     v-bind="props"
@@ -458,6 +485,14 @@ export default {
                       $t('trans.statusPanel.viewHistory')
                     }}</span>
                   </v-btn>
+                  <v-btn
+                    class="wide-button"
+                    :disabled="!statusToSet"
+                    color="primary"
+                    @click="updateStatus"
+                  >
+                    <span>{{ statusAction }}</span>
+                  </v-btn>
                 </template>
 
                 <v-card v-if="historyDialog">
@@ -489,17 +524,6 @@ export default {
                 </v-card>
               </v-dialog>
             </v-col>
-
-            <v-col cols="12" sm="6" xl="4" order="first" order-sm="last">
-              <v-btn
-                block
-                :disabled="!statusToSet"
-                color="primary"
-                @click="updateStatus"
-              >
-                <span>{{ statusAction }}</span>
-              </v-btn>
-            </v-col>
           </v-row>
         </v-form>
       </div>
@@ -512,4 +536,60 @@ export default {
   width: 100%;
   white-space: normal;
 }
+
+.status-heading {
+  color: #003366;
+  margin-bottom: 0;
+  .v-icon {
+    transition: transform 0.3s ease;
+  }
+}
+
+.hide-on-narrow {
+  margin: 0;
+}
+
+@media (max-width: 959px) {
+  .hide-on-narrow {
+    display: none;
+  }
+}
+
+@media (min-width: 960px) {
+  .hide-on-wide {
+    display: none;
+  }
+}
+
+.wide-button {
+  width: 200px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+.wide-button:last-child {
+  margin-right: 0;
+}
+
+/* Uncomment this to widen buttons for small screens */
+/* @media (max-width: 599px) {
+  .wide-button {
+    width: 100%;
+  }
+} */
+
+.flex-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.status-details-rtl {
+  margin-right: 15px;
+}
+
+.status-details {
+  margin-left: 15px;
+}
 </style>
diff --git a/app/frontend/src/internationalization/trans/chefs/ar/ar.json b/app/frontend/src/internationalization/trans/chefs/ar/ar.json
@@ -585,7 +585,8 @@
     "fetchConsoleErrMsg": "خطأ في إضافة الملاحظة:",
     "notes": "ملحوظات",
     "note": "ملحوظة",
-    "maxChars": "4000 حرف كحد أقصى"
+    "maxChars": "4000 حرف كحد أقصى",
+    "totalNotes": "مجموع الملاحظات:"
   },
   "statusPanel": {
     "currentStatus": "الحالة الحالية:",