Skip to content

Commit

Permalink
refactor kr-type-form
Browse files Browse the repository at this point in the history
  • Loading branch information
@kcinay055679
kcinay055679 committed Oct 29, 2024
1 parent b4ab557 commit eb6ef5a
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 161 deletions.
6 changes: 1 addition & 5 deletions frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@
</ng-container>

<ng-container content>
<app-key-result-form
class="keyresult-form"
[keyResultForm]="keyResultForm"
[keyResult]="data.keyResult"
></app-key-result-form>
<app-key-result-form [keyResultForm]="keyResultForm" [keyResult]="data.keyResult"></app-key-result-form>
</ng-container>

<ng-container actions>
Expand Down
6 changes: 0 additions & 6 deletions frontend/src/app/components/keyresult-dialog/keyresult-dialog.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +0,0 @@
//@media only screen and (max-width: 400px) {
// .mat-mdc-dialog-actions .mat-button-base + .mat-button-base,
// .mat-mdc-dialog-actions .mat-mdc-button-base + .mat-mdc-button-base {
// margin-left: 0;
// }
//}
201 changes: 91 additions & 110 deletions frontend/src/app/components/keyresult-type/keyresult-type.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div>
<div class="d-flex">
<div class="container-fluid">
<div class="row ms-0">
<div
[style.cursor]="typeChangeAllowed ? 'pointer' : 'default'"
[ngClass]="{ active: isMetric, 'non-active': !isMetric }"
[attr.data-testId]="'metricTab'"
class="metric tab-title tabfocus"
class="tab-title"
(click)="switchKeyResultType('metric')"
(keydown.enter)="switchKeyResultType('metric')"
tabindex="0"
Expand All @@ -15,125 +15,106 @@
[style.cursor]="typeChangeAllowed ? 'pointer' : 'default'"
[ngClass]="{ active: !isMetric, 'non-active': isMetric }"
[attr.data-testId]="'ordinalTab'"
class="ordinal tab-title tabfocus"
class="tab-title"
(click)="switchKeyResultType('ordinal')"
(keydown.enter)="switchKeyResultType('ordinal')"
tabindex="0"
>
Ordinal
</div>
<div class="buffer tab-title flex-fill"></div>
<div class="buffer col tab-title"></div>
</div>
</div>

<div *ngIf="isMetric; else ordinalBlock">
<form [formGroup]="keyResultForm" class="gap-1">
<div class="d-flex flex-column flex-wrap container p-0">
<div class="d-flex flex-row">
<div class="flex-fill">
<div class="input-alignments">
<div class="input-style gap-2">
<label class="text-black" for="unit">Einheit</label>
<select
class="unit-dropdown bg-white menu-option"
[ngClass]="formInputCheck(keyResultForm, 'unit')"
formControlName="unit"
id="unit"
[attr.data-testId]="'unit'"
>
<option *ngFor="let unit of Unit | keyvalue" value="{{ unit.value }}">
{{ "UNIT." + unit.value | translate }}
</option>
</select>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'unit')">
<span>{{ getErrorMessage("MUST_SELECT", "Einheit", null, null) }}</span>
</mat-error>
</div>

<div class="input-style gap-2">
<label class="text-black" for="baseline">Baseline</label>
<input
[attr.data-testId]="'baseline'"
class="metric-fields"
[ngClass]="formInputCheck(keyResultForm, 'baseline')"
formControlName="baseline"
id="baseline"
/>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'baseline')">
<span>{{ getErrorMessage("MUST_BE_NUMBER", "Baseline", null, null) }}</span>
</mat-error>
</div>
<form [formGroup]="keyResultForm" class="row">
<ng-container *ngIf="isMetric; else ordinalBlock">
<div class="kr-input-container">
<label class="text-black" for="unit">Einheit</label>
<select
class="unit-dropdown bg-white menu-option"
[ngClass]="formInputCheck(keyResultForm, 'unit')"
formControlName="unit"
id="unit"
[attr.data-testId]="'unit'"
>
<option *ngFor="let unit of Unit | keyvalue" value="{{ unit.value }}">
{{ "UNIT." + unit.value | translate }}
</option>
</select>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'unit')">
<span>{{ getErrorMessage("MUST_SELECT", "Einheit", null, null) }}</span>
</mat-error>
</div>

<div class="input-style gap-2">
<label class="text-black" for="stretchGoal">Stretch Goal</label>
<input
[attr.data-testId]="'stretchGoal'"
class="metric-fields"
[ngClass]="formInputCheck(keyResultForm, 'stretchGoal')"
formControlName="stretchGoal"
id="stretchGoal"
/>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchGoal')">
<span>{{ getErrorMessage("MUST_BE_NUMBER", "Stretch Goal", null, null) }}</span>
</mat-error>
</div>
</div>
</div>
<div class="kr-input-container">
<label class="text-black" for="baseline">Baseline</label>
<input
[attr.data-testId]="'baseline'"
class="metric-fields"
[ngClass]="formInputCheck(keyResultForm, 'baseline')"
formControlName="baseline"
id="baseline"
/>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'baseline')">
<span>{{ getErrorMessage("MUST_BE_NUMBER", "Baseline", null, null) }}</span>
</mat-error>
</div>
</div>
</form>
</div>

<ng-template #ordinalBlock>
<form [formGroup]="keyResultForm" class="gap-1">
<div class="d-flex flex-column flex-wrap container p-0">
<div class="d-flex flex-row">
<div class="flex-fill">
<div class="input-alignments">
<div class="input-style gap-2">
<label class="text-black" for="commitZone">Commit Zone</label>
<textarea
class="ordinal-input-fields"
[ngClass]="formInputCheck(keyResultForm, 'commitZone')"
formControlName="commitZone"
id="commitZone"
[attr.data-testId]="'commitZone'"
></textarea>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'commitZone')">
<span>{{ getErrorMessage("SIZE_BETWEEN", "Commit Zone", 1, 400) }}</span>
</mat-error>
</div>
<div class="kr-input-container">
<label class="text-black" for="stretchGoal">Stretch Goal</label>
<input
[attr.data-testId]="'stretchGoal'"
class="metric-fields"
[ngClass]="formInputCheck(keyResultForm, 'stretchGoal')"
formControlName="stretchGoal"
id="stretchGoal"
/>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchGoal')">
<span>{{ getErrorMessage("MUST_BE_NUMBER", "Stretch Goal", null, null) }}</span>
</mat-error>
</div>
</ng-container>
<ng-template #ordinalBlock>
<div class="kr-input-container">
<label class="text-black" for="commitZone">Commit Zone</label>
<textarea
class="ordinal-input-fields"
[ngClass]="formInputCheck(keyResultForm, 'commitZone')"
formControlName="commitZone"
id="commitZone"
[attr.data-testId]="'commitZone'"
></textarea>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'commitZone')">
<span>{{ getErrorMessage("SIZE_BETWEEN", "Commit Zone", 1, 400) }}</span>
</mat-error>
</div>

<div class="input-style gap-2">
<label class="text-black" for="targetZone">Target Zone</label>
<textarea
[attr.data-testId]="'targetZone'"
class="ordinal-input-fields"
[ngClass]="formInputCheck(keyResultForm, 'targetZone')"
formControlName="targetZone"
id="targetZone"
></textarea>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'targetZone')">
<span>{{ getErrorMessage("SIZE_BETWEEN", "Target Zone", 1, 400) }}</span>
</mat-error>
</div>
<div class="kr-input-container">
<label class="text-black" for="targetZone">Target Zone</label>
<textarea
[attr.data-testId]="'targetZone'"
class="ordinal-input-fields"
[ngClass]="formInputCheck(keyResultForm, 'targetZone')"
formControlName="targetZone"
id="targetZone"
></textarea>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'targetZone')">
<span>{{ getErrorMessage("SIZE_BETWEEN", "Target Zone", 1, 400) }}</span>
</mat-error>
</div>

<div class="input-style gap-2">
<label class="text-black" for="stretchZone">Stretch Goal</label>
<textarea
[attr.data-testId]="'stretchZone'"
class="ordinal-input-fields"
[ngClass]="formInputCheck(keyResultForm, 'stretchZone')"
formControlName="stretchZone"
id="stretchZone"
></textarea>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchZone')">
<span>{{ getErrorMessage("SIZE_BETWEEN", "Stretch Zone", 1, 400) }}</span>
</mat-error>
</div>
</div>
</div>
<div class="kr-input-container">
<label class="text-black" for="stretchZone">Stretch Goal</label>
<textarea
[attr.data-testId]="'stretchZone'"
class="ordinal-input-fields"
[ngClass]="formInputCheck(keyResultForm, 'stretchZone')"
formControlName="stretchZone"
id="stretchZone"
></textarea>
<mat-error *ngIf="hasFormFieldErrors(keyResultForm, 'stretchZone')">
<span>{{ getErrorMessage("SIZE_BETWEEN", "Stretch Zone", 1, 400) }}</span>
</mat-error>
</div>
</div>
</ng-template>
</form>
</ng-template>
</div>
47 changes: 9 additions & 38 deletions frontend/src/app/components/keyresult-type/keyresult-type.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import "custom_bootstrap";
.active {
border-left: #909090 1px solid;
border-top: #909090 1px solid;
Expand All @@ -17,30 +18,23 @@
display: flex;
justify-content: center;
align-items: center;
height: 39px;
margin-bottom: 16px;
@extend .py-2;
@extend .col-auto;
@extend .tab-focus;
}

.buffer {
border-bottom: #909090 1px solid;
}

.tabfocus {
.tab-focus {
outline: none;
&:focus-visible {
border-radius: 5px;
border: 2px solid #1a4e83;
}
}

.metric {
width: 87px;
}

.ordinal {
width: 75px;
}

.ordinal-input-fields {
height: 4.3rem;
padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
Expand All @@ -51,37 +45,14 @@
padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
}

.input-style {
width: 31%;
}

.unit-dropdown {
@extend .metric-fields;
border: solid 1px #909090;
cursor: pointer;
}

@media only screen and (min-width: 820px) {
.input-alignments {
display: flex;
justify-content: space-between;
}

.input-style {
margin-bottom: 0;
}
}

@media only screen and (max-width: 820px) {
.metric-fields {
width: 100%;
}

.ordinal-input-fields {
width: 100%;
}

.input-style {
width: auto;
}
.kr-input-container {
@extend .d-flex;
@extend .flex-column;
@extend .col-md-4;
}
6 changes: 4 additions & 2 deletions frontend/src/style/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,14 +352,16 @@ table.okr-table {
}

mat-dialog-content {
$dialog-header-height: 56px;
@extend .d-flex;
@extend .flex-column;
@extend .flex-wrap;
@extend .container-fluid;
max-height: none !important;
max-height: calc(
100vh - $top-bar-height - $dialog-action-buttons-div-height - $dialog-header-height - $dialog-content-padding-y
) !important;

@include media-breakpoint-down(sm) {
$dialog-header-height: 56px;
height: calc(
100vh - $top-bar-height - $dialog-action-buttons-div-height - $dialog-header-height - $dialog-content-padding-y
) !important;
Expand Down

0 comments on commit eb6ef5a

Please sign in to comment.