Skip to content

Commit

Permalink
Merge pull request #4624 from cloudforet-io/feature-dashboard-v2
Browse files Browse the repository at this point in the history 
feat: merge August dashboard features
  • Loading branch information
@yuda110
yuda110 authored Sep 2, 2024
2 parents 9c693b0 + aa20a5e commit ae35ca8
Show file tree
Hide file tree
Showing 92 changed files with 3,858 additions and 1,067 deletions.
7 changes: 6 additions & 1 deletion apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,18 +223,23 @@ const handleConfirmDataSource = async () => {
metric_id: state.selectedMetricId,
},
};
// NOTE: For DataTable-Create loading
state.showPopover = false;
widgetGenerateStore.setDataTableCreateLoading(true);
const result = await widgetGenerateStore.createAddDataTable({
...addParameters,
options: {
...state.selectedDataSourceDomain === DATA_SOURCE_DOMAIN.COST ? costOptions : assetOptions,
},
});
state.showPopover = false;
if (!widgetGenerateState.selectedDataTableId && result) {
widgetGenerateStore.setSelectedDataTableId(result?.data_table_id);
}
}
state.loading = false;
widgetGenerateStore.setDataTableCreateLoading(false);
};
watch(() => state.showPopover, (val) => {
Expand Down
11 changes: 8 additions & 3 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,18 @@ import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/
import WidgetFormDataTableCardAddContents
from '@/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue';
import WidgetFormDataTableCardLoadingContents
from '@/common/modules/widgets/_components/WidgetFormDataTableCardLoadingContents.vue';
import WidgetFormDataTableCardTransformContents
from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue';
import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
import type { DataTableDataType } from '@/common/modules/widgets/types/widget-model';
const LOADING_STATE = 'LOADING';
interface Props {
item: PublicDataTableModel|PrivateDataTableModel;
item?: PublicDataTableModel|PrivateDataTableModel;
loadingCard?: boolean;
}
const props = defineProps<Props>();
Expand All @@ -26,8 +30,8 @@ const addContents = ref<WidgetFormDataTableCardAddContents|null>(null);
const transformContents = ref<WidgetFormDataTableCardTransformContents|null>(null);
const state = reactive({
dataTableId: computed<string>(() => props.item.data_table_id),
dataType: computed<DataTableDataType>(() => props.item.data_type),
dataTableId: computed<string|undefined>(() => props.item?.data_table_id),
dataType: computed<DataTableDataType | 'LOADING' | undefined>(() => (props.loadingCard ? LOADING_STATE : props.item?.data_type)),
selected: computed<boolean>(() => widgetGenerateState.selectedDataTableId === state.dataTableId),
});
Expand All @@ -47,6 +51,7 @@ defineExpose({

<template>
<div class="widget-form-data-table-card">
<widget-form-data-table-card-loading-contents v-if="!props.item || props.loadingCard" />
<widget-form-data-table-card-add-contents v-if="state.dataType === DATA_TABLE_TYPE.ADDED"
ref="addContents"
:item="props.item"
Expand Down
6 changes: 6 additions & 0 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const storeState = reactive({
});
const state = reactive({
loading: false,
dataTableId: computed(() => props.item.data_table_id),
sourceType: computed(() => props.item.source_type),
options: computed(() => props.item.options),
Expand Down Expand Up @@ -290,13 +291,17 @@ const handleCancelModal = () => {
modalState.visible = false;
};
const handleUpdateDataTable = async () => {
state.loading = true;
const result = await updateDataTable();
if (result) {
showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_SUCCESS'), '');
widgetGenerateStore.setSelectedDataTableId(state.dataTableId);
widgetGenerateStore.setDataTableUpdating(true);
await widgetGenerateStore.loadDataTable({});
}
setTimeout(() => {
state.loading = false;
}, 1000);
};
/* Utils */
Expand Down Expand Up @@ -401,6 +406,7 @@ defineExpose({
/>
<widget-form-data-table-card-footer :disabled="validationState.dataTableApplyInvalid"
:changed="state.optionsChanged"
:loading="state.loading"
@delete="handleClickDeleteDataTable"
@reset="handleClickResetDataTable"
@update="handleUpdateDataTable"
Expand Down
14 changes: 12 additions & 2 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { PButton } from '@cloudforet/mirinae';
import { PButton, PSpinner } from '@cloudforet/mirinae';
interface Props {
disabled: boolean;
changed: boolean;
loading: boolean;
}
const props = defineProps<Props>();
const emit = defineEmits<{(e: 'delete'): void;
Expand All @@ -18,6 +19,7 @@ const handleClickResetDataTable = () => {
emit('reset');
};
const handleUpdateDataTable = () => {
if (props.loading) return;
emit('update');
};
</script>
Expand All @@ -43,7 +45,12 @@ const handleUpdateDataTable = () => {
:disabled="props.disabled"
@click="handleUpdateDataTable"
>
{{ $t('COMMON.WIDGETS.APPLY') }}
<div class="button-contents-wrapper">
<p-spinner v-if="props.loading"
size="sm"
/>
{{ $t('COMMON.WIDGETS.APPLY') }}
</div>
<div v-if="props.changed"
class="update-dot"
/>
Expand All @@ -59,6 +66,9 @@ const handleUpdateDataTable = () => {
.apply-button {
@apply relative;
.button-contents-wrapper {
@apply relative flex items-center gap-1;
}
.update-dot {
@apply absolute rounded-full bg-blue-500 border-2 border-white;
width: 0.75rem;
Expand Down
125 changes: 125 additions & 0 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardLoadingContents.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<script setup lang="ts">
import { PSkeleton, PDivider } from '@cloudforet/mirinae';
</script>

<template>
<div class="widget-form-data-table-card-loading-contents"
:class="{ 'selected': true }"
>
<div class="card-header">
<p-skeleton class="skeleton-a"
width="80%"
height="1rem"
/>
<p-skeleton class="skeleton-b"
width="30%"
height="1rem"
/>
<p-skeleton width="100%"
height="2rem"
/>
</div>
<div class="card-body">
<div class="body-item">
<p-skeleton class="skeleton-b"
width="30%"
height="1rem"
/>
<p-skeleton width="100%"
height="2rem"
/>
</div>
<div class="body-item">
<p-skeleton class="skeleton-b"
width="25%"
height="1rem"
/>
<p-skeleton width="50%"
height="2rem"
/>
</div>
<div class="body-item">
<p-skeleton class="skeleton-b"
width="30%"
height="1rem"
/>
<p-skeleton width="100%"
height="2rem"
/>
</div>
<div class="body-item">
<p-skeleton class="skeleton-b"
width="30%"
height="1rem"
/>
<p-skeleton class="mb-4"
width="70%"
height="2rem"
/>
</div>
</div>
<p-divider />
<div class="card-footer">
<p-skeleton class="ml-4"
width="25%"
height="2rem"
/>
<div class="footer-right">
<p-skeleton width="50%"
height="2rem"
/>
<p-skeleton width="50%"
height="2rem"
/>
</div>
</div>
</div>
</template>

<style lang="scss" scoped>
.widget-form-data-table-card-loading-contents {
@apply border border-gray-200 rounded-lg w-full bg-white;
width: 25vw;
min-width: 21rem;
max-width: 24rem;
padding-top: 0.125rem;
margin-bottom: 2rem;
&.selected {
@apply border-violet-600;
box-shadow: 0 0 0 0.1875rem rgba(137, 124, 214, 0.6);
.card-header {
@apply bg-violet-100 border border-violet-200;
}
}
.card-header {
@apply flex flex-col gap-1 bg-gray-100 rounded-lg border border-gray-200;
width: calc(100% - 0.5rem);
padding: 0.75rem;
}
.card-body {
@apply flex flex-col gap-4;
padding: 0.75rem;
.body-item {
@apply flex flex-col gap-1;
}
}
.card-footer {
@apply flex justify-between;
padding: 0.75rem 0;
.footer-right {
@apply inline-flex gap-2;
width: calc(50% + 0.5rem);
margin-right: 1rem;
}
}
}
.skeleton-a {
margin: 0.5rem 0;
}
.skeleton-b {
margin: 0.375rem 0;
}
</style>
Loading

0 comments on commit ae35ca8

Please sign in to comment.