From 0d7b11cdb82a44557ae6adbbd0a83398e8477a22 Mon Sep 17 00:00:00 2001
From: bsilkyn <brent.silkyn@ugent.be>
Date: Mon, 29 Apr 2024 17:47:24 +0200
Subject: [PATCH] chore: docker images edit button

---
 backend/api/views/docker_view.py              |  6 +++---
 .../composables/services/docker.service.ts    |  2 +-
 frontend/src/config/endpoints.ts              |  2 +-
 frontend/src/views/admin/DockerImagesView.vue | 20 +++++++++----------
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/backend/api/views/docker_view.py b/backend/api/views/docker_view.py
index c58491a7..42d5819f 100644
--- a/backend/api/views/docker_view.py
+++ b/backend/api/views/docker_view.py
@@ -53,12 +53,12 @@ def search(self, request: Request) -> Response:
         return self.get_paginated_response(serializer.data)
 
 
-    @action(detail=True, permission_classes=[IsAdminUser])
-    def patch_public(self, request: Request, *_) -> Response:
+    @action(detail=True, methods=['PATCH'], url_path='public', permission_classes=[IsAdminUser])
+    def patch_public(self, request: Request, **_) -> Response:
         docker_image = self.get_object()
         serializer = DockerImageSerializer(docker_image, data=request.data, partial=True)
 
-        if serializer.is_valid:
+        if serializer.is_valid():
             serializer.save()
 
         return Response(serializer.data)
diff --git a/frontend/src/composables/services/docker.service.ts b/frontend/src/composables/services/docker.service.ts
index 62db9de2..9df017d7 100644
--- a/frontend/src/composables/services/docker.service.ts
+++ b/frontend/src/composables/services/docker.service.ts
@@ -35,7 +35,7 @@ export function useDockerImages(): DockerImagesState {
 
     async function patchDockerImage(dockerData: DockerImage): Promise<void> {
         const endpoint = endpoints.dockerImages.patch.replace('{id}', dockerData.id);
-        await patch(endpoint, {public: dockerData.public }, response);
+        await patch(endpoint, {public: dockerData.public}, response);
     }
 
     async function createDockerImage(dockerData: DockerImage, file: File): Promise<void> {
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
index b0dab6ef..4ab98e01 100644
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -21,7 +21,7 @@ export const endpoints = {
     dockerImages: {
         index: '/api/docker-images/',
         search: '/api/docker-images/search/',
-        patch: 'api/docker-images/{id}/',
+        patch: '/api/docker-images/{id}/public/',
     },
     students: {
         index: '/api/students/',
diff --git a/frontend/src/views/admin/DockerImagesView.vue b/frontend/src/views/admin/DockerImagesView.vue
index 93436755..049f7425 100644
--- a/frontend/src/views/admin/DockerImagesView.vue
+++ b/frontend/src/views/admin/DockerImagesView.vue
@@ -46,18 +46,16 @@ const publicOptions = ref<{ value: any, label: string }[]>([
 ]);
 const showSafetyGuard = ref<boolean>(false);
 
-const changePublicStatus = async (dockerData: DockerImage): Promise<void> => {
-    showSafetyGuard.value = false;
-    await patchDockerImage(dockerData);
-};
-
 const toggleSafetyGuard = (data: any): void => {
     editItem.value.public = data.public;
     editItem.value.id = data.id;
     showSafetyGuard.value = true;
-    console.log(data);
-}
-
+    console.log(editItem.value);
+};
+const changePublicStatus = async (dockerData: DockerImage): Promise<void> => {
+    showSafetyGuard.value = false;
+    await patchDockerImage(dockerData);
+};
 const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
     const files: File[] = event.files as File[];
     await createDockerImage(addItem.value, files[0]);
@@ -120,7 +118,7 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                             <SelectButton
                                 class="mb-3 gap-3"
                                 v-model="data.public"
-                                @click="toggleSafetyGuard"
+                                @click="() => toggleSafetyGuard(data)"
                                 :options="publicOptions"
                                 option-value="value"
                                 option-label="label"/>
@@ -149,9 +147,9 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
             </div>
         </Body>
     </AdminLayout>
-    <Dialog v-model:visible="showSafetyGuard" :style="{ width: '26rem' }">
+    <Dialog v-model:visible="showSafetyGuard" :style="{ width: '15rem' }">
         <h3>Are you sure?</h3>
-        <div class="p-d-flex p-jc-end">
+        <div class="flex justify-content-between">
             <Button label="No" @click="showSafetyGuard = false" />
             <Button label="Yes" @click="() => changePublicStatus(editItem)" />
         </div>