refactor custom properties

OpenDonationAssistant · May 16, 2024 · 6267b41 · 6267b41
1 parent 55a2bd8
commit 6267b41
Show file tree

Hide file tree

Showing 22 changed files with 349 additions and 255 deletions.
diff --git a/src/components/ConfigurationPage/css/WidgetList.css b/src/components/ConfigurationPage/css/WidgetList.css
@@ -2,6 +2,7 @@
   margin-left: 300px;
   margin-right: 100px;
   padding-top: 20px;
+  padding-bottom: 50px;
   flex: 1 1 auto;
 }
 

diff --git a/src/components/ConfigurationPage/css/WidgetSettings.css b/src/components/ConfigurationPage/css/WidgetSettings.css
@@ -1,9 +1,9 @@
-/* @import url("https://fonts.googleapis.com/css2?family=Amatic+SC&family=Protest+Strike&display=swap"); */
 @import url("https://fonts.googleapis.com/css2?family=Martian+Mono:[email protected]&display=swap");
 
 .configuration-container {
   height: 100%;
   display: flex;
+  flex-direction: column;
 }
 
 .widget-settings {
@@ -12,7 +12,6 @@
   padding-left: 15px;
   padding-right: 15px;
   padding-bottom: 20px;
-  margin-bottom: 5px;
 }
 
 .widget-settings-item {

diff --git a/src/components/ConfigurationPage/settings/BaseSettings.tsx b/src/components/ConfigurationPage/settings/BaseSettings.tsx
@@ -1,24 +1,17 @@
 import { useContext } from "react";
 import { WidgetsContext } from "../WidgetsContext";
 import { log } from "../../../logging";
-import { WidgetProperty } from "../widgetproperties/WidgetProperty";
 
 export default function BaseSettings({
   id,
-  propertyFilter,
 }: {
   id: string;
-  customHandler?: Function;
-  propertyFilter?: (prop: WidgetProperty) => boolean;
 }) {
   const { config, updateConfig } = useContext(WidgetsContext);
   log.debug(
     { settings: config.get(id) },
     "creating layout for widget settings",
   );
-  log.debug({ properties: config.get(id)?.properties }, "use properties");
-
-  const filter = (prop) => (propertyFilter ? propertyFilter(prop) : true);
 
   return config.get(id)?.markup(updateConfig);
 }
diff --git a/src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx b/src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx
@@ -13,51 +13,7 @@ export default function DonatersTopListSettings({ id }: { id: string }) {
         .get(id)
         ?.properties
         ?.map((prop) => {
-          if (prop.name === "type" || prop.name === "period") {
-            return prop.markup(updateConfig);
-          }
           if (prop.name === "layout") {
-            return (
-              <div key={prop.name} className="widget-settings-item">
-                <label className="widget-settings-name">
-                  {prop.displayName}
-                </label>
-                <div className="widget-settings-radiocontainer">
-                  <label className="widget-settings-radiobutton">
-                    <input
-                      title="vertical"
-                      type="radio"
-                      value="vertical"
-                      checked={prop.value === "vertical"}
-                      onChange={(e) =>
-                        updateConfig(id, prop.name, e.target.value)
-                      }
-                    />
-                    <img
-                      title="vertical"
-                      src={`/icons/vertical.jpg`}
-                      onClick={() => updateConfig(id, prop.name, "vertical")}
-                    />
-                  </label>
-                  <label className="widget-settings-radiobutton">
-                    <input
-                      title="horizontal"
-                      type="radio"
-                      value="horizontal"
-                      checked={prop.value === "horizontal"}
-                      onChange={(e) =>
-                        updateConfig(id, prop.name, e.target.value)
-                      }
-                    />
-                    <img
-                      title="horizontal"
-                      src={`/icons/horizontal.jpg`}
-                      onClick={() => updateConfig(id, prop.name, "horizontal")}
-                    />
-                  </label>
-                </div>
-              </div>
-            );
           }
         })}
     </>

diff --git a/src/components/ConfigurationPage/widgetproperties/DonatersTopListLayoutProperty.tsx b/src/components/ConfigurationPage/widgetproperties/DonatersTopListLayoutProperty.tsx
@@ -0,0 +1,60 @@
+import { ReactNode } from "react";
+import { DefaultWidgetProperty } from "./WidgetProperty";
+
+export class DonatersTopListLayoutProperty extends DefaultWidgetProperty {
+  constructor(widgetId: string, value: string) {
+    super(widgetId, "layout", "predefined", value, "Компоновка", "content");
+  }
+
+  copy(): DonatersTopListLayoutProperty {
+    return new DonatersTopListLayoutProperty(this.widgetId, this.value);
+  }
+
+  markup(updateConfig: Function): ReactNode {
+    return (
+      <>
+        <div key={this.name} className="widget-settings-item">
+          <label className="widget-settings-name">{this.displayName}</label>
+          <div className="widget-settings-radiocontainer">
+            <label className="widget-settings-radiobutton">
+              <input
+                title="vertical"
+                type="radio"
+                value="vertical"
+                checked={this.value === "vertical"}
+                onChange={(e) =>
+                  updateConfig(this.widgetId, this.name, e.target.value)
+                }
+              />
+              <img
+                title="vertical"
+                src={`/icons/vertical.jpg`}
+                onClick={() =>
+                  updateConfig(this.widgetId, this.name, "vertical")
+                }
+              />
+            </label>
+            <label className="widget-settings-radiobutton">
+              <input
+                title="horizontal"
+                type="radio"
+                value="horizontal"
+                checked={this.value === "horizontal"}
+                onChange={(e) =>
+                  updateConfig(this.widgetId, this.name, e.target.value)
+                }
+              />
+              <img
+                title="horizontal"
+                src={`/icons/horizontal.jpg`}
+                onClick={() =>
+                  updateConfig(this.widgetId, this.name, "horizontal")
+                }
+              />
+            </label>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.module.css b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.module.css
@@ -3,3 +3,8 @@
   position: relative;
   padding: 10px;
 }
+
+.button {
+  width: unset!important;
+  margin-bottom: 10px;
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx b/src/components/ConfigurationPage/widgetproperties/DonationGoalProperty.tsx
@@ -32,7 +32,7 @@ export class DonationGoalProperty extends DefaultWidgetProperty {
         },
       ],
       "Цель",
-      undefined,
+      "goals",
     );
   }
 
@@ -52,13 +52,32 @@ export class DonationGoalProperty extends DefaultWidgetProperty {
     updateConfig(this.widgetId, "goal", this.value);
   }
 
+  addGoal(updateConfig: Function) {
+    log.debug({ settings: this }, "adding goal to");
+    (this.value as Goal[]).push({
+      id: uuidv7(),
+      briefDescription: "Название",
+      fullDescription: "Полное описание",
+      requiredAmount: { major: 100, currency: "RUB" },
+      accumulatedAmount: { major: 0, currency: "RUB" },
+    });
+    updateConfig(this.widgetId, "goal", this.value);
+    log.debug({ settings: this }, "updated goals");
+  }
+
   copy(): DonationGoalProperty {
     return new DonationGoalProperty(this.widgetId, this.value);
   }
 
   markup(updateConfig: Function): ReactNode {
     return (
       <>
+        <button
+          className={`widget-button ${classes.button}`}
+          onClick={() => this.addGoal(updateConfig)}
+        >
+          Добавить цель
+        </button>
         {this.value.map((goal: Goal, index: number) => (
           <div key={index} className={`${classes.goalcontainer}`}>
             <div style={{ fontStyle: "italic", fontWeight: "900"}}>Цель:</div>

diff --git a/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.module.css b/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.module.css
@@ -0,0 +1,16 @@
+.itembackcontainer{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.itembacklabel{
+  flex: 0 0 auto;
+  font-family: "Martian Mono", monospace;
+}
+
+.itembackuploadbutton{
+  flex:  0 0 auto;
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.tsx b/src/components/ConfigurationPage/widgetproperties/ReelItemBackgroundProperty.tsx
@@ -0,0 +1,70 @@
+import { ChangeEvent, ReactNode } from "react";
+import { DefaultWidgetProperty } from "./WidgetProperty";
+import axios from "axios";
+import classes from "./ReelItemBackgroundProperty.module.css";
+
+export class ReelItemBackgroundProperty extends DefaultWidgetProperty {
+  constructor(widgetId: string, value: string) {
+    super(
+      widgetId,
+      "backgroundImage",
+      "predefined",
+      value,
+      "Фон карточек",
+      "prizes",
+    );
+  }
+
+  uploadFile(file: File) {
+    return axios.put(
+      `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${file.name}`,
+      { file: file },
+      {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      },
+    );
+  }
+
+  handleBackgroundImageChange(
+    e: ChangeEvent<HTMLInputElement>,
+    updateConfig: Function,
+  ) {
+    if (e.target.files) {
+      const file = e.target.files[0];
+      this.uploadFile(file).then((ignore) => {
+        updateConfig(this.widgetId, "backgroundImage", file.name);
+      });
+    }
+  }
+
+  copy(): ReelItemBackgroundProperty {
+    return new ReelItemBackgroundProperty(this.widgetId, this.value);
+  }
+
+  markup(updateConfig: Function): ReactNode {
+    return (
+      <>
+        <div className={`${classes.itembackcontainer}`}>
+          <div className={`${classes.itembacklabel}`}>Фон карточек</div>
+          <label className={`upload-button ${classes.itembackuploadbutton}`}>
+            <input
+              type="file"
+              onChange={(e) =>
+                this.handleBackgroundImageChange(e, updateConfig)
+              }
+            />
+            Загрузить изображение
+          </label>
+        </div>
+        {this.value && (
+          <img
+            className={`${classes.backgroundimage}`}
+            src={`${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${this.value}`}
+          />
+        )}
+      </>
+    );
+  }
+}
diff --git a/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.module.css b/src/components/ConfigurationPage/widgetproperties/ReelItemListProperty.module.css
@@ -0,0 +1,50 @@
+.testbutton {
+  width: 150px;
+  margin-bottom: 10px;
+}
+
+.optionscontainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  padding-bottom: 20px;
+}
+
+.itembackcontainer{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.itembacklabel{
+  flex: 0 0 auto;
+  font-family: "Martian Mono", monospace;
+}
+
+.itembackuploadbutton{
+  flex:  0 0 auto;
+}
+
+.backgroundimage{
+  border: 1px solid #674afd;
+  margin-top: 5px;
+}
+
+.addbuttoncontainer {
+  width: 60%;
+  text-align: center;
+  padding-top: 20px;
+}
+
+.option {
+  width: 60%;
+  display: flex;
+  align-items: center;
+}
+
+.option .widget-settings-value {
+  width: unset;
+}