JNG-5361 update aggregation input

BlackBeltTechnology · Jan 29, 2024 · d91ad61 · d91ad61
1 parent 2a4aa9f
commit d91ad61
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 29 deletions.
diff --git a/judo-ui-react/src/main/resources/actor/public/i18n/system_default.json.hbs b/judo-ui-react/src/main/resources/actor/public/i18n/system_default.json.hbs
@@ -68,7 +68,7 @@
         "judo.form.switch.true": "Yes",
         "judo.form.switch.false": "No",
         "judo.form.navigation.confirmation": "You may have potential unsaved changes in your form, are you sure you would like to navigate away?",
-        "judo.component.AggregationInput.open-filter": "Open search dialog",
+        "judo.component.AggregationInput.open-filter": "Open selector dialog",
         "judo.component.AggregationInput.navigate": "Navigate to element",
         "judo.component.AggregationInput.open-editor": "Edit element",
         "judo.component.AggregationInput.delete": "Delete element",

diff --git a/judo-ui-react/src/main/resources/actor/public/i18n/system_en-US.json.hbs b/judo-ui-react/src/main/resources/actor/public/i18n/system_en-US.json.hbs
@@ -68,7 +68,7 @@
         "judo.form.switch.true": "Yes",
         "judo.form.switch.false": "No",
         "judo.form.navigation.confirmation": "You may have potential unsaved changes in your form, are you sure you would like to navigate away?",
-        "judo.component.AggregationInput.open-filter": "Open search dialog",
+        "judo.component.AggregationInput.open-filter": "Open selector dialog",
         "judo.component.AggregationInput.navigate": "Navigate to element",
         "judo.component.AggregationInput.open-editor": "Edit element",
         "judo.component.AggregationInput.delete": "Delete element",

diff --git a/judo-ui-react/src/main/resources/actor/public/i18n/system_hu-HU.json.hbs b/judo-ui-react/src/main/resources/actor/public/i18n/system_hu-HU.json.hbs
@@ -78,7 +78,7 @@
         "judo.form.switch.true": "Igen",
         "judo.form.switch.false": "Nem",
         "judo.form.navigation.confirmation": "Ha nem menti el az űrlapján történt változtatásokat, akkor azok el fognak veszni.",
-        "judo.component.AggregationInput.open-filter": "Kereső dialógus megnyitása",
+        "judo.component.AggregationInput.open-filter": "Kiválasztó dialógus megnyitása",
         "judo.component.AggregationInput.navigate": "Navigálás az elemre",
         "judo.component.AggregationInput.open-editor": "Elem szerkesztése",
         "judo.component.AggregationInput.delete": "Elem törlése",

diff --git a/judo-ui-react/src/main/resources/actor/src/components/widgets/AggregationInput.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/widgets/AggregationInput.tsx.hbs
@@ -169,10 +169,38 @@ export const AggregationInput = ({
                 readOnly: readOnly || !onSet,
                 startAdornment: icon && <InputAdornment position="start" style={ { marginTop: 0 } }>{icon}</InputAdornment>,
                 endAdornment: (
-                  <>
-                    {loading ? <CircularProgress color="inherit" size='1rem' sx={ { mt: -2 } } /> : null}
-                    {params.InputProps.endAdornment}
-                  </>
+                  <InputAdornment position="end">
+                    <ButtonGroup
+                      ref={anchorRef}
+                      aria-label="link button group"
+                      className={clsx({
+                        'AggregationInputButtonGroup': true,
+                        'AggregationFilled': exists(value),
+                      })}
+                    >
+                      {loading ? <CircularProgress color="inherit" size='1rem' className="AggregationInputLoading" /> : null}
+                      {onSet && !exists(value) && (
+                        <IconButton className={`${name}-set`} disabled={disabled || readOnly} onClick={ (event: any) => { handleDropdownClose(event); onSet(); } } title={t('judo.component.AggregationInput.open-filter', { defaultValue: 'Open selector dialog' }) as string}>
+                          <MdiIcon path="magnify" />
+                        </IconButton>
+                      )}
+                      {exists(value) && onView && (
+                        <IconButton className={`${name}-view`} disabled={editMode && !isInlineCreatable} onClick={ (event: any) => { handleDropdownClose(event); onView(); } } title={t('judo.component.AggregationInput.navigate', { defaultValue: 'Navigate to element' }) as string}>
+                          <MdiIcon path="eye" />
+                        </IconButton>
+                      )}
+                      {!exists(value) && onCreate && (
+                        <IconButton className={`${name}-create`} disabled={disabled || readOnly || (editMode && !isInlineCreatable)} onClick={ (event: any) => { handleDropdownClose(event); onCreate(); } } title={t('judo.component.AggregationInput.create', { defaultValue: 'Create' }) as string}>
+                          <MdiIcon path="file_document_plus" />
+                        </IconButton>
+                      )}
+                      {exists(value) && (onEdit || onDelete || onRemove || onSet || onUnset) && !readOnly && (
+                        <IconButton className={`${name}-dropdown`} disabled={disabled} onClick={handleDropdownToggle}>
+                          <MdiIcon path="chevron-down" />
+                        </IconButton>
+                      )}
+                    </ButtonGroup>
+                  </InputAdornment>
                 ),
               } }
             />
@@ -184,28 +212,6 @@ export const AggregationInput = ({
           } }
         />
       </Box>
-      <ButtonGroup ref={anchorRef} aria-label="link button group">
-        {onSet && (
-          <IconButton className={`${name}-set`} disabled={disabled || readOnly} onClick={ (event: any) => { handleDropdownClose(event); onSet(); } } title={t('judo.component.AggregationInput.open-filter', { defaultValue: 'Open search dialog' }) as string}>
-            <MdiIcon path="magnify" />
-          </IconButton>
-        )}
-        {exists(value) && onView && (
-          <IconButton className={`${name}-view`} disabled={editMode && !isInlineCreatable} onClick={ (event: any) => { handleDropdownClose(event); onView(); } } title={t('judo.component.AggregationInput.navigate', { defaultValue: 'Navigate to element' }) as string}>
-            <MdiIcon path="eye" />
-          </IconButton>
-        )}
-        {!exists(value) && onCreate && (
-          <IconButton className={`${name}-create`} disabled={disabled || readOnly || (editMode && !isInlineCreatable)} onClick={ (event: any) => { handleDropdownClose(event); onCreate(); } } title={t('judo.component.AggregationInput.create', { defaultValue: 'Create' }) as string}>
-            <MdiIcon path="file_document_plus" />
-          </IconButton>
-        )}
-        {exists(value) && (onEdit || onDelete || onRemove || onUnset) && !readOnly && (
-          <IconButton className={`${name}-dropdown`} disabled={disabled} onClick={handleDropdownToggle}>
-            <MdiIcon path="chevron-down" />
-          </IconButton>
-        )}
-      </ButtonGroup>
       <Popper
         sx={ {
           zIndex: 1,
@@ -226,6 +232,12 @@ export const AggregationInput = ({
           <Paper>
             <ClickAwayListener onClickAway={handleDropdownClose}>
               <MenuList id={`${name}-menu`} autoFocusItem>
+                {exists(value) && onSet && (
+                  <MenuItem className={`${name}-set`} disabled={disabled || readOnly} onClick={ (event: any) => { handleDropdownClose(event); onSet(); } }>
+                    <MdiIcon path="magnify" sx={ { mr: 2 } } />
+                    {t('judo.component.AggregationInput.open-filter', { defaultValue: 'Open selector dialog' }) as string}
+                  </MenuItem>
+                )}
                 {exists(value) && onEdit && (
                   <MenuItem className={`${name}-edit`} disabled={disabled || editMode} onClick={ (event: any) => { handleDropdownClose(event); onEdit(); } }>
                     <MdiIcon path="pencil" sx={ { mr: 2 } } />

diff --git a/judo-ui-react/src/main/resources/actor/src/theme/index.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/theme/index.tsx.hbs
@@ -141,6 +141,21 @@ const baseTheme = (paletteTheme: Theme) => createTheme(
           variant: 'filled',
           color: 'secondary',
         },
+        styleOverrides: {
+          root: {
+            '.AggregationInputButtonGroup': {
+              position: 'absolute',
+              top: 'calc(50% - 14px)', // MUI internals have the same burned in values...
+              right: 8,
+            },
+            '.AggregationInputButtonGroup .AggregationInputLoading': {
+              margin: 'auto 0',
+            },
+            '.MuiInputBase-root.MuiInputBase-formControl.MuiAutocomplete-inputRoot': {
+              paddingRight: '85px',
+            },
+          },
+        },
       },
       MuiRadio: {
         defaultProps: {