fix(variable-filter): fix bug where variable do not work

apps/web/src/api-clients/cost-analysis/data-source/schema/model.ts

@@ -1,7 +1,7 @@
 import type { JsonSchema } from '@cloudforet/mirinae/types/controls/forms/json-schema-form/type';
 
 import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
-import type { CostDataSourceSecretType, CostDataSourceState, CostDataSourceType } from '@/api-clients/cost-analysis/data-source/schema/type';
+import type { CostDataSourceSchedule, CostDataSourceSecretType, CostDataSourceType } from '@/api-clients/cost-analysis/data-source/schema/type';
 
 
 interface PluginInfoModel {

apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts

@@ -5,6 +5,7 @@ import {
     COLOR_SCHEMA, DATA_FIELD_HEATMAP_COLOR, DATE_FORMAT, DEFAULT_COMPARISON_COLOR, NUMBER_FORMAT, TABLE_DEFAULT_MINIMUM_WIDTH, WIDGET_HEIGHT,
 } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { integrateFieldsSchema } from '@/common/modules/widgets/_helpers/widget-field-helper';
+// eslint-disable-next-line import/no-cycle
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { FieldDefaultValueConvertor, WidgetFieldTypeMap } from '@/common/modules/widgets/_widget-field-value-manager/type';
 import type { CategoryByOptions } from '@/common/modules/widgets/_widget-fields/category-by/type';

apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue

@@ -1,30 +1,28 @@
 <script setup lang="ts">
 import {
-    computed, reactive,
+    computed, reactive, defineAsyncComponent,
 } from 'vue';
 
 import type { DashboardGlobalVariable, GlobalVariableFilterType } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import DashboardGlobalVariableFilterEnum
-    from '@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue';
-import DashboardGlobalVariableFilterNumberInput
-    from '@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue';
-import DashboardGlobalVariableFilterNumberSlider
-    from '@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue';
-import DashboardGlobalVariableFilterReference
-    from '@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue';
-import DashboardGlobalVariableFilterTextInput
-    from '@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue';
+const FILTER_COMPONENT_MAP: Record<GlobalVariableFilterType, ReturnType<typeof defineAsyncComponent>> = {
+    ENUM: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue')),
+    REFERENCE: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue')),
+    TEXT_INPUT: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue')),
+    NUMBER_INPUT: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue')),
+    NUMBER_SLIDER: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue')),
+};
 
 
 interface Props {
     variable: DashboardGlobalVariable;
     vars?: DashboardVars;
 }
 
+
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void;
 }>();
@@ -46,25 +44,9 @@ const state = reactive({
 
 <template>
     <div class="dashboard-global-variable-filter">
-        <dashboard-global-variable-filter-enum v-if="state.variableFilterType === 'ENUM'"
-                                               :variable="props.variable"
-                                               :vars.sync="state.proxyVars"
-        />
-        <dashboard-global-variable-filter-reference v-else-if="state.variableFilterType === 'REFERENCE'"
-                                                    :variable="props.variable"
-                                                    :vars.sync="state.proxyVars"
-        />
-        <dashboard-global-variable-filter-text-input v-else-if="state.variableFilterType === 'TEXT_INPUT'"
-                                                     :variable="props.variable"
-                                                     :vars.sync="state.proxyVars"
-        />
-        <dashboard-global-variable-filter-number-input v-else-if="state.variableFilterType === 'NUMBER_INPUT'"
-                                                       :variable="props.variable"
-                                                       :vars.sync="state.proxyVars"
-        />
-        <dashboard-global-variable-filter-number-slider v-else-if="state.variableFilterType === 'NUMBER_SLIDER'"
-                                                        :variable="props.variable"
-                                                        :vars.sync="state.proxyVars"
+        <component :is="FILTER_COMPONENT_MAP[state.variableFilterType]"
+                   :variable="props.variable"
+                   :vars.sync="state.proxyVars"
         />
     </div>
 </template>

apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue

@@ -156,7 +156,7 @@ const changeVariables = (changedSelected?: number) => {
 watch(() => dashboard.value?.vars_schema?.properties, (varsSchema, prevVarsSchema) => {
     if (!varsSchema) return;
     const _variable = props.variable as NumberAnyVariable;
-    if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[varsSchema[_variable.key]])) return;
+    if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[_variable.key])) return;
 
     state.value = (dashboard.value?.vars?.[_variable.key] as number) || _variable.options.min;
     changeVariables(state.value);

apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue

@@ -87,14 +87,13 @@ const handleResetVariables = () => {
     dashboardDetailStore.setVars(_originVars);
 };
 
-const handleUpdateVars = (val: DashboardVars) => {
-    state.tempVars = val;
-    dashboardDetailStore.setVars(val);
-};
-
 watch(() => dashboard.value?.vars, (_vars) => {
     state.tempVars = { ..._vars };
 }, { immediate: true });
+
+watch([() => state.tempVars, dashboard], ([_tempVars]) => {
+    dashboardDetailStore.setVars(_tempVars);
+}, { deep: true });
 </script>
 
 <template>
@@ -104,8 +103,7 @@ watch(() => dashboard.value?.vars, (_vars) => {
         <template v-for="(property, idx) in state.globalVariables">
             <div :key="`${property.name}-${idx}`">
                 <dashboard-global-variable-filter :variable="property"
-                                                  :vars="state.tempVars"
-                                                  @update:vars="handleUpdateVars"
+                                                  :vars.sync="state.tempVars"
                 />
                 <changed-mark v-if="state.modifiedVariablesSchemaProperties.includes(property.key)" />
             </div>

apps/web/src/services/dashboards/pages/DashboardDetailPage.vue

@@ -16,6 +16,8 @@ import { SpaceRouter } from '@/router';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
+
 import { useBreadcrumbs } from '@/common/composables/breadcrumbs';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
@@ -111,6 +113,7 @@ const { mutate: updateDashboard, isPending: dashboardUpdateLoading } = useMutati
             });
         },
         onError: (e) => {
+            showErrorMessage(e.message, e);
             ErrorHandler.handleError(e);
         },
     },

apps/web/src/services/ops-flow/components/TaskAssignModal.vue

@@ -8,7 +8,7 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 import type { DataTableField } from '@cloudforet/mirinae/types/data-display/tables/data-table/type';
 import type { ToolboxTableOptions } from '@cloudforet/mirinae/types/data-display/tables/toolbox-table/type';
 
-import type { TaskModel } from '@/schema/opsflow/task/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { i18n } from '@/translations';
 
 import type { UserReferenceItem } from '@/store/reference/user-reference-store';
@@ -23,6 +23,7 @@ import { useTaskAssignStore } from '@/services/ops-flow/stores/task-assign-store
 import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
 import { useTaskDetailPageStore } from '@/services/ops-flow/stores/task-detail-page-store';
 
+
 const userReferenceStore = useUserReferenceStore();
 const taskAssignStore = useTaskAssignStore();
 const taskContentFormStore = useTaskContentFormStore();

apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue

@@ -5,7 +5,7 @@ import { cloneDeep } from 'lodash';
 
 import { PButtonModal } from '@cloudforet/mirinae';
 
-import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 import { getParticle, i18n as _i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';

apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue';
 import { PI, PBadge } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 import { i18n } from '@/translations';
 
 import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';

apps/web/src/services/ops-flow/components/TaskStatusList.vue

@@ -2,7 +2,7 @@
 import { computed, ref, watch } from 'vue';
 import draggable from 'vuedraggable';
 
-import type { TaskStatusOption, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusOption, TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 
 import TaskStatusDraggableItem from '@/services/ops-flow/components/TaskStatusDraggableItem.vue';
 import TaskStatusListFoldButton from '@/services/ops-flow/components/TaskStatusListFoldButton.vue';

apps/web/src/services/ops-flow/components/TaskStatusSetDefaultModal.vue

@@ -5,7 +5,7 @@ import { cloneDeep } from 'lodash';
 
 import { PButtonModal } from '@cloudforet/mirinae';
 
-import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 import { i18n as _i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';

apps/web/src/services/ops-flow/components/TaskTypeForm.vue

@@ -9,7 +9,7 @@ import {
     POverlayLayout, PFieldGroup, PTextInput, PButton, PTextarea, PRadioGroup, PRadio,
 } from '@cloudforet/mirinae';
 
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
 import { getParticle, i18n as _i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';

apps/web/src/services/ops-flow/composables/use-task-status-field.ts

@@ -4,7 +4,7 @@ import { ref, computed } from 'vue';
 import { getTextHighlightRegex } from '@cloudforet/mirinae';
 import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { TaskStatusOption, TaskStatusOptions } from '@/schema/opsflow/task/type';
+import type { TaskStatusOption, TaskStatusOptions } from '@/api-clients/opsflow/task/schema/type';
 import { getParticle, i18n } from '@/translations';
 
 import { useFieldValidator } from '@/common/composables/form-validator';

apps/web/src/services/ops-flow/composables/use-task-type-field.ts

@@ -4,7 +4,7 @@ import { ref, computed } from 'vue';
 import { getTextHighlightRegex } from '@cloudforet/mirinae';
 import type { AutocompleteHandler, SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
 import { getParticle, i18n } from '@/translations';
 
 import { useFieldValidator } from '@/common/composables/form-validator';

apps/web/src/services/ops-flow/pages/TaskCreatePage.vue

@@ -2,6 +2,7 @@
 // eslint-disable-next-line import/order,import/no-duplicates
 import { defineComponent, type ComponentPublicInstance } from 'vue';
 
+
 interface IInstance extends ComponentPublicInstance {
     setPathFrom(from: any): void
 }
@@ -29,7 +30,7 @@ import {
     PHeadingLayout, PHeading, PButton, PPaneLayout, PSkeleton,
 } from '@cloudforet/mirinae';
 
-import type { TaskModel } from '@/schema/opsflow/task/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { i18n as _i18n } from '@/translations';
 
 import { queryStringToString } from '@/lib/router-query-string';

apps/web/src/services/ops-flow/pages/TaskDetailPage.vue

@@ -32,7 +32,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { TabItem } from '@cloudforet/mirinae/types/hooks/use-tab/type';
 
-import type { TaskModel } from '@/schema/opsflow/task/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
 import { getParticle, i18n as _i18n } from '@/translations';
 
 import { useUserStore } from '@/store/user/user-store';

apps/web/src/services/ops-flow/stores/admin/task-category-page-store.ts

@@ -6,17 +6,19 @@ import {
 
 import { defineStore } from 'pinia';
 
-import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
-import type { TaskModel } from '@/schema/opsflow/task/model';
-import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/schema/opsflow/task/type';
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
+import type { TaskModel } from '@/api-clients/opsflow/task/schema/model';
+import type { TaskStatusOption, TaskStatusOptions, TaskStatusType } from '@/api-clients/opsflow/task/schema/type';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { useTaskAPI } from '@/services/ops-flow/composables/use-task-api';
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/task-category-store';
 import { useTaskTypeStore } from '@/services/ops-flow/stores/task-type-store';
 
+
+
 interface UseTaskCategoryPageStoreState {
     currentCategoryId?: string;
     // status

apps/web/src/services/ops-flow/stores/board-page-store.ts

@@ -5,7 +5,7 @@ import {
 
 import { defineStore } from 'pinia';
 
-import type { TaskCategoryModel } from '@/schema/opsflow/task-category/model';
+import type { TaskCategoryModel } from '@/api-clients/opsflow/task-category/schema/model';
 
 import { useTaskCategoryStore } from '@/services/ops-flow/stores/task-category-store';
 

apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldGenerator.vue

@@ -9,11 +9,7 @@ import {
     PFieldGroup, PTextInput, PToggleButton, PCheckbox, PButton, PSelectButton, PCodeEditor,
 } from '@cloudforet/mirinae';
 
-import type {
-    TaskField,
-    TaskFieldOptions,
-    TaskFieldType,
-} from '@/schema/opsflow/_types/task-field-type';
+import type { TaskField, TaskFieldOptions, TaskFieldType } from '@/api-clients/opsflow/_types/task-field-type';
 import { getParticle, i18n } from '@/translations';
 
 import InfoTooltip from '@/common/components/guidance/InfoTooltip.vue';
@@ -36,6 +32,7 @@ import {
     useTaskManagementTemplateStore,
 } from '@/services/ops-flow/task-management-templates/stores/use-task-management-template-store';
 
+
 const COMPONENT_MAP: Partial<Record<TaskFieldType, ReturnType<typeof defineAsyncComponent>>> = {
     DROPDOWN: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-configuration/options-generator-templates/DropdownOptionsGenerator.vue')),
     PARAGRAPH: defineAsyncComponent(() => import('@/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue')),

apps/web/src/services/ops-flow/task-fields-configuration/TaskFieldsConfiguration.vue

@@ -4,8 +4,9 @@ import draggable from 'vuedraggable';
 
 import { PI } from '@cloudforet/mirinae';
 
-import type { TaskField } from '@/schema/opsflow/_types/task-field-type';
-import type { TaskTypeModel } from '@/schema/opsflow/task-type/model';
+
+import type { TaskField } from '@/api-clients/opsflow/_types/task-field-type';
+import type { TaskTypeModel } from '@/api-clients/opsflow/task-type/schema/model';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 

apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-field-generator.ts

@@ -1,7 +1,8 @@
 import type { Ref } from 'vue';
 import { ref, computed } from 'vue';
 
-import type { TaskFieldOptions } from '@/schema/opsflow/_types/task-field-type';
+
+import type { TaskFieldOptions } from '@/api-clients/opsflow/_types/task-field-type';
 
 import { useFieldValidator, useFormValidator } from '@/common/composables/form-validator';
 

apps/web/src/services/ops-flow/task-fields-configuration/composables/use-task-fields-configuration.ts

@@ -1,4 +1,5 @@
-import type { TaskField, TaskFieldSelectionType, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+
+import type { TaskField, TaskFieldSelectionType, TaskFieldType } from '@/api-clients/opsflow/_types/task-field-type';
 
 import getRandomId from '@/lib/random-id-generator';
 
@@ -9,6 +10,7 @@ import type {
     TaskFieldTypeMetadata,
 } from '@/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type';
 
+
 const DEFAULT_SELECTION_TYPE_MAP: Record<TaskFieldType, TaskFieldSelectionType|undefined> = {
     GLOBAL: undefined,
     TEXT: undefined,

apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/DropdownOptionsGenerator.vue

@@ -10,7 +10,7 @@ import {
     PFieldTitle, PButton, PIconButton, PI,
 } from '@cloudforet/mirinae';
 
-import type { DropdownTaskFieldOptions, TaskFieldEnum } from '@/schema/opsflow/_types/task-field-type';
+import type { DropdownTaskFieldOptions, TaskFieldEnum } from '@/api-clients/opsflow/_types/task-field-type';
 import { i18n } from '@/translations';
 
 import getRandomId from '@/lib/random-id-generator';

apps/web/src/services/ops-flow/task-fields-configuration/options-generator-templates/ParagraphOptionsGenerator.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { ParagraphTaskFieldOptions } from '@/schema/opsflow/_types/task-field-type';
+
+import type { ParagraphTaskFieldOptions } from '@/api-clients/opsflow/_types/task-field-type';
 
 import TextEditor from '@/common/components/editor/TextEditor.vue';
 

apps/web/src/services/ops-flow/task-fields-configuration/stores/use-task-field-metadata-store.ts

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { defineStore } from 'pinia';
 
-import type { TaskField, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskField, TaskFieldType } from '@/api-clients/opsflow/_types/task-field-type';
 import { i18n } from '@/translations';
 
 import { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';

apps/web/src/services/ops-flow/task-fields-configuration/types/task-field-type-metadata-type.ts

@@ -1,9 +1,10 @@
-import type { TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+
+import type { TaskFieldType } from '@/api-clients/opsflow/_types/task-field-type';
 
 import type { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';
 
 export interface TaskFieldTypeMetadata {
-    type: TaskFieldType;
+    type: TaskFieldType
     name: string;
     icon: string;
 }

apps/web/src/services/ops-flow/task-fields-form/TaskFieldsForm.vue

@@ -3,7 +3,7 @@ import {
     defineAsyncComponent, onUnmounted,
 } from 'vue';
 
-import type { TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskFieldType } from '@/api-clients/opsflow/_types/task-field-type';
 
 import { useTaskContentFormStore } from '@/services/ops-flow/stores/task-content-form-store';
 import { DEFAULT_FIELD_ID_MAP } from '@/services/ops-flow/task-fields-configuration/constants/default-field-constant';

apps/web/src/services/ops-flow/task-fields-form/composables/use-task-field-validation.ts

@@ -3,7 +3,7 @@ import { watch } from 'vue';
 
 import { isEqual } from 'lodash';
 
-import type { TaskField, TaskFieldType } from '@/schema/opsflow/_types/task-field-type';
+import type { TaskField, TaskFieldType } from '@/api-clients/opsflow/_types/task-field-type';
 import { i18n } from '@/translations';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';