form

src/app/+admin/management/job/data-access/service/job-manager.service.ts

@@ -18,15 +18,19 @@ export class JobManagerService {
         });
     }
 
+    jobsGetOne(id: string) {
+        return this._http.get<ResponseResult<JobApi.Response>>('jobs/' + id);
+    }
+
     jobsPost(request: JobApi.Request) {
         return this._http.post<ResponseResult<JobApi.Request>>('jobs', request);
     }
 
-    jobsPut(request: JobApi.Request) {
-        return this._http.put<ResponseResult<JobApi.Request>>('jobs', request);
+    jobsPut(id: string, request: JobApi.Request) {
+        return this._http.put<ResponseResult<JobApi.Request>>('jobs/' + id, request);
     }
 
-    jobsDelete(id: number) {
-        return this._http.delete<ResponseResult<JobApi.Request>>('jobs');
+    jobsDelete(id: string) {
+        return this._http.delete<ResponseResult<JobApi.Request>>('jobs/' + id);
     }
 }
\ No newline at end of file

src/app/+admin/management/job/feature/job-form.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { JobManagerService } from '../data-access/service/job-manager.service';
+import { ResponseResult } from '../../../../shared/data-access/interface/response.type';
+import { JobApi } from '../data-access/model/job-manager.model';
+import { catchError, of, tap } from 'rxjs';
 
 @Component({
     selector: 'job-form',
     standalone: true,
+    imports: [
+        NzButtonModule,
+        NzModalModule,
+        ReactiveFormsModule
+    ],
     template: `
-        <div [class]="{'tw-hidden': isHidden}">
-            
+        <div class="tw-w-full tw-grid tw-justify-items-end">
+            <button nz-button nzType="primary" (click)="isCreate = true">Create new job</button>
+        </div>
+        <nz-modal [(nzVisible)]="isCreate" nzTitle="Create new job" nzCancelText="Cancel" nzOkText="Create" (nzOnCancel)="isCreate = false" (nzOnOk)="isCreate = false; onCreateSubmit()">
+        <ng-container *nzModalContent>
+            <form [formGroup]="jobCreatingFormGroup">
+            <div class="tw-flex tw-flex-col tw-flex-wrap tw-gap-y-1">
+            <label>Type</label>
+                <select class="tw-border tw-rounded-lg tw-h-8" formControlName="type">
+                    <option value="Full Time">Full Time</option>
+                    <option value="Part Time">Part Time</option>
+                </select>
+                <label>Company</label>
+                <input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="company">
+                <label>Company Url</label>
+                <input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="company_url">
+                <label>Location</label>
+                <input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="location">
+                <label>Tilte</label>
+                <input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="title">
+                <label>Description</label>
+                <textarea class="tw-border tw-rounded-lg tw-h-20" type="text" formControlName="description"></textarea>
+                <label>How to Apply</label>
+                <input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="how_to_apply">
+                <label>Company Logo</label>
+                <input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="company_logo">
+                <label>Url</label>
+                <input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="url">
             </div>
+            </form>
+        </ng-container>
+        </nz-modal>
     `
 })
 
-export class JobFormComponent implements OnInit {
-    isHidden: boolean = true;
-    constructor() { }
+export class JobFormComponent implements OnInit, OnDestroy {
+
+    isCreate: boolean = false;
+
+    jobCreatingFormGroup: FormGroup;
+
+    constructor(private _fb: FormBuilder, private _service: JobManagerService) {
+        this.jobCreatingFormGroup = this._fb.group({
+            type: ['Full Time', Validators.required],
+            company: ['', Validators.required],
+            company_url: ['', Validators.required],
+            location: ['', Validators.required],
+            title: ['', Validators.required],
+            description: ['', Validators.required],
+            how_to_apply: ['', Validators.required],
+            company_logo: ['', Validators.required],
+            url: ['', Validators.required],
+        });
+    }
+
+    ngOnInit() {
+
+    }
+
+    ngOnDestroy() {
+
+    }
+
+    onCreateSubmit() {
+        const data = this.jobCreatingFormGroup.value;
+        if (!this.jobCreatingFormGroup.valid) {
+            Object.values(this.jobCreatingFormGroup.controls).forEach(control => {
+                if (control.invalid) {
+                    control.markAsDirty();
+                    control.updateValueAndValidity({ onlySelf: true });
+                }
+            });
+            return;
+        }
+        this.jobCreatingFormGroup.markAllAsTouched();
+        this._service.jobsPost(data)
+            .pipe(
+                tap((response: ResponseResult<JobApi.Request>) => {
+                    console.log(response);
+                }),
+                catchError((err) => {
+                    return of(null);
+                })
+            )
+            .subscribe();
+    }
+
+    onEditSubmit() {
+
+    }
+
     
-    ngOnInit() { }
 }
\ No newline at end of file

src/app/+admin/management/job/feature/job.component.ts

 import { Component, OnInit } from '@angular/core';
 import { JobListComponent } from './job-list.component';
-import { NzButtonModule } from 'ng-zorro-antd/button';
 import { JobFormComponent } from './job-form.component';
 
 @Component({
@@ -9,13 +8,9 @@ import { JobFormComponent } from './job-form.component';
     imports: [
         JobListComponent,
         JobFormComponent,
-        NzButtonModule
     ],
     template: `
     <h1 class="tw-text-center tw-text-3xl tw-font-semibold tw-my-3">Jobs</h1>
-    <div class="tw-w-full tw-grid tw-justify-items-end">
-        <button nz-button nzType="primary">Create new job</button>
-    </div>
     <job-form></job-form>
     <job-list></job-list>
     `

src/app/+job/feature/job.component.ts

@@ -4,7 +4,7 @@ import { CommonModule, DatePipe, JsonPipe, NgFor } from '@angular/common';
 import { JobService } from '../data-access/service/job.service'
 import { ResponseResult, Rows } from '../../shared/data-access/interface/response.type';
 import { Jobs } from '../data-access/model/job.model';
-import { catchError, map, of, tap } from 'rxjs';
+import { catchError, of, tap } from 'rxjs';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
@@ -17,7 +17,6 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
   imports: [
     CommonModule,
     NgFor,
-    JsonPipe,
     NzCardModule,
     NzAvatarModule,
     NzPaginationModule,

src/app/+login/feature/login.component.ts

@@ -11,7 +11,7 @@ import { NzAlertModule } from 'ng-zorro-antd/alert';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { AuthService } from '../data-access/service/auth.service';
 import { validateUsername } from '../../shared/utils/form-validator/username.validator';
-import { catchError, map, of, tap } from 'rxjs';
+import { catchError, of, tap } from 'rxjs';
 import { ResponseResult } from '../../shared/data-access/interface/response.type';
 import { Login } from '../data-access/model/login.model';
 import { Router } from '@angular/router';
@@ -31,7 +31,6 @@ import { Router } from '@angular/router';
     NzAlertModule,
     NzFormModule,
     ReactiveFormsModule,
-    JsonPipe
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -43,7 +42,6 @@ export class LoginComponent implements OnInit {
   constructor(
     private _fb: FormBuilder,
     private _authService: AuthService,
-    private _changeDetectorRef: ChangeDetectorRef,
     private _router: Router
   ) {
     this.signInFormGroup = this._fb.group({
@@ -82,6 +80,7 @@ export class LoginComponent implements OnInit {
   }
 
   onSuccess(response: ResponseResult<Login.Response>) {
+    console.log(response.responseData?.token);
     localStorage.setItem("token", response.responseData?.token ?? "");
     localStorage.setItem("role", response.responseData?.role ?? "");
     this._router.navigate(['/home']);