Merge pull request #68 from ducktordanny/fix/minor-style-and-wording-…

…fixes

Fix: Minor style and wording fixes

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 > All notable changes to this project will be documented in this file.
 
+## [0.7.1] - 2022-11-06
+
+- Use select instead of inputs in transportation problem tabs
+- Fix assignment problem page styles
+- Fix spelling on the home page & and add new example
+- Fix white background at the top in Safari browsers
+
 ## [0.7.0] - 2022-10-30
 
 - Add second phase support for transportation problem on API and UI side

apps/frontend/src/app/pages/assignment-problem/assignment-problem.style.scss

@@ -1,7 +1,31 @@
 @import 'libs/shared/styles/colors';
 
-form {
- padding: 16px env(safe-area-inset-right) 16px 16px;
+:host {
+ .content-wrapper {
+ padding: 8px calc(env(safe-area-inset-right) + 8px) 8px 8px;
+ }
+
+ section {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+
+ article {
+ display: flex;
+ flex-direction: column;
+ }
+
+ article.assignment-table-wrapper {
+ display: grid;
+ padding: 8px;
+ overflow-x: auto;
+ }
+ }
+
+ mat-form-field {
+ margin: 8px;
+ }
 
  mat-hint {
  display: block;
@@ -13,20 +37,17 @@ form {
  }
  }
 
- .assignment-table-wrapper {
- padding: 8px 0;
- overflow-y: auto;
+ button[type='submit'] {
+ margin: 8px;
  }
-}
-
-button[type='submit'] {
- margin: 8px 16px 0 0;
-}
 
-.wrapper {
- padding-bottom: 16px;
-}
+ .wrapper {
+ display: flex;
+ justify-content: center;
+ padding: 8px;
+ }
 
-.result-table {
- padding: 8px;
+ .result-table {
+ padding: 8px 0;
+ }
 }

apps/frontend/src/app/pages/assignment-problem/assignment-problem.template.html

@@ -1,4 +1,4 @@
-<form>
+<div class="content-wrapper">
  <div class="wrapper">
  <info-card
  type="warning"
@@ -8,49 +8,55 @@
  {{'ASSIGNMENT_PROBLEM.PAGE_INFO.CONTENT' | translate}}
  </info-card>
  </div>
- <mat-form-field appearance="outline">
- <mat-label
- >{{ 'ASSIGNMENT_PROBLEM.TABLE_SIZE_SELECT' | translate }}</mat-label
- >
- <mat-select [value]="6" #tableSize>
- <mat-option [value]="3">3</mat-option>
- <mat-option [value]="4">4</mat-option>
- <mat-option [value]="5">5</mat-option>
- <mat-option [value]="6">6</mat-option>
- </mat-select>
- </mat-form-field>
- <div class="assignment-table-wrapper">
- <opres-input-table
- key="assignment"
- [rows]="tableSize.value"
- [columns]="tableSize.value"
- [tableSource]="mockedAssignment"
- (tableChange)="onTableChange($event)"
- ></opres-input-table>
+ <form>
+ <section>
+ <mat-form-field appearance="outline">
+ <mat-label
+ >{{ 'ASSIGNMENT_PROBLEM.TABLE_SIZE_SELECT' | translate }}</mat-label
+ >
+ <mat-select [value]="6" #tableSize>
+ <mat-option [value]="3">3</mat-option>
+ <mat-option [value]="4">4</mat-option>
+ <mat-option [value]="5">5</mat-option>
+ <mat-option [value]="6">6</mat-option>
+ </mat-select>
+ </mat-form-field>
+ <article class="assignment-table-wrapper">
+ <opres-input-table
+ key="assignment"
+ [rows]="tableSize.value"
+ [columns]="tableSize.value"
+ [tableSource]="mockedAssignment"
+ (tableChange)="onTableChange($event)"
+ ></opres-input-table>
+ </article>
+ </section>
+ <section>
+ <button
+ mat-flat-button
+ color="primary"
+ type="submit"
+ (click)="onCalculate($event)"
+ >
+ {{ 'CALCULATE_BUTTON' | translate }}
+ </button>
+ <button
+ mat-flat-button
+ color="primary"
+ type="button"
+ (click)="onAssignmentTableClear()"
+ >
+ {{ 'TABLE_CLEAR_BUTTON' | translate }}
+ </button>
+ </section>
+ </form>
+ <div class="result-table" *ngIf="{result: result$ | async} as sub">
+ <p *ngIf="sub?.result?.length">
+ {{'ASSIGNMENT_PROBLEM.RESULT_INFO' | translate}}
+ </p>
+ <opres-table
+ *ngIf="sub?.result?.length"
+ [tableSource]="sub.result || []"
+ ></opres-table>
  </div>
- <button
- mat-flat-button
- color="primary"
- type="submit"
- (click)="onCalculate($event)"
- >
- {{ 'CALCULATE_BUTTON' | translate }}
- </button>
- <button
- mat-flat-button
- color="primary"
- type="button"
- (click)="onAssignmentTableClear()"
- >
- {{ 'TABLE_CLEAR_BUTTON' | translate }}
- </button>
-</form>
-<div class="result-table" *ngIf="{result: result$ | async} as sub">
- <p *ngIf="sub?.result?.length">
- {{'ASSIGNMENT_PROBLEM.RESULT_INFO' | translate}}
- </p>
- <opres-table
- *ngIf="sub?.result?.length"
- [tableSource]="sub.result || []"
- ></opres-table>
 </div>

apps/frontend/src/app/pages/home/home.template.html

@@ -30,15 +30,25 @@ <h3>{{'HOME.HELPERS_LIST.TRANSPORTATION_PR.ALL' | translate}}</h3>
  <img
  class="mat-elevation-z12 sample-img-right"
  src="../../../assets/home/transport-problem/all-tab.example.png"
- alt="Transportation page example"
+ alt="Transportation page all tab example"
+ />
+ </section>
+ <section>
+ <h3>
+ {{'HOME.HELPERS_LIST.TRANSPORTATION_PR.SECOND_PHASE' | translate}}
+ </h3>
+ <img
+ class="mat-elevation-z12 sample-img-left"
+ src="../../../assets/home/transport-problem/second-phase-tab.example.png"
+ alt="Transportation page second phase tab example"
  />
  </section>
  <section>
  <h3>{{'HOME.HELPERS_LIST.TRANSPORTATION_PR.EPSILON' | translate}}</h3>
  <img
  class="mat-elevation-z12 sample-img-left"
  src="../../../assets/home/transport-problem/epsilon-tab.example.png"
- alt="Transportation page example"
+ alt="Transportation page epsilon tab example"
  />
  </section>
  </div>

apps/frontend/src/app/pages/transport-problem/+first-phase-result-input/first-phase-result-input.template.html

@@ -12,29 +12,37 @@
  >{{'TRANSPORTATION_PROBLEM.COLUMNS_SELECT' |
  translate}}</mat-label
  >
- <input
- matInput
- type="number"
- min="3"
- max="8"
- formControlName="shops"
+ <mat-select
+ matNativeControl
+ required
  data-test-id="number-of-shops-input"
- [defaultValue]="4"
- />
+ formControlName="shops"
+ >
+ <mat-option [value]="3">3</mat-option>
+ <mat-option [value]="4">4</mat-option>
+ <mat-option [value]="5">5</mat-option>
+ <mat-option [value]="6">6</mat-option>
+ <mat-option [value]="7">7</mat-option>
+ <mat-option [value]="8">8</mat-option>
+ </mat-select>
  </mat-form-field>
  <mat-form-field appearance="outline">
  <mat-label
  >{{'TRANSPORTATION_PROBLEM.ROWS_SELECT' | translate}}</mat-label
  >
- <input
- matInput
- type="number"
- min="3"
- max="8"
- formControlName="storages"
+ <mat-select
+ matNativeControl
+ required
  data-test-id="number-of-storages-input"
- [defaultValue]="4"
- />
+ formControlName="storages"
+ >
+ <mat-option [value]="3">3</mat-option>
+ <mat-option [value]="4">4</mat-option>
+ <mat-option [value]="5">5</mat-option>
+ <mat-option [value]="6">6</mat-option>
+ <mat-option [value]="7">7</mat-option>
+ <mat-option [value]="8">8</mat-option>
+ </mat-select>
  </mat-form-field>
  </article>
  <opres-input-table

apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.component.spec.ts

@@ -3,7 +3,6 @@ import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {HttpClientModule} from '@angular/common/http';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatButtonHarness} from '@angular/material/button/testing';
-import {MatInputHarness} from '@angular/material/input/testing';
 import {MatSelectHarness} from '@angular/material/select/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -57,23 +56,29 @@ describe('AllTabComponent', () => {
  });
 
  it('should change number of shops', async () => {
- const input = await loader.getHarness(
- MatInputHarness.with({
+ const shopSelect = await loader.getHarness(
+ MatSelectHarness.with({
  selector: '[data-test-id="number-of-shops-input"]',
  }),
  );
- await input.setValue('3');
- expect(component.formGroup.get('shops')?.value).toEqual(3);
+ await shopSelect.open();
+ const storageSizes = await shopSelect.getOptions();
+ expect(storageSizes.length).toEqual(6);
+ expect(await storageSizes[0].getText()).toEqual('3');
+ expect(await storageSizes[5].getText()).toEqual('8');
  });
 
  it('should change number of storages', async () => {
- const input = await loader.getHarness(
- MatInputHarness.with({
+ const storageSelect = await loader.getHarness(
+ MatSelectHarness.with({
  selector: '[data-test-id="number-of-storages-input"]',
  }),
  );
- await input.setValue('3');
- expect(component.formGroup.get('storages')?.value).toEqual(3);
+ await storageSelect.open();
+ const storageSizes = await storageSelect.getOptions();
+ expect(storageSizes.length).toEqual(6);
+ expect(await storageSizes[0].getText()).toEqual('3');
+ expect(await storageSizes[5].getText()).toEqual('8');
  });
 
  it('should check method options', async () => {

apps/frontend/src/app/pages/transport-problem/+tabs/all-tab/all.tab.template.html

@@ -15,29 +15,37 @@
  <mat-label
  >{{'TRANSPORTATION_PROBLEM.COLUMNS_SELECT' | translate}}</mat-label
  >
- <input
- matInput
- type="number"
- min="3"
- max="8"
- formControlName="shops"
+ <mat-select
+ matNativeControl
+ required
  data-test-id="number-of-shops-input"
- [defaultValue]="4"
- />
+ formControlName="shops"
+ >
+ <mat-option [value]="3">3</mat-option>
+ <mat-option [value]="4">4</mat-option>
+ <mat-option [value]="5">5</mat-option>
+ <mat-option [value]="6">6</mat-option>
+ <mat-option [value]="7">7</mat-option>
+ <mat-option [value]="8">8</mat-option>
+ </mat-select>
  </mat-form-field>
  <mat-form-field appearance="outline">
  <mat-label
  >{{'TRANSPORTATION_PROBLEM.ROWS_SELECT' | translate}}</mat-label
  >
- <input
- matInput
- type="number"
- min="3"
- max="8"
- formControlName="storages"
+ <mat-select
+ matNativeControl
+ required
  data-test-id="number-of-storages-input"
- [defaultValue]="4"
- />
+ formControlName="storages"
+ >
+ <mat-option [value]="3">3</mat-option>
+ <mat-option [value]="4">4</mat-option>
+ <mat-option [value]="5">5</mat-option>
+ <mat-option [value]="6">6</mat-option>
+ <mat-option [value]="7">7</mat-option>
+ <mat-option [value]="8">8</mat-option>
+ </mat-select>
  </mat-form-field>
  <mat-form-field appearance="outline">
  <mat-label

apps/frontend/src/app/pages/transport-problem/+tabs/epsilon-tab/epsilon.tab.component.ts

@@ -16,7 +16,7 @@ import {
 @Component({
  selector: 'epsilon-tab',
  templateUrl: './epsilon.tab.template.html',
- styleUrls: ['../tabs.style.scss', './epsilon.tab.style.scss'],
+ styleUrls: ['../tabs.style.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EpsilonTabComponent implements OnDestroy {

apps/frontend/src/assets/i18n/en.json

@@ -27,15 +27,16 @@
  "HELPERS_LIST": {
  "TRANSPORTATION_PR": {
  "TITLE": "Transportation problem",
- "ALL": "Need all steps?",
- "EPSILON": "If only the epsilon is needed"
+ "ALL": "Need both first and second phase steps?",
+ "EPSILON": "If only the epsilon is needed",
+ "SECOND_PHASE": "If only the second phase is needed"
  },
  "ASSIGNMENT_PR": "Assignment problem",
  "OTHERS_SOON": "And more coming soon..."
  },
  "FEATURE_LIST_TITLE": "Other smaller features",
  "FEATURE_LIST": {
- "LANGUAGES": "You can choose between english & hungarian",
+ "LANGUAGES": "You can choose between English & Hungarian",
  "THEMES": "You can set your preferred theme"
  },
  "SUPPORT": {