From 31985e8525d4100aa21c856f0e08450c86e7205a Mon Sep 17 00:00:00 2001
From: bsilkyn <brent.silkyn@ugent.be>
Date: Tue, 14 May 2024 16:40:40 +0200
Subject: [PATCH] chore: make multiRemove button disabled when nothing's
 selected #356

---
 .../src/components/admin/LazyDataTable.vue    |  8 +++--
 frontend/src/views/admin/DockerImagesView.vue | 32 ++++++++++++-------
 frontend/src/views/admin/UsersView.vue        |  4 +--
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/admin/LazyDataTable.vue b/frontend/src/components/admin/LazyDataTable.vue
index c2bfcca5..e16041c0 100644
--- a/frontend/src/components/admin/LazyDataTable.vue
+++ b/frontend/src/components/admin/LazyDataTable.vue
@@ -18,7 +18,7 @@ const props = defineProps<{
 }>();
 
 /* Emits */
-const emit = defineEmits(['select'])
+const emit = defineEmits(['select']);
 
 /* Injections */
 const { t } = useI18n();
@@ -62,19 +62,21 @@ const onSelectAllChange = (event: DataTableSelectAllChangeEvent): void => {
         props.get().then(() => {
             selectAll.value = true;
             selected.value = props.entities;
+            emit('select', selected.value);
         });
     } else {
         selectAll.value = false;
         selected.value = [];
+        emit('select', selected.value);
     }
 };
 const onRowSelect = (): void => {
     selectAll.value = selected.value?.length === (props.pagination?.count ?? 0);
-    emit('select');
+    emit('select', selected.value);
 };
 const onRowUnselect = (): void => {
     selectAll.value = false;
-    emit('select');
+    emit('select', selected.value);
 };
 
 defineExpose({ fetch });
diff --git a/frontend/src/views/admin/DockerImagesView.vue b/frontend/src/views/admin/DockerImagesView.vue
index 0e9278c8..5b70f6c7 100644
--- a/frontend/src/views/admin/DockerImagesView.vue
+++ b/frontend/src/views/admin/DockerImagesView.vue
@@ -12,7 +12,7 @@ import LazyDataTable from '@/components/admin/LazyDataTable.vue';
 import { useDockerImages } from '@/composables/services/docker.service.ts';
 import { useFilter } from '@/composables/filters/filter.ts';
 import { useI18n } from 'vue-i18n';
-import { computed, ref} from 'vue';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { DockerImage } from '@/types/DockerImage.ts';
 import { getDockerImageFilters } from '@/types/filter/Filter.ts';
@@ -23,8 +23,15 @@ import IconField from 'primevue/iconfield';
 /* Injection */
 const { t } = useI18n();
 const { query } = useRoute();
-const { pagination, dockerImages, getDockerImages, searchDockerImages, patchDockerImage, createDockerImage, deleteDockerImage } =
-    useDockerImages();
+const {
+    pagination,
+    dockerImages,
+    getDockerImages,
+    searchDockerImages,
+    patchDockerImage,
+    createDockerImage,
+    deleteDockerImage,
+} = useDockerImages();
 const { filter, onFilter } = useFilter(getDockerImageFilters(query));
 
 const dataTable = ref();
@@ -35,9 +42,7 @@ const addItem = ref<DockerImage>(DockerImage.blankDockerImage());
 const selectOptions = ref(['admin.list', 'admin.add']);
 const selected = ref<string>(t(selectOptions.value[0]));
 
-const multiRemove = computed(() => {
-
-})
+const multiRemove = ref<boolean>(false);
 
 const columns = ref([
     { field: 'id', header: 'admin.id' },
@@ -51,7 +56,7 @@ const columns = ref([
 const showSafetyGuard = ref<boolean>(false);
 const safetyGuardFunction = ref<() => Promise<void>>(async () => {});
 
-const safetyGuardCleanup = async ():  Promise<void> => {
+const safetyGuardCleanup = async (): Promise<void> => {
     showSafetyGuard.value = false;
     await safetyGuardFunction.value();
     await dataTable.value.fetch();
@@ -74,10 +79,14 @@ const toggleSafetyGuardRemove = (data: DockerImage): void => {
     editItem.value = data;
     safetyGuardFunction.value = removeItem;
     showSafetyGuard.value = true;
-}
+};
 const removeItem = async (): Promise<void> => {
     await deleteDockerImage(editItem.value.id);
-}
+};
+
+const onSelect = (selected: any[] | null): void => {
+    multiRemove.value = (selected?.length === undefined || selected?.length === 0) ?? false;
+};
 </script>
 
 <template>
@@ -96,6 +105,7 @@ const removeItem = async (): Promise<void> => {
                     :filter="filter"
                     :on-filter="onFilter"
                     ref="dataTable"
+                    @select="onSelect"
                 >
                     <template #header>
                         <div class="mb-3 gap-3">
@@ -106,7 +116,7 @@ const removeItem = async (): Promise<void> => {
                                 <InputText v-model="filter['search']" :placeholder="t('admin.search.general')" />
                             </IconField>
                         </div>
-                        <Button class="w-1 mb-3 gap-3" :disabled="">
+                        <Button class="w-1 mb-3 gap-3" :disabled="multiRemove">
                             {{ t('admin.delete') }}
                         </Button>
                     </template>
@@ -143,7 +153,7 @@ const removeItem = async (): Promise<void> => {
                             />
                         </template>
                     </Column>
-                    <Column key="remove" :header-style="{ width: '11%'}" class="p-col">
+                    <Column key="remove" :header-style="{ width: '11%' }" class="p-col">
                         <template #body="{ data }">
                             <Button @click="() => toggleSafetyGuardRemove(data)" class="justify-content-center">
                                 {{ t('admin.delete') }}
diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index d704d808..0f2ef75f 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -158,7 +158,7 @@ const saveItem = async (): Promise<void> => {
                     :field="column.field"
                     :header="t(column.header)"
                     :show-filter-menu="false"
-                    :header-style="{ width: '23%'}"
+                    :header-style="{ width: '23%' }"
                     class="p-col"
                 >
                     <template #filter>
@@ -183,7 +183,7 @@ const saveItem = async (): Promise<void> => {
                         {{ data.roles.map((role: Role) => t('admin.' + role)).join(', ') }}
                     </template>
                 </Column>
-                <Column :header-style="{ width: '8%'}" class="p-col">
+                <Column :header-style="{ width: '8%' }" class="p-col">
                     <template #body="{ data }">
                         <Button @click="() => showPopup(data)">{{ t('admin.edit') }}</Button>
                     </template>