change previous instance dialog navigation to use main dialog container

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue

@@ -1,35 +1,33 @@
 <template>
-    <Dialog v-model:open="isVisible">
-        <DialogContent class="sm:max-w-250">
-            <DialogHeader>
-                <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
-            </DialogHeader>
+    <div>
+        <DialogHeader>
+            <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
+        </DialogHeader>
 
-            <DataTableLayout
-                class="min-w-0 w-full"
-                :table="table"
-                :loading="loading"
-                :table-style="tableStyle"
-                :page-sizes="pageSizes"
-                :total-items="totalItems"
-                :on-page-size-change="handlePageSizeChange">
-                <template #toolbar>
-                    <div style="display: flex; align-items: center; justify-content: space-between">
-                        <span style="font-size: 14px" v-text="previousInstancesGroupDialog.groupRef.name"></span>
-                        <InputGroupField
-                            class="w-1/3"
-                            v-model="search"
-                            :placeholder="t('dialog.previous_instances.search_placeholder')"
-                            clearable />
-                    </div>
-                </template>
-            </DataTableLayout>
-        </DialogContent>
-    </Dialog>
+        <DataTableLayout
+            class="min-w-0 w-full"
+            :table="table"
+            :loading="loading"
+            :table-style="tableStyle"
+            :page-sizes="pageSizes"
+            :total-items="totalItems"
+            :on-page-size-change="handlePageSizeChange">
+            <template #toolbar>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <span style="font-size: 14px" v-text="previousInstancesGroupDialog.groupRef.name"></span>
+                    <InputGroupField
+                        class="w-1/3"
+                        v-model="search"
+                        :placeholder="t('dialog.previous_instances.search_placeholder')"
+                        clearable />
+                </div>
+            </template>
+        </DataTableLayout>
+    </div>
 </template>
 
 <script setup>
-    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
@@ -48,7 +46,9 @@
     import { database } from '../../../service/database';
     import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
 
-    const { showPreviousInstancesInfoDialog } = useInstanceStore();
+    const instanceStore = useInstanceStore();
+    const { showPreviousInstancesInfoDialog } = instanceStore;
+    const { previousInstancesGroupDialog } = storeToRefs(instanceStore);
     const { shiftHeld } = useUiStore();
     const { stringComparer } = storeToRefs(useSearchStore());
     const { t } = useI18n();
@@ -64,21 +64,6 @@
     const pageSize = ref(10);
     const tableStyle = { maxHeight: '400px' };
 
-    const props = defineProps({
-        previousInstancesGroupDialog: { type: Object, required: true }
-    });
-    const emit = defineEmits(['update:previousInstancesGroupDialog']);
-
-    const isVisible = computed({
-        get: () => props.previousInstancesGroupDialog.visible,
-        set: (value) => {
-            emit('update:previousInstancesGroupDialog', {
-                ...props.previousInstancesGroupDialog,
-                visible: value
-            });
-        }
-    });
-
     const displayRows = computed(() => {
         const q = String(search.value ?? '')
             .trim()
@@ -137,9 +122,19 @@
     };
 
     watch(
-        () => props.previousInstancesGroupDialog.openFlg,
+        () => previousInstancesGroupDialog.value.visible,
+        (visible) => {
+            if (visible) {
+                refreshPreviousInstancesGroupTable();
+            }
+        },
+        { immediate: true }
+    );
+
+    watch(
+        () => previousInstancesGroupDialog.value.openFlg,
         () => {
-            if (props.previousInstancesGroupDialog.visible) {
+            if (previousInstancesGroupDialog.value.visible) {
                 refreshPreviousInstancesGroupTable();
             }
         }
@@ -147,7 +142,7 @@
 
     function refreshPreviousInstancesGroupTable() {
         loading.value = true;
-        const D = props.previousInstancesGroupDialog;
+        const D = previousInstancesGroupDialog.value;
         database.getPreviousInstancesByGroupId(D.groupRef.id).then((data) => {
             const array = [];
             for (const ref of data.values()) {

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue

@@ -1,41 +1,33 @@
 <template>
-    <Dialog
-        :open="previousInstancesInfoDialogVisible"
-        @update:open="
-            (open) => {
-                if (!open) closeDialog();
-            }
-        ">
-        <DialogContent class="sm:max-w-200">
-            <DialogHeader>
-                <DialogTitle>{{ t('dialog.previous_instances.info') }}</DialogTitle>
-            </DialogHeader>
+    <div>
+        <DialogHeader>
+            <DialogTitle>{{ t('dialog.previous_instances.info') }}</DialogTitle>
+        </DialogHeader>
 
-            <DataTableLayout
-                class="min-w-0 w-full"
-                :table="table"
-                :loading="loading"
-                :table-style="tableStyle"
-                :page-sizes="pageSizes"
-                :total-items="totalItems"
-                :on-page-size-change="handlePageSizeChange">
-                <template #toolbar>
-                    <div style="display: flex; align-items: center; justify-content: space-between">
-                        <Location :location="location.tag" style="font-size: 14px" />
-                        <InputGroupField
-                            v-model="search"
-                            :placeholder="t('dialog.previous_instances.search_placeholder')"
-                            style="width: 150px"
-                            clearable />
-                    </div>
-                </template>
-            </DataTableLayout>
-        </DialogContent>
-    </Dialog>
+        <DataTableLayout
+            class="min-w-0 w-full"
+            :table="table"
+            :loading="loading"
+            :table-style="tableStyle"
+            :page-sizes="pageSizes"
+            :total-items="totalItems"
+            :on-page-size-change="handlePageSizeChange">
+            <template #toolbar>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <Location :location="location.tag" style="font-size: 14px" />
+                    <InputGroupField
+                        v-model="search"
+                        :placeholder="t('dialog.previous_instances.search_placeholder')"
+                        style="width: 150px"
+                        clearable />
+                </div>
+            </template>
+        </DataTableLayout>
+    </div>
 </template>
 
 <script setup>
-    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, nextTick, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -146,7 +138,8 @@
                     refreshPreviousInstancesInfoTable();
                 });
             }
-        }
+        },
+        { immediate: true }
     );
 
     function init() {
@@ -169,7 +162,4 @@
         });
     }
 
-    function closeDialog() {
-        previousInstancesInfoDialogVisible.value = false;
-    }
 </script>

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue

@@ -1,36 +1,34 @@
 <template>
-    <Dialog v-model:open="isVisible">
-        <DialogContent class="sm:max-w-250">
-            <DialogHeader>
-                <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
-            </DialogHeader>
+    <div>
+        <DialogHeader>
+            <DialogTitle>{{ t('dialog.previous_instances.header') }}</DialogTitle>
+        </DialogHeader>
 
-            <DataTableLayout
-                class="min-w-0 w-full"
-                :table="table"
-                :loading="loading"
-                :table-style="tableStyle"
-                :page-sizes="pageSizes"
-                :total-items="totalItems"
-                :on-page-size-change="handlePageSizeChange">
-                <template #toolbar>
-                    <div style="display: flex; align-items: center; justify-content: space-between">
-                        <span style="font-size: 14px" v-text="previousInstancesWorldDialog.worldRef.name"></span>
-                        <InputGroupField
-                            v-model="search"
-                            :placeholder="t('dialog.previous_instances.search_placeholder')"
-                            clearable
-                            class="w-1/3"
-                            style="display: block" />
-                    </div>
-                </template>
-            </DataTableLayout>
-        </DialogContent>
-    </Dialog>
+        <DataTableLayout
+            class="min-w-0 w-full"
+            :table="table"
+            :loading="loading"
+            :table-style="tableStyle"
+            :page-sizes="pageSizes"
+            :total-items="totalItems"
+            :on-page-size-change="handlePageSizeChange">
+            <template #toolbar>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                    <span style="font-size: 14px" v-text="previousInstancesWorldDialog.worldRef.name"></span>
+                    <InputGroupField
+                        v-model="search"
+                        :placeholder="t('dialog.previous_instances.search_placeholder')"
+                        clearable
+                        class="w-1/3"
+                        style="display: block" />
+                </div>
+            </template>
+        </DataTableLayout>
+    </div>
 </template>
 
 <script setup>
-    import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { computed, ref, watch } from 'vue';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
@@ -60,15 +58,9 @@
 
     const modalStore = useModalStore();
 
-    const props = defineProps({
-        previousInstancesWorldDialog: {
-            type: Object,
-            required: true
-        }
-    });
-    const emit = defineEmits(['update:previous-instances-world-dialog']);
-
-    const { showPreviousInstancesInfoDialog } = useInstanceStore();
+    const instanceStore = useInstanceStore();
+    const { showPreviousInstancesInfoDialog } = instanceStore;
+    const { previousInstancesWorldDialog } = storeToRefs(instanceStore);
     const { shiftHeld } = storeToRefs(useUiStore());
     const { currentUser } = storeToRefs(useUserStore());
     const { stringComparer } = storeToRefs(useSearchStore());
@@ -81,16 +73,6 @@
     const tableStyle = { maxHeight: '400px' };
     const loading = ref(false);
 
-    const isVisible = computed({
-        get: () => props.previousInstancesWorldDialog.visible,
-        set: (value) => {
-            emit('update:previous-instances-world-dialog', {
-                ...props.previousInstancesWorldDialog,
-                visible: value
-            });
-        }
-    });
-
     const displayRows = computed(() => {
         const q = String(search.value ?? '')
             .trim()
@@ -110,7 +92,7 @@
         createColumns({
             shiftHeld,
             currentUserId: currentUser.value?.id,
-            forceUpdateKey: props.previousInstancesWorldDialog?.forceUpdate,
+            forceUpdateKey: previousInstancesWorldDialog.value?.forceUpdate,
             onShowInfo: showPreviousInstancesInfoDialog,
             onDelete: deleteGameLogWorldInstance,
             onDeletePrompt: deleteGameLogWorldInstancePrompt
@@ -152,7 +134,7 @@
 
     function refreshPreviousInstancesWorldTable() {
         loading.value = true;
-        const D = props.previousInstancesWorldDialog;
+        const D = previousInstancesWorldDialog.value;
         database.getPreviousInstancesByWorldId(D.worldRef).then((data) => {
             const array = [];
             for (const ref of data.values()) {
@@ -185,9 +167,19 @@
     }
 
     watch(
-        () => props.previousInstancesWorldDialog.openFlg,
+        () => previousInstancesWorldDialog.value.visible,
+        (visible) => {
+            if (visible) {
+                refreshPreviousInstancesWorldTable();
+            }
+        },
+        { immediate: true }
+    );
+
+    watch(
+        () => previousInstancesWorldDialog.value.openFlg,
         () => {
-            if (props.previousInstancesWorldDialog.visible) {
+            if (previousInstancesWorldDialog.value.visible) {
                 refreshPreviousInstancesWorldTable();
             }
         }