imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine infinite scroll - infiniteStart is a ref variable and infiniteAcctData is a computed one.

Browse Source
This commit is contained in:
Cindy Chang
2024-06-25 16:28:36 +08:00
parent 877c6acfb1
commit 353eecad81
3 changed files with 7 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/AccountManagement/AccountAdmin/index.vue
View File

@@ -149,11 +149,10 @@ export default {
const modalStore = useModalStore();
const { isLoading } = storeToRefs(loadingStore);
const loginStore = piniaLoginStore();
const infiniteAcctData = ref([]);
const infiniteStart = ref(0);
const infiniteAcctData = computed(() => acctMgmtStore.allUserAccoutList.slice(0, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA));
const loginUserData = ref(null);
const allUserAccoutList = computed(() => acctMgmtStore.allUserAccoutList);
const fetchLoginUserData = async () => {
await loginStore.getUserData();
@@ -184,11 +183,6 @@ export default {
modalStore.openModal(MODAL_ACCT_INFO);
}
const getFirstPageUserData = async() => {
await acctMgmtStore.getAllUserAccounts();
infiniteAcctData.value = allUserAccoutList.value.slice(0, ONCE_RENDER_NUM_OF_DATA)
};
const handleDeleteMouseOver = (username) => {
acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
};
@@ -228,12 +222,12 @@ export default {
};
const getRowClass = (curData) => {
return curData.isRowHovered ? 'bg-[#F1F5F9]' : '';
return curData?.isRowHovered ? 'bg-[#F1F5F9]' : '';
};
onBeforeMount(async () => {
await fetchLoginUserData();
await getFirstPageUserData();
await acctMgmtStore.getAllUserAccounts();
moveCurrentLoginUserToFirstRow();
});
@@ -266,11 +260,9 @@ export default {
}
};
const fetchMoreDataVue3 = () => {
infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
const fetchMoreDataVue3 = () => {
if(infiniteAcctData.value.length < acctMgmtStore.allUserAccoutList.length) {
infiniteAcctData.value = [...infiniteAcctData.value, ...acctMgmtStore.allUserAccoutList.slice(
infiniteStart.value, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA)];
infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
}
};