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

1
src/views/AccountManagement/ModalAccountEdit.vue
View File

@@ -246,6 +246,7 @@ export default defineComponent({
}); });
await toast.success(i18next.t("AcctMgmt.MsgAccountAdded")); await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
await modalStore.closeModal(); await modalStore.closeModal();
await acctMgmtStore.getAllUserAccounts();
await router.push('/account/account-admin'); await router.push('/account/account-admin');
break; break;
default: default:

1
src/views/AccountManagement/ModalDeleteAlert.vue
View File

@@ -46,6 +46,7 @@ export default defineComponent({
if(acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)){ if(acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)){
toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess")); toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
modalStore.closeModal(); modalStore.closeModal();
await acctMgmtStore.getAllUserAccounts();
router.push("/account/account-admin"); router.push("/account/account-admin");
} }
} }