Use Vuetify dialog for seeing log content
This commit is contained in:
parent
c2f53a4703
commit
a51fc71990
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user