Merge pull request #431 from codeworks-projects/feat/file-upload-modal

Feat/file upload modal
noi-techpark · Oct 31, 2023 · 31a9ade · 31a9ade
2 parents c7c8d1b + 6a11b60
commit 31a9ade
Show file tree

Hide file tree

Showing 25 changed files with 932 additions and 136 deletions.
diff --git a/databrowser/package-lock.json b/databrowser/package-lock.json
diff --git a/databrowser/src/components/checkbox/CheckboxCustom.vue b/databrowser/src/components/checkbox/CheckboxCustom.vue
@@ -11,6 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         v-model="checked"
         type="checkbox"
         class="h-5 w-5 cursor-pointer rounded border-gray-400 text-green-700"
+        :disabled="disabled"
         :tabindex="tabbable ? undefined : -1"
       />
       <span v-if="label != null" class="ml-3 font-semibold">{{ label }}</span>
@@ -28,10 +29,12 @@ const props = withDefaults(
     modelValue: boolean;
     label?: string;
     tabbable?: boolean;
+    disabled?: boolean;
   }>(),
   {
     label: undefined,
     tabbable: true,
+    disabled: false,
   }
 );
 

diff --git a/databrowser/src/components/dialog/DialogCustom.vue b/databrowser/src/components/dialog/DialogCustom.vue
@@ -7,50 +7,25 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <template>
   <TransitionRoot appear :show="isOpen" as="template">
     <Dialog as="div" class="relative z-20" @close="emit('close')">
-      <TransitionChild
-        as="template"
-        enter="duration-300 ease-out"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="duration-200 ease-in"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-      >
-        <div class="fixed inset-0 bg-black/25"></div>
-      </TransitionChild>
-
-      <div class="fixed inset-0 overflow-y-auto">
-        <div
-          class="flex min-h-full items-center justify-center p-4 text-center"
+      <DialogOverlay />
+      <DialogOverlayContainer>
+        <DialogPanel
+          class="w-full max-w-md overflow-hidden rounded bg-white p-6 text-left align-middle shadow-xl transition-all"
         >
-          <TransitionChild
-            as="template"
-            enter="duration-300 ease-out"
-            enter-from="opacity-0 scale-95"
-            enter-to="opacity-100 scale-100"
-            leave="duration-200 ease-in"
-            leave-from="opacity-100 scale-100"
-            leave-to="opacity-0 scale-95"
+          <DialogTitle
+            as="h3"
+            class="text-center text-xl font-semibold leading-6 text-dialog"
           >
-            <DialogPanel
-              class="w-full max-w-md overflow-hidden rounded bg-white p-6 text-left align-middle shadow-xl transition-all"
-            >
-              <DialogTitle
-                as="h3"
-                class="text-center text-xl font-semibold leading-6 text-dialog"
-              >
-                <slot name="title"></slot>
-              </DialogTitle>
-              <DialogDescription class="mt-4 text-center text-dialog">
-                <slot name="description"></slot>
-              </DialogDescription>
-              <div class="mt-6 flex flex-col gap-2">
-                <slot name="body"></slot>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
+            <slot name="title"></slot>
+          </DialogTitle>
+          <DialogDescription class="mt-4 text-center text-dialog">
+            <slot name="description"></slot>
+          </DialogDescription>
+          <div class="mt-6 flex flex-col gap-2">
+            <slot name="body"></slot>
+          </div>
+        </DialogPanel>
+      </DialogOverlayContainer>
     </Dialog>
   </TransitionRoot>
 </template>
@@ -61,10 +36,12 @@ import {
   DialogDescription,
   DialogPanel,
   DialogTitle,
-  TransitionChild,
   TransitionRoot,
 } from '@headlessui/vue';
 
+import DialogOverlay from './DialogOverlay.vue';
+import DialogOverlayContainer from './DialogOverlayContainer.vue';
+
 const emit = defineEmits(['close']);
 
 defineProps<{ isOpen: boolean }>();

diff --git a/databrowser/src/components/dialog/DialogOverlay.vue b/databrowser/src/components/dialog/DialogOverlay.vue
@@ -0,0 +1,11 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <[email protected]>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <DialogOverlayTransitionChild>
+    <div class="fixed inset-0 bg-black/25"></div>
+  </DialogOverlayTransitionChild>
+</template>
diff --git a/databrowser/src/components/dialog/DialogOverlayContainer.vue b/databrowser/src/components/dialog/DialogOverlayContainer.vue
@@ -0,0 +1,19 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <[email protected]>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="fixed inset-0 overflow-y-auto">
+    <div class="flex min-h-full items-center justify-center p-4 text-center">
+      <DialogPanelTransitionChild>
+        <slot></slot>
+      </DialogPanelTransitionChild>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DialogPanelTransitionChild from './DialogPanelTransitionChild.vue';
+</script>
diff --git a/databrowser/src/components/dialog/DialogOverlayTransitionChild.vue b/databrowser/src/components/dialog/DialogOverlayTransitionChild.vue
@@ -0,0 +1,23 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <[email protected]>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <TransitionChild
+    as="template"
+    enter="duration-300 ease-out"
+    enter-from="opacity-0"
+    enter-to="opacity-100"
+    leave="duration-200 ease-in"
+    leave-from="opacity-100"
+    leave-to="opacity-0"
+  >
+    <slot></slot>
+  </TransitionChild>
+</template>
+
+<script setup lang="ts">
+import { TransitionChild } from '@headlessui/vue';
+</script>
diff --git a/databrowser/src/components/dialog/DialogPanelTransitionChild.vue b/databrowser/src/components/dialog/DialogPanelTransitionChild.vue
@@ -0,0 +1,23 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <[email protected]>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <TransitionChild
+    as="template"
+    enter="duration-300 ease-out"
+    enter-from="opacity-0 scale-95"
+    enter-to="opacity-100 scale-100"
+    leave="duration-200 ease-in"
+    leave-from="opacity-100 scale-100"
+    leave-to="opacity-0 scale-95"
+  >
+    <slot></slot>
+  </TransitionChild>
+</template>
+
+<script setup lang="ts">
+import { TransitionChild } from '@headlessui/vue';
+</script>
diff --git a/...rowser/src/domain/cellComponents/components/cells/eventDocumentCell/EventDocumentCell.vue b/...rowser/src/domain/cellComponents/components/cells/eventDocumentCell/EventDocumentCell.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       <EventDocumentTab type="pdf" :items="items" />
     </template>
     <template #add>
-      <EditListUpload type="pdf" />
+      <EditListUpload type="pdf" has-language-dialog />
     </template>
   </EditListCell>
 </template>
@@ -36,10 +36,12 @@ const { useApiParameter } = useApiQuery();
 const updateWithCurrentLanguage = ({ value }: { value?: FileEntry[] }) => {
   const currentLanguage = useApiParameter('language');
 
-  const updatedFiles = value?.map((file) => ({
-    ...file,
-    language: currentLanguage.value,
-  }));
+  const updatedFiles =
+    value?.map((file) => ({
+      ...file,
+      language: currentLanguage.value,
+    })) || [];
+
   emit('update', { prop: 'items', value: updatedFiles });
 };
 </script>