chore: actually add the actual view of admin panel to add docker images

#334
SELab-2 · Apr 20, 2024 · e0c6cfe · e0c6cfe
1 parent eb8b69b
commit e0c6cfe
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 0 deletions.
diff --git a/frontend/src/types/DockerImage.ts b/frontend/src/types/DockerImage.ts
@@ -0,0 +1,9 @@
+export class DockerImage {
+    constructor(
+        public id: string,
+        public name: string,
+        public file: string, // in the form of a uri
+        public publicStatus: string,
+        public owner: string,
+    ) {}
+}
diff --git a/frontend/src/views/admin/DockerImagesView.vue b/frontend/src/views/admin/DockerImagesView.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import FileUpload, { type FileUploadUploaderEvent } from 'primevue/fileupload';
+import InputText from 'primevue/inputtext';
+import AdminLayout from '@/components/layout/admin/AdminLayout.vue';
+import Title from '@/components/layout/Title.vue';
+import Body from '@/components/layout/Body.vue';
+import { create } from '@/composables/services/helpers.ts';
+import { Response } from '@/types/Response.ts';
+import { endpoints } from '@/config/endpoints.ts';
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+
+const { t } = useI18n();
+
+const response = ref<Response | null>(null);
+const name = ref('');
+
+const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
+    const files: File[] = event.files as File[];
+    const endpoint = endpoints.dockerImages.index;
+    const data = {
+        'file': files[0],
+        'name': name.value,
+    }
+    await create<Response>(endpoint, data, response, Response.fromJSON, 'multipart/form-data');
+    name.value = '';
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <Title>
+            <div class="gap-3 mb-3">{{ t('admin.docker_images.title') }}</div>
+        </Title>
+        <Body>
+            <InputText
+                class="mb-3 gap-3"
+                v-model:model-value="name"
+                :placeholder="t('admin.docker_images.name')"
+            />
+            <FileUpload
+                v-if="name.length > 0"
+                class="mb-3 gap-3"
+                :custom-upload="true"
+                @uploader="upload"
+                :file-limit="1"
+            >
+                <template #empty>
+                    <strong>No file selected.</strong>
+                </template>
+            </FileUpload>
+        </Body>
+    </AdminLayout>
+</template>
+
+<style scoped lang="scss"></style>