Skip to content

Commit

Permalink
refactor(error): change from vuex to pinia (#4450)
Browse files Browse the repository at this point in the history 
* refactor(error): change from vuex to pinia

Signed-off-by: yuda <[email protected]>

* refactor: move 'settings' vuex store to 'display' store

Signed-off-by: yuda <[email protected]>

---------

Signed-off-by: yuda <[email protected]>
  • Loading branch information
@yuda110
yuda110 authored Jul 30, 2024
1 parent 032d41a commit 856b50c
Show file tree
Hide file tree
Showing 70 changed files with 299 additions and 334 deletions.
8 changes: 5 additions & 3 deletions apps/web/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { EXTERNAL_PAGE_ROUTE } from '@/router/constant';
import { getRouteScope } from '@/router/helpers/route-helper';
import { useAppContextStore } from '@/store/app-context/app-context-store';
import { useErrorStore } from '@/store/error/error-store';
import { useGlobalUIStore } from '@/store/global-ui/global-ui-store';
import { SIDEBAR_TYPE } from '@/store/modules/display/config';
Expand Down Expand Up @@ -45,7 +46,7 @@ const state = reactive({
showGNB: computed(() => !state.isWorkspaceLandingPage && (route.matched[1]?.name === 'admin' || route.matched[1]?.name === 'workspace' || state.isMyPage)),
isWorkspaceLandingPage: computed(() => route.name === LANDING_ROUTE._NAME),
isMyPage: computed(() => route.path.startsWith('/my-page')),
isExpired: computed(() => !state.isRoutingToSignIn && store.state.error.visibleSessionExpiredError && state.routeScope !== 'EXCLUDE_AUTH'),
isExpired: computed(() => !state.isRoutingToSignIn && errorStore.state.visibleSessionExpiredError && state.routeScope !== 'EXCLUDE_AUTH'),
isRoutingToSignIn: false,
isEmailVerified: computed(() => store.state.user.emailVerified),
userId: computed<string>(() => store.state.user.userId),
Expand All @@ -56,6 +57,7 @@ const state = reactive({
});
const appContextStore = useAppContextStore();
const errorStore = useErrorStore();
const globalUIStore = useGlobalUIStore();
const globalUIGetters = globalUIStore.getters;
Expand All @@ -72,7 +74,7 @@ const goToSignIn = async () => {
query: { previousPath: route.fullPath },
};
store.commit('user/setCurrentGrantInfo', undefined);
store.commit('error/setVisibleSessionExpiredError', false);
errorStore.setVisibleSessionExpiredError(false);
await router.push(res);
state.isRoutingToSignIn = false;
Expand All @@ -92,7 +94,7 @@ watch(() => route.path, () => {
watch(() => state.userId, (userId) => {
if (userId) {
store.dispatch('settings/initSettings');
store.dispatch('display/initSettings');
}
}, { immediate: true });
</script>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/common/composables/amcharts5/xy-chart-helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import bytes from 'bytes';

import { byteFormatter, numberFormatter } from '@cloudforet/utils';

import type { Currency } from '@/store/modules/settings/type';
import type { Currency } from '@/store/modules/display/type';

import { currencyMoneyFormatter } from '@/lib/helper/currency-helper';

Expand Down
2 changes: 1 addition & 1 deletion .../top-bar-toolset/modules/top-bar-notifications/modules/TopBarNotificationsContextMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ const listNotifications = async () => {
state.items = state.items.concat(convertNotificationItem(response.results ?? []));
await setReadNotifications(response.results ?? []);
// update last read
await store.commit('settings/setGnbNotificationLastReadTime', dayjs.utc().toISOString(), { root: true });
await store.commit('display/setGnbNotificationLastReadTime', dayjs.utc().toISOString(), { root: true });
}
} catch (e) {
ErrorHandler.handleRequestError(e, i18n.t('COMMON.GNB.NOTIFICATION.ALT_E_LIST_NOTIFICATION'));
Expand Down
10 changes: 7 additions & 3 deletions apps/web/src/common/modules/portals/TopNotification.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,25 @@ import { store } from '@/store';
import { i18n } from '@/translations';
import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
import { useErrorStore } from '@/store/error/error-store';
import { MY_PAGE_ROUTE } from '@/services/my-page/routes/route-constant';
const props = withDefaults(defineProps<{
styleType?: string;
}>(), {
styleType: 'dark',
});
const userWorkspaceStore = useUserWorkspaceStore();
const errorStore = useErrorStore();
const route = useRoute();
const storeState = reactive({
hasPermission: computed(() => store.getters['user/hasPermission']),
isDomainAdmin: computed(() => store.getters['user/isDomainAdmin']),
workspaceList: computed(() => userWorkspaceStore.getters.workspaceList),
visibleAuthorizationError: computed(() => store.state.error.visibleAuthorizationError),
visibleAuthorizationError: computed(() => errorStore.state.visibleAuthorizationError),
});
const state = reactive({
visible: computed({
Expand All @@ -40,7 +42,9 @@ const state = reactive({
return result;
},
set(val) { store.commit('error/setVisibleAuthorizationError', val); },
set(val) {
errorStore.setVisibleAuthorizationError(val);
},
}),
notificationText: computed(() => {
if (storeState.workspaceList.length === 0) {
Expand Down
214 changes: 105 additions & 109 deletions apps/web/src/common/modules/widgets/_components/WidgetFrame.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<script setup lang="ts">
import {
reactive, computed,
reactive, computed, watch,
} from 'vue';
import { useRouter } from 'vue-router/composables';
import {
PI, PIconButton, PPopover, PLink, PEmpty, PTooltip, PSkeleton, PSelectDropdown, PButton,
PIconButton, PPopover, PLink, PEmpty, PTooltip, PSkeleton, PSelectDropdown, PButton,
} from '@cloudforet/mirinae';
import { POPOVER_TRIGGER } from '@cloudforet/mirinae/src/data-display/popover/type';
import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
Expand All @@ -20,17 +21,11 @@ import type { WidgetFrameProps } from '@/common/modules/widgets/types/widget-fra
const props = defineProps<WidgetFrameProps>();
const emit = defineEmits<WidgetFrameEmit>();
const router = useRouter();
const state = reactive({
isFull: computed<boolean>(() => props.size === WIDGET_SIZE.full),
showWidthToggleButton: computed(() => props.widgetSizes.length > 1 && !props.loading && props.mode === 'edit-layout'),
etcMenuItems: computed<MenuItem[]>(() => ([
{
type: 'item',
name: 'expand',
label: i18n.t('COMMON.WIDGETS.EXPAND'),
icon: 'ic_arrows-expand-all',
},
...(props.disableManageButtons ? [] : [{
type: 'item',
name: 'edit',
Expand All @@ -52,6 +47,7 @@ const state = reactive({
}] as MenuItem[]),
])),
etcMenuVisible: false,
popperVisible: false,
sizeDropdownMenuItems: computed<MenuItem[]>(() => props.widgetSizes.map((size) => ({
type: 'item',
name: size,
Expand All @@ -62,9 +58,7 @@ const state = reactive({
/* Event */
const handleSelectEtcMenu = (selected: MenuItem) => {
if (selected.name === 'expand') {
emit('click-expand');
} else if (selected.name === 'edit') {
if (selected.name === 'edit') {
emit('click-edit');
} else if (selected.name === 'clone') {
emit('click-clone');
Expand All @@ -79,6 +73,23 @@ const handleToggleWidth = () => {
}
emit('toggle-size', nextSize);
};
const handleShowFullDataPopper = () => {
};
const handleClickFullData = () => {
if (!props.fullDataLinkList?.length) return;
window.open(router.resolve(props.fullDataLinkList[0].location).href, '_blank');
};
watch(() => state.popperVisible, (_popperVisible) => {
if (_popperVisible) {
state.etcMenuVisible = false;
}
});
watch(() => state.etcMenuVisible, (_etcMenuVisible) => {
if (_etcMenuVisible) {
state.popperVisible = false;
}
});
</script>

<template>
Expand All @@ -92,62 +103,65 @@ const handleToggleWidth = () => {
<h3 class="title">
{{ props.title }}
</h3>
<p-popover v-if="!props.errorMessage && props.widgetState === 'ACTIVE'"
class="metadata-popover"
position="bottom-start"
:trigger="POPOVER_TRIGGER.CLICK"
>
<div class="metadata-button">
<p-i name="ic_info-circle"
width="0.75rem"
height="0.75rem"
/>
</div>
<template #content>
<div class="metadata-content">
<div class="metadata-item-row">
<span class="metadata-title">{{ $t('COMMON.WIDGETS.PERIOD') }}</span>
<span>{{ props.periodText }}</span>
</div>
<div class="metadata-item-row">
<span class="metadata-title">{{ $t('DASHBOARDS.WIDGET.UNIT') }}</span>
<span>{{ state.unitText }}</span>
</div>
<div class="metadata-item-row">
<span class="metadata-title">{{ $t('DASHBOARDS.WIDGET.FULL_DATA_LINK') }}</span>
<template v-if="props.fullDataLinkList?.length">
<div class="full-data-link-wrapper">
<p-link v-for="(fullDataLink, idx) in props.fullDataLinkList"
:key="`${idx}-${fullDataLink?.name}`"
new-tab
highlight
action-icon="internal-link"
:to="fullDataLink?.location"
>
{{ fullDataLink?.name }}
</p-link>
</div>
</template>
<template v-else>
<span>--</span>
</template>
</div>
<div v-if="props.description"
class="metadata-item-row"
>
<span class="metadata-title">{{ $t('DASHBOARDS.WIDGET.DESCRIPTION') }}</span>
<div class="description">
{{ props.description }}
</div>
</div>
</div>
</template>
</p-popover>
</div>
<div v-if="props.mode !== 'overlay'"
class="action-button-wrapper"
:class="{ 'selected': state.etcMenuVisible }"
:class="{ 'selected': state.etcMenuVisible || state.popperVisible }"
>
<p-tooltip :contents="$t('COMMON.WIDGETS.EXPAND')"
position="top"
>
<p-icon-button style-type="tertiary"
size="sm"
name="ic_arrows-expand-all"
shape="square"
@click="emit('click-expand')"
/>
</p-tooltip>
<p-tooltip v-if="props.fullDataLinkList?.length && !props.errorMessage && props.widgetState === 'ACTIVE'"
:contents="$t('COMMON.WIDGETS.VIEW_FULL_DATA')"
position="top"
>
<p-popover v-if="props.fullDataLinkList.length > 1"
position="bottom-start"
:is-visible.sync="state.popperVisible"
:trigger="POPOVER_TRIGGER.CLICK"
>
<p-icon-button style-type="tertiary"
size="sm"
name="ic_db-where"
shape="square"
@click="handleShowFullDataPopper"
/>
<template #content>
<div class="metadata-content">
<div class="metadata-item-row">
<span class="metadata-title">{{ $t('DASHBOARDS.WIDGET.FULL_DATA_LINK') }}</span>
<template v-if="props.fullDataLinkList?.length">
<div class="full-data-link-wrapper">
<p-link v-for="(fullDataLink, idx) in props.fullDataLinkList"
:key="`${idx}-${fullDataLink?.name}`"
new-tab
highlight
action-icon="internal-link"
:to="fullDataLink?.location"
>
{{ fullDataLink?.name }}
</p-link>
</div>
</template>
</div>
</div>
</template>
</p-popover>
<p-icon-button v-else
style-type="tertiary"
size="sm"
name="ic_db-where"
shape="square"
@click="handleClickFullData"
/>
</p-tooltip>
<p-select-dropdown style-type="tertiary-icon-button"
button-icon="ic_ellipsis-horizontal"
class="etc-button"
Expand Down Expand Up @@ -214,16 +228,13 @@ const handleToggleWidth = () => {
<div v-if="state.showWidthToggleButton"
class="widget-toggle-button-wrapper"
>
<p-tooltip :contents="state.isFull ? $t('COMMON.WIDGETS.DEFAULT_WIDTH') : $t('COMMON.WIDGETS.FULL_WIDTH')"
position="bottom"
<p-button style-type="tertiary"
:icon-left="state.isFull ? 'ic_arrows-collapse-all' : 'ic_arrows-expand-all'"
class="width-toggle-button"
@click="handleToggleWidth"
>
<p-icon-button style-type="tertiary"
:name="state.isFull ? 'ic_arrows-collapse-all' : 'ic_arrows-expand-all'"
shape="square"
class="width-toggle-button"
@click="handleToggleWidth"
/>
</p-tooltip>
{{ state.isFull ? $t('COMMON.WIDGETS.DEFAULT_WIDTH') : $t('COMMON.WIDGETS.FULL_WIDTH') }}
</p-button>
</div>
</div>
</template>
Expand All @@ -243,7 +254,7 @@ const handleToggleWidth = () => {
}
&:hover {
.action-button-wrapper {
display: block;
display: flex;
}
}
Expand All @@ -261,42 +272,26 @@ const handleToggleWidth = () => {
-webkit-box-orient: vertical;
font-weight: 500;
}
.metadata-button {
@apply text-gray-700;
display: flex;
align-items: center;
cursor: pointer;
padding-left: 0.75rem;
}
.metadata-content {
@apply text-label-md;
}
.metadata-content {
@apply text-label-md;
display: flex;
line-height: normal;
flex-direction: column;
gap: 0.5rem;
max-height: 20rem;
min-width: 20rem;
max-width: 25rem;
overflow-y: auto;
z-index: 100;
.metadata-item-row {
display: flex;
line-height: normal;
flex-direction: column;
gap: 0.5rem;
max-height: 20rem;
min-width: 20rem;
max-width: 25rem;
overflow-y: auto;
z-index: 100;
padding-top: 0.5rem;
.metadata-item-row {
justify-content: flex-start;
.full-data-link-wrapper {
display: flex;
justify-content: flex-start;
.metadata-title {
@apply text-gray-600;
width: 7rem;
}
.full-data-link-wrapper {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.description {
@apply text-gray-700;
max-width: 18rem;
display: block;
}
flex-direction: column;
gap: 0.125rem;
padding-left: 2rem;
}
}
}
Expand Down Expand Up @@ -330,10 +325,11 @@ const handleToggleWidth = () => {
right: 0.25rem;
top: 0.25rem;
display: none;
gap: 0.25rem;
z-index: 1000;
padding: 0.25rem;
&.selected {
display: block;
display: flex;
}
.etc-button {
@apply bg-white;
Expand Down
Loading

0 comments on commit 856b50c

Please sign in to comment.