From fcfba4322ad0e27d7912fe5fcda6f4f362442e03 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 11 May 2023 15:49:28 -0300
Subject: fix some ui in arrays and created input file

---
 .../src/forms/InputArray.tsx                       | 191 +++++++++++----------
 1 file changed, 103 insertions(+), 88 deletions(-)

(limited to 'packages/exchange-backoffice-ui/src/forms/InputArray.tsx')

diff --git a/packages/exchange-backoffice-ui/src/forms/InputArray.tsx b/packages/exchange-backoffice-ui/src/forms/InputArray.tsx
index 2447c9989..b2905a2a7 100644
--- a/packages/exchange-backoffice-ui/src/forms/InputArray.tsx
+++ b/packages/exchange-backoffice-ui/src/forms/InputArray.tsx
@@ -4,6 +4,72 @@ import { FormProvider } from "./FormProvider.js";
 import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
 import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js";
 import { useField } from "./useField.js";
+import { TranslatedString } from "@gnu-taler/taler-util";
+
+function Option({
+  label,
+  disabled,
+  isFirst,
+  isLast,
+  isSelected,
+  onClick,
+}: {
+  label: TranslatedString;
+  isFirst?: boolean;
+  isLast?: boolean;
+  isSelected?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+}): VNode {
+  let clazz = "relative flex border p-4 focus:outline-none disabled:text-grey";
+  if (isFirst) {
+    clazz += " rounded-tl-md rounded-tr-md ";
+  }
+  if (isLast) {
+    clazz += " rounded-bl-md rounded-br-md ";
+  }
+  if (isSelected) {
+    clazz += " z-10 border-indigo-200 bg-indigo-50 ";
+  } else {
+    clazz += " border-gray-200";
+  }
+  if (disabled) {
+    clazz +=
+      " cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200  text-gray";
+  } else {
+    clazz += " cursor-pointer";
+  }
+  return (
+    <label class={clazz}>
+      <input
+        type="radio"
+        name="privacy-setting"
+        checked={isSelected}
+        disabled={disabled}
+        onClick={onClick}
+        class="mt-0.5 h-4 w-4 shrink-0 text-indigo-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200  focus:ring-indigo-600"
+        aria-labelledby="privacy-setting-0-label"
+        aria-describedby="privacy-setting-0-description"
+      />
+      <span class="ml-3 flex flex-col">
+        <span
+          id="privacy-setting-0-label"
+          disabled
+          class="block text-sm font-medium"
+        >
+          {label}
+        </span>
+        {/* <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> */}
+        {/* <span
+        id="privacy-setting-0-description"
+        class="block text-sm"
+      >
+        This project would be available to anyone who has the link
+      </span> */}
+      </span>
+    </label>
+  );
+}
 
 export function InputArray(
   props: {
@@ -17,10 +83,7 @@ export function InputArray(
   const [selectedIndex, setSelected] = useState<number | undefined>(undefined);
   const selected =
     selectedIndex === undefined ? undefined : list[selectedIndex];
-  const [subForm, updateSubForm] = useState(selected ?? {});
-  useEffect(() => {
-    updateSubForm(selected);
-  }, [selected]);
+
   return (
     <div class="sm:col-span-6">
       <LabelWithTooltipMaybeRequired
@@ -29,95 +92,47 @@ export function InputArray(
         tooltip={tooltip}
       />
 
-      <div class="flex mb-4 items-center pt-3">
-        <div class="flex-auto">
-          {selectedIndex !== undefined && (
-            <button
-              type="button"
-              onClick={() => {
-                setSelected(undefined);
-              }}
-              class="block rounded-md bg-white px-3 py-2 text-center text-sm font-semibold shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-            >
-              Cancel
-            </button>
-          )}
-        </div>
-        <div class="flex-none">
-          {selectedIndex === undefined && (
-            <button
-              type="button"
-              onClick={() => {
-                setSelected(list.length);
-              }}
-              class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm  text-white shadow-sm hover:bg-indigo-500 "
-            >
-              Add
-            </button>
-          )}
-        </div>
-      </div>
       <div class="-space-y-px rounded-md bg-white ">
         {list.map((v, idx) => {
-          const isFirst = idx === 0;
-          const isLast = idx === list.length - 1;
-          const isSelected = selectedIndex === idx;
-          const disabled = selectedIndex !== undefined && !isSelected;
-          let clazz =
-            "relative flex border p-4 focus:outline-none disabled:text-grey";
-          if (isFirst) {
-            clazz += " rounded-tl-md rounded-tr-md ";
-          }
-          if (isLast) {
-            clazz += " rounded-bl-md rounded-br-md ";
-          }
-          if (isSelected) {
-            clazz += " z-10 border-indigo-200 bg-indigo-50 ";
-          } else {
-            clazz += " border-gray-200";
-          }
-          if (disabled) {
-            clazz +=
-              " cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200  text-gray";
-          } else {
-            clazz += " cursor-pointer";
-          }
           return (
-            <label class={clazz}>
-              <Fragment>
-                <input
-                  type="radio"
-                  name="privacy-setting"
-                  checked={isSelected}
-                  disabled={disabled}
-                  onClick={() => setSelected(idx)}
-                  class="mt-0.5 h-4 w-4 shrink-0 text-indigo-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200  focus:ring-indigo-600"
-                  aria-labelledby="privacy-setting-0-label"
-                  aria-describedby="privacy-setting-0-description"
-                />
-                <span class="ml-3 flex flex-col">
-                  <span
-                    id="privacy-setting-0-label"
-                    disabled
-                    class="block text-sm font-medium"
-                  >
-                    {v[labelField]}
-                  </span>
-                  {/* <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> */}
-                  {/* <span
-                    id="privacy-setting-0-description"
-                    class="block text-sm"
-                  >
-                    This project would be available to anyone who has the link
-                  </span> */}
-                </span>
-              </Fragment>
-            </label>
+            <Option
+              label={v[labelField]}
+              isSelected={selectedIndex === idx}
+              isLast={idx === list.length - 1}
+              disabled={selectedIndex !== undefined && selectedIndex !== idx}
+              isFirst={idx === 0}
+              onClick={() => {
+                setSelected(selectedIndex === idx ? undefined : idx);
+              }}
+            />
           );
         })}
+        <div class="pt-2">
+          <Option
+            label={"Add..." as TranslatedString}
+            isSelected={selectedIndex === list.length}
+            isLast
+            isFirst
+            disabled={
+              selectedIndex !== undefined && selectedIndex !== list.length
+            }
+            onClick={() => {
+              setSelected(
+                selectedIndex === list.length ? undefined : list.length,
+              );
+            }}
+          />
+        </div>
       </div>
       {selectedIndex !== undefined && (
-        <FormProvider initialValue={subForm} onUpdate={updateSubForm}>
+        <FormProvider
+          initialValue={selected}
+          onUpdate={(v) => {
+            const newValue = [...list];
+            newValue.splice(selectedIndex, 1, v);
+            onChange(newValue);
+          }}
+        >
           <div class="px-4 py-6">
             <div class="grid grid-cols-1 gap-y-8 ">
               <RenderAllFieldsByUiConfig fields={fields} />
@@ -143,7 +158,7 @@ export function InputArray(
               </button>
             )}
           </div>
-          <div class="flex-none">
+          {/* <div class="flex-none">
             <button
               type="button"
               onClick={() => {
@@ -156,7 +171,7 @@ export function InputArray(
             >
               Confirm
             </button>
-          </div>
+          </div> */}
         </div>
       )}
     </div>
-- 
cgit v1.2.3