Commit 29c2ccac authored by Smejky338's avatar Smejky338
Browse files

feat: add validation of inputs and buttons disabling if invalid

thanks for help Tomas Bilos @tbilos
parent 0112af7b
Pipeline #142480 waiting for manual action with stage
......@@ -2,34 +2,34 @@
Error loading create page: {{ errorMessage }}
</div>
<div *ngIf="confirmMessage">Assignment has been created.</div>
<div *ngIf="assignment && agents && missions && state === requestState.SUCCESS">
<div>Agent Assignment record</div>
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [(ngModel)]="assignment.start" [matDatepicker]="picker">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Duration (days):</mat-label>
<input matInput [(ngModel)]="assignment.durationInDays" />
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Agent:</mat-label>
<div *ngIf="agents && missions && state === requestState.SUCCESS">
<form [formGroup]="edit">
<mat-toolbar>Agent Assignment record</mat-toolbar>
<mat-form-field appearance="fill">
<mat-label>Start date:</mat-label>
<input matInput type="Date" formControlName="start"/>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Duration (days):</mat-label>
<input matInput formControlName="durationInDays" type="number" min="0"/>
</mat-form-field>
</form>
<div>
<mat-form-field appearance="fill">
<mat-label>Agent:</mat-label>
<mat-select id="select-agent" [(ngModel)]="assignment.agentId" class="bx--text-input" required name="actionSelection" >
<mat-option *ngFor="let agent of agents" [value]="agent.id">{{agent.name}}</mat-option>
</mat-select>
<mat-option *ngFor="let agent of agents" [value]="agent.id" >{{agent.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Mission:</mat-label>
<mat-select id="select-mission" [(ngModel)]="assignment.missionId" class="bx--text-input" required name="actionSelection" >
<mat-option *ngFor="let mission of missions" [value]="mission.id">{{mission.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Mission:</mat-label>
<mat-select id="select-mission" [(ngModel)]="assignment.missionId" class="bx--text-input" required name="actionSelection" >
<mat-option *ngFor="let mission of missions" [value]="mission.id">{{mission.name}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div *ngIf="assignment && agents && missions && state === requestState.SUCCESS">
<div *ngIf="agents && missions && state === requestState.SUCCESS">
<mat-form-field appearance="fill">
<mat-label>Agent's report:</mat-label>
<input matInput [(ngModel)]="assignment.report" />
......@@ -37,6 +37,6 @@
</div>
<div>
<button mat-button (click)="createAssignment()">Create</button>
<button mat-button (click)="createAssignment()" disabled="{{ !edit.valid }}">Create</button>
</div>
......@@ -4,8 +4,11 @@ import { firstValueFrom } from 'rxjs';
import { environment } from 'src/environments/environment';
import { RequestState } from '../request-state.enum';
import { AssignmentCreate } from './assignment.interface';
import { Assignment } from './assignment.interface';
import { Agent } from './assignment.interface';
import { Mission } from './assignment.interface';
import {FormControl, FormGroup, Validators} from "@angular/forms";
import { Router } from "@angular/router"
@Component({
selector: 'assignment-create',
......@@ -15,16 +18,26 @@ export class AssignmentCreateComponent implements OnInit {
requestState = RequestState;
state: RequestState = this.requestState.SUCCESS;
errorMessage = '';
assignment: AssignmentCreate | undefined;
assignment: AssignmentCreate = {
start: new Date(),
durationInDays: 0,
report: '',
missionId: '',
agentId: ''
}
agents: Agent[] | null = null;
missions: Mission[] | null = null;
confirmMessage = false;
//src/app/assignment/assignment-create.component.html:8:45 - error TS2532: Object is possibly 'undefined'.
constructor(private httpClient: HttpClient, /*private route: ActivatedRoute*/) {}
edit = new FormGroup({
start: new FormControl( '', [Validators.required]),
durationInDays: new FormControl('', [
Validators.min(0),
Validators.required,
]),
});
constructor(private httpClient: HttpClient, private router: Router) {}
async ngOnInit() {
// @ts-ignore
this.assignment = {start: Date.now(), durationInDays: '', report: '', missionId: '', agentId: ''};
try {
this.state = RequestState.PENDING;
this.agents = await firstValueFrom(
......@@ -44,14 +57,14 @@ export class AssignmentCreateComponent implements OnInit {
async createAssignment() {
try {
this.state = RequestState.PENDING;
this.assignment = await firstValueFrom(
this.httpClient.post<AssignmentCreate>(
const response = await firstValueFrom(
this.httpClient.post<Assignment>(
`${environment.apiUrl}/assignments/`,
this.assignment
)
);
this.state = RequestState.SUCCESS;
this.confirmMessage = true;
await this.router.navigate([`/auth/assignment/${response.id}`])
} catch (err) {
this.state = RequestState.ERROR;
throw err;
......
......@@ -3,28 +3,28 @@
</div>
<div *ngIf="assignmentSaved">Assignment has been updated.</div>
<div *ngIf="assignment && state === requestState.SUCCESS">
<mat-toolbar>Agent Assignment record</mat-toolbar>
<mat-form-field appearance="fill">
<mat-label>Start date:</mat-label>
<input matInput [disabled]="!editing" [(ngModel)]="assignment.start" type="date"/>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Duration (days):</mat-label>
<input matInput [disabled]="!editing" [(ngModel)]="assignment.durationInDays" type="number" min="0"/>
</mat-form-field>
<div routerLink="../agent/{{ assignment.agent.id }}">
<form [formGroup]="edit">
<mat-toolbar>Agent Assignment record</mat-toolbar>
<mat-form-field appearance="fill">
<mat-label>Start date:</mat-label>
<input matInput [disabled]="!editing" type="Date" formControlName="start"/>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Agent's name:</mat-label>
<input matInput [disabled]="true" [(ngModel)]="assignment.agent.name" />
<mat-label>Duration (days):</mat-label>
<input matInput [disabled]="!editing" formControlName="durationInDays" type="number" min="0"/>
</mat-form-field>
</form>
<div routerLink="../agent/{{ assignment.agent.id }}">
<mat-label>Agent's name:</mat-label>
{{assignment.agent.name}}
</div>
<mat-form-field appearance="fill">
<div routerLink="../mission/{{ assignment.mission.id }}">
<mat-label>Mission:</mat-label>
<input matInput [disabled]="true" [(ngModel)]="assignment.mission.name" />
</mat-form-field>
{{assignment.mission.name}}
</div>
</div>
<div *ngIf="assignment && state === requestState.SUCCESS" class="w-full">
<mat-form-field appearance="fill" >
<mat-form-field appearance="fill">
<mat-label>Agent's report:</mat-label>
<textarea matInput placeholder="Agent's report" [(ngModel)]="assignment.report" [disabled]="!editing"></textarea>
</mat-form-field>
......@@ -33,9 +33,8 @@
<div>
<section>
<button mat-raised-button *ngIf="!editing" (click)="setEditing(true)">Edit</button>
<button mat-raised-button *ngIf="editing" (click)="setEditing(false); saveAssignment();">Save</button>
<button mat-raised-button *ngIf="editing" (click)="setEditing(false); saveAssignment();" disabled="{{ !edit.valid }}">Save</button>
<button mat-raised-button *ngIf="editing" (click)="setEditing(false); loadAssignment();">Cancel</button>
</section>
<section>
<button mat-raised-button (click)="deleteAssignment()">Delete</button>
......
......@@ -5,7 +5,8 @@ import { firstValueFrom } from 'rxjs';
import { environment } from 'src/environments/environment';
import { RequestState } from '../request-state.enum';
import { Assignment } from './assignment.interface';
import {Router} from "@angular/router"
import { Router } from "@angular/router"
import { FormControl, FormGroup, Validators } from "@angular/forms";
@Component({
selector: 'assignment-detail',
......@@ -17,12 +18,19 @@ export class AssignmentDetailComponent implements OnInit {
state: RequestState = this.requestState.PENDING;
editing = false;
errorMessage = '';
assignment: Assignment | null = null;
assignment: Assignment | undefined;
assignmentSaved = false;
edit = new FormGroup({
start: new FormControl( '', [Validators.required]),
durationInDays: new FormControl('', [
Validators.min(0),
Validators.required,
]),
});
constructor(private httpClient: HttpClient, private route: ActivatedRoute, private router: Router) {}
async ngOnInit() {
async ngOnInit(){
this.id = this.route.snapshot.params['id'];
if (this.id === undefined) {
this.state = RequestState.ERROR;
......@@ -34,6 +42,10 @@ export class AssignmentDetailComponent implements OnInit {
this.assignment = await firstValueFrom(
this.httpClient.get<Assignment>(`${environment.apiUrl}/assignments/${this.id}`)
);
this.edit.patchValue({
start: this.assignment.start,
durationInDays: this.assignment.durationInDays,
});
this.state = RequestState.SUCCESS;
} catch (err) {
this.state = RequestState.ERROR;
......@@ -48,6 +60,11 @@ export class AssignmentDetailComponent implements OnInit {
}
async saveAssignment() {
if (!this.assignment) {
throw new Error("Error!");
}
this.assignment.start = this.edit.get("start")?.value;
this.assignment.durationInDays = this.edit.get("durationInDays")?.value;
try {
this.state = RequestState.PENDING;
this.assignment = await firstValueFrom(
......@@ -86,7 +103,6 @@ export class AssignmentDetailComponent implements OnInit {
this.assignment = await firstValueFrom(
this.httpClient.get<Assignment>(`${environment.apiUrl}/assignments/${this.id}`)
);
this.state = RequestState.SUCCESS;
} catch (err) {
this.state = RequestState.ERROR;
......
<div *ngIf="state === requestState.ERROR">
Error showing assignment detail: {{ errorMessage }}
</div>
<button mat-raised-button routerLink="../assignment/create">Create new assignment</button>
<h2>Assignments:</h2>
<button mat-raised-button routerLink="../assignment/create">Create a new assignment</button>
<div *ngIf="assignments && state === requestState.SUCCESS">
Assignments:
<table mat-table [dataSource]="assignments" class="w-full">
<ng-container matColumnDef="start">
<th mat-header-cell *matHeaderCellDef>Start date</th>
......@@ -34,7 +34,7 @@
<tr
mat-row
class="hover:bg-gray-200"
routerLink="../mission/{{ row.id }}"
routerLink="../assignment/{{ row.id }}"
*matRowDef="let row; columns: displayedColumns"
></tr>
</table>
......
......@@ -11,7 +11,7 @@ export interface Agent {
export interface Assignment {
id: string;
start: Date;
durationInDays: string;
durationInDays: number;
report: string;
mission: Mission;
agent: Agent;
......@@ -19,7 +19,7 @@ export interface Assignment {
export interface AssignmentCreate {
start: Date;
durationInDays: string;
durationInDays: number;
report: string;
missionId: string;
agentId: string;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment