Merge pull request #215 from bcgov/feature/show-bulk-add-results

Show results of bulk invite and add/remove in table

frontend/src/assets/variables.scss

@@ -11,7 +11,9 @@ $bcbox-primary: #036;
 $bcbox-link-text: #1a5a96;
 $bcbox-link-text-hover: #2378c7;
 $bcbox-outline-on-primary: #fff;
+$bcbox-success: #2e8540;
 $bcbox-error: #d8292f;
+$bcbox-noaction: #606060;
 
 // highlighted sections, table rows
 $bcbox-highlight-background: #d9e1e8;

frontend/src/components/common/BulkPermissionResults.vue

@@ -1,21 +1,96 @@
 <script setup lang="ts">
-import { Dialog } from '@/lib/primevue';
+import { ref } from 'vue';
+import { Column, DataTable, Dialog } from '@/lib/primevue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
 // Props
 type Props = {
   results: Array<Object>;
   resource: any;
   resourceType: string;
 };
-const props = withDefaults(defineProps<Props>(), {});
+
+const props = withDefaults(defineProps<Props>(), {
+  results: undefined
+});
 
 const modelValue = defineModel<boolean>({ default: false });
+
+// Exports DataTable results
+const batchResults = ref();
+
+const exportCSV = (event: any) => {
+  batchResults.value.exportCSV();
+};
 </script>
 <template>
   <Dialog
     v-model:visible="modelValue"
     header="Results"
     :modal="true"
   >
-    <pre>{{ props.results }}</pre>
+    <DataTable
+      ref="batchResults"
+      :export-filename="`${resourceType === 'object' ? resource.name.replace(/\.[^/.]+$/, '') : resource.bucketName}_bulk_results`"
+      :value="props.results"
+      class="p-datatable-striped"
+    >
+      <div class="action-buttons">
+        <Button
+          v-tooltip.bottom="'Save results'"
+          aria-label="Save results"
+          class="p-button"
+          @click="exportCSV($event)"
+        >
+          <font-awesome-icon
+            icon="fa-download"
+            class="pl-1 pr-1 pt-1 pb-1"
+          />
+        </Button>
+      </div>
+      <Column
+        field="email"
+        header="Email"
+      />
+      <Column
+        field="description"
+        header="Result"
+      >
+        <template #body="{ data }">
+          <span>
+            <span class="m-1">
+              <font-awesome-icon
+                v-if="data.status === 1"
+                icon="fa-circle-check"
+                class="icon-success"
+              />
+              <font-awesome-icon
+                v-else-if="data.status === 0"
+                icon="fa-circle-minus"
+                class="icon-noaction"
+              />
+              <font-awesome-icon
+                v-else
+                icon="fa-circle-xmark"
+                class="icon-error"
+              />
+            </span>
+            {{ data.description }}
+          </span>
+        </template>
+      </Column>
+    </DataTable>
   </Dialog>
 </template>
+
+<style scoped lang="scss">
+.icon-success {
+  color: $bcbox-success;
+}
+.icon-error {
+  color: $bcbox-error;
+}
+.icon-noaction {
+  color: $bcbox-noaction;
+}
+</style>