Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(WorkspaceGroupUser): apply workspaceGroupUser api & UI #4607

Merged
merged 6 commits into from
Aug 29, 2024
Merged

feat(WorkspaceGroupUser): apply workspaceGroupUser api & UI #4607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
898b351
feat: apply getWorkspaceGroups api
sulmoJ Aug 29, 2024
eb472f8
feat: add userWorkspaceGroupStore
sulmoJ Aug 29, 2024
708d599
feat(LandingWorkspaceGroupGroupUser): apply table default features
sulmoJ Aug 29, 2024
711153a
fix(LandingWorkspaceGroupManageOverlay): fix minor thing
sulmoJ Aug 29, 2024
89f8f62
feat: add groupUserTotalCount to tab header
sulmoJ Aug 29, 2024
8fbc0a6
feat: update overlayFooter UI
sulmoJ Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 35 additions & 37 deletions apps/web/src/services/landing/components/LandingGroupWorkspaces.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,16 @@ import { i18n } from '@/translations';

import { makeAdminRouteName } from '@/router/helpers/route-helper';

import { useUserWorkspaceGroupStore } from '@/store/app-context/workspace/user-workspace-group-store';
import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';

import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/type';

import { ADVANCED_ROUTE } from '@/services/advanced/routes/route-constant';
import LandingWorkspaceBoard from '@/services/landing/components/LandingWorkspaceBoard.vue';
import LandingWorkspaceGroupManageOverlay from '@/services/landing/components/LandingWorkspaceGroupManageOverlay.vue';
import { BOARD_TYPE } from '@/services/landing/constants/landing-constants';
import { useLandingPageStore } from '@/services/landing/store/landing-page-store';
import type { WorkspaceBoardSet } from '@/services/landing/type/type';

const PAGE_SIZE = 16;
Expand All @@ -38,11 +42,26 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<{(e: 'create'): void}>();
const router = useRouter();

// store setting
const userWorkspaceStore = useUserWorkspaceStore();
const userWorkspaceStoreGetters = userWorkspaceStore.getters;
const userWorkspaceGroupStore = useUserWorkspaceGroupStore();
const userWorkspaceGroupStoreGetters = userWorkspaceGroupStore.getters;
const landingPageStore = useLandingPageStore();
const landingPageStoreState = landingPageStore.state;

const state = reactive({
isShowAll: false,
workspaceList: [] as WorkspaceModel[],
workspaceList: computed<WorkspaceModel[]>(() => userWorkspaceStoreGetters.workspaceList),
selectedGroupWorkspaceList: computed(() => {
if (landingPageStoreState.selectedProjectGroup === 'all') {
return state.workspaceList;
}
const selectedGroupsWorkspaceId = state.workspaceGroupList.find((group) => group.workspace_group_id === landingPageStoreState.selectedProjectGroup)?.workspaces || [];
return state.workspaceList.filter((workspace) => selectedGroupsWorkspaceId.includes(workspace.workspace_id));
}),
workspaceBoardSets: computed<WorkspaceBoardSet[]>(() => {
const favoriteOrderList = sortBy(state.workspaceList, (workspaceItem) => {
const favoriteOrderList = sortBy(state.selectedGroupWorkspaceList, (workspaceItem) => {
const correspondingAItem = props.favoriteList?.find((favoriteItem) => favoriteItem?.itemId === workspaceItem.workspace_id);
return correspondingAItem ? props.favoriteList?.indexOf(correspondingAItem) : Infinity;
});
Expand All @@ -55,20 +74,20 @@ const state = reactive({
rounded: true,
}));
}),
workspaceGroupList: [] as WorkspaceGroupModel[],
workspaceGroupList: computed(() => userWorkspaceGroupStoreGetters.workspaceGroupList),
workspaceFilterList: computed(() => [
{ label: i18n.t('LADING.ALL_WORKSPACE'), name: 'all' },
{ label: 'test group 1', name: 'test1' },
{ label: 'test group 2', name: 'test2' },
{ label: 'test group 3', name: 'test3' },
{ label: 'test group 4', name: 'test4' },
{ label: 'test group 5', name: 'test5' },
...state.workspaceGroupList.map((group:WorkspaceGroupModel) => ({ label: group.name, name: group.workspace_group_id })),
]),
activeTab: 'all',
isAllWorkspaceTab: computed(() => state.activeTab === 'all'),
isAllWorkspaceTab: computed(() => landingPageStoreState.selectedProjectGroup === 'all'),
isOverlayOpen: false,
isButtonGroupOpened: false,
isShowAllVisible: computed(() => {
if (landingPageStoreState.selectedProjectGroup === 'all') {
return state.workspaceList.length > PAGE_SIZE && state.workspaceBoardSets.length < state.workspaceList.length;
}
return state.selectedGroupWorkspaceList.length > PAGE_SIZE && state.workspaceBoardSets.length < state.selectedGroupWorkspaceList.length;
}),
});

const handleClickShowAll = () => {
Expand All @@ -78,33 +97,12 @@ const handleClickShowAll = () => {
const handleClickButtonGroupToggle = () => {
state.isButtonGroupOpened = !state.isButtonGroupOpened;
};
const handleOpenOverlay = (workspaceGroupId:string) => {
console.log(workspaceGroupId);
const handleOpenOverlay = () => {
state.isOverlayOpen = true;
};


const fetchWorkspaceGroupList = async () => {
// try {
// const response = await SpaceConnector.clientV2.identity
// state.workspaceGroupList = response;
// } catch (e) {
// ErrorHandler.handleError(e);
// }
};

const fetchWorkspaceList = async () => {
// try {
// const response = await SpaceConnector.clientV2.identity.workspace.list<WorkspaceListParameters, ListResponse<WorkspaceModel>>();
// state.workspaceList = response;
// } catch (e) {
// console.error(e);
// }
};

(async () => {
await fetchWorkspaceGroupList();
await fetchWorkspaceList();
await userWorkspaceGroupStore.load();
})();

</script>
Expand All @@ -114,7 +112,7 @@ const fetchWorkspaceList = async () => {
<div class="workspace-group-filter-container"
:class="{ 'is-opened': state.isButtonGroupOpened }"
>
<p-button-tab v-model="state.activeTab"
<p-button-tab v-model="landingPageStoreState.selectedProjectGroup"
:tabs="state.workspaceFilterList"
>
<template #additional-button>
Expand Down Expand Up @@ -144,11 +142,11 @@ const fetchWorkspaceList = async () => {
</template>
</p-field-title>
<div class="right-part-wrapper">
<p-button v-if="state.activeTab !== 'all'"
<p-button v-if="landingPageStoreState.selectedProjectGroup !== 'all'"
style-type="tertiary"
size="md"
icon-left="ic_settings"
@click="handleOpenOverlay(state.activeTab)"
@click="handleOpenOverlay"
>
{{ $t('LADING.SETTINGS') }}
</p-button>
Expand All @@ -167,7 +165,7 @@ const fetchWorkspaceList = async () => {
:is-domain-admin="props.isDomainAdmin"
/>
<div class="show-more-button-wrapper">
<p-button v-if="state.workspaceList.length > PAGE_SIZE && state.workspaceBoardSets.length < state.workspaceList.length"
<p-button v-if="state.isShowAllVisible"
icon-right="ic_chevron-down"
style-type="transparent"
size="md"
Expand Down
56 changes: 26 additions & 30 deletions apps/web/src/services/landing/components/LandingWorkspaceGroupManageOverlay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
<script setup lang="ts">
import {
reactive,
} from 'vue';
import { computed, reactive } from 'vue';


import {
PFieldGroup, POverlayLayout, PTextInput, PButton, PDivider,
} from '@cloudforet/mirinae';

import { useProxyValue } from '@/common/composables/proxy-state';
import type { WorkspaceGroupModel } from '@/schema/identity/workspace-group/model';

import LandingWorkspaceGroupTab from '@/services/landing/components/LandingWorkspaceGroupTab.vue';
import { useUserWorkspaceGroupStore } from '@/store/app-context/workspace/user-workspace-group-store';

import { useProxyValue } from '@/common/composables/proxy-state';

import LandingWorkspaceGroupTab from '@/services/landing/components/LandingWorkspaceGroupTab.vue';
import { useLandingPageStore } from '@/services/landing/store/landing-page-store';

interface Props {
isOverlayOpen: boolean;
Expand All @@ -23,14 +24,15 @@ const props = withDefaults(defineProps<Props>(), {
});
const emit = defineEmits<{(e: 'update:is-overlay-open'): void}>();

const userWorkspaceGroupStore = useUserWorkspaceGroupStore();
const userWorkspaceGroupStoreGetters = userWorkspaceGroupStore.getters;
const landingPageStore = useLandingPageStore();
const landingPageStoreState = landingPageStore.state;

const state = reactive({
isOverlayOpenProxy: useProxyValue('isOverlayOpen', props, emit),
name: '',
workspaceGroup: computed<WorkspaceGroupModel|undefined>(() => userWorkspaceGroupStoreGetters.workspaceGroupMap[landingPageStoreState.selectedProjectGroup]),
});

const handleSave = () => {
console.log('Save');
};
</script>

<template>
Expand All @@ -50,30 +52,25 @@ const handleSave = () => {
class="title"
>
<div class="name-field-contents">
<p-text-input v-model="state.name"
placeholder="Name"
<p-text-input :value="state.workspaceGroup?.name ?? ''"
:disabled="true"
required
class="name-input"
/><p-button style-type="primary"
size="md"
@click="handleSave"
>
{{ $t('LADING.SAVE_CHANGES') }}
</p-button>
/>
</div>
</p-field-group>
<landing-workspace-group-tab class="workspace-group-tab" />
</div>
<template #footer>
<p-divider />
<p-button style-type="negative-secondary"
size="md"
icon-left="ic_delete"
class="delete-button"
@click="() => { state.isOverlayOpenProxy = false; }"
>
{{ $t('LADING.DELETE_WORKSPACE_GROUP') }}
</p-button>
<div class="close-button-wrapper">
<p-button style-type="substitutive"
size="md"
@click="() => { state.isOverlayOpenProxy = false; }"
>
{{ $t('LADING.DONE') }}
</p-button>
</div>
</template>
</p-overlay-layout>
</template>
Expand All @@ -84,15 +81,14 @@ const handleSave = () => {
width: 100%;

.name-field-contents {
@apply flex items-center gap-2;

.name-input {
width: 26rem;
}
}
}

.delete-button {
margin: 0.75rem 0 0.75rem 1.5rem;
.close-button-wrapper {
margin: 0.75rem 1.5rem 0.75rem 0;
float: right;
}
</style>
34 changes: 21 additions & 13 deletions apps/web/src/services/landing/components/LandingWorkspaceGroupTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,48 @@
<script setup lang="ts">
import { reactive, computed } from 'vue';

import { PTab } from '@cloudforet/mirinae';
import { PTab, PBadge } from '@cloudforet/mirinae';
import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';

import { i18n } from '@/translations';

import { WORKSPACE_GROUP_TABS } from '@/services/advanced/constants/workspace-group-constant';
import LandingWorkspaceGroupTabGroupUser from '@/services/landing/components/LandingWorkspaceGroupTabGroupUser.vue';
import LandingWorkspaceGroupTabWorkspace from '@/services/landing/components/LandingWorkspaceGroupTabWorkspace.vue';
import { useLandingPageStore } from '@/services/landing/store/landing-page-store';

const emit = defineEmits<{(e: 'refresh', payload: { isGroupUser?: boolean, isWorkspace?: boolean }): void; }>();

const singleItemTabState = reactive({
const landingPageStore = useLandingPageStore();
const landingPageStoreGetter = landingPageStore.getters;
const state = reactive({
tabs: computed<TabItem[]>(() => ([
{ label: i18n.t('IAM.WORKSPACE_GROUP.TAB.WORKSPACE'), name: WORKSPACE_GROUP_TABS.WORKSPACE },
{ label: i18n.t('IAM.WORKSPACE_GROUP.TAB.GROUP_USER'), name: WORKSPACE_GROUP_TABS.GROUP_USER },
{ label: i18n.t('IAM.WORKSPACE_GROUP.TAB.WORKSPACE'), name: WORKSPACE_GROUP_TABS.WORKSPACE },
])),
activeTab: WORKSPACE_GROUP_TABS.WORKSPACE,
activeTab: WORKSPACE_GROUP_TABS.GROUP_USER,
});

const handleRefresh = (value) => {
emit('refresh', value);
};
</script>

<template>
<section class="workspace-group-tab">
<p-tab :tabs="singleItemTabState.tabs"
:active-tab.sync="singleItemTabState.activeTab"
<p-tab :tabs="state.tabs"
:active-tab.sync="state.activeTab"
>
<template #extra="{name}">
<p-badge v-if="name === WORKSPACE_GROUP_TABS.GROUP_USER"
shape="round"
badge-type="subtle"
style-type="gray100"
size="sm"
>
{{ landingPageStoreGetter.workspaceGroupUserTotalCount }}
</p-badge>
</template>
<template #group_user>
<landing-workspace-group-tab-group-user @refresh="handleRefresh" />
<landing-workspace-group-tab-group-user />
</template>
<template #workspace>
<landing-workspace-group-tab-workspace @refresh="handleRefresh" />
<landing-workspace-group-tab-workspace />
</template>
</p-tab>
</section>
Expand Down
Loading
Loading