DEV: Convert theme-upload modal to component-based API (#22699)

2025-05-24 03:36:18 +08:00 · 2023-07-26 12:46:02 -05:00
parent a5b810fe18
commit f3b7351ff6
6 changed files with 167 additions and 186 deletions
--- a/app/assets/javascripts/admin/addon/components/theme-upload-add.js
+++ b/app/assets/javascripts/admin/addon/components/theme-upload-add.js
@ -0,0 +1,112 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import I18n from "I18n";
+import { ajax } from "discourse/lib/ajax";
+import { isEmpty } from "@ember/utils";
+
+const THEME_FIELD_VARIABLE_TYPE_IDS = [2, 3, 4];
+const SCSS_VARIABLE_NAMES = [
+  // common/foundation/colors.scss
+  "primary",
+  "secondary",
+  "tertiary",
+  "quaternary",
+  "header_background",
+  "header_primary",
+  "highlight",
+  "danger",
+  "success",
+  "love",
+  // common/foundation/math.scss
+  "E",
+  "PI",
+  "LN2",
+  "SQRT2",
+  // common/foundation/variables.scss
+  "small-width",
+  "medium-width",
+  "large-width",
+  "google",
+  "instagram",
+  "facebook",
+  "cas",
+  "twitter",
+  "github",
+  "base-font-size",
+  "base-line-height",
+  "base-font-family",
+  "primary-low",
+  "primary-medium",
+  "secondary-low",
+  "secondary-medium",
+  "tertiary-low",
+  "quaternary-low",
+  "highlight-low",
+  "highlight-medium",
+  "danger-low",
+  "danger-medium",
+  "success-low",
+  "love-low",
+];
+
+export default class ThemeUploadAdd extends Component {
+  @tracked name;
+  @tracked fileSelected = false;
+  @tracked flash;
+
+  get disabled() {
+    return this.errorMessage && this.fileSelected;
+  }
+
+  get errorMessage() {
+    if (!this.name) {
+      return;
+    } else if (!this.name.match(/^[a-z_][a-z0-9_-]*$/i)) {
+      return I18n.t("admin.customize.theme.variable_name_error.invalid_syntax");
+    } else if (SCSS_VARIABLE_NAMES.includes(name.toLowerCase())) {
+      return I18n.t("admin.customize.theme.variable_name_error.no_overwrite");
+    } else if (
+      this.args.model.themeFields.some(
+        (tf) =>
+          THEME_FIELD_VARIABLE_TYPE_IDS.includes(tf.type_id) &&
+          this.name === tf.name
+      )
+    ) {
+      return I18n.t("admin.customize.theme.variable_name_error.must_be_unique");
+    }
+  }
+
+  @action
+  updateName(e) {
+    if (isEmpty(this.name)) {
+      this.name = e.target.files[0].name.split(".")[0];
+    }
+    this.fileSelected = e.target.files[0];
+  }
+
+  @action
+  async upload() {
+    const file = document.getElementById("file-input").files[0];
+    const options = {
+      type: "POST",
+      processData: false,
+      contentType: false,
+      data: new FormData(),
+    };
+    options.data.append("file", file);
+
+    try {
+      const result = await ajax("/admin/themes/upload_asset", options);
+      const upload = {
+        upload_id: result.upload_id,
+        name: this.name,
+        original_filename: file.name,
+      };
+      this.args.model.addUpload(upload);
+      this.args.closeModal();
+    } catch (e) {
+      this.flash = e.jqXHR.responseJSON.errors.join(". ");
+    }
+  }
+}