Merge pull request #311 from bcgov/feature/statusChips

Add status chip to tables
bcgov · Oct 11, 2022 · c660ad2 · c660ad2
2 parents 8f4ceef + c34734e
commit c660ad2
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 47 deletions.
diff --git a/services/tenant-ui/frontend/src/assets/tenantuiComponents.scss b/services/tenant-ui/frontend/src/assets/tenantuiComponents.scss
@@ -1,56 +1,43 @@
 .status-chip {
-    background-color: $tenant-ui-status-default-background;
-    color: $tenant-ui-status-default-color;
-    border-radius: 5px;
-    padding: 0.25rem 1rem 0.25rem 1rem;
-    font-weight: bolder;
+  background-color: $tenant-ui-status-default-background;
+  color: $tenant-ui-status-default-color;
+  border-radius: 5px;
+  padding: 0.25rem 1rem 0.25rem 1rem;
+  font-weight: bolder;
+  text-align: center;
+  > span.text {
+    min-width: 80px;
     text-align: center;
-    > span.text {
-        min-width: 80px;
-        text-align: center
-    }
   }
 
   /* green */
-.status-chip.active {
+  &.active ,
+  &.accepted,
+  &.verified {
     background-color: $tenant-ui-status-green-background;
     color: $tenant-ui-status-green-color;
   }
 
-.status-chip.accepted {
-    background-color: $tenant-ui-status-green-background;
-    color: $tenant-ui-status-green-color;
-  }     
-
-.status-chip.verified {
-    background-color: $tenant-ui-status-green-background;
-    color: $tenant-ui-status-green-color;
-  } 
-
   /* amber */
-.status-chip.pending {
+  &.pending {
     background-color: $tenant-ui-status-amber-background;
     color: $tenant-ui-status-amber-color;
   }
-  
+
   /* red */
-.status-chip.error {
+  &.error,
+  &.rejected,
+  &.offer-not-accepted {
     background-color: $tenant-ui-status-red-background;
     color: $tenant-ui-status-red-color;
   }
 
-.status-chip.rejected {
-    background-color: $tenant-ui-status-red-background;
-    color: $tenant-ui-status-red-color;
-  } 
-
   /* blue */
-.status-chip.in-progress {
-    background-color: $tenant-ui-status-blue-background;
-    color: $tenant-ui-status-blue-color;
-  }
-
-.status-chip.request-sent {
+  &.in-progress,
+  &.request-sent,
+  &.offer-sent,
+  &.offer-received {
     background-color: $tenant-ui-status-blue-background;
     color: $tenant-ui-status-blue-color;
   }
+}
diff --git a/services/tenant-ui/frontend/src/components/common/StatusChip.vue b/services/tenant-ui/frontend/src/components/common/StatusChip.vue
@@ -1,7 +1,7 @@
 <template>
   <Chip :class="statusClass">
-    <span class="text">{{ status }}</span></Chip
-  >
+    <span class="text">{{ status }}</span>
+  </Chip>
 </template>
 
 <script setup lang="ts">

diff --git a/services/tenant-ui/frontend/src/components/contacts/Contacts.vue b/services/tenant-ui/frontend/src/components/contacts/Contacts.vue
@@ -42,7 +42,11 @@
     </Column>
     <Column :sortable="true" field="alias" header="Name" />
     <Column field="role" header="Role" />
-    <Column field="status" header="Status" />
+    <Column field="status" header="Status">
+      <template #body="{ data }">
+        <StatusChip :status="data.status" />
+      </template>
+    </Column>
     <Column field="created_at" header="Created at">
       <template #body="{ data }">
         {{ formatDateLong(data.created_at) }}
@@ -75,6 +79,7 @@ import AcceptInvitation from './acceptInvitation/AcceptInvitation.vue';
 import CreateContact from './createContact/CreateContact.vue';
 import { formatDateLong } from '@/helpers';
 import RowExpandData from '../common/RowExpandData.vue';
+import StatusChip from '../common/StatusChip.vue';
 
 const confirm = useConfirm();
 const toast = useToast();

diff --git a/services/tenant-ui/frontend/src/components/holder/Credentials.vue b/services/tenant-ui/frontend/src/components/holder/Credentials.vue
@@ -60,7 +60,11 @@
       </template>
     </Column>
     <Column :sortable="true" field="alias" header="Name" />
-    <Column field="status" header="Status" />
+    <Column field="status" header="Status">
+      <template #body="{ data }">
+        <StatusChip :status="data.status" />
+      </template>
+    </Column>
     <Column field="created_at" header="Created at">
       <template #body="{ data }">
         {{ formatDateLong(data.created_at) }}
@@ -83,6 +87,7 @@ import { useHolderStore } from '../../store';
 import { storeToRefs } from 'pinia';
 import { useConfirm } from 'primevue/useconfirm';
 import RowExpandData from '../common/RowExpandData.vue';
+import StatusChip from '../common/StatusChip.vue';
 
 import { formatDateLong } from '@/helpers';
 

diff --git a/services/tenant-ui/frontend/src/components/issuance/IssuedCredentials.vue b/services/tenant-ui/frontend/src/components/issuance/IssuedCredentials.vue
@@ -31,7 +31,11 @@
       header="Credential Name"
     />
     <Column field="contact.alias" header="Contact Name" />
-    <Column field="status" header="Status" />
+    <Column field="status" header="Status">
+      <template #body="{ data }">
+        <StatusChip :status="data.status" />
+      </template>
+    </Column>
     <Column field="created_at" header="Created at">
       <template #body="{ data }">
         {{ formatDateLong(data.created_at) }}
@@ -51,23 +55,19 @@
 <script setup lang="ts">
 // Vue
 import { onMounted, ref } from 'vue';
-
 // State
 import { useIssuerStore } from '../../store';
 import { storeToRefs } from 'pinia';
-
 // PrimeVue
 import Button from 'primevue/button';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
-
+import { useToast } from 'vue-toastification';
 // Other Components
 import OfferCredential from './offerCredential/OfferCredential.vue';
 import RowExpandData from '../common/RowExpandData.vue';
 import { formatDateLong } from '@/helpers';
-
-// Other Imports
-import { useToast } from 'vue-toastification';
+import StatusChip from '../common/StatusChip.vue';
 
 const toast = useToast();
 

diff --git a/services/tenant-ui/frontend/src/components/issuance/Schemas.vue b/services/tenant-ui/frontend/src/components/issuance/Schemas.vue
@@ -42,7 +42,11 @@
     </Column>
     <Column field="name" header="Schema" filter-field="name" />
     <Column field="version" header="Version" />
-    <Column field="status" header="Status" />
+    <Column field="status" header="Status">
+      <template #body="{ data }">
+        <StatusChip :status="data.status" />
+      </template>
+    </Column>
     <Column field="attributes" header="Attributes" />
     <Column field="credential_templates" header="Credential Template">
       <template #body="{ data }">
@@ -70,6 +74,7 @@ import CreateSchema from './createSchema/CreateSchema.vue';
 import CopySchema from './copySchema/CopySchema.vue';
 import CreateCredentialTemplate from './credentialtemplate/CreateCredentialTemplate.vue';
 import RowExpandData from '../common/RowExpandData.vue';
+import StatusChip from '../common/StatusChip.vue';
 
 import { useConfirm } from 'primevue/useconfirm';
 import { useToast } from 'vue-toastification';

diff --git a/services/tenant-ui/frontend/src/components/verifier/Presentations.vue b/services/tenant-ui/frontend/src/components/verifier/Presentations.vue
@@ -29,7 +29,11 @@
     <Column :expander="true" header-style="width: 3rem" />
     <Column :sortable="true" field="name" header="Name" />
     <Column field="contact.alias" header="Contact Name" />
-    <Column field="status" header="Status" />
+    <Column field="status" header="Status">
+      <template #body="{ data }">
+        <StatusChip :status="data.status" />
+      </template>
+    </Column>
     <Column field="created_at" header="Created at">
       <template #body="{ data }">
         {{ formatDateLong(data.created_at) }}
@@ -57,6 +61,7 @@ import { storeToRefs } from 'pinia';
 
 import PresentationRowExpandData from './PresentationRowExpandData.vue';
 import { formatDateLong } from '@/helpers';
+import StatusChip from '../common/StatusChip.vue';
 const toast = useToast();
 
 // used by datatable expander behind the scenes