chore: add "remove" button #356

SELab-2 · May 13, 2024 · 5cb423e · 5cb423e
1 parent b723a0d
commit 5cb423e
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 16 deletions.
diff --git a/frontend/src/assets/lang/app/en.json b/frontend/src/assets/lang/app/en.json
@@ -286,6 +286,7 @@
         "edit": "Edit",
         "cancel": "Cancel",
         "save": "Save",
+        "delete": "Delete",
         "users": {
             "title": "Users",
             "username": "Username",
@@ -315,7 +316,8 @@
             "private": "Private"
         },
         "none_found": "No matching data.",
-        "loading": "Loading data. Please wait."
+        "loading": "Loading data. Please wait.",
+        "safeGuard": "Are you sure?"
     },
     "primevue": {
         "startsWith": "Starts with",

diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
@@ -281,6 +281,7 @@
         "edit": "Bewerken",
         "cancel": "Annuleer",
         "save": "Sla op",
+        "delete": "Verwijder",
         "users": {
             "title": "Gebruikers",
             "username": "Gebruikersnaam",
@@ -310,7 +311,8 @@
             "private": "Privaat"
         },
         "none_found": "Geen overeenkomende data gevonden.",
-        "loading": "Aan het laden. Wacht een momentje aub."
+        "loading": "Aan het laden. Wacht een momentje aub.",
+        "safeGuard": "Ben je het zeker?"
     },
     "primevue": {
         "accept": "Ja",

diff --git a/frontend/src/composables/services/docker.service.ts b/frontend/src/composables/services/docker.service.ts
@@ -3,7 +3,7 @@ import { Response } from '@/types/Response.ts';
 import { endpoints } from '@/config/endpoints.ts';
 import { type Ref, ref } from 'vue';
 import { type Filter } from '@/types/filter/Filter.ts';
-import { create, getList, getPaginatedList, patch } from '@/composables/services/helpers.ts';
+import { create, getList, getPaginatedList, patch, deleteId } from '@/composables/services/helpers.ts';
 import { type PaginatorResponse } from '@/types/filter/Paginator.ts';
 
 interface DockerImagesState {
@@ -14,6 +14,7 @@ interface DockerImagesState {
     searchDockerImages: (filters: Filter, page: number, pageSize: number) => Promise<void>;
     patchDockerImage: (dockerData: DockerImage) => Promise<void>;
     createDockerImage: (dockerData: DockerImage, file: File) => Promise<void>;
+    deleteDockerImage: (id: string) => Promise<void>;
 }
 
 export function useDockerImages(): DockerImagesState {
@@ -51,6 +52,11 @@ export function useDockerImages(): DockerImagesState {
         );
     }
 
+    async function deleteDockerImage(id: string): Promise<void> {
+        const endpoint = endpoints.dockerImages.retrieve.replace('{id}', id);
+        await deleteId<Response>(endpoint, response, Response.fromJSON);
+    }
+
     return {
         pagination,
         dockerImages,
@@ -60,5 +66,6 @@ export function useDockerImages(): DockerImagesState {
         searchDockerImages,
         patchDockerImage,
         createDockerImage,
+        deleteDockerImage,
     };
 }
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
@@ -21,6 +21,7 @@ export const endpoints = {
     },
     dockerImages: {
         index: '/api/docker-images/',
+        retrieve: '/api/docker-images/{id}/',
         search: '/api/docker-images/search/',
         patch: '/api/docker-images/{id}/public/',
     },

diff --git a/frontend/src/views/admin/DockerImagesView.vue b/frontend/src/views/admin/DockerImagesView.vue
@@ -2,7 +2,6 @@
 import FileUpload, { type FileUploadUploaderEvent } from 'primevue/fileupload';
 import InputText from 'primevue/inputtext';
 import InputSwitch from 'primevue/inputswitch';
-import ToggleButton from 'primevue/togglebutton';
 import SelectButton from 'primevue/selectbutton';
 import Dialog from 'primevue/dialog';
 import Button from 'primevue/button';
@@ -24,7 +23,7 @@ import IconField from 'primevue/iconfield';
 /* Injection */
 const { t } = useI18n();
 const { query } = useRoute();
-const { pagination, dockerImages, getDockerImages, searchDockerImages, patchDockerImage, createDockerImage } =
+const { pagination, dockerImages, getDockerImages, searchDockerImages, patchDockerImage, createDockerImage, deleteDockerImage } =
     useDockerImages();
 const { filter, onFilter } = useFilter(getDockerImageFilters(query));
 
@@ -46,22 +45,35 @@ const columns = ref([
 //     { value: false, label: 'private' },
 // ]);
 const showSafetyGuard = ref<boolean>(false);
+const safetyGuardFunction = ref<() => Promise<void>>(async () => {});
 
-const toggleSafetyGuard = (data: DockerImage): void => {
+const safetyGuardCleanup = async ():  Promise<void> => {
+    showSafetyGuard.value = false;
+    await safetyGuardFunction.value();
+    await dataTable.value.fetch();
+};
+const toggleSafetyGuardEdit = (data: DockerImage): void => {
     editItem.value.public = !data.public;
     editItem.value.id = data.id;
+    safetyGuardFunction.value = changePublicStatus;
     showSafetyGuard.value = true;
 };
-const changePublicStatus = async (dockerData: DockerImage): Promise<void> => {
-    showSafetyGuard.value = false;
-    await patchDockerImage(dockerData);
-    await dataTable.value.fetch();
+const changePublicStatus = async (): Promise<void> => {
+    await patchDockerImage(editItem.value);
 };
 const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
     const files: File[] = event.files as File[];
     await createDockerImage(addItem.value, files[0]);
     addItem.value.name = '';
 };
+const toggleSafetyGuardRemove = (data: DockerImage): void => {
+    editItem.value = data;
+    safetyGuardFunction.value = removeItem;
+    showSafetyGuard.value = true;
+}
+const removeItem = async (): Promise<void> => {
+    await deleteDockerImage(editItem.value.id);
+}
 </script>
 
 <template>
@@ -113,17 +125,24 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                         key="public"
                         field="public"
                         :header="t('admin.docker_images.public')"
-                        :header-style="{ width: '25%' }"
+                        :header-style="{ width: '12%' }"
                         class="p-col"
                     >
                         <template #body="{ data }">
                             <InputSwitch
                                 class="mb-3 gap-3 justify-content-center"
                                 :model-value="data.public"
-                                @click="() => toggleSafetyGuard(data)"
+                                @click="() => toggleSafetyGuardEdit(data)"
                             />
                         </template>
                     </Column>
+                    <Column key="remove" :header-style="{ width: '13%'}" class="p-col">
+                        <template #body="{ data }">
+                            <Button @click="() => toggleSafetyGuardRemove(data)" class="justify-content-center">
+                                {{ t('admin.delete') }}
+                            </Button>
+                        </template>
+                    </Column>
                 </LazyDataTable>
             </div>
             <div v-else>
@@ -135,7 +154,7 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                 <div v-if="addItem.name.length > 0">
                     <div class="flex align-items-center mb-3 gap-3">
                         <label class="font-semibold w-12rem">{{ t('admin.docker_images.public') }}</label>
-                        <InputSwitch v-model:model-value="addItem.public" />
+                        <InputSwitch :model-value="addItem.public" />
                     </div>
                     <FileUpload class="mb-3 gap-3" :custom-upload="true" @uploader="upload" :file-limit="1">
                         <template #empty>
@@ -147,10 +166,10 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
         </Body>
     </AdminLayout>
     <Dialog v-model:visible="showSafetyGuard" :style="{ width: '15rem' }">
-        <h3>Are you sure?</h3>
+        <h3>{{ t('admin.safeGuard') }}</h3>
         <div class="flex justify-content-between">
-            <Button label="No" @click="showSafetyGuard = false" />
-            <Button label="Yes" @click="() => changePublicStatus(editItem)" />
+            <Button :label="t('primevue.reject')" @click="showSafetyGuard = false" />
+            <Button :label="t('primevue.accept')" @click="safetyGuardCleanup" />
         </div>
     </Dialog>
 </template>