Skip to content

Commit

Permalink
refactor: apply pr review
Browse files Browse the repository at this point in the history
Signed-off-by: NaYeong,Kim <[email protected]>
  • Loading branch information
skdud4659 committed Dec 10, 2024
1 parent 5d32a85 commit 5f4a91a
Show file tree
Hide file tree
Showing 43 changed files with 269 additions and 243 deletions.
27 changes: 18 additions & 9 deletions apps/web/src/common/composables/current-menu-id/index.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,28 @@
import type { Ref } from 'vue';
import { computed, reactive, toRef } from 'vue';
import { useRoute } from 'vue-router/composables';

import { clone } from 'lodash';

import { MENU_ID } from '@/lib/menu/config';


import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
interface UseCurrentMenuIdReturnType {
currentMenuId: Ref<string>;
}

export const useCurrentMenuId = (): string => {
export const useCurrentMenuId = (): UseCurrentMenuIdReturnType => {
const route = useRoute();
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
const targetMenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
return '';
}
return targetMenuId;

const state = reactive({
currentMenuId: computed<string>(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
return closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
}),
});

return {
currentMenuId: toRef(state, 'currentMenuId'),
};
};
19 changes: 16 additions & 3 deletions apps/web/src/common/composables/page-editable-status/index.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,31 @@
import { computed, reactive } from 'vue';
import type { Ref } from 'vue';
import { computed, reactive, toRef } from 'vue';

import { useUserStore } from '@/store/user/user-store';

import type { PageAccessMap } from '@/lib/access-control/config';

import { useCurrentMenuId } from '@/common/composables/current-menu-id';

export const usePageEditableStatus = (): boolean|undefined => {
interface UsePageEditableStatusReturnType {
hasReadWriteAccess: Ref<boolean|undefined>;
}

export const usePageEditableStatus = (): UsePageEditableStatusReturnType => {
const userStore = useUserStore();
const userGetters = userStore.getters;

const { currentMenuId } = useCurrentMenuId();

const storeState = reactive({
pageAccessPermissionMap: computed<PageAccessMap>(() => userGetters.pageAccessPermissionMap),
});

return storeState.pageAccessPermissionMap[useCurrentMenuId()]?.write;
const state = reactive({
hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[currentMenuId.value]?.write),
});

return {
hasReadWriteAccess: toRef(state, 'hasReadWriteAccess'),
};
};
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ const route = useRoute();
const router = useRouter();
const { width } = useWindowSize();
const { currentMenuId } = useCurrentMenuId();
const storeState = reactive({
isHideNavRail: computed(() => gnbGetters.isHideNavRail),
isMinimizeNavRail: computed(() => gnbGetters.isMinimizeNavRail),
Expand Down Expand Up @@ -89,6 +91,12 @@ const state = reactive({
});
return result;
}),
selectedMenuId: computed<string>(() => {
if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
return '';
}
return currentMenuId.value;
}),
});
const handleMouseEvent = (value: boolean) => {
Expand Down Expand Up @@ -157,7 +165,7 @@ onMounted(async () => {
:to="(item.type === 'header' && item.subMenuList?.length > 0) ? '' : item.to"
class="service-menu"
:class="{
'is-selected': useCurrentMenuId().split('.').includes(item.id) && item.type !== 'header',
'is-selected': state.selectedMenuId.split('.').includes(item.id) && item.type !== 'header',
'is-only-label': item.type === 'header' && item.subMenuList?.length > 0
}"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ const favoriteStore = useFavoriteStore();
const favoriteGetters = favoriteStore.getters;
const recentStore = useRecentStore();
const { currentMenuId } = useCurrentMenuId();
const router = useRouter();
const selectDropdownRef = ref<PSelectDropdown|null>(null);
Expand All @@ -79,9 +81,8 @@ const selectWorkspace = (name: string): void => {
if (!workspaceId || workspaceId === storeState.currentWorkspaceId) return;
appContextStore.setGlobalGrantLoading(true);
const targetMenuId: string = useCurrentMenuId();
userWorkspaceStore.setCurrentWorkspace(workspaceId);
router.push({ name: MENU_INFO_MAP[targetMenuId].routeName, params: { workspaceId } }).catch(() => {});
router.push({ name: MENU_INFO_MAP[currentMenuId.value].routeName, params: { workspaceId } }).catch(() => {});
};
const formatMenuItems = (menuItems: WorkspaceModel[] = []): MenuItem[] => {
const result = menuItems.length > 0 ? [
Expand Down
10 changes: 3 additions & 7 deletions apps/web/src/services/advanced/AdvancedLSB.vue
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { MENU_ID } from '@/lib/menu/config.js';
import { useCurrentMenuId } from '@/common/composables/current-menu-id';
import BookmarkLSB from '@/services/advanced/components/BookmarkLSB.vue';
import DomainSettingsLSB from '@/services/advanced/components/PreferencesLSB.vue';
const state = reactive({
menuId: computed<string>(() => useCurrentMenuId()),
});
const { currentMenuId } = useCurrentMenuId();
</script>

<template>
<fragment>
<bookmark-l-s-b v-if="state.menuId === MENU_ID.BOOKMARK" />
<domain-settings-l-s-b v-if="state.menuId === MENU_ID.PREFERENCES" />
<bookmark-l-s-b v-if="currentMenuId === MENU_ID.BOOKMARK" />
<domain-settings-l-s-b v-if="currentMenuId === MENU_ID.PREFERENCES" />
</fragment>
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ const bookmarkPageStore = useBookmarkPageStore();
const bookmarkPageState = bookmarkPageStore.state;
const bookmarkPageGetters = bookmarkPageStore.getters;
const { hasReadWriteAccess } = usePageEditableStatus();
const route = useRoute();
const router = useRouter();
Expand Down Expand Up @@ -74,7 +76,6 @@ const state = reactive({
return state.workspaceInfo?.name || '';
}),
workspaceInfo: computed<WorkspaceModel|undefined>(() => getWorkspaceInfo(state.group, storeState.workspaceList)),
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
});
const hideMenu = () => {
Expand Down Expand Up @@ -186,7 +187,7 @@ onUnmounted(() => {
v-bind="workspaceStateFormatter( WORKSPACE_STATE.DORMANT)"
class="capitalize state"
/>
<template v-if="state.folder && state.group === 'global'">
<template v-if="hasReadWriteAccess && state.folder && state.group === 'global'">
<div class="title-right-extra-wrapper">
<p-icon-button name="ic_edit-text"
style-type="transparent"
Expand All @@ -201,7 +202,7 @@ onUnmounted(() => {
</template>
</p-heading>
</template>
<template v-if="state.hasReadWriteAccess"
<template v-if="hasReadWriteAccess"
#extra
>
<template v-if="state.group === 'global'">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ const bookmarkPageStore = useBookmarkPageStore();
const bookmarkPageState = bookmarkPageStore.state;
const bookmarkPageGetters = bookmarkPageStore.getters;
const { hasReadWriteAccess } = usePageEditableStatus();
const route = useRoute();
const router = useRouter();
Expand All @@ -52,7 +54,6 @@ const storeState = reactive({
const state = reactive({
group: computed<string>(() => route.params.group),
folder: computed<string>(() => route.params.folder),
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
});
const tableState = reactive({
fields: computed(() => [
Expand Down Expand Up @@ -260,7 +261,7 @@ watch([() => route.params, () => storeState.bookmarkFolderList], async ([params,
<span class="col-link">{{ value ?? '--' }}</span>
</template>
<template #col-action_button-format="{item}">
<p-select-dropdown v-if="state.hasReadWriteAccess && item.isGlobal"
<p-select-dropdown v-if="hasReadWriteAccess && item.isGlobal"
:menu="getDropdownMenu(item)"
style-type="icon-button"
button-icon="ic_ellipsis-horizontal"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,10 @@ const workspaceGroupPageState = workspaceGroupPageStore.state;
const userTabState = workspaceGroupPageStore.userTabState;
const workspaceGroupPageGetters = workspaceGroupPageStore.getters;
const { hasReadWriteAccess } = usePageEditableStatus();
const emit = defineEmits<{(e: 'refresh', payload: { isGroupUser?: boolean, isWorkspace?: boolean }): void; }>();
const state = reactive({
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
});
const tableState = reactive({
fields: computed<DataTableFieldType[]>(() => {
const defaultFields: DataTableFieldType[] = [
Expand All @@ -46,7 +45,7 @@ const tableState = reactive({
{ name: 'state', label: 'State' },
{ name: 'role', label: 'Role' },
];
if (state.hasReadWriteAccess) {
if (hasReadWriteAccess.value) {
defaultFields.push({ name: 'remove_button', label: ' ', sortable: false });
}
return defaultFields;
Expand Down Expand Up @@ -195,7 +194,7 @@ onUnmounted(() => {
heading-type="sub"
/>
</template>
<template v-if="state.hasReadWriteAccess"
<template v-if="hasReadWriteAccess"
#extra
>
<p-button style-type="negative-primary"
Expand Down Expand Up @@ -223,7 +222,7 @@ onUnmounted(() => {
:sort-desc="userTabState.sortDesc"
:this-page.sync="userTabState.thisPage"
:search-text.sync="userTabState.searchText"
:selectable="state.hasReadWriteAccess"
:selectable="hasReadWriteAccess"
sortable
searchable
@select="handleSelect"
Expand All @@ -243,7 +242,7 @@ onUnmounted(() => {
use-fixed-menu-style
style-type="transparent"
class="role-select-dropdown"
:disabled="!state.hasReadWriteAccess"
:disabled="!hasReadWriteAccess"
:menu="menuList"
:selected.sync="selectedItems"
:search-text.sync="searchText"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,13 @@ const workspaceGroupPageGetters = workspaceGroupPageStore.getters;
const allReferenceStore = useAllReferenceStore();
const userStore = useUserStore();
const { hasReadWriteAccess } = usePageEditableStatus();
interface WorkspaceTableItem extends WorkspaceModel {
remove_button: WorkspaceModel;
}
const state = reactive({
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
currency: computed<Currency|undefined>(() => workspaceGroupPageGetters.currency),
});
const tableState = reactive({
Expand All @@ -63,7 +64,7 @@ const tableState = reactive({
{ name: 'cost_info', label: 'Cost' },
{ name: 'created_at', label: 'Created' },
];
if (state.hasReadWriteAccess) {
if (hasReadWriteAccess.value) {
defaultFields.push({ name: 'remove_button', label: ' ', sortable: false });
}
return defaultFields;
Expand Down Expand Up @@ -190,7 +191,7 @@ const costInfoReduce = (arr: (number | {month: any})[] | any) => {
heading-type="sub"
/>
</template>
<template v-if="state.hasReadWriteAccess"
<template v-if="hasReadWriteAccess"
#extra
>
<p-button style-type="negative-primary"
Expand Down Expand Up @@ -219,7 +220,7 @@ const costInfoReduce = (arr: (number | {month: any})[] | any) => {
:sort-desc="workspaceTabState.sortDesc"
:this-page.sync="workspaceTabState.thisPage"
:search-text.sync="workspaceTabState.searchText"
:selectable="state.hasReadWriteAccess"
:selectable="hasReadWriteAccess"
sortable
searchable
@select="handleSelect"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ const bookmarkPageStore = useBookmarkPageStore();
const bookmarkPageState = bookmarkPageStore.state;
const bookmarkPageGetters = bookmarkPageStore.getters;
const { hasReadWriteAccess } = usePageEditableStatus();
const storeState = reactive({
modalType: computed<BookmarkModalType|undefined>(() => bookmarkState.modal.type),
Expand All @@ -46,7 +48,6 @@ const state = reactive({
name: BOOKMARK_MODAL_TYPE.FOLDER,
},
])),
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
});
const hideMenu = () => {
Expand Down Expand Up @@ -76,7 +77,7 @@ const handleClickDeleteButton = () => {
<template #heading>
<p-heading :title="$t('IAM.BOOKMARK.ALL_BOOKMARK')" />
</template>
<template v-if="state.hasReadWriteAccess"
<template v-if="hasReadWriteAccess"
#extra
>
<p-button style-type="tertiary"
Expand Down Expand Up @@ -105,7 +106,7 @@ const handleClickDeleteButton = () => {
</div>
</template>
</p-heading-layout>
<bookmark-management-table :has-read-write-access="state.hasReadWriteAccess" />
<bookmark-management-table :has-read-write-access="hasReadWriteAccess" />
</div>
</template>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ const router = useRouter();
const domainConfigStore = usePreferencesStore();
const domainConfigGetters = domainConfigStore.getters;
const { hasReadWriteAccess } = usePageEditableStatus();
const state = reactive({
isChanged: computed<boolean>(() => {
if ([state.wordtypeLogoUrl, state.symbolFaviconUrl, state.loginPageImageUrl, state.displayName,
Expand All @@ -31,7 +33,6 @@ const state = reactive({
wordtypeLogoUrl: undefined as string | undefined,
symbolFaviconUrl: undefined as string | undefined,
loginPageImageUrl: undefined as string | undefined,
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
});
/* Event */
Expand Down Expand Up @@ -72,7 +73,7 @@ watch(() => domainConfigGetters.loginPageImageUrl, (val) => {
<p-field-title label="Display Name" />
<p-text-input :value.sync="state.displayName"
:placeholder="domainConfigGetters.displayName"
:disabled="!state.hasReadWriteAccess"
:disabled="!hasReadWriteAccess"
/>
<div class="description">
{{ $t('IAM.DOMAIN_SETTINGS.DOMAIN_NAME_IMAGE_DESCRIPTION') }}
Expand All @@ -88,7 +89,7 @@ watch(() => domainConfigGetters.loginPageImageUrl, (val) => {
<div class="left-part">
<p-field-title label="Wordtype Logo URL" />
<p-text-input :value.sync="state.wordtypeLogoUrl"
:disabled="!state.hasReadWriteAccess"
:disabled="!hasReadWriteAccess"
/>
<div class="description">
{{ $t('IAM.DOMAIN_SETTINGS.WORDTYPE_LOGO_DESCRIPTION') }}
Expand All @@ -104,7 +105,7 @@ watch(() => domainConfigGetters.loginPageImageUrl, (val) => {
<div class="left-part">
<p-field-title label="Symbol & Favicon URL" />
<p-text-input :value.sync="state.symbolFaviconUrl"
:disabled="!state.hasReadWriteAccess"
:disabled="!hasReadWriteAccess"
/>
<div class="description">
{{ $t('IAM.DOMAIN_SETTINGS.SYMBOL_FAVICON_DESCRIPTION') }}
Expand All @@ -120,7 +121,7 @@ watch(() => domainConfigGetters.loginPageImageUrl, (val) => {
<div class="left-part">
<p-field-title label="Sign In Page Main Image URL" />
<p-text-input :value.sync="state.loginPageImageUrl"
:disabled="!state.hasReadWriteAccess"
:disabled="!hasReadWriteAccess"
/>
<div class="description">
{{ $t('IAM.DOMAIN_SETTINGS.SIGN_IN_PAGE_MAIN_IMAGE_DESCRIPTION') }}
Expand All @@ -133,7 +134,7 @@ watch(() => domainConfigGetters.loginPageImageUrl, (val) => {
</div>
</div>
</div>
<p-button :disabled="!state.hasReadWriteAccess || !state.isChanged"
<p-button :disabled="!hasReadWriteAccess || !state.isChanged"
class="save-button"
@click="handleSaveChanges"
>
Expand Down
Loading

0 comments on commit 5f4a91a

Please sign in to comment.