rpotisk/resources/js/Components/RpoRecord2.vue

<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 createRPOflatList(resultTree, flatList, RpoTree, lastKey = undefined, level = 0, fullPathRpo = []) {
    console.log('RESTREE=',resultTree);
    let fullPath = [ ...fullPathRpo ] ;      
    if (lastKey != undefined) fullPath.push(lastKey);
    
    if (level == 0 || checkValueType(resultTree) == "object") {
      let i=0;
      Object.keys(resultTree).forEach(k => {
        if (typeof resultTree[k] != 'string') {
          if (RpoTree[k] !== undefined) {
            flatList.push({"level": level, "key": k, "val": undefined, "translated": RpoTree[k].desc ,"full": fullPath.join(' => '), "index": i++ });
            createRPOflatList(resultTree[k],flatList, RpoTree[k], k, level + 1, fullPath );
          }
        } else {
          console.log('RT=',RpoTree);
          console.log('K=', k);
          if (RpoTree[k] !== undefined)
            flatList.push({"level": level, "key": k, "val": resultTree[k], "translated": RpoTree[k].desc ,"full": fullPath.join(' => '), "index": i++ });
        }
      });
  } else if (checkValueType(resultTree) == "array") {
    let i=0;
    for (const e of resultTree) {
      console.log('e=',e);
      if (checkValueType(e) == "object" || checkValueType(e) == "array") {
            createRPOflatList(e, flatList, RpoTree, lastKey, level + 1, fullPath );
        } else {
          console.log('RT=',RpoTree);
            flatList.push({"level": level, "key": lastKey, "val": e, "translated": RpoTree.desc !== undefined ? RpoTree.desc : '' ,"full": fullPath.join(' => '), "index": i++ });
        }
    }   
  }
}

function subRpo(val,kz,i) {
        console.log('val=',val,'k=',kz,'i=',i);
        console.log(props.rpo);
        return props.rpo[kz];
}

var flatListRpo = [];
createRPOflatList(props.data, flatListRpo, props.rpo);
console.log('FLAT=',flatListRpo);
</script>

<template>
        <div class="flex flex-col">
            <div class="overflow-x-auto">
                
                <div class="p-1.5 w-full inline-block align-middle">
                    <div class="overflow-hidden border rounded-lg">
                        <table class="min-w-full divide-y divide-gray-200 border-4 border-black border-solid">
                            <thead class="bg-red-300">
                                <tr>
                                    <th
                                        scope="col"
                                        class="min-w-min px-2 py-2 text-xs font-bold text-left border-4 border-black border-solid uppercase"
                                    >
                                        Nazov
                                    </th>
                                    <th
                                        scope="col"
                                        class="px-2 py-2 text-xs font-bold text-left border-4 border-black border-solid uppercase"
                                    >
                                        Hodnota
                                    </th>
                                    
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr v-for="(row,index) in flatListRpo" :key="index"
                                  :class="index % 2 === 0 ? 'bg-zinc-100' : 'bg-zinc-200'">
                                    <td
                                        class="py-2 text-sm text-gray-800 font-bold whitespace-nowrap border-r-4 border-black border-solid border-b"
                                        :style="`padding-left: ${10+row.level*15}px`"
                                    >
                                    {{ row.translated }}
                                    </td>
                                    <td
                                        class="px-2 py-2 text-sm text-gray-800 whitespace-nowrap border-black border-solid border-b"
                                    >
                                        {{ row.val }}
                                    </td>
 
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
</template>
  
  
  <style scoped>
  .level-1 {
    width: 200px;
  }
  .table-main {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .m-2 {
    margin: 0rem!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;
    box-shadow: 
    2px 0 0 0 #888, 
    0 2px 0 0 #888, 
    2px 2px 0 0 #888,   /* Just to fix the corner */
    2px 0 0 0 #888 inset, 
    0 2px 0 0 #888 inset;
  }
  .table-main  .row-data {
    box-shadow: 
    2px 0 0 0 #000, 
    0 2px 0 0 #000, 
    2px 2px 0 0 #000,   /* Just to fix the corner */
    2px 0 0 0 #000 inset, 
    0 2px 0 0 #000 inset;
    }
  </style>