css fixes + fix for #1247

Altinn · Mar 26, 2019 · 7eaff09 · 7eaff09
1 parent 2d62e8b
commit 7eaff09
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 64 deletions.
diff --git a/src/react-apps/applications/runtime/src/components/FormComponent.tsx b/src/react-apps/applications/runtime/src/components/FormComponent.tsx
@@ -91,7 +91,7 @@ class FormComponent extends React.Component<
     const order = this.props.order[key].indexOf(this.props.id);
 
     if (this.state.wrapperRef && !this.state.wrapperRef.contains(event.target) &&
-        order === 0) {
+      order === 0) {
       this.handleActiveListChange({});
     }
   }
@@ -200,7 +200,7 @@ class FormComponent extends React.Component<
   public handleActiveListChange = (obj: any) => {
     if (Object.keys(obj).length === 0 && obj.constructor === Object) {
       FormDesignerActionDispatchers.deleteActiveListAction();
-    } else  {
+    } else {
       FormDesignerActionDispatchers.updateActiveList(obj, this.props.activeList);
     }
     this.props.sendListToParent(this.props.activeList);
@@ -227,19 +227,19 @@ class FormComponent extends React.Component<
     }
     return (
       <div ref={this.setWrapperRef}>
-      <EditContainer
-        component={this.props.component}
-        id={this.props.id}
-        firstInActiveList={this.props.firstInActiveList}
-        lastInActiveList={this.props.lastInActiveList}
-        sendItemToParent={this.handleActiveListChange}
-        singleSelected={this.props.singleSelected}
-      >
-        <div onClick={this.disableEditOnClickForAddedComponent}>
-          {this.renderLabel()}
-          {this.renderComponent()}
-        </div>
-      </EditContainer>
+        <EditContainer
+          component={this.props.component}
+          id={this.props.id}
+          firstInActiveList={this.props.firstInActiveList}
+          lastInActiveList={this.props.lastInActiveList}
+          sendItemToParent={this.handleActiveListChange}
+          singleSelected={this.props.singleSelected}
+        >
+          <div onClick={this.disableEditOnClickForAddedComponent}>
+            {this.renderLabel()}
+            {this.renderComponent()}
+          </div>
+        </EditContainer>
       </div>
     );
   }
@@ -286,9 +286,9 @@ class FormComponent extends React.Component<
   private errorMessage(): JSX.Element[] {
     if (!this.isSimpleComponent() ||
       !this.hasValidationMessages()) {
-        return null;
+      return null;
     }
-    const { component: {id} } = this.props;
+    const { component: { id } } = this.props;
     return renderValidationMessagesForComponent(this.props.validationResults.simpleBinding, id);
   }
 }

diff --git a/src/react-apps/applications/runtime/src/components/base/CheckboxesContainerComponent.tsx b/src/react-apps/applications/runtime/src/components/base/CheckboxesContainerComponent.tsx
@@ -78,7 +78,7 @@ export class CheckboxContainerComponent extends React.Component<ICheckboxContain
             key={index}
             className={'custom-control custom-checkbox a-custom-checkbox pl-0 pr-4 mr-3'
               + (this.props.component.readOnly ? ' no-cursor' : '')}
-            onClick={this.props.component.readOnly ? '' : this.onDataChanged.bind(this, option.value, index)}
+            onClick={this.props.component.readOnly ? null : this.onDataChanged.bind(this, option.value, index)}
           >
             <input
               type='checkbox'

diff --git a/src/react-apps/applications/runtime/src/components/base/RadioButtonsContainerComponent.tsx b/src/react-apps/applications/runtime/src/components/base/RadioButtonsContainerComponent.tsx
@@ -76,7 +76,7 @@ export class RadioButtonContainerComponent
               + (this.props.component.readOnly ? ' no-cursor' : '')}
             key={index}
             onClick={this.props.component.readOnly ?
-              this.onDataChanged.bind(this, option.value) : this.onDataChanged.bind(this, option.value)}
+              null : this.onDataChanged.bind(this, option.value)}
           >
             <input
               type='radio'

diff --git a/src/react-apps/applications/runtime/src/styles/RadioButtonComponent.css b/src/react-apps/applications/runtime/src/styles/RadioButtonComponent.css
@@ -21,15 +21,25 @@
   background-color: transparent !important;
   pointer-events: none !important;
 }
-.a-custom-radio.custom-control-input:not(checked).disabled-radio-button:hover::after {
-  background-image: none;
-  background: none;
-}
-.a-custom-radio.custom-control-input:checked~.disabled-radio-button:hover::after {
-  background-image: url(data:image/gif;base64,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);
-}
-
 .no-cursor {
   cursor: default !important;
 }
+.a-custom-radio .custom-control-input:not(checked)~.disabled-radio-button::before {
+  background: repeating-linear-gradient(
+    135deg,
+    #efefef,
+    #efefef 2px,
+    #fff 3px,
+    #fff 5px
+  );
+}
+.a-custom-radio .custom-control-input:checked~.disabled-radio-button::before {
+  background: repeating-linear-gradient(
+    135deg,
+    #efefef,
+    #efefef 2px,
+    #fff 3px,
+    #fff 5px
+  );
+}
 
diff --git a/src/react-apps/applications/runtime/src/utils/validation.ts b/src/react-apps/applications/runtime/src/utils/validation.ts
@@ -50,11 +50,11 @@ export function validateDataModel(
   const fieldKey = Object.keys(layoutModelElement.dataModelBindings).find((binding: string) =>
     layoutModelElement.dataModelBindings[binding] === dataModelFieldElement.DataBindingName);
   const componentValidations: IComponentValidations = {
-      [fieldKey]: {
-        errors: [],
-        warnings: [],
-      },
-    };
+    [fieldKey]: {
+      errors: [],
+      warnings: [],
+    },
+  };
 
   // Loop through all restrictions for the data model element and validate
   Object.keys(dataModelFieldElement.Restrictions).forEach((key) => {
@@ -133,8 +133,7 @@ export function validateFormData(
       }
     });
 
-    if ((dataModelFieldElement.MinOccurs === null || dataModelFieldElement.MinOccurs === 1)
-      || (layoutModelElement && layoutModelElement.required)) {
+    if (layoutModelElement && layoutModelElement.required) {
       if (formData[formDataKey].length === 0) {
         validationErrors.push('Field is required');
       }
@@ -203,8 +202,8 @@ function mapValidations(validations: any, layoutComponents: IFormDesignerCompone
       // as unmapped.
       if (validationResult.unmapped) {
         validationResult.unmapped[validationKey] = {
-            ...validationResult.unmapped[validationKey],
-            ...validations[validationKey],
+          ...validationResult.unmapped[validationKey],
+          ...validations[validationKey],
         };
       } else {
         validationResult.unmapped = {

diff --git a/src/react-apps/applications/shared/src/components/AltinnCheckBox.tsx b/src/react-apps/applications/shared/src/components/AltinnCheckBox.tsx
@@ -33,6 +33,7 @@ const AltinnCheckBox = (props: IAltinnCheckBoxComponentProvidedProps) => {
       className={classes.altinnCheckBox}
       checked={props.checked}
       onChange={props.onChangeFunction}
+      disabled={props.disabled}
     />
   );
 };

diff --git a/src/react-apps/applications/ux-editor/src/components/config/EditModalContent.tsx b/src/react-apps/applications/ux-editor/src/components/config/EditModalContent.tsx
@@ -31,7 +31,7 @@ const styles = {
 
 export interface IEditModalContentProps {
   component: FormComponentType;
-  dataModel?: IDataModelFieldElement[];
+  dataModel: IDataModelFieldElement[];
   textResources?: ITextResource[];
   codeListResources?: ICodeListListElement[];
   saveEdit?: (updatedComponent: FormComponentType) => void;
@@ -161,12 +161,6 @@ class EditModalContentComponent extends React.Component<IEditModalContentProps,
     this.props.handleComponentUpdate(updatedComponent);
   }
 
-  public getTextKeyFromDataModel = (dataBindingName: string): string => {
-    const element: IDataModelFieldElement = this.props.dataModel.find((elem) =>
-      elem.DataBindingName === dataBindingName);
-    return element.Texts.Label;
-  }
-
   public handleCodeListChange = (option: ICodeListOption): void => {
     const updatedComponent = this.props.component;
     updatedComponent.codeListId = option ? option.value.codeListName : undefined;
@@ -545,16 +539,6 @@ class EditModalContentComponent extends React.Component<IEditModalContentProps,
               this.props.textResources,
               this.props.language,
               this.props.component.textResourceBindings.description)}
-            <Grid item={true} classes={{ item: this.props.classes.gridItem }}>
-              {getLanguageFromKey('ux_editor.read_only_description', this.props.language)}
-            </Grid>
-            <Grid item={true}>
-              <AltinnCheckBox
-                checked={!!component.readOnly}
-                onChangeFunction={this.handleReadOnlyChange}
-              />
-              {getLanguageFromKey('ux_editor.read_only', this.props.language)}
-            </Grid>
           </Grid>
         );
       }
@@ -565,6 +549,12 @@ class EditModalContentComponent extends React.Component<IEditModalContentProps,
     }
   }
 
+  public getMinOccursFromDataModel = (dataBindingName: string): number => {
+    const element: IDataModelFieldElement = this.props.dataModel.find((e: IDataModelFieldElement) =>
+      e.DataBindingName === dataBindingName);
+    return element.MinOccurs;
+  }
+
   public handleValidFileEndingsChange = (event: any) => {
     const component = (this.props.component as IFormFileUploaderComponent);
     component.validFileEndings = event.target.value;
@@ -625,16 +615,22 @@ class EditModalContentComponent extends React.Component<IEditModalContentProps,
       dataModelBinding = {};
     }
     dataModelBinding[key] = selectedDataModelElement;
-    this.setState({
-      component: {
-        ...this.state.component,
-        dataModelBindings: dataModelBinding,
-      },
-    });
-    this.props.handleComponentUpdate({
-      ...this.props.component,
-      dataModelBindings: dataModelBinding,
-    });
+    if (this.getMinOccursFromDataModel(selectedDataModelElement) === 1) {
+      this.setState({
+        component: {
+          ...this.state.component,
+          required: true,
+          dataModelBindings: dataModelBinding,
+        },
+      }, () => this.props.handleComponentUpdate(this.state.component));
+    } else {
+      this.setState({
+        component: {
+          ...this.state.component,
+          dataModelBindings: dataModelBinding,
+        },
+      }, () => this.props.handleComponentUpdate(this.state.component));
+    }
   }
 
   public handleToggleAddressSimple = (event: object, checked: boolean) => {
@@ -684,6 +680,7 @@ const mapStateToProps = (
     textResources: state.appData.textResources.resources,
     codeListResources: state.appData.codeLists.codeLists,
     thirdPartyComponents: state.thirdPartyComponents.components,
+    dataModel: state.appData.dataModel.model,
     ...props,
   };
 };

diff --git a/...t-apps/applications/ux-editor/src/components/rightDrawerMenu/CollapsableMenuComponent.tsx b/...t-apps/applications/ux-editor/src/components/rightDrawerMenu/CollapsableMenuComponent.tsx
@@ -55,6 +55,7 @@ export interface ICollapsableMenuProvidedProps {
 export interface ICollapsableMenuProps extends ICollapsableMenuProvidedProps {
   components: IFormDesignerComponent;
   language: any;
+  dataModel: IDataModelFieldElement[];
 }
 
 export interface ICollapsableMenuListItem {
@@ -71,6 +72,12 @@ const CollapsableMenus = (props: ICollapsableMenuProps) => {
     setComponent(props.components[props.componentId]);
   }, [props]);
 
+  const getMinOccursFromDataModel = (dataBindingName: string): boolean => {
+    const element: IDataModelFieldElement = props.dataModel.find((e: IDataModelFieldElement) =>
+      e.DataBindingName === dataBindingName);
+    return element ? element.MinOccurs === 1 : false;
+  };
+
   const toggleMenu = () => {
     setMenuIsOpen(!menuIsOpen);
   };
@@ -83,7 +90,6 @@ const CollapsableMenus = (props: ICollapsableMenuProps) => {
         props.componentId,
       );
       setComponent(props.components[props.componentId]);
-      console.log('component ', component);
     }
   };
 
@@ -124,6 +130,7 @@ const CollapsableMenus = (props: ICollapsableMenuProps) => {
               <AltinnCheckBox
                 checked={!component.required}
                 onChangeFunction={() => toggleCheckbox('required')}
+                disabled={getMinOccursFromDataModel(component.dataModelBindings.simpleBinding)}
               />
               {props.language.ux_editor.optional}
             </ListItem>
@@ -162,6 +169,7 @@ const mapStateToProps: (
   header: props.header,
   language: state.appData.language.language,
   listItems: props.listItems,
+  dataModel: state.appData.dataModel.model,
 });
 
 export const CollapsableMenuComponent =