Implemented #4866 - The Save button is not available within the Theme…

…s Tab when the isAutoSave option is disabled (#4869) Co-authored-by: tsv2013 <[email protected]>
surveyjs · Nov 7, 2023 · 0c9c943 · 0c9c943
1 parent 6fcda2d
commit 0c9c943
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
@@ -5,7 +5,7 @@ import { ThemeBuilder } from "./theme-builder";
 import { SidebarTabModel } from "../side-bar/side-bar-tab-model";
 import { settings } from "../../creator-settings";
 import { PredefinedThemes, Themes, findSuitableTheme, getThemeFullName } from "./themes";
-import { saveToFileHandler } from "../../utils/utils";
+import { notShortCircuitAnd, saveToFileHandler } from "../../utils/utils";
 
 function getObjectDiffs(obj1: any, obj2: any = {}): any {
   const result: any = {};
@@ -29,6 +29,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
   private prevPageAction: Action;
   private nextPageAction: Action;
   private themeSettingsAction: Action;
+  private saveThemeAction: Action;
   private resetTheme: Action;
   private importAction: Action;
   private exportAction: Action;
@@ -114,9 +115,11 @@ export class ThemeTabPlugin implements ICreatorPlugin {
       }
     });
     this.model.onThemeSelected.add((sender, options) => {
+      this.saveThemeAction.enabled = true;
       this.onThemeSelected.fire(this, options);
     });
     this.model.onThemeModified.add((sender, options) => {
+      this.saveThemeAction.enabled = true;
       this.onThemeModified.fire(this, options);
     });
     this.model.onCanModifyTheme.add((sender, options) => {
@@ -225,6 +228,24 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     items.push(this.undoAction);
     items.push(this.redoAction);
 
+    this.saveThemeAction = new Action({
+      id: "svd-save",
+      iconName: "icon-save",
+      action: () => {
+        this.creator.doSaveTheme();
+        this.saveThemeAction.enabled = false;
+      },
+      active: false,
+      enabled: false,
+      visible: <any>new ComputedUpdater<boolean>(() => {
+        return notShortCircuitAnd(this.creator.activeTab === "theme", this.creator.showSaveButton);
+      }),
+      locTitleName: "ed.saveTheme",
+      locTooltipName: "ed.saveThemeTooltip",
+      showTitle: false
+    });
+    items.push(this.saveThemeAction);
+
     this.resetTheme = new Action({
       id: "resetTheme",
       iconName: "icon-reset",

diff --git a/packages/survey-creator-core/src/localization/english.ts b/packages/survey-creator-core/src/localization/english.ts
@@ -86,6 +86,8 @@ export var enStrings = {
     translation: "Translation",
     saveSurvey: "Save Survey",
     saveSurveyTooltip: "Save Survey",
+    saveTheme: "Save Theme",
+    saveThemeTooltip: "Save Theme",
     designer: "Designer",
     jsonEditor: "JSON Editor",
     jsonHideErrors: "Hide errors",

diff --git a/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts b/packages/survey-creator-core/tests/tabs/theme-builder.tests.ts
@@ -2392,3 +2392,32 @@ test("Check Theme builder's custom questions respect creator locale", (): any =>
   expect(themeEditor.getQuestionByName("editorFont").contentPanel.getQuestionByName("family").title).toBe("fontFamily_test");
   editorLocalization.currentLocale = "en";
 });
+test("saveTheme action", (): any => {
+  const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
+  let saveCount = 0;
+  creator.saveSurveyFunc = () => {
+    saveCount++;
+  };
+  let saveThemeCount = 0;
+  creator.saveThemeFunc = (saveNo, callback) => {
+    saveThemeCount++;
+    callback(saveNo, "success");
+  };
+  creator.JSON = { questions: [{ type: "text", name: "q1" }] };
+  const themePlugin: ThemeTabPlugin = <ThemeTabPlugin>creator.getPlugin("theme");
+  expect(saveCount).toBe(0);
+  expect(saveThemeCount).toBe(0);
+  expect(themePlugin["saveThemeAction"].visible).toBeFalsy();
+  expect(themePlugin["saveThemeAction"].enabled).toBeFalsy();
+  creator.activeTab = "theme";
+  expect(themePlugin["saveThemeAction"].visible).toBeTruthy();
+  expect(themePlugin["saveThemeAction"].enabled).toBeFalsy();
+  const themeSurveyTab = themePlugin.model as ThemeBuilder;
+  const themeEditor = themeSurveyTab.themeEditorSurvey;
+  themeEditor.getQuestionByName("--sjs-primary-backcolor").value = "some val";
+  expect(themePlugin["saveThemeAction"].enabled).toBeTruthy();
+  themePlugin["saveThemeAction"].action();
+  expect(themePlugin["saveThemeAction"].enabled).toBeFalsy();
+  expect(saveCount).toBe(0);
+  expect(saveThemeCount).toBe(1);
+});