Merge pull request #16 from workupsrl/develop

Develop

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+## [4.2.2] - 2024-05-09
+### Fixed
+- Fixed details
+
 ## [4.2.1] - 2024-05-09
 ### Fixed
 - Fix translation on media fields

resources/js/components/fields/DetailField.vue

@@ -1,20 +1,51 @@
 <template>
-  <div class="advanced-nova-media-library">
-    <PanelItem :index="index" :field="field" >
-      <template #value>
-        <gallery :modelValue="field.value" :field="field" :multiple="field.multiple"/>
-      </template>
-    </PanelItem>
-  </div>
+    <div class="advanced-nova-media-library">
+        <PanelItem :index="index" :field="field">
+            <template #value>
+                <a
+                    v-if="field.translatable"
+                    class="inline-block font-bold cursor-pointer mr-2 animate-text-color select-none"
+                    :class="{ 'text-60': localeKey !== currentLocale, 'text-primary': localeKey === currentLocale }"
+                    :key="`a-${localeKey}`"
+                    v-for="(locale, localeKey) in field.locales"
+                    @click="changeTab(localeKey)"
+                >
+                    {{ locale }}
+                </a>
+                <div class="flex flex-row items-center">
+                    <gallery v-model="gallery" :field="field" :multiple="field.multiple && !field.single"/>
+                </div>
+            </template>
+        </PanelItem>
+    </div>
 </template>
 
 <script>
-  import Gallery from '../Gallery';
+import Gallery from '../Gallery';
 
-  export default {
+export default {
     components: {
-      Gallery,
+        Gallery,
     },
     props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
-  };
+    data() {
+        return {
+            currentLocale: Object.keys(this.field?.locales ?? {})?.[0],
+            gallery: [],
+        }
+    },
+    computed: {
+        gallery() {
+            return this.field.value.filter(media => media.custom_properties.locale === this.currentLocale)
+        }
+    },
+    methods: {
+        changeTab(locale) {
+            if (this.currentLocale !== locale) {
+                Nova.$emit('localeChanged', locale);
+                this.currentLocale = locale;
+            }
+        },
+    },
+};
 </script>