From 4946971aac609a146bfe19e5c7c549be27bb4660 Mon Sep 17 00:00:00 2001 From: Shyam-Chen Date: Mon, 28 Oct 2024 11:22:24 +0800 Subject: [PATCH] 1,576th Commit --- ui/src/components/table/Table.vue | 22 ++++++++-------- ui/src/components/table/config.ts | 8 ++++++ ui/src/components/table/types.ts | 2 +- ui/src/utilities/request/request.ts | 8 +++--- ui/src/utilities/static-table/staticTable.ts | 27 +++++++++----------- 5 files changed, 36 insertions(+), 31 deletions(-) create mode 100644 ui/src/components/table/config.ts diff --git a/ui/src/components/table/Table.vue b/ui/src/components/table/Table.vue index 60d63ba8..82c6000c 100644 --- a/ui/src/components/table/Table.vue +++ b/ui/src/components/table/Table.vue @@ -11,6 +11,7 @@ import Select from '../select/Select.vue'; import Spinner from '../spinner/Spinner.vue'; import type { ColumnItem, Control } from './types'; +import { controlDefaults } from './config'; import Column from './Column.vue'; import Row from './Row.vue'; import Cell from './Cell.vue'; @@ -36,12 +37,9 @@ const props = defineProps<{ const emit = defineEmits<{ (evt: 'update:value', val: T[]): void; (evt: 'update:selected', val: T[]): void; - (evt: 'change', val: { rows?: number; page?: number; field?: string; direction?: string }): void; + (evt: 'change', val: Control): void; (evt: 'clickRow', val: T): void; - ( - evt: 'update:control', - val: { rows?: number; page?: number; field?: string; direction?: string }, - ): void; + (evt: 'update:control', val: Control): void; (evt: 'selecteAll', val: boolean, arr: T[]): void; }>(); @@ -69,7 +67,7 @@ const controlModel = computed({ !props.control || (typeof props.control === 'object' && Object.keys(props.control).length === 0) ) { - return { rows: 10, page: 1, field: 'createdAt', direction: 'desc' }; + return controlDefaults; } return props.control; @@ -102,8 +100,8 @@ const flux = reactive({ flux._updateChange(); }, - sortField: 'createdAt' as string | undefined, - sortDirection: 'desc' as string | undefined, + sortField: 'createdAt' as Control['field'], + sortDirection: 'desc' as Control['direction'], onSort(col: any) { if (props.loading) return; @@ -161,10 +159,10 @@ watch( () => controlModel.value, (val) => { if (Object.keys(val)?.length) { - flux.rowsPerPage = val.rows || 10; - flux.currentPage = val.page || 1; - flux.sortField = val.field || 'createdAt'; - flux.sortDirection = val.direction || 'desc'; + flux.rowsPerPage = val.rows || controlDefaults.rows; + flux.currentPage = val.page || controlDefaults.page; + flux.sortField = val.field || controlDefaults.field; + flux.sortDirection = val.direction || controlDefaults.direction; if (props.static && props.rows?.length) { flux.rows = props.static(props.rows, controlModel.value); diff --git a/ui/src/components/table/config.ts b/ui/src/components/table/config.ts new file mode 100644 index 00000000..353cb9ff --- /dev/null +++ b/ui/src/components/table/config.ts @@ -0,0 +1,8 @@ +import type { Control } from './types'; + +export const controlDefaults: Required = { + rows: 10, + page: 1, + field: 'createdAt', + direction: 'desc', +}; diff --git a/ui/src/components/table/types.ts b/ui/src/components/table/types.ts index 4a9f2ce1..655021c6 100644 --- a/ui/src/components/table/types.ts +++ b/ui/src/components/table/types.ts @@ -13,5 +13,5 @@ export type Control = { rows?: number; page?: number; field?: string; - direction?: string; + direction?: string | 'asc' | 'desc'; }; diff --git a/ui/src/utilities/request/request.ts b/ui/src/utilities/request/request.ts index 769338f1..9cfaa66f 100644 --- a/ui/src/utilities/request/request.ts +++ b/ui/src/utilities/request/request.ts @@ -34,12 +34,14 @@ export default async (request: FetchRequest, options?: FetchOptions) => { try { const response = await fetcher.raw(request, options); return response as FetchResponse; - } catch (error: any) { - if (error.response?.status === 401 && localStorage.getItem('refreshToken')) { + } catch (error) { + const fetchError = error as { response: FetchResponse }; + + if (fetchError.response?.status === 401 && localStorage.getItem('refreshToken')) { const response = await fetcher.raw(request, options); return response as FetchResponse; } - return error.response as FetchResponse; + return fetchError.response as FetchResponse; } }; diff --git a/ui/src/utilities/static-table/staticTable.ts b/ui/src/utilities/static-table/staticTable.ts index a242320a..a8b52bb2 100644 --- a/ui/src/utilities/static-table/staticTable.ts +++ b/ui/src/utilities/static-table/staticTable.ts @@ -1,23 +1,20 @@ -import chunk from 'lodash/chunk'; import orderBy from 'lodash/orderBy'; -export default >( - rows: T[], - control = { rows: 10, page: 1, field: 'createdAt', direction: 'desc' } as any, -) => { - if (!rows?.length) return []; +import type { Control } from '../../components/table/types'; +import { controlDefaults } from '../../components/table/config'; - let arr = [...rows]; +export default (rows: T[], control: Control) => { + if (!rows?.length) return []; - if (control.field && control.direction === 'asc') { - arr = orderBy(arr, control.field, 'asc'); - } + const _rows = control.rows || controlDefaults.rows; + const _page = control.page || controlDefaults.page; + const _field = control.field || controlDefaults.field; + const _direction = control.direction || controlDefaults.direction; - if (control.field && control.direction === 'desc') { - arr = orderBy(arr, control.field, 'desc'); - } + const ordered = orderBy(rows, _field, _direction as 'asc' | 'desc'); - const chunked = chunk(arr, control.rows); + const start = (_page - 1) * _rows; + const pagedRows = ordered.slice(start, start + _rows); - return chunked[control.page - 1]; + return pagedRows; };