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,

7
src/views/AccountManagement/ModalAccountEdit.vue → src/views/AccountManagement/ModalAccountEditCreate.vue
View File

@@ -163,10 +163,6 @@ export default defineComponent({
const whichCurrentModal = computed(() => modalStore.whichModal);
const {
id,
} = currentViewingUser;
const isSSO = computed(() => acctMgmtStore.currentViewingUser.is_sso);
const username = computed(() => acctMgmtStore.currentViewingUser.username);
const name = computed(() => acctMgmtStore.currentViewingUser.name);
@@ -246,7 +242,7 @@ export default defineComponent({
});
await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
await modalStore.closeModal();
await acctMgmtStore.getAllUserAccounts();
acctMgmtStore.setShouldUpdateList(true);
await router.push('/account/account-admin');
break;
default:
@@ -277,7 +273,6 @@ export default defineComponent({
return {
isConfirmDisabled,
username,
id,
name,
isSSO,
isPwdEyeOn,

12
src/views/AccountManagement/ModalContainer.vue
View File

@@ -3,7 +3,7 @@
flex justify-center items-center">
<div class="flex">
<ModalAccountEdit v-if="whichModal === MODAL_ACCT_EDIT || whichModal === MODAL_CREATE_NEW "/>
<ModalAccountEditCreate v-if="whichModal === MODAL_ACCT_EDIT || whichModal === MODAL_CREATE_NEW "/>
<ModalAccountInfo v-if="whichModal === MODAL_ACCT_INFO"/>
<ModalDeleteAlert v-if="whichModal === MODAL_DELETE" />
</div>
@@ -11,9 +11,9 @@
</template>
<script>
import { watch, computed, } from 'vue';
import { computed, } from 'vue';
import { useModalStore } from '@/stores/modal.js';
import ModalAccountEdit from './ModalAccountEdit.vue';
import ModalAccountEditCreate from './ModalAccountEditCreate.vue';
import ModalAccountInfo from './ModalAccountInfo.vue';
import ModalDeleteAlert from './ModalDeleteAlert.vue';
import {
@@ -29,10 +29,6 @@
const modalStore = useModalStore();
const whichModal = computed(() => modalStore.whichModal);
watch(() => whichModal, (newVal, oldVal) => {
// (`whichModal changed from ${oldVal} to ${newVal}`);
});
return {
modalStore,
whichModal,
@@ -43,7 +39,7 @@
};
},
components: {
ModalAccountEdit,
ModalAccountEditCreate,
ModalAccountInfo,
ModalDeleteAlert,
}

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

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