Skip to content

Commit

Permalink
refactor: change to use store instead of passing props
Browse files Browse the repository at this point in the history
Signed-off-by: NaYeong,Kim <[email protected]>
  • Loading branch information
skdud4659 committed May 7, 2024
1 parent 25458bb commit 8108d1d
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 83 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ import type { DefinitionField } from '@spaceone/design-system/src/data-display/t
import { i18n } from '@/translations';
import { useDataSourcesPageStore } from '@/services/cost-explorer/stores/data-sources-page-store';
import type { DataSourceItem } from '@/services/cost-explorer/types/data-sources-type';
interface Props {
selectedItem?: DataSourceItem;
}
const props = withDefaults(defineProps<Props>(), {
selectedItem: undefined,
const dataSourcesPageStore = useDataSourcesPageStore();
const dataSourcesPageGetters = dataSourcesPageStore.getters;
const storeState = reactive({
selectedItem: computed<DataSourceItem>(() => dataSourcesPageGetters.selectedItem),
});
const tableState = reactive({
Expand All @@ -31,13 +32,13 @@ const tableState = reactive({
</script>

<template>
<div class="data-source-management-tab-detail">
<div class="data-source-management-tab-detail-base-information">
<p-heading heading-type="sub"
:title="$t('IAM.USER.MAIN.BASE_INFORMATION')"
class="title"
/>
<p-definition-table :fields="tableState.fields"
:data="props.selectedItem"
:data="storeState.selectedItem"
:skeleton-rows="4"
style-type="white"
class="data-source-definition-table"
Expand All @@ -46,19 +47,19 @@ const tableState = reactive({
<template #data-name>
<div class="col-name">
<p-lazy-img class="left-icon"
:src="props.selectedItem.icon"
:src="storeState.selectedItem?.icon"
width="1.5rem"
height="1.5rem"
/>
<span>{{ props.selectedItem.name }}</span>
<span>{{ storeState.selectedItem?.name }}</span>
</div>
</template>
</p-definition-table>
</div>
</template>

<style lang="postcss" scoped>
.data-source-management-tab-detail {
.data-source-management-tab-detail-base-information {
.title {
margin-top: 2.25rem;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,25 @@ import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
import { i18n } from '@/translations';
import { useProxyValue } from '@/common/composables/proxy-state';
import { useDataSourcesPageStore } from '@/services/cost-explorer/stores/data-sources-page-store';
import type { DataSourceItem } from '@/services/cost-explorer/types/data-sources-type';
interface Props {
dataSourceList?: DataSourceItem[];
selectedIndices?: number[];
}
const props = withDefaults(defineProps<Props>(), {
dataSourceList: undefined,
selectedIndices: undefined,
});
const emit = defineEmits<{(e: 'update:selected-indices'): void}>();
const dataSourcesPageStore = useDataSourcesPageStore();
const dataSourcesPageGetters = dataSourcesPageStore.getters;
const storeState = reactive({
dataSourceList: computed<DataSourceItem[]>(() => dataSourcesPageGetters.dataSourceList),
});
const state = reactive({
loading: false,
selectedIndices: useProxyValue('selectedIndices', props, emit),
});
const tableState = reactive({
pageStart: 0,
Expand All @@ -46,6 +46,10 @@ const userListApiQueryHelper = new ApiQueryHelper()
.setPageStart(tableState.pageStart).setPageLimit(tableState.pageLimit)
.setSort('name', true);
let userListApiQuery = userListApiQueryHelper.data;
const handleUpdateSelectIndex = (indices: number[]) => {
dataSourcesPageStore.setSelectedIndices(indices);
};
const handleChange = (options: any = {}) => {
userListApiQuery = getApiQueryWithToolboxOptions(userListApiQueryHelper, options) ?? userListApiQuery;
if (options.queryTags !== undefined) {
Expand All @@ -65,13 +69,14 @@ const handleChange = (options: any = {}) => {
selectable
sort-by="name"
:multi-select="false"
:select-index.sync="state.selectedIndices"
:select-index="props.selectedIndices"
:fields="tableState.fields"
:items="props.dataSourceList"
:items="storeState.dataSourceList"
:loading="state.loading"
:style="{height: `${height}px`}"
@change="handleChange"
@refresh="handleChange()"
@update:select-index="handleUpdateSelectIndex"
>
<template #col-name-format="{value, item}">
<div class="col-name">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,8 @@ import { PTab } from '@spaceone/design-system';
import { i18n } from '@/translations';
import DataSourceManagementTabDetail from '@/services/cost-explorer/components/DataSourceManagementTabDetail.vue';
import type { DataSourceItem } from '@/services/cost-explorer/types/data-sources-type';
interface Props {
selectedItem?: DataSourceItem;
}
const props = withDefaults(defineProps<Props>(), {
selectedItem: undefined,
});
import DataSourceManagementTabDetailBaseInformation
from '@/services/cost-explorer/components/DataSourceManagementTabDetailBaseInformation.vue';
const tabState = reactive({
tabs: computed(() => [
Expand All @@ -29,9 +21,21 @@ const tabState = reactive({
<p-tab :tabs="tabState.tabs"
:active-tab.sync="tabState.activeTab"
:class="tabState.activeTab"
class="data-source-management-tabs"
>
<template #detail>
<data-source-management-tab-detail :selected-item="props.selectedItem" />
<div class="data-source-management-tab-detail">
<data-source-management-tab-detail-base-information />
</div>
</template>
</p-tab>
</template>

<style lang="postcss" scoped>
.data-source-management-tabs {
.data-source-management-tab-detail {
@apply flex flex-col;
gap: 0.25rem;
}
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,24 @@
import { computed, onMounted, reactive } from 'vue';
import { PHeading, PLink } from '@spaceone/design-system';
import dayjs from 'dayjs';
import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
import type { ListResponse } from '@/schema/_common/api-verbs/list';
import type { CostDataSourceListParameters } from '@/schema/cost-analysis/data-source/api-verbs/list';
import type { DataSourceModel } from '@/schema/monitoring/data-source/model';
import { store } from '@/store';
import { useAllReferenceStore } from '@/store/reference/all-reference-store';
import { assetUrlConverter } from '@/lib/helper/asset-helper';
import ErrorHandler from '@/common/composables/error/errorHandler';
import DataSourceManagementTable from '@/services/cost-explorer/components/DataSourceManagementTable.vue';
import DataSourceManagementTabs from '@/services/cost-explorer/components/DataSourceManagementTabs.vue';
import type { DataSourceItem } from '@/services/cost-explorer/types/data-sources-type';
import { useDataSourcesPageStore } from '@/services/cost-explorer/stores/data-sources-page-store';
const allReferenceStore = useAllReferenceStore();
const allReferenceGetters = allReferenceStore.getters;
const dataSourcesPageStore = useDataSourcesPageStore();
const dataSourcesPageState = dataSourcesPageStore.state;
const storeState = reactive({
language: computed(() => store.state.user.language),
timezone: computed(() => store.state.user.timezone),
provider: computed(() => allReferenceGetters.provider),
language: computed<string>(() => store.state.user.language),
totalCount: computed<number>(() => dataSourcesPageState.totalCount),
selectedIndices: computed<number[]>(() => dataSourcesPageState.selectedIndices),
});
const state = reactive({
dataSourceList: [] as DataSourceModel[],
refinedDataSourceList: computed<DataSourceItem[]>(() => state.dataSourceList.map((i) => ({
...i,
icon: getDataSourceIcon(i.provider),
created_at: dayjs(i.created_at).tz(storeState.timezone).format('YYYY-MM-DD HH:mm:ss'),
}))),
totalCount: 0,
selectedIndices: [] as number[],
selectedItem: computed<DataSourceItem>(() => state.refinedDataSourceList[state.selectedIndices[0]]),
});
const getDataSourceIcon = (provider: string) => {
const icon = storeState.provider[provider].icon;
return assetUrlConverter(icon);
};
const fetchDataSourceList = async () => {
try {
const { results, total_count } = await SpaceConnector.clientV2.costAnalysis.dataSource.list<CostDataSourceListParameters, ListResponse<DataSourceModel>>();
state.dataSourceList = results || [];
state.totalCount = total_count || 0;
} catch (e) {
ErrorHandler.handleError(e);
state.dataSourceList = [];
state.totalCount = 0;
}
};
onMounted(() => {
fetchDataSourceList();
dataSourcesPageStore.fetchDataSourceList();
});
</script>

Expand All @@ -67,8 +28,8 @@ onMounted(() => {
<p-heading :title="$t('MENU.COST_EXPLORER_DATA_SOURCES')"
use-total-count
use-selected-count
:total-count="state.totalCount"
:selected-count="state.selectedIndices.length"
:total-count="storeState.totalCount"
:selected-count="storeState.selectedIndices.length"
>
<template #extra>
<p-link :text="$t('BILLING.COST_MANAGEMENT.DATA_SOURCES.GUIDE')"
Expand All @@ -82,12 +43,8 @@ onMounted(() => {
</template>
</p-heading>
<div class="contents">
<data-source-management-table :data-source-list="state.refinedDataSourceList"
:selected-indices.sync="state.selectedIndices"
/>
<data-source-management-tabs v-if="state.selectedIndices.length > 0"
:selected-item="state.selectedItem"
/>
<data-source-management-table :selected-indices="storeState.selectedIndices" />
<data-source-management-tabs v-if="storeState.selectedIndices.length > 0" />
<span v-else
class="no-data"
>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { computed, reactive } from 'vue';

import dayjs from 'dayjs';
import { defineStore } from 'pinia';

import { SpaceConnector } from '@cloudforet/core-lib/space-connector';

import type { ListResponse } from '@/schema/_common/api-verbs/list';
import type { CostDataSourceListParameters } from '@/schema/cost-analysis/data-source/api-verbs/list';
import type { DataSourceModel } from '@/schema/monitoring/data-source/model';
import { store } from '@/store';

import { useAllReferenceStore } from '@/store/reference/all-reference-store';

import { assetUrlConverter } from '@/lib/helper/asset-helper';

import ErrorHandler from '@/common/composables/error/errorHandler';

import type { DataSourceItem } from '@/services/cost-explorer/types/data-sources-type';

export const useDataSourcesPageStore = defineStore('page-data-sources', () => {
const allReferenceStore = useAllReferenceStore();
const allReferenceGetters = allReferenceStore.getters;

const state = reactive({
dataSourceList: [] as DataSourceModel[],
totalCount: 0,
selectedIndices: [] as number[],
});

const _getters = reactive({
provider: computed(() => allReferenceGetters.provider),
timezone: computed(() => store.state.user.timezone),
});

const getters = reactive({
dataSourceList: computed<DataSourceItem[]>(() => state.dataSourceList.map((i) => {
const icon = _getters.provider[i.provider].icon;
return {
...i,
icon: assetUrlConverter(icon),
created_at: dayjs(i.created_at).tz(_getters.timezone).format('YYYY-MM-DD HH:mm:ss'),
};
})),
selectedItem: computed<DataSourceItem>(() => getters.dataSourceList[state.selectedIndices[0]]),
});

const mutation = {
setSelectedIndices: (indices: number[]) => {
state.selectedIndices = indices;
},
};

const actions = {
fetchDataSourceList: async () => {
try {
const { results, total_count } = await SpaceConnector.clientV2.costAnalysis.dataSource.list<CostDataSourceListParameters, ListResponse<DataSourceModel>>();
state.dataSourceList = results || [];
state.totalCount = total_count || 0;
} catch (e) {
ErrorHandler.handleError(e);
state.dataSourceList = [];
state.totalCount = 0;
}
},
};

return {
state,
getters,
...mutation,
...actions,
};
});

0 comments on commit 8108d1d

Please sign in to comment.