Skip to content

Commit

Permalink
chore: code tidying
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrismclarke
chrismclarke committed Sep 14, 2023
1 parent fe3ff35 commit 9a069d4
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 264 deletions.
3 changes: 2 additions & 1 deletion apps/picsa-tools/option-tool/src/app/components/components.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ import { PicsaTranslateModule } from '@picsa/shared/modules';
// Local components
import { EditorComponent } from './editor/editor.component';
import { GenderInputComponent } from './editor/inputs/gender/gender-input';
import { InvestmentInputComponent } from './editor/inputs/investment/investment-input';
import { PerformanceInputComponent } from './editor/inputs/performance/performance-input';
import { OptionMaterialModule } from './material.module';

const Components = [EditorComponent, GenderInputComponent, PerformanceInputComponent];
const Components = [EditorComponent, GenderInputComponent, InvestmentInputComponent, PerformanceInputComponent];

@NgModule({
imports: [
Expand Down
107 changes: 19 additions & 88 deletions apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="dialog-content">
<div class="editor-container">
<button mat-mini-fab color="primary" (click)="submitForm()" class="closeButton">
<mat-icon>close</mat-icon>
</button>
Expand Down Expand Up @@ -65,8 +65,8 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>

<!-- 4. Benefits -->
<ng-template #benefitsInput>
<div style="margin-bottom: 1.5rem; padding: 2px; margin-top: 2rem">
<div *ngFor="let benefit of values.benefits; index as i">
<div class="entry-rows">
<div class="entry-row-item" *ngFor="let benefit of values.benefits; index as i">
<div style="display: flex; flex-direction: row; gap: 3px; padding-bottom: 3px">
<input [(ngModel)]="benefit.benefit" class="form-control" />
<option-gender-input [(ngModel)]="values.benefits[i].beneficiary"></option-gender-input>
Expand All @@ -75,9 +75,10 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>
</button>
</div>
</div>
<!-- Only enable adding more benefits when previous are validated -->
<!-- Only enable adding more benefits when previous are validated
TODO would be easier to manage all validation if using formgroups -->
<button
style="float: left; margin-top: 7px"
style="margin-bottom: 16px; margin-top: -16px"
(click)="handleMoreBenefits()"
mat-button
[disabled]="
Expand All @@ -89,6 +90,7 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>
+ {{ 'Add benefit' | translate }}
</button>
</div>

<ng-container
[ngTemplateOutlet]="stepButtons"
[ngTemplateOutletContext]="{ nextDisabled: values.benefits.length === 0 }"
Expand All @@ -97,11 +99,11 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>

<!-- 5. Performance -->
<ng-template #performanceInput>
<div class="performance-container">
<div class="performence-item-container" *ngFor="let condition of performanceConditions">
<div class="performenceItem">
<div class="performenceHeading">{{ condition.label | translate }}</div>
<div class="rainIconContainer">
<div class="entry-rows">
<div class="entry-row-item" *ngFor="let condition of performanceConditions">
<div class="icon-with-heading">
<div class="icon-heading">{{ condition.label | translate }}</div>
<div class="icon-container">
<mat-icon [svgIcon]="condition.svgIcon"></mat-icon>
</div>
</div>
Expand All @@ -119,87 +121,16 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>

<!-- 6. Investment -->
<ng-template #investmentInput>
<div class="investmentsContentContainer">
<!-- <div class="performenceItem">
<div class="performenceHeading">
{{ 'Money' | translate }}
</div>
<mat-icon style="color: #8a2644; font-size: 20px">payments</mat-icon>
<div class="emoji-wrapper">
<div class="emojiTextContainer">
<mat-icon
[ngStyle]="{ opacity: values.investment.money !== 'low' ? '0.3' : '1' }"
svgIcon="picsa_options_thumbs_up"
class="emoji_size"
></mat-icon>
<div class="guideText">{{ 'Low' | translate }}</div>
</div>
<div class="emojiTextContainer">
<mat-icon
[ngStyle]="{ opacity: values.investment.money !== 'mid' ? '0.3' : '1' }"
svgIcon="picsa_options_fist_bump"
class="emoji_size"
></mat-icon>
<div class="guideText">{{ 'Mid' | translate }}</div>
</div>
<div class="emojiTextContainer">
<mat-icon
[ngStyle]="{ opacity: values.investment.money !== 'high' ? '0.3' : '1' }"
svgIcon="picsa_options_thumbs_down"
class="emoji_size"
></mat-icon>
<div class="guideText">{{ 'High' | translate }}</div>
<div class="entry-rows">
<div *ngFor="let investment of investmentTypes" class="entry-row-item">
<div class="icon-with-heading">
<div class="icon-heading">{{ investment.label | translate }}</div>
<div class="icon-container">
<mat-icon style="color: #8a2644; font-size: 36px">{{ investment.matIcon }}</mat-icon>
</div>
</div>
<input
type="range"
min="0"
max="2"
[ngModel]="values.investment.money === 'low' ? 0 : values.investment.money === 'mid' ? 1 : 2"
(input)="updateInvestmentEffort($event, 'money')"
class="guideText"
/>
<option-investment-input [(ngModel)]="values.investment[investment.id]"></option-investment-input>
</div>
<div class="performenceItem">
<div style="font-weight: 700">
{{ 'Time' | translate }}
</div>
<mat-icon style="color: #8a2644; font-size: 20px">schedule</mat-icon>
<div class="emoji-wrapper">
<div class="emojiTextContainer">
<mat-icon
[ngStyle]="{ opacity: values.investment.time !== 'low' ? '0.3' : '1' }"
svgIcon="picsa_options_thumbs_up"
class="emoji_size"
></mat-icon>
<div class="guideText">{{ 'Low' | translate }}</div>
</div>
<div class="emojiTextContainer">
<mat-icon
[ngStyle]="{ opacity: values.investment.time !== 'mid' ? '0.3' : '1' }"
svgIcon="picsa_options_fist_bump"
class="emoji_size"
></mat-icon>
<div class="guideText">{{ 'Mid' | translate }}</div>
</div>
<div class="emojiTextContainer">
<mat-icon
[ngStyle]="{ opacity: values.investment.time !== 'high' ? '0.3' : '1' }"
svgIcon="picsa_options_thumbs_down"
class="emoji_size"
></mat-icon>
<div class="guideText">{{ 'High' | translate }}</div>
</div>
</div>
<input
type="range"
min="0"
max="2"
[ngModel]="values.investment.time === 'low' ? 0 : values.investment.time === 'mid' ? 1 : 2"
(input)="updateInvestmentEffort($event, 'time')"
class="guideText"
/>
</div> -->
</div>
<ng-container
[ngTemplateOutlet]="stepButtons"
Expand Down
51 changes: 24 additions & 27 deletions apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
:host {
display: block;
}
.editor-container {
position: relative;
padding-bottom: 2rem;
}
// ***************************************************************************************
// Stepper - General
// ***************************************************************************************
Expand Down Expand Up @@ -97,16 +101,18 @@ h3.StepTitle {
}

// ***************************************************************************************
// Steps - Performance
// Steps - Multiple row entries
// Display as rows with light border, and content in a row
//
// ***************************************************************************************
$rain-icon-size: 64px;
.performance-container {

.entry-rows {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.performence-item-container {
.entry-row-item {
display: flex;
gap: 1rem;
width: 100%;
Expand All @@ -118,17 +124,20 @@ $rain-icon-size: 64px;
border-bottom: none;
}
}
.performenceItem {

// Rows also use text and icon at start of the row to help identifiy input requirements
$entry-icon-size: 64px;
.icon-with-heading {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.performenceHeading {
.icon-heading {
font-weight: 700;
text-align: center;
width: calc($rain-icon-size + 16px);
width: calc($entry-icon-size + 16px);
background: var(--color-primary);
margin-bottom: -10px;
padding: 4px;
Expand All @@ -137,42 +146,30 @@ $rain-icon-size: 64px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.rainIconContainer {
width: calc($rain-icon-size + 8px - 2px); // include padding and border in width
.icon-container {
width: calc($entry-icon-size + 8px - 2px); // include padding and border in width
text-align: center;
background-color: #ffffff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 8px;
// Styles need to accomodate slightly different variations depending if regular mat-icon or svgIcon used
mat-icon {
width: calc($rain-icon-size);
height: calc($rain-icon-size);
width: 100%;
height: 100%;
max-height: $entry-icon-size;
max-width: $entry-icon-size;
}
border: 1px solid var(--color-primary);
}

// ***************************************************************************************
// Steps - To sort
// Inputs - General
// ***************************************************************************************
.mat-mdc-form-field {
margin-top: 16px;
}

.dialog-content {
position: relative;
padding-bottom: 2rem;
}

.investmentsContentContainer {
display: flex;
justify-content: space-evenly;
gap: 1rem;
width: 100%;
flex-direction: row;
margin-bottom: 1.5rem;
margin-top: 2rem;
}

label {
font-size: 14px;
font-weight: 400;
Expand Down
Loading

0 comments on commit 9a069d4

Please sign in to comment.