Skip to content

Commit

Permalink
[VAS] Story 10410: update design (#1440)
Browse files Browse the repository at this point in the history
  • Loading branch information
@laedanrex
laedanrex authored Aug 23, 2023
1 parent b9b308d commit 7117de0
Show file tree
Hide file tree
Showing 7 changed files with 104 additions and 81 deletions.
44 changes: 0 additions & 44 deletions ...l-param-profile/external-param-profile-create/external-param-profile-create.component.css
View file

This file was deleted.

77 changes: 43 additions & 34 deletions ...-param-profile/external-param-profile-create/external-param-profile-create.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@
<cdk-step>
<div class="content">
<div class="vitamui-form">
<div class="text large header-title">{{ 'EXTERNAL_PARAM_PROFILE.CREATE_EXTERNAL_PARAM_PROFILE_POPUP' | translate }}</div>
<div class="text large header-subtitle">
<div
class="text large header-title">{{ 'EXTERNAL_PARAM_PROFILE.CREATE_EXTERNAL_PARAM_PROFILE_POPUP' | translate }}</div>
<div class="text large bold header-subtitle">
{{ 'EXTERNAL_PARAM_PROFILE.CREATE_EXTERNAL_PARAM_PROFILE_POPUP_SUBTITLE' | translate }}
</div>

<div class="mb-2">
<vitamui-common-slide-toggle formControlName="enabled">
{{ 'EXTERNAL_PARAM_PROFILE.PROFILE' | translate }}
Expand All @@ -29,12 +31,12 @@
>
<vitamui-common-input-error
*ngIf="externalParamProfileForm?.get('name')?.touched && !!externalParamProfileForm?.get('name')?.errors?.required"
>{{ 'COMMON.ERROR.REQUIRED' | translate }}</vitamui-common-input-error
>{{ 'COMMON.ERROR.REQUIRED' | translate }}</vitamui-common-input-error
>

<vitamui-common-input-error
*ngIf="externalParamProfileForm?.get('name')?.touched && !!externalParamProfileForm?.get('name')?.errors?.nameExists"
>{{ 'COMMON.ERROR.NAME_ALREADY_EXISTS' | translate }}</vitamui-common-input-error
>{{ 'COMMON.ERROR.NAME_ALREADY_EXISTS' | translate }}</vitamui-common-input-error
>
</vitamui-common-input>

Expand All @@ -50,7 +52,7 @@
*ngIf="
externalParamProfileForm?.get('description')?.touched && !!externalParamProfileForm?.get('description')?.errors?.required
"
>{{ 'COMMON.ERROR.REQUIRED' | translate }}</vitamui-common-input-error
>{{ 'COMMON.ERROR.REQUIRED' | translate }}</vitamui-common-input-error
>
</vitamui-common-input>

Expand All @@ -62,8 +64,9 @@
panelclass="vitamui-mat-select"
class="w-100"
>
<mat-option *ngFor="let accessContract of activeAccessContracts$ | async" [value]="accessContract.identifier"
>{{ accessContract.identifier }}
<mat-option *ngFor="let accessContract of activeAccessContracts$ | async"
[value]="accessContract.identifier"
>{{ accessContract.identifier }}
</mat-option>
</mat-select>
<div class="select-arrow">
Expand All @@ -73,7 +76,8 @@
</mat-form-field>
</div>
<div class="actions">
<button type="button" class="btn primary" cdkStepperNext [disabled]="firstStepInvalid()">{{ 'COMMON.NEXT' | translate }}</button>
<button type="button" class="btn primary" cdkStepperNext
[disabled]="firstStepInvalid()">{{ 'COMMON.NEXT' | translate }}</button>
<button type="button" class="btn link cancel" (click)="onCancel()">
{{ 'COMMON.CANCEL' | translate }}
</button>
Expand All @@ -84,39 +88,44 @@
<cdk-step>
<div class="content">
<div class="vitamui-form">
<div class="text large header-title">{{ 'EXTERNAL_PARAM_PROFILE.CREATE_EXTERNAL_PARAM_PROFILE_POPUP' | translate }}</div>
<div class="text large bold header-subtitle">{{ 'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_TITLE' | translate }}</div>
<div
class="text large header-title">{{ 'EXTERNAL_PARAM_PROFILE.CREATE_EXTERNAL_PARAM_PROFILE_POPUP' | translate }}</div>
<div
class="text large bold header-subtitle">{{ 'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_TITLE' | translate }}</div>

<div class="mb-2">
<vitamui-common-slide-toggle formControlName="usePlatformThreshold">
{{ 'EXTERNAL_PARAM_PROFILE.USE_PLATFORM_BULK_OPERATIONS_THRESHOLD_TITLE' | translate }}
</vitamui-common-slide-toggle>
</div>

<mat-form-field class="vitamui-mat-select" *ngIf="!externalParamProfileForm.get('usePlatformThreshold').value">
<mat-select
formControlName="bulkOperationsThreshold"
placeholder="{{ 'EXTERNAL_PARAM_PROFILE.USE_PLATFORM_BULK_OPERATIONS_THRESHOLD_TITLE' | translate }}"
required="required"
panelclass="vitamui-mat-select"
[(value)]="selectedThreshold"
class="w-100"
>
<mat-option *ngFor="let thresholdValue of thresholdValues" [value]="thresholdValue">
{{ 'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_VALUES' | translate : { threshold: thresholdValue | number } }}
</mat-option>
</mat-select>
<div class="select-arrow">
<i class="material-icons">keyboard_arrow_up</i>
<i class="material-icons">keyboard_arrow_down</i>
</div>
<i
class="vitamui-icon vitamui-icon-info-circle vitamui-row-icon icon-information"
[matTooltip]="'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_HELPER' | translate"
matTooltipClass="vitamui-tooltip"
[matTooltipShowDelay]="300"
<div class="select-threshold" *ngIf="!externalParamProfileForm.get('usePlatformThreshold').value">
<mat-form-field class="vitamui-mat-select">
<mat-select
formControlName="bulkOperationsThreshold"
placeholder="{{ 'EXTERNAL_PARAM_PROFILE.USE_PLATFORM_BULK_OPERATIONS_THRESHOLD_TITLE' | translate }}"
required="required"
panelclass="vitamui-mat-select"
[(value)]="selectedThreshold"
class="w-100"
>
<mat-option *ngFor="let thresholdValue of thresholdValues" [value]="thresholdValue">
{{ 'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_VALUES' | translate : { threshold: thresholdValue | number } }}
</mat-option>
</mat-select>
<div class="select-arrow">
<i class="material-icons">keyboard_arrow_up</i>
<i class="material-icons">keyboard_arrow_down</i>
</div>
</mat-form-field>

<i class="vitamui-icon vitamui-icon-info-circle vitamui-row-icon icon-information"
[matTooltip]="'EXTERNAL_PARAM_PROFILE.MAX_BULK_OPERATIONS_THRESHOLD_HELPER' | translate"
matTooltipClass="vitamui-tooltip"
[matTooltipShowDelay]="300"
></i>
</mat-form-field>

</div>
</div>
<div class="actions">
<button type="submit" class="btn primary mr-4" [disabled]="onValidate()">
Expand All @@ -129,7 +138,7 @@
<button type="button" class="btn link" cdkStepperPrevious>
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
<ng-container
><span>{{ 'COMMON.BACK' | translate }}</span></ng-container
><span>{{ 'COMMON.BACK' | translate }}</span></ng-container
>
</button>
</div>
Expand Down
56 changes: 56 additions & 0 deletions ...-param-profile/external-param-profile-create/external-param-profile-create.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
.icon-information {
right: -75px;
width: 30px;
height: 31px;
font-size: 26px;
font-weight: bold;
color: var(--vitamui-secondary);
}

.select-threshold {
display: flex;
justify-content: flex-start;
align-items: center;

i {
display: flex;
margin-left: 15px;
justify-content: center;
align-items: center;
}
}

.header-title {
font-family: 'Mulish';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
display: flex;
align-items: center;
color: #757575;
margin: 0 0 5px 0;
}

.header-subtitle {
margin: 0 0 30px 0;
}

.vitamui-mat-select {
width: 70%;
}

.icon-close {
text-align: right;
float: right;
margin: 18px 0 0 0;
}

.icon-close:hover {
cursor: pointer;
}

vitamui-common-progress-bar {
display: inline-block;
width: 95%;
}
2 changes: 1 addition & 1 deletion ...al-param-profile/external-param-profile-create/external-param-profile-create.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import { ExternalParamProfileValidators } from '../external-param-profile.valida
@Component({
selector: 'app-external-param-profile-create',
templateUrl: './external-param-profile-create.component.html',
styleUrls: ['./external-param-profile-create.component.css'],
styleUrls: ['./external-param-profile-create.component.scss'],
})
export class ExternalParamProfileCreateComponent implements OnInit, OnDestroy {
externalParamProfileForm: FormGroup;
Expand Down
2 changes: 1 addition & 1 deletion ...aram-profile/external-param-profile-detail/information-tab/information-tab.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
</div>
<div class="row">
<div class="col-12">
<mat-form-field class="vitamui-mat-select">
<mat-form-field class="vitamui-mat-select w-100">
<mat-select
formControlName="accessContract"
placeholder="{{ 'EXTERNAL_PARAM_PROFILE.SELECT_ACCESSCONTRACT' | translate }}"
Expand Down
Empty file added ...aram-profile/external-param-profile-detail/information-tab/information-tab.component.scss
View file
Empty file.
4 changes: 3 additions & 1 deletion ...-param-profile/external-param-profile-detail/information-tab/information-tab.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,16 @@ import { ExternalParamProfileValidators } from '../../external-param-profile.val

@Component({
selector: 'app-information-tab',
templateUrl: './information-tab.component.html'
templateUrl: './information-tab.component.html',
styleUrls: ['./information-tab.component.scss'],
})
export class InformationTabComponent implements OnDestroy, OnInit, OnChanges {
constructor(
private formBuilder: FormBuilder,
private externalParamProfileService: ExternalParamProfileService,
private externalParamProfileValidators: ExternalParamProfileValidators
) {}

form: FormGroup;
permissionForm: FormGroup;
groupsCount: boolean;
Expand Down

0 comments on commit 7117de0

Please sign in to comment.