feat: Job Manager v3

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { JobsSearchComponent } from "./jobs/pages/jobs-search/jobs-search.compon
 import { JobConfirmationDialogComponent } from "./jobs/components/job-confirmation-dialog/job-confirmation-dialog.component";
 import { ChangepasswordComponent } from "./auth/pages/changepassword/changepassword.component";
 import { ResetpasswordComponent } from "./auth/pages/resetpassword/resetpassword.component";
+import { JobAddDialogComponent } from "./jobs/components/job-add-dialog/job-add-dialog.component";
 
 import { MatToolbarModule } from "@angular/material/toolbar";
 import { MatIconModule } from "@angular/material/icon";
@@ -70,6 +71,7 @@ export const imports: NonNullable<NgModule["imports"]> = [
     ResetpasswordComponent,
     ChangepasswordComponent,
     FooterComponent,
+    JobAddDialogComponent,
   ],
   imports: [BrowserModule, ...imports],
   providers: [],

src/app/auth/model/user.ts

@@ -23,6 +23,7 @@ export interface Experience {
   description: string;
   image?: UserImage;
 }
+
 export interface Education {
   id: number;
   university: string;

src/app/core/pages/profile/profile.component.ts

@@ -42,6 +42,7 @@ export class ProfileComponent extends UseUser implements OnInit, OnDestroy {
     const year = parsed.getFullYear();
     return `${month} ${day}, ${year}`;
   }
+
   getDisplayableExpDates = (start: number, end: number | null) => {
     const msgs = { start: "", end: "Present" };
     const startDate = new Date(start);

src/app/jobs/components/job-add-dialog/job-add-dialog.component.html

@@ -0,0 +1,64 @@
+<h1 mat-dialog-title>Add a new offer</h1>
+<div mat-dialog-content>
+  <form #jobsForm="ngForm" (submit)="this.handleSubmit()" class="flex flex-col">
+    <ng-container *ngFor="let field of this.columns">
+      <mat-form-field *ngIf="this.useMatFormField(field)" appearance="outline">
+        <mat-label>{{ field.label }}</mat-label>
+        <input
+          *ngIf="['text', 'number'].includes(field.type)"
+          matInput
+          [name]="field.key"
+          [type]="field.type"
+          [required]="field.required ?? false"
+          [attr.min]="field.type === 'number' ? field.min ?? null : null"
+          [attr.max]="field.type === 'number' ? field.max ?? null : null"
+          [attr.minLength]="
+            field.type === 'text' ? field.minLength ?? null : null
+          "
+          [attr.maxLength]="
+            field.type === 'text' ? field.maxLength ?? null : null
+          "
+          [(ngModel)]="this.currentItem[field.key]" />
+        <mat-select
+          *ngIf="field.type === 'dropdown'"
+          [name]="field.key"
+          [required]="field.required ?? false"
+          [(ngModel)]="this.currentItem[field.key]">
+          <mat-option
+            *ngFor="let option of field.options"
+            [value]="option.value">
+            {{ option.label }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-slide-toggle
+        class="grid-flow-row"
+        *ngIf="field.type === 'toggle'"
+        [name]="field.key"
+        [required]="field.required ?? false"
+        [(ngModel)]="this.currentItem[field.key]"
+        aria-label="Publication status">
+        {{ field.label }}
+      </mat-slide-toggle>
+    </ng-container>
+
+    <div mat-dialog-actions align="end">
+      <button
+        mat-raised-button
+        color="warn"
+        class="box-border h-12 w-28"
+        (click)="onNoClick()">
+        No Thanks
+      </button>
+      <button
+        mat-raised-button
+        type="submit"
+        color="primary"
+        class="h-12 w-28"
+        aria-label="Button that displays a tooltip when focused or hovered over update or add icon"
+        matTooltip="Add new job offer">
+        {{ "Add" }}
+      </button>
+    </div>
+  </form>
+</div>

src/app/jobs/components/job-add-dialog/job-add-dialog.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { JobAddDialogComponent } from "./job-add-dialog.component";
+
+describe("JobAddDialogComponent", () => {
+  let component: JobAddDialogComponent;
+  let fixture: ComponentFixture<JobAddDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [JobAddDialogComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JobAddDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/jobs/components/job-add-dialog/job-add-dialog.component.ts

@@ -0,0 +1,122 @@
+import { Component, Inject, OnInit, ViewChild } from "@angular/core";
+import { ColumnDefinition } from "../../../common/model/column-definition";
+import { JobOffer } from "../../model/job-offer";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { NgForm } from "@angular/forms";
+import { MatTableDataSource } from "@angular/material/table";
+import { JobsService } from "../../services/jobs.service";
+
+@Component({
+  selector: "app-job-add-dialog",
+  templateUrl: "./job-add-dialog.component.html",
+  styleUrls: ["./job-add-dialog.component.css"],
+})
+export class JobAddDialogComponent implements OnInit {
+  currentItem: Partial<JobOffer> = {};
+  dataSource = new MatTableDataSource<JobOffer>();
+
+  columns: ColumnDefinition<JobOffer>[] = [
+    { key: "id", label: "ID", hidden: true, type: "number" },
+    {
+      key: "title",
+      label: "Title",
+      type: "text",
+      required: true,
+      styles: {
+        cellClassName: "w-56",
+        containerClassName: "py-2 pr-4",
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      type: "text",
+      styles: {
+        cellClassName: "w-96",
+        containerClassName: "py-2 pr-4",
+      },
+    },
+    { key: "salaryRange", label: "Salary Range", type: "text", required: true },
+    {
+      key: "published",
+      label: "Published",
+      type: "toggle",
+      trueLabel: "Published",
+      falseLabel: "Unpublished",
+    },
+  ];
+  @ViewChild("jobsForm", { static: false })
+  jobsForm!: NgForm;
+
+  constructor(
+    public dialogRef: MatDialogRef<JobAddDialogComponent>,
+    private jobsService: JobsService,
+    @Inject(MAT_DIALOG_DATA) public editData: JobOffer
+  ) {}
+
+  ngOnInit(): void {
+    console.log(this.editData);
+    if (this.editData) {
+      this.jobsForm.form.controls["title"].setValue(this.editData.title);
+      this.jobsForm.form.controls["description"].setValue(
+        this.editData.description
+      );
+      this.jobsForm.form.controls["salaryRange"].setValue(
+        this.editData.salaryRange
+      );
+      this.jobsForm.form.controls["published"].setValue(
+        this.editData.published
+      );
+    }
+  }
+
+  useMatFormField(field: ColumnDefinition<JobOffer>) {
+    return !field.hidden && ["text", "number", "dropdown"].includes(field.type);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  get isEditMode() {
+    return !!this.currentItem.id;
+  }
+
+  createJob(item: JobOffer) {
+    this.jobsService.create(item).subscribe(response => {
+      this.dataSource.data = [...this.dataSource.data, response];
+    });
+  }
+
+  updateJob(id: number, item: JobOffer) {
+    this.jobsService.update(id, item).subscribe(response => {
+      this.dataSource.data = this.dataSource.data.map(current => {
+        if (current.id === id) return response;
+        return current;
+      });
+    });
+  }
+
+  cancelEdit() {
+    this.currentItem = {};
+    this.jobsForm.resetForm();
+    this.dialogRef.close();
+  }
+
+  handleSubmit() {
+    console.log("handling submit...");
+    if (!this.jobsForm.form.valid) return;
+    console.log("passed validation...");
+    const job = this.currentItem as JobOffer;
+    if (this.isEditMode) {
+      console.log("sending update...");
+      this.updateJob(job.id, job);
+    } else {
+      console.log("sending create...");
+      this.createJob(job);
+    }
+
+    this.cancelEdit();
+    console.log("finished...");
+  }
+}

src/app/jobs/pages/jobs/jobs.component.html

@@ -41,6 +41,7 @@ <h1>Active Job Offers</h1>
           </mat-option>
         </mat-select>
       </mat-form-field>
+
       <mat-slide-toggle
         *ngIf="field.type === 'toggle'"
         [name]="field.key"
@@ -58,6 +59,7 @@ <h1>Active Job Offers</h1>
       color="primary"
       class="box-border h-12 w-28"
       aria-label="Button that displays a tooltip when focused or hovered over update or add icon"
+      (click)="openDialog()"
       [matTooltip]="(isEditMode ? 'Update' : 'Add') + ' new job offer'">
       {{ isEditMode ? "Update" : "Add" }}
     </button>

src/app/jobs/pages/jobs/jobs.component.ts

@@ -7,6 +7,8 @@ import { ColumnDefinition } from "src/app/common/model/column-definition";
 import { JobOffer } from "../../model/job-offer";
 import { JobsService } from "../../services/jobs.service";
 import { MatSnackBar } from "@angular/material/snack-bar";
+import { MatDialog } from "@angular/material/dialog";
+import { JobAddDialogComponent } from "../../components/job-add-dialog/job-add-dialog.component";
 
 @Component({
   selector: "app-jobs",
@@ -60,7 +62,8 @@ export class JobsComponent implements OnInit, AfterViewInit {
 
   constructor(
     private jobsService: JobsService,
-    private snackbar: MatSnackBar
+    private snackbar: MatSnackBar,
+    public dialog: MatDialog
   ) {}
 
   get isEditMode() {
@@ -77,7 +80,12 @@ export class JobsComponent implements OnInit, AfterViewInit {
   }
 
   startEdit(item: JobOffer) {
-    this.currentItem = { ...item };
+    this.dialog.open(JobAddDialogComponent, {
+      width: "550px",
+      height: "500px",
+      data: item,
+    });
+    // this.currentItem = { ...item };
   }
 
   cancelEdit() {
@@ -124,19 +132,14 @@ export class JobsComponent implements OnInit, AfterViewInit {
   }
 
   handleSubmit() {
-    console.log("handling submit...");
     if (!this.jobsForm.form.valid) return;
-    console.log("passed validation...");
     const job = this.currentItem as JobOffer;
     if (this.isEditMode) {
-      console.log("sending update...");
       this.updateJob(job.id, job);
     } else {
-      console.log("sending create...");
       this.createJob(job);
     }
     this.cancelEdit();
-    console.log("finished...");
   }
 
   getDisplayableColumn(item: JobOffer, column: ColumnDefinition<JobOffer>) {
@@ -160,4 +163,12 @@ export class JobsComponent implements OnInit, AfterViewInit {
     const filterValue = (event.target as HTMLInputElement).value;
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
+
+  openDialog() {
+    const dialogRef = this.dialog.open(JobAddDialogComponent, {
+      width: "550px",
+      height: "500px",
+    });
+    dialogRef.afterClosed();
+  }
 }