taler-typescript-core

commit f4e7ad275ce9d612f15eed0dd6480c94a75a7d15
parent 6bb967f159cc968befb7452310b4201c0ffa5348
Author: Sebastian <sebasjm@gmail.com>
Date:   Fri, 20 Dec 2024 11:28:37 -0300

fix #9408 product id is hidden when the backend url is large

Diffstat:
M
packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
 | 
23
+++++++++++++++++------
M
packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx
 | 
8
+++++---

2 files changed, 22 insertions(+), 9 deletions(-)
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
@@ -25,6 +25,7 @@ export interface Props<T> extends InputProps<T> {
   expand?: boolean;
   inputType?: "text" | "number" | "password";
   addonBefore?: ComponentChildren;
+  addonBeforeLarge?: boolean;
   addonAfter?: ComponentChildren;
   addonAfterAction?: () => void;
   toStr?: (v?: any) => string;
@@ -44,6 +45,7 @@ export function InputWithAddon<T>({
   children,
   expand,
   label,
+  addonBeforeLarge,
   placeholder,
   help,
   tooltip,
@@ -69,18 +71,24 @@ export function InputWithAddon<T>({
           )}
         </label>
       </div>
-      
+
       <div class="field-body is-flex-grow-3">
         <div class="field">
+          {addonBefore && addonBeforeLarge && (
+            <div class="control">
+              <a class="button is-static">{addonBefore}</a>
+            </div>
+          )}
           <div class="field has-addons">
-            {addonBefore && (
+            {addonBefore && !addonBeforeLarge && (
               <div class="control">
                 <a class="button is-static">{addonBefore}</a>
               </div>
             )}
             <p
-              class={`control${expand ? " is-expanded" : ""}${required ? " has-icons-right" : ""
-                }`}
+              class={`control${expand ? " is-expanded" : ""}${
+                required ? " has-icons-right" : ""
+              }`}
             >
               <input
                 {...(inputExtra || {})}
@@ -101,7 +109,11 @@ export function InputWithAddon<T>({
               {children}
             </p>
             {addonAfter && (
-              <div class="control" onClick={addonAfterAction} style={{ cursor: addonAfterAction ? "pointer" : undefined }}>
+              <div
+                class="control"
+                onClick={addonAfterAction}
+                style={{ cursor: addonAfterAction ? "pointer" : undefined }}
+              >
                 <a class="button is-static">{addonAfter}</a>
               </div>
             )}
@@ -111,7 +123,6 @@ export function InputWithAddon<T>({
         </div>
         {expand ? <div>{side}</div> : side}
       </div>
-
     </div>
   );
 }
diff --git a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx
@@ -176,18 +176,20 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) {
         {/**
          * If the user press enter on any text field it will the browser will trigger
          * the first button that it found.
-         * 
+         *
          * In this form the InputImage will be triggered and this is unwanted.
-         * 
+         *
          * As a workaround we have this non-action button which will prevent loading/unloading
          * the image when the enter key is pressed accidentally.
          */}
-        <button />
+        <button style={{ visibility: "hidden" }} />
         {alreadyExist ? undefined : (
           <InputWithAddon<Entity>
             name="product_id"
             addonBefore={new URL("product/", state.backendUrl.href).href}
             label={i18n.str`ID`}
+            addonBeforeLarge={state.backendUrl.href.length > 50}
+            expand
             tooltip={i18n.str`Product identification to use in URLs (for internal use only).`}
           />
         )}