From 639e7b5c43404cf3df2431a80e4099cfca73ada9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 12 Sep 2023 12:08:15 +0200
Subject: [PATCH] Disable file multi value configurator

---
 .../ModuleFields/Configurator/multi.vue       |  18 ++-
 .../components/PageBlocks/Navigation/Base.vue |   2 +-
 .../Public/Page/Attachment/Link.vue           |   1 +
 .../Public/Page/Attachment/ListLoader.vue     | 138 +++++++++---------
 lib/js/src/compose/types/module-field/file.ts |   2 +
 5 files changed, 87 insertions(+), 74 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Configurator/multi.vue b/client/web/compose/src/components/ModuleFields/Configurator/multi.vue
index dddc557a1..725bd2b73 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/multi.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/multi.vue
@@ -9,12 +9,14 @@
         :options="selectOptions"
         stacked
       />
+
       <b-form-group
         class="mt-2"
         :label="$t('options.multiDelimiter.customLabel')"
       >
         <b-form-input
           v-model="field.options.multiDelimiter"
+          :disabled="isNotConfigurable"
           :placeholder="$t('options.multiDelimiter.customPlaceholder')"
         />
       </b-form-group>
@@ -35,13 +37,17 @@ export default {
     },
   },
 
-  data () {
-    return {
-      selectOptions: [
+  computed: {
+    selectOptions () {
+      return [
         { text: this.$t('options.multiDelimiter.newline'), value: '\n' },
-        { text: this.$t('options.multiDelimiter.comma'), value: ', ' },
-      ],
-    }
+        { text: this.$t('options.multiDelimiter.comma'), value: ', ', disabled: this.isNotConfigurable },
+      ]
+    },
+
+    isNotConfigurable () {
+      return ['File'].includes(this.field.kind)
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Base.vue b/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
index 50f11624b..d4b630934 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
@@ -13,7 +13,7 @@
           justified: options.display.justify === 'justify'
         }"
         :align="options.display.alignment"
-        class="border-0 h-100"
+        class="border-0 h-100 overflow-auto"
       >
         <b-nav-item
           v-for="(navItem, index) in options.navigationItems"
diff --git a/client/web/compose/src/components/Public/Page/Attachment/Link.vue b/client/web/compose/src/components/Public/Page/Attachment/Link.vue
index 11c2ff796..0308cb1e3 100644
--- a/client/web/compose/src/components/Public/Page/Attachment/Link.vue
+++ b/client/web/compose/src/components/Public/Page/Attachment/Link.vue
@@ -8,6 +8,7 @@
       {{ attachment.name }}
     </slot>
   </a>
+
   <a
     v-else
   >
diff --git a/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue b/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue
index bfc302a83..a7d41c77f 100644
--- a/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue
+++ b/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue
@@ -14,67 +14,60 @@
         :list.sync="attachments"
         :disabled="!enableOrder"
       >
-        <div
+        <b-row
           v-for="(a, index) in attachments"
           :key="a.attachmentID"
-          class="item mb-2"
+          no-gutters
+          class="flex-nowrap item mb-2"
         >
-          <b-row no-gutters>
-            <b-col
-              cols="auto"
+          <b-col cols="auto">
+            <div
+              v-if="enableOrder"
+              class="d-inline p-1 mr-2"
             >
-              <div
-                v-if="enableOrder"
-                class="d-inline p-1 mr-2"
-              >
-                <font-awesome-icon
-                  v-b-tooltip.hover
-                  :icon="['fas', 'bars']"
-                  :title="$t('general.tooltip.dragAndDrop')"
-                  class="handle text-light"
-                />
-              </div>
-            </b-col>
-
-            <b-col>
-              <div class="d-flex align-items-center">
-                <font-awesome-icon
-                  :title="ext(a)"
-                  :icon="['far', `file-${ext(a)}`]"
-                  class="text-dark h5 float-left mb-0 mr-2"
-                />
-
-                <attachment-link :attachment="a" />
-              </div>
-
-              <i18next
-                path="general.label.attachmentFileInfo"
-                tag="small"
-                class="d-block text-muted"
-              >
-                <span>{{ size(a) }}</span>
-
-                <span>{{ uploadedAt(a) }}</span>
-              </i18next>
-            </b-col>
-
-            <b-col cols="auto">
-              <b-button
-                v-if="a.download"
-                :href="a.download"
-                variant="outline-light"
-                class="border-0 text-primary px-2 mr-2"
-              >
-                <font-awesome-icon :icon="['fas', 'download']" />
-              </b-button>
-
-              <c-input-confirm
-                v-if="enableDelete"
-                @confirmed="deleteAttachment(index)"
+              <font-awesome-icon
+                v-b-tooltip.hover
+                :icon="['fas', 'bars']"
+                :title="$t('general.tooltip.dragAndDrop')"
+                class="handle text-light"
               />
-            </b-col>
-          </b-row>
-        </div>
+            </div>
+          </b-col>
+
+          <b-col style="word-break:break-all;">
+            <attachment-link :attachment="a" />
+
+            <i18next
+              path="general.label.attachmentFileInfo"
+              tag="small"
+              class="d-block text-muted"
+            >
+              <span>{{ size(a) }}</span>
+
+              <span>{{ uploadedAt(a) }}</span>
+            </i18next>
+          </b-col>
+
+          <b-col
+            cols="auto"
+            class="d-flex align-items-start"
+          >
+            <b-button
+              v-if="a.download"
+              :href="a.download"
+              variant="outline-light"
+              class="border-0 text-primary px-2 ml-2"
+            >
+              <font-awesome-icon :icon="['fas', 'download']" />
+            </b-button>
+
+            <c-input-confirm
+              v-if="enableDelete"
+              class="ml-2"
+              @confirmed="deleteAttachment(index)"
+            />
+          </b-col>
+        </b-row>
       </draggable>
     </div>
 
@@ -85,7 +78,8 @@
       <div
         v-for="a in attachments"
         :key="a.attachmentID"
-        :class="{ 'h-100': attachments.length === 1 }"
+        :class="{ 'h-100': attachments.length === 1, 'w-100': !canPreview(a) }"
+        class="item mb-2"
       >
         <c-preview-inline
           v-if="canPreview(a)"
@@ -99,22 +93,32 @@
 
           ]"
           :labels="previewLabels"
+          class="mb-1"
           @openPreview="openLightbox({ ...a, ...$event })"
         />
 
-        <div v-else>
-          <font-awesome-icon
-            :icon="['far', 'file-'+ext(a)]"
-          />
-        </div>
-
         <div
           v-if="!hideFileName"
-          class="text-center"
+          class="d-flex align-items-start justify-content-between"
+          :class="{ 'w-100': canPreview(a) }"
         >
-          <attachment-link
-            :attachment="a"
-          />
+          <div
+            :class="{ 'text-center': canPreview(a) }"
+            class="text-wrap"
+          >
+            <attachment-link
+              :attachment="a"
+            />
+          </div>
+
+          <b-button
+            v-if="a.download"
+            :href="a.download"
+            variant="outline-light"
+            class="border-0 text-primary px-2"
+          >
+            <font-awesome-icon :icon="['fas', 'download']" />
+          </b-button>
         </div>
       </div>
     </div>
diff --git a/lib/js/src/compose/types/module-field/file.ts b/lib/js/src/compose/types/module-field/file.ts
index a1adf8025..5f7f86c0e 100644
--- a/lib/js/src/compose/types/module-field/file.ts
+++ b/lib/js/src/compose/types/module-field/file.ts
@@ -27,6 +27,7 @@ interface FileOptions extends Options {
   backgroundColor?: string;
   clickToView?: boolean;
   enableDownload?: boolean;
+  multiDelimiter: string;
 }
 
 const defaults = (): Readonly<FileOptions> => Object.freeze({
@@ -47,6 +48,7 @@ const defaults = (): Readonly<FileOptions> => Object.freeze({
   backgroundColor: '#FFFFFF00',
   clickToView: true,
   enableDownload: true,
+  multiDelimiter: '\n',
 })
 
 export class ModuleFieldFile extends ModuleField {