From 29fe4712cffdffae5f55d0e78ef4aa552d66814a Mon Sep 17 00:00:00 2001
From: Florent Poittevin <florent.poittevin@unige.ch>
Date: Fri, 25 Oct 2019 11:12:38 +0200
Subject: [PATCH] style: put big form in two column
- 833 Admin User : Missing roles in detail mode
---
.../admin-license-form.presentational.html | 160 ++++++++-------
...min-oauth2-client-form.presentational.html | 188 +++++++++--------
.../admin-orgunit-form.presentational.html | 192 +++++++++---------
.../admin-user-form.presentational.html | 188 +++++++++--------
.../deposit-form.presentational.html | 3 +-
.../deposit-form.presentational.scss | 53 -----
.../shared-abstract-form.presentational.scss | 53 +++++
src/sass/main.scss | 4 +
8 files changed, 438 insertions(+), 403 deletions(-)
diff --git a/src/app/features/admin/license/components/presentationals/admin-license-form/admin-license-form.presentational.html b/src/app/features/admin/license/components/presentationals/admin-license-form/admin-license-form.presentational.html
index 0bf285060..295216345 100644
--- a/src/app/features/admin/license/components/presentationals/admin-license-form/admin-license-form.presentational.html
+++ b/src/app/features/admin/license/components/presentationals/admin-license-form/admin-license-form.presentational.html
@@ -1,93 +1,99 @@
<form [formGroup]="form"
+ class="form-two-columns"
(ngSubmit)="onSubmit()"
>
- <mat-form-field>
- <mat-label>{{'admin.license.form.title' | translate}}</mat-label>
- <input matInput
- [formControlName]="formDefinition.title"
- [required]="isRequired(formDefinition.title)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.title).invalid">{{'required' | translate}}</mat-error>
- <mat-error *ngFor="let error of getFormControl(formDefinition.title).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <div class="two-columns-wrapper">
+ <div class="left-part">
+ <mat-form-field>
+ <mat-label>{{'admin.license.form.title' | translate}}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.title"
+ [required]="isRequired(formDefinition.title)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.title).invalid">{{'required' | translate}}</mat-error>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.title).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.license.form.openLicenseId' | translate}}</mat-label>
- <input matInput
- [formControlName]="formDefinition.openLicenseId"
- [required]="isRequired(formDefinition.openLicenseId)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.openLicenseId).invalid">{{'required' | translate}}</mat-error>
- <mat-error *ngFor="let error of getFormControl(formDefinition.openLicenseId).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.license.form.openLicenseId' | translate}}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.openLicenseId"
+ [required]="isRequired(formDefinition.openLicenseId)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.openLicenseId).invalid">{{'required' | translate}}</mat-error>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.openLicenseId).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.license.form.url' | translate}}</mat-label>
- <input matInput
- [formControlName]="formDefinition.url"
- >
- <mat-error *ngFor="let error of getFormControl(formDefinition.url).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.license.form.url' | translate}}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.url"
+ >
+ <mat-error *ngFor="let error of getFormControl(formDefinition.url).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.license.form.maintainer' | translate}}</mat-label>
- <input matInput
- [formControlName]="formDefinition.maintainer"
- >
- <mat-error *ngFor="let error of getFormControl(formDefinition.maintainer).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.license.form.odConformance' | translate}}</mat-label>
+ <mat-select [formControlName]="formDefinition.odConformance">
+ <mat-option *ngFor="let odConformance of licenseOdConformanceEnum"
+ [value]="odConformance"
+ >
+ {{odConformance}}
+ </mat-option>
+ </mat-select>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.odConformance).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.license.form.odConformance' | translate}}</mat-label>
- <mat-select [formControlName]="formDefinition.odConformance">
- <mat-option *ngFor="let odConformance of licenseOdConformanceEnum"
- [value]="odConformance"
- >
- {{odConformance}}
- </mat-option>
- </mat-select>
- <mat-error *ngFor="let error of getFormControl(formDefinition.odConformance).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.license.form.osdConformance' | translate}}</mat-label>
+ <mat-select [formControlName]="formDefinition.osdConformance">
+ <mat-option *ngFor="let osdConformance of licenseOsdConformanceEnum"
+ [value]="osdConformance"
+ >
+ {{osdConformance}}
+ </mat-option>
+ </mat-select>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.osdConformance).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
+ </div>
+ <div class="right-part">
+ <mat-form-field>
+ <mat-label>{{'admin.license.form.maintainer' | translate}}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.maintainer"
+ >
+ <mat-error *ngFor="let error of getFormControl(formDefinition.maintainer).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.license.form.osdConformance' | translate}}</mat-label>
- <mat-select [formControlName]="formDefinition.osdConformance">
- <mat-option *ngFor="let osdConformance of licenseOsdConformanceEnum"
- [value]="osdConformance"
- >
- {{osdConformance}}
- </mat-option>
- </mat-select>
- <mat-error *ngFor="let error of getFormControl(formDefinition.osdConformance).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.license.form.status' | translate}}</mat-label>
+ <mat-select [formControlName]="formDefinition.status">
+ <mat-option *ngFor="let status of licensesStatusEnum"
+ [value]="status"
+ >
+ {{status}}
+ </mat-option>
+ </mat-select>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.status).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.license.form.status' | translate}}</mat-label>
- <mat-select [formControlName]="formDefinition.status">
- <mat-option *ngFor="let status of licensesStatusEnum"
- [value]="status"
- >
- {{status}}
- </mat-option>
- </mat-select>
- <mat-error *ngFor="let error of getFormControl(formDefinition.status).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-checkbox [formControlName]="formDefinition.isGeneric">{{'admin.license.form.isGeneric' | translate }}</mat-checkbox>
- <mat-checkbox [formControlName]="formDefinition.isGeneric">{{'admin.license.form.isGeneric' | translate }}</mat-checkbox>
+ <mat-form-field>
+ <mat-label>{{'admin.license.form.family' | translate}}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.family"
+ >
+ <mat-error *ngFor="let error of getFormControl(formDefinition.family).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.license.form.family' | translate}}</mat-label>
- <input matInput
- [formControlName]="formDefinition.family"
- >
- <mat-error *ngFor="let error of getFormControl(formDefinition.family).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
-
- <mat-checkbox [formControlName]="formDefinition.domainContent">{{'admin.license.form.domainContent' | translate }}</mat-checkbox>
+ <mat-checkbox [formControlName]="formDefinition.domainContent">{{'admin.license.form.domainContent' | translate }}</mat-checkbox>
- <mat-checkbox [formControlName]="formDefinition.domainData">{{'admin.license.form.domainData' | translate }}</mat-checkbox>
+ <mat-checkbox [formControlName]="formDefinition.domainData">{{'admin.license.form.domainData' | translate }}</mat-checkbox>
- <mat-checkbox [formControlName]="formDefinition.domainSoftware">{{'admin.license.form.domainSoftware' | translate }}</mat-checkbox>
+ <mat-checkbox [formControlName]="formDefinition.domainSoftware">{{'admin.license.form.domainSoftware' | translate }}</mat-checkbox>
+ </div>
+ </div>
<div class="submit-button">
<button *ngIf="!readonly"
diff --git a/src/app/features/admin/oauth2-client/components/presentationals/admin-oauth2-client-form/admin-oauth2-client-form.presentational.html b/src/app/features/admin/oauth2-client/components/presentationals/admin-oauth2-client-form/admin-oauth2-client-form.presentational.html
index a35d65885..ea541b01d 100644
--- a/src/app/features/admin/oauth2-client/components/presentationals/admin-oauth2-client-form/admin-oauth2-client-form.presentational.html
+++ b/src/app/features/admin/oauth2-client/components/presentationals/admin-oauth2-client-form/admin-oauth2-client-form.presentational.html
@@ -1,105 +1,113 @@
<form [formGroup]="form"
+ class="form-two-columns"
(ngSubmit)="onSubmit()"
>
+ <div class="two-columns-wrapper">
+ <div class="left-part">
+ <mat-form-field>
+ <mat-label>{{'admin.oauth2.form.name' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.name"
+ [required]="isRequired(formDefinition.name)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.name).invalid">{{'required' | translate}}</mat-error>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.name).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.oauth2.form.name' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.name"
- [required]="isRequired(formDefinition.name)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.name).invalid">{{'required' | translate}}</mat-error>
- <mat-error *ngFor="let error of getFormControl(formDefinition.name).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.oauth2.form.clientId' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.clientId"
+ [required]="isRequired(formDefinition.clientId)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.clientId).invalid">{{'required' | translate}}</mat-error>
+ <mat-error
+ *ngFor="let error of getFormControl(formDefinition.clientId).errors?.errorsFromBackend"
+ >{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.oauth2.form.clientId' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.clientId"
- [required]="isRequired(formDefinition.clientId)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.clientId).invalid">{{'required' | translate}}</mat-error>
- <mat-error
- *ngFor="let error of getFormControl(formDefinition.clientId).errors?.errorsFromBackend"
- >{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <input matInput
+ [formControlName]="formDefinition.secret"
+ [required]="isRequired(formDefinition.secret)"
+ [type]="hide ? 'password' : 'text'"
+ >
+ <button mat-icon-button
+ matSuffix
+ [attr.aria-label]="'Hide password'"
+ [attr.aria-pressed]="hide"
+ (click)="hide = !hide"
+ >
+ <fa-icon matSuffix
+ icon="{{hide ? 'eye-slash' : 'eye'}}"
+ ></fa-icon>
+ </button>
+ </mat-form-field>
- <mat-form-field>
- <input matInput
- [formControlName]="formDefinition.secret"
- [required]="isRequired(formDefinition.secret)"
- [type]="hide ? 'password' : 'text'"
- >
- <button mat-icon-button
- matSuffix
- [attr.aria-label]="'Hide password'"
- [attr.aria-pressed]="hide"
- (click)="hide = !hide"
- >
- <fa-icon matSuffix
- icon="{{hide ? 'eye-slash' : 'eye'}}"
- ></fa-icon>
- </button>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.oauth2.form.redirectUri' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.redirectUri"
+ [required]="isRequired(formDefinition.redirectUri)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.redirectUri).invalid">{{'required' | translate}}</mat-error>
+ <mat-error
+ *ngFor="let error of getFormControl(formDefinition.redirectUri).errors?.errorsFromBackend"
+ >{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.oauth2.form.redirectUri' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.redirectUri"
- [required]="isRequired(formDefinition.redirectUri)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.redirectUri).invalid">{{'required' | translate}}</mat-error>
- <mat-error
- *ngFor="let error of getFormControl(formDefinition.redirectUri).errors?.errorsFromBackend"
- >{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.oauth2.form.scope' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.scope"
+ [required]="isRequired(formDefinition.scope)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.scope).invalid">{{'required' | translate}}</mat-error>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.name).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
+ </div>
- <mat-form-field>
- <mat-label>{{'admin.oauth2.form.scope' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.scope"
- [required]="isRequired(formDefinition.scope)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.scope).invalid">{{'required' | translate}}</mat-error>
- <mat-error *ngFor="let error of getFormControl(formDefinition.name).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <div class="right-part">
+ <mat-form-field>
+ <mat-label>{{'admin.oauth2.form.accessTokenValiditySeconds' | translate }}</mat-label>
+ <input matInput
+ type="number"
+ [formControlName]="formDefinition.accessTokenValiditySeconds"
+ [required]="isRequired(formDefinition.accessTokenValiditySeconds)"
+ >
+ <mat-error
+ *ngFor="let error of getFormControl(formDefinition.accessTokenValiditySeconds).errors?.errorsFromBackend"
+ >{{error}}</mat-error>
+ </mat-form-field>
+
+ <mat-form-field>
+ <mat-label>{{'admin.oauth2.form.refreshTokenValiditySeconds' | translate }}</mat-label>
+ <input matInput
+ type="number"
+ [formControlName]="formDefinition.refreshTokenValiditySeconds"
+ [required]="isRequired(formDefinition.refreshTokenValiditySeconds)"
+ >
+ <mat-error
+ *ngFor="let error of getFormControl(formDefinition.refreshTokenValiditySeconds).errors?.errorsFromBackend"
+ >{{error}}</mat-error>
+ </mat-form-field>
- <div>
- <mat-label>{{'admin.oauth2.form.grantTypes' | translate }}</mat-label>
- <div *ngFor="let grant of grantTypesArray.controls">
- <mat-checkbox [formControl]="grant.get('selected')">
- {{grant.value.name}}
- </mat-checkbox>
+ <div>
+ <mat-label [class.disabled]="readonly">{{'admin.oauth2.form.grantTypes' | translate }}</mat-label>
+ <div *ngFor="let grant of grantTypesArray.controls">
+ <mat-checkbox [formControl]="grant.get('selected')"
+ [disabled]="readonly"
+ >
+ {{grant.value.name}}
+ </mat-checkbox>
+ </div>
+ <mat-error
+ *ngFor="let error of getFormControl(formDefinition.grantTypes).errors?.errorsFromBackend"
+ >{{error}}</mat-error>
+ </div>
</div>
- <mat-error
- *ngFor="let error of getFormControl(formDefinition.grantTypes).errors?.errorsFromBackend"
- >{{error}}</mat-error>
</div>
- <mat-form-field>
- <mat-label>{{'admin.oauth2.form.accessTokenValiditySeconds' | translate }}</mat-label>
- <input matInput
- type="number"
- [formControlName]="formDefinition.accessTokenValiditySeconds"
- [required]="isRequired(formDefinition.accessTokenValiditySeconds)"
- >
- <mat-error
- *ngFor="let error of getFormControl(formDefinition.accessTokenValiditySeconds).errors?.errorsFromBackend"
- >{{error}}</mat-error>
- </mat-form-field>
-
- <mat-form-field>
- <mat-label>{{'admin.oauth2.form.refreshTokenValiditySeconds' | translate }}</mat-label>
- <input matInput
- type="number"
- [formControlName]="formDefinition.refreshTokenValiditySeconds"
- [required]="isRequired(formDefinition.refreshTokenValiditySeconds)"
- >
- <mat-error
- *ngFor="let error of getFormControl(formDefinition.refreshTokenValiditySeconds).errors?.errorsFromBackend"
- >{{error}}</mat-error>
- </mat-form-field>
-
<div class="submit-button">
<button *ngIf="!readonly"
mat-raised-button
diff --git a/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.html b/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.html
index e7b90ebb1..6755e7f67 100644
--- a/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.html
+++ b/src/app/features/admin/orgunit/components/presentationals/admin-orgunit-form/admin-orgunit-form.presentational.html
@@ -1,107 +1,115 @@
<form [formGroup]="form"
+ class="form-two-columns"
(ngSubmit)="onSubmit()"
>
- <mat-form-field *ngIf="getFormControl(formDefinition.name) as fd">
- <input [formControl]="fd"
- solidifyValidation
- matInput
- [placeholder]="'admin.organizationalUnit.form.name' | translate"
- [required]="formValidationHelper.hasRequiredField(fd)"
- >
- <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
- </mat-form-field>
+ <div class="two-columns-wrapper">
+ <div class="left-part">
- <dlcm-shared-multi-select-default-value [list]="listSubmissionPolicies"
- [formControl]="form.get(formDefinition.submissionPolicies)"
- [formControlDefault]="form.get(formDefinition.defaultSubmissionPolicy)"
- [required]="isRequired(formDefinition.submissionPolicies)"
- [labelKey]="'name'"
- [valueKey]="'resId'"
- [placeholder]="'admin.organizationalUnit.form.submissionPolicy' | translate"
- >
- </dlcm-shared-multi-select-default-value>
+ <mat-form-field *ngIf="getFormControl(formDefinition.name) as fd">
+ <input [formControl]="fd"
+ solidifyValidation
+ matInput
+ [placeholder]="'admin.organizationalUnit.form.name' | translate"
+ [required]="formValidationHelper.hasRequiredField(fd)"
+ >
+ <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+ </mat-form-field>
- <dlcm-shared-multi-select-default-value [list]="listPreservationPolicies"
- [formControl]="form.get(formDefinition.preservationPolicies)"
- [formControlDefault]="form.get(formDefinition.defaultPreservationPolicy)"
- [required]="isRequired(formDefinition.preservationPolicies)"
- [labelKey]="'name'"
- [valueKey]="'resId'"
- [placeholder]="'admin.organizationalUnit.form.preservationPolicy' | translate"
- >
- </dlcm-shared-multi-select-default-value>
+ <dlcm-shared-multi-select-default-value [list]="listSubmissionPolicies"
+ [formControl]="form.get(formDefinition.submissionPolicies)"
+ [formControlDefault]="form.get(formDefinition.defaultSubmissionPolicy)"
+ [required]="isRequired(formDefinition.submissionPolicies)"
+ [labelKey]="'name'"
+ [valueKey]="'resId'"
+ [placeholder]="'admin.organizationalUnit.form.submissionPolicy' | translate"
+ >
+ </dlcm-shared-multi-select-default-value>
- <mat-form-field *ngIf="getFormControl(formDefinition.description) as fd">
- <input [formControl]="fd"
- solidifyValidation
- matInput
- [placeholder]="'admin.organizationalUnit.form.description' | translate"
- [required]="formValidationHelper.hasRequiredField(fd)"
- >
- <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
- </mat-form-field>
+ <dlcm-shared-multi-select-default-value [list]="listPreservationPolicies"
+ [formControl]="form.get(formDefinition.preservationPolicies)"
+ [formControlDefault]="form.get(formDefinition.defaultPreservationPolicy)"
+ [required]="isRequired(formDefinition.preservationPolicies)"
+ [labelKey]="'name'"
+ [valueKey]="'resId'"
+ [placeholder]="'admin.organizationalUnit.form.preservationPolicy' | translate"
+ >
+ </dlcm-shared-multi-select-default-value>
- <mat-form-field *ngIf="getFormControl(formDefinition.url) as fd">
- <input [formControl]="fd"
- solidifyValidation
- matInput
- [placeholder]="'admin.organizationalUnit.form.url' | translate"
- >
- <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
- </mat-form-field>
+ <mat-form-field *ngIf="getFormControl(formDefinition.description) as fd">
+ <input [formControl]="fd"
+ solidifyValidation
+ matInput
+ [placeholder]="'admin.organizationalUnit.form.description' | translate"
+ [required]="formValidationHelper.hasRequiredField(fd)"
+ >
+ <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <input [formControlName]="formDefinition.openingDate"
- matInput
- [matDatepicker]="openingDateDatepicker"
- [placeholder]="'admin.organizationalUnit.form.openingDate' | translate"
- >
- <mat-datepicker-toggle matSuffix
- [for]="openingDateDatepicker"
- ></mat-datepicker-toggle>
- <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
- #openingDateDatepicker
- ></mat-datepicker>
- </mat-form-field>
+ <mat-form-field *ngIf="getFormControl(formDefinition.url) as fd">
+ <input [formControl]="fd"
+ solidifyValidation
+ matInput
+ [placeholder]="'admin.organizationalUnit.form.url' | translate"
+ >
+ <mat-error>{{formValidationHelper.getFormError(fd)}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <input [formControlName]="formDefinition.closingDate"
- matInput
- [matDatepicker]="closingDateDatepicker"
- [placeholder]="'admin.organizationalUnit.form.closingDate' | translate"
- >
- <mat-datepicker-toggle matSuffix
- [for]="closingDateDatepicker"
- ></mat-datepicker-toggle>
- <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
- #closingDateDatepicker
- ></mat-datepicker>
- </mat-form-field>
+ <mat-form-field>
+ <input [formControlName]="formDefinition.openingDate"
+ matInput
+ [matDatepicker]="openingDateDatepicker"
+ [placeholder]="'admin.organizationalUnit.form.openingDate' | translate"
+ >
+ <mat-datepicker-toggle matSuffix
+ [for]="openingDateDatepicker"
+ ></mat-datepicker-toggle>
+ <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+ #openingDateDatepicker
+ ></mat-datepicker>
+ </mat-form-field>
+
+ <mat-form-field>
+ <input [formControlName]="formDefinition.closingDate"
+ matInput
+ [matDatepicker]="closingDateDatepicker"
+ [placeholder]="'admin.organizationalUnit.form.closingDate' | translate"
+ >
+ <mat-datepicker-toggle matSuffix
+ [for]="closingDateDatepicker"
+ ></mat-datepicker-toggle>
+ <mat-datepicker [touchUi]="breakpointService.isSmallerThanMd()"
+ #closingDateDatepicker
+ ></mat-datepicker>
+ </mat-form-field>
+ </div>
- <dlcm-shared-person-orgunit-role [formControl]="form.get(formDefinition.personRole)"
- [mode]="personOrgUnitRoleMode.person"
- [selectedPersonOrOrgUnitRole]="selectedPersonRole"
- [listPerson]="listPerson"
- [listRole]="listRole"
- ></dlcm-shared-person-orgunit-role>
+ <div class="right-part">
+ <dlcm-shared-person-orgunit-role [formControl]="form.get(formDefinition.personRole)"
+ [mode]="personOrgUnitRoleMode.person"
+ [selectedPersonOrOrgUnitRole]="selectedPersonRole"
+ [listPerson]="listPerson"
+ [listRole]="listRole"
+ ></dlcm-shared-person-orgunit-role>
- <dlcm-shared-multi-select [list]="listFundingAgencies"
- [formControl]="form.get(formDefinition.fundingAgencies)"
- [required]="isRequired(formDefinition.fundingAgencies)"
- [labelKey]="'name'"
- [valueKey]="'resId'"
- [placeholder]="'admin.organizationalUnit.form.fundingAgency' | translate"
- >
- </dlcm-shared-multi-select>
+ <dlcm-shared-multi-select [list]="listFundingAgencies"
+ [formControl]="form.get(formDefinition.fundingAgencies)"
+ [required]="isRequired(formDefinition.fundingAgencies)"
+ [labelKey]="'name'"
+ [valueKey]="'resId'"
+ [placeholder]="'admin.organizationalUnit.form.fundingAgency' | translate"
+ >
+ </dlcm-shared-multi-select>
- <dlcm-shared-multi-select [list]="listInstitutions"
- [formControl]="form.get(formDefinition.institutions)"
- [required]="isRequired(formDefinition.institutions)"
- [labelKey]="'name'"
- [valueKey]="'resId'"
- [placeholder]="'admin.organizationalUnit.form.institutions' | translate"
- >
- </dlcm-shared-multi-select>
+ <dlcm-shared-multi-select [list]="listInstitutions"
+ [formControl]="form.get(formDefinition.institutions)"
+ [required]="isRequired(formDefinition.institutions)"
+ [labelKey]="'name'"
+ [valueKey]="'resId'"
+ [placeholder]="'admin.organizationalUnit.form.institutions' | translate"
+ >
+ </dlcm-shared-multi-select>
+ </div>
+ </div>
<div class="submit-button">
<button *ngIf="!readonly"
diff --git a/src/app/features/admin/user/components/presentationals/admin-user-form/admin-user-form.presentational.html b/src/app/features/admin/user/components/presentationals/admin-user-form/admin-user-form.presentational.html
index 25ad39fdc..de8d9463b 100644
--- a/src/app/features/admin/user/components/presentationals/admin-user-form/admin-user-form.presentational.html
+++ b/src/app/features/admin/user/components/presentationals/admin-user-form/admin-user-form.presentational.html
@@ -1,105 +1,113 @@
<form [formGroup]="form"
+ class="form-two-columns"
(ngSubmit)="onSubmit()"
>
- <mat-form-field>
- <mat-label>{{'admin.user.form.externalUid' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.externalUid"
- [required]="isRequired(formDefinition.externalUid)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.externalUid).invalid">{{'required' | translate}}</mat-error>
- <mat-error *ngFor="let error of getFormControl(formDefinition.externalUid).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <div class="two-columns-wrapper">
+ <div class="left-part">
+ <mat-form-field>
+ <mat-label>{{'admin.user.form.externalUid' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.externalUid"
+ [required]="isRequired(formDefinition.externalUid)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.externalUid).invalid">{{'required' | translate}}</mat-error>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.externalUid).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.user.form.targetedUid' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.targetedUid"
- >
- <mat-error *ngFor="let error of getFormControl(formDefinition.targetedUid).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.user.form.targetedUid' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.targetedUid"
+ >
+ <mat-error *ngFor="let error of getFormControl(formDefinition.targetedUid).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.user.form.firstName' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.firstName"
- [required]="isRequired(formDefinition.firstName)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.firstName).invalid">{{'required' | translate}}</mat-error>
- <mat-error *ngFor="let error of getFormControl(formDefinition.firstName).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
-
- <mat-form-field>
- <mat-label>{{'admin.user.form.lastName' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.lastName"
- [required]="isRequired(formDefinition.lastName)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.lastName).invalid">{{'required' | translate}}</mat-error>
- <mat-error *ngFor="let error of getFormControl(formDefinition.lastName).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.user.form.firstName' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.firstName"
+ [required]="isRequired(formDefinition.firstName)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.firstName).invalid">{{'required' | translate}}</mat-error>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.firstName).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.user.form.homeOrganization' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.homeOrganization"
- [readonly]="true"
- >
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.user.form.lastName' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.lastName"
+ [required]="isRequired(formDefinition.lastName)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.lastName).invalid">{{'required' | translate}}</mat-error>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.lastName).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.user.form.email' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.email"
- [required]="isRequired(formDefinition.email)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.email).invalid">{{'required' | translate}}</mat-error>
- <mat-error *ngFor="let error of getFormControl(formDefinition.email).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.user.form.homeOrganization' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.homeOrganization"
+ [readonly]="true"
+ >
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.user.form.person' | translate }}</mat-label>
- <mat-select [formControlName]="formDefinition.person">
- <mat-option [value]="null"></mat-option>
- <mat-option *ngFor="let person of listPersons"
- [value]="person.resId"
- >
- {{person.fullName}}
- </mat-option>
- </mat-select>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.user.form.email' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.email"
+ [required]="isRequired(formDefinition.email)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.email).invalid">{{'required' | translate}}</mat-error>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.email).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
+ </div>
+ <div class="right-part">
+ <mat-form-field>
+ <mat-label>{{'admin.user.form.person' | translate }}</mat-label>
+ <mat-select [formControlName]="formDefinition.person">
+ <mat-option [value]="null"></mat-option>
+ <mat-option *ngFor="let person of listPersons"
+ [value]="person.resId"
+ >
+ {{person.fullName}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.user.form.accessToken' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.accessToken"
- [required]="isRequired(formDefinition.accessToken)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.accessToken).invalid">{{'required' | translate}}</mat-error>
- <mat-error *ngFor="let error of getFormControl(formDefinition.accessToken).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.user.form.accessToken' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.accessToken"
+ [required]="isRequired(formDefinition.accessToken)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.accessToken).invalid">{{'required' | translate}}</mat-error>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.accessToken).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <mat-form-field>
- <mat-label>{{'admin.user.form.refreshToken' | translate }}</mat-label>
- <input matInput
- [formControlName]="formDefinition.refreshToken"
- [required]="isRequired(formDefinition.refreshToken)"
- >
- <mat-error *ngIf="getFormControl(formDefinition.refreshToken).invalid">{{'required' | translate}}</mat-error>
- <mat-error *ngFor="let error of getFormControl(formDefinition.refreshToken).errors?.errorsFromBackend">{{error}}</mat-error>
- </mat-form-field>
+ <mat-form-field>
+ <mat-label>{{'admin.user.form.refreshToken' | translate }}</mat-label>
+ <input matInput
+ [formControlName]="formDefinition.refreshToken"
+ [required]="isRequired(formDefinition.refreshToken)"
+ >
+ <mat-error *ngIf="getFormControl(formDefinition.refreshToken).invalid">{{'required' | translate}}</mat-error>
+ <mat-error *ngFor="let error of getFormControl(formDefinition.refreshToken).errors?.errorsFromBackend">{{error}}</mat-error>
+ </mat-form-field>
- <div *ngIf="!readonly">
- <mat-label>{{'admin.user.form.roles' | translate }}</mat-label>
- <div *ngFor="let role of getApplicationRolesNamesArray.controls">
- <mat-checkbox [formControl]="role.get('selected')">
- {{role.value.name}}
- </mat-checkbox>
+ <div>
+ <mat-label [class.disabled]="readonly">{{'admin.user.form.roles' | translate }}</mat-label>
+ <div *ngFor="let role of getApplicationRolesNamesArray.controls">
+ <mat-checkbox [formControl]="role.get('selected')"
+ [disabled]="readonly"
+ >
+ {{role.value.name}}
+ </mat-checkbox>
+ </div>
+ <mat-error *ngIf="getFormControl(formDefinition.applicationRoles).invalid">{{'required' | translate}}</mat-error>
+ <mat-error
+ *ngFor="let error of getFormControl(formDefinition.applicationRoles).errors?.errorsFromBackend"
+ >{{error}}</mat-error>
+ </div>
</div>
- <mat-error *ngIf="getFormControl(formDefinition.applicationRoles).invalid">{{'required' | translate}}</mat-error>
- <mat-error
- *ngFor="let error of getFormControl(formDefinition.applicationRoles).errors?.errorsFromBackend"
- >{{error}}</mat-error>
</div>
<div class="submit-button">
diff --git a/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.html b/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.html
index 3eed85800..db9371c78 100644
--- a/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.html
+++ b/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.html
@@ -1,7 +1,8 @@
<form [formGroup]="form"
+ class="form-two-columns"
(ngSubmit)="onSubmit()"
>
- <div class="input-part">
+ <div class="two-columns-wrapper">
<div class="left-part">
<mat-form-field *ngIf="getFormControl(formDefinition.organizationalUnitId) as fd">
<mat-label>{{'deposit.organizationUnit' | translate }}</mat-label>
diff --git a/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.scss b/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.scss
index d91f6f857..23ff15c1c 100644
--- a/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.scss
+++ b/src/app/features/deposit/components/presentationals/deposit-form/deposit-form.presentational.scss
@@ -2,59 +2,6 @@
@import "../../src/app/shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational.scss";
:host {
- form {
- > * {
- width: 60%;
-
- @include respond-to-breakpoint('xs') {
- width: 100%;
- }
-
- @include respond-to-breakpoint('sm') {
- width: 50%;
- }
-
- @include respond-to-breakpoint('md') {
- width: 80%;
- }
- }
- }
-
- .input-part {
- display: flex;
-
- .left-part {
- width: 50%;
- display: flex;
- flex-direction: column;
- padding-right: 20px;
-
- > * {
- width: 100%;
- }
- }
-
- .right-part {
- width: 50%;
- display: flex;
- flex-direction: column;
- padding-left: 20px;
-
- > * {
- width: 100%;
- }
- }
-
- @include respond-to-smaller-than-breakpoint('md') {
- flex-direction: column;
- .left-part,
- .right-part {
- padding: 0;
- width: 100%;
- }
- }
- }
-
.author-wrapper {
display: flex;
flex-direction: column;
diff --git a/src/app/shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational.scss b/src/app/shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational.scss
index 53f7c9d4f..89561727b 100644
--- a/src/app/shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational.scss
+++ b/src/app/shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational.scss
@@ -23,6 +23,59 @@ form {
width: 40%;
}
}
+
+ &.form-two-columns {
+ > * {
+ width: 60%;
+
+ @include respond-to-breakpoint('xs') {
+ width: 100%;
+ }
+
+ @include respond-to-breakpoint('sm') {
+ width: 50%;
+ }
+
+ @include respond-to-breakpoint('md') {
+ width: 80%;
+ }
+ }
+
+ .two-columns-wrapper {
+ display: flex;
+
+ .left-part {
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ padding-right: 20px;
+
+ > * {
+ width: 100%;
+ }
+ }
+
+ .right-part {
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ padding-left: 20px;
+
+ > * {
+ width: 100%;
+ }
+ }
+
+ @include respond-to-smaller-than-breakpoint('md') {
+ flex-direction: column;
+ .left-part,
+ .right-part {
+ padding: 0;
+ width: 100%;
+ }
+ }
+ }
+ }
}
.submit-button {
diff --git a/src/sass/main.scss b/src/sass/main.scss
index b03097f75..bb903af60 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -144,3 +144,7 @@ button {
}
}
}
+
+mat-label.disabled {
+ color: rgba(0, 0, 0, 0.54);
+}
--
GitLab