Bulk results modal: tweak DataTable CSS

Adjust margins when there are many emails; do not wrap long emails/result strings
bcgov · Jun 26, 2024 · 08fb952 · 08fb952
1 parent f27cb89
commit 08fb952
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/frontend/src/components/common/BulkPermission.vue b/frontend/src/components/common/BulkPermission.vue
@@ -408,6 +408,4 @@ const onSubmit = handleSubmit(async (values: any, { resetForm }) => {
     :resource="resource"
     :resource-type="resourceType"
   />
-
-  <pre v-if="complete">{{ results }}</pre>
 </template>
diff --git a/frontend/src/components/common/BulkPermissionResults.vue b/frontend/src/components/common/BulkPermissionResults.vue
@@ -16,6 +16,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const modelValue = defineModel<boolean>({ default: false });
 
+const exportFileName =
+  props.resourceType === 'object'
+    ? props.resource.name.replace(/\.[^/.]+$/, '')
+    : `${props.resource.bucketName}_bulk_results`;
+
 // Exports DataTable results
 const batchResults = ref();
 
@@ -30,8 +35,9 @@ const exportCSV = () => {
     :modal="true"
   >
     <DataTable
+      :id="'results-table'"
       ref="batchResults"
-      :export-filename="`${resourceType === 'object' ? resource.name.replace(/\.[^/.]+$/, '') : resource.bucketName}_bulk_results`"
+      :export-filename="exportFileName"
       :value="props.results"
       class="p-datatable-striped"
     >
@@ -54,7 +60,7 @@ const exportCSV = () => {
         header="Result"
       >
         <template #body="{ data }">
-          <span>
+          <span class="mr-3">
             <span class="m-1">
               <font-awesome-icon
                 v-if="data.status === 1"
@@ -90,4 +96,9 @@ const exportCSV = () => {
 .icon-noaction {
   color: $bcbox-noaction;
 }
+
+#results-table {
+  text-wrap: nowrap;
+  min-width: 35em;
+}
 </style>