UI updates for the transaction list (#752)

Co-authored-by: Nitheesh T Ganesh <60233274+nitheesh-aot@users.noreply.github.com>

auth-web/src/components/auth/Transactions.vue

@@ -23,7 +23,7 @@
           </v-btn>
         </template>
         <v-card class="date-range-container d-flex">
-          <div class="date-range-options d-flex flex-column justify-space-between flex-grow-0 pb-6 pt-2">
+          <div class="date-range-options d-flex flex-column justify-space-between flex-grow-0 pb-6 pt-3">
             <v-list dense class="py-0"
             >
               <v-list-item-group
@@ -92,10 +92,10 @@
       <div class="folio-number-filter d-inline-flex search-input-with-btn">
         <v-text-field
           dense
-          outlined
+          filled
           single-line
           hide-details
-          height="44"
+          height="43"
           class="folio-number-field"
           label="Folio #"
           prepend-inner-icon="mdi-magnify"
@@ -112,15 +112,14 @@
       </div>
       <v-spacer></v-spacer>
       <v-btn
+        large
         color="primary"
         class="font-weight-bold"
-        depressed
-        large
         @click="exportCSV"
       >Export CSV</v-btn>
     </div>
     <div class="filter-results d-inline-flex align-center mb-5">
-      <div class="filter-results-label py-2 mr-5">{{totalTransactionsCount}} Records found</div>
+      <div class="filter-results-label py-2 mr-7">{{totalTransactionsCount}} Records found</div>
       <v-chip
         class="mr-2 filter-chip"
         close
@@ -431,7 +430,16 @@ export default class Transactions extends Vue {
 
   ::v-deep {
     .v-text-field--outlined.v-input--dense .v-label {
-      top: 12px;
+      top: 14px !important;
+    }
+
+    .v-text-field__slot input {
+      font-size: 0.875rem;
+    }
+
+    .v-label {
+      font-size: 0.875rem !important;
+      top: 12px !important;
     }
 
     .v-input__prepend-inner {

auth-web/src/components/auth/TransactionsDataTable.vue

@@ -9,6 +9,7 @@
       :server-items-length="totalTransactionsCount"
       :options.sync="tableDataOptions"
       :loading="isDataLoading"
+      loading-text="loading text"
       :footer-props="{
         itemsPerPageOptions: getPaginationOptions
       }"
@@ -20,27 +21,26 @@
         {{header.text}}
         <v-tooltip bottom color="grey darken-4">
           <template v-slot:activator="{ on }">
-            <v-icon small class="status-tooltip-icon" v-on="on">mdi-information-outline</v-icon>
+            <v-icon class="status-tooltip-icon" v-on="on">mdi-information-outline</v-icon>
           </template>
           <div v-for="(status, index) in transactionStatus" :key="index">
             {{status.status}} - {{status.description}}
           </div>
         </v-tooltip>
       </template>
       <template v-slot:item.transactionNames="{ item }">
-        <v-list-item-title
-          class="user-name"
+        <div class="product-purchased font-weight-bold"
           :data-test="getIndexedTag('transaction-name', item.index)"
           >
-          <div
+          <div class="product-name"
             v-for="(name, nameIndex) in item.transactionNames"
             :key="nameIndex">
             {{ name }}
           </div>
-        </v-list-item-title>
-        <v-list-item-subtitle
+        </div>
+        <div class="product-suite"
           :data-test="getIndexedTag('transaction-sub', item.index)"
-        >Business Registry</v-list-item-subtitle>
+        >Business Registry</div>
       </template>
       <template v-slot:item.transactionDate="{ item }">
         {{formatDate(item.transactionDate)}}
@@ -51,12 +51,7 @@
         </div>
       </template>
       <template v-slot:item.status="{ item }">
-        <div
-          class="font-weight-bold text-uppercase"
-          v-bind:class="getStatusClass(item)"
-        >
-          {{item.status}}
-        </div>
+        {{item.status}}
       </template>
     </v-data-table>
   </div>
@@ -108,7 +103,8 @@ export default class TransactionsDataTable extends Vue {
       text: 'Folio #',
       align: 'left',
       sortable: false,
-      value: 'folioNumber'
+      value: 'folioNumber',
+      width: 115
     },
     {
       text: 'Initiated By',
@@ -120,19 +116,22 @@ export default class TransactionsDataTable extends Vue {
       text: 'Date',
       align: 'left',
       value: 'transactionDate',
-      sortable: false
+      sortable: false,
+      width: 115
     },
     {
       text: 'Total Amount',
-      align: 'left',
+      align: 'right',
       value: 'totalAmount',
-      sortable: false
+      sortable: false,
+      width: 125
     },
     {
       text: 'Status',
       align: 'left',
       value: 'status',
-      sortable: false
+      sortable: false,
+      width: 115
     }
   ]
 
@@ -235,8 +234,9 @@ export default class TransactionsDataTable extends Vue {
 }
 
 .status-tooltip-icon {
-  margin-top: -2px;
+  margin-top: -4px;
   margin-right: 5px;
+  margin-left: 2px;
 }
 
 .v-tooltip__content:before {
@@ -260,14 +260,20 @@ export default class TransactionsDataTable extends Vue {
         color: #000
       }
     }
+
     td {
       padding-top: 1rem;
       padding-bottom: 1rem;
       height: auto;
       vertical-align: top;
+      overflow: hidden;
     }
-    .v-list-item__title {
+
+    .product-name {
       display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
       font-weight: 700;
     }
   }

auth-web/src/util/common-util.ts

@@ -51,7 +51,7 @@ export default class CommonUtils {
 
   // Formatting date in the desired format for displaying in the template
   static formatDisplayDate (date: Date, format?: string) {
-    return moment(date).format(format || 'DD MMM, YYYY')
+    return moment(date).format(format || 'MM-DD-YYYY')
   }
 
   // Formatting date in the desired format for vue date pickers