Merge pull request #10 from futureleadersupc/feat/job-offers-admin

feat(ui): jobs administrator

src/app/app-routing.module.ts

@@ -3,11 +3,14 @@ import { RouterModule, Routes } from "@angular/router";
 import { ProfileComponent } from "./profile/profile.component";
 import { SignInComponent } from "./auth/pages/signin/signin.component";
 import { SignUpComponent } from "./auth/pages/signup/signup.component";
+import { JobsComponent } from "./jobs/pages/jobs/jobs.component";
 
 const routes: Routes = [
-  { path: "", component: ProfileComponent },
+  { path: "", redirectTo: "account/profile", pathMatch: "full" },
+  { path: "account/profile", component: ProfileComponent },
   { path: "account/signin", component: SignInComponent },
   { path: "account/signup", component: SignUpComponent },
+  { path: "account/jobs", component: JobsComponent },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1,4 +1,10 @@
-<mat-toolbar color="primary">
+<mat-toolbar color="primary" class="flex justify-between">
   <h1>WAW</h1>
+
+  <div class="space-x-1">
+    <button mat-button routerLink="/">Home</button>
+    <button mat-button routerLink="/account/jobs">Jobs</button>
+  </div>
 </mat-toolbar>
+
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -1,25 +1,43 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { MatToolbarModule } from "@angular/material/toolbar";
-import { MatIconModule } from "@angular/material/icon";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { HttpClientModule } from "@angular/common/http";
+import { FormsModule } from "@angular/forms";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
 import { ProfileComponent } from "./profile/profile.component";
 import { SignInComponent } from "./auth/pages/signin/signin.component";
 import { SignUpComponent } from "./auth/pages/signup/signup.component";
+import { JobsComponent } from "./jobs/pages/jobs/jobs.component";
+
+import { MatToolbarModule } from "@angular/material/toolbar";
+import { MatIconModule } from "@angular/material/icon";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { MatTableModule } from "@angular/material/table";
+import { MatButtonModule } from "@angular/material/button";
+import { MatPaginatorModule } from "@angular/material/paginator";
+import { MatSortModule } from "@angular/material/sort";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatSelectModule } from "@angular/material/select";
 
 export const imports: NonNullable<NgModule["imports"]> = [
   BrowserAnimationsModule,
+  HttpClientModule,
+  FormsModule,
   MatToolbarModule,
   MatIconModule,
   MatFormFieldModule,
   MatInputModule,
   MatSlideToggleModule,
+  MatTableModule,
+  MatButtonModule,
+  MatPaginatorModule,
+  MatSortModule,
+  MatTooltipModule,
+  MatSelectModule,
 ];
 
 @NgModule({
@@ -28,6 +46,7 @@ export const imports: NonNullable<NgModule["imports"]> = [
     ProfileComponent,
     SignInComponent,
     SignUpComponent,
+    JobsComponent,
   ],
   imports: [BrowserModule, AppRoutingModule, ...imports],
   providers: [],

src/app/common/model/column-definition.ts

@@ -0,0 +1,42 @@
+export type InputTextDef = {
+  type: "text";
+  minLength?: number;
+  maxLength?: number;
+};
+
+export type InputNumberDef = {
+  type: "number";
+  min?: number;
+  max?: number;
+};
+
+export type DropdownOptions = {
+  label: string;
+  value: string | number;
+  default?: boolean;
+};
+
+export type DropdownDef = {
+  type: "dropdown";
+  options: DropdownOptions[];
+};
+
+export type ToggleDef = {
+  type: "toggle";
+  trueLabel?: string;
+  falseLabel?: string;
+};
+
+export type ColumnStyles = {
+  cellClassName?: string;
+  containerClassName?: string;
+};
+
+export type ColumnDefinition<T> = {
+  label: string;
+  key: keyof T;
+  required?: boolean;
+  hidden?: boolean;
+  type: string;
+  styles?: ColumnStyles;
+} & (InputTextDef | InputNumberDef | DropdownDef | ToggleDef);

src/app/jobs/model/job-offer.ts

@@ -0,0 +1,7 @@
+export interface JobOffer {
+  id: number;
+  title: string;
+  description: string;
+  salaryRange: string;
+  published: boolean;
+}

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

@@ -0,0 +1,103 @@
+<main class="p-4">
+  <h1>Active Job Offers</h1>
+  <form #jobsForm="ngForm" (submit)="this.handleSubmit()" class="space-x-4">
+    <ng-container *ngFor="let field of this.columns">
+      <mat-form-field *ngIf="this.useMatFormField(field)">
+        <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
+        *ngIf="field.type === 'toggle'"
+        [name]="field.key"
+        [required]="field.required ?? false"
+        [(ngModel)]="this.currentItem[field.key]">
+        {{ field.label }}
+      </mat-slide-toggle>
+    </ng-container>
+    <button mat-button type="submit" color="primary">
+      {{ this.isEditMode ? "Update" : "Add" }}
+    </button>
+    <button
+      mat-button
+      color="warn"
+      *ngIf="this.isEditMode"
+      (click)="this.cancelEdit()">
+      Cancel
+    </button>
+  </form>
+  <table
+    mat-table
+    matSort
+    [dataSource]="this.dataSource"
+    class="mat-elevation-z2 w-full">
+    <ng-container
+      *ngFor="let column of this.columns"
+      [matColumnDef]="column.key">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        {{ column.label }}
+      </th>
+      <td
+        mat-cell
+        *matCellDef="let item"
+        [ngClass]="[column.styles?.cellClassName || '']">
+        <div [ngClass]="[column.styles?.containerClassName || '']">
+          {{ this.getDisplayableColumn(item, column) }}
+        </div>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>Actions</th>
+      <td mat-cell *matCellDef="let item">
+        <button
+          mat-icon-button
+          color="primary"
+          aria-label="Edit"
+          (click)="this.startEdit(item)">
+          <mat-icon aria-hidden="true">edit</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          color="warn"
+          aria-label="Delete"
+          (click)="this.deleteJob(item.id)">
+          <mat-icon aria-hidden="true">delete</mat-icon>
+        </button>
+      </td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="this.displayedColumns"></tr>
+    <tr
+      mat-row
+      *matRowDef="let row; columns: this.displayedColumns"
+      [ngClass]="{ 'editable-row': this.currentItem.id === row.id }"></tr>
+  </table>
+  <mat-paginator
+    class="mat-elevation-z2"
+    [pageSize]="5"
+    [pageSizeOptions]="[5, 10, 15]"
+    showFirstLastButtons></mat-paginator>
+</main>

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

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { JobsComponent } from "./jobs.component";
+
+import { imports } from "src/app/app.module";
+
+describe("JobsComponent", () => {
+  let component: JobsComponent;
+  let fixture: ComponentFixture<JobsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [...imports],
+      declarations: [JobsComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JobsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});