From dcbee3dc653106ae74a397159525f07656719c03 Mon Sep 17 00:00:00 2001
From: bsilkyn <brent.silkyn@ugent.be>
Date: Mon, 29 Apr 2024 20:28:08 +0200
Subject: [PATCH] chore: lint fixes + filter background fix #369

---
 backend/api/views/docker_view.py              |  2 +-
 .../src/components/admin/LazyDataTable.vue    | 32 ++++++------
 .../composables/services/docker.service.ts    | 22 ++++----
 frontend/src/types/DockerImage.ts             |  8 +--
 frontend/src/types/filter/Filter.ts           |  6 +--
 frontend/src/views/admin/DockerImagesView.vue | 51 +++++++++----------
 frontend/src/views/admin/UsersView.vue        |  5 +-
 7 files changed, 58 insertions(+), 68 deletions(-)

diff --git a/backend/api/views/docker_view.py b/backend/api/views/docker_view.py
index d5c84210..3d6becdc 100644
--- a/backend/api/views/docker_view.py
+++ b/backend/api/views/docker_view.py
@@ -39,7 +39,7 @@ def search(self, request: Request) -> Response:
         queryset3 = self.get_queryset().filter(
             owner__id__icontains=search
         )
-        queryset1 = queryset1.union(queryset2)
+        queryset1 = queryset1.union(queryset2, queryset3)
         queryset = self.get_queryset().filter(
             id__icontains=identifier,
             name__icontains=name,
diff --git a/frontend/src/components/admin/LazyDataTable.vue b/frontend/src/components/admin/LazyDataTable.vue
index 14c49b06..90ebf05f 100644
--- a/frontend/src/components/admin/LazyDataTable.vue
+++ b/frontend/src/components/admin/LazyDataTable.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import DataTable, {type DataTableSelectAllChangeEvent} from "primevue/datatable";
-import { onMounted, watch, ref, defineExpose, toRef } from "vue";
-import { PaginatorResponse } from '@/types/filter/Paginator.ts'
+import DataTable, { type DataTableSelectAllChangeEvent } from 'primevue/datatable';
+import { onMounted, watch, ref, defineExpose, toRef } from 'vue';
+import { type PaginatorResponse } from '@/types/filter/Paginator.ts';
 import { usePaginator } from '@/composables/filters/paginator.ts';
-import { Filter } from "@/types/filter/Filter.ts";
-import Column from "primevue/column";
+import { type Filter } from '@/types/filter/Filter.ts';
+import Column from 'primevue/column';
 
 /* Properties */
 const props = defineProps<{
-    pagination: PaginatorResponse<any> | null
-    entities: any[] | null // list containing all the entities displayed by data table after executing get method
-    get: () => Promise<void> // get method for backend
-    search: (filters: Filter, page: number, pageSize: number) => Promise<void>
-    filter: Filter
-    onFilter: (callback: () => Promise<void>, debounce?: (number | undefined), immediate?: (boolean | undefined)) => void
-}>()
+    pagination: PaginatorResponse<any> | null;
+    entities: any[] | null; // list containing all the entities displayed by data table after executing get method
+    get: () => Promise<void>; // get method for backend
+    search: (filters: Filter, page: number, pageSize: number) => Promise<void>;
+    filter: Filter;
+    onFilter: (callback: () => Promise<void>, debounce?: number | undefined, immediate?: boolean | undefined) => void;
+}>();
 
 /* Injections */
 const { page, first, pageSize, onPaginate, resetPagination } = usePaginator();
@@ -48,7 +48,7 @@ const fetch = async (): Promise<void> => {
     loading.value = true;
     props.search(props.filter, page.value, pageSize.value).then(() => {
         loading.value = false;
-    })
+    });
 };
 const onSelectAllChange = (event: DataTableSelectAllChangeEvent): void => {
     selectAll.value = event.checked;
@@ -70,7 +70,7 @@ const onRowUnselect = (): void => {
     selectAll.value = false;
 };
 
-defineExpose({fetch})
+defineExpose({ fetch });
 </script>
 
 <template>
@@ -105,6 +105,4 @@ defineExpose({fetch})
     </div>
 </template>
 
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
+<style scoped lang="scss"></style>
diff --git a/frontend/src/composables/services/docker.service.ts b/frontend/src/composables/services/docker.service.ts
index 9df017d7..f6a7806f 100644
--- a/frontend/src/composables/services/docker.service.ts
+++ b/frontend/src/composables/services/docker.service.ts
@@ -1,11 +1,10 @@
 import { DockerImage } from '@/types/DockerImage.ts';
-import { Response } from "@/types/Response.ts";
+import { Response } from '@/types/Response.ts';
 import { endpoints } from '@/config/endpoints.ts';
-import { type Ref, ref } from "vue";
-import { Filter } from "@/types/filter/Filter.ts";
-import {create, getList, getPaginatedList, patch} from "@/composables/services/helpers.ts";
-import {PaginatorResponse} from "@/types/filter/Paginator.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 { type PaginatorResponse } from '@/types/filter/Paginator.ts';
 
 interface DockerImagesState {
     pagination: Ref<PaginatorResponse<DockerImage> | null>;
@@ -17,7 +16,6 @@ interface DockerImagesState {
     createDockerImage: (dockerData: DockerImage, file: File) => Promise<void>;
 }
 
-
 export function useDockerImages(): DockerImagesState {
     const pagination = ref<PaginatorResponse<DockerImage> | null>(null);
     const dockerImages = ref<DockerImage[] | null>(null);
@@ -35,7 +33,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> {
@@ -43,9 +41,9 @@ export function useDockerImages(): DockerImagesState {
         await create<Response>(
             endpoint,
             {
-                file: file,
+                file,
                 name: dockerData.name,
-                public: dockerData.public
+                public: dockerData.public,
             },
             response,
             Response.fromJSON,
@@ -61,6 +59,6 @@ export function useDockerImages(): DockerImagesState {
         getDockerImages,
         searchDockerImages,
         patchDockerImage,
-        createDockerImage
-    }
+        createDockerImage,
+    };
 }
diff --git a/frontend/src/types/DockerImage.ts b/frontend/src/types/DockerImage.ts
index 296dc774..9d82a49f 100644
--- a/frontend/src/types/DockerImage.ts
+++ b/frontend/src/types/DockerImage.ts
@@ -11,13 +11,7 @@ export class DockerImage {
     }
 
     static fromJSON(dockerData: DockerImage): DockerImage {
-        return new DockerImage(
-            dockerData.id,
-            dockerData.name,
-            dockerData.file,
-            dockerData.public,
-            dockerData.owner
-        );
+        return new DockerImage(dockerData.id, dockerData.name, dockerData.file, dockerData.public, dockerData.owner);
     }
 
     static blankDockerImage(): DockerImage {
diff --git a/frontend/src/types/filter/Filter.ts b/frontend/src/types/filter/Filter.ts
index 7fed5128..59236fd3 100644
--- a/frontend/src/types/filter/Filter.ts
+++ b/frontend/src/types/filter/Filter.ts
@@ -1,4 +1,4 @@
-import {type LocationQuery} from 'vue-router';
+import { type LocationQuery } from 'vue-router';
 
 export type UserFilter = {
     id: string;
@@ -18,7 +18,7 @@ export type DockerImageFilter = {
     id: string;
     name: string;
     owner: string;
-} & Filter
+} & Filter;
 
 export interface Filter {
     search: string;
@@ -80,7 +80,7 @@ export function getCourseFilters(query: LocationQuery): CourseFilter {
  *
  * @param query
  */
-export function getDockerImageFilters(query:LocationQuery): DockerImageFilter {
+export function getDockerImageFilters(query: LocationQuery): DockerImageFilter {
     return {
         search: query.search?.toString() ?? '',
         id: query.id?.toString() ?? '',
diff --git a/frontend/src/views/admin/DockerImagesView.vue b/frontend/src/views/admin/DockerImagesView.vue
index 0176e776..22ff516e 100644
--- a/frontend/src/views/admin/DockerImagesView.vue
+++ b/frontend/src/views/admin/DockerImagesView.vue
@@ -11,20 +11,21 @@ import Title from '@/components/layout/Title.vue';
 import Body from '@/components/layout/Body.vue';
 import LazyDataTable from '@/components/admin/LazyDataTable.vue';
 import { useDockerImages } from '@/composables/services/docker.service.ts';
-import { useFilter } from "@/composables/filters/filter.ts";
+import { useFilter } from '@/composables/filters/filter.ts';
 import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
-import { useRoute } from "vue-router";
-import { DockerImage } from "@/types/DockerImage.ts";
-import { getDockerImageFilters } from "@/types/filter/Filter.ts";
-import InputIcon from "primevue/inputicon";
-import Column from "primevue/column";
-import IconField from "primevue/iconfield";
+import { useRoute } from 'vue-router';
+import { DockerImage } from '@/types/DockerImage.ts';
+import { getDockerImageFilters } from '@/types/filter/Filter.ts';
+import InputIcon from 'primevue/inputicon';
+import Column from 'primevue/column';
+import IconField from 'primevue/iconfield';
 
 /* Injection */
 const { t } = useI18n();
 const { query } = useRoute();
-const { pagination, dockerImages, getDockerImages, searchDockerImages, patchDockerImage, createDockerImage } = useDockerImages();
+const { pagination, dockerImages, getDockerImages, searchDockerImages, patchDockerImage, createDockerImage } =
+    useDockerImages();
 const { filter, onFilter } = useFilter(getDockerImageFilters(query));
 
 const dataTable = ref();
@@ -39,11 +40,10 @@ const columns = ref([
     { field: 'id', header: 'admin.id' },
     { field: 'name', header: 'admin.docker_images.name' },
     { field: 'owner', header: 'admin.docker_images.owner' },
-
 ]);
-const publicOptions = ref<{ value: any, label: string }[]>([
-    {value: true, label: 'public'},
-    {value: false, label: 'private'}
+const publicOptions = ref<Array<{ value: any; label: string }>>([
+    { value: true, label: 'public' },
+    { value: false, label: 'private' },
 ]);
 const showSafetyGuard = ref<boolean>(false);
 
@@ -79,7 +79,8 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                     :search="searchDockerImages"
                     :filter="filter"
                     :on-filter="onFilter"
-                    ref="dataTable">
+                    ref="dataTable"
+                >
                     <template #header>
                         <div class="flex justify-content-end">
                             <IconField iconPosition="left">
@@ -99,10 +100,7 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                         :style="{ maxWidth: '3rem' }"
                     >
                         <template #filter>
-                            <IconField
-                                iconPosition="left"
-                                class="flex align-items-center"
-                            >
+                            <IconField iconPosition="left" class="flex align-items-center">
                                 <InputIcon>
                                     <i class="pi pi-search flex justify-content-center" />
                                 </InputIcon>
@@ -114,31 +112,32 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                         key="public"
                         field="public"
                         :header="t('admin.docker_images.public')"
-                        :style="{ maxWidth: '3rem' }">
+                        :style="{ maxWidth: '3rem' }"
+                    >
                         <template #body="{ data }">
                             <ToggleButton
                                 class="mb-3 gap-3"
                                 :model-value="data.public"
                                 @click="() => toggleSafetyGuard(data)"
                                 :on-label="t('admin.docker_images.public')"
-                                :off-label="t('admin.docker_images.private')"/>
+                                :off-label="t('admin.docker_images.private')"
+                            />
                         </template>
                     </Column>
                 </LazyDataTable>
             </div>
             <div v-else>
-                <InputText class="mb-3 gap-3" v-model:model-value="addItem.name" :placeholder="t('admin.docker_images.name_input')" />
+                <InputText
+                    class="mb-3 gap-3"
+                    v-model:model-value="addItem.name"
+                    :placeholder="t('admin.docker_images.name_input')"
+                />
                 <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" />
                     </div>
-                    <FileUpload
-                        class="mb-3 gap-3"
-                        :custom-upload="true"
-                        @uploader="upload"
-                        :file-limit="1"
-                    >
+                    <FileUpload class="mb-3 gap-3" :custom-upload="true" @uploader="upload" :file-limit="1">
                         <template #empty>
                             <strong>No file selected.</strong>
                         </template>
diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index 50bb0559..8118dd25 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -42,7 +42,7 @@ const createFunctions = ref<Array<(arg: any) => Promise<void>>>([createStudent,
 const destroyers = ref<Record<Role, (arg: any) => Promise<void>>>({});
 const destroyFunctions = ref<Array<(arg: any) => Promise<void>>>([deleteStudent, deleteAssistant, deleteTeacher]);
 
-const dataTable = ref()
+const dataTable = ref();
 const editItem = ref<User>(User.blankUser());
 const popupEdit = ref<boolean>(false);
 
@@ -142,7 +142,8 @@ const saveItem = async (): Promise<void> => {
                     :search="searchUsers"
                     :filter="filter"
                     :on-filter="onFilter"
-                    ref="dataTable">
+                    ref="dataTable"
+                >
                     <template #header>
                         <div class="flex justify-content-end">
                             <IconField iconPosition="left">