mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 14:23:51 +02:00
add searchTableSize limit
This commit is contained in:
@@ -127,7 +127,7 @@
|
||||
const totalItems = computed(() => {
|
||||
const length = table.getFilteredRowModel().rows.length;
|
||||
const max = vrcxStore.maxTableSize;
|
||||
return length > max && length < max + 51 ? max : length;
|
||||
return length > max ? max : length;
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
|
||||
@@ -225,7 +225,7 @@
|
||||
const totalItems = computed(() => {
|
||||
const length = table.getFilteredRowModel().rows.length;
|
||||
const max = vrcxStore.maxTableSize;
|
||||
return length > max && length < max + 51 ? max : length;
|
||||
return length > max ? max : length;
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (size) => {
|
||||
|
||||
121
src/components/dialogs/TableLimitsDialog.vue
Normal file
121
src/components/dialogs/TableLimitsDialog.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<Dialog v-model:open="tableLimitsDialog.visible">
|
||||
<DialogContent class="x-dialog sm:max-w-110">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('prompt.change_table_size.header') }}</DialogTitle>
|
||||
<DialogDescription>{{ t('prompt.change_table_size.description') }}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<FieldGroup class="mt-3 gap-3">
|
||||
<Field>
|
||||
<FieldLabel>{{ t('prompt.change_table_size.table_max_size') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<InputGroupField
|
||||
v-model="tableLimitsDialog.maxTableSize"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="\\d*" />
|
||||
</FieldContent>
|
||||
<p :class="['mt-1 text-xs', maxTableSizeError ? 'text-destructive' : 'text-muted-foreground']">
|
||||
{{ maxTableSizeError || maxTableSizeHint }}
|
||||
</p>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>{{ t('prompt.change_table_size.search_limit') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<InputGroupField
|
||||
v-model="tableLimitsDialog.searchLimit"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="\\d*" />
|
||||
</FieldContent>
|
||||
<p :class="['mt-1 text-xs', searchLimitError ? 'text-destructive' : 'text-muted-foreground']">
|
||||
{{ searchLimitError || searchLimitHint }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
{{ t('prompt.change_table_size.search_limit_warning') }}
|
||||
</p>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="secondary" class="mr-2" @click="closeTableLimitsDialog">
|
||||
{{ t('prompt.change_table_size.cancel') }}
|
||||
</Button>
|
||||
<Button :disabled="isSaveDisabled" @click="saveTableLimitsDialog">
|
||||
{{ t('prompt.change_table_size.save') }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupField } from '@/components/ui/input-group';
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useAppearanceSettingsStore } from '../../stores';
|
||||
|
||||
const appearanceSettingsStore = useAppearanceSettingsStore();
|
||||
const { tableLimitsDialog } = storeToRefs(appearanceSettingsStore);
|
||||
const {
|
||||
closeTableLimitsDialog,
|
||||
saveTableLimitsDialog,
|
||||
TABLE_MAX_SIZE_MIN,
|
||||
TABLE_MAX_SIZE_MAX,
|
||||
SEARCH_LIMIT_MIN,
|
||||
SEARCH_LIMIT_MAX
|
||||
} = appearanceSettingsStore;
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const maxTableSizeError = computed(() => {
|
||||
const n = Number(tableLimitsDialog.value.maxTableSize);
|
||||
if (!Number.isFinite(n) || n < TABLE_MAX_SIZE_MIN || n > TABLE_MAX_SIZE_MAX) {
|
||||
return t('prompt.change_table_size.table_max_size_error', {
|
||||
min: TABLE_MAX_SIZE_MIN,
|
||||
max: TABLE_MAX_SIZE_MAX
|
||||
});
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
const maxTableSizeHint = computed(() =>
|
||||
t('prompt.change_table_size.table_max_size_error', {
|
||||
min: TABLE_MAX_SIZE_MIN,
|
||||
max: TABLE_MAX_SIZE_MAX
|
||||
})
|
||||
);
|
||||
|
||||
const searchLimitError = computed(() => {
|
||||
const n = Number(tableLimitsDialog.value.searchLimit);
|
||||
if (!Number.isFinite(n) || n < SEARCH_LIMIT_MIN || n > SEARCH_LIMIT_MAX) {
|
||||
return t('prompt.change_table_size.search_limit_error', {
|
||||
min: SEARCH_LIMIT_MIN,
|
||||
max: SEARCH_LIMIT_MAX
|
||||
});
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
const searchLimitHint = computed(() =>
|
||||
t('prompt.change_table_size.search_limit_error', {
|
||||
min: SEARCH_LIMIT_MIN,
|
||||
max: SEARCH_LIMIT_MAX
|
||||
})
|
||||
);
|
||||
|
||||
const isSaveDisabled = computed(() => !!maxTableSizeError.value || !!searchLimitError.value);
|
||||
</script>
|
||||
Reference in New Issue
Block a user