feat(form): small tweaks for modal fields

cern-sis · Apr 15, 2024 · 0f7903f · 0f7903f
1 parent ffedeff
commit 0f7903f
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 47 deletions.
diff --git a/src/admin/utils/fieldTypes.jsx b/src/admin/utils/fieldTypes.jsx
@@ -47,26 +47,42 @@ export const common = {
             values: [6, 8, 12, 16, 18, 24],
             labels: ["25%", "33%", "50%", "66%", "75%", "100%"],
           },
-          isModal: {
+          showAsModal: {
             title: "Display as Modal",
             type: "boolean",
           },
         },
+
         dependencies: {
-          isModal: {
-            properties: {
-              modal: {
+          showAsModal: {
+            oneOf: [
+              {
                 properties: {
-                  btnText: { type: "string" },
-                  okText: { type: "string" },
-                  modalWidth: { type: "string" },
-                  headerDirection: {
-                    type: "string",
-                    enum: ["horizontal", "vertical"],
+                  showAsModal: {
+                    enum: [false],
                   },
                 },
               },
-            },
+              {
+                properties: {
+                  showAsModal: {
+                    enum: [true],
+                  },
+                  modal: {
+                    title: "Modal settings",
+                    type: "object",
+                    properties: {
+                      buttonText: { title: "Button title", type: "string" },
+                      modalWidth: { title: "Modal width", type: "integer" },
+                      buttonInNewLine: {
+                        title: "Button in new line",
+                        type: "boolean",
+                      },
+                    },
+                  },
+                },
+              },
+            ],
             required: ["modal"],
           },
         },
@@ -78,6 +94,18 @@ export const common = {
       span: {
         "ui:widget": "slider",
       },
+      modal: {
+        "ui:options": {
+          showAsModal: true,
+          modal: {
+            buttonInNewLine: true,
+          },
+        },
+      },
+      showAsModal: {
+        "ui:widget": "switch",
+      },
+      "ui:order": ["showAsModal", "modal", "*"],
     },
   },
 };
@@ -262,26 +290,12 @@ const collections = {
             common.optionsUiSchema.properties["ui:options"].dependencies,
           properties: {
             ...common.optionsUiSchema.properties["ui:options"].properties,
-            itemsDisplayTitle: {
-              type: "string",
-              title: "Items Display Title",
-              description:
-                "You can set a fixed value or you can reference child fields between `{{` and `}}`",
-            },
           },
         },
       },
     },
     optionsUiSchemaUiSchema: {
       ...common.optionsUiSchemaUiSchema,
-      "ui:options": {
-        itemsDisplayTitle: {
-          "ui:widget": "itemsDisplayTitle",
-          "ui:options": {
-            descriptionIsMarkdown: true,
-          },
-        },
-      },
     },
     default: {
       schema: {
@@ -1029,7 +1043,7 @@ const advanced = {
               { const: "zenodo", title: "Zenodo" },
             ],
           },
-          uniqueItems: "true",
+          uniqueItems: true,
         },
       },
     },

diff --git a/src/forms/templates/Field/FieldModal.jsx b/src/forms/templates/Field/FieldModal.jsx
@@ -1,53 +1,44 @@
 import { useState } from "react";
 
-import { Button, Divider, Modal, Space } from "antd";
+import { Button, Modal, Space } from "antd";
 
 import "../../Form.less";
 
 import { EditOutlined } from "@ant-design/icons";
 
 function FieldModal(props) {
-  const [modalOpen, setmodalOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
   const { label, content, options } = props;
+
   return (
     <>
       <Space
-        align={options?.headerDirection == "horizontal" ? "center" : "start"}
+        align={options?.buttonInNewLine ? "start" : "center"}
         size="small"
-        split={
-          options?.headerDirection != "vertical" && <Divider type="vertical" />
-        }
-        direction={
-          ["horizontal", "vertical"].indexOf(options?.headerDirection) > -1
-            ? options.headerDirection
-            : "horizontal"
-        }
+        direction={options.buttonInNewLine ? "vertical" : "horizontal"}
         style={{
           display: "flex",
           flex: 1,
-          width: "100%",
-          backgdround: "blue",
-          justifyCodntent: "space-between",
+          justifyContent: "space-between",
         }}
       >
         {label}
         <Button
           size="small"
           icon={<EditOutlined />}
-          onClick={() => setmodalOpen(!modalOpen)}
+          onClick={() => setModalOpen(!modalOpen)}
         >
-          {options?.btnText || "Open"}
+          {options?.buttonText || "Open"}
         </Button>
       </Space>
       <Modal
         centered
         getContainer={false}
         open={modalOpen}
-        okText={options?.okText}
-        onCancel={() => setmodalOpen(false)}
+        onCancel={() => setModalOpen(false)}
         footer={null}
         className="formule-field-modal"
-        width={options?.modalWidth ? options?.modalWidth : 416}
+        width={options?.modalWidth ? options?.modalWidth : 400}
       >
         {content}
       </Modal>

diff --git a/src/forms/templates/Field/FieldTemplate.jsx b/src/forms/templates/Field/FieldTemplate.jsx
@@ -49,8 +49,10 @@ const FieldTemplate = ({
 
   const { ["ui:options"]: uiOptions = {} } = uiSchema;
 
+  const shouldShowAsModal = uiOptions?.showAsModal === true;
+
   let _children;
-  if (uiOptions?.isModal) {
+  if (shouldShowAsModal) {
     _children = (
       <FieldModal
         label={
@@ -96,7 +98,7 @@ const FieldTemplate = ({
           help={(!!rawHelp && help) || (!!rawErrors && renderFieldErrors())}
           htmlFor={id}
           label={
-            !uiOptions?.isModal &&
+            !shouldShowAsModal &&
             (displayLabel || uiSchema["ui:field"]) &&
             label && (
               <FieldHeader