use json view instead of grid view
This commit is contained in:
parent
e8f788de06
commit
f91b26abba
@ -10,6 +10,10 @@ import { useRoute } from 'vue-router';
|
|||||||
import type { ContractInfo, PaginabledContractStates, PaginabledContracts } from '../types';
|
import type { ContractInfo, PaginabledContractStates, PaginabledContracts } from '../types';
|
||||||
import { post } from '@/libs';
|
import { post } from '@/libs';
|
||||||
|
|
||||||
|
import { JsonViewer } from "vue3-json-viewer"
|
||||||
|
// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
|
||||||
|
import "vue3-json-viewer/dist/index.css";
|
||||||
|
|
||||||
const chainStore = useBlockchain();
|
const chainStore = useBlockchain();
|
||||||
const baseStore = useBaseStore();
|
const baseStore = useBaseStore();
|
||||||
const format = useFormatter();
|
const format = useFormatter();
|
||||||
@ -86,19 +90,19 @@ function queryContract() {
|
|||||||
wasmStore.wasmClient
|
wasmStore.wasmClient
|
||||||
.getWasmContractRawQuery(contractAddress, query.value)
|
.getWasmContractRawQuery(contractAddress, query.value)
|
||||||
.then((x) => {
|
.then((x) => {
|
||||||
result.value = JSON.stringify(x);
|
result.value = x;
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
result.value = JSON.stringify(err);
|
result.value = err;
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
wasmStore.wasmClient
|
wasmStore.wasmClient
|
||||||
.getWasmContractSmartQuery(contractAddress, query.value)
|
.getWasmContractSmartQuery(contractAddress, query.value)
|
||||||
.then((x) => {
|
.then((x) => {
|
||||||
result.value = JSON.stringify(x);
|
result.value = x;
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
result.value = JSON.stringify(err);
|
result.value = err;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@ -122,7 +126,7 @@ const radioContent = [
|
|||||||
|
|
||||||
const selectedRadio = ref('raw');
|
const selectedRadio = ref('raw');
|
||||||
const query = ref('');
|
const query = ref('');
|
||||||
const result = ref('');
|
const result = ref({});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
@ -233,18 +237,9 @@ const result = ref('');
|
|||||||
<label for="modal-contract-states" class="btn btn-sm btn-circle">✕</label>
|
<label for="modal-contract-states" class="btn btn-sm btn-circle">✕</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="overflow-auto">
|
<div class="overflow-auto">
|
||||||
<table class="table table-compact w-full text-sm">
|
<JsonViewer :value="state.models?.map(v => ({key: format.hexToString(v.key), value: JSON.parse(format.base64ToString(v.value))}))" :theme="baseStore.theme" style="background: transparent;" copyable boxed sort :expand-depth="5"/>
|
||||||
<tr v-for="(v, index) in state.models" :key="index" class="hover">
|
|
||||||
<td class="" :data-tip="format.hexToString(v.key)">
|
|
||||||
<span class="font-bold">{{ format.hexToString(v.key) }}</span>
|
|
||||||
</td>
|
|
||||||
<td class="text-left w-3/4" :title="format.base64ToString(v.value)">
|
|
||||||
{{ format.base64ToString(v.value) }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total"
|
<PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total"
|
||||||
:callback="pageload" />
|
:callback="pageloadState" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
@ -279,8 +274,9 @@ const result = ref('');
|
|||||||
</div>
|
</div>
|
||||||
<textarea v-model="query" placeholder="Query String, {}" label="Query String"
|
<textarea v-model="query" placeholder="Query String, {}" label="Query String"
|
||||||
class="my-2 textarea textarea-bordered w-full" />
|
class="my-2 textarea textarea-bordered w-full" />
|
||||||
<textarea v-model="result" readonly placeholder="Query Result" label="Result"
|
|
||||||
class="textarea textarea-bordered w-full" />
|
<JsonViewer :value="result" :theme="baseStore.theme" style="background: transparent;" copyable boxed sort :expand-depth="5"/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 mb-4 text-center">
|
<div class="mt-4 mb-4 text-center">
|
||||||
<button class="btn btn-primary px-4 text-white" @click="queryContract()">
|
<button class="btn btn-primary px-4 text-white" @click="queryContract()">
|
||||||
|
Loading…
Reference in New Issue
Block a user