Modifying test requests

appleple · Oct 17, 2024 · ca9d8d8 · ca9d8d8
1 parent 109a567
commit ca9d8d8
Show file tree

Hide file tree

Showing 30 changed files with 316 additions and 320 deletions.
diff --git a/css/custom-field-maker.css b/css/custom-field-maker.css
@@ -23,7 +23,7 @@
 
 .customFieldFunction select {
   min-height: 26px;
-  padding: 4px;
+  padding: 4px 24px 4px 4px;
   line-height: 1.5;
   font-size: 14px;
 }
@@ -64,7 +64,7 @@
   grid-template-columns: repeat(3, 1fr);
   grid-template-areas:
     "areaInput   areaTitle       areaField"
-    "areaTooltip areaPlaceholder areaPlaceholder";
+    "areaPlaceholder areaTooltip areaTooltip";
 }
 .customFieldGeneratorBasic label,
 .customFieldGeneratorBasic dt,
@@ -94,6 +94,8 @@
 /* ジェネレーター：バリデーター
 -------------------------------------- */
 .customFieldValidatorLabel {
+  background-color: transparent;
+  border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -107,22 +109,21 @@
   border-right: 2px solid #333;
   border-bottom: 2px solid #333;
   transition: transform;
-  transform: rotateZ(-45deg);
+  transform: rotateZ(45deg);
   transform-origin: center center;
 }
-.customFieldValidatorToggle.-open {
-  transform: rotateZ(-315deg);
-}
 
 /* アコーディオン
 -------------------------------------- */
 .customFieldAccordionContent {
   overflow: hidden;
+  visibility: hidden;
   transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
   opacity: 0;
 }
 
 .customFieldAccordionContent.-open {
+  visibility: visible;
   opacity: 1;
 }
 

diff --git a/dist/bundle.js b/dist/bundle.js
@@ -20727,7 +20727,7 @@
                   className: 'acms-admin-icon acms-admin-alert-icon-before acms-admin-icon-attention',
                   'aria-hidden': 'true',
                 }),
-                'typeとタイトルとフィールド、全てを入力しないとソースコードを生成できません。',
+                'タイプとタイトルとフィールド、全てを入力しないとソースコードを生成できません。',
                 e.createElement(
                   'button',
                   {

diff --git a/src/components/cofirmLayouts/GroupTableLayoutConfirm.jsx b/src/components/cofirmLayouts/GroupTableLayoutConfirm.jsx
@@ -42,7 +42,13 @@ export function GroupTableLayoutConfirm() {
               )}
             >
               {fieldgroup.items.map((item, index) => {
-                if (item.type === 'text') {
+                if (
+                  item.type === 'text' ||
+                  item.type === 'tel' ||
+                  item.type === 'number' ||
+                  item.type === 'email' ||
+                  item.type === 'password'
+                ) {
                   return (
                     <WrapTable key={index} title={item.title}>
                       <td>{`{${item.name}}`}</td>

diff --git a/src/components/cofirmLayouts/TableLayoutConfirm.jsx b/src/components/cofirmLayouts/TableLayoutConfirm.jsx
@@ -14,7 +14,13 @@ export function TableLayoutConfirm() {
         if (!item.name) {
           return null;
         }
-        if (item.type === 'text') {
+        if (
+          item.type === 'text' ||
+          item.type === 'tel' ||
+          item.type === 'number' ||
+          item.type === 'email' ||
+          item.type === 'password'
+        ) {
           return (
             <tr key={index}>
               <th>{item.title}</th>
@@ -49,9 +55,10 @@ export function TableLayoutConfirm() {
               <th>{item.title}</th>
               <td>
                 {item.option.map(
-                  (option) => `<!-- BEGIN_IF [{${item.name}}/eq/${option.value}] -->
-            ${option.label}
-            <!-- END_IF -->`
+                  (option) =>
+                    `<!-- BEGIN_IF [{${item.name}}/eq/${option.value}] -->
+                  ${option.label}
+                  <!-- END_IF -->`
                 )}
               </td>
             </tr>
@@ -64,9 +71,10 @@ export function TableLayoutConfirm() {
                 {`<!-- BEGIN ${item.name}:loop -->`}
                 {`<!-- BEGIN ${item.name}:glue -->,<!-- END ${item.name}:glue -->`}
                 {item.option.map(
-                  (option) => `<!-- BEGIN_IF [{${item.name}}/eq/${option.value}] -->
-            ${option.label}
-            <!-- END_IF -->`
+                  (option) =>
+                    `<!-- BEGIN_IF [{${item.name}}/eq/${option.value}] -->
+                  ${option.label}
+                  <!-- END_IF -->`
                 )}
                 {`<!-- END ${item.name}:loop -->`}
               </td>

diff --git a/src/components/cofirmLayouts/UnitGroupTableLayoutConfirm.jsx b/src/components/cofirmLayouts/UnitGroupTableLayoutConfirm.jsx
@@ -42,7 +42,13 @@ export function UnitGroupTableLayoutConfirm() {
               )}
             >
               {unitgroup.items.map((item, index) => {
-                if (item.type === 'text') {
+                if (
+                  item.type === 'text' ||
+                  item.type === 'tel' ||
+                  item.type === 'number' ||
+                  item.type === 'email' ||
+                  item.type === 'password'
+                ) {
                   return (
                     <WrapTable key={index} title={item.title}>
                       <td>{`{${item.name}}`}</td>

diff --git a/src/components/cofirmLayouts/UnitTableLayoutConfirm.jsx b/src/components/cofirmLayouts/UnitTableLayoutConfirm.jsx
@@ -14,7 +14,13 @@ export function UnitTableLayoutConfirm() {
         if (!item.name) {
           return null;
         }
-        if (item.type === 'text') {
+        if (
+          item.type === 'text' ||
+          item.type === 'tel' ||
+          item.type === 'number' ||
+          item.type === 'email' ||
+          item.type === 'password'
+        ) {
           return (
             <tr key={index}>
               <th>{item.title}</th>

diff --git a/src/components/genelator/FieldGroup.jsx b/src/components/genelator/FieldGroup.jsx
@@ -115,15 +115,25 @@ export function FieldGroup() {
   }, [field, setGroupTitleName]);
 
   const addGroup = useCallback(() => {
+    const flg = {
+      unDuplicatedField: false,
+      unAlert: false,
+    };
     if (field.name === field.groupName) {
       setField((prevState) => ({ ...prevState, duplicatedField: true }));
-      return;
-    }
-    if (field.type && field.title && field.name) {
-      setGroupTitleName(field.groupTitle, field.groupName);
-      addGroupItem(field);
     } else {
+      setField((prevState) => ({ ...prevState, duplicatedField: false }));
+      flg.unDuplicatedField = true;
+    }
+    if (!field.type || !field.title || !field.name) {
       setField((prevState) => ({ ...prevState, alert: true }));
+    } else {
+      setField((prevState) => ({ ...prevState, alert: false }));
+      flg.unAlert = true;
+    }
+
+    if (flg.unDuplicatedField && flg.unAlert) {
+      addGroupItem(field);
     }
   }, [field, setGroupTitleName, addGroupItem]);
 
@@ -142,10 +152,6 @@ export function FieldGroup() {
   return (
     <div>
       <div className="customFieldContainer">
-        <GroupAlert field={field} setField={setField} />
-        <DuplicateAlert field={field} setField={setField} />
-        <Alert field={field} setField={setField} />
-
         <div>
           <div className="acms-flex acms-justify-between" style={{ marginBottom: '1em' }}>
             <h2
@@ -161,6 +167,7 @@ export function FieldGroup() {
               </button>
             )}
           </div>
+          <GroupAlert field={field} setField={setField} />
 
           {fieldgroup.title && fieldgroup.name ? (
             <dl className="customFieldGeneratorGroup -openGroup" style={{ margin: 0 }}>
@@ -289,6 +296,12 @@ export function FieldGroup() {
           <div>
             <h2 className="customFieldHeading2">コード生成</h2>
             <div className="customFieldFunction">
+              {(field.alert || field.duplicatedField) && (
+                <div>
+                  <DuplicateAlert field={field} setField={setField} />
+                  <Alert field={field} setField={setField} />
+                </div>
+              )}
               <Basic field={field} setField={setField} />
 
               {field.type === 'checkbox' && (

diff --git a/src/components/genelator/UnitGroup.jsx b/src/components/genelator/UnitGroup.jsx
@@ -120,7 +120,6 @@ export function UnitGroup() {
       return;
     }
     if (field.type && field.title && field.name) {
-      setUnitGroupTitleName(field.groupName, field.groupTitle);
       addUnitGroupItem(field);
     } else {
       setField((prevState) => ({ ...prevState, alert: true }));
@@ -142,10 +141,6 @@ export function UnitGroup() {
   return (
     <div>
       <div className="customFieldContainer">
-        <GroupAlert field={field} setField={setField} />
-        <DuplicateAlert field={field} setField={setField} />
-        <Alert field={field} setField={setField} />
-
         <div>
           <div className="acms-flex acms-justify-between" style={{ marginBottom: '1em' }}>
             <h2
@@ -161,6 +156,7 @@ export function UnitGroup() {
               </button>
             )}
           </div>
+          <GroupAlert field={field} setField={setField} />
 
           {unitgroup.title && unitgroup.name ? (
             <dl className="customFieldGeneratorGroup -openGroup" style={{ margin: 0 }}>
@@ -289,6 +285,12 @@ export function UnitGroup() {
           <div>
             <h2 className="customFieldHeading2">コード生成</h2>
             <div className="customFieldFunction">
+              {(field.alert || field.duplicatedField) && (
+                <div>
+                  <DuplicateAlert field={field} setField={setField} />
+                  <Alert field={field} setField={setField} />
+                </div>
+              )}
               <Basic field={field} setField={setField} />
 
               {field.type === 'checkbox' && (

diff --git a/src/components/genelator/base/Alert.jsx b/src/components/genelator/base/Alert.jsx
@@ -15,7 +15,7 @@ export function Alert(props) {
       {alert ? (
         <p className="acms-admin-alert acms-admin-alert-icon acms-admin-alert-danger" style={{ fontSize: '12px' }}>
           <span className="acms-admin-icon acms-admin-alert-icon-before acms-admin-icon-attention" aria-hidden="true" />
-          typeとタイトルとフィールド、全てを入力しないとソースコードを生成できません。
+          タイプとタイトルとフィールド、全てを入力しないとソースコードを生成できません。
           <button className="js-acms-alert-close acms-admin-alert-icon-after" onClick={onRemoveAlert}>
             ×
           </button>

diff --git a/src/components/genelator/base/Basic.jsx b/src/components/genelator/base/Basic.jsx
@@ -116,20 +116,19 @@ export function Basic(props) {
           />
         </div>
       </div>
-      {isPlaceholder && (
-        <div className="customFieldGeneratorBasicPlaceholder">
-          <label className="">プレースホルダー</label>
-          <div>
-            <input
-              type="text"
-              value={field.placeholder || ''}
-              onChange={(e) => handleInputChange(e, 'placeholder')}
-              className="acms-admin-form-width-full"
-              placeholder=""
-            />
-          </div>
+      <div className="customFieldGeneratorBasicPlaceholder">
+        <label className="">プレースホルダー</label>
+        <div>
+          <input
+            type="text"
+            value={!isPlaceholder ? '' : field.placeholder || ''}
+            onChange={(e) => handleInputChange(e, 'placeholder')}
+            className="acms-admin-form-width-full"
+            placeholder=""
+            disabled={!isPlaceholder}
+          />
         </div>
-      )}
+      </div>
       <div className="customFieldGeneratorBasicTooltip">
         <label className="">ツールチップ</label>
         <div>