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

WIP: delete alert modal prototype.

Browse Source
This commit is contained in:
Cindy Chang
2024-06-21 14:20:52 +08:00
parent ad8c555632
commit 0fb0d8b529
9 changed files with 152 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,11 @@
<template>
<div class="flex justify-center pt-2">
<div class="flex w-[1216px] flex-col items-center">
<div class="flex w-full justify-end py-2">
<div class="flex w-full justify-between py-2 items-center">
<button id="create_new_acct_btn" class="flex rounded-full bg-primary text-[#ffffff] flex justify-center
items-center px-6 py-[10px]" @click="onCreateNewClick">
{{ i18next.t("AcctMgmt.CreateNew") }}
</button>
<SearchBar/>
</div>
<div id="acct_mgmt_data_grid" class="flex w-full overflow-y-auto h-[570px]" @scroll="handleScroll">
@@ -58,7 +62,10 @@
<template #body="slotProps">
<div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)"
@mouseout="handleRowMouseOut(slotProps.data.username)">
<img src="@/assets/icon-detail-card.svg" alt="Detail" class="cursor-pointer" @click="onDetailBtnClick(slotProps.data.username)"/>
<img :src="slotProps.data.isDetailHovered ? iconDetailOn : iconDetailOff" alt="Detail" class="cursor-pointer" @click="onDetailBtnClick(slotProps.data.username)"
@mouseover="handleDetailMouseOver(slotProps.data.username)"
@mouseout="handleDetailMouseOut(slotProps.data.username)"
/>
</div>
</template>
</Column>
@@ -105,14 +112,17 @@ import {
MODAL_CREATE_NEW,
MODAL_ACCT_EDIT,
MODAL_ACCT_INFO,
MODAL_DELETE,
accountList,
ONCE_RENDER_NUM_OF_DATA,
} from "@/constants/constants.js";
import iconDeleteGray from '@/assets/icon-delete-gray.svg';
import iconDeleteRed from '@/assets/icon-delete-red.svg';
import iconEditOff from '@/assets/icon-edit-off.svg';
import iconEditOn from '@/assets/icon-edit-on.svg';
import iconDetailOn from '@/assets/icon-detail-on.svg';
import iconDetailOff from '@/assets/icon-detail-card.svg';
const ONCE_RENDER_NUM_OF_DATA = 9;
function repeatAccountList(accountList, N) {
const repeatedList = [];
@@ -162,6 +172,11 @@ export default {
}
};
const onCreateNewClick = () => {
acctMgmtStore.clearCurrentViewingUser();
modalStore.openModal(MODAL_CREATE_NEW);
};
const getFirstPageUserData = async() => {
await acctMgmtStore.getAllUserAccounts();
internalInfiniteAcctData.value = allUserAccoutList.value.slice(0, ONCE_RENDER_NUM_OF_DATA)
@@ -191,9 +206,17 @@ export default {
const handleEditMouseOut = (username) => {
acctMgmtStore.changeIsEditHoveredByUser(username, false);
};
const handleDetailMouseOver = (username) => {
acctMgmtStore.changeIsDetailHoveredByUser(username, true);
};
const handleDetailMouseOut = (username) => {
acctMgmtStore.changeIsDetailHoveredByUser(username, false);
};
const onDeleteBtnClick = (usernameToDelete) => {
modalStore.openModal(MODAL_DELETE);
};
const getRowClass = (curData) => {
@@ -211,6 +234,7 @@ export default {
modalStore,
loginUserData,
internalInfiniteAcctData,
onCreateNewClick,
getRowClass,
onDeleteBtnClick,
handleDeleteMouseOver,
@@ -219,10 +243,14 @@ export default {
handleRowMouseOut,
handleEditMouseOver,
handleEditMouseOut,
handleDetailMouseOver,
handleDetailMouseOut,
iconDeleteGray,
iconDeleteRed,
iconEditOff,
iconEditOn,
iconDetailOn,
iconDetailOff,
};
},
data() {