Use Vuetify dialog for seeing log content
This commit is contained in:
parent
c2f53a4703
commit
a51fc71990
@ -9,9 +9,46 @@
|
||||
:pagination="true"
|
||||
:paginationAutoPageSize=true
|
||||
:row-data="null"
|
||||
row-selection="single"
|
||||
:onSelectionChanged="openExamineLog"
|
||||
:supress-horisontal-scroll="true"
|
||||
:enable-scrolling="true"
|
||||
></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>
|
||||
</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-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 {
|
||||
examineLog: null,
|
||||
examineLogContent: null,
|
||||
copied: false,
|
||||
gridApi: null,
|
||||
gridColumnApi: null,
|
||||
rowData: [],
|
||||
@ -115,7 +165,35 @@ export default {
|
||||
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>
|
||||
|
Loading…
Reference in New Issue
Block a user