MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

ui fixes plan + description status editors

This commit is contained in:
mchouliara 2024-08-30 16:50:13 +03:00
parent cc7ed0d59b
commit ab5c16f7d8
5 changed files with 110 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
View File

@ -6,16 +6,16 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="action-btn cancel-btn" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="rounded-btn cancel-btn" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-button class="action-btn delete-btn" type="button" (click)="delete()">
<button mat-button class="rounded-btn delete-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'COMMONS.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn save-btn" (click)="formSubmit()">
<button mat-button class="rounded-btn save-btn" (click)="formSubmit()" [disabled]="!formGroup.touched">
<mat-icon>save</mat-icon>
{{'COMMONS.ACTIONS.SAVE' | translate}}
</button>
@ -65,37 +65,43 @@
{{'DESCRIPTION-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}}
</h3>
<div id="Edit">
<mat-card-title class="pb-2">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.EDIT' | translate}}</mat-card-title>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}}*</mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
<mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
</mat-select>
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('backendError')">{{"editAuthenticationForm.controls.roles.getError('backendError').message}}</mat-error>
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}*</mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
<mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
</mat-select>
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('backendError')">{{"editAuthenticationForm.controls.planRoles.getError('backendError').message}}</mat-error>
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="d-flex" style="gap: 0.5rem">
<div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAuthenticated">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ALLOW-AUTHENTICATED' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAuthenticated.hasError('backendError')">{{editAuthenticationForm.controls.allowAuthenticated.getError('backendError').message}}</mat-error>
</div>
<div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAnonymous">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ALLOW-ANONYMOUS' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAnonymous.hasError('backendError')">{{editAuthenticationForm.controls.allowAnonymous.getError('backendError').message}}</mat-error>
</div>
</div>
<mat-card>
<mat-card-header>
<mat-card-title class="pb-2">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.EDIT' | translate}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}}*</mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
<mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
</mat-select>
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('backendError')">{{"editAuthenticationForm.controls.roles.getError('backendError').message}}</mat-error>
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}*</mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
<mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
</mat-select>
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('backendError')">{{"editAuthenticationForm.controls.planRoles.getError('backendError').message}}</mat-error>
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="d-flex" style="gap: 0.5rem">
<div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAuthenticated">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ALLOW-AUTHENTICATED' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAuthenticated.hasError('backendError')">{{editAuthenticationForm.controls.allowAuthenticated.getError('backendError').message}}</mat-error>
</div>
<div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAnonymous">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ALLOW-ANONYMOUS' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAnonymous.hasError('backendError')">{{editAuthenticationForm.controls.allowAnonymous.getError('backendError').message}}</mat-error>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>

30
frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.scss
View File

@ -1,33 +1,3 @@
::ng-deep label {
margin: 0;
}
.action-btn {
border-radius: 30px;
background-color: var(--secondary-color);
border: 1px solid transparent;
padding-left: 2em;
padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029;
transition-property: background-color, color;
transition-duration: 200ms;
transition-delay: 50ms;
transition-timing-function: ease-in-out;
&:disabled{
background-color: #CBCBCB;
color: #FFF;
border: 0px;
}
}
.cancel-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
}
.delete-btn {
background: #ffffff;
color: #ba2c2c;
border: 1px solid #ba2c2c;
}

74
frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
View File

@ -6,16 +6,16 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="action-btn cancel-btn" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="rounded-btn cancel-btn" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-button class="action-btn delete-btn" type="button" (click)="delete()">
<button mat-button class="rounded-btn delete-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'PLAN-STATUS-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="action-btn save-btn" (click)="formSubmit()">
<button mat-button class="rounded-btn save-btn" (click)="formSubmit()" [disabled]="!formGroup.touched">
<mat-icon>save</mat-icon>
{{'PLAN-STATUS-EDITOR.ACTIONS.SAVE' | translate}}
</button>
@ -65,37 +65,43 @@
{{'PLAN-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}}
</h3>
<div id="Edit">
<mat-card-title class="pb-2">{{'PLAN-STATUS-EDITOR.FIELDS.EDIT' | translate}}</mat-card-title>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}}*</mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
<mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
</mat-select>
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('backendError')">{{"editAuthenticationForm.controls.roles.getError('backendError').message}}</mat-error>
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}*</mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
<mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
</mat-select>
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('backendError')">{{"editAuthenticationForm.controls.planRoles.getError('backendError').message}}</mat-error>
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="d-flex" style="gap: 0.5rem">
<div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAuthenticated">{{'PLAN-STATUS-EDITOR.FIELDS.ALLOW-AUTHENTICATED' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAuthenticated.hasError('backendError')">{{editAuthenticationForm.controls.allowAuthenticated.getError('backendError').message}}</mat-error>
</div>
<div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAnonymous">{{'PLAN-STATUS-EDITOR.FIELDS.ALLOW-ANONYMOUS' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAnonymous.hasError('backendError')">{{editAuthenticationForm.controls.allowAnonymous.getError('backendError').message}}</mat-error>
</div>
</div>
<mat-card>
<mat-card-header>
<mat-card-title class="pb-2">{{'PLAN-STATUS-EDITOR.FIELDS.EDIT' | translate}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}}*</mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
<mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
</mat-select>
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('backendError')">{{"editAuthenticationForm.controls.roles.getError('backendError').message}}</mat-error>
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}*</mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
<mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
</mat-select>
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('backendError')">{{"editAuthenticationForm.controls.planRoles.getError('backendError').message}}</mat-error>
<mat-error *ngIf="editAuthenticationForm.controls.planRoles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="d-flex" style="gap: 0.5rem">
<div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAuthenticated">{{'PLAN-STATUS-EDITOR.FIELDS.ALLOW-AUTHENTICATED' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAuthenticated.hasError('backendError')">{{editAuthenticationForm.controls.allowAuthenticated.getError('backendError').message}}</mat-error>
</div>
<div>
<mat-checkbox [formControl]="editAuthenticationForm.controls.allowAnonymous">{{'PLAN-STATUS-EDITOR.FIELDS.ALLOW-ANONYMOUS' | translate}}</mat-checkbox>
<mat-error *ngIf="editAuthenticationForm.controls.allowAnonymous.hasError('backendError')">{{editAuthenticationForm.controls.allowAnonymous.getError('backendError').message}}</mat-error>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>

30
frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.scss
View File

@ -1,33 +1,3 @@
::ng-deep label {
margin: 0;
}
.action-btn {
border-radius: 30px;
background-color: var(--secondary-color);
border: 1px solid transparent;
padding-left: 2em;
padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029;
transition-property: background-color, color;
transition-duration: 200ms;
transition-delay: 50ms;
transition-timing-function: ease-in-out;
&:disabled{
background-color: #CBCBCB;
color: #FFF;
border: 0px;
}
}
.cancel-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
}
.delete-btn {
background: #ffffff;
color: #ba2c2c;
border: 1px solid #ba2c2c;
}

43
frontend/src/styles.scss
View File

@ -401,14 +401,17 @@ $mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-prim
@include mat.all-component-densities(-10);
}
.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[matButtonIcon]) {
button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[matButtonIcon]) {
&.rounded-btn{
font-size: 0.87rem;
padding: 0.62rem 1.87rem;
height: 40px;
border-radius: 30px;
border: none;
opacity: 1;
padding-left: 2em;
padding-right: 2em;
// padding-left: 2em;
// padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029;
&:hover {
box-shadow: var(--mdc-protected-button-hover-container-elevation-shadow);
@ -435,28 +438,42 @@ $mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-prim
color: #000000;
}
// &.save-btn {
&.save-btn {
background: var(--secondary-color) 0% 0% no-repeat padding-box;
color: #000000;
padding-left: 2em;
padding-right: 2em;
}
// }
&.cancel-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
padding-left: 2em;
padding-right: 2em;
}
// &.cancel-btn {
// }
// &.finalize-btn {
&.finalize-btn {
// }
}
&.delete-btn {
background: #ffffff;
color: #ff3d33;;
border: 1px solid #ff3d33;
color: #ba2c2c;
border: 1px solid #ba2c2c;
padding-left: 2em;
padding-right: 2em;
}
&.md-button {
padding: 0.62rem 1.87rem;
font-weight: 400;
}
&:disabled {
background-color: #CBCBCB;
color: #FFF;
border: 0px;
}
}
.mat-mdc-button.mat-mdc-button-disabled {