Refactored table block with structure field #3323 #3324

panel/src/components/Blocks/Types/Table.vue

@@ -4,6 +4,7 @@
       <th
         v-for="(column, columnName) in columns"
         :key="columnName"
+        :style="'width:' + width(column.width)"
         :data-align="column.align"
       >
         {{ column.label }}
@@ -18,28 +19,46 @@
       <td
         v-for="(column, columnName) in columns"
         :key="rowIndex + '-' + columnName"
+        :style="'width:' + width(column.width)"
         :data-align="column.align"
       >
-        {{ column.before }} {{ row[columnName] }} {{ column.after }}
+        <component
+          :is="'k-' + column.type + '-field-preview'"
+          v-if="previewExists(column.type)"
+          :value="row[columnName]"
+          :column="column"
+          :field="fields[columnName]"
+        />
+        <template v-else>
+          <p class="k-structure-table-text">
+            {{ column.before }} {{ displayText(fields[columnName], row[columnName]) || "–" }} {{ column.after }}
+          </p>
+        </template>
       </td>
     </tr>
   </table>
 </template>
 
 <script>
+import structure from "@/mixins/forms/structure.js";
+
 /**
  * @displayName BlockTypeTable
  * @internal
  */
 export default {
+  mixins: [structure],
   inheritAttrs: false,
   computed: {
     columns() {
-      return this.table.columns || this.table.fields || {};
+      return this.table.columns || this.fields;
     },
     columnsCount() {
       return Object.keys(this.columns).length;
     },
+    fields() {
+      return this.table.fields || {};
+    },
     rows() {
       return this.content.rows || [];
     },

panel/src/components/Forms/Field/StructureField.vue

@@ -169,10 +169,10 @@
 
 <script>
 import direction from "@/helpers/direction.js";
-import { props as Field } from "../Field.vue";
+import structure from "@/mixins/forms/structure.js";
 
 export default {
-  mixins: [Field],
+  mixins: [structure],
   inheritAttrs: false,
   props: {
     columns: Object,
@@ -414,51 +414,6 @@ export default {
         }
       });
     },
-    displayText(field, value) {
-      switch (field.type) {
-        case "user": {
-          return value.email;
-        }
-        case "date": {
-          const date = this.$library.dayjs(value);
-          const format = field.time === true ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD";
-          return date.isValid() ? date.format(format) : "";
-        }
-        case "tags":
-        case "multiselect":
-          return value
-            .map(item => {
-              return item.text;
-            })
-            .join(", ");
-        case "checkboxes": {
-          return value
-            .map(item => {
-              let text = item;
-
-              field.options.forEach(option => {
-                if (option.value === item) {
-                  text = option.text;
-                }
-              });
-
-              return text;
-            })
-            .join(", ");
-        }
-        case "radio":
-        case "select": {
-          const option = field.options.filter(item => item.value === value)[0];
-          return option ? option.text : null;
-        }
-      }
-
-      if (typeof value === "object" && value !== null) {
-        return "…";
-      }
-
-      return value.toString();
-    },
     duplicateItem(index) {
       this.addItem(this.items[index + this.pagination.offset]);
       this.onInput();
@@ -511,7 +466,7 @@ export default {
       this.$emit("input", this.items);
     },
     /**
-     * Edit the structure field entry at `index` position 
+     * Edit the structure field entry at `index` position
      * with field `field` focused.
      * @public
      * @param {number} index
@@ -528,9 +483,6 @@ export default {
     paginateItems(pagination) {
       this.page = pagination.page;
     },
-    previewExists(type) {
-      return this.$helper.isComponent(`k-${type}-field-preview`);
-    },
     remove() {
       if (this.trash === null) {
         return false;
@@ -599,21 +551,6 @@ export default {
           }
         });
     },
-    width(fraction) {
-      if (!fraction) {
-        return "auto";
-      }
-      const parts = fraction.toString().split("/");
-
-      if (parts.length !== 2) {
-        return "auto";
-      }
-
-      const a = Number(parts[0]);
-      const b = Number(parts[1]);
-
-      return parseFloat(100 / b * a, 2).toFixed(2) + "%";
-    },
     update(index, column, value) {
       this.items[index][column] = value;
       this.onInput();

panel/src/mixins/forms/structure.js

@@ -0,0 +1,71 @@
+
+import { props as Field } from "@/components/Forms/Field.vue";
+
+export default {
+  mixins: [Field],
+  methods: {
+    displayText(field, value) {
+      switch (field.type) {
+        case "user": {
+          return value.email;
+        }
+        case "date": {
+          const date = this.$library.dayjs(value);
+          const format = field.time === true ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD";
+          return date.isValid() ? date.format(format) : "";
+        }
+        case "tags":
+        case "multiselect":
+          return value
+            .map(item => {
+              return item.text;
+            })
+            .join(", ");
+        case "checkboxes": {
+          return value
+            .map(item => {
+              let text = item;
+
+              field.options.forEach(option => {
+                if (option.value === item) {
+                  text = option.text;
+                }
+              });
+
+              return text;
+            })
+            .join(", ");
+        }
+        case "radio":
+        case "select": {
+          const option = field.options.filter(item => item.value === value)[0];
+          return option ? option.text : null;
+        }
+      }
+
+      if (typeof value === "object" && value !== null) {
+        return "…";
+      }
+
+      return value.toString();
+    },
+    previewExists(type) {
+      return this.$helper.isComponent(`k-${type}-field-preview`);
+    },
+    width(fraction) {
+      if (!fraction) {
+        return "auto";
+      }
+      const parts = fraction.toString().split("/");
+
+      if (parts.length !== 2) {
+        return "auto";
+      }
+
+      const a = Number(parts[0]);
+      const b = Number(parts[1]);
+
+      return parseFloat(String(100 / b * a)).toFixed(2) + "%";
+    }
+  }
+}