-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add new mobile layout for inbox * Clean up CSS
- Loading branch information
Daniel Haselhan
committed
Oct 4, 2023
1 parent
6a1d96d
commit 60402c0
Showing
24 changed files
with
261 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 0 additions & 31 deletions
31
portal-frontend/src/app/features/home/application-list/application-list.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +0,0 @@ | ||
| @use '../../../../styles/functions' as *; | ||
| @use '../../../../styles/colors'; | ||
|
|
||
| .label { | ||
| display: inline-block; | ||
| padding: rem(4) rem(16); | ||
| border-radius: rem(16); | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .table-wrapper { | ||
| overflow-x: auto; | ||
|
|
||
| .table-container { | ||
| display: table; | ||
| width: 100%; | ||
|
|
||
| table { | ||
| width: 100%; | ||
| } | ||
|
|
||
| ::ng-deep .mat-table { | ||
| ::ng-deep .mat-cell, | ||
| ::ng-deep .mat-header-cell, | ||
| ::ng-deep .mat-row, | ||
| ::ng-deep .mat-header-row { | ||
| min-width: rem(150); | ||
| } | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
portal-frontend/src/app/features/home/inbox-list/inbox-list.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <div class="result-list" *ngIf="totalCount > 0"> | ||
| <div | ||
| *ngFor="let result of _items" | ||
| [routerLink]="result.routerLink" | ||
| class="result" | ||
| [ngClass]="{ | ||
| hoverable: result.routerLink | ||
| }" | ||
| > | ||
| <div class="subheading2">{{ result.fileNumber }} - {{ result.applicant ?? '(Unknown)' }}</div> | ||
| <div>Created: {{ result.createdAt | momentFormat }}</div> | ||
| <div [title]="result.type">{{ result.type }}</div> | ||
| <div | ||
| *ngIf="result.status" | ||
| class="label" | ||
| [style]="{ 'background-color': result.status.portalBackgroundColor, color: result.status.portalColor }" | ||
| > | ||
| {{ result.status.label }} | ||
| </div> | ||
| <div>Last Updated: {{ result.lastStatusUpdate | momentFormat }}</div> | ||
| </div> | ||
| </div> | ||
| <div *ngIf="totalCount !== 0"> | ||
| <div class="center">Showing results 1-{{ visibleCount }} of {{ totalCount }}</div> | ||
| <div class="center"> | ||
| <a *ngIf="visibleCount < totalCount" (click)="onLoadMore()"> View more results </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="no-data" *ngIf="totalCount === 0"> | ||
| <div><b>No applications found.</b></div> | ||
| <div>Please adjust search criteria and try again.</div> | ||
| </div> |
35 changes: 35 additions & 0 deletions
35
portal-frontend/src/app/features/home/inbox-list/inbox-list.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| @use '../../../../styles/functions' as *; | ||
| @use '../../../../styles/colors'; | ||
|
|
||
| .result-list { | ||
| margin-top: rem(16); | ||
| } | ||
|
|
||
| .result { | ||
| border-radius: rem(4); | ||
| border: 2px solid var(--portal-grey-light, #efefef); | ||
| margin: rem(4) rem(4) rem(20); //BOX SHADOWS | ||
| padding: rem(12) rem(8); | ||
| font-size: rem(14) !important; | ||
|
|
||
| div { | ||
| margin: rem(4); | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| .subheading2 { | ||
| margin-bottom: rem(8) !important; | ||
| } | ||
|
|
||
| &.hoverable { | ||
| border-color: transparent; | ||
| box-shadow: 0 rem(2) rem(6) 0 rgba(0, 0, 0, 0.2); | ||
| } | ||
|
|
||
| &.hoverable:hover { | ||
| cursor: pointer; | ||
| background-color: colors.$grey-light; | ||
| } | ||
| } |
33 changes: 33 additions & 0 deletions
33
portal-frontend/src/app/features/home/inbox-list/inbox-list.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { Router } from '@angular/router'; | ||
| import { createMock, DeepMocked } from '@golevelup/ts-jest'; | ||
|
|
||
| import { InboxListComponent } from './inbox-list.component'; | ||
|
|
||
| describe('InboxListComponent', () => { | ||
| let component: InboxListComponent; | ||
| let fixture: ComponentFixture<InboxListComponent>; | ||
| let mockRouter: DeepMocked<Router>; | ||
|
|
||
| beforeEach(async () => { | ||
| mockRouter = createMock(); | ||
|
|
||
| await TestBed.configureTestingModule({ | ||
| declarations: [InboxListComponent], | ||
| providers: [ | ||
| { | ||
| provide: Router, | ||
| useValue: mockRouter, | ||
| }, | ||
| ], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(InboxListComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
54 changes: 54 additions & 0 deletions
54
portal-frontend/src/app/features/home/inbox-list/inbox-list.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core'; | ||
| import { Router } from '@angular/router'; | ||
| import { Subject } from 'rxjs'; | ||
| import { BaseCodeDto } from '../../../shared/dto/base.dto'; | ||
|
|
||
| export interface InboxListItem { | ||
| applicant?: string; | ||
| fileNumber: string; | ||
| lastStatusUpdate: number; | ||
| createdAt: number; | ||
| status?: BaseCodeDto & { | ||
| portalBackgroundColor: string; | ||
| portalColor: string; | ||
| }; | ||
| type: string; | ||
| routerLink?: string; | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'app-inbox-list', | ||
| templateUrl: './inbox-list.component.html', | ||
| styleUrls: ['./inbox-list.component.scss'], | ||
| }) | ||
| export class InboxListComponent implements OnDestroy { | ||
| $destroy = new Subject<void>(); | ||
|
|
||
| @Input() totalCount = 0; | ||
|
|
||
| _items: InboxListItem[] = []; | ||
| @Input() set items(items: InboxListItem[]) { | ||
| this._items = items; | ||
| this.visibleCount = items.length; | ||
| this.totalCount = items.length; | ||
| } | ||
|
|
||
| @Output() loadMore = new EventEmitter<void>(); | ||
| @Output() selectRecord = new EventEmitter<string>(); | ||
| visibleCount = 0; | ||
|
|
||
| constructor(private router: Router) {} | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.$destroy.next(); | ||
| this.$destroy.complete(); | ||
| } | ||
|
|
||
| async onSelectRecord(record: InboxListItem) { | ||
| this.selectRecord.emit(record.fileNumber); | ||
| } | ||
|
|
||
| onLoadMore() { | ||
| this.loadMore.emit(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.