First commit
This commit is contained in:
204
resources/js/components/RpoRecord2.vue
Normal file
204
resources/js/components/RpoRecord2.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<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 },
|
||||
]
|
||||
|
||||
|
||||
const arrData = computed(() => Object.keys(props.data));
|
||||
|
||||
const title = ref(props.data["fullNames"][0]["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);
|
||||
|
||||
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>
|
||||
<!-- 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-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>
|
||||
Reference in New Issue
Block a user