From a9ecebd17dd670d11f46a7ac2b341afe5033f0d8 Mon Sep 17 00:00:00 2001
From: arcshiftsolutions <arcshiftsolutions@gmail.com>
Date: Fri, 28 Jul 2023 15:28:09 -0700
Subject: [PATCH] Vue3 fixes

---
 .../components/common/CreateNewPenModal.vue   |  49 +++---
 .../common/SearchDemographicModal.vue         |  17 +-
 .../common/StudentDetailsInfoPanel.vue        |  10 +-
 .../NomRollStudentDetailsDisplay.vue          |   2 +-
 .../NomRollStudentSearchResults.vue           |   2 +-
 .../PenRequestBatchDataTable.vue              |   3 +-
 .../PenRequestBatchDisplay.vue                |   2 +-
 .../PenRequestBatchHistoryModal.vue           | 146 +++++++++++-------
 .../components/util/ConfirmationDialog.vue    |   4 +-
 frontend/src/components/util/DataListItem.vue |  50 +++---
 10 files changed, 161 insertions(+), 124 deletions(-)

diff --git a/frontend/src/components/common/CreateNewPenModal.vue b/frontend/src/components/common/CreateNewPenModal.vue
index c6729c201..555905faf 100644
--- a/frontend/src/components/common/CreateNewPenModal.vue
+++ b/frontend/src/components/common/CreateNewPenModal.vue
@@ -6,18 +6,14 @@
     >
       <v-card>
         <v-card-title class="px-0 pb-0 pt-5">
-          <v-list-item>
-            <v-list-item class="pt-0 pl-2">
-              <slot name="headLine">
-                <v-list-item-title class="headline">
-                  Create New PEN
-                </v-list-item-title>
-              </slot>
-            </v-list-item>
-            <v-list-item-media class="my-0">
+          <v-row class="px-6">
+            <v-col class="d-flex justify-start">
+              <span class="headline">Create New PEN</span>
+            </v-col>
+            <v-col class="d-flex justify-end">
               <v-btn
                 id="closeCreateNewPenModalBtn"
-                text
+                variant="flat"
                 icon
                 @click="createNewPenDialog=false"
               >
@@ -28,8 +24,8 @@
                   mdi-close
                 </v-icon>
               </v-btn>
-            </v-list-item-media>
-          </v-list-item>
+            </v-col>
+          </v-row>
         </v-card-title>
         <v-spacer />
         <v-card-text>
@@ -61,7 +57,7 @@
                     <v-text-field
                       id="createNewPenFormLegalLastName"
                       v-model="student.legalLastName"
-                      outlined
+                      variant="outlined"
                       density="compact"
                       filled
                       readonly
@@ -77,7 +73,7 @@
                     <v-text-field
                       id="createNewPenFormLegalFirstName"
                       v-model="student.legalFirstName"
-                      outlined
+                      variant="outlined"
                       density="compact"
                       filled
                       readonly
@@ -93,7 +89,7 @@
                     <v-text-field
                       id="createNewPenFormLegalMiddleNames"
                       v-model="student.legalMiddleNames"
-                      outlined
+                      variant="outlined"
                       density="compact"
                       filled
                       tabindex="3"
@@ -129,7 +125,7 @@
                     <v-text-field
                       id="createNewPenFormUsualLastName"
                       v-model="student.usualLastName"
-                      outlined
+                      variant="outlined"
                       density="compact"
                       filled
                       tabindex="4"
@@ -146,7 +142,7 @@
                     <v-text-field
                       id="createNewPenFormUsualFirstName"
                       v-model="student.usualFirstName"
-                      outlined
+                      variant="outlined"
                       density="compact"
                       filled
                       tabindex="5"
@@ -163,7 +159,7 @@
                     <v-text-field
                       id="createNewPenFormUsualMiddleNames"
                       v-model="student.usualMiddleNames"
-                      outlined
+                      variant="outlined"
                       density="compact"
                       filled
                       tabindex="6"
@@ -186,16 +182,7 @@
                   </v-col>
                   <v-spacer />
                   <v-col cols="3">
-                    <strong>Birth Date
-                      <v-btn
-                        icon
-                        x-small
-                        title="YYYYMMDD"
-                      >
-                        <v-icon color="#2196f3">
-                          info
-                        </v-icon>
-                      </v-btn>
+                    <strong>Birth Date (YYYYMMDD)
                     </strong>
                   </v-col>
                   <v-spacer />
@@ -209,7 +196,7 @@
                     <v-text-field
                       id="createNewPenFormGender"
                       v-model="student.genderCode"
-                      outlined
+                      variant="outlined"
                       density="compact"
                       filled
                       readonly
@@ -223,7 +210,7 @@
                       id="createNewPenFormDOB"
                       v-model="student.dob"
                       readonly
-                      outlined
+                      variant="outlined"
                       density="compact"
                       filled
                       :error-messages="err.birthDateError"
@@ -235,7 +222,7 @@
                     <v-text-field
                       id="createNewPenFormLocalID"
                       v-model="student.localID"
-                      outlined
+                      variant="outlined"
                       density="compact"
                       filled
                       tabindex="9"
diff --git a/frontend/src/components/common/SearchDemographicModal.vue b/frontend/src/components/common/SearchDemographicModal.vue
index ac0e81f1e..65bd4f2ff 100644
--- a/frontend/src/components/common/SearchDemographicModal.vue
+++ b/frontend/src/components/common/SearchDemographicModal.vue
@@ -32,7 +32,6 @@
         </v-card-title>
         <v-spacer/>
         <v-card-text>
-          <div>{{isValidForm}}</div>
           <v-form
             ref="searchDemographicModalForm"
             :model-value="isValidForm"
@@ -62,6 +61,7 @@
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.LEGAL_LAST_NAME)"
                       :rules="validateLegalLastName()"
                       :onkeyup="upperCaseInput(STUDENT_DETAILS_FIELDS.LEGAL_LAST_NAME)"
+                      @update:model-value="validateForm"
                       required
                       tabindex="1"
                       clearable
@@ -87,6 +87,7 @@
                       variant="outlined"
                       density="compact"
                       filled
+                      @update:model-value="validateForm"
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.LEGAL_FIRST_NAME)"
                       :onkeyup="upperCaseInput(STUDENT_DETAILS_FIELDS.LEGAL_FIRST_NAME)"
                       tabindex="2"
@@ -115,6 +116,7 @@
                       v-model="student.legalMiddleNames"
                       variant="outlined"
                       density="compact"
+                      @update:model-value="validateForm"
                       filled
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.LEGAL_MIDDLE_NAMES)"
                       tabindex="3"
@@ -144,6 +146,7 @@
                       v-model="student.usualLastName"
                       variant="outlined"
                       density="compact"
+                      @update:model-value="validateForm"
                       filled
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.USUAL_LAST_NAME)"
                       tabindex="4"
@@ -172,6 +175,7 @@
                       id="searchDemogModalUsualFirstNameTxtField"
                       v-model="student.usualFirstName"
                       variant="outlined"
+                      @update:model-value="validateForm"
                       density="compact"
                       filled
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.USUAL_FIRST_NAME)"
@@ -201,6 +205,7 @@
                       id="searchDemogModalUsualMiddleNameTxtField"
                       v-model="student.usualMiddleNames"
                       variant="outlined"
+                      @update:model-value="validateForm"
                       density="compact"
                       filled
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.USUAL_MIDDLE_NAMES)"
@@ -228,6 +233,7 @@
                       v-model="student.genderCode"
                       variant="outlined"
                       density="compact"
+                      @update:model-value="validateForm"
                       class="hoverField"
                       filled
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.GENDER_CODE)"
@@ -255,6 +261,7 @@
                     <FormattedTextField
                       id="searchDemogModalDobTxtField"
                       v-model="student.dob"
+                      @update:model-value="validateForm"
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.DOB)"
                       :rules="validateDOB()"
                       maxlength="8"
@@ -281,6 +288,7 @@
                       v-model="student.gradeCode"
                       variant="outlined"
                       density="compact"
+                      @update:model-value="validateForm"
                       filled
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.GRADE_CODE)"
                       :rules="validateGradeCode()"
@@ -312,6 +320,7 @@
                       v-model="student.postalCode"
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.POSTAL_CODE)"
                       maxlength="7"
+                      @update:model-value="validateForm"
                       tabindex="10"
                       :onkeyup="upperCaseInput(STUDENT_DETAILS_FIELDS.POSTAL_CODE)"
                       :format="formatPostalCode"
@@ -339,6 +348,7 @@
                       v-model="student.mincode"
                       :readonly="isFieldReadOnly(STUDENT_DETAILS_FIELDS.MINCODE)"
                       :rules="validateMincode()"
+                      @update:model-value="validateForm"
                       maxlength="8"
                       :async-messages="mincodeErrors"
                       tabindex="11"
@@ -356,7 +366,8 @@
           <v-spacer/>
           <slot
             name="actions"
-            :is-form-valid="isFormValid"
+            :searchEnabled="isValidForm"
+            :modifySearch="modifySearch"
           />
         </v-card-actions>
       </v-card>
@@ -453,7 +464,7 @@ export default {
         'Invalid Gender Code'
       ];
     },
-    isFormValid() {
+    modifySearch() {
       if (this.$refs.searchDemographicModalForm.validate()) {
         this.$emit('updateStudent', this.student);
       }
diff --git a/frontend/src/components/common/StudentDetailsInfoPanel.vue b/frontend/src/components/common/StudentDetailsInfoPanel.vue
index 242607f28..3de56501a 100644
--- a/frontend/src/components/common/StudentDetailsInfoPanel.vue
+++ b/frontend/src/components/common/StudentDetailsInfoPanel.vue
@@ -15,7 +15,7 @@
       @closeDialog="closeDialog"
       @updateStudent="updateStudent"
     >
-      <template #actions="{ isFormValid }">
+      <template #actions="{ modifySearch, searchEnabled }">
         <PrimaryButton
           id="cancel"
           :secondary="true"
@@ -27,7 +27,8 @@
           id="searchDemogModalSearchBtn"
           width="15%"
           text="Modify Request"
-          @click-action="isFormValid"
+          :disabled="!searchEnabled"
+          @click-action="modifySearch()"
         />
         <PrimaryButton
           id="runAdvancedSearch"
@@ -155,7 +156,6 @@
         <v-data-table
           :headers="validationErrorFieldHeaders"
           :items="validationErrorFields"
-          hide-default-footer
         />
       </v-card>
     </v-row>
@@ -230,8 +230,8 @@ export default {
         { title: '',text: '', value: '', sortable: false, key: 'none' }
       ],
       validationErrorFieldHeaders: [
-        { text: 'Field Name', value: 'uiFieldName', sortable: false },
-        { text: 'Error Description', value: 'description', sortable: false }
+        { title: 'Field Name', text: 'Field Name', value: 'uiFieldName', key: 'uiFieldName', sortable: false },
+        { title: 'Error Description', text: 'Error Description', value: 'description', key: 'description', sortable: false }
       ],
       modalStudent: {},
       dialog: false,
diff --git a/frontend/src/components/nominal-roll/NomRollStudentDetailsDisplay.vue b/frontend/src/components/nominal-roll/NomRollStudentDetailsDisplay.vue
index 8676701e4..d23466f8b 100644
--- a/frontend/src/components/nominal-roll/NomRollStudentDetailsDisplay.vue
+++ b/frontend/src/components/nominal-roll/NomRollStudentDetailsDisplay.vue
@@ -438,7 +438,7 @@ export default {
       let result = true;
       result = await this.$refs.confirmationDialogIgnore.open('Are you sure you want to ignore this student record?', '',
         {
-          width: '760px',
+          width: '850px',
           messagePadding: 'px-4 pt-1',
           color: '',
           dark: false,
diff --git a/frontend/src/components/nominal-roll/NomRollStudentSearchResults.vue b/frontend/src/components/nominal-roll/NomRollStudentSearchResults.vue
index bf683defa..4b3081504 100644
--- a/frontend/src/components/nominal-roll/NomRollStudentSearchResults.vue
+++ b/frontend/src/components/nominal-roll/NomRollStudentSearchResults.vue
@@ -678,7 +678,7 @@ export default {
       let result = true;
       result = await this.$refs.confirmationDialogIgnore.open('Are you sure you want to ignore these student record(s)?', 'All selected records will be ignored.',
         {
-          width: '680px',
+          width: '850px',
           messagePadding: 'px-4 pt-1',
           color: '',
           dark: false,
diff --git a/frontend/src/components/penreg/penrequest-batch/PenRequestBatchDataTable.vue b/frontend/src/components/penreg/penrequest-batch/PenRequestBatchDataTable.vue
index e64fedc9a..6c515d779 100644
--- a/frontend/src/components/penreg/penrequest-batch/PenRequestBatchDataTable.vue
+++ b/frontend/src/components/penreg/penrequest-batch/PenRequestBatchDataTable.vue
@@ -168,8 +168,9 @@
     />
     <PenRequestBatchHistoryModal
       v-if="historyModalOpen"
-      v-model="historyModalOpen"
+      :value="historyModalOpen"
       :batch-file="hoveredOveredRow"
+      @close-dialog="historyModalOpen = false"
     />
   </div>
 </template>
diff --git a/frontend/src/components/penreg/penrequest-batch/PenRequestBatchDisplay.vue b/frontend/src/components/penreg/penrequest-batch/PenRequestBatchDisplay.vue
index bc48bcd44..116b2e927 100644
--- a/frontend/src/components/penreg/penrequest-batch/PenRequestBatchDisplay.vue
+++ b/frontend/src/components/penreg/penrequest-batch/PenRequestBatchDisplay.vue
@@ -356,7 +356,7 @@ export default {
         `Please confirm that you would like to Archive ${fileNumber} ${pluralize('file', fileNumber)}`,
         'Note this action will not return any files to the submitting school.',
         {
-          width: '750px',
+          width: '800px',
           messagePadding: 'px-4 pt-4',
           color: '',
           dark: false,
diff --git a/frontend/src/components/penreg/penrequest-batch/PenRequestBatchHistoryModal.vue b/frontend/src/components/penreg/penrequest-batch/PenRequestBatchHistoryModal.vue
index 12872ab6f..ae924307a 100644
--- a/frontend/src/components/penreg/penrequest-batch/PenRequestBatchHistoryModal.vue
+++ b/frontend/src/components/penreg/penrequest-batch/PenRequestBatchHistoryModal.vue
@@ -9,9 +9,9 @@
       class="px-6 pt-2"
       elevation="0"
     >
-      <v-card-title class="px-0 pb-0 pt-5" />
+      <v-card-title class="px-0 pb-0 pt-5"/>
       <v-row>
-        <div class="flex-grow-1 pt-0 px-3">
+        <div class="flex-grow-1 pt-0 pb-2 px-3">
           <DataListItem
             v-for="(item, i) in fileItems"
             :key="item.name + i"
@@ -32,7 +32,7 @@
           />
           <v-btn
             id="closeModalBtn"
-            text
+            variant="flat"
             icon
             @click="modalOpen=false"
           >
@@ -43,36 +43,35 @@
               mdi-close
             </v-icon>
           </v-btn>
-        </div>     
+        </div>
       </v-row>
       <v-data-table
         id="fileHistoryTable"
         class="py-5"
         :headers="headers"
         :items="penWebBlobs"
-        hide-default-footer
         :loading="loadingTable"
         :items-per-page="1000"
       >
         <template
           v-for="h in headers"
           :key="h.id"
-          #[`header.${h.value}`]="{ header }"
+          #[`column.${h.key}`]="{ column }"
         >
           <span
-            :title="header.tooltip"
-            :class="{'file-column' : !header.countable}"
+            :title="column.tooltip"
+            class="file-column"
           >
-            {{ header.text }}
+            {{ column.text }}
           </span>
         </template>
-        <template #item="props">
+        <template #item="item">
           <tr>
             <td
-              v-for="header in props.headers"
+              v-for="header in item.columns"
               :key="header.id"
             >
-              <span>{{ formatTableColumn(header.format, props.item[header.value]) }}</span>
+              <span>{{ formatTableColumn(header.format, item.item.raw[header.value]) }}</span>
             </td>
           </tr>
         </template>
@@ -86,9 +85,9 @@ import PrimaryButton from '@/components/util/PrimaryButton.vue';
 import alertMixin from '@/mixins/alertMixin';
 import DataListItem from '@/components/util/DataListItem.vue';
 import ApiService from '@/common/apiService';
-import { Routes } from '@/utils/constants';
-import { formatTableColumn, formatDateTime } from '@/utils/format';
-import { mapState } from 'pinia';
+import {Routes} from '@/utils/constants';
+import {formatTableColumn, formatDateTime} from '@/utils/format';
+import {mapState} from 'pinia';
 import {notificationsStore} from '@/store/modules/notifications';
 import _ from 'lodash';
 
@@ -117,11 +116,43 @@ export default {
       isProcessing: false,
       penWebBlobs: [],
       headers: [
-        { text: 'Type', value: 'fileType', sortable: false, align: 'start', tooltip: 'Type' },
-        { text: 'Insert Date', value: 'insertDateTime', sortable: false, format: this.formateDate, tooltip: 'Insert Date' },
-        { text: 'Insert Time', value: 'insertDateTime', sortable: false, format: this.formateTime, tooltip: 'Insert Time' },
-        { text: 'Extract Date', value: 'extractDateTime', sortable: false, format: this.formateDate, tooltip: 'Extract Date' },
-        { text: '', value: '', sortable: false},
+        {
+          title: 'Type',
+          text: 'Type',
+          value: 'fileType',
+          key: 'fileType',
+          sortable: false,
+          align: 'start',
+          tooltip: 'Type'
+        },
+        {
+          title: 'Insert Date',
+          text: 'Insert Date',
+          value: 'insertDateTime',
+          key: 'insertDate',
+          sortable: false,
+          format: this.formateDate,
+          tooltip: 'Insert Date'
+        },
+        {
+          title: 'Insert Time',
+          text: 'Insert Time',
+          value: 'insertDateTime',
+          key: 'insertTime',
+          sortable: false,
+          format: this.formateTime,
+          tooltip: 'Insert Time'
+        },
+        {
+          title: 'Extract Date',
+          text: 'Extract Date',
+          value: 'extractDateTime',
+          key: 'extractDateTime',
+          sortable: false,
+          format: this.formateDate,
+          tooltip: 'Extract Date'
+        },
+        {title: '', text: '', value: '', sortable: false},
       ],
       penCoordinator: {},
     };
@@ -130,18 +161,18 @@ export default {
     ...mapState(notificationsStore, ['notification']),
     fileItems() {
       return [
-        { name: 'district', label: this.districtFieldLabel, value: this.districtName },
-        { name: 'school', label: this.schoolFieldLabel, value: this.batchFile.schoolName },
-        { name: 'coord', label: 'PEN Coord:', value: this.penCoordinator.penCoordinatorName, type: 'coord' },
-        { name: 'email', label: 'Email:', value: this.penCoordinator.penCoordinatorEmail, type: 'coord' },
-        { name: 'breakLine', label: '', value: '' },
-        { name: 'fileName', label: 'File Name:', value: this.batchFile.fileName },
-        { name: 'submission', label: 'Submission #:', value: this.batchFile.submissionNumber },
-        { name: 'dateCreated', label: 'Date Created:', value: this.formateDate(this.batchFile.extractDate) },
-        { name: 'timeCreated', label: 'Time Created:', value: this.formateTime(this.batchFile.extractDate) },
-        { name: 'resultSent', label: 'Result Sent:', value: this.resultSentDateTime },
-        { name: 'studentCount', label: 'Student Count:', value: '' + this.batchFile.studentCount },
-        { name: 'errorCount', label: 'Error Count', value: '' + this.batchFile.errorCount },
+        {name: 'district', label: this.districtFieldLabel, value: this.districtName},
+        {name: 'school', label: this.schoolFieldLabel, value: this.batchFile.schoolName},
+        {name: 'coord', label: 'PEN Coord:', value: this.penCoordinator.penCoordinatorName, type: 'coord'},
+        {name: 'email', label: 'Email:', value: this.penCoordinator.penCoordinatorEmail, type: 'coord'},
+        {name: 'breakLine', label: '', value: ''},
+        {name: 'fileName', label: 'File Name:', value: this.batchFile.fileName},
+        {name: 'submission', label: 'Submission #:', value: this.batchFile.submissionNumber},
+        {name: 'dateCreated', label: 'Date Created:', value: this.formateDate(this.batchFile.extractDate)},
+        {name: 'timeCreated', label: 'Time Created:', value: this.formateTime(this.batchFile.extractDate)},
+        {name: 'resultSent', label: 'Result Sent:', value: this.resultSentDateTime},
+        {name: 'studentCount', label: 'Student Count:', value: '' + this.batchFile.studentCount},
+        {name: 'errorCount', label: 'Error Count', value: '' + this.batchFile.errorCount},
       ];
     },
     districtFieldLabel() {
@@ -172,8 +203,8 @@ export default {
       }
     },
     modalOpen(newValue) {
-      if(!newValue && this.value) {
-        this.$emit('input', this.modalOpen);
+      if (!newValue && this.value) {
+        this.$emit('closeDialog', this.modalOpen);
       }
     },
     notification(notificationData) {
@@ -254,45 +285,54 @@ export default {
         });
     },
     formateDate(dateTime) {
-      return formatDateTime(dateTime,'uuuu-MM-dd\'T\'HH:mm:ss','uuuu/MM/dd', true);
+      return formatDateTime(dateTime, 'uuuu-MM-dd\'T\'HH:mm:ss', 'uuuu/MM/dd', true);
     },
     formateTime(dateTime, timeFormat = 'HH:mm:ss') {
-      return formatDateTime(dateTime,'uuuu-MM-dd\'T\'HH:mm:ss', timeFormat, true);
+      return formatDateTime(dateTime, 'uuuu-MM-dd\'T\'HH:mm:ss', timeFormat, true);
     }
   }
 };
 </script>
 
 <style scoped>
-  #fileHistoryTable {
+#fileHistoryTable {
     overflow: auto;
-  }
+}
 
-  #fileHistoryTable /deep/ table { 
+#fileHistoryTable /deep/ table {
     border-top: solid #d7d7d7;
-  }
+}
 
-  #fileHistoryTable /deep/ table th{
+#fileHistoryTable /deep/ table th {
     text-align: center !important;
     font-size: 0.875rem;
-  }
+}
 
-  #fileHistoryTable /deep/ table td{
+#fileHistoryTable /deep/ table td {
     text-align: center !important;
     border-bottom: none !important;
-  }
+}
 
-  #fileHistoryTable /deep/ table td:nth-child(2),
-  #fileHistoryTable /deep/ table th:nth-child(2) { 
+#fileHistoryTable /deep/ table td:nth-child(2),
+#fileHistoryTable /deep/ table th:nth-child(2) {
     border-left: thin solid #d7d7d7;
-  }
+}
 
-  #fileHistoryTable /deep/ table th:nth-child(1) {
+#fileHistoryTable /deep/ table th:nth-child(1) {
     width: 10%;
-  }
-  #fileHistoryTable /deep/ table th:nth-child(2),
-  #fileHistoryTable /deep/ table th:nth-child(3),
-  #fileHistoryTable /deep/ table th:nth-child(4) {
+}
+
+#fileHistoryTable /deep/ table th:nth-child(2),
+#fileHistoryTable /deep/ table th:nth-child(3),
+#fileHistoryTable /deep/ table th:nth-child(4) {
     width: 20%;
-  }
+}
+
+:deep(.v-data-table-footer) {
+    display: none;
+}
+
+:deep(td){
+    font-size: 0.85em;
+}
 </style>
diff --git a/frontend/src/components/util/ConfirmationDialog.vue b/frontend/src/components/util/ConfirmationDialog.vue
index 97ff09fad..ce66eda8e 100644
--- a/frontend/src/components/util/ConfirmationDialog.vue
+++ b/frontend/src/components/util/ConfirmationDialog.vue
@@ -18,9 +18,9 @@
           density="compact"
           flat
         >
-          <v-toolbar-title class="pb-2" :class="{'white--text': options.dark, 'align-self-end': options.closeIcon, 'font-weight-bold': options.titleBold, 'dialog-subtitle': options.subtitle}">
+          <span class="pb-2 pl-3" style="font-size: 1.15em" :class="{'white--text': options.dark, 'align-self-end': options.closeIcon, 'font-weight-bold': options.titleBold, 'dialog-subtitle': options.subtitle}">
             {{ title }}
-          </v-toolbar-title>
+          </span>
           <v-spacer />
           <v-btn
             v-if="options.closeIcon"
diff --git a/frontend/src/components/util/DataListItem.vue b/frontend/src/components/util/DataListItem.vue
index a356f4a52..a691d1029 100644
--- a/frontend/src/components/util/DataListItem.vue
+++ b/frontend/src/components/util/DataListItem.vue
@@ -4,32 +4,30 @@
     :class="[{'py-1': !breakLine}, 'data-list-item']"
   >
     <br v-if="breakLine">
-    <template>
-      <v-col :cols="labelSpan">
-        <p class="mb-0">
-          {{ label }}
-        </p>
-      </v-col>
-      <v-col
-        :id="name"
-        :cols="colspan"
+    <v-col :cols="labelSpan">
+      <p class="mb-0">
+        {{ label }}
+      </p>
+    </v-col>
+    <v-col
+      :id="name"
+      :cols="colspan"
+    >
+      <v-progress-circular
+        v-if="loading"
+        color="primary"
+        indeterminate
+        :size="18"
+        :width="2"
+        class="ml-3"
+      />
+      <p
+        v-else
+        class="mb-0"
       >
-        <v-progress-circular
-          v-if="loading"
-          color="primary"
-          indeterminate
-          :size="18"
-          :width="2"
-          class="ml-3"
-        />
-        <p
-          v-else
-          class="mb-0"
-        >
-          {{ value }}
-        </p>
-      </v-col>
-    </template>
+        {{ value }}
+      </p>
+    </v-col>
   </v-row>
 </template>
 
@@ -39,7 +37,7 @@ export default {
   props: {
     labelSpan: {
       type: String,
-      default: '3',
+      default: '1',
     },
     colspan: {
       type: String,