chore: backend search implementation (filter not fully functional) + …

…translations and column change #369
SELab-2 · Apr 25, 2024 · 84ee7d7 · 84ee7d7
1 parent 1e1949f
commit 84ee7d7
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 33 deletions.
diff --git a/backend/api/views/docker_view.py b/backend/api/views/docker_view.py
@@ -12,13 +12,46 @@
 from rest_framework.response import Response
 from rest_framework.viewsets import GenericViewSet
 
+from api.views.pagination.basic_pagination import BasicPagination
+
 
 class DockerImageViewSet(RetrieveModelMixin, CreateModelMixin, UpdateModelMixin, DestroyModelMixin, GenericViewSet):
 
     queryset = DockerImage.objects.all()
     serializer_class = DockerImageSerializer
     permission_classes = [DockerPermission]
 
+    @action(detail=False)
+    def search(self, request: Request) -> Response:
+        self.pagination_class = BasicPagination
+
+        search = request.query_params.get("search", "")
+        identifier = request.query_params.get("id", "")
+        name = request.query_params.get("name", "")
+        owner = request.query_params.get("owner", "")
+
+        queryset1 = self.get_queryset().filter(
+            id__icontains=search
+        )
+        queryset2 = self.get_queryset().filter(
+            name__icontains=search
+        )
+        # queryset3 = self.get_queryset().filter(
+        #     owner__icontains=search
+        # )
+        queryset1 = queryset1.union(queryset2)
+        queryset = self.get_queryset().filter(
+            id__icontains=identifier,
+            name__icontains=name,
+        )
+        queryset = queryset.union(queryset1)
+
+        serializer = self.serializer_class(self.paginate_queryset(queryset), many=True, context={
+            "request": request
+        })
+
+        return self.get_paginated_response(serializer.data)
+
     # TODO: Maybe not necessary
     # https://www.django-rest-framework.org/api-guide/permissions/#overview-of-access-restriction-methods
     def list(self, request: Request) -> Response:

diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
@@ -214,6 +214,7 @@
     "admin": {
         "title": "Admin",
         "keyword": "Keyword",
+        "id": "ID",
         "list": "List",
         "add": "Add",
         "search": {
@@ -225,7 +226,6 @@
         "save": "Save",
         "users": {
             "title": "Users",
-            "id": "ID",
             "username": "Username",
             "email": "Email",
             "roles": "Roles"
@@ -246,7 +246,9 @@
         "catalog": "Catalog",
         "docker_images": {
             "title": "Docker images",
-            "name": "Name of docker image",
+            "name_input": "Name of docker image",
+            "name": "Name",
+            "owner": "Owner ID",
             "public": "Public"
         }
     },

diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
@@ -214,6 +214,7 @@
     "admin": {
         "title": "Beheerder",
         "keyword": "Trefwoord",
+        "id": "ID",
         "list": "Lijst",
         "add": "Voeg toe",
         "search": {
@@ -225,7 +226,6 @@
         "save": "Sla op",
         "users": {
             "title": "Gebruikers",
-            "id": "ID",
             "username": "Gebruikersnaam",
             "email": "E-mail",
             "roles": "Functies"
@@ -246,7 +246,9 @@
         "catalog": "Catalogus",
         "docker_images": {
             "title": "Docker images",
-            "name": "Naam van docker image",
+            "name_input": "Naam van docker image",
+            "name": "Naam",
+            "owner": "Eigenaar ID",
             "public": "Publiek"
         }
     },

diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
@@ -20,7 +20,7 @@ export const endpoints = {
     },
     dockerImages: {
         index: '/api/docker-images/',
-        search: '/api/docker-images/search',
+        search: '/api/docker-images/search/',
     },
     students: {
         index: '/api/students/',

diff --git a/frontend/src/types/filter/Filter.ts b/frontend/src/types/filter/Filter.ts
@@ -67,6 +67,11 @@ export function getCourseFilters(query: LocationQuery): CourseFilter {
     return filters;
 }
 
+/**
+ * Get the docker image filters from the query.
+ *
+ * @param query
+ */
 export function getDockerImageFilters(query:LocationQuery): DockerImageFilter {
     return {
         search: query.search?.toString() ?? '',

diff --git a/frontend/src/views/admin/DockerImagesView.vue b/frontend/src/views/admin/DockerImagesView.vue
@@ -14,9 +14,7 @@ import { ref } from 'vue';
 import { useRoute } from "vue-router";
 import { DockerImage } from "@/types/DockerImage.ts";
 import { getDockerImageFilters } from "@/types/filter/Filter.ts";
-import type {Role} from "@/types/users/User.ts";
 import InputIcon from "primevue/inputicon";
-import MultiSelect from "primevue/multiselect";
 import Column from "primevue/column";
 import IconField from "primevue/iconfield";
 
@@ -32,10 +30,10 @@ const selectOptions = ref(['admin.list', 'admin.add']);
 const selected = ref<string>(t(selectOptions.value[0]));
 
 const columns = ref([
-    { field: 'id', header: 'admin.users.id' },
-    { field: 'username', header: 'admin.users.username' },
-    { field: 'email', header: 'admin.users.email' },
-    { field: 'roles', header: 'admin.users.roles' },
+    { field: 'id', header: 'admin.id' },
+    { field: 'name', header: 'admin.docker_images.name' },
+    { field: 'owner', header: 'admin.docker_images.owner' },
+    { field: 'public', header: 'admin.docker_images.public' },
 ]);
 
 const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
@@ -60,30 +58,40 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
                     :search="searchDockerImages"
                     :filter="filter"
                     :on-filter="onFilter">
-                        <Column
-                            v-for="column in columns"
-                            :key="column.field"
-                            :field="column.field"
-                            :header="t(column.header)"
-                            :show-filter-menu="false"
-                            :style="{ minWidth: '14rem' }"
-                        >
-                            <template #filter>
-                                <IconField
-                                    iconPosition="left"
-                                    class="flex align-items-center"
-                                >
-                                    <InputIcon>
-                                        <i class="pi pi-search flex justify-content-center" />
-                                    </InputIcon>
-                                    <InputText v-model="filter[column.field]" :placeholder="t('admin.search.search')" />
-                                </IconField>
-                            </template>
-                        </Column>
+                    <template #header>
+                        <div class="flex justify-content-end">
+                            <IconField iconPosition="left">
+                                <InputIcon>
+                                    <i class="pi pi-search" />
+                                </InputIcon>
+                                <InputText v-model="filter['search']" :placeholder="t('admin.search.general')" />
+                            </IconField>
+                        </div>
+                    </template>
+                    <Column
+                        v-for="column in columns"
+                        :key="column.field"
+                        :field="column.field"
+                        :header="t(column.header)"
+                        :show-filter-menu="false"
+                        :style="{ minWidth: '14rem' }"
+                    >
+                        <template #filter>
+                            <IconField
+                                iconPosition="left"
+                                class="flex align-items-center"
+                            >
+                                <InputIcon>
+                                    <i class="pi pi-search flex justify-content-center" />
+                                </InputIcon>
+                                <InputText v-model="filter[column.field]" :placeholder="t('admin.search.search')" />
+                            </IconField>
+                        </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')" />
+                <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>

diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
@@ -47,7 +47,7 @@ const editItem = ref<User>(User.blankUser());
 const popupEdit = ref<boolean>(false);
 
 const columns = ref([
-    { field: 'id', header: 'admin.users.id' },
+    { field: 'id', header: 'admin.id' },
     { field: 'username', header: 'admin.users.username' },
     { field: 'email', header: 'admin.users.email' },
     { field: 'roles', header: 'admin.users.roles' },