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

feature: just create badge. Important thing is the await keyword

Browse Source
This commit is contained in:
Cindy Chang
2024-06-26 11:46:53 +08:00
parent 353eecad81
commit 965aaeb097
8 changed files with 79 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/AccountManagement/AccountAdmin/index.vue → src/views/AccountManagement/AccountAdmin/AccountAdmin.vue
View File

@@ -14,11 +14,15 @@
>
<Column field="username" :header="i18next.t('AcctMgmt.Account')" bodyClass="font-medium" sortable>
<template #body="slotProps">
<div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
<div class="row-container flex-w-full-hoverable w-full flex" @mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)">
<div @dblclick="onAcctDoubleClick(slotProps.data.username)" class="cursor-pointer">
<div @dblclick="onAcctDoubleClick(slotProps.data.username)" class="cursor-pointer flex">
{{ slotProps.data.username }}
</div>
<span id="just_create_badge" class="flex ml-4"
v-if="isOneAccountJustCreate && slotProps.data.username === justCreateUsername">
<img src="@/assets/icon-new.svg" alt="New">
</span>
</div>
</template>
</Column>
@@ -100,7 +104,7 @@
</template>
<script>
import { ref, computed, onBeforeMount, watch, } from 'vue';
import { ref, computed, onMounted, watch, } from 'vue';
import { storeToRefs, mapState, mapActions, } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import { useModalStore } from '@/stores/modal.js';
@@ -128,9 +132,7 @@ function repeatAccountList(accountList, N) {
const repeatedList = [];
for (let i = 0; i < N; i++) {
// 复制每次的对象并将其添加到新数组中
accountList.forEach(account => {
// 创建一个新的对象，避免直接引用
const newAccount = { ...account, id: account.id + i };
repeatedList.push(newAccount);
});
@@ -150,10 +152,16 @@ export default {
const { isLoading } = storeToRefs(loadingStore);
const loginStore = piniaLoginStore();
const infiniteStart = ref(0);
const infiniteAcctData = computed(() => acctMgmtStore.allUserAccoutList.slice(0, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA));
const shouldUpdateList = computed(() => acctMgmtStore.shouldUpdateList);
const allAccountResponsive = computed(() => acctMgmtStore.allUserAccoutList);
const infiniteAcctData = computed(() => allAccountResponsive.value.slice(0, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA));
const loginUserData = ref(null);
const isOneAccountJustCreate = computed(() => acctMgmtStore.isOneAccountJustCreate);
const justCreateUsername = computed(() => acctMgmtStore.justCreateUsername);
const fetchLoginUserData = async () => {
await loginStore.getUserData();
loginUserData.value = loginStore.userData;
@@ -162,16 +170,27 @@ export default {
const moveCurrentLoginUserToFirstRow = () => {
const currentLoginUsername = loginUserData.value.username;
if(infiniteAcctData.value && infiniteAcctData.value.length){
const index = infiniteAcctData.value.findIndex(user => user.username === currentLoginUsername);
const index = allAccountResponsive.value.findIndex(user => user.username === currentLoginUsername);
if (index !== -1) {
// 移除匹配的對象(現正登入的使用者)並將其插入到陣列的第一位"
const [user] = infiniteAcctData.value.splice(index, 1);
infiniteAcctData.value.unshift(user);
// 移除匹配的對象(現正登入的使用者)並將其插入到陣列的第一位
const [loginUser] = allAccountResponsive.value.splice(index, 1);
infiniteAcctData.value.unshift(loginUser);
}
}
};
const moveJustCreateUserToFirstRow = () => {
if(infiniteAcctData.value && infiniteAcctData.value.length){
const index = acctMgmtStore.allUserAccoutList.findIndex(user => user.username === acctMgmtStore.justCreateUsername);
if (index !== -1) {
// 移除匹配的對象(剛剛新增的使用者)並將其插入到陣列的第一位
const [justCreateUser] = acctMgmtStore.allUserAccoutList.splice(index, 1);
infiniteAcctData.value.unshift(justCreateUser);
}
}
};
const onCreateNewClick = () => {
acctMgmtStore.clearCurrentViewingUser();
modalStore.openModal(MODAL_CREATE_NEW);
@@ -225,7 +244,19 @@ export default {
return curData?.isRowHovered ? 'bg-[#F1F5F9]' : '';
};
onBeforeMount(async () => {
watch(shouldUpdateList, async(newShouldUpdateList) => {
if (newShouldUpdateList) {
await acctMgmtStore.getAllUserAccounts();
acctMgmtStore.setShouldUpdateList(false);
// 當夾帶有infiniteStart.value，就表示依然考慮到無限捲動的需求
infiniteAcctData.value = allAccountResponsive.value.slice(0, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA);
moveCurrentLoginUserToFirstRow();
moveJustCreateUserToFirstRow();
}
});
onMounted(async () => {
await fetchLoginUserData();
await acctMgmtStore.getAllUserAccounts();
moveCurrentLoginUserToFirstRow();
@@ -271,6 +302,8 @@ export default {
modalStore,
loginUserData,
infiniteAcctData,
isOneAccountJustCreate,
justCreateUsername,
onCreateNewClick,
onAcctDoubleClick,
handleScroll,