From cb5d643839031befe2a43671449050ee913c6639 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 18 Mar 2024 15:22:27 -0300
Subject: [PATCH] Replaces URL usages by Url to avoid dynamic component
 initilization issues on Vue3.

---
 .../edition/metadatum-edition-form.vue        |   4 +-
 .../metadata-types/tainacan-form-item.vue     |   2 +-
 .../url/{FormURL.vue => FormUrl.vue}          | 100 ++++++++++--------
 .../url/{TainacanURL.vue => TainacanUrl.vue}  |   1 -
 .../components/modals/bulk-edition-modal.vue  |   2 +-
 .../blocks/item-submission-form/theme.js      |   4 +-
 6 files changed, 59 insertions(+), 54 deletions(-)
 rename src/views/admin/components/metadata-types/url/{FormURL.vue => FormUrl.vue} (61%)
 rename src/views/admin/components/metadata-types/url/{TainacanURL.vue => TainacanUrl.vue} (98%)

diff --git a/src/views/admin/components/edition/metadatum-edition-form.vue b/src/views/admin/components/edition/metadatum-edition-form.vue
index 7fd1912b9..57304807d 100644
--- a/src/views/admin/components/edition/metadatum-edition-form.vue
+++ b/src/views/admin/components/edition/metadatum-edition-form.vue
@@ -407,7 +407,7 @@
     import FormNumeric from '../metadata-types/numeric/FormNumeric.vue';
     import FormUser from '../metadata-types/user/FormUser.vue';
     import FormGeoCoordinate from '../metadata-types/geocoordinate/FormGeoCoordinate.vue';
-    import FormURL from '../metadata-types/url/FormURL.vue';
+    import FormUrl from '../metadata-types/url/FormUrl.vue';
 
     export default {
         name: 'MetadatumEditionForm',
@@ -420,7 +420,7 @@
             'tainacan-form-numeric': FormNumeric,
             'tainacan-form-user': FormUser,
             'tainacan-form-geocoordinate': FormGeoCoordinate,
-            'tainacan-form-url': FormURL
+            'tainacan-form-url': FormUrl
         },
         mixins: [ formHooks ],
         props: {
diff --git a/src/views/admin/components/metadata-types/tainacan-form-item.vue b/src/views/admin/components/metadata-types/tainacan-form-item.vue
index 7f9a8f43c..53ae752db 100644
--- a/src/views/admin/components/metadata-types/tainacan-form-item.vue
+++ b/src/views/admin/components/metadata-types/tainacan-form-item.vue
@@ -181,7 +181,7 @@
             TainacanCompound: defineAsyncComponent(() => import('./compound/TainacanCompound.vue')),
             TainacanUser: defineAsyncComponent(() => import('./user/TainacanUser.vue')),
             TainacanGeocoordinate: defineAsyncComponent(() => import('./geocoordinate/TainacanGeoCoordinate.vue')),
-            TainacanURL: defineAsyncComponent(() => import('./url/TainacanURL.vue'))
+            TainacanUrl: defineAsyncComponent(() => import('./url/TainacanUrl.vue'))
         },
         props: {
             itemMetadatum: Object,
diff --git a/src/views/admin/components/metadata-types/url/FormURL.vue b/src/views/admin/components/metadata-types/url/FormUrl.vue
similarity index 61%
rename from src/views/admin/components/metadata-types/url/FormURL.vue
rename to src/views/admin/components/metadata-types/url/FormUrl.vue
index e1a155805..98136db75 100644
--- a/src/views/admin/components/metadata-types/url/FormURL.vue
+++ b/src/views/admin/components/metadata-types/url/FormUrl.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <section>
         <b-field
                 :addons="false"
                 :label="$i18n.getHelperTitle('tainacan-url', 'link-as-button')">
@@ -16,6 +16,7 @@
         </b-field>
 
         <b-field
+                v-if="linkAsButton == 'no'"
                 :addons="false"
                 :label="$i18n.getHelperTitle('tainacan-url', 'force-iframe')">
             &nbsp;
@@ -30,54 +31,59 @@
                     :message="$i18n.getHelperMessage('tainacan-url', 'force-iframe')" />
         </b-field>
 
-        <b-field
-                v-if="forceIframe == 'yes'"
-                :addons="false">
-            <label class="label is-inline-block">
-                {{ $i18n.getHelperTitle('tainacan-url', 'iframe-min-height') }}
-                <help-button
-                        :title="$i18n.getHelperTitle('tainacan-url', 'iframe-min-height')"
-                        :message="$i18n.getHelperMessage('tainacan-url', 'iframe-min-height')" />
-            </label>
-            <b-numberinput
-                    :model-value="iframeMinimumHeight === '' ? 0 : iframeMinimumHeight"
-                    size="is-small"
-                    step="1"
-                    @update:model-value="onUpdateIframeMinimumHeight" />
-        </b-field>
+        <transition name="filter-item">
+            <div 
+                    v-if="forceIframe == 'yes'"
+                    style="break-inside: avoid;"> 
+                <b-field
+                        :addons="false">
+                    <label class="label is-inline-block">
+                        {{ $i18n.getHelperTitle('tainacan-url', 'iframe-min-height') }}
+                        <help-button
+                                :title="$i18n.getHelperTitle('tainacan-url', 'iframe-min-height')"
+                                :message="$i18n.getHelperMessage('tainacan-url', 'iframe-min-height')" />
+                    </label>
+                    <b-numberinput
+                            :model-value="iframeMinimumHeight === '' ? 0 : iframeMinimumHeight"
+                            size="is-small"
+                            step="1"
+                            @update:model-value="onUpdateIframeMinimumHeight" />
+                </b-field>
 
-        <b-field 
-                v-if="forceIframe == 'yes'"
-                :addons="false"
-                :label="$i18n.getHelperTitle('tainacan-url', 'iframe-allowfullscreen')">
-            &nbsp;
-            <b-switch
-                    v-model="iframeAllowfullscreen"
-                    size="is-small"
-                    true-value="yes"
-                    false-value="no"
-                    @update:model-value="onUpdateIframeAllowfullscreen" />
-            <help-button
-                    :title="$i18n.getHelperTitle('tainacan-url', 'iframe-allowfullscreen')"
-                    :message="$i18n.getHelperMessage('tainacan-url', 'iframe-allowfullscreen')" />
-        </b-field>
+                <b-field 
+                        v-if="forceIframe == 'yes'"
+                        :addons="false"
+                        :label="$i18n.getHelperTitle('tainacan-url', 'iframe-allowfullscreen')">
+                    &nbsp;
+                    <b-switch
+                            v-model="iframeAllowfullscreen"
+                            size="is-small"
+                            true-value="yes"
+                            false-value="no"
+                            @update:model-value="onUpdateIframeAllowfullscreen" />
+                    <help-button
+                            :title="$i18n.getHelperTitle('tainacan-url', 'iframe-allowfullscreen')"
+                            :message="$i18n.getHelperMessage('tainacan-url', 'iframe-allowfullscreen')" />
+                </b-field>
 
-        <b-field 
-                v-if="forceIframe == 'yes'"
-                :addons="false"
-                :label="$i18n.getHelperTitle('tainacan-url', 'is-image')">
-            &nbsp;
-            <b-switch
-                    v-model="isImage"      
-                    size="is-small" 
-                    true-value="yes"
-                    false-value="no"
-                    @update:model-value="onUpdateIsImage" />
-            <help-button
-                    :title="$i18n.getHelperTitle('tainacan-url', 'is-image')"
-                    :message="$i18n.getHelperMessage('tainacan-url', 'is-image')" />
-        </b-field>
-    </div>
+                <b-field
+                        :addons="false"
+                        :label="$i18n.getHelperTitle('tainacan-url', 'is-image')">
+                    &nbsp;
+                    <b-switch
+                            v-model="isImage"      
+                            size="is-small" 
+                            true-value="yes"
+                            false-value="no"
+                            @update:model-value="onUpdateIsImage" />
+                    <help-button
+                            :title="$i18n.getHelperTitle('tainacan-url', 'is-image')"
+                            :message="$i18n.getHelperMessage('tainacan-url', 'is-image')" />
+                </b-field>
+            </div>
+        </transition>
+
+    </section>
 </template>
 
 <script>
diff --git a/src/views/admin/components/metadata-types/url/TainacanURL.vue b/src/views/admin/components/metadata-types/url/TainacanUrl.vue
similarity index 98%
rename from src/views/admin/components/metadata-types/url/TainacanURL.vue
rename to src/views/admin/components/metadata-types/url/TainacanUrl.vue
index 256a70d81..90f34887f 100644
--- a/src/views/admin/components/metadata-types/url/TainacanURL.vue
+++ b/src/views/admin/components/metadata-types/url/TainacanUrl.vue
@@ -31,7 +31,6 @@
 <script>
 
 export default {
-    name: 'TainacanMetadataTypeURL',
     props: {
         itemMetadatum: Object,
         value: [String, Number, Array],
diff --git a/src/views/admin/components/modals/bulk-edition-modal.vue b/src/views/admin/components/modals/bulk-edition-modal.vue
index 0e398ea3c..e28a0d347 100644
--- a/src/views/admin/components/modals/bulk-edition-modal.vue
+++ b/src/views/admin/components/modals/bulk-edition-modal.vue
@@ -329,7 +329,7 @@
             TainacanCompound: defineAsyncComponent(() => import('../metadata-types/compound/TainacanCompound.vue')),
             TainacanUser: defineAsyncComponent(() => import('../metadata-types/user/TainacanUser.vue')),
             TainacanGeocoordinate: defineAsyncComponent(() => import('../metadata-types/geocoordinate/TainacanGeoCoordinate.vue')),
-            TainacanURL: defineAsyncComponent(() => import('../metadata-types/url/TainacanURL.vue'))
+            TainacanUrl: defineAsyncComponent(() => import('../metadata-types/url/TainacanUrl.vue'))
         },
         props: {
             modalTitle: String,
diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js b/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js
index 4ce37a33b..5745545cf 100644
--- a/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js
+++ b/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js
@@ -39,7 +39,7 @@ import TainacanTaxonomy from '../../../admin/components/metadata-types/taxonomy/
 import TainacanCompound from '../../../admin/components/metadata-types/compound/TainacanCompound.vue';
 import TainacanUser from '../../../admin/components/metadata-types/user/TainacanUser.vue';
 import TainacanGeoCoordinate from '../../../admin/components/metadata-types/geocoordinate/TainacanGeoCoordinate.vue';
-import TainacanURL from '../../../admin/components/metadata-types/url/TainacanURL.vue';
+import TainacanUrl from '../../../admin/components/metadata-types/url/TainacanUrl.vue';
 
 // Main components
 import ItemSubmissionForm from './theme.vue';
@@ -179,7 +179,7 @@ export default (element) => {
             VueItemSubmission.component('tainacan-compound', TainacanCompound);
             VueItemSubmission.component('tainacan-user', TainacanUser);
             VueItemSubmission.component('tainacan-geocoordinate', TainacanGeoCoordinate);
-            VueItemSubmission.component('tainacan-url', TainacanURL);
+            VueItemSubmission.component('tainacan-url', TainacanUrl);
 
             /* Others */
             VueItemSubmission.component('tainacan-form-item', TainacanFormItem);