rpotisk-quasar/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 columns = [
    {
        name: 'translated',
        required: true,
        label: 'Nazov',
        align: 'left',
        field: 'translated',
        sortable: false,
    },
    {
        name: 'val',
        align: 'left',
        label: 'Hodnota',
        field: 'val',
        sortable: false
    },
    {
        name: 'validFrom',
        aling: 'left',
        label: 'Platne od',
        field: 'vlaidFrom',
        sortable: true,
    },
    {
        name: 'validTo',
        aling: 'left',
        label: 'Platne do',
        field: 'vlaidTo',
        sortable: true,
    }
]


const arrData = computed(() => Object.keys(props.data));

const numTitles = props.data["fullNames"].length;
const title = ref(props.data["fullNames"][numTitles-1]["value"]);
console.log('TITLE', title);

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);
    var validFrom = undefined;
    var validTo = undefined;

    if (checkValueType(resultTree) == "object") {
            Object.keys(resultTree).forEach(k => {
                if (k == "validFrom") validFrom = resultTree[k];
                if (k == "validTo") validTo = resultTree[k];
            });
        }


    if (level == 0 || checkValueType(resultTree) == "object") {
        let i = 0;

        Object.keys(resultTree).forEach(k => {

            if (typeof resultTree[k] != 'string') {
                if (RpoTree[k] !== undefined) {
                    if (k != "validFrom" && k != "validTo") {
                        console.log("VF VT ",validFrom,validTo);
                        flatList.push({ "level": level, "key": k, "val": undefined, "translated": RpoTree[k].desc, "full": fullPath.join(' => '), "index": i++, "validFrom": validFrom , "validTo": validTo });
                        createRPOflatList(resultTree[k], flatList, RpoTree[k], k, level + 1, fullPath);
                    }
                }
            } else {
                console.log('RT=', RpoTree);
                console.log('K=', k);
                if (RpoTree[k] !== undefined) {
                    if (k != "validFrom" && k != "validTo")
                        flatList.push({ "level": level, "key": k, "val": resultTree[k], "translated": RpoTree[k].desc, "full": fullPath.join(' => '), "index": i++, "validFrom": validFrom , "validTo": validTo });
                }
            }
        });
    } 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++, "vaildFrom": validFrom , "validTo": validTo != undefined ? validTo : null });
            }
        }
    }
}

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>
    <!-- https://github.com/quasarframework/quasar/blob/dev/docs/src/examples/QTable/VirtscrollExpandedRow.vue -->
    <div class="col q-pa-md" style="overflow: auto;">
        <q-table style="height: 700px;" separator="cell" flat bordered dense :rows-per-page-options="[0]" :title="title"
            :rows="flatListRpo" :columns="columns" wrap-cells card-class="bg-deep-purple-7 text-white"
            table-header-class="bg-deep-purple-1 text-black" row-key="name">

            <template v-slot:body="props">
                <q-tr :props="props" :key="`e_${props.row.index}`" class="q-virtual-scroll--with-prev">
                    <q-td class="bg-grey-8">
                        <div :class="`text-left level-${props.row.level}`">{{ props.row.translated }}</div>
                    </q-td>
                    <q-td class="bg-grey-6">
                        <div class="text-left">{{ props.row.val }}</div>
                    </q-td>
                    <q-td class="bg-grey-5">
                        <div class="text-left">{{ props.row.validFrom }}</div>
                    </q-td>
                    <q-td class="bg-grey-5">
                        <div class="text-left">{{ props.row.validTo }}</div>
                    </q-td>
                </q-tr>
            </template>
        </q-table>
    </div>
</template>

<style scoped>
.table-main {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.level-1 {
    padding-left: 10px;
}

.level-2 {
    padding-left: 20px;
}

.level-3 {
    padding-left: 30px;
}

.level-4 {
    padding-left: 40px;
}

.level-5 {
    padding-left: 50px;
}


.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>