Apply repository-wide ESLint auto-fix formatting pass
Co-Authored-By: Codex <codex@openai.com>
This commit is contained in:
@@ -1,115 +1,239 @@
|
||||
<template>
|
||||
<div class="flex justify-center pt-2">
|
||||
<div class="flex w-[1216px] flex-col items-center">
|
||||
<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 @on-search-account-button-click="onSearchAccountButtonClick"/>
|
||||
</div>
|
||||
<div id="acct_mgmt_data_grid" class="flex w-full overflow-y-auto h-[570px]" @scroll="handleScroll">
|
||||
<DataTable :value="accountSearchResults" dataKey="username" tableClass="w-full mt-4 text-sm relative table-fixed"
|
||||
:rowClass="getRowClass"
|
||||
<div class="flex justify-center pt-2">
|
||||
<div class="flex w-[1216px] flex-col items-center">
|
||||
<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
|
||||
@on-search-account-button-click="onSearchAccountButtonClick"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="acct_mgmt_data_grid"
|
||||
class="flex w-full overflow-y-auto h-[570px]"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<DataTable
|
||||
:value="accountSearchResults"
|
||||
dataKey="username"
|
||||
tableClass="w-full mt-4 text-sm relative table-fixed"
|
||||
:rowClass="getRowClass"
|
||||
>
|
||||
<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)"
|
||||
@mouseout="handleRowMouseOut(slotProps.data.username)"
|
||||
>
|
||||
<div
|
||||
@dblclick="onAcctDoubleClick(slotProps.data.username)"
|
||||
class="account-cell cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis"
|
||||
>
|
||||
<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)"
|
||||
@mouseout="handleRowMouseOut(slotProps.data.username)">
|
||||
<div @dblclick="onAcctDoubleClick(slotProps.data.username)" class="account-cell cursor-pointer
|
||||
whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
{{ 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>
|
||||
<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="fullname-cell whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
{{ slotProps.data.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="is_admin" :header="i18next.t('AcctMgmt.AdminRights')" bodyClass="text-neutral-500 flex justify-center"
|
||||
headerClass="header-center">
|
||||
<template #body="slotProps">
|
||||
<div v-if="!slotProps.data.isCurrentLoggedIn" 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="btn-admin cursor-pointer flex justify-center"
|
||||
@click="onAdminInputClick(slotProps.data, false)"
|
||||
/>
|
||||
<img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="btn-admin cursor-pointer flex justify-center"
|
||||
@click="onAdminInputClick(slotProps.data, true)"
|
||||
/>
|
||||
</div>
|
||||
<div v-else @mouseenter="handleRowMouseOver(slotProps.data.username)" @mouseout="handleRowMouseOut(slotProps.data.username)"
|
||||
class="row-container flex-w-full-hoverable flex w-full h-6"></div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="is_active" :header="i18next.t('AcctMgmt.AccountActivation')" bodyClass="text-neutral-500"
|
||||
headerClass="header-center">
|
||||
<template #body="slotProps">
|
||||
<div v-if="!slotProps.data.isCurrentLoggedIn" 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="btn-activate cursor-pointer flex"
|
||||
@click="setIsActiveInput(slotProps.data, false)"/>
|
||||
<img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="btn-activate cursor-pointer flex"
|
||||
@click="setIsActiveInput(slotProps.data, true)"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else @mouseenter="handleRowMouseOver(slotProps.data.username)" @mouseout="handleRowMouseOut(slotProps.data.username)"
|
||||
class="row-container flex-w-full-hoverable flex w-full h-6"></div>
|
||||
</template>
|
||||
</Column>
|
||||
<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="slotProps.data.isDetailHovered ? iconDetailOn : iconDetailOff" alt="Detail" class="btn-detail cursor-pointer" @click="onDetailBtnClick(slotProps.data.username)"
|
||||
@mouseover="handleDetailMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleDetailMouseOut(slotProps.data.username)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<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="btn-edit cursor-pointer"
|
||||
@click="onEditButtonClick(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 flex justify-center" headerClass="header-center">
|
||||
<template #body="slotProps">
|
||||
<div v-if="!slotProps.data.isCurrentLoggedIn" 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="delete-account cursor-pointer flex"
|
||||
@mouseover="handleDeleteMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleDeleteMouseOut(slotProps.data.username)"
|
||||
@click="onDeleteBtnClick(slotProps.data.username)"
|
||||
>
|
||||
</div>
|
||||
<div v-else @mouseenter="handleRowMouseOver(slotProps.data.username)" @mouseout="handleRowMouseOut(slotProps.data.username)"
|
||||
class="row-container flex-w-full-hoverable flex w-full h-6"></div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
{{ 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>
|
||||
<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="fullname-cell whitespace-nowrap overflow-hidden text-ellipsis"
|
||||
>
|
||||
{{ slotProps.data.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column
|
||||
field="is_admin"
|
||||
:header="i18next.t('AcctMgmt.AdminRights')"
|
||||
bodyClass="text-neutral-500 flex justify-center"
|
||||
headerClass="header-center"
|
||||
>
|
||||
<template #body="slotProps">
|
||||
<div
|
||||
v-if="!slotProps.data.isCurrentLoggedIn"
|
||||
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="btn-admin cursor-pointer flex justify-center"
|
||||
@click="onAdminInputClick(slotProps.data, false)"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/radioOff.svg"
|
||||
alt="Radio Off"
|
||||
class="btn-admin cursor-pointer flex justify-center"
|
||||
@click="onAdminInputClick(slotProps.data, true)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
@mouseenter="handleRowMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleRowMouseOut(slotProps.data.username)"
|
||||
class="row-container flex-w-full-hoverable flex w-full h-6"
|
||||
></div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column
|
||||
field="is_active"
|
||||
:header="i18next.t('AcctMgmt.AccountActivation')"
|
||||
bodyClass="text-neutral-500"
|
||||
headerClass="header-center"
|
||||
>
|
||||
<template #body="slotProps">
|
||||
<div
|
||||
v-if="!slotProps.data.isCurrentLoggedIn"
|
||||
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="btn-activate cursor-pointer flex"
|
||||
@click="setIsActiveInput(slotProps.data, false)"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/radioOff.svg"
|
||||
alt="Radio Off"
|
||||
class="btn-activate cursor-pointer flex"
|
||||
@click="setIsActiveInput(slotProps.data, true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
@mouseenter="handleRowMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleRowMouseOut(slotProps.data.username)"
|
||||
class="row-container flex-w-full-hoverable flex w-full h-6"
|
||||
></div>
|
||||
</template>
|
||||
</Column>
|
||||
<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="
|
||||
slotProps.data.isDetailHovered
|
||||
? iconDetailOn
|
||||
: iconDetailOff
|
||||
"
|
||||
alt="Detail"
|
||||
class="btn-detail cursor-pointer"
|
||||
@click="onDetailBtnClick(slotProps.data.username)"
|
||||
@mouseover="handleDetailMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleDetailMouseOut(slotProps.data.username)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<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="btn-edit cursor-pointer"
|
||||
@click="onEditButtonClick(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 flex justify-center"
|
||||
headerClass="header-center"
|
||||
>
|
||||
<template #body="slotProps">
|
||||
<div
|
||||
v-if="!slotProps.data.isCurrentLoggedIn"
|
||||
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="delete-account cursor-pointer flex"
|
||||
@mouseover="handleDeleteMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleDeleteMouseOut(slotProps.data.username)"
|
||||
@click="onDeleteBtnClick(slotProps.data.username)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
@mouseenter="handleRowMouseOver(slotProps.data.username)"
|
||||
@mouseout="handleRowMouseOut(slotProps.data.username)"
|
||||
class="row-container flex-w-full-hoverable flex w-full h-6"
|
||||
></div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -123,27 +247,27 @@
|
||||
* delete actions, admin toggle, and infinite scroll.
|
||||
*/
|
||||
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useLoadingStore } from '@/stores/loading';
|
||||
import { useModalStore } from '@/stores/modal';
|
||||
import { useAcctMgmtStore } from '@/stores/acctMgmt';
|
||||
import { useLoginStore } from '@/stores/login';
|
||||
import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
|
||||
import i18next from '@/i18n/i18n.js';
|
||||
import { useToast } from 'vue-toast-notification';
|
||||
import { ref, computed, onMounted, watch } from "vue";
|
||||
import { useLoadingStore } from "@/stores/loading";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useAcctMgmtStore } from "@/stores/acctMgmt";
|
||||
import { useLoginStore } from "@/stores/login";
|
||||
import SearchBar from "../../../components/AccountMenu/SearchBar.vue";
|
||||
import i18next from "@/i18n/i18n.js";
|
||||
import { useToast } from "vue-toast-notification";
|
||||
import {
|
||||
MODAL_CREATE_NEW,
|
||||
MODAL_ACCT_EDIT,
|
||||
MODAL_ACCT_INFO,
|
||||
MODAL_DELETE,
|
||||
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';
|
||||
MODAL_CREATE_NEW,
|
||||
MODAL_ACCT_EDIT,
|
||||
MODAL_ACCT_INFO,
|
||||
MODAL_DELETE,
|
||||
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 toast = useToast();
|
||||
const acctMgmtStore = useAcctMgmtStore();
|
||||
@@ -155,176 +279,187 @@ const infiniteStart = ref(0);
|
||||
const shouldUpdateList = computed(() => acctMgmtStore.shouldUpdateList);
|
||||
|
||||
const allAccountResponsive = computed(() => acctMgmtStore.allUserAccountList);
|
||||
const infiniteAcctData = computed(() => allAccountResponsive.value.slice(0, infiniteStart.value + ONCE_RENDER_NUM_OF_DATA));
|
||||
const infiniteAcctData = computed(() =>
|
||||
allAccountResponsive.value.slice(
|
||||
0,
|
||||
infiniteStart.value + ONCE_RENDER_NUM_OF_DATA,
|
||||
),
|
||||
);
|
||||
const loginUserData = ref(null);
|
||||
|
||||
const isOneAccountJustCreate = computed(() => acctMgmtStore.isOneAccountJustCreate);
|
||||
const isOneAccountJustCreate = computed(
|
||||
() => acctMgmtStore.isOneAccountJustCreate,
|
||||
);
|
||||
const justCreateUsername = computed(() => acctMgmtStore.justCreateUsername);
|
||||
|
||||
const inputQuery = ref('');
|
||||
const inputQuery = ref("");
|
||||
|
||||
const fetchLoginUserData = async () => {
|
||||
await loginStore.getUserData();
|
||||
loginUserData.value = loginStore.userData;
|
||||
await loginStore.getUserData();
|
||||
loginUserData.value = loginStore.userData;
|
||||
};
|
||||
|
||||
const moveJustCreateUserToFirstRow = () => {
|
||||
if(infiniteAcctData.value && infiniteAcctData.value.length){
|
||||
const index = acctMgmtStore.allUserAccountList.findIndex(user => user.username === acctMgmtStore.justCreateUsername);
|
||||
if (index !== -1) {
|
||||
const [justCreateUser] = acctMgmtStore.allUserAccountList[index];
|
||||
infiniteAcctData.value.unshift(justCreateUser);
|
||||
}
|
||||
if (infiniteAcctData.value && infiniteAcctData.value.length) {
|
||||
const index = acctMgmtStore.allUserAccountList.findIndex(
|
||||
(user) => user.username === acctMgmtStore.justCreateUsername,
|
||||
);
|
||||
if (index !== -1) {
|
||||
const [justCreateUser] = acctMgmtStore.allUserAccountList[index];
|
||||
infiniteAcctData.value.unshift(justCreateUser);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const accountSearchResults = computed(() => {
|
||||
if(!inputQuery.value) {
|
||||
return infiniteAcctData.value;
|
||||
}
|
||||
return acctMgmtStore.allUserAccountList.filter (user => user.username.includes(inputQuery.value));
|
||||
if (!inputQuery.value) {
|
||||
return infiniteAcctData.value;
|
||||
}
|
||||
return acctMgmtStore.allUserAccountList.filter((user) =>
|
||||
user.username.includes(inputQuery.value),
|
||||
);
|
||||
});
|
||||
|
||||
const onCreateNewClick = () => {
|
||||
acctMgmtStore.clearCurrentViewingUser();
|
||||
modalStore.openModal(MODAL_CREATE_NEW);
|
||||
acctMgmtStore.clearCurrentViewingUser();
|
||||
modalStore.openModal(MODAL_CREATE_NEW);
|
||||
};
|
||||
|
||||
|
||||
const onAcctDoubleClick = (username) => {
|
||||
acctMgmtStore.setCurrentViewingUser(username);
|
||||
modalStore.openModal(MODAL_ACCT_INFO);
|
||||
}
|
||||
acctMgmtStore.setCurrentViewingUser(username);
|
||||
modalStore.openModal(MODAL_ACCT_INFO);
|
||||
};
|
||||
|
||||
const handleDeleteMouseOver = (username) => {
|
||||
acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
|
||||
acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
|
||||
};
|
||||
|
||||
const handleDeleteMouseOut = (username) => {
|
||||
acctMgmtStore.changeIsDeleteHoveredByUser(username, false);
|
||||
acctMgmtStore.changeIsRowHoveredByUser(username, false);
|
||||
acctMgmtStore.changeIsDeleteHoveredByUser(username, false);
|
||||
acctMgmtStore.changeIsRowHoveredByUser(username, false);
|
||||
};
|
||||
|
||||
const handleRowMouseOver = (username) => {
|
||||
acctMgmtStore.changeIsRowHoveredByUser(username, true);
|
||||
acctMgmtStore.changeIsRowHoveredByUser(username, true);
|
||||
};
|
||||
|
||||
const handleRowMouseOut = (username) => {
|
||||
acctMgmtStore.changeIsRowHoveredByUser(username, false);
|
||||
acctMgmtStore.changeIsRowHoveredByUser(username, false);
|
||||
};
|
||||
|
||||
|
||||
const handleEditMouseOver = (username) => {
|
||||
acctMgmtStore.changeIsEditHoveredByUser(username, true);
|
||||
acctMgmtStore.changeIsEditHoveredByUser(username, true);
|
||||
};
|
||||
|
||||
const handleEditMouseOut = (username) => {
|
||||
acctMgmtStore.changeIsEditHoveredByUser(username, false);
|
||||
acctMgmtStore.changeIsRowHoveredByUser(username, false);
|
||||
acctMgmtStore.changeIsEditHoveredByUser(username, false);
|
||||
acctMgmtStore.changeIsRowHoveredByUser(username, false);
|
||||
};
|
||||
|
||||
const handleDetailMouseOver = (username) => {
|
||||
acctMgmtStore.changeIsDetailHoveredByUser(username, true);
|
||||
acctMgmtStore.changeIsDetailHoveredByUser(username, true);
|
||||
};
|
||||
|
||||
const handleDetailMouseOut = (username) => {
|
||||
acctMgmtStore.changeIsDetailHoveredByUser(username, false);
|
||||
acctMgmtStore.changeIsRowHoveredByUser(username, false);
|
||||
acctMgmtStore.changeIsDetailHoveredByUser(username, false);
|
||||
acctMgmtStore.changeIsRowHoveredByUser(username, false);
|
||||
};
|
||||
|
||||
const onEditButtonClick = userNameToEdit => {
|
||||
acctMgmtStore.setCurrentViewingUser(userNameToEdit);
|
||||
modalStore.openModal(MODAL_ACCT_EDIT);
|
||||
}
|
||||
const onEditButtonClick = (userNameToEdit) => {
|
||||
acctMgmtStore.setCurrentViewingUser(userNameToEdit);
|
||||
modalStore.openModal(MODAL_ACCT_EDIT);
|
||||
};
|
||||
|
||||
const onDeleteBtnClick = (usernameToDelete) => {
|
||||
acctMgmtStore.setCurrentViewingUser(usernameToDelete);
|
||||
modalStore.openModal(MODAL_DELETE);
|
||||
acctMgmtStore.setCurrentViewingUser(usernameToDelete);
|
||||
modalStore.openModal(MODAL_DELETE);
|
||||
};
|
||||
|
||||
const getRowClass = (curData) => {
|
||||
return curData?.isRowHovered ? 'bg-[#F1F5F9]' : '';
|
||||
return curData?.isRowHovered ? "bg-[#F1F5F9]" : "";
|
||||
};
|
||||
|
||||
const onDetailBtnClick = (dataKey) => {
|
||||
acctMgmtStore.setCurrentViewingUser(dataKey);
|
||||
modalStore.openModal(MODAL_ACCT_INFO);
|
||||
acctMgmtStore.setCurrentViewingUser(dataKey);
|
||||
modalStore.openModal(MODAL_ACCT_INFO);
|
||||
};
|
||||
|
||||
watch(shouldUpdateList, async(newShouldUpdateList) => {
|
||||
if (newShouldUpdateList) {
|
||||
await acctMgmtStore.getAllUserAccounts();
|
||||
moveJustCreateUserToFirstRow();
|
||||
}
|
||||
acctMgmtStore.setShouldUpdateList(false);
|
||||
watch(shouldUpdateList, async (newShouldUpdateList) => {
|
||||
if (newShouldUpdateList) {
|
||||
await acctMgmtStore.getAllUserAccounts();
|
||||
moveJustCreateUserToFirstRow();
|
||||
}
|
||||
acctMgmtStore.setShouldUpdateList(false);
|
||||
});
|
||||
|
||||
const onSearchAccountButtonClick = (inputQueryString) => {
|
||||
inputQuery.value = inputQueryString;
|
||||
inputQuery.value = inputQueryString;
|
||||
};
|
||||
|
||||
const setIsActiveInput = async(userData, inputIsActiveToSet) => {
|
||||
const userDataToReplace = {
|
||||
username: userData.username,
|
||||
name: userData.name,
|
||||
is_active: inputIsActiveToSet,
|
||||
};
|
||||
await acctMgmtStore.editAccount(userData.username, userDataToReplace);
|
||||
acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
|
||||
toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||
}
|
||||
const setIsActiveInput = async (userData, inputIsActiveToSet) => {
|
||||
const userDataToReplace = {
|
||||
username: userData.username,
|
||||
name: userData.name,
|
||||
is_active: inputIsActiveToSet,
|
||||
};
|
||||
await acctMgmtStore.editAccount(userData.username, userDataToReplace);
|
||||
acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
|
||||
toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||
};
|
||||
|
||||
const onAdminInputClick = async(userData, inputIsAdminOn) => {
|
||||
const ADMIN_ROLE_NAME = 'admin';
|
||||
switch(inputIsAdminOn) {
|
||||
case true:
|
||||
await acctMgmtStore.addRoleToUser(userData.username, ADMIN_ROLE_NAME);
|
||||
break;
|
||||
case false:
|
||||
await acctMgmtStore.deleteRoleToUser(userData.username, ADMIN_ROLE_NAME);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
const userDataToReplace = {
|
||||
username: userData.username,
|
||||
name: userData.name,
|
||||
is_admin: inputIsAdminOn,
|
||||
};
|
||||
const onAdminInputClick = async (userData, inputIsAdminOn) => {
|
||||
const ADMIN_ROLE_NAME = "admin";
|
||||
switch (inputIsAdminOn) {
|
||||
case true:
|
||||
await acctMgmtStore.addRoleToUser(userData.username, ADMIN_ROLE_NAME);
|
||||
break;
|
||||
case false:
|
||||
await acctMgmtStore.deleteRoleToUser(userData.username, ADMIN_ROLE_NAME);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
const userDataToReplace = {
|
||||
username: userData.username,
|
||||
name: userData.name,
|
||||
is_admin: inputIsAdminOn,
|
||||
};
|
||||
|
||||
acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
|
||||
toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||
}
|
||||
acctMgmtStore.updateSingleAccountPiniaState(userDataToReplace);
|
||||
toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||
};
|
||||
|
||||
/**
|
||||
* Loads more account data when the user scrolls near the bottom.
|
||||
* @param {Event} event - The scroll event from the data grid.
|
||||
*/
|
||||
const handleScroll = (event) => {
|
||||
const container = event.target;
|
||||
const smallValue = 3;
|
||||
const container = event.target;
|
||||
const smallValue = 3;
|
||||
|
||||
const isOverScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight - smallValue;
|
||||
if(isOverScrollHeight){
|
||||
fetchMoreDataVue3();
|
||||
}
|
||||
const isOverScrollHeight =
|
||||
container.scrollTop + container.clientHeight >=
|
||||
container.scrollHeight - smallValue;
|
||||
if (isOverScrollHeight) {
|
||||
fetchMoreDataVue3();
|
||||
}
|
||||
};
|
||||
|
||||
const fetchMoreDataVue3 = () => {
|
||||
if(infiniteAcctData.value.length < acctMgmtStore.allUserAccountList.length) {
|
||||
infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
|
||||
}
|
||||
if (infiniteAcctData.value.length < acctMgmtStore.allUserAccountList.length) {
|
||||
infiniteStart.value += ONCE_RENDER_NUM_OF_DATA;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
loadingStore.setIsLoading(false);
|
||||
await fetchLoginUserData();
|
||||
await acctMgmtStore.getAllUserAccounts();
|
||||
loadingStore.setIsLoading(false);
|
||||
await fetchLoginUserData();
|
||||
await acctMgmtStore.getAllUserAccounts();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
/* Center column text so that radio buttons are also centered */
|
||||
.header-center .p-column-header-content{
|
||||
justify-content: center;
|
||||
.header-center .p-column-header-content {
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,184 +1,305 @@
|
||||
<template>
|
||||
<div id="modal_account_edit_or_create_new" class="w-[640px] bg-[#FFFFFF] rounded
|
||||
shadow-lg flex flex-col">
|
||||
<ModalHeader :headerText="modalTitle"/>
|
||||
<div
|
||||
id="modal_account_edit_or_create_new"
|
||||
class="w-[640px] bg-[#FFFFFF] rounded shadow-lg flex flex-col"
|
||||
>
|
||||
<ModalHeader :headerText="modalTitle" />
|
||||
|
||||
<main class="flex row min-h-[96px] my-[32px] flex-col px-6">
|
||||
<div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
|
||||
justify-between">
|
||||
<div class="field-label text-sm flex items-center font-medium justify-end">
|
||||
<span class="align-right-span flex w-[122px] justify-end">
|
||||
{{ i18next.t("AcctMgmt.Account") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-and-error flex flex-col">
|
||||
<input id="input_account_field"
|
||||
class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
|
||||
v-model="inputUserAccount"
|
||||
:class="{
|
||||
'text-[#000000]': isAccountUnique,
|
||||
'text-[#FF3366]': !isAccountUnique,
|
||||
'border-[#FF3366]': !isAccountUnique,
|
||||
}"
|
||||
:readonly="!isEditable" autocomplete="off"
|
||||
@dblclick="onInputDoubleClick"
|
||||
/>
|
||||
<div v-show="!isAccountUnique" class="error-wrapper my-2">
|
||||
<div class="error-msg-section flex justify-start">
|
||||
<img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
|
||||
{{ i18next.t("AcctMgmt.AccountNotUnique") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<main class="flex row min-h-[96px] my-[32px] flex-col px-6">
|
||||
<div
|
||||
class="input-row w-full flex py-2 h-[40px] mb-4 items-center justify-between"
|
||||
>
|
||||
<div
|
||||
class="field-label text-sm flex items-center font-medium justify-end"
|
||||
>
|
||||
<span class="align-right-span flex w-[122px] justify-end">
|
||||
{{ i18next.t("AcctMgmt.Account") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-and-error flex flex-col">
|
||||
<input
|
||||
id="input_account_field"
|
||||
class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
|
||||
v-model="inputUserAccount"
|
||||
:class="{
|
||||
'text-[#000000]': isAccountUnique,
|
||||
'text-[#FF3366]': !isAccountUnique,
|
||||
'border-[#FF3366]': !isAccountUnique,
|
||||
}"
|
||||
:readonly="!isEditable"
|
||||
autocomplete="off"
|
||||
@dblclick="onInputDoubleClick"
|
||||
/>
|
||||
<div v-show="!isAccountUnique" class="error-wrapper my-2">
|
||||
<div class="error-msg-section flex justify-start">
|
||||
<img
|
||||
src="@/assets/icon-alert.svg"
|
||||
alt="!"
|
||||
class="exclamation-img flex mr-2"
|
||||
/>
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
|
||||
{{ i18next.t("AcctMgmt.AccountNotUnique") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-row w-full flex py-2 h-[40px] mb-4 items-center
|
||||
justify-between">
|
||||
<div class="field-label text-sm flex items-center font-medium justify-end">
|
||||
<span class="align-right-span flex w-[122px] justify-end">
|
||||
{{ i18next.t("AcctMgmt.FullName") }}
|
||||
</span>
|
||||
</div>
|
||||
<input id="input_name_field"
|
||||
class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
|
||||
v-model="inputName" :readonly="!isEditable" @dblclick="onInputDoubleClick" @focus="onInputNameFocus"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div v-show="!isSSO" class="input-row w-full flex py-2 mb-4 items-center
|
||||
justify-between">
|
||||
<div class="field-label text-sm flex flex-col items-start font-medium justify-end"
|
||||
:class="{
|
||||
'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,
|
||||
}"
|
||||
> <!-- Layout of Password field changes depending on whether this is the create or edit modal -->
|
||||
<span class="align-right-span flex h-full w-[122px] justify-end"
|
||||
:class="{
|
||||
'pt-[12px]': whichCurrentModal !== MODAL_CREATE_NEW,
|
||||
'text-top': whichCurrentModal !== MODAL_CREATE_NEW,
|
||||
'h-[40px]': whichCurrentModal === MODAL_CREATE_NEW,
|
||||
'items-center': whichCurrentModal === MODAL_CREATE_NEW,
|
||||
}">
|
||||
{{ i18next.t("AcctMgmt.Password") }}
|
||||
</span>
|
||||
<span v-if="whichCurrentModal === MODAL_CREATE_NEW" class="dummy-cell
|
||||
flex w-[122px] h-[40px]">
|
||||
</span>
|
||||
</div>
|
||||
<div class="reset-btn-and-input-pwd-and-error flex flex-col"
|
||||
:class="{'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,}"
|
||||
>
|
||||
<div v-if="whichCurrentModal !== MODAL_CREATE_NEW" class="flex account-edit-section justify-start w-[454px]">
|
||||
<button class="flex w-[85px] h-[40px] reset-btn rounded-full border-[1px] border-[#666666] cursor-pointer
|
||||
items-center justify-center hover:text-[#0099FF] hover:border-[#0099FF] mb-[20px]"
|
||||
@click="onResetPwdButtonClick"
|
||||
>
|
||||
{{ i18next.t("AcctMgmt.Reset") }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="whichCurrentModal === MODAL_CREATE_NEW || isResetPwdSectionShow"
|
||||
class="w-[454px] flex flex-col input-and-error-msg">
|
||||
<div class="input-and-eye flex items-center w-full h-[40px] relative border-[1px] rounded"
|
||||
:class="{'border-[#FF3366]': !isPwdLengthValid, 'border-[#64748B]': isPwdLengthValid,}"
|
||||
>
|
||||
<input id="input_first_pwd" class="outline-none p-1 w-[352px]" :type="isPwdEyeOn ? 'text' : 'password'"
|
||||
v-model="inputPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"
|
||||
autocomplete="off" :class="{'color-[#FF3366]': !isPwdLengthValid, 'color-[#64748B]': isPwdLengthValid,}"/>
|
||||
<img id='eye_button' v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
|
||||
@mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt=""/>
|
||||
<img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer"
|
||||
@mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt="eye"/>
|
||||
</div>
|
||||
<div class="error-msg-section flex justify-start mt-4">
|
||||
<img v-show="!isPwdLengthValid" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
|
||||
{{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="false" id="confirm_pwd_row" class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4
|
||||
mb-4 flex items-center"> <!-- 2-by-2 grid; the bottom-left cell is a dummy cell with no content -->
|
||||
<span v-show="false" class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
|
||||
:class="{
|
||||
'text-[#000000]': isPwdMatched,
|
||||
'text-[#FF3366]': !isPwdMatched,
|
||||
}">
|
||||
{{ i18next.t("AcctMgmt.ConfirmPassword") }}
|
||||
</span>
|
||||
|
||||
<div v-show="false" class="input-and-toggle-btn w-[454px] flex flex-row rounded border border-[1px] relative items-center
|
||||
h-[40px] mb-4"
|
||||
:class="{
|
||||
'border-[#000000]': isPwdMatched,
|
||||
'border-[#FF3366]': !isPwdMatched,
|
||||
}">
|
||||
<input v-show="false" id="input_second_pwd" class="outline-none p-1 w-[352px]" :type="isPwdConfirmEyeOn ? 'text' : 'password'"
|
||||
v-model="inputConfirmPwd" :readonly="!isEditable" @dblclick="onInputDoubleClick"
|
||||
:class="{
|
||||
'text-[#000000]': isPwdMatched,
|
||||
'text-[#FF3366]': !isPwdMatched,
|
||||
}" autocomplete="off"/>
|
||||
<img v-if="isPwdConfirmEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
|
||||
@click="togglePwdConfirmEyeBtn" alt="eye"/>
|
||||
<img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer" @click="togglePwdConfirmEyeBtn" alt="eye"/>
|
||||
</div>
|
||||
<div class="dummy-grid h-[24px]"></div> <!-- Use dummy-grid to maintain the height -->
|
||||
<div class="error-msg-section flex justify-start">
|
||||
<img v-show="!isPwdMatched" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
|
||||
{{ isPwdMatched ? "" : i18next.t("AcctMgmt.PwdNotMatch") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="dummy-grid h-[24px]"></div> <!-- Use dummy-grid to maintain the height -->
|
||||
<div class="error-msg-section flex justify-start">
|
||||
<img v-show="!isPwdLengthValid" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
|
||||
{{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="whichCurrentModal === MODAL_CREATE_NEW" class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center">
|
||||
<div class="dummy field-label flex items-center w-[122px]">
|
||||
</div> <!-- A dummy field is also used here to maintain spacing -->
|
||||
<section id="account_create_checkboxes_section" class="flex flex-col">
|
||||
<div class="checkbox-and-text flex">
|
||||
<IconChecked :isChecked="isSetAsAdminChecked" @click="toggleIsAdmin"/>
|
||||
<span class="flex checkbox-text">
|
||||
{{ i18next.t("AcctMgmt.SetAsAdmin") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="checkbox-and-text flex">
|
||||
<IconChecked :isChecked="isSetActivedChecked" @click="toggleIsActivated"/>
|
||||
<span class="flex checkbox-text">
|
||||
{{ i18next.t("AcctMgmt.ActivateNow") }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="flex row footer justify-end pr-[32px] pb-8">
|
||||
<button class="cancel-btn rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B]
|
||||
flex justify-center items-center text-[#4E5969] font-medium
|
||||
hover:bg-[#64748B] hover:border-[#CBD5E1] hover:text-[#FFFFFF]"
|
||||
@click="onCancelBtnClick"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-row w-full flex py-2 h-[40px] mb-4 items-center justify-between"
|
||||
>
|
||||
<div
|
||||
class="field-label text-sm flex items-center font-medium justify-end"
|
||||
>
|
||||
<span class="align-right-span flex w-[122px] justify-end">
|
||||
{{ i18next.t("AcctMgmt.FullName") }}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
id="input_name_field"
|
||||
class="w-[454px] rounded p-1 border border-[1px] border-[#64748B] flex items-center h-[40px] outline-none"
|
||||
v-model="inputName"
|
||||
:readonly="!isEditable"
|
||||
@dblclick="onInputDoubleClick"
|
||||
@focus="onInputNameFocus"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-show="!isSSO"
|
||||
class="input-row w-full flex py-2 mb-4 items-center justify-between"
|
||||
>
|
||||
<div
|
||||
class="field-label text-sm flex flex-col items-start font-medium justify-end"
|
||||
:class="{
|
||||
'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW,
|
||||
}"
|
||||
>
|
||||
<!-- Layout of Password field changes depending on whether this is the create or edit modal -->
|
||||
<span
|
||||
class="align-right-span flex h-full w-[122px] justify-end"
|
||||
:class="{
|
||||
'pt-[12px]': whichCurrentModal !== MODAL_CREATE_NEW,
|
||||
'text-top': whichCurrentModal !== MODAL_CREATE_NEW,
|
||||
'h-[40px]': whichCurrentModal === MODAL_CREATE_NEW,
|
||||
'items-center': whichCurrentModal === MODAL_CREATE_NEW,
|
||||
}"
|
||||
>
|
||||
{{ i18next.t("AcctMgmt.Password") }}
|
||||
</span>
|
||||
<span
|
||||
v-if="whichCurrentModal === MODAL_CREATE_NEW"
|
||||
class="dummy-cell flex w-[122px] h-[40px]"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="reset-btn-and-input-pwd-and-error flex flex-col"
|
||||
:class="{ 'h-[100px]': whichCurrentModal !== MODAL_CREATE_NEW }"
|
||||
>
|
||||
<div
|
||||
v-if="whichCurrentModal !== MODAL_CREATE_NEW"
|
||||
class="flex account-edit-section justify-start w-[454px]"
|
||||
>
|
||||
<button
|
||||
class="flex w-[85px] h-[40px] reset-btn rounded-full border-[1px] border-[#666666] cursor-pointer items-center justify-center hover:text-[#0099FF] hover:border-[#0099FF] mb-[20px]"
|
||||
@click="onResetPwdButtonClick"
|
||||
>
|
||||
{{ i18next.t("Global.Cancel") }}
|
||||
{{ i18next.t("AcctMgmt.Reset") }}
|
||||
</button>
|
||||
<button class="confirm-btn rounded-full w-[92px] h-10 px-2.5 py-6
|
||||
flex justify-center items-center text-[#ffffff] font-medium ml-[16px]"
|
||||
@click="onConfirmBtnClick" :disabled="isConfirmDisabled"
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
whichCurrentModal === MODAL_CREATE_NEW || isResetPwdSectionShow
|
||||
"
|
||||
class="w-[454px] flex flex-col input-and-error-msg"
|
||||
>
|
||||
<div
|
||||
class="input-and-eye flex items-center w-full h-[40px] relative border-[1px] rounded"
|
||||
:class="{
|
||||
'border-[#FF3366]': !isPwdLengthValid,
|
||||
'border-[#64748B]': isPwdLengthValid,
|
||||
}"
|
||||
>
|
||||
<input
|
||||
id="input_first_pwd"
|
||||
class="outline-none p-1 w-[352px]"
|
||||
:type="isPwdEyeOn ? 'text' : 'password'"
|
||||
v-model="inputPwd"
|
||||
:readonly="!isEditable"
|
||||
@dblclick="onInputDoubleClick"
|
||||
autocomplete="off"
|
||||
:class="{
|
||||
'bg-[#0099FF]': !isConfirmDisabled,
|
||||
'bg-[#E2E8F0]': isConfirmDisabled,
|
||||
'color-[#FF3366]': !isPwdLengthValid,
|
||||
'color-[#64748B]': isPwdLengthValid,
|
||||
}"
|
||||
>
|
||||
{{ i18next.t("Global.Confirm") }}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
/>
|
||||
<img
|
||||
id="eye_button"
|
||||
v-if="isPwdEyeOn"
|
||||
src="@/assets/icon-eye-open.svg"
|
||||
class="absolute right-[8px] cursor-pointer"
|
||||
@mousedown="togglePwdEyeBtn(true)"
|
||||
@mouseup="togglePwdEyeBtn(false)"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/icon-eye-hide.svg"
|
||||
class="absolute right-[8px] cursor-pointer"
|
||||
@mousedown="togglePwdEyeBtn(true)"
|
||||
@mouseup="togglePwdEyeBtn(false)"
|
||||
alt="eye"
|
||||
/>
|
||||
</div>
|
||||
<div class="error-msg-section flex justify-start mt-4">
|
||||
<img
|
||||
v-show="!isPwdLengthValid"
|
||||
src="@/assets/icon-alert.svg"
|
||||
alt="!"
|
||||
class="exclamation-img flex mr-2"
|
||||
/>
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
|
||||
{{
|
||||
isPwdLengthValid
|
||||
? ""
|
||||
: i18next.t("AcctMgmt.PwdLengthNotEnough")
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-show="false"
|
||||
id="confirm_pwd_row"
|
||||
class="input-row w-full grid grid-cols-2 grid-cols-[122px_1fr] gap-x-4 mb-4 flex items-center"
|
||||
>
|
||||
<!-- 2-by-2 grid; the bottom-left cell is a dummy cell with no content -->
|
||||
<span
|
||||
v-show="false"
|
||||
class="field-label w-[122px] text-sm flex items-center justify-end text-right font-medium mr-4 whitespace-nowrap"
|
||||
:class="{
|
||||
'text-[#000000]': isPwdMatched,
|
||||
'text-[#FF3366]': !isPwdMatched,
|
||||
}"
|
||||
>
|
||||
{{ i18next.t("AcctMgmt.ConfirmPassword") }}
|
||||
</span>
|
||||
|
||||
<div
|
||||
v-show="false"
|
||||
class="input-and-toggle-btn w-[454px] flex flex-row rounded border border-[1px] relative items-center h-[40px] mb-4"
|
||||
:class="{
|
||||
'border-[#000000]': isPwdMatched,
|
||||
'border-[#FF3366]': !isPwdMatched,
|
||||
}"
|
||||
>
|
||||
<input
|
||||
v-show="false"
|
||||
id="input_second_pwd"
|
||||
class="outline-none p-1 w-[352px]"
|
||||
:type="isPwdConfirmEyeOn ? 'text' : 'password'"
|
||||
v-model="inputConfirmPwd"
|
||||
:readonly="!isEditable"
|
||||
@dblclick="onInputDoubleClick"
|
||||
:class="{
|
||||
'text-[#000000]': isPwdMatched,
|
||||
'text-[#FF3366]': !isPwdMatched,
|
||||
}"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<img
|
||||
v-if="isPwdConfirmEyeOn"
|
||||
src="@/assets/icon-eye-open.svg"
|
||||
class="absolute right-[8px] cursor-pointer"
|
||||
@click="togglePwdConfirmEyeBtn"
|
||||
alt="eye"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/icon-eye-hide.svg"
|
||||
class="absolute right-[8px] cursor-pointer"
|
||||
@click="togglePwdConfirmEyeBtn"
|
||||
alt="eye"
|
||||
/>
|
||||
</div>
|
||||
<div class="dummy-grid h-[24px]"></div>
|
||||
<!-- Use dummy-grid to maintain the height -->
|
||||
<div class="error-msg-section flex justify-start">
|
||||
<img
|
||||
v-show="!isPwdMatched"
|
||||
src="@/assets/icon-alert.svg"
|
||||
alt="!"
|
||||
class="exclamation-img flex mr-2"
|
||||
/>
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
|
||||
{{ isPwdMatched ? "" : i18next.t("AcctMgmt.PwdNotMatch") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="dummy-grid h-[24px]"></div>
|
||||
<!-- Use dummy-grid to maintain the height -->
|
||||
<div class="error-msg-section flex justify-start">
|
||||
<img
|
||||
v-show="!isPwdLengthValid"
|
||||
src="@/assets/icon-alert.svg"
|
||||
alt="!"
|
||||
class="exclamation-img flex mr-2"
|
||||
/>
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
|
||||
{{
|
||||
isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough")
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="whichCurrentModal === MODAL_CREATE_NEW"
|
||||
class="checkbox-row w-full grid-cols-[122px_1fr] gap-x-4 flex py-2 h-[40px] my-4 items-center"
|
||||
>
|
||||
<div class="dummy field-label flex items-center w-[122px]"></div>
|
||||
<!-- A dummy field is also used here to maintain spacing -->
|
||||
<section id="account_create_checkboxes_section" class="flex flex-col">
|
||||
<div class="checkbox-and-text flex">
|
||||
<IconChecked
|
||||
:isChecked="isSetAsAdminChecked"
|
||||
@click="toggleIsAdmin"
|
||||
/>
|
||||
<span class="flex checkbox-text">
|
||||
{{ i18next.t("AcctMgmt.SetAsAdmin") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="checkbox-and-text flex">
|
||||
<IconChecked
|
||||
:isChecked="isSetActivedChecked"
|
||||
@click="toggleIsActivated"
|
||||
/>
|
||||
<span class="flex checkbox-text">
|
||||
{{ i18next.t("AcctMgmt.ActivateNow") }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="flex row footer justify-end pr-[32px] pb-8">
|
||||
<button
|
||||
class="cancel-btn rounded-full w-[92px] h-10 px-2.5 py-6 border border-[1px] border-[#64748B] flex justify-center items-center text-[#4E5969] font-medium hover:bg-[#64748B] hover:border-[#CBD5E1] hover:text-[#FFFFFF]"
|
||||
@click="onCancelBtnClick"
|
||||
>
|
||||
{{ i18next.t("Global.Cancel") }}
|
||||
</button>
|
||||
<button
|
||||
class="confirm-btn rounded-full w-[92px] h-10 px-2.5 py-6 flex justify-center items-center text-[#ffffff] font-medium ml-[16px]"
|
||||
@click="onConfirmBtnClick"
|
||||
:disabled="isConfirmDisabled"
|
||||
:class="{
|
||||
'bg-[#0099FF]': !isConfirmDisabled,
|
||||
'bg-[#E2E8F0]': isConfirmDisabled,
|
||||
}"
|
||||
>
|
||||
{{ i18next.t("Global.Confirm") }}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -192,15 +313,19 @@
|
||||
* username, name, password fields and validation.
|
||||
*/
|
||||
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { computed, ref, watch } from "vue";
|
||||
import i18next from "@/i18n/i18n.js";
|
||||
import { useModalStore } from '@/stores/modal';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useToast } from 'vue-toast-notification';
|
||||
import { useAcctMgmtStore } from '@/stores/acctMgmt';
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useToast } from "vue-toast-notification";
|
||||
import { useAcctMgmtStore } from "@/stores/acctMgmt";
|
||||
import ModalHeader from "./ModalHeader.vue";
|
||||
import IconChecked from "@/components/icons/IconChecked.vue";
|
||||
import { MODAL_CREATE_NEW, MODAL_ACCT_EDIT, PWD_VALID_LENGTH } from '@/constants/constants.js';
|
||||
import {
|
||||
MODAL_CREATE_NEW,
|
||||
MODAL_ACCT_EDIT,
|
||||
PWD_VALID_LENGTH,
|
||||
} from "@/constants/constants.js";
|
||||
|
||||
const acctMgmtStore = useAcctMgmtStore();
|
||||
const modalStore = useModalStore();
|
||||
@@ -223,157 +348,170 @@ const isSSO = computed(() => acctMgmtStore.currentViewingUser.is_sso);
|
||||
const username = computed(() => acctMgmtStore.currentViewingUser.username);
|
||||
const name = computed(() => acctMgmtStore.currentViewingUser.name);
|
||||
|
||||
const inputUserAccount = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.username);
|
||||
const inputName = ref(whichCurrentModal.value === MODAL_CREATE_NEW ? '' : currentViewingUser.value.name);
|
||||
const inputUserAccount = ref(
|
||||
whichCurrentModal.value === MODAL_CREATE_NEW
|
||||
? ""
|
||||
: currentViewingUser.value.username,
|
||||
);
|
||||
const inputName = ref(
|
||||
whichCurrentModal.value === MODAL_CREATE_NEW
|
||||
? ""
|
||||
: currentViewingUser.value.name,
|
||||
);
|
||||
const inputPwd = ref("");
|
||||
const isAccountUnique = ref(true);
|
||||
const isEditable = ref(true);
|
||||
|
||||
// Since adding this watch, filling in the password field no longer clears the account or full name fields.
|
||||
watch(whichCurrentModal, (newVal) => {
|
||||
if (newVal === MODAL_CREATE_NEW) {
|
||||
inputUserAccount.value = '';
|
||||
inputName.value = '';
|
||||
} else {
|
||||
inputUserAccount.value = currentViewingUser.value.username;
|
||||
inputName.value = currentViewingUser.value.name;
|
||||
}
|
||||
if (newVal === MODAL_CREATE_NEW) {
|
||||
inputUserAccount.value = "";
|
||||
inputName.value = "";
|
||||
} else {
|
||||
inputUserAccount.value = currentViewingUser.value.username;
|
||||
inputName.value = currentViewingUser.value.name;
|
||||
}
|
||||
});
|
||||
|
||||
const modalTitle = computed(() => {
|
||||
return modalStore.whichModal === MODAL_CREATE_NEW ? i18next.t('AcctMgmt.CreateNew') : i18next.t('AcctMgmt.AccountEdit');
|
||||
return modalStore.whichModal === MODAL_CREATE_NEW
|
||||
? i18next.t("AcctMgmt.CreateNew")
|
||||
: i18next.t("AcctMgmt.AccountEdit");
|
||||
});
|
||||
|
||||
const togglePwdEyeBtn = (toBeOpen) => {
|
||||
isPwdEyeOn.value = toBeOpen;
|
||||
isPwdEyeOn.value = toBeOpen;
|
||||
};
|
||||
|
||||
const validatePwdLength = () => {
|
||||
isPwdLengthValid.value = !isResetPwdSectionShow.value || inputPwd.value.length >= PWD_VALID_LENGTH;
|
||||
}
|
||||
isPwdLengthValid.value =
|
||||
!isResetPwdSectionShow.value || inputPwd.value.length >= PWD_VALID_LENGTH;
|
||||
};
|
||||
|
||||
const onInputDoubleClick = () => {
|
||||
// Enable edit mode
|
||||
isEditable.value = true;
|
||||
}
|
||||
// Enable edit mode
|
||||
isEditable.value = true;
|
||||
};
|
||||
|
||||
const onConfirmBtnClick = async () => {
|
||||
// rule for minimum length
|
||||
validatePwdLength();
|
||||
if(!isPwdLengthValid.value) {
|
||||
// rule for minimum length
|
||||
validatePwdLength();
|
||||
if (!isPwdLengthValid.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
// rule for account uniqueness
|
||||
switch (whichCurrentModal.value) {
|
||||
case MODAL_CREATE_NEW:
|
||||
await checkAccountIsUnique();
|
||||
if (!isAccountUnique.value) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
await acctMgmtStore.createNewAccount({
|
||||
username: inputUserAccount.value,
|
||||
password: inputPwd.value === undefined ? "" : inputPwd.value,
|
||||
name: inputName.value,
|
||||
is_admin: isSetAsAdminChecked.value,
|
||||
is_active: isSetActivedChecked.value,
|
||||
});
|
||||
await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
|
||||
await modalStore.closeModal();
|
||||
acctMgmtStore.setShouldUpdateList(true);
|
||||
await router.push("/account-admin");
|
||||
break;
|
||||
case MODAL_ACCT_EDIT:
|
||||
await checkAccountIsUnique();
|
||||
if (!isAccountUnique.value) {
|
||||
return;
|
||||
}
|
||||
// Note that the old username and new username can be different
|
||||
// Distinguish between cases with and without a password
|
||||
if (isResetPwdSectionShow.value) {
|
||||
await acctMgmtStore.editAccount(currentViewingUser.value.username, {
|
||||
newUsername: inputUserAccount.value,
|
||||
password: inputPwd.value,
|
||||
name: inputName.value === undefined ? "" : inputName.value,
|
||||
is_active: true,
|
||||
});
|
||||
} else {
|
||||
await acctMgmtStore.editAccount(currentViewingUser.value.username, {
|
||||
newUsername: inputUserAccount.value,
|
||||
name: inputName.value === undefined ? "" : inputName.value,
|
||||
is_active: true,
|
||||
});
|
||||
}
|
||||
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||
isEditable.value = false;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// rule for account uniqueness
|
||||
switch(whichCurrentModal.value) {
|
||||
case MODAL_CREATE_NEW:
|
||||
await checkAccountIsUnique();
|
||||
if(!isAccountUnique.value) {
|
||||
return;
|
||||
}
|
||||
await acctMgmtStore.createNewAccount({
|
||||
username: inputUserAccount.value,
|
||||
password: inputPwd.value === undefined ? '' : inputPwd.value,
|
||||
name: inputName.value,
|
||||
is_admin: isSetAsAdminChecked.value,
|
||||
is_active: isSetActivedChecked.value,
|
||||
});
|
||||
await toast.success(i18next.t("AcctMgmt.MsgAccountAdded"));
|
||||
await modalStore.closeModal();
|
||||
acctMgmtStore.setShouldUpdateList(true);
|
||||
await router.push('/account-admin');
|
||||
break;
|
||||
case MODAL_ACCT_EDIT:
|
||||
await checkAccountIsUnique();
|
||||
if(!isAccountUnique.value) {
|
||||
return;
|
||||
}
|
||||
// Note that the old username and new username can be different
|
||||
// Distinguish between cases with and without a password
|
||||
if(isResetPwdSectionShow.value) {
|
||||
await acctMgmtStore.editAccount(
|
||||
currentViewingUser.value.username, {
|
||||
newUsername: inputUserAccount.value,
|
||||
password: inputPwd.value,
|
||||
name: inputName.value === undefined ? '' : inputName.value,
|
||||
is_active: true,
|
||||
});
|
||||
} else {
|
||||
await acctMgmtStore.editAccount(
|
||||
currentViewingUser.value.username, {
|
||||
newUsername: inputUserAccount.value,
|
||||
name: inputName.value === undefined ? '' : inputName.value,
|
||||
is_active: true,
|
||||
});
|
||||
}
|
||||
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||
isEditable.value = false;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const checkAccountIsUnique = async() => {
|
||||
// If the user has not modified the field, no backend API call is needed
|
||||
if(inputUserAccount.value === username.value) {
|
||||
return true;
|
||||
}
|
||||
const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(inputUserAccount.value);
|
||||
isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
|
||||
return isAccountUnique.value;
|
||||
const checkAccountIsUnique = async () => {
|
||||
// If the user has not modified the field, no backend API call is needed
|
||||
if (inputUserAccount.value === username.value) {
|
||||
return true;
|
||||
}
|
||||
const isAccountAlreadyExistAPISuccess = await acctMgmtStore.getUserDetail(
|
||||
inputUserAccount.value,
|
||||
);
|
||||
isAccountUnique.value = !isAccountAlreadyExistAPISuccess;
|
||||
return isAccountUnique.value;
|
||||
};
|
||||
|
||||
const toggleIsAdmin = () => {
|
||||
if(isEditable){
|
||||
isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
|
||||
}
|
||||
}
|
||||
if (isEditable.value) {
|
||||
isSetAsAdminChecked.value = !isSetAsAdminChecked.value;
|
||||
}
|
||||
};
|
||||
|
||||
const toggleIsActivated = () => {
|
||||
if(isEditable){
|
||||
isSetActivedChecked.value = !isSetActivedChecked.value;
|
||||
}
|
||||
}
|
||||
if (isEditable.value) {
|
||||
isSetActivedChecked.value = !isSetActivedChecked.value;
|
||||
}
|
||||
};
|
||||
|
||||
const onInputNameFocus = () => {
|
||||
if(isConfirmDisabled.value){
|
||||
isConfirmDisabled.value = false;
|
||||
}
|
||||
}
|
||||
if (isConfirmDisabled.value) {
|
||||
isConfirmDisabled.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onResetPwdButtonClick = () => {
|
||||
isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
|
||||
// Must clear the password input field
|
||||
inputPwd.value = '';
|
||||
}
|
||||
isResetPwdSectionShow.value = !isResetPwdSectionShow.value;
|
||||
// Must clear the password input field
|
||||
inputPwd.value = "";
|
||||
};
|
||||
|
||||
watch(
|
||||
[inputPwd, inputUserAccount, inputName],
|
||||
([newPwd, newAccount, newName]) => {
|
||||
// Enable the confirm button when all fields are non-empty
|
||||
if(newAccount.length > 0 && newName.length > 0) {
|
||||
isConfirmDisabled.value = false;
|
||||
}
|
||||
if(whichCurrentModal.value !== MODAL_CREATE_NEW) {
|
||||
if(isResetPwdSectionShow.value && newPwd.length < PWD_VALID_LENGTH) {
|
||||
isConfirmDisabled.value = true;
|
||||
}
|
||||
}else {
|
||||
if(newPwd.length < PWD_VALID_LENGTH) {
|
||||
isConfirmDisabled.value = true;
|
||||
}
|
||||
}
|
||||
[inputPwd, inputUserAccount, inputName],
|
||||
([newPwd, newAccount, newName]) => {
|
||||
// Enable the confirm button when all fields are non-empty
|
||||
if (newAccount.length > 0 && newName.length > 0) {
|
||||
isConfirmDisabled.value = false;
|
||||
}
|
||||
if (whichCurrentModal.value !== MODAL_CREATE_NEW) {
|
||||
if (isResetPwdSectionShow.value && newPwd.length < PWD_VALID_LENGTH) {
|
||||
isConfirmDisabled.value = true;
|
||||
}
|
||||
} else {
|
||||
if (newPwd.length < PWD_VALID_LENGTH) {
|
||||
isConfirmDisabled.value = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function onCancelBtnClick(){
|
||||
modalStore.closeModal();
|
||||
function onCancelBtnClick() {
|
||||
modalStore.closeModal();
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#modal_account_edit {
|
||||
background-color: #ffffff;
|
||||
backdrop-filter: opacity(1); /* Prevent child elements from inheriting parent's opacity */
|
||||
background-color: #ffffff;
|
||||
backdrop-filter: opacity(
|
||||
1
|
||||
); /* Prevent child elements from inheriting parent's opacity */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,25 +1,38 @@
|
||||
<template>
|
||||
<div id="modal_account_edit" class="w-[600px] h-[536px] bg-[#FFFFFF] rounded
|
||||
shadow-lg flex flex-col">
|
||||
<ModalHeader :headerText='i18next.t("AcctMgmt.AccountInformation")'/>
|
||||
<main class="flex main-part flex-col px-6 mt-6">
|
||||
<h1 id="acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">{{ name }}</h1>
|
||||
<div class="status-container">
|
||||
<Badge displayText="Admin" :isActivated="is_admin"/>
|
||||
<Badge displayText="Suspended" :isActivated="!is_active"/>
|
||||
</div>
|
||||
<div id="account_visit_info" class="border-b border-b-[#CBD5E1] border-b-[1px] pb-4">
|
||||
Account: <span class="text-[#0099FF]">{{ username }}</span>, total visits <span class="text-[#0099FF]">
|
||||
{{ visitTime }}
|
||||
</span> times.
|
||||
</div>
|
||||
</main>
|
||||
<main class="flex main-part flex-col px-6 py-4">
|
||||
<ul class="leading-[21px] list-disc list-inside">
|
||||
<li>[2023-01-01 08:30:25] Account created by</li>
|
||||
</ul>
|
||||
</main>
|
||||
</div>
|
||||
<div
|
||||
id="modal_account_edit"
|
||||
class="w-[600px] h-[536px] bg-[#FFFFFF] rounded shadow-lg flex flex-col"
|
||||
>
|
||||
<ModalHeader :headerText="i18next.t('AcctMgmt.AccountInformation')" />
|
||||
<main class="flex main-part flex-col px-6 mt-6">
|
||||
<h1
|
||||
id="acct_info_user_name"
|
||||
class="text-[32px] leading-[64px] font-medium mb-2"
|
||||
>
|
||||
{{ name }}
|
||||
</h1>
|
||||
<div class="status-container">
|
||||
<Badge displayText="Admin" :isActivated="is_admin" />
|
||||
<Badge displayText="Suspended" :isActivated="!is_active" />
|
||||
</div>
|
||||
<div
|
||||
id="account_visit_info"
|
||||
class="border-b border-b-[#CBD5E1] border-b-[1px] pb-4"
|
||||
>
|
||||
Account: <span class="text-[#0099FF]">{{ username }}</span
|
||||
>, total visits
|
||||
<span class="text-[#0099FF]">
|
||||
{{ visitTime }}
|
||||
</span>
|
||||
times.
|
||||
</div>
|
||||
</main>
|
||||
<main class="flex main-part flex-col px-6 py-4">
|
||||
<ul class="leading-[21px] list-disc list-inside">
|
||||
<li>[2023-01-01 08:30:25] Account created by</li>
|
||||
</ul>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -34,24 +47,19 @@
|
||||
* status badges, and visit count.
|
||||
*/
|
||||
|
||||
import { onBeforeMount, computed, ref } from 'vue';
|
||||
import i18next from '@/i18n/i18n.js';
|
||||
import { useAcctMgmtStore } from '@/stores/acctMgmt';
|
||||
import ModalHeader from './ModalHeader.vue';
|
||||
import Badge from '../../components/Badge.vue';
|
||||
import { onBeforeMount, computed, ref } from "vue";
|
||||
import i18next from "@/i18n/i18n.js";
|
||||
import { useAcctMgmtStore } from "@/stores/acctMgmt";
|
||||
import ModalHeader from "./ModalHeader.vue";
|
||||
import Badge from "../../components/Badge.vue";
|
||||
|
||||
const acctMgmtStore = useAcctMgmtStore();
|
||||
const visitTime = ref(0);
|
||||
const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
|
||||
const {
|
||||
username,
|
||||
name,
|
||||
is_admin,
|
||||
is_active,
|
||||
} = currentViewingUser.value;
|
||||
const { username, name, is_admin, is_active } = currentViewingUser.value;
|
||||
|
||||
onBeforeMount(async() => {
|
||||
await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
|
||||
visitTime.value = currentViewingUser.value.detail.visits;
|
||||
onBeforeMount(async () => {
|
||||
await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
|
||||
visitTime.value = currentViewingUser.value.detail.visits;
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,45 +1,49 @@
|
||||
<template>
|
||||
<div id="modal_container" v-if="modalStore.isModalOpen" class="fixed w-screen h-screen bg-gray-800
|
||||
flex justify-center items-center">
|
||||
|
||||
<div class="flex">
|
||||
<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>
|
||||
<div
|
||||
id="modal_container"
|
||||
v-if="modalStore.isModalOpen"
|
||||
class="fixed w-screen h-screen bg-gray-800 flex justify-center items-center"
|
||||
>
|
||||
<div class="flex">
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup>
|
||||
// The Lucia project.
|
||||
// Copyright 2024-2026 DSP, inc. All rights reserved.
|
||||
// Authors:
|
||||
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
||||
// imacat.yang@dsp.im (imacat), 2023/9/23
|
||||
/**
|
||||
* @module views/AccountManagement/ModalContainer Container
|
||||
* that renders the appropriate account management modal
|
||||
* based on the current modal type.
|
||||
*/
|
||||
/**
|
||||
* @module views/AccountManagement/ModalContainer Container
|
||||
* that renders the appropriate account management modal
|
||||
* based on the current modal type.
|
||||
*/
|
||||
|
||||
import { computed } from 'vue';
|
||||
import { useModalStore } from '@/stores/modal';
|
||||
import ModalAccountEditCreate from './ModalAccountEditCreate.vue';
|
||||
import ModalAccountInfo from './ModalAccountInfo.vue';
|
||||
import ModalDeleteAlert from './ModalDeleteAlert.vue';
|
||||
import {
|
||||
MODAL_CREATE_NEW,
|
||||
MODAL_ACCT_EDIT,
|
||||
MODAL_ACCT_INFO,
|
||||
MODAL_DELETE,
|
||||
} from "@/constants/constants.js";
|
||||
import { computed } from "vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import ModalAccountEditCreate from "./ModalAccountEditCreate.vue";
|
||||
import ModalAccountInfo from "./ModalAccountInfo.vue";
|
||||
import ModalDeleteAlert from "./ModalDeleteAlert.vue";
|
||||
import {
|
||||
MODAL_CREATE_NEW,
|
||||
MODAL_ACCT_EDIT,
|
||||
MODAL_ACCT_INFO,
|
||||
MODAL_DELETE,
|
||||
} from "@/constants/constants.js";
|
||||
|
||||
const modalStore = useModalStore();
|
||||
const whichModal = computed(() => modalStore.whichModal);
|
||||
</script>
|
||||
const modalStore = useModalStore();
|
||||
const whichModal = computed(() => modalStore.whichModal);
|
||||
</script>
|
||||
<style>
|
||||
#modal_container {
|
||||
z-index: 9999;
|
||||
background-color: rgba(254,254,254, 0.8);
|
||||
z-index: 9999;
|
||||
background-color: rgba(254, 254, 254, 0.8);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,30 +1,49 @@
|
||||
<template>
|
||||
<div id="modal_delete_acct_alert" class="flex shadow-lg rounded-lg w-[564px] flex-col bg-[#ffffff]">
|
||||
<div class="flex decoration-bar bg-[#FF3366] h-2 rounded-t"></div>
|
||||
<main id="delete_acct_modal_main" class="flex flex-col items-center justify-center">
|
||||
<img src="@/assets/icon-large-exclamation.svg" alt="!" class="flex mt-[36px]">
|
||||
<h1 class="flex mt-4 text-xl font-medium">{{ i18next.t("AcctMgmt.DelteQuestion").toUpperCase() }}</h1>
|
||||
<div class="clauses flex flex-col mt-4 mb-8 px-8">
|
||||
<h2 class="flex leading-[21px]">{{ i18next.t("The") }} <span class="text-[#FF3366]">
|
||||
{{ i18next.t("AcctMgmt.DeleteFirstClause").toUpperCase() }}
|
||||
</span>
|
||||
</h2>
|
||||
<h2 class="flex leading-[21px]">{{ i18next.t("AcctMgmt.DeleteSecondClause") }}</h2>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="flex justify-center py-3 border-t-2 border-t-gray-50 gap-4">
|
||||
<button id="calcel_delete_acct_btn" class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px]
|
||||
bg-[#FF3366] text-[#ffffff]" @click="onNoBtnClick">
|
||||
{{ i18next.t("No") }}
|
||||
</button>
|
||||
<button id="sure_to_delete_acct_btn" class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px]
|
||||
border-2 border-[#FF3366] text-[#FF3366]"
|
||||
@click="onDeleteConfirmBtnClick"
|
||||
>
|
||||
{{ i18next.t("Yes") }}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
<div
|
||||
id="modal_delete_acct_alert"
|
||||
class="flex shadow-lg rounded-lg w-[564px] flex-col bg-[#ffffff]"
|
||||
>
|
||||
<div class="flex decoration-bar bg-[#FF3366] h-2 rounded-t"></div>
|
||||
<main
|
||||
id="delete_acct_modal_main"
|
||||
class="flex flex-col items-center justify-center"
|
||||
>
|
||||
<img
|
||||
src="@/assets/icon-large-exclamation.svg"
|
||||
alt="!"
|
||||
class="flex mt-[36px]"
|
||||
/>
|
||||
<h1 class="flex mt-4 text-xl font-medium">
|
||||
{{ i18next.t("AcctMgmt.DelteQuestion").toUpperCase() }}
|
||||
</h1>
|
||||
<div class="clauses flex flex-col mt-4 mb-8 px-8">
|
||||
<h2 class="flex leading-[21px]">
|
||||
{{ i18next.t("The") }} <span class="text-[#FF3366]">
|
||||
{{ i18next.t("AcctMgmt.DeleteFirstClause").toUpperCase() }}
|
||||
</span>
|
||||
</h2>
|
||||
<h2 class="flex leading-[21px]">
|
||||
{{ i18next.t("AcctMgmt.DeleteSecondClause") }}
|
||||
</h2>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="flex justify-center py-3 border-t-2 border-t-gray-50 gap-4">
|
||||
<button
|
||||
id="calcel_delete_acct_btn"
|
||||
class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px] bg-[#FF3366] text-[#ffffff]"
|
||||
@click="onNoBtnClick"
|
||||
>
|
||||
{{ i18next.t("No") }}
|
||||
</button>
|
||||
<button
|
||||
id="sure_to_delete_acct_btn"
|
||||
class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px] border-2 border-[#FF3366] text-[#FF3366]"
|
||||
@click="onDeleteConfirmBtnClick"
|
||||
>
|
||||
{{ i18next.t("Yes") }}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -38,11 +57,11 @@
|
||||
* modal for account deletion with yes/no buttons.
|
||||
*/
|
||||
|
||||
import { useModalStore } from '@/stores/modal';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useAcctMgmtStore } from '@/stores/acctMgmt';
|
||||
import i18next from '@/i18n/i18n.js';
|
||||
import { useToast } from 'vue-toast-notification';
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useAcctMgmtStore } from "@/stores/acctMgmt";
|
||||
import i18next from "@/i18n/i18n.js";
|
||||
import { useToast } from "vue-toast-notification";
|
||||
|
||||
const acctMgmtStore = useAcctMgmtStore();
|
||||
const modalStore = useModalStore();
|
||||
@@ -50,17 +69,19 @@ const toast = useToast();
|
||||
const router = useRouter();
|
||||
|
||||
/** Confirms account deletion, shows success toast, and navigates to account admin page. */
|
||||
const onDeleteConfirmBtnClick = async() => {
|
||||
if(await acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)){
|
||||
toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
|
||||
modalStore.closeModal();
|
||||
acctMgmtStore.setShouldUpdateList(true);
|
||||
await router.push("/account-admin");
|
||||
}
|
||||
const onDeleteConfirmBtnClick = async () => {
|
||||
if (
|
||||
await acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)
|
||||
) {
|
||||
toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
|
||||
modalStore.closeModal();
|
||||
acctMgmtStore.setShouldUpdateList(true);
|
||||
await router.push("/account-admin");
|
||||
}
|
||||
};
|
||||
|
||||
/** Cancels deletion and closes the modal. */
|
||||
const onNoBtnClick = () => {
|
||||
modalStore.closeModal();
|
||||
modalStore.closeModal();
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,19 @@
|
||||
<template>
|
||||
<header class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center
|
||||
border-b border-b-[1px] border-[#CBD5E1]
|
||||
">
|
||||
<h1 class="flex text-base font-bold"> {{ headerText }}</h1>
|
||||
<div class="w-8 h-8 bg-transparent hover:bg-[#e9ecef] rounded-full relative flex justify-center items-center">
|
||||
<img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer absolute"
|
||||
@click="closeModal"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<header
|
||||
class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center border-b border-b-[1px] border-[#CBD5E1]"
|
||||
>
|
||||
<h1 class="flex text-base font-bold">{{ headerText }}</h1>
|
||||
<div
|
||||
class="w-8 h-8 bg-transparent hover:bg-[#e9ecef] rounded-full relative flex justify-center items-center"
|
||||
>
|
||||
<img
|
||||
src="@/assets/icon-x.svg"
|
||||
alt="X"
|
||||
class="flex cursor-pointer absolute"
|
||||
@click="closeModal"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -22,13 +27,13 @@
|
||||
* header with title text and close button.
|
||||
*/
|
||||
|
||||
import { useModalStore } from '@/stores/modal';
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
|
||||
defineProps({
|
||||
headerText: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
headerText: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const modalStore = useModalStore();
|
||||
|
||||
@@ -1,117 +1,187 @@
|
||||
<template>
|
||||
<div class="general my-account flex flex-col items-center w-full h-full p-8">
|
||||
<main class="flex main-part flex-col px-8 mt-6 w-[720px]">
|
||||
<h1 id="general_acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">
|
||||
{{ name }}
|
||||
</h1>
|
||||
<div class="general-status-container">
|
||||
<Badge displayText="Admin" :isActivated="is_admin"/>
|
||||
<Badge displayText="Suspended" :isActivated="!is_active"/>
|
||||
<div class="general my-account flex flex-col items-center w-full h-full p-8">
|
||||
<main class="flex main-part flex-col px-8 mt-6 w-[720px]">
|
||||
<h1
|
||||
id="general_acct_info_user_name"
|
||||
class="text-[32px] leading-[64px] font-medium mb-2"
|
||||
>
|
||||
{{ name }}
|
||||
</h1>
|
||||
<div class="general-status-container">
|
||||
<Badge displayText="Admin" :isActivated="is_admin" />
|
||||
<Badge displayText="Suspended" :isActivated="!is_active" />
|
||||
</div>
|
||||
<div
|
||||
id="general_account_visit_info"
|
||||
class="w-full border-b border-b-[#CBD5E1] border-b-[1px] mt-3 pb-4 w-full"
|
||||
>
|
||||
Total visits
|
||||
<span class="text-[#0099FF]">
|
||||
{{ visitTime }}
|
||||
</span>
|
||||
times.
|
||||
</div>
|
||||
</main>
|
||||
<main class="flex flex-col pt-6 px-8 w-[720px]">
|
||||
<h1 class="text-[20px] font-medium mb-4">
|
||||
{{ i18next.t("AcctMgmt.UserInfo") }}
|
||||
</h1>
|
||||
<div class="row w-full flex py-2 h-[40px] mb-4 items-center">
|
||||
<div class="field-label text-sm flex items-center font-medium mr-4">
|
||||
<span class="align-right-span flex w-[80px]">
|
||||
{{ i18next.t("AcctMgmt.Account") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="account flex flex-col">
|
||||
<span class="flex text-[#0F172A] text-[16px]">{{ username }}</span>
|
||||
<div v-show="false" class="error-wrapper my-2">
|
||||
<div class="error-msg-section flex justify-start">
|
||||
<img
|
||||
src="@/assets/icon-alert.svg"
|
||||
alt="!"
|
||||
class="exclamation-img flex mr-2"
|
||||
/>
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
|
||||
{{ i18next.t("AcctMgmt.AccountNotUnique") }}
|
||||
</span>
|
||||
</div>
|
||||
<div id="general_account_visit_info" class="w-full border-b border-b-[#CBD5E1] border-b-[1px] mt-3 pb-4
|
||||
w-full">
|
||||
Total visits <span class="text-[#0099FF]">
|
||||
{{ visitTime }}
|
||||
</span> times.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row w-full flex py-2 h-[40px] mb-4 items-center text-[14px]">
|
||||
<div class="field-label text-sm flex font-medium mr-4 box-border">
|
||||
<span class="flex w-[80px]">
|
||||
{{ i18next.t("AcctMgmt.FullName") }}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
v-if="isNameEditable"
|
||||
id="input_name_field"
|
||||
class="w-[280px] h-[40px] rounded p-1 border border-[1px] border-[#64748B] flex items-center outline-none"
|
||||
v-model="inputName"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<div v-else class="not-editable displayable name flex w-[280px]">
|
||||
{{ name }}
|
||||
</div>
|
||||
<div
|
||||
v-if="isNameEditable"
|
||||
class="save-btn-container flex ml-[112px]"
|
||||
@click="onSaveNameClick"
|
||||
>
|
||||
<ButtonFilled :buttonText="i18next.t('Global.Save')" />
|
||||
</div>
|
||||
<div
|
||||
v-if="isNameEditable"
|
||||
class="cancel-btn btn-container flex ml-[8px]"
|
||||
@click="onCancelNameClick"
|
||||
>
|
||||
<Button :buttonText="i18next.t('Global.Cancel')" />
|
||||
</div>
|
||||
<div
|
||||
v-else="isPwdEditable"
|
||||
class="edit-btn btn-container flex ml-[204px]"
|
||||
@click="onEditNameClick"
|
||||
>
|
||||
<Button :buttonText="i18next.t('Global.Edit')" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row w-full flex py-2 mb-4 border-b border-b-[#CBD5E1] border-b-[1px]"
|
||||
>
|
||||
<div class="field-label flex flex-col text-sm font-medium mr-4">
|
||||
<span class="flex h-[40px] w-[80px] items-center">
|
||||
{{ i18next.t("AcctMgmt.Password") }}
|
||||
</span>
|
||||
<div class="flex dummy-cell"></div>
|
||||
</div>
|
||||
<div class="flex input-and-error-msg flex-col w-[280px]">
|
||||
<div
|
||||
v-if="isPwdEditable"
|
||||
class="input-and-eye flex items-center h-[40px] relative border-[1px] rounded"
|
||||
:class="{
|
||||
'border-[#FF3366]': !isPwdLengthValid,
|
||||
'border-[#64748B]': isPwdLengthValid,
|
||||
}"
|
||||
>
|
||||
<input
|
||||
class="outline-none p-1 w-[280px]"
|
||||
:type="isPwdEyeOn ? 'text' : 'password'"
|
||||
v-model="inputPwd"
|
||||
autocomplete="off"
|
||||
:class="{
|
||||
'color-[#FF3366]': !isPwdLengthValid,
|
||||
'color-[#64748B]': isPwdLengthValid,
|
||||
}"
|
||||
/>
|
||||
<img
|
||||
id="eye_button"
|
||||
v-if="isPwdEyeOn"
|
||||
src="@/assets/icon-eye-open.svg"
|
||||
class="absolute right-[8px] cursor-pointer"
|
||||
@mousedown="togglePwdEyeBtn(true)"
|
||||
@mouseup="togglePwdEyeBtn(false)"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/icon-eye-hide.svg"
|
||||
class="absolute right-[8px] cursor-pointer"
|
||||
@mousedown="togglePwdEyeBtn(true)"
|
||||
@mouseup="togglePwdEyeBtn(false)"
|
||||
alt="eye"
|
||||
/>
|
||||
</div>
|
||||
<div class="error-msg-section flex justify-start mt-4">
|
||||
<img
|
||||
v-show="!isPwdLengthValid"
|
||||
src="@/assets/icon-alert.svg"
|
||||
alt="!"
|
||||
class="exclamation-img flex mr-2"
|
||||
/>
|
||||
<span
|
||||
class="error-msg-text flex text-[#FF3366] h-[24px] text-[14px]"
|
||||
>
|
||||
{{
|
||||
isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough")
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-and-dummy-column flex flex-col text-[14px]">
|
||||
<div class="button-group flex w-min-[80px] h-[40px]">
|
||||
<div
|
||||
v-if="isPwdEditable"
|
||||
class="save-btn-container flex ml-[112px]"
|
||||
@click="onSavePwdClick"
|
||||
>
|
||||
<ButtonFilled :buttonText="i18next.t('Global.Save')" />
|
||||
</div>
|
||||
</main>
|
||||
<main class="flex flex-col pt-6 px-8 w-[720px]">
|
||||
<h1 class="text-[20px] font-medium mb-4">
|
||||
{{ i18next.t("AcctMgmt.UserInfo") }}
|
||||
</h1>
|
||||
<div class="row w-full flex py-2 h-[40px] mb-4 items-center">
|
||||
<div class="field-label text-sm flex items-center font-medium mr-4">
|
||||
<span class="align-right-span flex w-[80px]">
|
||||
{{ i18next.t("AcctMgmt.Account") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="account flex flex-col">
|
||||
<span class="flex text-[#0F172A] text-[16px]">{{ username }}</span>
|
||||
<div v-show="false" class="error-wrapper my-2">
|
||||
<div class="error-msg-section flex justify-start">
|
||||
<img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
|
||||
{{ i18next.t("AcctMgmt.AccountNotUnique") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="isPwdEditable"
|
||||
class="cancel-btn btn-container flex ml-[8px]"
|
||||
@click="onCancelPwdClick"
|
||||
>
|
||||
<Button :buttonText="i18next.t('Global.Cancel')" />
|
||||
</div>
|
||||
<div class="row w-full flex py-2 h-[40px] mb-4 items-center text-[14px]">
|
||||
<div class="field-label text-sm flex font-medium mr-4 box-border">
|
||||
<span class="flex w-[80px]">
|
||||
{{ i18next.t("AcctMgmt.FullName") }}
|
||||
</span>
|
||||
</div>
|
||||
<input v-if='isNameEditable' id="input_name_field"
|
||||
class="w-[280px] h-[40px] rounded p-1 border border-[1px] border-[#64748B] flex items-center outline-none"
|
||||
v-model="inputName"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<div v-else class="not-editable displayable name flex w-[280px]">
|
||||
{{ name }}
|
||||
</div>
|
||||
<div v-if='isNameEditable' class="save-btn-container flex ml-[112px]" @click="onSaveNameClick">
|
||||
<ButtonFilled :buttonText='i18next.t("Global.Save")' />
|
||||
</div>
|
||||
<div v-if='isNameEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelNameClick" >
|
||||
<Button :buttonText='i18next.t("Global.Cancel")'/>
|
||||
</div>
|
||||
<div v-else='isPwdEditable' class="edit-btn btn-container flex ml-[204px]" @click="onEditNameClick" >
|
||||
<Button :buttonText='i18next.t("Global.Edit")'/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="reset-btn btn-container flex ml-[460px]"
|
||||
@click="onResetPwdClick"
|
||||
>
|
||||
<Button :buttonText="i18next.t('Global.Reset')" />
|
||||
</div>
|
||||
<div class="row w-full flex py-2 mb-4 border-b border-b-[#CBD5E1] border-b-[1px]">
|
||||
<div class="field-label flex flex-col text-sm font-medium mr-4">
|
||||
<span class="flex h-[40px] w-[80px] items-center">
|
||||
{{ i18next.t("AcctMgmt.Password") }}
|
||||
</span>
|
||||
<div class="flex dummy-cell"></div>
|
||||
</div>
|
||||
<div class="flex input-and-error-msg flex-col w-[280px]">
|
||||
<div v-if='isPwdEditable' class="input-and-eye flex items-center h-[40px] relative border-[1px] rounded"
|
||||
:class="{'border-[#FF3366]': !isPwdLengthValid, 'border-[#64748B]': isPwdLengthValid,}"
|
||||
>
|
||||
<input class="outline-none p-1 w-[280px]" :type="isPwdEyeOn ? 'text' : 'password'"
|
||||
v-model="inputPwd"
|
||||
autocomplete="off" :class="{'color-[#FF3366]': !isPwdLengthValid,
|
||||
'color-[#64748B]': isPwdLengthValid,}"/>
|
||||
<img id='eye_button' v-if="isPwdEyeOn" src='@/assets/icon-eye-open.svg' class="absolute right-[8px] cursor-pointer"
|
||||
@mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt=""/>
|
||||
<img v-else src='@/assets/icon-eye-hide.svg' class="absolute right-[8px] cursor-pointer"
|
||||
@mousedown="togglePwdEyeBtn(true)" @mouseup="togglePwdEyeBtn(false)" alt="eye"/>
|
||||
</div>
|
||||
<div class="error-msg-section flex justify-start mt-4">
|
||||
<img v-show="!isPwdLengthValid" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
|
||||
<span class="error-msg-text flex text-[#FF3366] h-[24px] text-[14px]">
|
||||
{{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-and-dummy-column flex flex-col text-[14px]">
|
||||
<div class="button-group flex w-min-[80px] h-[40px]">
|
||||
<div v-if='isPwdEditable' class="save-btn-container flex ml-[112px]"
|
||||
@click="onSavePwdClick">
|
||||
<ButtonFilled :buttonText='i18next.t("Global.Save")' />
|
||||
</div>
|
||||
<div v-if='isPwdEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelPwdClick" >
|
||||
<Button :buttonText='i18next.t("Global.Cancel")'/>
|
||||
</div>
|
||||
<div v-else class="reset-btn btn-container flex ml-[460px]" @click="onResetPwdClick" >
|
||||
<Button :buttonText='i18next.t("Global.Reset")'/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex dummy-cell h-[40px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<main class="session flex flex-col pt-6 px-8 w-[720px]">
|
||||
<h1 class="text-[20px] font-medium mb-4">
|
||||
{{ i18next.t("AcctMgmt.Session") }}
|
||||
</h1>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex dummy-cell h-[40px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<main class="session flex flex-col pt-6 px-8 w-[720px]">
|
||||
<h1 class="text-[20px] font-medium mb-4">
|
||||
{{ i18next.t("AcctMgmt.Session") }}
|
||||
</h1>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -125,16 +195,16 @@
|
||||
* viewing and editing the current user's name and password.
|
||||
*/
|
||||
|
||||
import { onMounted, computed, ref } from 'vue';
|
||||
import i18next from '@/i18n/i18n.js';
|
||||
import { useLoginStore } from '@/stores/login';
|
||||
import { useAcctMgmtStore } from '@/stores/acctMgmt';
|
||||
import Badge from '../../components/Badge.vue';
|
||||
import { useLoadingStore } from '@/stores/loading';
|
||||
import Button from '@/components/Button.vue';
|
||||
import ButtonFilled from '@/components/ButtonFilled.vue';
|
||||
import { useToast } from 'vue-toast-notification';
|
||||
import { PWD_VALID_LENGTH } from '@/constants/constants.js';
|
||||
import { onMounted, computed, ref } from "vue";
|
||||
import i18next from "@/i18n/i18n.js";
|
||||
import { useLoginStore } from "@/stores/login";
|
||||
import { useAcctMgmtStore } from "@/stores/acctMgmt";
|
||||
import Badge from "../../components/Badge.vue";
|
||||
import { useLoadingStore } from "@/stores/loading";
|
||||
import Button from "@/components/Button.vue";
|
||||
import ButtonFilled from "@/components/ButtonFilled.vue";
|
||||
import { useToast } from "vue-toast-notification";
|
||||
import { PWD_VALID_LENGTH } from "@/constants/constants.js";
|
||||
|
||||
const loadingStore = useLoadingStore();
|
||||
const loginStore = useLoginStore();
|
||||
@@ -144,14 +214,10 @@ const toast = useToast();
|
||||
const visitTime = ref(0);
|
||||
const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
|
||||
const name = computed(() => currentViewingUser.value.name);
|
||||
const {
|
||||
username,
|
||||
is_admin,
|
||||
is_active,
|
||||
} = currentViewingUser.value;
|
||||
const { username, is_admin, is_active } = currentViewingUser.value;
|
||||
|
||||
const inputName = ref(name.value);
|
||||
const inputPwd = ref('');
|
||||
const inputPwd = ref("");
|
||||
const isNameEditable = ref(false);
|
||||
const isPwdEditable = ref(false);
|
||||
const isPwdEyeOn = ref(false);
|
||||
@@ -159,53 +225,53 @@ const isPwdLengthValid = ref(true);
|
||||
|
||||
/** Enables the name editing input. */
|
||||
const onEditNameClick = () => {
|
||||
isNameEditable.value = true;
|
||||
isNameEditable.value = true;
|
||||
};
|
||||
|
||||
/** Enables the password editing input. */
|
||||
const onResetPwdClick = () => {
|
||||
isPwdEditable.value = true;
|
||||
isPwdEditable.value = true;
|
||||
};
|
||||
|
||||
/** Validates that the password meets the minimum length requirement. */
|
||||
const validatePwdLength = () => {
|
||||
isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
|
||||
isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
|
||||
};
|
||||
|
||||
/** Saves the edited name to the server and refreshes user data. */
|
||||
const onSaveNameClick = async() => {
|
||||
if(inputName.value.length > 0) {
|
||||
await acctMgmtStore.editAccountName(username, inputName.value);
|
||||
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||
await acctMgmtStore.getUserDetail(username);
|
||||
isNameEditable.value = false;
|
||||
inputName.value = name.value;
|
||||
}
|
||||
const onSaveNameClick = async () => {
|
||||
if (inputName.value.length > 0) {
|
||||
await acctMgmtStore.editAccountName(username, inputName.value);
|
||||
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||
await acctMgmtStore.getUserDetail(username);
|
||||
isNameEditable.value = false;
|
||||
inputName.value = name.value;
|
||||
}
|
||||
};
|
||||
|
||||
/** Validates and saves the new password. */
|
||||
const onSavePwdClick = async() => {
|
||||
validatePwdLength();
|
||||
if (isPwdLengthValid.value) {
|
||||
isPwdEditable.value = false;
|
||||
await acctMgmtStore.editAccountPwd(username, inputPwd.value);
|
||||
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||
inputPwd.value = '';
|
||||
await acctMgmtStore.getUserDetail(loginStore.userData.username);
|
||||
}
|
||||
const onSavePwdClick = async () => {
|
||||
validatePwdLength();
|
||||
if (isPwdLengthValid.value) {
|
||||
isPwdEditable.value = false;
|
||||
await acctMgmtStore.editAccountPwd(username, inputPwd.value);
|
||||
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||
inputPwd.value = "";
|
||||
await acctMgmtStore.getUserDetail(loginStore.userData.username);
|
||||
}
|
||||
};
|
||||
|
||||
/** Cancels name editing and restores the original value. */
|
||||
const onCancelNameClick = () => {
|
||||
isNameEditable.value = false;
|
||||
inputName.value = name.value;
|
||||
isNameEditable.value = false;
|
||||
inputName.value = name.value;
|
||||
};
|
||||
|
||||
/** Cancels password editing and clears the input. */
|
||||
const onCancelPwdClick = () => {
|
||||
isPwdEditable.value = false;
|
||||
inputPwd.value = '';
|
||||
isPwdLengthValid.value = true;
|
||||
isPwdEditable.value = false;
|
||||
inputPwd.value = "";
|
||||
isPwdLengthValid.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -213,11 +279,11 @@ const onCancelPwdClick = () => {
|
||||
* @param {boolean} toBeOpen - Whether to show the password.
|
||||
*/
|
||||
const togglePwdEyeBtn = (toBeOpen) => {
|
||||
isPwdEyeOn.value = toBeOpen;
|
||||
isPwdEyeOn.value = toBeOpen;
|
||||
};
|
||||
|
||||
onMounted(async() => {
|
||||
loadingStore.setIsLoading(false);
|
||||
await acctMgmtStore.getUserDetail(loginStore.userData.username);
|
||||
onMounted(async () => {
|
||||
loadingStore.setIsLoading(false);
|
||||
await acctMgmtStore.getUserDetail(loginStore.userData.username);
|
||||
});
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,22 +1,47 @@
|
||||
<template>
|
||||
<!-- Sidebar: Switch data type -->
|
||||
<div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="sidebarLeftValue? 'bg-neutral-50':''">
|
||||
<div
|
||||
class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10"
|
||||
:class="sidebarLeftValue ? 'bg-neutral-50' : ''"
|
||||
>
|
||||
<ul class="space-y-4 flex flex-col justify-center items-center">
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
|
||||
hover:border-primary" @click="sidebarView = !sidebarView" :class="{'border-primary': sidebarView}" v-tooltip="tooltip.sidebarView">
|
||||
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
|
||||
<li
|
||||
class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
|
||||
@click="sidebarView = !sidebarView"
|
||||
:class="{ 'border-primary': sidebarView }"
|
||||
v-tooltip="tooltip.sidebarView"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
|
||||
:class="[sidebarView ? 'text-primary' : 'text-neutral-500']"
|
||||
>
|
||||
track_changes
|
||||
</span>
|
||||
</li>
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
|
||||
hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{'border-primary': sidebarFilter}" v-tooltip="tooltip.sidebarFilter">
|
||||
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
|
||||
<li
|
||||
class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
|
||||
@click="sidebarFilter = !sidebarFilter"
|
||||
:class="{ 'border-primary': sidebarFilter }"
|
||||
v-tooltip="tooltip.sidebarFilter"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
|
||||
:class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']"
|
||||
id="iconFilter"
|
||||
>
|
||||
tornado
|
||||
</span>
|
||||
</li>
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50
|
||||
drop-shadow hover:border-primary" @click="sidebarTraces = !sidebarTraces" :class="{'border-primary': sidebarTraces}" v-tooltip="tooltip.sidebarTraces">
|
||||
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
|
||||
<li
|
||||
class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
|
||||
@click="sidebarTraces = !sidebarTraces"
|
||||
:class="{ 'border-primary': sidebarTraces }"
|
||||
v-tooltip="tooltip.sidebarTraces"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
|
||||
:class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']"
|
||||
>
|
||||
rebase
|
||||
</span>
|
||||
</li>
|
||||
@@ -29,13 +54,22 @@
|
||||
</div>
|
||||
|
||||
<!-- Sidebar: State -->
|
||||
<div id='sidebar_state' class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
|
||||
<div
|
||||
id="sidebar_state"
|
||||
class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute"
|
||||
>
|
||||
<ul class="flex flex-col justify-center items-center">
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer
|
||||
bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
|
||||
:class="{'border-primary': sidebarState}" id="iconState" v-tooltip.left="tooltip.sidebarState">
|
||||
<span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
|
||||
:class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
|
||||
<li
|
||||
class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
|
||||
@click="sidebarState = !sidebarState"
|
||||
:class="{ 'border-primary': sidebarState }"
|
||||
id="iconState"
|
||||
v-tooltip.left="tooltip.sidebarState"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
|
||||
:class="[sidebarState ? 'text-primary' : 'text-neutral-500']"
|
||||
>
|
||||
info
|
||||
</span>
|
||||
</li>
|
||||
@@ -43,13 +77,35 @@
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Model -->
|
||||
<SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank"
|
||||
@switch-data-layer-type="switchDataLayerType" ></SidebarView>
|
||||
<SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
|
||||
<SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesViewRef"></SidebarTraces>
|
||||
<SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd"
|
||||
:filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
|
||||
@submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidebarFilterRefComp"></SidebarFilter>
|
||||
<SidebarView
|
||||
v-model:visible="sidebarView"
|
||||
@switch-map-type="switchMapType"
|
||||
@switch-curve-styles="switchCurveStyles"
|
||||
@switch-rank="switchRank"
|
||||
@switch-data-layer-type="switchDataLayerType"
|
||||
></SidebarView>
|
||||
<SidebarState
|
||||
v-model:visible="sidebarState"
|
||||
:insights="insights"
|
||||
:stats="stats"
|
||||
></SidebarState>
|
||||
<SidebarTraces
|
||||
v-model:visible="sidebarTraces"
|
||||
:cases="cases"
|
||||
@switch-Trace-Id="switchTraceId"
|
||||
ref="tracesViewRef"
|
||||
></SidebarTraces>
|
||||
<SidebarFilter
|
||||
v-model:visible="sidebarFilter"
|
||||
:filterTasks="filterTasks"
|
||||
:filterStartToEnd="filterStartToEnd"
|
||||
:filterEndToStart="filterEndToStart"
|
||||
:filterTimeframe="filterTimeframe"
|
||||
:filterTrace="filterTrace"
|
||||
@submit-all="createCy(mapType)"
|
||||
@switch-Trace-Id="switchTraceId"
|
||||
ref="sidebarFilterRefComp"
|
||||
></SidebarFilter>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -64,19 +120,19 @@
|
||||
* statistics.
|
||||
*/
|
||||
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import { useConformanceStore } from "@/stores/conformance";
|
||||
|
||||
export default {
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const isCheckPage = to.name.includes('Check');
|
||||
const isCheckPage = to.name.includes("Check");
|
||||
|
||||
if (isCheckPage) {
|
||||
const conformanceStore = useConformanceStore();
|
||||
switch (to.params.type) {
|
||||
case 'log':
|
||||
case "log":
|
||||
conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
|
||||
break;
|
||||
case 'filter':
|
||||
case "filter":
|
||||
conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
|
||||
break;
|
||||
}
|
||||
@@ -84,32 +140,32 @@ export default {
|
||||
to.meta.file = conformanceStore.routeFile;
|
||||
}
|
||||
next();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useLoadingStore } from '@/stores/loading';
|
||||
import { useAllMapDataStore } from '@/stores/allMapData';
|
||||
import cytoscapeMap from '@/module/cytoscapeMap.js';
|
||||
import { useCytoscapeStore } from '@/stores/cytoscapeStore';
|
||||
import { useMapPathStore } from '@/stores/mapPathStore';
|
||||
import emitter from '@/utils/emitter';
|
||||
import SidebarView from '@/components/Discover/Map/SidebarView.vue';
|
||||
import SidebarState from '@/components/Discover/Map/SidebarState.vue';
|
||||
import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
|
||||
import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
|
||||
import ImgCapsule1 from '@/assets/capsule1.svg';
|
||||
import ImgCapsule2 from '@/assets/capsule2.svg';
|
||||
import ImgCapsule3 from '@/assets/capsule3.svg';
|
||||
import ImgCapsule4 from '@/assets/capsule4.svg';
|
||||
import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useLoadingStore } from "@/stores/loading";
|
||||
import { useAllMapDataStore } from "@/stores/allMapData";
|
||||
import cytoscapeMap from "@/module/cytoscapeMap.js";
|
||||
import { useCytoscapeStore } from "@/stores/cytoscapeStore";
|
||||
import { useMapPathStore } from "@/stores/mapPathStore";
|
||||
import emitter from "@/utils/emitter";
|
||||
import SidebarView from "@/components/Discover/Map/SidebarView.vue";
|
||||
import SidebarState from "@/components/Discover/Map/SidebarState.vue";
|
||||
import SidebarTraces from "@/components/Discover/Map/SidebarTraces.vue";
|
||||
import SidebarFilter from "@/components/Discover/Map/SidebarFilter.vue";
|
||||
import ImgCapsule1 from "@/assets/capsule1.svg";
|
||||
import ImgCapsule2 from "@/assets/capsule2.svg";
|
||||
import ImgCapsule3 from "@/assets/capsule3.svg";
|
||||
import ImgCapsule4 from "@/assets/capsule4.svg";
|
||||
|
||||
const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
|
||||
|
||||
const props = defineProps(['type', 'checkType', 'checkId', 'checkFileId']);
|
||||
const props = defineProps(["type", "checkType", "checkId", "checkFileId"]);
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
@@ -117,10 +173,28 @@ const route = useRoute();
|
||||
const loadingStore = useLoadingStore();
|
||||
const allMapDataStore = useAllMapDataStore();
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
|
||||
filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
|
||||
temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
|
||||
postRuleData
|
||||
const {
|
||||
processMap,
|
||||
bpmn,
|
||||
stats,
|
||||
insights,
|
||||
traceId,
|
||||
traces,
|
||||
baseTraces,
|
||||
baseTraceId,
|
||||
filterTasks,
|
||||
filterStartToEnd,
|
||||
filterEndToStart,
|
||||
filterTimeframe,
|
||||
filterTrace,
|
||||
temporaryData,
|
||||
isRuleData,
|
||||
ruleData,
|
||||
logId,
|
||||
baseLogId,
|
||||
createFilterId,
|
||||
cases,
|
||||
postRuleData,
|
||||
} = storeToRefs(allMapDataStore);
|
||||
|
||||
const cytoscapeStore = useCytoscapeStore();
|
||||
@@ -129,14 +203,14 @@ const mapPathStore = useMapPathStore();
|
||||
|
||||
const numberBeforeMapInRoute = computed(() => {
|
||||
const path = route.path;
|
||||
const segments = path.split('/');
|
||||
const mapIndex = segments.findIndex(segment => segment.includes('map'));
|
||||
const segments = path.split("/");
|
||||
const mapIndex = segments.findIndex((segment) => segment.includes("map"));
|
||||
if (mapIndex > 0) {
|
||||
const previousSegment = segments[mapIndex - 1];
|
||||
const match = previousSegment.match(/\d+/);
|
||||
return match ? match[0] : 'No number found';
|
||||
return match ? match[0] : "No number found";
|
||||
}
|
||||
return 'No map segment found';
|
||||
return "No map segment found";
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
@@ -157,11 +231,11 @@ const bpmnData = ref({
|
||||
edges: [],
|
||||
});
|
||||
const cytoscapeGraph = ref(null);
|
||||
const curveStyle = ref('unbundled-bezier');
|
||||
const mapType = ref('processMap');
|
||||
const dataLayerType = ref('freq');
|
||||
const dataLayerOption = ref('total');
|
||||
const rank = ref('LR');
|
||||
const curveStyle = ref("unbundled-bezier");
|
||||
const mapType = ref("processMap");
|
||||
const dataLayerType = ref("freq");
|
||||
const dataLayerOption = ref("total");
|
||||
const rank = ref("LR");
|
||||
const localTraceId = ref(1);
|
||||
const sidebarView = ref(false);
|
||||
const sidebarState = ref(false);
|
||||
@@ -173,50 +247,54 @@ const sidebarFilterRefComp = ref(null);
|
||||
|
||||
const tooltip = {
|
||||
sidebarView: {
|
||||
value: 'Visualization Setting',
|
||||
class: 'ml-1',
|
||||
value: "Visualization Setting",
|
||||
class: "ml-1",
|
||||
pt: {
|
||||
text: 'text-[10px] p-1'
|
||||
}
|
||||
text: "text-[10px] p-1",
|
||||
},
|
||||
},
|
||||
sidebarTraces: {
|
||||
value: 'Trace',
|
||||
class: 'ml-1',
|
||||
value: "Trace",
|
||||
class: "ml-1",
|
||||
pt: {
|
||||
text: 'text-[10px] p-1'
|
||||
}
|
||||
text: "text-[10px] p-1",
|
||||
},
|
||||
},
|
||||
sidebarFilter: {
|
||||
value: 'Filter',
|
||||
class: 'ml-1',
|
||||
value: "Filter",
|
||||
class: "ml-1",
|
||||
pt: {
|
||||
text: 'text-[10px] p-1'
|
||||
}
|
||||
text: "text-[10px] p-1",
|
||||
},
|
||||
},
|
||||
sidebarState: {
|
||||
value: 'Summary',
|
||||
class: 'ml-1',
|
||||
value: "Summary",
|
||||
class: "ml-1",
|
||||
pt: {
|
||||
text: 'text-[10px] p-1'
|
||||
}
|
||||
text: "text-[10px] p-1",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Computed
|
||||
const sidebarLeftValue = computed(() => {
|
||||
return sidebarView.value === true || sidebarTraces.value === true || sidebarFilter.value === true;
|
||||
return (
|
||||
sidebarView.value === true ||
|
||||
sidebarTraces.value === true ||
|
||||
sidebarFilter.value === true
|
||||
);
|
||||
});
|
||||
|
||||
// Watch
|
||||
watch(sidebarView, (newValue) => {
|
||||
if(newValue) {
|
||||
if (newValue) {
|
||||
sidebarFilter.value = false;
|
||||
sidebarTraces.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
watch(sidebarFilter, (newValue) => {
|
||||
if(newValue) {
|
||||
if (newValue) {
|
||||
sidebarView.value = false;
|
||||
sidebarState.value = false;
|
||||
sidebarTraces.value = false;
|
||||
@@ -225,7 +303,7 @@ watch(sidebarFilter, (newValue) => {
|
||||
});
|
||||
|
||||
watch(sidebarTraces, (newValue) => {
|
||||
if(newValue) {
|
||||
if (newValue) {
|
||||
sidebarView.value = false;
|
||||
sidebarState.value = false;
|
||||
sidebarFilter.value = false;
|
||||
@@ -234,7 +312,7 @@ watch(sidebarTraces, (newValue) => {
|
||||
});
|
||||
|
||||
watch(sidebarState, (newValue) => {
|
||||
if(newValue) {
|
||||
if (newValue) {
|
||||
sidebarFilter.value = false;
|
||||
sidebarTraces.value = false;
|
||||
}
|
||||
@@ -273,7 +351,7 @@ async function switchRank(rankValue) {
|
||||
* @param {string} type - 'freq' or 'duration'.
|
||||
* @param {string} option - The data option (e.g., 'total', 'average').
|
||||
*/
|
||||
async function switchDataLayerType(type, option){
|
||||
async function switchDataLayerType(type, option) {
|
||||
dataLayerType.value = type;
|
||||
dataLayerOption.value = option;
|
||||
createCy(mapType.value);
|
||||
@@ -284,7 +362,7 @@ async function switchDataLayerType(type, option){
|
||||
* @param {object} e - Object containing the trace id.
|
||||
*/
|
||||
async function switchTraceId(e) {
|
||||
if(e.id == traceId.value) return;
|
||||
if (e.id == traceId.value) return;
|
||||
isLoading.value = true;
|
||||
traceId.value = e.id;
|
||||
await allMapDataStore.getTraceDetail();
|
||||
@@ -299,21 +377,21 @@ async function switchTraceId(e) {
|
||||
function setNodesData(mapData) {
|
||||
const mapTypeVal = mapType.value;
|
||||
const logFreq = {
|
||||
"total": "",
|
||||
"rel_freq": "",
|
||||
"average": "",
|
||||
"median": "",
|
||||
"max": "",
|
||||
"min": "",
|
||||
"cases": ""
|
||||
total: "",
|
||||
rel_freq: "",
|
||||
average: "",
|
||||
median: "",
|
||||
max: "",
|
||||
min: "",
|
||||
cases: "",
|
||||
};
|
||||
const logDuration = {
|
||||
"total": "",
|
||||
"rel_duration": "",
|
||||
"average": "",
|
||||
"median": "",
|
||||
"max": "",
|
||||
"min": "",
|
||||
total: "",
|
||||
rel_duration: "",
|
||||
average: "",
|
||||
median: "",
|
||||
max: "",
|
||||
min: "",
|
||||
};
|
||||
const gateway = {
|
||||
parallel: "+",
|
||||
@@ -322,63 +400,63 @@ function setNodesData(mapData) {
|
||||
};
|
||||
|
||||
mapData.nodes = [];
|
||||
const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
|
||||
mapSource.vertices.forEach(node => {
|
||||
const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
|
||||
mapSource.vertices.forEach((node) => {
|
||||
switch (node.type) {
|
||||
case 'gateway':
|
||||
case "gateway":
|
||||
mapData.nodes.push({
|
||||
data:{
|
||||
id:node.id,
|
||||
type:node.type,
|
||||
label:gateway[node.gateway_type],
|
||||
height:60,
|
||||
width:60,
|
||||
backgroundColor:'#FFF',
|
||||
bordercolor:'#003366',
|
||||
shape:"diamond",
|
||||
freq:logFreq,
|
||||
duration:logDuration,
|
||||
}
|
||||
})
|
||||
data: {
|
||||
id: node.id,
|
||||
type: node.type,
|
||||
label: gateway[node.gateway_type],
|
||||
height: 60,
|
||||
width: 60,
|
||||
backgroundColor: "#FFF",
|
||||
bordercolor: "#003366",
|
||||
shape: "diamond",
|
||||
freq: logFreq,
|
||||
duration: logDuration,
|
||||
},
|
||||
});
|
||||
break;
|
||||
case 'event':
|
||||
if(node.event_type === 'start') mapData.startId = node.id;
|
||||
else if(node.event_type === 'end') mapData.endId = node.id;
|
||||
case "event":
|
||||
if (node.event_type === "start") mapData.startId = node.id;
|
||||
else if (node.event_type === "end") mapData.endId = node.id;
|
||||
|
||||
mapData.nodes.push({
|
||||
data:{
|
||||
id:node.id,
|
||||
type:node.type,
|
||||
label:node.event_type,
|
||||
data: {
|
||||
id: node.id,
|
||||
type: node.type,
|
||||
label: node.event_type,
|
||||
height: 48,
|
||||
width: 48,
|
||||
backgroundColor:'#FFFFFF',
|
||||
bordercolor:'#0F172A',
|
||||
textColor: '#FF3366',
|
||||
shape:"ellipse",
|
||||
freq:logFreq,
|
||||
duration:logDuration,
|
||||
}
|
||||
backgroundColor: "#FFFFFF",
|
||||
bordercolor: "#0F172A",
|
||||
textColor: "#FF3366",
|
||||
shape: "ellipse",
|
||||
freq: logFreq,
|
||||
duration: logDuration,
|
||||
},
|
||||
});
|
||||
break;
|
||||
default:
|
||||
mapData.nodes.push({
|
||||
data:{
|
||||
id:node.id,
|
||||
type:node.type,
|
||||
label:node.label,
|
||||
height: 48,
|
||||
width: 216,
|
||||
textColor: '#0F172A',
|
||||
backgroundColor:'rgba(0, 0, 0, 0)',
|
||||
borderradius: 999,
|
||||
shape:"round-rectangle",
|
||||
freq:node.freq,
|
||||
duration:node.duration,
|
||||
backgroundOpacity: 0,
|
||||
borderOpacity: 0,
|
||||
}
|
||||
})
|
||||
data: {
|
||||
id: node.id,
|
||||
type: node.type,
|
||||
label: node.label,
|
||||
height: 48,
|
||||
width: 216,
|
||||
textColor: "#0F172A",
|
||||
backgroundColor: "rgba(0, 0, 0, 0)",
|
||||
borderradius: 999,
|
||||
shape: "round-rectangle",
|
||||
freq: node.freq,
|
||||
duration: node.duration,
|
||||
backgroundOpacity: 0,
|
||||
borderOpacity: 0,
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
@@ -391,26 +469,26 @@ function setNodesData(mapData) {
|
||||
function setEdgesData(mapData) {
|
||||
const mapTypeVal = mapType.value;
|
||||
const logDuration = {
|
||||
"total": "",
|
||||
"rel_duration": "",
|
||||
"average": "",
|
||||
"median": "",
|
||||
"max": "",
|
||||
"min": "",
|
||||
"cases": ""
|
||||
total: "",
|
||||
rel_duration: "",
|
||||
average: "",
|
||||
median: "",
|
||||
max: "",
|
||||
min: "",
|
||||
cases: "",
|
||||
};
|
||||
|
||||
mapData.edges = [];
|
||||
const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
|
||||
mapSource.edges.forEach(edge => {
|
||||
const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
|
||||
mapSource.edges.forEach((edge) => {
|
||||
mapData.edges.push({
|
||||
data: {
|
||||
source:edge.tail,
|
||||
target:edge.head,
|
||||
freq:edge.freq,
|
||||
duration:edge.duration === null ? logDuration : edge.duration,
|
||||
style:'dotted',
|
||||
lineWidth:1,
|
||||
source: edge.tail,
|
||||
target: edge.head,
|
||||
freq: edge.freq,
|
||||
duration: edge.duration === null ? logDuration : edge.duration,
|
||||
style: "dotted",
|
||||
lineWidth: 1,
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -421,20 +499,32 @@ function setEdgesData(mapData) {
|
||||
* @param {string} type - 'processMap' or 'bpmn'.
|
||||
*/
|
||||
async function createCy(type) {
|
||||
const graphId = document.getElementById('cy');
|
||||
const mapData = type === 'processMap'? processMapData.value: bpmnData.value;
|
||||
const mapSource = type === 'processMap' ? processMap.value : bpmn.value;
|
||||
const graphId = document.getElementById("cy");
|
||||
const mapData = type === "processMap" ? processMapData.value : bpmnData.value;
|
||||
const mapSource = type === "processMap" ? processMap.value : bpmn.value;
|
||||
|
||||
if(mapSource.vertices.length !== 0){
|
||||
if (mapSource.vertices.length !== 0) {
|
||||
setNodesData(mapData);
|
||||
setEdgesData(mapData);
|
||||
setActivityBgImage(mapData);
|
||||
cytoscapeGraph.value = await cytoscapeMap(mapData, dataLayerType.value, dataLayerOption.value, curveStyle.value, rank.value, graphId);
|
||||
const processOrBPMN = mapType.value === 'processMap' ? 'process' : 'bpmn';
|
||||
const curveType = curveStyle.value === 'taxi' ? 'elbow' : 'curved';
|
||||
const directionType = rank.value === 'LR' ? 'horizontal' : 'vertical';
|
||||
await mapPathStore.setCytoscape(cytoscapeGraph.value, processOrBPMN, curveType, directionType);
|
||||
};
|
||||
cytoscapeGraph.value = await cytoscapeMap(
|
||||
mapData,
|
||||
dataLayerType.value,
|
||||
dataLayerOption.value,
|
||||
curveStyle.value,
|
||||
rank.value,
|
||||
graphId,
|
||||
);
|
||||
const processOrBPMN = mapType.value === "processMap" ? "process" : "bpmn";
|
||||
const curveType = curveStyle.value === "taxi" ? "elbow" : "curved";
|
||||
const directionType = rank.value === "LR" ? "horizontal" : "vertical";
|
||||
await mapPathStore.setCytoscape(
|
||||
cytoscapeGraph.value,
|
||||
processOrBPMN,
|
||||
curveType,
|
||||
directionType,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -446,19 +536,30 @@ function setActivityBgImage(mapData) {
|
||||
const groupSize = Math.floor(nodes.length / ImgCapsules.length);
|
||||
let nodeOptionArr = [];
|
||||
const leveledGroups = [];
|
||||
const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
|
||||
activityNodeArray.forEach(node => nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]));
|
||||
const activityNodeArray = nodes.filter(
|
||||
(node) => node.data.type === "activity",
|
||||
);
|
||||
activityNodeArray.forEach((node) =>
|
||||
nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]),
|
||||
);
|
||||
nodeOptionArr = nodeOptionArr.sort((a, b) => a - b);
|
||||
for(let i = 0; i < ImgCapsules.length; i++) {
|
||||
for (let i = 0; i < ImgCapsules.length; i++) {
|
||||
const startIdx = i * groupSize;
|
||||
const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
|
||||
const endIdx =
|
||||
i === ImgCapsules.length - 1
|
||||
? activityNodeArray.length
|
||||
: startIdx + groupSize;
|
||||
leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
|
||||
}
|
||||
for(let level = 0; level < leveledGroups.length; level++) {
|
||||
leveledGroups[level].forEach(option => {
|
||||
const curNodes = activityNodeArray.filter(activityNode => activityNode.data[dataLayerType.value][dataLayerOption.value] === option);
|
||||
curNodes.forEach(curNode => {
|
||||
curNode.data = {
|
||||
for (let level = 0; level < leveledGroups.length; level++) {
|
||||
leveledGroups[level].forEach((option) => {
|
||||
const curNodes = activityNodeArray.filter(
|
||||
(activityNode) =>
|
||||
activityNode.data[dataLayerType.value][dataLayerOption.value] ===
|
||||
option,
|
||||
);
|
||||
curNodes.forEach((curNode) => {
|
||||
curNode.data = {
|
||||
...curNode.data,
|
||||
nodeImageUrl: ImgCapsules[level],
|
||||
level,
|
||||
@@ -473,12 +574,12 @@ function setActivityBgImage(mapData) {
|
||||
try {
|
||||
const routeParams = route.params;
|
||||
const file = route.meta.file;
|
||||
const isCheckPage = route.name.includes('Check');
|
||||
const isCheckPage = route.name.includes("Check");
|
||||
|
||||
isLoading.value = true;
|
||||
switch (routeParams.type) {
|
||||
case 'log':
|
||||
if(!isCheckPage) {
|
||||
case "log":
|
||||
if (!isCheckPage) {
|
||||
logId.value = routeParams.fileId;
|
||||
baseLogId.value = routeParams.fileId;
|
||||
} else {
|
||||
@@ -486,15 +587,17 @@ function setActivityBgImage(mapData) {
|
||||
baseLogId.value = file.parent.id;
|
||||
}
|
||||
break;
|
||||
case 'filter':
|
||||
if(!isCheckPage) {
|
||||
case "filter":
|
||||
if (!isCheckPage) {
|
||||
createFilterId.value = routeParams.fileId;
|
||||
} else {
|
||||
createFilterId.value = file.parent.id;
|
||||
}
|
||||
await allMapDataStore.fetchFunnel(createFilterId.value);
|
||||
isRuleData.value = Array.from(temporaryData.value);
|
||||
ruleData.value = isRuleData.value.map(e => sidebarFilterRefComp.value.setRule(e));
|
||||
ruleData.value = isRuleData.value.map((e) =>
|
||||
sidebarFilterRefComp.value.setRule(e),
|
||||
);
|
||||
break;
|
||||
}
|
||||
await allMapDataStore.getAllMapData();
|
||||
@@ -506,20 +609,20 @@ function setActivityBgImage(mapData) {
|
||||
await allMapDataStore.getFilterParams();
|
||||
await allMapDataStore.getTraceDetail();
|
||||
|
||||
emitter.on('saveModal', boolean => {
|
||||
emitter.on("saveModal", (boolean) => {
|
||||
sidebarView.value = boolean;
|
||||
sidebarFilter.value = boolean;
|
||||
sidebarTraces.value = boolean;
|
||||
sidebarState.value = boolean;
|
||||
});
|
||||
emitter.on('leaveFilter', boolean => {
|
||||
emitter.on("leaveFilter", (boolean) => {
|
||||
sidebarView.value = boolean;
|
||||
sidebarFilter.value = boolean;
|
||||
sidebarTraces.value = boolean;
|
||||
sidebarState.value = boolean;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize map:', error);
|
||||
console.error("Failed to initialize map:", error);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<Chart type="line" :data="primeVueSetDataState" :options="primeVueSetOptionsState" class="h-96" />
|
||||
<Chart
|
||||
type="line"
|
||||
:data="primeVueSetDataState"
|
||||
:options="primeVueSetOptionsState"
|
||||
class="h-96"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -14,66 +19,66 @@
|
||||
* occurrence data with Chart.js bar charts.
|
||||
*/
|
||||
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted } from "vue";
|
||||
import {
|
||||
setTimeStringFormatBaseOnTimeDifference,
|
||||
mapTimestampToAxisTicksByFormat,
|
||||
} from '@/module/timeLabel.js';
|
||||
} from "@/module/timeLabel.js";
|
||||
|
||||
const knownScaleLineChartOptions = {
|
||||
x: {
|
||||
type: 'time',
|
||||
const knownScaleLineChartOptions = {
|
||||
x: {
|
||||
type: "time",
|
||||
title: {
|
||||
display: true,
|
||||
color: '#334155',
|
||||
font: {
|
||||
display: true,
|
||||
color: "#334155",
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
}
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
time: {
|
||||
displayFormats: {
|
||||
second: 'h:mm:ss', // ex: 1:11:11
|
||||
minute: 'M/d h:mm', // ex: 1/1 1:11
|
||||
hour: 'M/d h:mm', // ex: 1/1 1:11
|
||||
day: 'M/d h', // ex: 1/1 1
|
||||
month: 'y/M/d', // ex: 1911/1/1
|
||||
},
|
||||
displayFormats: {
|
||||
second: "h:mm:ss", // ex: 1:11:11
|
||||
minute: "M/d h:mm", // ex: 1/1 1:11
|
||||
hour: "M/d h:mm", // ex: 1/1 1:11
|
||||
day: "M/d h", // ex: 1/1 1
|
||||
month: "y/M/d", // ex: 1911/1/1
|
||||
},
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
maxRotation: 0, // Do not rotate labels (range: 0~50)
|
||||
color: '#64748b',
|
||||
source: 'labels', // Dynamically display label count proportionally
|
||||
display: true,
|
||||
maxRotation: 0, // Do not rotate labels (range: 0~50)
|
||||
color: "#64748b",
|
||||
source: "labels", // Dynamically display label count proportionally
|
||||
},
|
||||
border: {
|
||||
color: '#64748b',
|
||||
color: "#64748b",
|
||||
},
|
||||
grid: {
|
||||
tickLength: 0, // Prevent grid lines from extending beyond the axis
|
||||
}
|
||||
},
|
||||
y: {
|
||||
tickLength: 0, // Prevent grid lines from extending beyond the axis
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true, // Scale includes 0
|
||||
title: {
|
||||
display: true,
|
||||
color: '#334155',
|
||||
font: {
|
||||
display: true,
|
||||
color: "#334155",
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
ticks:{
|
||||
color: '#64748b',
|
||||
padding: 8,
|
||||
ticks: {
|
||||
color: "#64748b",
|
||||
padding: 8,
|
||||
},
|
||||
grid: {
|
||||
color: '#64748b',
|
||||
color: "#64748b",
|
||||
},
|
||||
border: {
|
||||
display: false, // Hide the extra border line on the left side
|
||||
display: false, // Hide the extra border line on the left side
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const props = defineProps({
|
||||
@@ -93,8 +98,8 @@ const props = defineProps({
|
||||
|
||||
const primeVueSetDataState = ref(null);
|
||||
const primeVueSetOptionsState = ref(null);
|
||||
const colorPrimary = ref('#0099FF');
|
||||
const colorSecondary = ref('#FFAA44');
|
||||
const colorPrimary = ref("#0099FF");
|
||||
const colorSecondary = ref("#FFAA44");
|
||||
|
||||
/**
|
||||
* Compare page and Performance have this same function.
|
||||
@@ -103,13 +108,15 @@ const colorSecondary = ref('#FFAA44');
|
||||
* @param customizeOptions.content
|
||||
* @param customizeOptions.ticksOfXAxis
|
||||
*/
|
||||
const getCustomizedScaleOption = (whichScaleObj, {customizeOptions: {
|
||||
content,
|
||||
ticksOfXAxis,
|
||||
},
|
||||
}) => {
|
||||
const getCustomizedScaleOption = (
|
||||
whichScaleObj,
|
||||
{ customizeOptions: { content, ticksOfXAxis } },
|
||||
) => {
|
||||
let resultScaleObj;
|
||||
resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
|
||||
resultScaleObj = customizeScaleChartOptionTitleByContent(
|
||||
whichScaleObj,
|
||||
content,
|
||||
);
|
||||
resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
|
||||
return resultScaleObj;
|
||||
};
|
||||
@@ -125,14 +132,14 @@ const customizeScaleChartOptionTicks = (scaleObjectToAlter, ticksOfXAxis) => {
|
||||
...scaleObjectToAlter,
|
||||
x: {
|
||||
...scaleObjectToAlter.x,
|
||||
ticks: {
|
||||
...scaleObjectToAlter.x.ticks,
|
||||
callback: function(value, index) {
|
||||
// Customize x-axis time ticks based on different intervals
|
||||
return ticksOfXAxis[index];
|
||||
},
|
||||
ticks: {
|
||||
...scaleObjectToAlter.x.ticks,
|
||||
callback: function (value, index) {
|
||||
// Customize x-axis time ticks based on different intervals
|
||||
return ticksOfXAxis[index];
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@@ -154,21 +161,21 @@ const customizeScaleChartOptionTitleByContent = (whichScaleObj, content) => {
|
||||
|
||||
return {
|
||||
...whichScaleObj,
|
||||
x: {
|
||||
...whichScaleObj.x,
|
||||
title: {
|
||||
...whichScaleObj.x.title,
|
||||
text: content.x
|
||||
}
|
||||
x: {
|
||||
...whichScaleObj.x,
|
||||
title: {
|
||||
...whichScaleObj.x.title,
|
||||
text: content.x,
|
||||
},
|
||||
y: {
|
||||
...whichScaleObj.y,
|
||||
title: {
|
||||
...whichScaleObj.y.title,
|
||||
text: content.y
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
y: {
|
||||
...whichScaleObj.y,
|
||||
title: {
|
||||
...whichScaleObj.y.title,
|
||||
text: content.y,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -190,7 +197,7 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
|
||||
|
||||
// Consider the dimension of chartData.data
|
||||
// When handling the Compare page case
|
||||
if(pageName === "Compare"){
|
||||
if (pageName === "Compare") {
|
||||
datasetsPrimary = chartData.data[0].data;
|
||||
datasetsSecondary = chartData.data[1].data;
|
||||
|
||||
@@ -210,9 +217,9 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
|
||||
tension: 0, // Bezier curve tension
|
||||
borderColor: colorSecondary,
|
||||
pointBackgroundColor: colorSecondary,
|
||||
}
|
||||
},
|
||||
];
|
||||
xData = chartData.data[0].data.map(item => new Date(item.x).getTime());
|
||||
xData = chartData.data[0].data.map((item) => new Date(item.x).getTime());
|
||||
} else {
|
||||
datasets = chartData.data;
|
||||
datasetsArr = [
|
||||
@@ -221,23 +228,25 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
|
||||
data: datasets,
|
||||
fill: false,
|
||||
tension: 0, // Bezier curve tension
|
||||
borderColor: '#0099FF',
|
||||
}
|
||||
borderColor: "#0099FF",
|
||||
},
|
||||
];
|
||||
xData = chartData.data.map(item => new Date(item.x).getTime());
|
||||
xData = chartData.data.map((item) => new Date(item.x).getTime());
|
||||
}
|
||||
|
||||
|
||||
// Customize X axis ticks due to different differences between min and max of data group
|
||||
// Compare page and Performance page share the same logic
|
||||
const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
|
||||
const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
|
||||
const customizedScaleOption = getCustomizedScaleOption(
|
||||
knownScaleLineChartOptions, {
|
||||
knownScaleLineChartOptions,
|
||||
{
|
||||
customizeOptions: {
|
||||
content, ticksOfXAxis,
|
||||
}
|
||||
});
|
||||
content,
|
||||
ticksOfXAxis,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
primeVueSetData = {
|
||||
labels: xData,
|
||||
@@ -251,20 +260,20 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
|
||||
top: 16,
|
||||
left: 8,
|
||||
right: 8,
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: false, // Legend
|
||||
tooltip: {
|
||||
displayColors: true,
|
||||
titleFont: {weight: 'normal'},
|
||||
titleFont: { weight: "normal" },
|
||||
callbacks: {
|
||||
label: function(tooltipItem) {
|
||||
// Get the data
|
||||
const label = tooltipItem.dataset.label || '';
|
||||
label: function (tooltipItem) {
|
||||
// Get the data
|
||||
const label = tooltipItem.dataset.label || "";
|
||||
|
||||
// Build the tooltip label with dataset color indicator
|
||||
return `${label}: ${tooltipItem.parsed.y}`; // Use Unicode block to represent color
|
||||
// Build the tooltip label with dataset color indicator
|
||||
return `${label}: ${tooltipItem.parsed.y}`; // Use Unicode block to represent color
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -3,41 +3,73 @@
|
||||
<div class="flex justify-center items-center min-h-full">
|
||||
<div class="w-full max-w-md p-8">
|
||||
<h2 class="text-center text-2xl mb-4 font-semibold">LOGIN</h2>
|
||||
<form action="#" method="post" class="w-full grid gap-2" @submit.prevent="signIn">
|
||||
<form
|
||||
action="#"
|
||||
method="post"
|
||||
class="w-full grid gap-2"
|
||||
@submit.prevent="signIn"
|
||||
>
|
||||
<label for="account" class="relative">
|
||||
<p class="text-sm font-normal mb-2">Account</p>
|
||||
<span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
|
||||
<IconMember class="h-5 w-5 fill-current"/>
|
||||
<span
|
||||
class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]"
|
||||
>
|
||||
<IconMember class="h-5 w-5 fill-current" />
|
||||
</span>
|
||||
<input type="text" id="account" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 "
|
||||
:class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username"
|
||||
<input
|
||||
type="text"
|
||||
id="account"
|
||||
class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1"
|
||||
:class="{ 'border-danger': isInvalid }"
|
||||
required
|
||||
autofocus
|
||||
v-model.trim="auth.username"
|
||||
@change="changeHandler($event)"
|
||||
@focus="onInputAccountFocus"/>
|
||||
@focus="onInputAccountFocus"
|
||||
/>
|
||||
</label>
|
||||
<label for="passwordt" class="relative block">
|
||||
<p class="text-sm font-normal mb-2">Password</p>
|
||||
<span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
|
||||
<IconLockKey class="h-5 w-5 fill-current"/>
|
||||
<span
|
||||
class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]"
|
||||
>
|
||||
<IconLockKey class="h-5 w-5 fill-current" />
|
||||
</span>
|
||||
<input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon"
|
||||
class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1 "
|
||||
:class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"
|
||||
@focus="onInputPwdFocus"/>
|
||||
<span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password"
|
||||
@click="showPassword = !showPassword">
|
||||
<IconEyeOpen class="h-5 w-5" v-if="showPassword"/>
|
||||
<IconEyeClose class="h-5 w-5" v-else/>
|
||||
<input
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
id="password"
|
||||
aria-describedby="password-addon"
|
||||
class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none focus:border-primary focus:ring-1"
|
||||
:class="{ 'border-danger': isInvalid }"
|
||||
required
|
||||
v-model.trim="auth.password"
|
||||
@change="changeHandler($event)"
|
||||
@focus="onInputPwdFocus"
|
||||
/>
|
||||
<span
|
||||
class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer"
|
||||
v-show="auth.password"
|
||||
@click="showPassword = !showPassword"
|
||||
>
|
||||
<IconEyeOpen class="h-5 w-5" v-if="showPassword" />
|
||||
<IconEyeClose class="h-5 w-5" v-else />
|
||||
</span>
|
||||
</label>
|
||||
<p class="my-4 text-danger">
|
||||
<span v-show="isInvalid">
|
||||
<IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>
|
||||
Incorrect account or password.
|
||||
<IconWarnTriangle
|
||||
class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"
|
||||
/>
|
||||
Incorrect account or password.
|
||||
</span>
|
||||
</p>
|
||||
<button id="login_btn_main_btn" type="submit" class="w-full btn btn-lg"
|
||||
<button
|
||||
id="login_btn_main_btn"
|
||||
type="submit"
|
||||
class="w-full btn btn-lg"
|
||||
:class="isDisabledButton ? 'btn-disable' : 'btn-c-primary'"
|
||||
:disabled="isDisabledButton">
|
||||
:disabled="isDisabledButton"
|
||||
>
|
||||
Log in
|
||||
</button>
|
||||
</form>
|
||||
@@ -56,15 +88,15 @@
|
||||
* form, password visibility toggle, and return-to URL support.
|
||||
*/
|
||||
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useLoginStore } from '@/stores/login';
|
||||
import IconMember from '@/components/icons/IconMember.vue';
|
||||
import IconLockKey from '@/components/icons/IconLockKey.vue';
|
||||
import IconEyeOpen from '@/components/icons/IconEyeOpen.vue';
|
||||
import IconEyeClose from '@/components/icons/IconEyeClose.vue';
|
||||
import IconWarnTriangle from '@/components/icons/IconWarnTriangle.vue';
|
||||
import { ref, computed } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useLoginStore } from "@/stores/login";
|
||||
import IconMember from "@/components/icons/IconMember.vue";
|
||||
import IconLockKey from "@/components/icons/IconLockKey.vue";
|
||||
import IconEyeOpen from "@/components/icons/IconEyeOpen.vue";
|
||||
import IconEyeClose from "@/components/icons/IconEyeClose.vue";
|
||||
import IconWarnTriangle from "@/components/icons/IconWarnTriangle.vue";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
@@ -80,7 +112,9 @@ const isJustFocus = ref(true);
|
||||
|
||||
// Computed
|
||||
const isDisabledButton = computed(() => {
|
||||
return auth.value.username === '' || auth.value.password === '' || isInvalid.value;
|
||||
return (
|
||||
auth.value.username === "" || auth.value.password === "" || isInvalid.value
|
||||
);
|
||||
});
|
||||
|
||||
// Methods
|
||||
@@ -90,39 +124,37 @@ const isDisabledButton = computed(() => {
|
||||
*/
|
||||
function changeHandler(event) {
|
||||
const inputValue = event.target.value;
|
||||
if(inputValue !== '') {
|
||||
if (inputValue !== "") {
|
||||
isInvalid.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onInputAccountFocus(){
|
||||
}
|
||||
function onInputAccountFocus() {}
|
||||
|
||||
function onInputPwdFocus(){
|
||||
}
|
||||
function onInputPwdFocus() {}
|
||||
|
||||
// Created logic
|
||||
// Handle the case where a user pastes a page URL into the browser without being logged in
|
||||
// btoa: Base64-encode the string
|
||||
if(route.query['return-to']) {
|
||||
setRememberedReturnToUrl(route.query['return-to']);
|
||||
if (route.query["return-to"]) {
|
||||
setRememberedReturnToUrl(route.query["return-to"]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Hide the eyes from a password input in MS Edge */
|
||||
input::-ms-reveal,
|
||||
input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
/* Hide the keys from the inputs in safair */
|
||||
input::-webkit-contacts-auto-fill-button,
|
||||
input::-webkit-credentials-auto-fill-button {
|
||||
visibility: hidden;
|
||||
display: none !important;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
/* Hide the eyes from a password input in MS Edge */
|
||||
input::-ms-reveal,
|
||||
input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
/* Hide the keys from the inputs in safair */
|
||||
input::-webkit-contacts-auto-fill-button,
|
||||
input::-webkit-credentials-auto-fill-button {
|
||||
visibility: hidden;
|
||||
display: none !important;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,9 +22,9 @@
|
||||
* logged-in user's profile information.
|
||||
*/
|
||||
|
||||
import { onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useLoginStore } from '@/stores/login';
|
||||
import { onMounted } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useLoginStore } from "@/stores/login";
|
||||
|
||||
const store = useLoginStore();
|
||||
const { userData } = storeToRefs(store);
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
<template>
|
||||
<header id="notfound_404">
|
||||
<Header/>
|
||||
<Navbar/>
|
||||
<Header />
|
||||
<Navbar />
|
||||
</header>
|
||||
<main>
|
||||
<div class="container text-center pt-7 pb-12">
|
||||
<h2 class="mb-7">404</h2>
|
||||
<p>The page you are looking for does not exist.</p>
|
||||
<p class="mb-7">Please check the URL or go back to the Files page.</p>
|
||||
<router-link to="/files" class="btn btn-c-primary btn-lg">Go to Files</router-link>
|
||||
<router-link to="/files" class="btn btn-c-primary btn-lg"
|
||||
>Go to Files</router-link
|
||||
>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -1,56 +1,100 @@
|
||||
<template>
|
||||
<section class="h-screen-main w-full px-4 flex flex-col justify-between items-start">
|
||||
<section
|
||||
class="h-screen-main w-full px-4 flex flex-col justify-between items-start"
|
||||
>
|
||||
<!-- Upload Content -->
|
||||
<div class="w-full h-[calc(100%_-_64px)]">
|
||||
<!-- File name -->
|
||||
<!-- cursor-pointer -->
|
||||
<div class="h-12 pl-1 border-b border-neutral-300 flex items-center">
|
||||
<InputText type="text" v-model="fileName" id="fileNameInput" class="rounded !border-transparent !font-bold !text-base !py-1 min-w-[1px] w-auto" @input="onInput" @blur="onBlur" maxlength="200" title="Rename"/>
|
||||
<InputText
|
||||
type="text"
|
||||
v-model="fileName"
|
||||
id="fileNameInput"
|
||||
class="rounded !border-transparent !font-bold !text-base !py-1 min-w-[1px] w-auto"
|
||||
@input="onInput"
|
||||
@blur="onBlur"
|
||||
maxlength="200"
|
||||
title="Rename"
|
||||
/>
|
||||
</div>
|
||||
<!-- Upload notification -->
|
||||
<div class="flex justify-start items-center space-x-2 ml-2 py-2">
|
||||
<span class="material-symbols-outlined text-neutral-700 cursor-pointer" v-tooltip.right="tooltipUpload">info</span>
|
||||
<span
|
||||
class="material-symbols-outlined text-neutral-700 cursor-pointer"
|
||||
v-tooltip.right="tooltipUpload"
|
||||
>info</span
|
||||
>
|
||||
<span class="w-px h-7 bg-neutral-300"></span>
|
||||
<!-- Upload text -->
|
||||
<div>
|
||||
<div v-if="!isDisabled"></div>
|
||||
<div v-else class="flex justify-start items-center space-x-2 duration-700">
|
||||
<div
|
||||
v-else
|
||||
class="flex justify-start items-center space-x-2 duration-700"
|
||||
>
|
||||
<p v-if="informData.length !== 0" class="text-primary text-sm">
|
||||
Need to select
|
||||
<span v-for="(item, index) in informData" :key="index">{{ item.label }}<span v-if="index !== informData.length - 1">, </span></span>.
|
||||
<span v-for="(item, index) in informData" :key="index"
|
||||
>{{ item.label
|
||||
}}<span v-if="index !== informData.length - 1">, </span></span
|
||||
>.
|
||||
</p>
|
||||
<div v-if="repeatedData.length !== 0" class="duration-700">
|
||||
<p v-if="repeatedData.length === 1" class="text-danger text-sm">
|
||||
{{repeatedData[0].label}} has been assigned.
|
||||
{{ repeatedData[0].label }} has been assigned.
|
||||
</p>
|
||||
<p v-else class="text-danger text-sm">
|
||||
<span v-for="(item, index) in repeatedData" :key="index">{{ item.label }}<span v-if="index !== repeatedData.length - 1">, </span></span>
|
||||
<span v-for="(item, index) in repeatedData" :key="index"
|
||||
>{{ item.label
|
||||
}}<span v-if="index !== repeatedData.length - 1"
|
||||
>,
|
||||
</span></span
|
||||
>
|
||||
have been assigned.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Upload table -->
|
||||
<div class="overflow-y-auto overflow-x-auto scrollbar max-h-[calc(100%_-_94px)]">
|
||||
<table class="text-sm border-separate border-spacing-0 h-full overflow-y-auto overflow-x-auto scrollbar">
|
||||
<caption class="hidden">Upload</caption>
|
||||
<div
|
||||
class="overflow-y-auto overflow-x-auto scrollbar max-h-[calc(100%_-_94px)]"
|
||||
>
|
||||
<table
|
||||
class="text-sm border-separate border-spacing-0 h-full overflow-y-auto overflow-x-auto scrollbar"
|
||||
>
|
||||
<caption class="hidden">
|
||||
Upload
|
||||
</caption>
|
||||
<thead class="sticky top-0 bg-neutral-10">
|
||||
<tr class="hidden"><th></th></tr>
|
||||
<tr>
|
||||
<td v-for="(item, index) in uploadDetail?.columns" :key="index" class="border border-neutral-500 p-2 truncate max-w-[198px]">{{ item }}</td>
|
||||
<tr class="hidden">
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td v-for="(item, index) in uploadDetail?.columns" :key="index" class="px-2 py-1 bg-neutral-300 border border-neutral-500 max-w-[198px]">
|
||||
<td
|
||||
v-for="(item, index) in uploadDetail?.columns"
|
||||
:key="index"
|
||||
class="border border-neutral-500 p-2 truncate max-w-[198px]"
|
||||
>
|
||||
{{ item }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
v-for="(item, index) in uploadDetail?.columns"
|
||||
:key="index"
|
||||
class="px-2 py-1 bg-neutral-300 border border-neutral-500 max-w-[198px]"
|
||||
>
|
||||
<Dropdown
|
||||
v-model="selectedColumns[index]"
|
||||
:options="columnType"
|
||||
optionLabel="name"
|
||||
placeholder=""
|
||||
class="w-[180px] !border-neutral-500 "
|
||||
:data-type="item"
|
||||
:inputId="index.toString()"
|
||||
:inputClass="[selectedColumns[index]?.color, 'text-sm']"
|
||||
v-model="selectedColumns[index]"
|
||||
:options="columnType"
|
||||
optionLabel="name"
|
||||
placeholder=""
|
||||
class="w-[180px] !border-neutral-500"
|
||||
:data-type="item"
|
||||
:inputId="index.toString()"
|
||||
:inputClass="[selectedColumns[index]?.color, 'text-sm']"
|
||||
>
|
||||
<template #option="slotProps">
|
||||
<div :class="slotProps.option.color" class="text-sm">
|
||||
@@ -63,7 +107,13 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in uploadDetail?.data" :key="index">
|
||||
<td v-for="(itemDetail, key) in item" :key="key" class="border border-neutral-500 p-2 truncate max-w-[198px]">{{ itemDetail }}</td>
|
||||
<td
|
||||
v-for="(itemDetail, key) in item"
|
||||
:key="key"
|
||||
class="border border-neutral-500 p-2 truncate max-w-[198px]"
|
||||
>
|
||||
{{ itemDetail }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -71,10 +121,22 @@
|
||||
</div>
|
||||
<!-- Upload button -->
|
||||
<div class="w-full text-right space-x-4 px-8 py-4">
|
||||
<button type="button" class="btn btn-sm btn-neutral" @click="cancel">Cancel</button>
|
||||
<button type="button" class="btn btn-sm btn-neutral" @click="reset">Reset</button>
|
||||
<button type="button" class="btn btn-sm" @click="submit" :disabled="isDisabled" :class="isDisabled ? 'btn-disable' : 'btn-neutral'">Upload</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-neutral" @click="cancel">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-neutral" @click="reset">
|
||||
Reset
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm"
|
||||
@click="submit"
|
||||
:disabled="isDisabled"
|
||||
:class="isDisabled ? 'btn-disable' : 'btn-neutral'"
|
||||
>
|
||||
Upload
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
@@ -90,27 +152,31 @@
|
||||
* upload submission.
|
||||
*/
|
||||
|
||||
import { useFilesStore } from '@/stores/files';
|
||||
import { useFilesStore } from "@/stores/files";
|
||||
|
||||
export default {
|
||||
beforeRouteEnter(to, from, next){
|
||||
beforeRouteEnter(to, from, next) {
|
||||
// An uploadID is required to enter this page
|
||||
next(vm => {
|
||||
next((vm) => {
|
||||
const filesStore = useFilesStore();
|
||||
if(filesStore.uploadId === null) {
|
||||
vm.$router.push({name: 'Files', replace: true});
|
||||
vm.$toast.default('Please upload your file.', {position: 'bottom'});
|
||||
if (filesStore.uploadId === null) {
|
||||
vm.$router.push({ name: "Files", replace: true });
|
||||
vm.$toast.default("Please upload your file.", { position: "bottom" });
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useLoadingStore } from '@/stores/loading';
|
||||
import { uploadFailedFirst, uploadSuccess, uploadConfirm } from '@/module/alertModal.js'
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useLoadingStore } from "@/stores/loading";
|
||||
import {
|
||||
uploadFailedFirst,
|
||||
uploadSuccess,
|
||||
uploadConfirm,
|
||||
} from "@/module/alertModal.js";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
@@ -128,21 +194,70 @@ const tooltipUpload = {
|
||||
4. Timestamp: The time of occurrence of a particular event, such as the start or end of an activity.
|
||||
5. Status: Activity status, such as Start or Complete.
|
||||
6. Attribute: A property that can be associated with a case to provide additional information about that case.`,
|
||||
// Resource is not available yet
|
||||
// 7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.
|
||||
class: '!max-w-[400px] !text-[10px] !opacity-80',
|
||||
autoHide: false,
|
||||
// Resource is not available yet
|
||||
// 7. Resource: A resource refers to any entity that is required to carry out a business process. This can include people, equipment, software, or any other type of asset.
|
||||
class: "!max-w-[400px] !text-[10px] !opacity-80",
|
||||
autoHide: false,
|
||||
};
|
||||
|
||||
const columnType = [
|
||||
{ name: 'Case ID*', code: 'case_id', color: '!text-secondary', value: '', label: 'Case ID', required: true },
|
||||
{ name: 'Timestamp*', code: 'timestamp', color: '!text-secondary', value: '', label: 'Timestamp', required: true },
|
||||
{ name: 'Status*', code: 'status', color: '!text-secondary', value: '', label: 'Status', required: true },
|
||||
{ name: 'Activity*', code: 'name', color: '!text-secondary', value: '', label: 'Activity', required: true },
|
||||
{ name: 'Activity Instance ID*', code: 'instance', color: '!text-secondary', value: '', label: 'Activity Instance ID', required: true },
|
||||
{ name: 'Case Attribute', code: 'case_attributes', color: '!text-primary', value: '', label: 'Case Attribute', required: false },
|
||||
{
|
||||
name: "Case ID*",
|
||||
code: "case_id",
|
||||
color: "!text-secondary",
|
||||
value: "",
|
||||
label: "Case ID",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "Timestamp*",
|
||||
code: "timestamp",
|
||||
color: "!text-secondary",
|
||||
value: "",
|
||||
label: "Timestamp",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "Status*",
|
||||
code: "status",
|
||||
color: "!text-secondary",
|
||||
value: "",
|
||||
label: "Status",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "Activity*",
|
||||
code: "name",
|
||||
color: "!text-secondary",
|
||||
value: "",
|
||||
label: "Activity",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "Activity Instance ID*",
|
||||
code: "instance",
|
||||
color: "!text-secondary",
|
||||
value: "",
|
||||
label: "Activity Instance ID",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "Case Attribute",
|
||||
code: "case_attributes",
|
||||
color: "!text-primary",
|
||||
value: "",
|
||||
label: "Case Attribute",
|
||||
required: false,
|
||||
},
|
||||
// { name: 'Resource', code: '', color: '', value: '', label: 'Resource', required: false }, // Not available yet; may be added in the future
|
||||
{ name: 'Not Assigned', code: '', color: '!text-neutral-700', value: '', label: 'Not Assigned', required: false },
|
||||
{
|
||||
name: "Not Assigned",
|
||||
code: "",
|
||||
color: "!text-neutral-700",
|
||||
value: "",
|
||||
label: "Not Assigned",
|
||||
required: false,
|
||||
},
|
||||
];
|
||||
|
||||
const selectedColumns = ref([]);
|
||||
@@ -156,15 +271,23 @@ const isDisabled = computed(() => {
|
||||
// 1. Length must match; every column must be assigned
|
||||
// 2. Must not be null or undefined
|
||||
const hasValue = !selectedColumns.value.includes(undefined);
|
||||
const result = !(selectedColumns.value.length === uploadDetail.value?.columns.length
|
||||
&& informData.value.length === 0 && repeatedData.value.length === 0 && hasValue);
|
||||
const result = !(
|
||||
selectedColumns.value.length === uploadDetail.value?.columns.length &&
|
||||
informData.value.length === 0 &&
|
||||
repeatedData.value.length === 0 &&
|
||||
hasValue
|
||||
);
|
||||
return result;
|
||||
});
|
||||
|
||||
// Watch
|
||||
watch(selectedColumns, (newVal) => {
|
||||
updateValidationData(newVal);
|
||||
}, { deep: true });
|
||||
watch(
|
||||
selectedColumns,
|
||||
(newVal) => {
|
||||
updateValidationData(newVal);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// Methods
|
||||
/**
|
||||
@@ -174,14 +297,14 @@ watch(selectedColumns, (newVal) => {
|
||||
function onBlur(e) {
|
||||
const baseWidth = 20;
|
||||
|
||||
if(e.target.value === '') {
|
||||
if (e.target.value === "") {
|
||||
e.target.value = uploadFileName.value;
|
||||
const textWidth = getTextWidth(e.target.value, e.target);
|
||||
e.target.style.width = baseWidth + textWidth + 'px';
|
||||
}else if(e.target.value !== e.target.value.trim()) {
|
||||
e.target.style.width = baseWidth + textWidth + "px";
|
||||
} else if (e.target.value !== e.target.value.trim()) {
|
||||
e.target.value = e.target.value.trim();
|
||||
const textWidth = getTextWidth(e.target.value, e.target);
|
||||
e.target.style.width = baseWidth + textWidth + 'px';
|
||||
e.target.style.width = baseWidth + textWidth + "px";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -193,7 +316,7 @@ function onInput(e) {
|
||||
const baseWidth = 20;
|
||||
const textWidth = getTextWidth(e.target.value, e.target);
|
||||
|
||||
e.target.style.width = baseWidth + textWidth + 'px';
|
||||
e.target.style.width = baseWidth + textWidth + "px";
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -204,12 +327,12 @@ function onInput(e) {
|
||||
*/
|
||||
function getTextWidth(text, e) {
|
||||
// Replace spaces with non-breaking spaces
|
||||
const processedText = text.replace(/ /g, '\u00a0');
|
||||
const hiddenSpan = document.createElement('span');
|
||||
const processedText = text.replace(/ /g, "\u00a0");
|
||||
const hiddenSpan = document.createElement("span");
|
||||
|
||||
hiddenSpan.innerHTML = processedText;
|
||||
hiddenSpan.style.font = window.getComputedStyle(e).font;
|
||||
hiddenSpan.style.visibility = 'hidden';
|
||||
hiddenSpan.style.visibility = "hidden";
|
||||
document.body.appendChild(hiddenSpan);
|
||||
const width = hiddenSpan.getBoundingClientRect().width;
|
||||
document.body.removeChild(hiddenSpan);
|
||||
@@ -224,28 +347,32 @@ function getTextWidth(text, e) {
|
||||
function updateValidationData(data) {
|
||||
const nameOccurrences = {};
|
||||
const noSortedRepeatedData = []; // Unsorted duplicate selections
|
||||
const selectedData = [] // Already selected data
|
||||
const selectedData = []; // Already selected data
|
||||
|
||||
informData.value = []; // Not yet selected data
|
||||
repeatedData.value = []; // Duplicate selections
|
||||
|
||||
data.forEach(item => {
|
||||
data.forEach((item) => {
|
||||
const { name, code } = item;
|
||||
|
||||
if(nameOccurrences[name]) {
|
||||
if (nameOccurrences[name]) {
|
||||
// 'Not Assigned' and 'Case Attribute' are excluded from validation
|
||||
if(!code || code === 'case_attributes') return;
|
||||
if (!code || code === "case_attributes") return;
|
||||
nameOccurrences[name]++;
|
||||
// Each duplicate option should only appear once
|
||||
if(nameOccurrences[name] === 2){
|
||||
noSortedRepeatedData.push(item)
|
||||
if (nameOccurrences[name] === 2) {
|
||||
noSortedRepeatedData.push(item);
|
||||
}
|
||||
// Sort according to the dropdown menu order
|
||||
repeatedData.value = columnType.filter(column => noSortedRepeatedData.includes(column));
|
||||
}else {
|
||||
repeatedData.value = columnType.filter((column) =>
|
||||
noSortedRepeatedData.includes(column),
|
||||
);
|
||||
} else {
|
||||
nameOccurrences[name] = 1;
|
||||
selectedData.push(name);
|
||||
informData.value = columnType.filter(item => item.required ? !selectedData.includes(item.name) : false);
|
||||
informData.value = columnType.filter((item) =>
|
||||
item.required ? !selectedData.includes(item.name) : false,
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -259,19 +386,19 @@ function reset() {
|
||||
/** Navigates back to the Files page without uploading. */
|
||||
function cancel() {
|
||||
// Do not add to browser history
|
||||
router.push({name: 'Files', replace: true});
|
||||
router.push({ name: "Files", replace: true });
|
||||
}
|
||||
|
||||
/** Submits the column mapping and triggers the second-stage upload. */
|
||||
async function submit() {
|
||||
// Post API Data
|
||||
const fetchData = {
|
||||
timestamp: '',
|
||||
case_id: '',
|
||||
name: '',
|
||||
instance: '',
|
||||
status: '',
|
||||
case_attributes: []
|
||||
timestamp: "",
|
||||
case_id: "",
|
||||
name: "",
|
||||
instance: "",
|
||||
status: "",
|
||||
case_attributes: [],
|
||||
};
|
||||
// Assign values
|
||||
const haveValueData = selectedColumns.value.map((column, i) => {
|
||||
@@ -280,33 +407,33 @@ async function submit() {
|
||||
name: column.name,
|
||||
code: column.code,
|
||||
color: column.color,
|
||||
value: uploadDetail.value.columns[i]
|
||||
}
|
||||
value: uploadDetail.value.columns[i],
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Get the desired file name to change
|
||||
uploadFileName.value = fileName.value;
|
||||
// Set the data for the second-stage upload
|
||||
haveValueData.forEach(column => {
|
||||
if(column !== undefined) {
|
||||
haveValueData.forEach((column) => {
|
||||
if (column !== undefined) {
|
||||
switch (column.code) {
|
||||
case 'timestamp':
|
||||
case "timestamp":
|
||||
fetchData.timestamp = column.value;
|
||||
break;
|
||||
case 'case_id':
|
||||
case "case_id":
|
||||
fetchData.case_id = column.value;
|
||||
break;
|
||||
case 'name':
|
||||
case "name":
|
||||
fetchData.name = column.value;
|
||||
break;
|
||||
case 'instance':
|
||||
case "instance":
|
||||
fetchData.instance = column.value;
|
||||
break;
|
||||
case 'status':
|
||||
case "status":
|
||||
fetchData.status = column.value;
|
||||
break;
|
||||
case 'case_attributes':
|
||||
case "case_attributes":
|
||||
fetchData.case_attributes.push(column.value);
|
||||
break;
|
||||
default:
|
||||
@@ -320,19 +447,24 @@ async function submit() {
|
||||
// Mounted
|
||||
onMounted(async () => {
|
||||
// Watch only once
|
||||
const unwatch = watch(fileName, (newValue) => {
|
||||
const unwatch = watch(
|
||||
fileName,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
const inputElement = document.getElementById('fileNameInput');
|
||||
const inputElement = document.getElementById("fileNameInput");
|
||||
const baseWidth = 20;
|
||||
const textWidth = getTextWidth(fileName.value, inputElement);
|
||||
inputElement.style.width = baseWidth + textWidth + 'px';
|
||||
inputElement.style.width = baseWidth + textWidth + "px";
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
{ immediate: true },
|
||||
);
|
||||
showEdit.value = true;
|
||||
if(uploadId.value) await filesStore.getUploadDetail();
|
||||
selectedColumns.value = Array.from({ length: uploadDetail.value.columns.length }, () => columnType[columnType.length - 1]); // Default to "Not Assigned"
|
||||
if (uploadId.value) await filesStore.getUploadDetail();
|
||||
selectedColumns.value = Array.from(
|
||||
{ length: uploadDetail.value.columns.length },
|
||||
() => columnType[columnType.length - 1],
|
||||
); // Default to "Not Assigned"
|
||||
unwatch();
|
||||
isLoading.value = false;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user