mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-25 17:53:48 +02:00
replace el-dialog
This commit is contained in:
pa
Natsumi
@@ -1,125 +1,126 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:z-index="worldImportDialogIndex"
|
||||
v-model="isVisible"
|
||||
:title="t('dialog.world_import.header')"
|
||||
width="650px"
|
||||
class="x-dialog">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div style="font-size: 12px">{{ t('dialog.world_import.description') }}</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<div v-if="worldImportDialog.progress">
|
||||
{{ t('dialog.world_import.process_progress') }}
|
||||
{{ worldImportDialog.progress }} / {{ worldImportDialog.progressTotal }}
|
||||
<Loader2 style="margin: 0 5px" />
|
||||
<Dialog v-model:open="isVisible">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.world_import.header') }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div style="font-size: 12px">{{ t('dialog.world_import.description') }}</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<div v-if="worldImportDialog.progress">
|
||||
{{ t('dialog.world_import.process_progress') }}
|
||||
{{ worldImportDialog.progress }} / {{ worldImportDialog.progressTotal }}
|
||||
<Loader2 style="margin: 0 5px" />
|
||||
</div>
|
||||
<Button v-if="worldImportDialog.loading" size="sm" variant="outline" @click="cancelWorldImport">
|
||||
{{ t('dialog.world_import.cancel') }}
|
||||
</Button>
|
||||
<Button size="sm" v-else :disabled="!worldImportDialog.input" @click="processWorldImportList">
|
||||
{{ t('dialog.world_import.process_list') }}
|
||||
</Button>
|
||||
</div>
|
||||
<Button v-if="worldImportDialog.loading" size="sm" variant="outline" @click="cancelWorldImport">
|
||||
{{ t('dialog.world_import.cancel') }}
|
||||
</Button>
|
||||
<Button size="sm" v-else :disabled="!worldImportDialog.input" @click="processWorldImportList">
|
||||
{{ t('dialog.world_import.process_list') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<InputGroupTextareaField
|
||||
v-model="worldImportDialog.input"
|
||||
:rows="10"
|
||||
style="margin-top: 10px"
|
||||
input-class="resize-none" />
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Select
|
||||
:model-value="worldImportFavoriteGroupSelection"
|
||||
@update:modelValue="handleWorldImportGroupSelect">
|
||||
<SelectTrigger size="sm">
|
||||
<SelectValue :placeholder="t('dialog.world_import.select_vrchat_group_placeholder')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="groupAPI in favoriteWorldGroups"
|
||||
:key="groupAPI.name"
|
||||
:value="groupAPI.name"
|
||||
:disabled="groupAPI.count >= groupAPI.capacity">
|
||||
{{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputGroupTextareaField
|
||||
v-model="worldImportDialog.input"
|
||||
:rows="10"
|
||||
style="margin-top: 10px"
|
||||
input-class="resize-none" />
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Select
|
||||
:model-value="worldImportFavoriteGroupSelection"
|
||||
@update:modelValue="handleWorldImportGroupSelect">
|
||||
<SelectTrigger size="sm">
|
||||
<SelectValue :placeholder="t('dialog.world_import.select_vrchat_group_placeholder')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="groupAPI in favoriteWorldGroups"
|
||||
:key="groupAPI.name"
|
||||
:value="groupAPI.name"
|
||||
:disabled="groupAPI.count >= groupAPI.capacity">
|
||||
{{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
:model-value="worldImportLocalFavoriteGroupSelection"
|
||||
@update:modelValue="handleWorldImportLocalGroupSelect"
|
||||
style="margin-left: 10px">
|
||||
<SelectTrigger size="sm">
|
||||
<SelectValue :placeholder="t('dialog.world_import.select_local_group_placeholder')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem v-for="group in localWorldFavoriteGroups" :key="group" :value="group">
|
||||
{{ group }} ({{ localWorldFavGroupLength(group) }})
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select
|
||||
:model-value="worldImportLocalFavoriteGroupSelection"
|
||||
@update:modelValue="handleWorldImportLocalGroupSelect"
|
||||
style="margin-left: 10px">
|
||||
<SelectTrigger size="sm">
|
||||
<SelectValue :placeholder="t('dialog.world_import.select_local_group_placeholder')" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem v-for="group in localWorldFavoriteGroups" :key="group" :value="group">
|
||||
{{ group }} ({{ localWorldFavGroupLength(group) }})
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<span v-if="worldImportDialog.worldImportFavoriteGroup" style="margin-left: 5px">
|
||||
{{ worldImportTable.data.length }} /
|
||||
{{
|
||||
worldImportDialog.worldImportFavoriteGroup.capacity -
|
||||
worldImportDialog.worldImportFavoriteGroup.count
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
class="mr-2"
|
||||
:disabled="worldImportTable.data.length === 0"
|
||||
@click="clearWorldImportTable">
|
||||
{{ t('dialog.world_import.clear_table') }}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
:disabled="
|
||||
worldImportTable.data.length === 0 ||
|
||||
(!worldImportDialog.worldImportFavoriteGroup &&
|
||||
!worldImportDialog.worldImportLocalFavoriteGroup)
|
||||
"
|
||||
@click="importWorldImportTable">
|
||||
{{ t('dialog.world_import.import') }}
|
||||
</Button>
|
||||
</div>
|
||||
<span v-if="worldImportDialog.worldImportFavoriteGroup" style="margin-left: 5px">
|
||||
{{ worldImportTable.data.length }} /
|
||||
{{
|
||||
worldImportDialog.worldImportFavoriteGroup.capacity -
|
||||
worldImportDialog.worldImportFavoriteGroup.count
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
class="mr-2"
|
||||
:disabled="worldImportTable.data.length === 0"
|
||||
@click="clearWorldImportTable">
|
||||
{{ t('dialog.world_import.clear_table') }}
|
||||
<span v-if="worldImportDialog.importProgress" style="margin: 10px">
|
||||
<Loader2 style="margin-right: 5px" />
|
||||
{{ t('dialog.world_import.import_progress') }}
|
||||
{{ worldImportDialog.importProgress }}/{{ worldImportDialog.importProgressTotal }}
|
||||
</span>
|
||||
<br />
|
||||
<template v-if="worldImportDialog.errors">
|
||||
<Button size="sm" variant="secondary" @click="worldImportDialog.errors = ''">
|
||||
{{ t('dialog.world_import.clear_errors') }}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
:disabled="
|
||||
worldImportTable.data.length === 0 ||
|
||||
(!worldImportDialog.worldImportFavoriteGroup &&
|
||||
!worldImportDialog.worldImportLocalFavoriteGroup)
|
||||
"
|
||||
@click="importWorldImportTable">
|
||||
{{ t('dialog.world_import.import') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="worldImportDialog.importProgress" style="margin: 10px">
|
||||
<Loader2 style="margin-right: 5px" />
|
||||
{{ t('dialog.world_import.import_progress') }}
|
||||
{{ worldImportDialog.importProgress }}/{{ worldImportDialog.importProgressTotal }}
|
||||
</span>
|
||||
<br />
|
||||
<template v-if="worldImportDialog.errors">
|
||||
<Button size="sm" variant="secondary" @click="worldImportDialog.errors = ''">
|
||||
{{ t('dialog.world_import.clear_errors') }}
|
||||
</Button>
|
||||
<h2 style="font-weight: bold; margin: 5px 0">
|
||||
{{ t('dialog.world_import.errors') }}
|
||||
</h2>
|
||||
<pre style="white-space: pre-wrap; font-size: 12px" v-text="worldImportDialog.errors"></pre>
|
||||
</template>
|
||||
<DataTableLayout
|
||||
class="min-w-0 w-full"
|
||||
:table="table"
|
||||
:loading="worldImportDialog.loading"
|
||||
:table-style="tableStyle"
|
||||
:show-pagination="false"
|
||||
style="margin-top: 10px" />
|
||||
</el-dialog>
|
||||
<h2 style="font-weight: bold; margin: 5px 0">
|
||||
{{ t('dialog.world_import.errors') }}
|
||||
</h2>
|
||||
<pre style="white-space: pre-wrap; font-size: 12px" v-text="worldImportDialog.errors"></pre>
|
||||
</template>
|
||||
<DataTableLayout
|
||||
class="min-w-0 w-full"
|
||||
:table="table"
|
||||
:loading="worldImportDialog.loading"
|
||||
:table-style="tableStyle"
|
||||
:show-pagination="false"
|
||||
style="margin-top: 10px" />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableLayout } from '@/components/ui/data-table';
|
||||
@@ -132,7 +133,6 @@
|
||||
import { useFavoriteStore, useGalleryStore, useUserStore, useWorldStore } from '../../../stores';
|
||||
import { favoriteRequest, worldRequest } from '../../../api';
|
||||
import { createColumns } from './worldImportColumns.jsx';
|
||||
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
|
||||
import { removeFromArray } from '../../../shared/utils';
|
||||
import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
|
||||
|
||||
@@ -147,8 +147,6 @@
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const worldImportDialogIndex = ref(2000);
|
||||
|
||||
const worldImportDialog = ref({
|
||||
loading: false,
|
||||
progress: 0,
|
||||
@@ -211,7 +209,6 @@
|
||||
() => worldImportDialogVisible.value,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
worldImportDialogIndex.value = getNextDialogIndex();
|
||||
clearWorldImportTable();
|
||||
resetWorldImport();
|
||||
if (worldImportDialogInput.value) {
|
||||
|
||||
Reference in New Issue
Block a user