k-space/log-viewer
10
0
Fork 0
Code Issues 6 Pull Requests Projects Activity

Moved ExamineLog content into separate component, made ExamineLog use ag-grid

Browse Source
This commit is contained in:
Erki Aas 2022-10-11 21:33:22 +03:00
parent f31951c478
commit 97ad29ade0
2 changed files with 89 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
frontend/src/components/ExamineLogModal.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<v-dialog
v-model="examineLog"
width="50wv"
>
<v-card>
<v-card-text style="height: 70vh">
<ag-grid-vue
style="width: 100%; height: 100%;"
class="ag-theme-material"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:row-data="examineLogContent"
:supress-horisontal-scroll="true"
:enable-scrolling="true"
:enableCellTextSelection="true"
:ensureDomOrder="true"
></ag-grid-vue>
</v-card-text>
<v-card-actions>
<v-btn color="primary" block @click="closeModal">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import { AgGridVue } from "ag-grid-vue3";
import "ag-grid-community/styles//ag-grid.css";
import "ag-grid-community/styles//ag-theme-material.css";
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 {
components: {
AgGridVue,
VCard,
VCardText,
VCardActions,
VBtn,
VDialog,
VTable,
ScreenshotCell: ScreenshotCell
},
data() {
return {
columnDefs: [
{
field: 'key',
sortable: true,
filter: 'agTextColumnFilter',
resizable: true
},
{
field: 'value',
sortable: true,
filter: 'agTextColumnFilter',
resizable: true
},
]
}
},
props: {
examineLogContent: Array,
closeModal: Function
},
computed: {
examineLog() {
return !!this.examineLogContent
}
},
methods: {
onGridReady(params) {
params.api.sizeColumnsToFit()
},
}
}
</script>

52
frontend/src/components/LogViewer.vue
View File

@ -14,40 +14,7 @@
:supress-horisontal-scroll="true"
:enable-scrolling="true"
></ag-grid-vue>
<v-dialog
v-model="examineLog"
>
<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>
<ExamineLogModal :examine-log-content="examineLogContent" :close-modal="closeExamineLog" />
</div>
</template>
@ -56,27 +23,17 @@ import { AgGridVue } from "ag-grid-vue3";
import "ag-grid-community/styles//ag-grid.css";
import "ag-grid-community/styles//ag-theme-material.css";
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'
import ExamineLogModal from "./ExamineLogModal.vue";
export default {
components: {
ExamineLogModal,
AgGridVue,
VCard,
VCardText,
VCardActions,
VBtn,
VDialog,
VTable,
ScreenshotCell: ScreenshotCell
},
data() {
return {
examineLog: null,
examineLogContent: null,
copied: false,
gridApi: null,
gridColumnApi: null,
rowData: [],
@ -169,6 +126,9 @@ export default {
})
})
this.examineLogContent = pairs
},
closeExamineLog () {
this.examineLogContent = null
}
},
}