JNG-4705 view/edit nirvana (#46)

* JNG-4705 view edit nirvana * JNG-4705 fix association navigation disabled state * JNG-4705 fix binary input disabled state
BlackBeltTechnology · Apr 5, 2023 · 6c70917 · 6c70917
1 parent 766edaf
commit 6c70917
Show file tree

Hide file tree

Showing 17 changed files with 103 additions and 94 deletions.
diff --git a/judo-ui-react/src/main/resources/actor/src/components-api/components/TrinaryLogic.ts.hbs b/judo-ui-react/src/main/resources/actor/src/components-api/components/TrinaryLogic.ts.hbs
@@ -12,6 +12,8 @@ export const TRINARY_LOGIC = new Map<boolean | null, string>([
 
 export interface TrinaryLogicProps {
   readOnly?: boolean;
+  disabled?: boolean;
+  editMode?: boolean;
   value?: boolean | null;
   id?: string;
   label: string;

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
@@ -69,7 +69,7 @@ export const AggregationInput = ({
           focused={focused}
           fullWidth
           value={labelList.filter(l => !!l && l.length > 0).join(' - ')}
-          className={!onSet || disabled || !editMode ? 'Mui-readOnly' : undefined}
+          className={ !editMode ? 'JUDO-viewMode' : undefined }
           sx={ {
             ':hover': {
               cursor: 'pointer',

diff --git a/judo-ui-react/src/main/resources/actor/src/components/widgets/AssociationButton.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/widgets/AssociationButton.tsx.hbs
@@ -5,9 +5,9 @@ import { JudoIdentifiable } from '@judo/data-api-common';
 import { useJudoNavigation } from '../CustomBreadcrumb';
 
 export interface AssociationBaseProps {
-id: string;
-editMode?: boolean;
-children?: ReactNode;
+    id: string;
+    editMode?: boolean;
+    children?: ReactNode;
 }
 
 export interface AssociationButtonProps<T> extends AssociationBaseProps {

diff --git a/judo-ui-react/src/main/resources/actor/src/components/widgets/TrinaryLogicCombobox.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/widgets/TrinaryLogicCombobox.tsx.hbs
@@ -12,6 +12,8 @@ import { MdiIcon } from '../MdiIcon';
 
 export const TrinaryLogicCombobox = ({
   readOnly = false,
+  disabled = false,
+  editMode = false,
   value = null,
   id,
   label,
@@ -36,12 +38,12 @@ export const TrinaryLogicCombobox = ({
       label={label}
       select
       value={TRINARY_LOGIC.get(value)}
+      className={ !editMode ? 'JUDO-viewMode' : undefined }
       onChange={onChangeHandler}
-      className={readOnly ? 'Mui-readOnly' : undefined}
+      disabled={disabled || readOnly}
       error={error}
       helperText={helperText}
       InputProps={ {
-        readOnly: readOnly,
         startAdornment: (
           <InputAdornment position="start">
             <MdiIcon path="format-list-bulleted" />

diff --git a/judo-ui-react/src/main/resources/actor/src/fragments/page/page-crud-actions.hbs b/judo-ui-react/src/main/resources/actor/src/fragments/page/page-crud-actions.hbs
@@ -1,12 +1,4 @@
 {{# if page.dataElement.isUpdatable }}
-    {editMode && (
-        <Grid item>
-            <Button id="page-action-edit-save" onClick={() => saveData()} disabled={isLoading}>
-                <MdiIcon path="content-save" />
-                {t('judo.pages.save', { defaultValue: 'Save' })}
-            </Button>
-        </Grid>
-    )}
     {editMode && (
         <Grid item>
             <Button
@@ -23,11 +15,11 @@
             </Button>
         </Grid>
     )}
-    {!editMode && (
+    {editMode && (
         <Grid item>
-            <Button id="page-action-edit" onClick={() => setEditMode(true)} disabled={isLoading || !data.__updateable}>
-                <MdiIcon path="pencil" />
-                {t('judo.pages.edit', { defaultValue: 'Edit' })}
+            <Button id="page-action-edit-save" onClick={() => saveData()} disabled={isLoading}>
+                <MdiIcon path="content-save" />
+                {t('judo.pages.save', { defaultValue: 'Save' })}
             </Button>
         </Grid>
     )}

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/binarytypeinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/binarytypeinput.hbs
@@ -20,6 +20,8 @@
                 type="file"
                 error={ !!validation.get('{{ child.attributeType.name }}') }
                 helperText={ validation.get('{{ child.attributeType.name }}') }
+                className={ !editMode ? 'JUDO-viewMode' : undefined }
+                disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
                 onChange={ async (event: any) => {
                     try {
                         const uploadedData = await uploadFile(data, '{{ child.attributeType.name }}', event.target.files, '{{ attributePath child.attributeType }}');
@@ -32,6 +34,7 @@
                                 console.error(uploadedData);
                                 return;
                             }
+                            setEditMode(true);
                             storeDiff('{{ child.attributeType.name }}', uploadedData.token);
                             enqueueSnackbar(t('judo.files.upload-success', { defaultValue: 'File uploaded successfully.' }) as string, {
                                 variant: 'success',
@@ -46,10 +49,8 @@
                         console.error(err);
                     }
                 } }
-                className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined }
                 InputLabelProps={ { shrink: true } }
                 InputProps={ {
-                    readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode,
                     {{# if child.icon }}
                         startAdornment: (
                             <InputAdornment position="start">

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/dateinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/dateinput.hbs
@@ -16,15 +16,16 @@
                 {{# if child.attributeType.isRequired }} required {{/ if }}
                 {...props}
                 id="{{ createId child }}"
+                className={ !editMode ? 'JUDO-viewMode' : undefined }
                 error={!!validation.get('{{ child.attributeType.name }}')}
                 helperText={validation.get('{{ child.attributeType.name }}')}
             />
         ) }
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} ?? null }
-        className={ {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined }
-        readOnly={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode }
+        disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
         onChange={ (newValue?: Dayjs | null) => {
+            setEditMode(true);
             storeDiff('{{ child.attributeType.name }}', uiDateToServiceDate(newValue));
         } }
         {{# if child.icon }}

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/datetimeinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/datetimeinput.hbs
@@ -11,20 +11,25 @@
         >
     {{/ if }}
     <DateTimePicker
+        ampm={false}
+        ampmInClock={false}
         renderInput={ (props: any) => (
             <TextField
                 {{# if child.attributeType.isRequired }} required {{/ if }}
                 {...props}
                 id="{{ createId child }}"
+                className={ !editMode ? 'JUDO-viewMode' : undefined }
                 error={!!validation.get('{{ child.attributeType.name }}')}
                 helperText={validation.get('{{ child.attributeType.name }}')}
             />
         ) }
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} ?? null }
-        className={ {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined}
-        readOnly={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode }
-        onChange={ (newValue: any) => storeDiff('{{ child.attributeType.name }}', newValue) }
+        disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
+        onChange={ (newValue: any) => {
+            setEditMode(true);
+            storeDiff('{{ child.attributeType.name }}', newValue);
+        } }
         {{# if child.icon }}
             InputProps={ {
                 startAdornment: (

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationcombo.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationcombo.hbs
@@ -16,13 +16,16 @@
         id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} || '' }
+        className={ !editMode ? 'JUDO-viewMode' : undefined }
+        disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
         error={ !!validation.get('{{ child.attributeType.name }}') }
         helperText={ validation.get('{{ child.attributeType.name }}') }
-        onChange={ (event) => storeDiff('{{ child.attributeType.name }}', event.target.value as {{ restParamName child.attributeType.dataType }}) }
-        className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined }
+        onChange={ (event) => {
+            setEditMode(true);
+            storeDiff('{{ child.attributeType.name }}', event.target.value as {{ restParamName child.attributeType.dataType }});
+        } }
         InputLabelProps={ { shrink: true } }
         InputProps={ {
-            readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode,
             {{# if child.icon }}
                 startAdornment: (
                     <InputAdornment position="start">

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationradio.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationradio.hbs
@@ -16,12 +16,18 @@
         name="{{ child.attributeType.name }}"
         id="{{ createId child }}"
         value={ data.{{ child.attributeType.name }} || '' }
-        className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined }
-        onChange={ (event) => storeDiff('{{ child.attributeType.name }}', event.target.value as {{ restParamName child.attributeType.dataType }}) }
+        onChange={ (event) => {
+            setEditMode(true);
+            storeDiff('{{ child.attributeType.name }}', event.target.value as {{ restParamName child.attributeType.dataType }});
+        } }
     >
     {{# each child.attributeType.dataType.members as |member| }}
-        <FormControlLabel id="{{ createId member }}" value={ '{{ member.name }}' } control={<Radio />} label= { t('enumerations.{{ restParamName child.attributeType.dataType }}.{{ member.name }}', { defaultValue: '{{ member.name }}' }) }
-        disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode }
+        <FormControlLabel
+            id="{{ createId member }}"
+            value={ '{{ member.name }}' }
+            control={<Radio />}
+            label= { t('enumerations.{{ restParamName child.attributeType.dataType }}.{{ member.name }}', { defaultValue: '{{ member.name }}' }) }
+            disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
         />
     {{/ each }}
     </RadioGroup>

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/numericinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/numericinput.hbs
@@ -17,13 +17,16 @@
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         type="number"
         value={ data.{{ child.attributeType.name }} }
+        className={ !editMode ? 'JUDO-viewMode' : undefined }
+        disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
         error={ !!validation.get('{{ child.attributeType.name }}') }
         helperText={ validation.get('{{ child.attributeType.name }}') }
-        onChange={ (event) => storeDiff('{{ child.attributeType.name }}', Number(event.target.value)) }
-        className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined }
+        onChange={ (event) => {
+            setEditMode(true);
+            storeDiff('{{ child.attributeType.name }}', Number(event.target.value));
+        } }
         InputLabelProps={ { shrink: true } }
         InputProps={ {
-            readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode,
             {{# if child.icon }}
                 startAdornment: (
                     <InputAdornment position="start">

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/switch.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/switch.hbs
@@ -18,22 +18,23 @@
             label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
             select
             value={ booleanToStringSelect( data.{{ child.attributeType.name }} )}
+            className={ !editMode ? 'JUDO-viewMode' : undefined }
+            disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
             error={ !!validation.get('{{ child.attributeType.name }}') }
             helperText={ validation.get('{{ child.attributeType.name }}') }
             onChange={ (event) => {
+                setEditMode(true);
                 storeDiff('{{ child.attributeType.name }}', stringToBooleanSelect(event.target.value));
             } }
-            className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined }
             InputLabelProps={ { shrink: true } }
             InputProps={ {
-                readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode,
-                    {{# if child.icon }}
-                        startAdornment: (
-                            <InputAdornment position="start">
-                                <MdiIcon path="{{ child.icon.name }}" />
-                            </InputAdornment>
-                        ),
-                    {{/ if }}
+                {{# if child.icon }}
+                    startAdornment: (
+                        <InputAdornment position="start">
+                            <MdiIcon path="{{ child.icon.name }}" />
+                        </InputAdornment>
+                    ),
+                {{/ if }}
             } }
         >
             <MenuItem id="{{ createId child }}-true" value={'true'}>{ t('judo.form.switch.true', { defaultValue: 'Yes' }) as string }</MenuItem>
@@ -44,9 +45,12 @@
         <FormGroup>
             <FormControlLabel
                 sx={ { marginTop: '6px' } }
-                disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode }
+                disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
                 control={
-                    <Checkbox value={ data.{{ child.attributeType.name }} } />
+                    <Checkbox value={ data.{{ child.attributeType.name }} } onChange={ (event) => {
+                        setEditMode(true);
+                        storeDiff('{{ child.attributeType.name }}', event.target.value);
+                    } } />
                 }
                 label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
             />

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/textarea.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/textarea.hbs
@@ -16,15 +16,18 @@
         id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} }
+        className={ !editMode ? 'JUDO-viewMode' : undefined }
+        disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
         multiline
         minRows={ {{ child.row }} }
         error={ !!validation.get('{{ child.attributeType.name }}') }
         helperText={ validation.get('{{ child.attributeType.name }}') }
-        onChange={ (event) => storeDiff('{{ child.attributeType.name }}', event.target.value) }
-        className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined }
+        onChange={ (event) => {
+            setEditMode(true);
+            storeDiff('{{ child.attributeType.name }}', event.target.value);
+        } }
         InputLabelProps={ { shrink: true } }
         InputProps={ {
-            readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode,
             {{# if child.icon }}
                 startAdornment: (
                     <InputAdornment position="start">

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/textinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/textinput.hbs
@@ -16,13 +16,16 @@
         id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} }
+        className={ !editMode ? 'JUDO-viewMode' : undefined }
+        disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
         error={ !!validation.get('{{ child.attributeType.name }}') }
         helperText={ validation.get('{{ child.attributeType.name }}') }
-        onChange={ (event) => storeDiff('{{ child.attributeType.name }}', event.target.value) }
-        className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined }
+        onChange={ (event) => {
+            setEditMode(true);
+            storeDiff('{{ child.attributeType.name }}', event.target.value);
+        } }
         InputLabelProps={ { shrink: true } }
         InputProps={ {
-            readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode,
             {{# if child.icon }}
                 startAdornment: (
                     <InputAdornment position="start">

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/timeinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/timeinput.hbs
@@ -16,15 +16,19 @@
                 {{# if child.attributeType.isRequired }} required {{/ if }}
                 {...props}
                 id="{{ createId child }}"
+                className={ !editMode ? 'JUDO-viewMode' : undefined }
+                disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
                 error={!!validation.get('{{ child.attributeType.name }}')}
                 helperText={validation.get('{{ child.attributeType.name }}')}
             />
         ) }
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string }
         value={ data.{{ child.attributeType.name }} ?? null }
-        className={ {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined }
-        readOnly={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode }
-        onChange={ (newValue: string | null | undefined) => storeDiff('{{ child.attributeType.name }}', newValue) }
+        readOnly={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
+        onChange={ (newValue: string | null | undefined) => {
+            setEditMode(true);
+            storeDiff('{{ child.attributeType.name }}', newValue);
+        } }
         {{# if child.icon }}
             InputProps={ {
                 startAdornment: (

diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/trinarylogiccombo.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/trinarylogiccombo.hbs
@@ -15,10 +15,15 @@
         id="{{ createId child }}"
         label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string {{# if child.attributeType.isRequired }} + " *" {{/ if }} }
         value={ data?.{{ child.attributeType.name }} }
+        editMode={ editMode }
         error={ !!validation.get('{{ child.attributeType.name }}') }
         helperText={ validation.get('{{ child.attributeType.name }}') }
-        onChange={ (value) => storeDiff('{{ child.attributeType.name }}', value) }
-        readOnly={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode }
+        onChange={ (value) => {
+            setEditMode(true);
+            storeDiff('{{ child.attributeType.name }}', value);
+        } }
+        disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} }
+        readOnly={ {{ boolValue child.attributeType.isReadOnly }} }
     />
     {{# if child.customImplementation }}
         </ComponentProxy>