Dc3e4 new matrix field (#484)

* fix password reset bug

* wip: matrix input

* wip: matrix input

* wip: matrix input

* Fixed matric input component logic

* matrix input cleanup

* fix lint errors

* table border and radius

* cleanup, linting

* fix component methos

* wip matrix input

* matrix condition for contains and not contain

* patch matrix input condition logic

* linting

* refactor and cleanup

* fix syntax error

* Polished the matrix input

* Fix linting

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/tables/OpenTable.vue

@@ -140,6 +140,7 @@
 import OpenText from "./components/OpenText.vue"
 import OpenUrl from "./components/OpenUrl.vue"
 import OpenSelect from "./components/OpenSelect.vue"
+import OpenMatrix from "./components/OpenMatrix.vue"
 import OpenDate from "./components/OpenDate.vue"
 import OpenFile from "./components/OpenFile.vue"
 import OpenCheckbox from "./components/OpenCheckbox.vue"
@@ -197,6 +198,7 @@ export default {
         scale: shallowRef(OpenText),
         slider: shallowRef(OpenText),
         select: shallowRef(OpenSelect),
+        matrix: shallowRef(OpenMatrix),
         multi_select: shallowRef(OpenSelect),
         date: shallowRef(OpenDate),
         files: shallowRef(OpenFile),

client/components/open/tables/components/OpenMatrix.vue

@@ -0,0 +1,50 @@
+<template>
+  <span
+    v-if="value"
+    class="-mb-2"
+  >
+    <template v-if="matrixData">
+      <div
+        v-for="(data) in matrixData"
+        :key="data.label+data.value"
+        class="mr-2 mb-1 text-gray-700 bg-gray-100 dark:text-gray-300 rounded-md flex px-2 text-sm w-max"
+      >
+        <span class="py-0.5 pr-1 border-r border-gray-300">{{ data.label }}</span>
+        <span class="py-0.5 pl-1">{{ data.value }}</span>
+      </div>
+
+    </template>
+    <open-tag
+      v-else
+      :opt="value"
+    />
+  </span>
+</template>
+
+<script>
+import OpenTag from "./OpenTag.vue"
+
+export default {
+  components: { OpenTag },
+  props: {
+    value: {
+      type: Object,
+    },
+  },
+
+  data() {
+    return {}
+  },
+
+  computed: {
+    matrixData() {
+      if (typeof this.value === "object" && this.value !== null) {
+        return Object.entries(this.value).map(([label, value]) => {
+            return { label, value }
+        })
+      }
+      return null
+    },
+  },
+}
+</script>