Pagination

resources/js/Components/Pagination.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { Link }  from '@inertiajs/inertia-vue3';
+
+defineProps({
+    links: {
+        type: Object,
+        default: () => ({}),
+    },
+    data: {
+        type: Object,
+        default: () => ({}),
+    }
+});
+</script>
+
+<template>
+    <div v-if="links.length > 3">
+        <div class="flex flex-wrap -mb-1">
+            <template v-for="(link, p) in links" :key="p">
+                <div v-if="link.url === null" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
+                    v-html="link.label" />
+                <Link v-else
+                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500"
+                    :class="{ 'bg-blue-700 text-white': link.active }" method="post" :data="data" :href="link.url" v-html="link.label" />
+            </template>
+        </div>
+    </div>
+</template>

resources/js/Components/RpoRecord.vue

@@ -79,7 +79,7 @@ export default {
     }
   },
   mounted() {
-    
+
     console.log('JSON=',this.rpo);
 
   }

resources/js/Components/RpoRecord2.vue

@@ -0,0 +1,122 @@
+<script setup>
+import rpoJsonData from '../Data/RpoTree.json';
+import { ref, onMounted } from 'vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  data: { 
+    type: Object,
+    required: true
+  },
+  rpo: {
+    type: Object,
+    required: false,
+    default: rpoJsonData
+  }
+});
+   
+const arrData = computed(() => Object.keys(props.data));
+
+function keyTitle(key) {
+    return key.split("_").join(" ");
+}
+
+function checkValueType(val) {
+        if (typeof val !== "object") {
+          return typeof val;
+        }
+        return Array.isArray(val) ? "array" : "object";
+}
+
+function printRpoName(rpoKey) {
+
+    console.log('data',typeof props.rpo[rpoKey]);
+    console.log('rpoKey',rpoKey);
+    if (typeof props.rpo[rpoKey] !== 'undefined'){
+        if (typeof props.rpo[rpoKey]["desc"] !== 'undefined') {
+            console.log(props.rpo[rpoKey]);
+            return props.rpo[rpoKey].desc;
+        }
+        if (typeof props.rpo[rpoKey]["value"] !== 'undefined') {
+            console.log(props.rpo[rpoKey]);
+            return props.rpo[rpoKey].value.desc;
+        }    
+   
+        console.log(props.rpo[rpoKey]);
+        return props.rpo[rpoKey]["desc"];
+    }
+    
+    return rpoKey;
+}
+
+function subRpo(val,kz,i) {
+        console.log('val=',val,'k=',kz,'i=',i);
+        console.log(props.rpo);
+        return props.rpo[kz];
+}
+</script>
+
+<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>
+              <RpoRecord2 :data="arrRow" :rpo="subRpo(arrRow, row,index2)"/>
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <RpoRecord2 :data="data[row]" :rpo="subRpo(data[row],row,index)" />
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  
+  <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>
+