Use Vuetify dialog for seeing log content

This commit is contained in:
Erki Aas 2022-10-11 19:16:27 +03:00
parent c2f53a4703
commit a51fc71990

View File

@ -9,9 +9,46 @@
:pagination="true" :pagination="true"
:paginationAutoPageSize=true :paginationAutoPageSize=true
:row-data="null" :row-data="null"
row-selection="single"
:onSelectionChanged="openExamineLog"
:supress-horisontal-scroll="true" :supress-horisontal-scroll="true"
:enable-scrolling="true" :enable-scrolling="true"
></ag-grid-vue> ></ag-grid-vue>
<v-dialog
v-model="examineLog"
activator="parent"
>
<v-card>
<v-card-text>
<v-table>
<thead>
<tr>
<th class="text-left">
Key
</th>
<th class="text-left">
Value
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in examineLogContent"
:key="item.name"
>
<td>{{ item.key }}</td>
<td>
<span> {{ item.value }} </span>
</td>
</tr>
</tbody>
</v-table>
</v-card-text>
<v-card-actions>
<v-btn color="primary" block @click="examineLog = null">Close Dialog</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div> </div>
</template> </template>
@ -20,14 +57,27 @@ import { AgGridVue } from "ag-grid-vue3";
import "ag-grid-community/styles//ag-grid.css"; import "ag-grid-community/styles//ag-grid.css";
import "ag-grid-community/styles//ag-theme-material.css"; import "ag-grid-community/styles//ag-theme-material.css";
import ScreenshotCell from "./ScreenshotCell.js"; import ScreenshotCell from "./ScreenshotCell.js";
import { VCard, VCardText, VCardActions } from 'vuetify/components/VCard'
import { VDialog } from 'vuetify/components/VDialog'
import { VBtn } from 'vuetify/components/VBtn'
import { VTable } from 'vuetify/components/VTable'
export default { export default {
components: { components: {
AgGridVue, AgGridVue,
VCard,
VCardText,
VCardActions,
VBtn,
VDialog,
VTable,
ScreenshotCell: ScreenshotCell ScreenshotCell: ScreenshotCell
}, },
data() { data() {
return { return {
examineLog: null,
examineLogContent: null,
copied: false,
gridApi: null, gridApi: null,
gridColumnApi: null, gridColumnApi: null,
rowData: [], rowData: [],
@ -115,7 +165,35 @@ export default {
console.error(e, eventData) console.error(e, eventData)
} }
}, },
} openExamineLog () {
const selectedRow = this.gridApi.getSelectedRows()[0];
this.examineLog = true
const flattened = flattenObj(selectedRow)
const pairs = [];
Object.keys(flattened).map((key) => {
pairs.push({
key: key,
value: flattened[key]
})
})
this.examineLogContent = pairs
}
},
} }
const flattenObj = (ob) => {
let result = {};
for (const i in ob) {
if ((typeof ob[i]) === 'object' && !Array.isArray(ob[i])) {
const temp = flattenObj(ob[i]);
for (const j in temp) {
result[i + '.' + j] = temp[j];
}
}
else {
result[i] = ob[i];
}
}
return result;
};
</script> </script>