angular/ems-frontend
angular/ems-frontend
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add cancel button to create and edit qualification modals #36

Merged
jleibl merged 1 commits from refactor/cancel into main 2025-01-15 09:05:48 +00:00
Conversation 1 Commits 1 Files Changed 4 +49 -39
4 changed files with 49 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/app/qualification/create/create.component.html
View File

@ -1,24 +1,25 @@
<h2 mat-dialog-title>Create Qualification</h2> <h2 mat-dialog-title>Create Qualification</h2>
<mat-dialog-content> <mat-dialog-content>
<form [formGroup]="qualificationForm" (ngSubmit)="create()"> <form [formGroup]="qualificationForm" (ngSubmit)="create()">
<div class="!space-y-4"> <div class="!space-y-4">
@if (apiErrorMessage) { @if (apiErrorMessage) {
<mat-error>{{ apiErrorMessage }}</mat-error> <mat-error>{{ apiErrorMessage }}</mat-error>
} }
<mat-form-field class="!w-full"> <mat-form-field class="!w-full">
<mat-label>Skill</mat-label> <mat-label>Skill</mat-label>
<input matInput <input matInput
formControlName="skill" formControlName="skill"
required> required>
<mat-error *ngIf="isFieldInvalid('skill')"> <mat-error *ngIf="isFieldInvalid('skill')">
{{ getErrorMessage('skill') }} {{ getErrorMessage('skill') }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-flat-button color="primary" type="submit">Create</button> <button mat-button mat-dialog-close>Cancel</button>
</mat-dialog-actions> <button mat-flat-button color="primary" type="submit">Create</button>
</div> </mat-dialog-actions>
</form> </div>
</form>
</mat-dialog-content> </mat-dialog-content>

11
src/app/qualification/create/create.component.ts
View File

@ -1,7 +1,13 @@
import {Component, inject} from '@angular/core'; import {Component, inject} from '@angular/core';
import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms"; import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
import QualificationService from "../../services/qualification.service"; import QualificationService from "../../services/qualification.service";
import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog"; import {
MatDialogActions,
MatDialogClose,
MatDialogContent,
MatDialogRef,
MatDialogTitle
} from "@angular/material/dialog";
import {NgIf} from "@angular/common"; import {NgIf} from "@angular/common";
import {MatError, MatFormField, MatLabel} from "@angular/material/form-field"; import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
import {MatButton} from "@angular/material/button"; import {MatButton} from "@angular/material/button";
@ -20,7 +26,8 @@ import {filter} from "rxjs";
MatFormField, MatFormField,
MatDialogActions, MatDialogActions,
MatButton, MatButton,
MatInput MatInput,
MatDialogClose
], ],
templateUrl: './create.component.html', templateUrl: './create.component.html',
styleUrl: './create.component.css' styleUrl: './create.component.css'

1
src/app/qualification/edit/edit.component.html
View File

@ -17,6 +17,7 @@
</mat-form-field> </mat-form-field>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
<button mat-flat-button color="primary" type="submit">Edit</button> <button mat-flat-button color="primary" type="submit">Edit</button>
</mat-dialog-actions> </mat-dialog-actions>
</div> </div>

37
src/app/qualification/edit/edit.component.ts
View File

@ -2,11 +2,11 @@ import {Component, inject} from '@angular/core';
import {FormBuilder, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms"; import {FormBuilder, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
import QualificationService from "../../services/qualification.service"; import QualificationService from "../../services/qualification.service";
import { import {
MAT_DIALOG_DATA, MAT_DIALOG_DATA,
MatDialogActions, MatDialogActions, MatDialogClose,
MatDialogContent, MatDialogContent,
MatDialogRef, MatDialogRef,
MatDialogTitle MatDialogTitle
} from "@angular/material/dialog"; } from "@angular/material/dialog";
import {MatButton} from "@angular/material/button"; import {MatButton} from "@angular/material/button";
import {MatError, MatFormField, MatLabel} from "@angular/material/form-field"; import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
@ -16,19 +16,20 @@ import {Qualification} from "../Qualification";
@Component({ @Component({
selector: 'app-edit-qualification', selector: 'app-edit-qualification',
imports: [ imports: [
FormsModule, FormsModule,
MatButton, MatButton,
MatDialogActions, MatDialogActions,
MatDialogContent, MatDialogContent,
MatDialogTitle, MatDialogTitle,
MatError, MatError,
MatFormField, MatFormField,
MatInput, MatInput,
MatLabel, MatLabel,
NgIf, NgIf,
ReactiveFormsModule ReactiveFormsModule,
], MatDialogClose
],
templateUrl: './edit.component.html', templateUrl: './edit.component.html',
styleUrl: './edit.component.css' styleUrl: './edit.component.css'
}) })