vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: run prettier on all file to avoid prettier issue inside PR

Browse Source
This commit is contained in:
thomas
2024-01-07 21:41:36 +01:00
parent 3bc793f6b3
commit c8b7c5d4a6
195 changed files with 575 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/testing/todos-list/cypress.config.ts
View File

@@ -1,5 +1,5 @@
import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
import { defineConfig } from 'cypress';
export default defineConfig({
component: nxComponentTestingPreset(__filename),

2
apps/testing/todos-list/cypress/support/component-index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

4
apps/testing/todos-list/src/app/app.component.ts
View File

@@ -5,6 +5,8 @@ import { RouterOutlet } from '@angular/router';
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
template: `<router-outlet></router-outlet>`,
template: `
<router-outlet></router-outlet>
`,
})
export class AppComponent {}

2
apps/testing/todos-list/src/app/backend.service.ts
View File

@@ -101,7 +101,7 @@ export class BackendService {
const updatedTicket = { ...foundTicket, ...updates };
this.storedTickets = this.storedTickets.map((t) =>
t.id === ticketId ? updatedTicket : t
t.id === ticketId ? updatedTicket : t,
);
return of(updatedTicket).pipe(delay(randomDelay()));

16
apps/testing/todos-list/src/app/detail/detail.component.ts
View File

@@ -19,22 +19,28 @@ import { DetailStore } from './detail.store';
LetDirective,
],
template: `
<h2 class="text-xl mb-2">Ticket Detail:</h2>
<h2 class="mb-2 text-xl">Ticket Detail:</h2>
<ng-container *ngrxLet="vm$ as vm">
<mat-progress-bar
mode="query"
*ngIf="vm.loading"
class="mt-5"></mat-progress-bar>
<section *ngIf="vm.ticket as ticket" class="flex flex-col gap-4">
<div><span class="font-bold">Ticket:</span> {{ ticket.id }}</div>
<div>
<span class="font-bold">Description:</span> {{ ticket.description }}
<span class="font-bold">Ticket:</span>
{{ ticket.id }}
</div>
<div>
<span class="font-bold">AssigneeId:</span> {{ ticket.assigneeId }}
<span class="font-bold">Description:</span>
{{ ticket.description }}
</div>
<div>
<span class="font-bold">Is done:</span> {{ ticket.completed }}
<span class="font-bold">AssigneeId:</span>
{{ ticket.assigneeId }}
</div>
<div>
<span class="font-bold">Is done:</span>
{{ ticket.completed }}
</div>
</section>
</ng-container>

17
apps/testing/todos-list/src/app/detail/detail.store.ts
View File

@@ -36,14 +36,17 @@ export class DetailStore
loading: this.loading$,
});
constructor(private backend: BackendService, private route: ActivatedRoute) {
constructor(
private backend: BackendService,
private route: ActivatedRoute,
) {
super(initialState);
}
readonly loadTicket = this.effect<void>(
pipe(
concatLatestFrom(() =>
this.route.params.pipe(map((p) => p[PARAM_TICKET_ID]))
this.route.params.pipe(map((p) => p[PARAM_TICKET_ID])),
),
tap(() => this.patchState({ loading: true, error: '' })),
mergeMap(([, id]) =>
@@ -54,11 +57,11 @@ export class DetailStore
loading: false,
ticket,
}),
(error: unknown) => this.patchState({ error })
)
)
)
)
(error: unknown) => this.patchState({ error }),
),
),
),
),
);
ngrxOnStateInit() {

7
apps/testing/todos-list/src/app/list/list.component.ts
View File

@@ -25,7 +25,7 @@ import { RowComponent } from './ui/row.component';
LetDirective,
],
template: `
<h2 class="text-xl mb-2">Tickets</h2>
<h2 class="mb-2 text-xl">Tickets</h2>
<mat-form-field appearance="fill">
<mat-label>Search</mat-label>
@@ -45,14 +45,13 @@ import { RowComponent } from './ui/row.component';
mode="query"
*ngIf="vm.loading"
class="mt-5"></mat-progress-bar>
<ul class="flex flex-col gap-4 max-w-3xl">
<ul class="flex max-w-3xl flex-col gap-4">
<app-row
*ngFor="let t of vm.tickets"
[ticket]="t"
[users]="vm.users"
(assign)="ticketStore.assignTicket($event)"
(closeTicket)="ticketStore.done($event)">
</app-row>
(closeTicket)="ticketStore.done($event)"></app-row>
</ul>
<footer class="text-red-500">
{{ vm.error }}

58
apps/testing/todos-list/src/app/list/ticket.store.ts
View File

@@ -47,7 +47,7 @@ export class TicketStore
users.find((user) => user.id === ticket.assigneeId)?.name ??
'unassigned',
}))
: tickets
: tickets,
);
readonly tickets$ = this.select(
@@ -55,8 +55,8 @@ export class TicketStore
this.search$,
(tickets, search) =>
tickets.filter((t) =>
t.description.toLowerCase().includes(search.toLowerCase())
)
t.description.toLowerCase().includes(search.toLowerCase()),
),
);
readonly vm$ = this.select(
@@ -66,7 +66,7 @@ export class TicketStore
loading: this.loading$,
error: this.error$,
},
{ debounce: true }
{ debounce: true },
);
readonly updateAssignee = this.updater((state, ticket: Ticket) => {
@@ -107,11 +107,11 @@ export class TicketStore
loading: false,
tickets,
}),
(error: unknown) => this.patchState({ error, loading: false })
)
)
)
)
(error: unknown) => this.patchState({ error, loading: false }),
),
),
),
),
);
readonly loadUsers = this.effect<void>(
@@ -125,11 +125,11 @@ export class TicketStore
loading: false,
users,
}),
(error: unknown) => this.patchState({ error, loading: false })
)
)
)
)
(error: unknown) => this.patchState({ error, loading: false }),
),
),
),
),
);
readonly addTicket = this.effect<string>(
@@ -143,11 +143,11 @@ export class TicketStore
loading: false,
tickets: [...state.tickets, newTicket],
})),
(error: unknown) => this.patchState({ error, loading: false })
)
)
)
)
(error: unknown) => this.patchState({ error, loading: false }),
),
),
),
),
);
readonly assignTicket = this.effect<{ userId: number; ticketId: number }>(
@@ -157,11 +157,11 @@ export class TicketStore
this.backend.assign(info.ticketId, Number(info.userId)).pipe(
tapResponse(
(newTicket) => this.updateAssignee(newTicket),
(error: unknown) => this.patchState({ error, loading: false })
)
)
)
)
(error: unknown) => this.patchState({ error, loading: false }),
),
),
),
),
);
readonly done = this.effect<number>(
@@ -171,10 +171,10 @@ export class TicketStore
this.backend.complete(ticketId, true).pipe(
tapResponse(
(newTicket) => this.updateAssignee(newTicket),
(error: unknown) => this.patchState({ error, loading: false })
)
)
)
)
(error: unknown) => this.patchState({ error, loading: false }),
),
),
),
),
);
}

45
apps/testing/todos-list/src/app/list/ui/add.component.ts
View File

@@ -20,27 +20,30 @@ import { MatInputModule } from '@angular/material/input';
MatButtonModule,
NgIf,
],
template: ` <form [formGroup]="form" #ngForm="ngForm" (ngSubmit)="submit()">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Description</mat-label>
<input
type="text"
matInput
formControlName="description"
placeholder="My new task" />
<mat-error *ngIf="form.controls.description.hasError('required')">
Description is <strong>required</strong>
</mat-error>
</mat-form-field>
<button
class="ml-4"
mat-flat-button
color="primary"
type="submit"
[disabled]="loading">
Add new Ticket
</button>
</form>`,
template: `
<form [formGroup]="form" #ngForm="ngForm" (ngSubmit)="submit()">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Description</mat-label>
<input
type="text"
matInput
formControlName="description"
placeholder="My new task" />
<mat-error *ngIf="form.controls.description.hasError('required')">
Description is
<strong>required</strong>
</mat-error>
</mat-form-field>
<button
class="ml-4"
mat-flat-button
color="primary"
type="submit"
[disabled]="loading">
Add new Ticket
</button>
</form>
`,
})
export class AddComponent {
@Input() loading = false;

26
apps/testing/todos-list/src/app/list/ui/row.component.ts
View File

@@ -22,30 +22,38 @@ import { Ticket, TicketUser, User } from '../../backend.service';
],
template: `
<li
class="flex-grow flex items-center gap-5 justify-between"
class="flex flex-grow items-center justify-between gap-5"
[class.bg-green-200]="ticket.completed">
<button [routerLink]="['/detail', ticket.id]" class="flex flex-col gap-2">
<div><span class="font-bold">Ticket:</span> {{ ticket.id }}</div>
<div>
<span class="font-bold">Description:</span> {{ ticket.description }}
<span class="font-bold">Ticket:</span>
{{ ticket.id }}
</div>
<div>
<span class="font-bold">Assignee:</span> {{ $any(ticket).assignee }}
<span class="font-bold">Description:</span>
{{ ticket.description }}
</div>
<div>
<span class="font-bold">Assignee:</span>
{{ $any(ticket).assignee }}
</div>
<div>
<span class="font-bold">Done:</span>
{{ ticket.completed }}
</div>
<div><span class="font-bold">Done:</span> {{ ticket.completed }}</div>
</button>
<div class="flex flex-col">
<form
[formGroup]="form"
#ngForm="ngForm"
(ngSubmit)="submit()"
class="flex justify-center items-center gap-4">
class="flex items-center justify-center gap-4">
<mat-form-field appearance="fill">
<mat-label>Assign to</mat-label>
<mat-select formControlName="assignee">
<mat-option *ngFor="let user of users" [value]="user.id">{{
user.name
}}</mat-option>
<mat-option *ngFor="let user of users" [value]="user.id">
{{ user.name }}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-flat-button color="primary" type="submit">Assign</button>

2
apps/testing/todos-list/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
apps/testing/todos-list/src/main.ts
View File

@@ -1,8 +1,8 @@
import { appConfig } from './app/app.config';
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
console.error(err),
);