First commit

resources/js/components/RpoRecord.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="table-main">
+    <div
+      v-for="(row, index) in arrData"
+      :key="index"
+      class="row-data m-2 d-flex"
+    >
+      <div class="key p-2 d-inline-block">
+        <div class="text-capitalize ">
+          {{ printRpoName(row) }} 
+        </div>
+      </div>
+      <div v-if="['string', 'number'].includes(checkValueType(data[row]))">
+        <div class="value p-2 d-inline-block">{{ data[row] }}</div>
+      </div>
+      <div v-else-if="checkValueType(data[row]) === 'array'">
+        <div v-for="(arrRow, index2) in data[row]" :key="index2" class="d-flex">
+          <div v-if="['string', 'number'].includes(checkValueType(arrRow))">
+            {{ arrRow }}
+          </div>
+          <div v-else>
+            <RpoRecord :data="arrRow" :rpo="subRpo(arrRow, row,index2)"/>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <RpoRecord :data="data[row]" :rpo="subRpo(data[row],row,index)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import rpoJsonData from '../Data/RpoTree.json';
+
+export default {
+  name: "RpoRecord",
+  props: {
+    data: {
+      type: Object
+    },
+    rpo: {
+      type: Object,
+    }
+  },
+  computed: {
+    arrData() {
+      return Object.keys(this.data);
+    }
+  },
+  methods: {
+    keyTitle(key) {
+      return key.split("_").join(" ");
+    },
+    checkValueType(val) {
+      if (typeof val !== "object") {
+        return typeof val;
+      }
+      return Array.isArray(val) ? "array" : "object";
+    },
+    printRpoName(key) {
+
+      console.log('data',typeof this.rpo[key]);
+      if (typeof this.rpo[key] !== 'undefined'){
+        console.log(this.rpo[key]);
+        return this.rpo[key]["desc"];
+      }
+      if (typeof this.rpo[key] !== 'undefined' && typeof this.rpo[key]["value"] !== 'undefined') {
+        console.log(this.rpo[key]);
+        return this.rpo[key].value.desc;
+      }
+
+      return key;
+    },
+    subRpo(val,kz,i) {
+      console.log('val=',val,'k=',kz,'i=',i);
+      console.log(this.rpo);
+      return this.rpo[kz];
+    }
+  },
+  mounted() {
+
+    console.log('JSON=',this.rpo);
+
+  }
+};
+</script>
+
+<style scoped>
+.table-main {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+.m-2 {
+  margin: .5rem!important;
+}
+.mx-2 {
+  margin-right: .5rem!important;
+}
+.p-2 {
+  padding: .5rem!important;
+}
+.d-flex {
+  display: flex!important;
+}
+.d-inline-block {
+  display: inline-block!important;
+}
+.text-capitalize {
+  text-transform: capitalize!important;
+}
+.key {
+  background: lightgray;
+}
+.table-main  .row-data {
+    border: 2px solid grey;
+    border-radius: 2px;
+  }
+</style>