Group Key loop fix

whitecube · Mar 12, 2024 · 87c68e4 · 87c68e4
1 parent 566bb97
commit 87c68e4
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 24 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue
@@ -1,11 +1,13 @@
 <template>
-    <PanelItem :field="field">
+    <PanelItem :index="index" :field="field">
         <template #value>
-            <div v-for="(group, index) in groups">
+            <div v-for="(group, index) in orderedGroups">
                 <detail-nova-flexible-content-group
                     :index="index"
                     :last="(index === groups.length - 1)"
                     :group="group"
+                    :key="group.key"
+                    :resource="resource"
                     :resourceName="resourceName"
                     :resourceId="resourceId"
                     :attribute="field.attribute"
@@ -21,44 +23,78 @@ import Group from '../group';
 export default {
 
     props: ['resource', 'resourceName', 'resourceId', 'field'],
+    data: () => ({
+        order: [],
+        groups: {},
+    }),
 
     computed: {
-        groups() {
-            let group;
-            return this.field.value.reduce((groups, item) => {
-                if(!(group = this.getGroup(item))) return groups;
-                groups.push(group);
+        layouts() {
+            return this.field.layouts || false;
+        },
+        orderedGroups() {
+            this.value = this.field.value || [];
+
+            this.populateGroups();
+
+            return this.order.reduce((groups, key) => {
+                groups.push(this.groups[key]);
                 return groups;
             }, []);
-        }
+        },
     },
 
     methods: {
+        /*
+            * Set the displayed layouts from the field's current value
+            */
+        populateGroups() {
+            this.order.splice(0, this.order.length);
+            this.groups = {};
+
+            for (var i = 0; i < this.value.length; i++) {
+                this.addGroup(
+                    this.getLayout(this.value[i].layout),
+                    this.value[i].attributes,
+                    this.value[i].key,
+                    this.field.collapsed,
+                    this.value[i].title_data
+                );
+            }
+        },
+
         /**
          * Retrieve layout definition from its name
          */
         getLayout(name) {
-            if(!this.field.layouts) return;
-            return this.field.layouts.find(layout => layout.name == name);
+            if (!this.layouts) return;
+            return this.layouts.find((layout) => layout.name == name);
         },
 
         /**
-         * create group instance from raw field value
+         * Append the given layout to flexible content's list
          */
-        getGroup(item) {
+        addGroup(layout, attributes, key, collapsed, resolved_title) {
+            if (!layout) return;
 
-            let layout = this.getLayout(item.layout);
+            collapsed = collapsed || false;
 
-            if(!layout) return;
+            let fields =
+                    attributes || JSON.parse(JSON.stringify(layout.fields)),
+                group = new Group(
+                    layout.name,
+                    layout.title,
+                    fields,
+                    this.field,
+                    key,
+                    collapsed,
+                    layout,
+                    resolved_title
+                );
 
-            return new Group(
-                layout.name,
-                layout.title,
-                item.attributes,
-                this.field,
-                item.key
-            );
+            this.groups[group.key] = group;
+            this.order.push(group.key);
         },
-    }
-}
+    },
+};
 </script>