add id to inputs

signumsoftware · Mar 24, 2023 · c26a9ef · c26a9ef
1 parent fc341be
commit c26a9ef
Show file tree

Hide file tree

Showing 34 changed files with 346 additions and 316 deletions.
diff --git a/Signum.React.Extensions/Alerts/Templates/Alert.tsx b/Signum.React.Extensions/Alerts/Templates/Alert.tsx
@@ -41,13 +41,13 @@ export default function Alert(p: { ctx: TypeContext<AlertEntity> }) {
       <ValueLine ctx={ctx.subCtx(n => n.titleField)} label={AlertMessage.Title.niceToString()} valueHtmlAttributes={{ placeholder: (ctx.value.alertType && AlertsClient.getTitle(null, ctx.value.alertType)) ?? undefined }} />
       {
         !ctx.value.isNew && !edit ?
-          <FormGroup ctx={ctx.subCtx(n => n.titleField)} label={AlertMessage.Text.niceToString()} >
-            <div style={{ whiteSpace: "pre-wrap" }}>
-              {AlertsClient.format(ctx.value.textField || ctx.value.textFromAlertType || "", ctx.value)}
-              <br />
-              <a href="#" className="text-muted" onClick={e => { e.preventDefault(); setEdit(true) }}>Edit</a>
-            </div>
-          </FormGroup>
+          <FormGroup ctx={ctx.subCtx(n => n.titleField)} label={AlertMessage.Text.niceToString()}
+            children={() => <div style={{ whiteSpace: "pre-wrap" }}>
+                {AlertsClient.format(ctx.value.textField || ctx.value.textFromAlertType || "", ctx.value)}
+                <br />
+                <a href="#" className="text-muted" onClick={e => { e.preventDefault(); setEdit(true) }}>Edit</a>
+              </div>}
+          />
           :
           <ValueLine ctx={ctx.subCtx(n => n.textField)} label={AlertMessage.Text.niceToString()} valueHtmlAttributes={{ style: { height: "180px" } }} />
       }

diff --git a/Signum.React.Extensions/Authorization/Templates/DoublePassword.tsx b/Signum.React.Extensions/Authorization/Templates/DoublePassword.tsx
@@ -32,22 +32,22 @@ export function DoublePassword(p: { ctx: TypeContext<string>, initialOpen: boole
 
   if (!isOpen) {
     return (
-      <FormGroup label={LoginAuthMessage.NewPassword.niceToString()} ctx={p.ctx}>
-        <a className="btn btn-light btn-sm" onClick={() => setIsOpen(true)}>
-          <FontAwesomeIcon icon="key" /> {LoginAuthMessage.ChangePassword.niceToString()}
-        </a>
-      </FormGroup>
+      <FormGroup label={LoginAuthMessage.NewPassword.niceToString()} ctx={p.ctx}
+        children={() => <a className="btn btn-light btn-sm" onClick={() => setIsOpen(true)}>
+            <FontAwesomeIcon icon="key" /> {LoginAuthMessage.ChangePassword.niceToString()}
+          </a>}
+      />
     );
   }
 
   return (
     <div>
-      <FormGroup ctx={p.ctx} label={LoginAuthMessage.NewPassword.niceToString()}>
-        <input type="password" ref={newPass} autoComplete="off" placeholder={LoginAuthMessage.NewPassword.niceToString()} className={classes(p.ctx.formControlClass, p.mandatory && !newPass.current?.value ? "sf-mandatory" : null)} onBlur={handlePasswordBlur} />
-      </FormGroup>
-      <FormGroup ctx={p.ctx} label={LoginAuthMessage.ConfirmNewPassword.niceToString()}>
-        <input type="password" ref={newPass2} autoComplete="off" placeholder={LoginAuthMessage.ConfirmNewPassword.niceToString()} className={classes(p.ctx.formControlClass, p.mandatory && !newPass2.current?.value ? "sf-mandatory" : null)} onBlur={handlePasswordBlur} />
-      </FormGroup>
+      <FormGroup ctx={p.ctx} label={LoginAuthMessage.NewPassword.niceToString()}
+        children={inputId => <input id={inputId} type="password" ref={newPass} autoComplete="off" placeholder={LoginAuthMessage.NewPassword.niceToString()} className={classes(p.ctx.formControlClass, p.mandatory && !newPass.current?.value ? "sf-mandatory" : null)} onBlur={handlePasswordBlur} />}
+      />
+      <FormGroup ctx={p.ctx} label={LoginAuthMessage.ConfirmNewPassword.niceToString()}
+        children={inputId => <input id={inputId} type="password" ref={newPass2} autoComplete="off" placeholder={LoginAuthMessage.ConfirmNewPassword.niceToString()} className={classes(p.ctx.formControlClass, p.mandatory && !newPass2.current?.value ? "sf-mandatory" : null)} onBlur={handlePasswordBlur} />}
+      />
     </div>
   );
 }
diff --git a/Signum.React.Extensions/Basics/Templates/IconTypeahead.tsx b/Signum.React.Extensions/Basics/Templates/IconTypeahead.tsx
@@ -29,14 +29,14 @@ export function IconTypeaheadLine(p : IconTypeaheadLineProps){
   var ctx = p.ctx;
 
   return (
-    <FormGroup ctx={ctx} label={ctx.niceName()} >
-      <IconTypeahead icon={ctx.value}
+    <FormGroup ctx={ctx} label={ctx.niceName()} 
+      children={inputId => <IconTypeahead icon={ctx.value}
         placeholder={p.ctx.placeholderLabels ? p.ctx.niceName() : undefined}
         extraIcons={p.extraIcons}
         formControlClass={ctx.formControlClass}
         inputAttrs={p.inputAttrs}
-        onChange={handleChange} />
-    </FormGroup>
+        onChange={handleChange} />}
+    />
   );
 }
 

diff --git a/Signum.React.Extensions/Chart/Templates/ChartColumn.tsx b/Signum.React.Extensions/Chart/Templates/ChartColumn.tsx
@@ -198,8 +198,8 @@ export function ChartPaletteLink(p: ChartPaletteLinkProps) {
 
   return (
     <FormGroup ctx={p.ctx}
-      label={ChartMessage.ColorsFor0.niceToString(p.type.niceName)}>
-      {palette === undefined ?
+      label={ChartMessage.ColorsFor0.niceToString(p.type.niceName)}
+      children={() => palette === undefined ?
         <span className={p.ctx.formControlPlainTextClass}>
           {JavascriptMessage.loading.niceToString()}
         </span> :
@@ -219,7 +219,7 @@ export function ChartPaletteLink(p: ChartPaletteLinkProps) {
           {palette ? ChartMessage.ViewPalette.niceToString() : ChartMessage.CreatePalette.niceToString()}
         </a>
       }
-    </FormGroup>
+    />
   );
 }
 

diff --git a/Signum.React.Extensions/Chart/UserChart/UserChart.tsx b/Signum.React.Extensions/Chart/UserChart/UserChart.tsx
@@ -41,13 +41,13 @@ export default function UserChart(p : { ctx: TypeContext<UserChartEntity> }){
     <div>
       <EntityLine ctx={ctx.subCtx(e => e.owner)} />
       <ValueLine ctx={ctx.subCtx(e => e.displayName)} />
-      <FormGroup ctx={ctx.subCtx(e => e.query)}>
-        {
+      <FormGroup ctx={ctx.subCtx(e => e.query)}
+        children={() =>
           Finder.isFindable(queryKey, true) ?
             <a className="form-control-static" href={Finder.findOptionsPath({ queryName: queryKey })}>{getQueryNiceName(queryKey)}</a> :
             <span>{getQueryNiceName(queryKey)}</span>
         }
-      </FormGroup>
+      />
       <EntityLine ctx={ctx.subCtx(e => e.entityType)} onChange={() => forceUpdate()}
         helpText={
           <div>

diff --git a/Signum.React.Extensions/Dashboard/View/ValueUserQueryListPart.tsx b/Signum.React.Extensions/Dashboard/View/ValueUserQueryListPart.tsx
@@ -54,17 +54,18 @@ export function ValueUserQueryElement(p: ValueUserQueryElementProps) {
 
   return (
     <div>
-      <FormGroup ctx={ctx} label={ctx.value.label ?? getQueryNiceName(fo.queryName)}>
-        <div className="row align-items-center">
-          <div className="col-auto">
-            <span>{ctx.value.label ?? getQueryNiceName(fo.queryName)}</span>
-          </div>
-          <div className="col-auto">
-          <SearchValueLine ctx={ctx2} findOptions={fo}
-            customRequest={p.cachedQuery && ((qr, fo, token) => p.cachedQuery!.then(cq => executeQueryValueCached(qr, fo, token, cq)))} />
-          </div>
-        </div>
-      </FormGroup>
+      <FormGroup ctx={ctx} label={ctx.value.label ?? getQueryNiceName(fo.queryName)}
+        children={() =>
+          <div className="row align-items-center">
+            <div className="col-auto">
+              <span>{ctx.value.label ?? getQueryNiceName(fo!.queryName)}</span>
+            </div>
+            <div className="col-auto">
+              <SearchValueLine ctx={ctx2} findOptions={fo}
+                customRequest={p.cachedQuery && ((qr, fo, token) => p.cachedQuery!.then(cq => executeQueryValueCached(qr, fo, token, cq)))} />
+            </div>
+          </div>}
+      />
     </div>
   );
 }

diff --git a/Signum.React.Extensions/Dynamic/DynamicPanelSimplePage.tsx b/Signum.React.Extensions/Dynamic/DynamicPanelSimplePage.tsx
@@ -144,35 +144,37 @@ export function CheckEvalType(p: CheckEvalTypeProps) {
   }
 
   return (
-    <FormGroup ctx={p.ctx} label={getQueryNiceName(p.findOptions.queryName)}>
-      <SearchValue findOptions={p.findOptions} isLink={true} />
-      {
-        state == "loading" ?
-          <FontAwesomeIcon icon="arrows-rotate" spin={true} /> :
-          <span onClick={e => { e.preventDefault(); loadData(p); }} style={{ cursor: "pointer" }} ><FontAwesomeIcon icon="arrows-rotate" className="sf-line-button" title={DynamicPanelMessage.OpenErrors.niceToString()} /></span>
-      }
-      {
-        state == "failed" ? <span className="mini-alert alert-danger" role="alert"><FontAwesomeIcon icon="triangle-exclamation" /> Exception checking {getQueryNiceName(p.findOptions.queryName)}</span> :
-          errors && errors.length > 0 ? <span className="mini-alert alert-danger" role="alert"><strong>{errors.length}</strong> {errors.length == 1 ? "Error" : "Errors"} found</span> :
-            errors && errors?.length == 0 ? <span className="mini-alert alert-success" role="alert">No errors found!</span> :
-              undefined
-      }
-      {
-        errors != null && errors.length > 0 &&
-        <div className="table-responsive">
-          <table className="table table-sm">
-            <tbody>
-              {errors.map((e, i) => <tr key={i}>
-                <td><EntityLink lite={e.lite} /></td>
-                <td className="text-danger">{e.error.split("\n").map((line, i) => <p key={i}>{line}</p>)}</td>
-              </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
+    <FormGroup ctx={p.ctx} label={getQueryNiceName(p.findOptions.queryName)} 
+      children={() => <>
+        <SearchValue findOptions={p.findOptions} isLink={true} />
+        {
+          state == "loading" ?
+            <FontAwesomeIcon icon="arrows-rotate" spin={true} /> :
+            <span onClick={e => { e.preventDefault(); loadData(p); }} style={{ cursor: "pointer" }} ><FontAwesomeIcon icon="arrows-rotate" className="sf-line-button" title={DynamicPanelMessage.OpenErrors.niceToString()} /></span>
+        }
+        {
+          state == "failed" ? <span className="mini-alert alert-danger" role="alert"><FontAwesomeIcon icon="triangle-exclamation" /> Exception checking {getQueryNiceName(p.findOptions.queryName)}</span> :
+            errors && errors.length > 0 ? <span className="mini-alert alert-danger" role="alert"><strong>{errors.length}</strong> {errors.length == 1 ? "Error" : "Errors"} found</span> :
+              errors && errors?.length == 0 ? <span className="mini-alert alert-success" role="alert">No errors found!</span> :
+                undefined
+        }
+        {
+          errors != null && errors.length > 0 &&
+          <div className="table-responsive">
+            <table className="table table-sm">
+              <tbody>
+                {errors.map((e, i) => <tr key={i}>
+                  <td><EntityLink lite={e.lite} /></td>
+                  <td className="text-danger">{e.error.split("\n").map((line, i) => <p key={i}>{line}</p>)}</td>
+                </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
 
-      }
-    </FormGroup>
+        }
+      </>}
+    />
   );
 }
 

diff --git a/Signum.React.Extensions/Dynamic/Validation/DynamicValidation.tsx b/Signum.React.Extensions/Dynamic/Validation/DynamicValidation.tsx
@@ -145,9 +145,9 @@ export default function DynamicValidation(p: DynamicValidationProps) {
     <div>
       <ValueLine ctx={ctx.subCtx(d => d.name)} />
       <EntityLine ctx={ctx.subCtx(d => d.entityType)} onChange={handleEntityTypeChange} />
-      <FormGroup ctx={ctx.subCtx(d => d.subEntity)}>
-        {ctx.value.entityType && <PropertyRouteCombo ctx={ctx.subCtx(d => d.subEntity)} type={ctx.value.entityType} onChange={forceUpdate} routes={PropertyRoute.generateAll(ctx.value.entityType.cleanName).filter(a => a.propertyRouteType == "Mixin" || a.typeReference().isEmbedded && !a.typeReference().isCollection)} />}
-      </FormGroup>
+      <FormGroup ctx={ctx.subCtx(d => d.subEntity)}
+        children={() => ctx.value.entityType && <PropertyRouteCombo ctx={ctx.subCtx(d => d.subEntity)} type={ctx.value.entityType} onChange={forceUpdate} routes={PropertyRoute.generateAll(ctx.value.entityType.cleanName).filter(a => a.propertyRouteType == "Mixin" || a.typeReference().isEmbedded && !a.typeReference().isCollection)} />}
+      />
       {ctx.value.entityType &&
         <div>
           <br />

diff --git a/Signum.React.Extensions/Dynamic/View/DynamicViewOverride.tsx b/Signum.React.Extensions/Dynamic/View/DynamicViewOverride.tsx
@@ -261,14 +261,13 @@ export default function DynamicViewOverrideComponent(p: DynamicViewOverrideCompo
       <EntityLine ctx={ctx.subCtx(a => a.entityType)} onChange={forceUpdate} onRemove={handleTypeRemove} />
       {
         ctx.value.entityType && viewNames &&
-        <FormGroup ctx={ctx.subCtx(d => d.viewName)} label={ctx.niceName(d => d.viewName)}>
-          {
-            <select value={ctx.value.viewName ? ctx.value.viewName : ""} className="form-select" onChange={handleViewNameChange}>
+        <FormGroup ctx={ctx.subCtx(d => d.viewName)} label={ctx.niceName(d => d.viewName)}
+          children={inputId => <select id={inputId} value={ctx.value.viewName ? ctx.value.viewName : ""} className="form-select" onChange={handleViewNameChange}>
               <option value="">{" - "}</option>
               {(viewNames ?? []).map((v, i) => <option key={i} value={v}>{v}</option>)}
             </select>
           }
-        </FormGroup>
+        />
       }
 
       {ctx.value.entityType &&

diff --git a/Signum.React.Extensions/Files/FileImageLine.tsx b/Signum.React.Extensions/Files/FileImageLine.tsx
@@ -68,8 +68,8 @@ export const FileImageLine = React.forwardRef(function FileImageLine(props: File
     <FormGroup ctx={p.ctx} label={p.label}
       labelHtmlAttributes={p.labelHtmlAttributes}
       htmlAttributes={{ ...c.baseHtmlAttributes(), ...EntityBaseController.entityHtmlAttributes(p.ctx.value), ...p.formGroupHtmlAttributes }}
-      helpText={c.props.helpText}>
-      {hasValue ? renderImage() : p.ctx.readOnly ? undefined :
+      helpText={c.props.helpText}
+      children={() => hasValue ? renderImage() : p.ctx.readOnly ? undefined :
         <FileUploader
           accept={p.accept}
           maxSizeInBytes={p.maxSizeInBytes}
@@ -81,7 +81,7 @@ export const FileImageLine = React.forwardRef(function FileImageLine(props: File
           buttonCss={p.ctx.buttonClass}
           divHtmlAttributes={{ className: "sf-file-line-new" }} />
       }
-    </FormGroup>
+    />
   );
 
   function renderImage() {

diff --git a/Signum.React.Extensions/Files/FileLine.tsx b/Signum.React.Extensions/Files/FileLine.tsx
@@ -68,8 +68,8 @@ export const FileLine = React.memo(React.forwardRef(function FileLine(props: Fil
     <FormGroup ctx={p.ctx} label={p.label}
       labelHtmlAttributes={p.labelHtmlAttributes}
       htmlAttributes={{ ...c.baseHtmlAttributes(), ...EntityBaseController.entityHtmlAttributes(p.ctx.value), ...p.formGroupHtmlAttributes }}
-      helpText={p.helpText}>
-      {hasValue ? renderFile() : p.ctx.readOnly ? undefined :
+      helpText={p.helpText}
+      children={() => hasValue ? renderFile() : p.ctx.readOnly ? undefined :
         <FileUploader
           accept={p.accept}
           maxSizeInBytes={p.maxSizeInBytes}
@@ -82,7 +82,7 @@ export const FileLine = React.memo(React.forwardRef(function FileLine(props: Fil
           fileDropCssClass={c.mandatoryClass ?? undefined}
           divHtmlAttributes={{ className: "sf-file-line-new" }} />
       }
-    </FormGroup>
+    />
   );
 
 

diff --git a/Signum.React.Extensions/Files/MultiFileImageLine.tsx b/Signum.React.Extensions/Files/MultiFileImageLine.tsx
@@ -92,8 +92,8 @@ export const MultiFileImageLine = React.forwardRef(function MultiFileLine(props:
     <FormGroup ctx={p.ctx} label={p.label}
       htmlAttributes={{ ...c.baseHtmlAttributes(), ...p.formGroupHtmlAttributes }}
       helpText={p.helpText}
-      labelHtmlAttributes={p.labelHtmlAttributes}>
-      <div>
+      labelHtmlAttributes={p.labelHtmlAttributes}
+      children={() => <div>
         <div className="d-flex">
           {
             c.getMListItemContext(p.ctx.subCtx({ formGroupStyle: "None" })).map(mlec =>
@@ -127,8 +127,8 @@ export const MultiFileImageLine = React.forwardRef(function MultiFileLine(props:
               buttonCss={p.ctx.buttonClass}
               divHtmlAttributes={{ className: "sf-file-line-new" }} />}
         </div>
-      </div>
-    </FormGroup >
+      </div>}
+    />
   );
 
 

diff --git a/Signum.React.Extensions/Files/MultiFileLine.tsx b/Signum.React.Extensions/Files/MultiFileLine.tsx
@@ -105,8 +105,8 @@ export const MultiFileLine = React.forwardRef(function MultiFileLine(props: Mult
     <FormGroup ctx={p.ctx} label={p.label}
       htmlAttributes={{ ...c.baseHtmlAttributes(), ...p.formGroupHtmlAttributes }}
       helpText={p.helpText}
-      labelHtmlAttributes={p.labelHtmlAttributes}>
-      <table className="sf-multi-value">
+      labelHtmlAttributes={p.labelHtmlAttributes}
+      children={() => <table className="sf-multi-value">
         <tbody>
           {
             c.getMListItemContext(p.ctx.subCtx({ formGroupStyle: "None" })).map(mlec =>
@@ -155,8 +155,8 @@ export const MultiFileLine = React.forwardRef(function MultiFileLine(props: Mult
             </td>
           </tr>
         </tbody>
-      </table>
-    </FormGroup>
+      </table>}
+    />
   );
 });
 

diff --git a/Signum.React.Extensions/MachineLearning/Templates/NeuralNetworkSettings.tsx b/Signum.React.Extensions/MachineLearning/Templates/NeuralNetworkSettings.tsx
@@ -49,15 +49,15 @@ export default function NeuralNetworkSettings(p : { ctx: TypeContext<NeuralNetwo
 
   function renderCount(ctx: StyleContext, p: PredictorEntity, usage: PredictorColumnUsage) {
     return (
-      <FormGroup ctx={ctx} label={PredictorColumnUsage.niceToString(usage) + " columns"}>
-        {p.state != "Trained" ? <FormControlReadonly ctx={ctx}>?</FormControlReadonly> : <SearchValue isBadge={true} isLink={true} findOptions={{
+      <FormGroup ctx={ctx} label={PredictorColumnUsage.niceToString(usage) + " columns"}
+        children={inputId => p.state != "Trained" ? <FormControlReadonly inputId={inputId} ctx={ctx}>?</FormControlReadonly> : <SearchValue isBadge={true} isLink={true} findOptions={{
           queryName: PredictorCodificationEntity,
           filterOptions: [
             { token: PredictorCodificationEntity.token(e => e.predictor), value: p },
             { token: PredictorCodificationEntity.token(e => e.usage), value: usage }
           ]
         }} />}
-      </FormGroup>
+      />
     );
   }
   const ctx = p.ctx;

diff --git a/Signum.React.Extensions/MachineLearning/Templates/PredictModal.tsx b/Signum.React.Extensions/MachineLearning/Templates/PredictModal.tsx
@@ -157,9 +157,7 @@ export default function PredictLine(p : PredictLineProps){
       predicted == original || isLite(predicted) && isLite(original) && is(predicted, original) ? "green" : "red";
   }
   return (
-    <FormGroup ctx={p.sctx} label={p.token.niceName} labelHtmlAttributes={{ title: fullNiceName(p.token) }}>
-      {renderValue()}
-    </FormGroup>
+    <FormGroup ctx={p.sctx} label={p.token.niceName} labelHtmlAttributes={{ title: fullNiceName(p.token) }} children={() => renderValue()} />
   );
 }
 

diff --git a/Signum.React.Extensions/Mailing/Templates/EmailTemplate.tsx b/Signum.React.Extensions/Mailing/Templates/EmailTemplate.tsx
@@ -135,9 +135,9 @@ function EmailTemplateFrom(p: { ctx: TypeContext<EmailTemplateFromEmbedded>, que
     <div>
       <div className="row">
         <div className="col-sm-2" >
-          <FormGroup label={EmailTemplateEntity.nicePropertyName(a => a.recipients![0].element.kind)} ctx={sc}>
-            <span className={sc.formControlClass}>{EmailTemplateEntity.nicePropertyName(a => a.from)} </span>
-          </FormGroup>
+          <FormGroup label={EmailTemplateEntity.nicePropertyName(a => a.recipients![0].element.kind)} ctx={sc}
+            children={() => <span className={sc.formControlClass}>{EmailTemplateEntity.nicePropertyName(a => a.from)} </span>}
+          />
         </div>
         <div className="col-sm-10">
           {p.query && !p.ctx.value.emailAddress &&

diff --git a/Signum.React.Extensions/UserAssets/Templates/QueryTokenEmbeddedBuilder.tsx b/Signum.React.Extensions/UserAssets/Templates/QueryTokenEmbeddedBuilder.tsx
@@ -42,9 +42,8 @@ export default function QueryTokenEntityBuilder(p: QueryTokenEmbeddedBuilderProp
   );
 
   return (
-    <FormGroup ctx={p.ctx} helpText={p.helpText}>
-      {
-        !qte || !qte.parseException ? tokenBuilder :
+    <FormGroup ctx={p.ctx} helpText={p.helpText}
+      children={() => !qte || !qte.parseException ? tokenBuilder :
           <div>
             <code>{qte.tokenString}</code>
             <br />
@@ -55,7 +54,7 @@ export default function QueryTokenEntityBuilder(p: QueryTokenEmbeddedBuilderProp
             </p>
           </div>
       }
-    </FormGroup>
+    />
   );
 }