From 690908391d8ac1ee775bfa0801594e03873984e0 Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:50:03 -0700
Subject: [PATCH 1/2] Add/remove users: display results inside DataTable in
 modal

---
 frontend/src/assets/variables.scss            |  2 +
 .../common/BulkPermissionResults.vue          | 64 ++++++++++++++++++-
 2 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/frontend/src/assets/variables.scss b/frontend/src/assets/variables.scss
index 11a25097..171f1a12 100644
--- a/frontend/src/assets/variables.scss
+++ b/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;
diff --git a/frontend/src/components/common/BulkPermissionResults.vue b/frontend/src/components/common/BulkPermissionResults.vue
index d69d37fb..769a05ab 100644
--- a/frontend/src/components/common/BulkPermissionResults.vue
+++ b/frontend/src/components/common/BulkPermissionResults.vue
@@ -1,12 +1,18 @@
 <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 });
 </script>
@@ -16,6 +22,58 @@ const modelValue = defineModel<boolean>({ default: false });
     header="Results"
     :modal="true"
   >
-    <pre>{{ props.results }}</pre>
+    <DataTable
+      :value="props.results"
+      class="p-datatable-striped"
+    >
+      <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"
+              />
+              <!--
+                Errors aren't really returned at the moment
+                  (e.g. CHES doesn't return emailing errors)
+                so errors won't ever appear here (yet!).
+              -->
+              <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>

From 728cf6bb750ea83ee7962352089c01dbb9cf45e5 Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Mon, 17 Jun 2024 17:18:38 -0700
Subject: [PATCH 2/2] Export bulk results to CSV

---
 .../common/BulkPermissionResults.vue          | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/common/BulkPermissionResults.vue b/frontend/src/components/common/BulkPermissionResults.vue
index 769a05ab..330e5d24 100644
--- a/frontend/src/components/common/BulkPermissionResults.vue
+++ b/frontend/src/components/common/BulkPermissionResults.vue
@@ -15,6 +15,13 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const modelValue = defineModel<boolean>({ default: false });
+
+// Exports DataTable results
+const batchResults = ref();
+
+const exportCSV = (event: any) => {
+  batchResults.value.exportCSV();
+};
 </script>
 <template>
   <Dialog
@@ -23,9 +30,24 @@ const modelValue = defineModel<boolean>({ default: false });
     :modal="true"
   >
     <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"
@@ -47,11 +69,6 @@ const modelValue = defineModel<boolean>({ default: false });
                 icon="fa-circle-minus"
                 class="icon-noaction"
               />
-              <!--
-                Errors aren't really returned at the moment
-                  (e.g. CHES doesn't return emailing errors)
-                so errors won't ever appear here (yet!).
-              -->
               <font-awesome-icon
                 v-else
                 icon="fa-circle-xmark"