Skip to content

Commit

Permalink
feat: create page editable status custom hook
Browse files Browse the repository at this point in the history 
Signed-off-by: NaYeong,Kim <[email protected]>
  • Loading branch information
@skdud4659
skdud4659 committed Dec 10, 2024
1 parent e160ec7 commit ee75237
Show file tree
Hide file tree
Showing 38 changed files with 141 additions and 818 deletions.
18 changes: 18 additions & 0 deletions apps/web/src/common/composables/page-editable-status/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { computed, reactive } 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 => {
const userStore = useUserStore();
const userGetters = userStore.getters;

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

return storeState.pageAccessPermissionMap[useCurrentMenuId()]?.write;
};
24 changes: 3 additions & 21 deletions apps/web/src/services/advanced/components/BookmarkDetailContainer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
import type { TranslateResult } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router/composables';
import { at, clone } from 'lodash';
import { at } from 'lodash';
import {
PHeading, PButton, PContextMenu, PI, PIconButton, PStatus, PHeadingLayout,
Expand All @@ -18,15 +18,10 @@ import { i18n } from '@/translations';
import { makeAdminRouteName } from '@/router/helpers/route-helper';
import { useUserStore } from '@/store/user/user-store';
import type { PageAccessMap } from '@/lib/access-control/config';
import type { MenuId } from '@/lib/menu/config';
import { MENU_ID } from '@/lib/menu/config';
import { BOOKMARK_MODAL_TYPE } from '@/common/components/bookmark/constant/constant';
import { useBookmarkStore } from '@/common/components/bookmark/store/bookmark-store';
import type { BookmarkModalType, BookmarkItem } from '@/common/components/bookmark/type/type';
import { usePageEditableStatus } from '@/common/composables/page-editable-status';
import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
import { gray } from '@/styles/colors';
Expand All @@ -35,11 +30,8 @@ import { getWorkspaceInfo, workspaceStateFormatter } from '@/services/advanced/c
import { WORKSPACE_STATE } from '@/services/advanced/constants/workspace-constant';
import { ADVANCED_ROUTE } from '@/services/advanced/routes/route-constant';
import { useBookmarkPageStore } from '@/services/advanced/store/bookmark-page-store';
import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
import { WORKSPACE_HOME_ROUTE } from '@/services/workspace-home/routes/route-constant';
const userStore = useUserStore();
const bookmarkStore = useBookmarkStore();
const bookmarkState = bookmarkStore.state;
const bookmarkPageStore = useBookmarkPageStore();
Expand All @@ -56,7 +48,6 @@ const storeState = reactive({
selectedIndices: computed<number[]>(() => bookmarkPageState.selectedIndices),
bookmarkFolderList: computed<BookmarkItem[]>(() => bookmarkPageState.bookmarkFolderList),
bookmarkList: computed<BookmarkItem[]>(() => bookmarkPageGetters.bookmarkList),
pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
});
const state = reactive({
visibleMenu: false,
Expand All @@ -83,16 +74,7 @@ const state = reactive({
return state.workspaceInfo?.name || '';
}),
workspaceInfo: computed<WorkspaceModel|undefined>(() => getWorkspaceInfo(state.group, storeState.workspaceList)),
selectedMenuId: computed(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
return '';
}
return targetMenuId;
}),
hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
});
const hideMenu = () => {
Expand Down
23 changes: 2 additions & 21 deletions apps/web/src/services/advanced/components/BookmarkManagementDetailTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
import { computed, reactive, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router/composables';
import { clone } from 'lodash';
import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
import {
PToolboxTable, PLazyImg, PI, PDataLoader, PSelectStatus, PSelectDropdown,
Expand All @@ -20,29 +18,22 @@ import { i18n } from '@/translations';
import { makeAdminRouteName } from '@/router/helpers/route-helper';
import { useUserStore } from '@/store/user/user-store';
import type { PageAccessMap } from '@/lib/access-control/config';
import type { MenuId } from '@/lib/menu/config';
import { MENU_ID } from '@/lib/menu/config';
import { BOOKMARK_MODAL_TYPE } from '@/common/components/bookmark/constant/constant';
import { useBookmarkStore } from '@/common/components/bookmark/store/bookmark-store';
import type { BookmarkItem } from '@/common/components/bookmark/type/type';
import { usePageEditableStatus } from '@/common/composables/page-editable-status';
import { gray } from '@/styles/colors';
import { makeSearchQueryTagsHandler, makeValueHandler } from '@/services/advanced/composables/bookmark-data-helper';
import { BOOKMARK_TYPE, PageSizeOptions } from '@/services/advanced/constants/bookmark-constant';
import { ADVANCED_ROUTE } from '@/services/advanced/routes/route-constant';
import { useBookmarkPageStore } from '@/services/advanced/store/bookmark-page-store';
import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
const bookmarkStore = useBookmarkStore();
const bookmarkPageStore = useBookmarkPageStore();
const bookmarkPageState = bookmarkPageStore.state;
const bookmarkPageGetters = bookmarkPageStore.getters;
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
Expand All @@ -57,21 +48,11 @@ const storeState = reactive({
loading: computed<boolean>(() => bookmarkPageState.loading),
selectedType: computed<string>(() => bookmarkPageState.selectedType),
searchFilter: computed<ConsoleFilter[]>(() => bookmarkPageState.searchFilter),
pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
});
const state = reactive({
group: computed<string>(() => route.params.group),
folder: computed<string>(() => route.params.folder),
selectedMenuId: computed(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
return '';
}
return targetMenuId;
}),
hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
});
const tableState = reactive({
fields: computed(() => [
Expand Down
20 changes: 2 additions & 18 deletions apps/web/src/services/advanced/components/WorkspaceGroupTabGroupUser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@
import {
reactive, watch, onUnmounted, computed,
} from 'vue';
import { useRoute } from 'vue-router/composables';
import { clone } from 'lodash';
import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
import {
Expand All @@ -21,12 +18,10 @@ import type { WorkspaceGroupUpdateRoleParameters } from '@/schema/identity/works
import type { WorkspaceUser } from '@/schema/identity/workspace-group/model';
import { i18n } from '@/translations';
import { useUserStore } from '@/store/user/user-store';
import type { PageAccessMap } from '@/lib/access-control/config';
import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
import ErrorHandler from '@/common/composables/error/errorHandler';
import { usePageEditableStatus } from '@/common/composables/page-editable-status';
import { useRoleFormatter, groupUserStateFormatter } from '@/services/advanced/composables/refined-table-data';
import { useSelectDropDownList } from '@/services/advanced/composables/use-select-drop-down-list';
Expand All @@ -37,22 +32,11 @@ const workspaceGroupPageStore = useWorkspaceGroupPageStore();
const workspaceGroupPageState = workspaceGroupPageStore.state;
const userTabState = workspaceGroupPageStore.userTabState;
const workspaceGroupPageGetters = workspaceGroupPageStore.getters;
const userStore = useUserStore();
const route = useRoute();
const emit = defineEmits<{(e: 'refresh', payload: { isGroupUser?: boolean, isWorkspace?: boolean }): void; }>();
const storeState = reactive({
pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
});
const state = reactive({
selectedMenuId: computed(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
return closestRoute?.meta?.menuId;
}),
hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
});
const tableState = reactive({
fields: computed<DataTableFieldType[]>(() => {
Expand Down
19 changes: 2 additions & 17 deletions apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@
import {
computed, onMounted, reactive, watch,
} from 'vue';
import { useRoute } from 'vue-router/composables';
import dayjs from 'dayjs';
import { clone } from 'lodash';
import {
PButton, PHeading, PI, PLink, PStatus, PToolboxTable, PTooltip, PHeadingLayout,
Expand All @@ -22,8 +20,7 @@ import { useAllReferenceStore } from '@/store/reference/all-reference-store';
import type { WorkspaceReferenceMap } from '@/store/reference/workspace-reference-store';
import { useUserStore } from '@/store/user/user-store';
import type { PageAccessMap } from '@/lib/access-control/config';
import { usePageEditableStatus } from '@/common/composables/page-editable-status';
import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
import { gray } from '@/styles/colors';
Expand All @@ -35,31 +32,19 @@ import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-c
import { IAM_ROUTE } from '@/services/iam/routes/route-constant';
import { WORKSPACE_HOME_ROUTE } from '@/services/workspace-home/routes/route-constant';
const workspaceGroupPageStore = useWorkspaceGroupPageStore();
const workspaceGroupPageState = workspaceGroupPageStore.state;
const workspaceTabState = workspaceGroupPageStore.workspaceTabState;
const workspaceGroupPageGetters = workspaceGroupPageStore.getters;
const allReferenceStore = useAllReferenceStore();
const userStore = useUserStore();
const route = useRoute();
const storeState = reactive({
pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
});
interface WorkspaceTableItem extends WorkspaceModel {
remove_button: WorkspaceModel;
}
const state = reactive({
selectedMenuId: computed(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
return closestRoute?.meta?.menuId;
}),
hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
currency: computed<Currency|undefined>(() => workspaceGroupPageGetters.currency),
});
const tableState = reactive({
Expand Down
26 changes: 3 additions & 23 deletions apps/web/src/services/advanced/pages/admin/AdminBookmarkPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@ import { vOnClickOutside } from '@vueuse/components';
import {
computed, reactive,
} from 'vue';
import { useRoute } from 'vue-router/composables';
import { at, clone } from 'lodash';
import { at } from 'lodash';
import {
PHeading, PButton, PContextMenu, PHeadingLayout,
Expand All @@ -14,36 +13,26 @@ import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/typ
import { i18n } from '@/translations';
import { useUserStore } from '@/store/user/user-store';
import type { PageAccessMap } from '@/lib/access-control/config';
import type { MenuId } from '@/lib/menu/config';
import { MENU_ID } from '@/lib/menu/config';
import { BOOKMARK_MODAL_TYPE } from '@/common/components/bookmark/constant/constant';
import { useBookmarkStore } from '@/common/components/bookmark/store/bookmark-store';
import type { BookmarkModalType, BookmarkItem } from '@/common/components/bookmark/type/type';
import { usePageEditableStatus } from '@/common/composables/page-editable-status';
import BookmarkManagementTable from '@/services/advanced/components/BookmarkManagementTable.vue';
import { useBookmarkPageStore } from '@/services/advanced/store/bookmark-page-store';
import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
const bookmarkStore = useBookmarkStore();
const bookmarkState = bookmarkStore.state;
const bookmarkPageStore = useBookmarkPageStore();
const bookmarkPageState = bookmarkPageStore.state;
const bookmarkPageGetters = bookmarkPageStore.getters;
const userStore = useUserStore();
const route = useRoute();
const storeState = reactive({
modalType: computed<BookmarkModalType|undefined>(() => bookmarkState.modal.type),
bookmarkFolderList: computed<BookmarkItem[]>(() => bookmarkPageState.bookmarkFolderList),
bookmarkList: computed<BookmarkItem[]>(() => bookmarkPageGetters.bookmarkList),
selectedIndices: computed<number[]>(() => bookmarkPageGetters.selectedIndices),
pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
});
const state = reactive({
visibleMenu: false,
Expand All @@ -57,16 +46,7 @@ const state = reactive({
name: BOOKMARK_MODAL_TYPE.FOLDER,
},
])),
selectedMenuId: computed(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
return '';
}
return targetMenuId;
}),
hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
});
const hideMenu = () => {
Expand Down
30 changes: 3 additions & 27 deletions apps/web/src/services/advanced/pages/admin/AdminDomainSettingsAppearancePage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<script lang="ts" setup>
import { computed, reactive, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router/composables';
import { clone } from 'lodash';
import { useRouter } from 'vue-router/composables';
import {
PPaneLayout, PFieldTitle, PTextInput, PButton,
Expand All @@ -11,27 +9,14 @@ import {
import { i18n } from '@/translations';
import { usePreferencesStore } from '@/store/preferences/preferences-store';
import { useUserStore } from '@/store/user/user-store';
import type { PageAccessMap } from '@/lib/access-control/config';
import type { MenuId } from '@/lib/menu/config';
import { MENU_ID } from '@/lib/menu/config';
import ErrorHandler from '@/common/composables/error/errorHandler';
import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
import { usePageEditableStatus } from '@/common/composables/page-editable-status';
const router = useRouter();
const domainConfigStore = usePreferencesStore();
const domainConfigGetters = domainConfigStore.getters;
const userStore = useUserStore();
const route = useRoute();
const storeState = reactive({
pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
});
const state = reactive({
isChanged: computed<boolean>(() => {
if ([state.wordtypeLogoUrl, state.symbolFaviconUrl, state.loginPageImageUrl, state.displayName,
Expand All @@ -46,16 +31,7 @@ const state = reactive({
wordtypeLogoUrl: undefined as string | undefined,
symbolFaviconUrl: undefined as string | undefined,
loginPageImageUrl: undefined as string | undefined,
selectedMenuId: computed(() => {
const reversedMatched = clone(route.matched).reverse();
const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
const targetMenuId: MenuId = closestRoute?.meta?.menuId || MENU_ID.WORKSPACE_HOME;
if (route.name === COST_EXPLORER_ROUTE.LANDING._NAME) {
return '';
}
return targetMenuId;
}),
hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
hasReadWriteAccess: computed<boolean|undefined>(() => usePageEditableStatus()),
});
/* Event */
Expand Down
Loading

0 comments on commit ee75237

Please sign in to comment.