github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-08 19:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update dashboard list with using the search box (#123)

Browse Source
This commit is contained in:
Fine0830 2022-07-20 16:53:01 +08:00 committed by GitHub
parent ec7a8bbfa9
commit bec86e80fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/dashboard/List.vue
View File

@ -20,7 +20,7 @@ limitations under the License. -->
placeholder="Please input name" placeholder="Please input name"
class="input-with-search ml-10" class="input-with-search ml-10"
size="small" size="small"
@change="searchDashboards" @change="searchDashboards(1)"
> >
<template #append> <template #append>
<el-button size="small"> <el-button size="small">
@ -129,7 +129,8 @@ limitations under the License. -->
small small
layout="prev, pager, next" layout="prev, pager, next"
:page-size="pageSize" :page-size="pageSize"
:total="dashboardStore.dashboards.length" :total="total"
v-model="currentPage"
@current-change="changePage" @current-change="changePage"
@prev-click="changePage" @prev-click="changePage"
@next-click="changePage" @next-click="changePage"
@ -159,6 +160,8 @@ const pageSize = 18;
const dashboards = ref<DashboardItem[]>([]); const dashboards = ref<DashboardItem[]>([]);
const searchText = ref<string>(""); const searchText = ref<string>("");
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const currentPage = ref<number>(1);
const total = ref<number>(0);
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<DashboardItem[]>([]); const multipleSelection = ref<DashboardItem[]>([]);
const dashboardFile = ref<Nullable<HTMLDivElement>>(null); const dashboardFile = ref<Nullable<HTMLDivElement>>(null);
@ -170,7 +173,7 @@ const handleSelectionChange = (val: DashboardItem[]) => {
setList(); setList();
async function setList() { async function setList() {
await dashboardStore.setDashboards(); await dashboardStore.setDashboards();
searchDashboards(); searchDashboards(1);
} }
async function importTemplates(event: any) { async function importTemplates(event: any) {
const arr: any = await readFile(event); const arr: any = await readFile(event);
@ -374,7 +377,7 @@ async function setRoot(row: DashboardItem) {
items.push(d); items.push(d);
} }
dashboardStore.resetDashboards(items); dashboardStore.resetDashboards(items);
searchDashboards(); searchDashboards(1);
loading.value = false; loading.value = false;
} }
function handleRename(row: DashboardItem) { function handleRename(row: DashboardItem) {
@ -458,10 +461,13 @@ function searchDashboards(pageIndex?: any) {
const arr = list.filter((d: { name: string }) => const arr = list.filter((d: { name: string }) =>
d.name.includes(searchText.value) d.name.includes(searchText.value)
); );
dashboards.value = arr.splice(
(pageIndex - 1 || 0) * pageSize, total.value = arr.length;
pageSize * (pageIndex || 1) dashboards.value = arr.filter(
(d: { name: string }, index: number) =>
index < pageIndex * pageSize && index >= (pageIndex - 1) * pageSize
); );
currentPage.value = pageIndex;
} }
async function reloadTemplates() { async function reloadTemplates() {
@ -470,6 +476,7 @@ async function reloadTemplates() {
loading.value = false; loading.value = false;
} }
function changePage(pageIndex: number) { function changePage(pageIndex: number) {
currentPage.value = pageIndex;
searchDashboards(pageIndex); searchDashboards(pageIndex);
} }
</script> </script>