feature: acct list can hover pencil btn
This commit is contained in:
Cindy Chang
@@ -6,65 +6,84 @@
|
||||
</div>
|
||||
<div id="acct_mgmt_data_grid" class="flex w-full overflow-y-auto h-[570px]" @scroll="handleScroll">
|
||||
<DataTable :value="internalInfiniteAcctData" dataKey="username" tableClass="w-full mt-4 text-sm relative table-fixed"
|
||||
:rowClass="getRowClass"
|
||||
>
|
||||
<template #body="slotProps">
|
||||
<div class="flex w-full h-full whole-row"
|
||||
:class="{
|
||||
'hover:bg-[#CBD5E1]': slotProps.data.isRowHovered,
|
||||
}"
|
||||
@mouseover="handleRowMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleRowMouseOut(slotProps.data.username)"
|
||||
> <!--處理一整列的互動監聽-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Column field="username" :header="i18next.t('AcctMgmt.Account')" bodyClass="font-medium" sortable>
|
||||
<template #body="slotProps">
|
||||
<div @dblclick="onAcctDoubleClick()" class="cursor-pointer">
|
||||
{{ slotProps.data.username }}
|
||||
<div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleRowMouseOut(slotProps.data.username)">
|
||||
<div @dblclick="onAcctDoubleClick()" class="cursor-pointer">
|
||||
{{ slotProps.data.username }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" :header="i18next.t('AcctMgmt.FullName')" bodyClass="text-neutral-500" sortable>
|
||||
<template #body="slotProps">
|
||||
<div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleRowMouseOut(slotProps.data.username)">
|
||||
<div class="">
|
||||
{{ slotProps.data.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" :header="i18next.t('AcctMgmt.FullName')" bodyClass="text-neutral-500" sortable></Column>
|
||||
<Column field="is_admin" :header="i18next.t('AcctMgmt.AdminRights')" bodyClass="text-neutral-500 flex justify-center"
|
||||
headerClass="header-center">
|
||||
<template #body="slotProps">
|
||||
<img v-if="slotProps.data.is_admin" src="@/assets/radioOn.svg" alt="Radio On" class="cursor-pointer flex"
|
||||
@click="onAdminRightsBtnClick(true)"
|
||||
/>
|
||||
<img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="cursor-pointer flex"
|
||||
@click="onAdminRightsBtnClick(false)"
|
||||
/>
|
||||
<template #body="slotProps">
|
||||
<div class="row-container flex-w-full-hoverable flex w-full justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleRowMouseOut(slotProps.data.username)">
|
||||
<img v-if="slotProps.data.is_admin" src="@/assets/radioOn.svg" alt="Radio On" class="cursor-pointer flex justify-center"
|
||||
@click="onAdminRightsBtnClick(true)"
|
||||
/>
|
||||
<img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="cursor-pointer flex justify-center"
|
||||
@click="onAdminRightsBtnClick(false)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="is_active" :header="i18next.t('AcctMgmt.AccountActivation')" bodyClass="text-neutral-500"
|
||||
headerClass="header-center">
|
||||
<template #body="slotProps">
|
||||
<div class="w-full flex justify-center">
|
||||
<img v-if="slotProps.data.is_active" src="@/assets/radioOn.svg" alt="Radio On" class="cursor-pointer flex"/>
|
||||
<img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="cursor-pointer flex"/>
|
||||
</div>
|
||||
<div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleRowMouseOut(slotProps.data.username)">
|
||||
<div class="w-full flex justify-center">
|
||||
<img v-if="slotProps.data.is_active" src="@/assets/radioOn.svg" alt="Radio On" class="cursor-pointer flex"/>
|
||||
<img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="cursor-pointer flex"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column :header="i18next.t('AcctMgmt.Detail')" bodyClass="text-neutral-500">
|
||||
<template #body="slotProps">
|
||||
<img src="@/assets/icon-detail-card.svg" alt="Detail" class="cursor-pointer" @click="onDetailBtnClick(slotProps.data.username)"/>
|
||||
<Column :header="i18next.t('AcctMgmt.Detail')" bodyClass="text-neutral-500" headerClass="header-center">
|
||||
<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)"/>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column :header="i18next.t('AcctMgmt.Edit')" bodyClass="text-neutral-500">
|
||||
<template #body="slotProps">
|
||||
<img src="@/assets/icon-edit.svg" alt="Edit" class="cursor-pointer" @click="onEditBtnClick(slotProps.data.username)"/>
|
||||
<Column :header="i18next.t('AcctMgmt.Edit')" bodyClass="text-neutral-500" headerClass="header-center">
|
||||
<template #body="slotProps">
|
||||
<div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)">
|
||||
<img :src="slotProps.data.isEditHovered ? iconEditOn : iconEditOff" alt="Edit" class="cursor-pointer"
|
||||
@click="onEditBtnClick(slotProps.data.username)"
|
||||
@mouseover="handleEditMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleEditMouseOut(slotProps.data.username)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column :header="i18next.t('AcctMgmt.Delete')" bodyClass="text-neutral-500">
|
||||
<template #body="slotProps">
|
||||
<img :src="slotProps.data.isDeleteHovered ? iconDeleteRed : iconDeleteGray"
|
||||
:alt="slotProps.data.isDeleteHovered ? 'hovered' : 'not-hovered'"
|
||||
class="cursor-pointer"
|
||||
@mouseover="handleDeleteMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleDeleteMouseOut(slotProps.data.username)"
|
||||
@click="onDeleteBtnClick(slotProps.data.username)"
|
||||
>
|
||||
<Column :header="i18next.t('AcctMgmt.Delete')" bodyClass="text-neutral-500 flex justify-center" headerClass="header-center">
|
||||
<template #body="slotProps">
|
||||
<div class="row-container flex-w-full-hoverable w-full flex justify-center" @mouseenter="handleRowMouseOver(slotProps.data.username)">
|
||||
<img :src="slotProps.data.isDeleteHovered ? iconDeleteRed : iconDeleteGray"
|
||||
:alt="slotProps.data.isDeleteHovered ? 'hovered' : 'not-hovered'"
|
||||
class="cursor-pointer flex"
|
||||
@mouseover="handleDeleteMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleDeleteMouseOut(slotProps.data.username)"
|
||||
@click="onDeleteBtnClick(slotProps.data.username)"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
@@ -90,6 +109,8 @@ import {
|
||||
} 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';
|
||||
|
||||
const ONCE_RENDER_NUM_OF_DATA = 9;
|
||||
|
||||
@@ -163,8 +184,20 @@ export default {
|
||||
};
|
||||
|
||||
|
||||
const onDeleteBtnClick = (usernameToDelete) => {
|
||||
const handleEditMouseOver = (username) => {
|
||||
acctMgmtStore.changeIsEditHoveredByUser(username, true);
|
||||
};
|
||||
|
||||
const handleEditMouseOut = (username) => {
|
||||
acctMgmtStore.changeIsEditHoveredByUser(username, false);
|
||||
};
|
||||
|
||||
const onDeleteBtnClick = (usernameToDelete) => {
|
||||
|
||||
};
|
||||
|
||||
const getRowClass = (curData) => {
|
||||
return curData.isRowHovered ? 'bg-[#F1F5F9]' : '';
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
@@ -178,13 +211,18 @@ export default {
|
||||
modalStore,
|
||||
loginUserData,
|
||||
internalInfiniteAcctData,
|
||||
getRowClass,
|
||||
onDeleteBtnClick,
|
||||
handleDeleteMouseOver,
|
||||
handleDeleteMouseOut,
|
||||
handleRowMouseOver,
|
||||
handleRowMouseOut,
|
||||
handleEditMouseOver,
|
||||
handleEditMouseOut,
|
||||
iconDeleteGray,
|
||||
iconDeleteRed,
|
||||
iconEditOff,
|
||||
iconEditOn,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
|
||||
Reference in New Issue
Block a user