chore: update translations and add public option docker image add adm…

…in panel #334
SELab-2 · Apr 25, 2024 · bd5bf1b · bd5bf1b
1 parent 33d1ae7
commit bd5bf1b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 14 deletions.
diff --git a/frontend/src/assets/lang/en.json b/frontend/src/assets/lang/en.json
@@ -214,6 +214,8 @@
     "admin": {
         "title": "Admin",
         "keyword": "Keyword",
+        "list": "List",
+        "add": "Add",
         "search": {
             "search": "Search",
             "general": "Search by general keyword"
@@ -244,7 +246,8 @@
         "catalog": "Catalog",
         "docker_images": {
             "title": "Docker images",
-            "name": "Name docker image"
+            "name": "Name of docker image",
+            "public": "Public"
         }
     },
     "primevue": {

diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
@@ -214,6 +214,8 @@
     "admin": {
         "title": "Beheerder",
         "keyword": "Trefwoord",
+        "list": "Lijst",
+        "add": "Voeg toe",
         "search": {
             "search": "Zoeken",
             "general": "Zoek op algemeen trefwoord"
@@ -244,7 +246,8 @@
         "catalog": "Catalogus",
         "docker_images": {
             "title": "Docker images",
-            "name": "Naam docker image"
+            "name": "Naam van docker image",
+            "public": "Publiek"
         }
     },
     "primevue": {

diff --git a/frontend/src/views/admin/DockerImagesView.vue b/frontend/src/views/admin/DockerImagesView.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import FileUpload, { type FileUploadUploaderEvent } from 'primevue/fileupload';
 import InputText from 'primevue/inputtext';
+import InputSwitch from 'primevue/inputswitch';
+import SelectButton from 'primevue/selectbutton';
 import AdminLayout from '@/components/layout/admin/AdminLayout.vue';
 import Title from '@/components/layout/Title.vue';
 import Body from '@/components/layout/Body.vue';
@@ -14,13 +16,18 @@ const { t } = useI18n();
 
 const response = ref<Response | null>(null);
 const name = ref('');
+const public_status = ref(false);
+
+const selectOptions = ref(['admin.list', 'admin.add'])
+const selected = ref<string>(t(selectOptions.value[0]));
 
 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,
+        public: public_status.value
     };
     await create<Response>(endpoint, data, response, Response.fromJSON, 'multipart/form-data');
     name.value = '';
@@ -33,18 +40,30 @@ const upload = async (event: FileUploadUploaderEvent): Promise<void> => {
             <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>
+            <SelectButton class="mb-3 gap-3" v-model="selected" :options="selectOptions.map(t)"/>
+            <div v-if="selected === t(selectOptions[0])">
+
+            </div>
+            <div v-else>
+                <InputText class="mb-3 gap-3" v-model:model-value="name" :placeholder="t('admin.docker_images.name')" />
+                <div v-if="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="public_status" />
+                    </div>
+                    <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>
+                </div>
+            </div>
         </Body>
     </AdminLayout>
 </template>