mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 14:23:51 +02:00
split json tab
This commit is contained in:
@@ -507,33 +507,13 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #JSON>
|
||||
<Button
|
||||
class="rounded-full mr-2"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="refreshAvatarDialogTreeData()">
|
||||
<RefreshCw />
|
||||
</Button>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="downloadAndSaveJson(avatarDialog.id, avatarDialog.ref)">
|
||||
<Download />
|
||||
</Button>
|
||||
<vue-json-pretty
|
||||
:key="treeData?.id"
|
||||
:data="treeData"
|
||||
:deep="2"
|
||||
:theme="isDarkMode ? 'dark' : 'light'"
|
||||
show-icon />
|
||||
<br />
|
||||
<vue-json-pretty
|
||||
v-if="Object.keys(avatarDialog.fileAnalysis).length"
|
||||
:data="avatarDialog.fileAnalysis"
|
||||
:deep="2"
|
||||
:theme="isDarkMode ? 'dark' : 'light'"
|
||||
show-icon />
|
||||
<DialogJsonTab
|
||||
:tree-data="treeData"
|
||||
:tree-data-key="treeData?.id"
|
||||
:dialog-id="avatarDialog.id"
|
||||
:dialog-ref="avatarDialog.ref"
|
||||
:file-analysis="avatarDialog.fileAnalysis"
|
||||
@refresh="refreshAvatarDialogTreeData()" />
|
||||
</template>
|
||||
</TabsUnderline>
|
||||
<template v-if="avatarDialog.visible">
|
||||
@@ -630,6 +610,7 @@
|
||||
import { database } from '../../../service/database';
|
||||
import { formatJsonVars } from '../../../shared/utils/base/ui';
|
||||
|
||||
import DialogJsonTab from '../DialogJsonTab.vue';
|
||||
import ImageCropDialog from '../ImageCropDialog.vue';
|
||||
|
||||
const SetAvatarStylesDialog = defineAsyncComponent(() => import('./SetAvatarStylesDialog.vue'));
|
||||
|
||||
50
src/components/dialogs/DialogJsonTab.vue
Normal file
50
src/components/dialogs/DialogJsonTab.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<script setup>
|
||||
import { Download, RefreshCw } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import VueJsonPretty from 'vue-json-pretty';
|
||||
|
||||
import { downloadAndSaveJson } from '../../shared/utils';
|
||||
import { useAppearanceSettingsStore } from '../../stores';
|
||||
|
||||
defineProps({
|
||||
treeData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
treeDataKey: {
|
||||
type: [String, Number, null],
|
||||
default: null
|
||||
},
|
||||
dialogId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
dialogRef: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
fileAnalysis: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
const { isDarkMode } = storeToRefs(useAppearanceSettingsStore());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="emit('refresh')">
|
||||
<RefreshCw />
|
||||
</Button>
|
||||
<Button class="rounded-full" size="icon-sm" variant="ghost" @click="downloadAndSaveJson(dialogId, dialogRef)">
|
||||
<Download />
|
||||
</Button>
|
||||
<vue-json-pretty :key="treeDataKey" :data="treeData" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
|
||||
<template v-if="fileAnalysis && Object.keys(fileAnalysis).length">
|
||||
<br />
|
||||
<vue-json-pretty :data="fileAnalysis" :deep="2" :theme="isDarkMode ? 'dark' : 'light'" show-icon />
|
||||
</template>
|
||||
</template>
|
||||
@@ -1143,26 +1143,12 @@
|
||||
</TabsUnderline>
|
||||
</template>
|
||||
<template #JSON>
|
||||
<Button
|
||||
class="rounded-full mr-2"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="refreshGroupDialogTreeData()">
|
||||
<RefreshCw />
|
||||
</Button>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="downloadAndSaveJson(groupDialog.id, groupDialog.ref)">
|
||||
<Download />
|
||||
</Button>
|
||||
<vue-json-pretty
|
||||
:key="treeData?.group?.id"
|
||||
:data="treeData"
|
||||
:deep="2"
|
||||
:theme="isDarkMode ? 'dark' : 'light'"
|
||||
show-icon />
|
||||
<DialogJsonTab
|
||||
:tree-data="treeData"
|
||||
:tree-data-key="treeData?.group?.id"
|
||||
:dialog-id="groupDialog.id"
|
||||
:dialog-ref="groupDialog.ref"
|
||||
@refresh="refreshGroupDialogTreeData()" />
|
||||
</template>
|
||||
</TabsUnderline>
|
||||
</div>
|
||||
@@ -1245,6 +1231,7 @@
|
||||
import { formatJsonVars } from '../../../shared/utils/base/ui';
|
||||
import { groupRequest } from '../../../api';
|
||||
|
||||
import DialogJsonTab from '../DialogJsonTab.vue';
|
||||
import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
|
||||
import GroupPostEditDialog from './GroupPostEditDialog.vue';
|
||||
import InstanceActionBar from '../../InstanceActionBar.vue';
|
||||
|
||||
@@ -1307,22 +1307,12 @@
|
||||
</template>
|
||||
|
||||
<template #JSON>
|
||||
<Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="refreshUserDialogTreeData()">
|
||||
<RefreshCw />
|
||||
</Button>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="downloadAndSaveJson(userDialog.id, userDialog.ref)">
|
||||
<Download />
|
||||
</Button>
|
||||
<vue-json-pretty
|
||||
:key="treeData?.id"
|
||||
:data="treeData"
|
||||
:deep="2"
|
||||
:theme="isDarkMode ? 'dark' : 'light'"
|
||||
show-icon />
|
||||
<DialogJsonTab
|
||||
:tree-data="treeData"
|
||||
:tree-data-key="treeData?.id"
|
||||
:dialog-id="userDialog.id"
|
||||
:dialog-ref="userDialog.ref"
|
||||
@refresh="refreshUserDialogTreeData()" />
|
||||
</template>
|
||||
</TabsUnderline>
|
||||
<SendInviteDialog
|
||||
@@ -1441,6 +1431,7 @@
|
||||
import { formatJsonVars } from '../../../shared/utils/base/ui';
|
||||
import { processBulk } from '../../../service/request';
|
||||
|
||||
import DialogJsonTab from '../DialogJsonTab.vue';
|
||||
import InstanceActionBar from '../../InstanceActionBar.vue';
|
||||
import SendInviteDialog from '../InviteDialog/SendInviteDialog.vue';
|
||||
import UserSummaryHeader from './UserSummaryHeader.vue';
|
||||
|
||||
@@ -694,33 +694,13 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #JSON>
|
||||
<Button
|
||||
class="rounded-full mr-2"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="refreshWorldDialogTreeData()">
|
||||
<RefreshCw />
|
||||
</Button>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="downloadAndSaveJson(worldDialog.id, worldDialog.ref)">
|
||||
<Download />
|
||||
</Button>
|
||||
<vue-json-pretty
|
||||
:key="treeData?.id"
|
||||
:data="treeData"
|
||||
:deep="2"
|
||||
:theme="isDarkMode ? 'dark' : 'light'"
|
||||
show-icon />
|
||||
<br />
|
||||
<vue-json-pretty
|
||||
v-if="Object.keys(worldDialog.fileAnalysis).length"
|
||||
:data="worldDialog.fileAnalysis"
|
||||
:deep="2"
|
||||
:theme="isDarkMode ? 'dark' : 'light'"
|
||||
show-icon />
|
||||
<DialogJsonTab
|
||||
:tree-data="treeData"
|
||||
:tree-data-key="treeData?.id"
|
||||
:dialog-id="worldDialog.id"
|
||||
:dialog-ref="worldDialog.ref"
|
||||
:file-analysis="worldDialog.fileAnalysis"
|
||||
@refresh="refreshWorldDialogTreeData()" />
|
||||
</template>
|
||||
</TabsUnderline>
|
||||
</div>
|
||||
@@ -837,6 +817,7 @@
|
||||
import { database } from '../../../service/database';
|
||||
import { formatJsonVars } from '../../../shared/utils/base/ui';
|
||||
|
||||
import DialogJsonTab from '../DialogJsonTab.vue';
|
||||
import ImageCropDialog from '../ImageCropDialog.vue';
|
||||
import InstanceActionBar from '../../InstanceActionBar.vue';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user