diff --git a/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.spec.ts b/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.spec.ts index 2c67cb0..420027c 100644 --- a/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.spec.ts +++ b/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.spec.ts @@ -27,7 +27,9 @@ describe('ConfigurableDashboard.vue', () => { availableWidgets: new Map(), dashboardConfig: [], dashboardConfigurationOptions: [], - selectedDashboardConfiguration: undefined + selectedDashboardConfiguration: undefined, + showSaveModal: false, + saveModalError: undefined } }) }) diff --git a/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.stories.ts b/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.stories.ts index 6c97607..e06425a 100644 --- a/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.stories.ts +++ b/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.stories.ts @@ -42,6 +42,8 @@ export const Default: Story = { }), args: { editMode: false, + saveModalError: undefined, + showSaveModal: false, availableWidgets: new Map([ ['widget1', TEMPLATE_WIDGET_WRAPPER], ['widget2', IFRAME_WIDGET_WRAPPER], diff --git a/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.vue b/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.vue index d542b30..e6c5061 100644 --- a/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.vue +++ b/packages/gridstack/src/components/ConfigurableDashboard/ConfigurableDashboard.vue @@ -20,7 +20,11 @@ v-model:modalDisplayed="showSaveModal" class="basic-modal" > - + () + +/** + * A flag that indicates if save modal should be displayed + */ +const showSaveModal = defineModel('showSaveModal') +/** + * A flag that indicates if an error should be displayed in the save modal + */ +const saveModalError = defineModel('saveModalError') /** * Selected dashboard configuration */ @@ -79,7 +92,6 @@ const dashboardConfig = defineModel('dashboardConfig', { */ const currentConfig = ref(dashboardConfig.value) const editMode = ref(false) -const showSaveModal = ref(false) const showDeleteModal = ref(false) const selectedDashboardConfigurationName = computed(() => { const config = props.dashboardConfigurationOptions.find( @@ -102,6 +114,8 @@ const onConfirmSave = (name: string) => { const onCancelEdit = () => { editMode.value = false dashboardConfig.value = currentConfig.value + showSaveModal.value = false + saveModalError.value = undefined } const onDeleteDashboardConfiguration = () => { diff --git a/packages/gridstack/src/components/SaveDashboardModal/SaveDashboardModal.vue b/packages/gridstack/src/components/SaveDashboardModal/SaveDashboardModal.vue index 7662257..9e659dc 100644 --- a/packages/gridstack/src/components/SaveDashboardModal/SaveDashboardModal.vue +++ b/packages/gridstack/src/components/SaveDashboardModal/SaveDashboardModal.vue @@ -11,6 +11,8 @@ name="name" class="base-input" /> + + Speichern @@ -19,12 +21,15 @@