update form create job

src/app/+admin/Management/job/data-access/model/jobModel.model.ts

 export interface JobModel {
-  id: string;
-  type: string;
+  id?: string;
+  type?: string;
   created_at: string;
-  company: string;
-  company_url: string;
-  location: string;
-  title: string;
-  description: string;
-  how_to_apply: string;
-  company_logo: string;
+  company?: string;
+  company_url?: string;
+  location?: string;
+  title?: string;
+  description?: string;
+  how_to_apply?: string;
+  company_logo?: string;
 }

src/app/+admin/Management/job/data-access/services/JobService.service.ts

 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams, HttpRequest } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { environment } from '../../../../../../environments/environment.development';
 
@@ -16,4 +16,18 @@ export class JobService {
       .set('pageSize', pageSize.toString());
     return this.http.get<any>(this.apiUrl, { params });
   }
+  addingNewJob(data: any): Observable<any> {
+    const headers = new HttpHeaders()
+      .set('Content-Type', 'application/json')
+      .set('authorization', `Bearer ${localStorage.getItem('token')}`);
+    return this.http.post<any>(this.apiUrl, data, { headers });
+  }
+  deleteJob(id: string): Observable<any> {
+    const headers = new HttpHeaders()
+      .set('Content-Type', 'application/json')
+      .set('Authorization', `Bearer ${localStorage.getItem('token')}`);
+    const url = `${this.apiUrl}/${id}`;
+    return this.http.delete<any>(url, { headers });
+  }
+
 }

src/app/+admin/Management/job/feature/jobForm/jobForm.component.html

-form ne
+<nz-card nzTitle="Thêm công việc mới" [nzBordered]="true" style="width: 600px; margin: 0 auto; margin-top: 50px;">
+  <form nz-form (ngSubmit)="onSubmit()" #jobForm="ngForm">
+    <!-- Tiêu đề công việc -->
+    <nz-form-item>
+      <nz-form-label nzFor="title" [nzSpan]="6">Tiêu đề</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <input
+          nz-input
+          type="text"
+          id="title"
+          name="title"
+          [(ngModel)]="job.title"
+          required
+          placeholder="Nhập tiêu đề công việc"
+        />
+      </nz-form-control>
+    </nz-form-item>
+
+    <!-- Loại công việc -->
+    <nz-form-item>
+      <nz-form-label nzFor="type" [nzSpan]="6">Loại</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <nz-select
+          id="type"
+          name="type"
+          [(ngModel)]="job.type"
+          required
+          placeholder="Chọn loại công việc"
+        >
+          <nz-option nzValue="Full-time" nzLabel="Full-time"></nz-option>
+          <nz-option nzValue="Part-time" nzLabel="Part-time"></nz-option>
+          <nz-option nzValue="Freelance" nzLabel="Freelance"></nz-option>
+        </nz-select>
+      </nz-form-control>
+    </nz-form-item>
+
+    <!-- Công ty -->
+    <nz-form-item>
+      <nz-form-label nzFor="company" [nzSpan]="6">Công ty</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <input
+          nz-input
+          type="text"
+          id="company"
+          name="company"
+          [(ngModel)]="job.company"
+          required
+          placeholder="Nhập tên công ty"
+        />
+      </nz-form-control>
+    </nz-form-item>
+
+    <!-- URL công ty -->
+    <nz-form-item>
+      <nz-form-label nzFor="company_url" [nzSpan]="6">Website</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <input
+          nz-input
+          type="url"
+          id="company_url"
+          name="company_url"
+          [(ngModel)]="job.company_url"
+          placeholder="Nhập URL của công ty"
+        />
+      </nz-form-control>
+    </nz-form-item>
+
+    <!-- Địa điểm -->
+    <nz-form-item>
+      <nz-form-label nzFor="location" [nzSpan]="6">Địa điểm</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <input
+          nz-input
+          type="text"
+          id="location"
+          name="location"
+          [(ngModel)]="job.location"
+          required
+          placeholder="Nhập địa điểm công việc"
+        />
+      </nz-form-control>
+    </nz-form-item>
+
+    <!-- Mô tả -->
+    <nz-form-item>
+      <nz-form-label nzFor="description" [nzSpan]="6">Mô tả</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <textarea
+          nz-input
+          id="description"
+          name="description"
+          [(ngModel)]="job.description"
+          rows="4"
+          placeholder="Nhập mô tả công việc"
+          required
+        ></textarea>
+      </nz-form-control>
+    </nz-form-item>
+
+    <!-- Nút Gửi -->
+    <nz-form-item>
+      <nz-form-control [nzSpan]="18" [nzOffset]="6">
+        <button nz-button nzType="primary" [disabled]="!jobForm.valid">
+          Thêm Công Việc
+        </button>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</nz-card>

src/app/+admin/Management/job/feature/jobForm/jobForm.component.ts

 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
-
+import { NzBreadCrumbModule } from "ng-zorro-antd/breadcrumb";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { NzCardModule } from "ng-zorro-antd/card";
+import { NzFormModule } from "ng-zorro-antd/form";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzLayoutModule } from "ng-zorro-antd/layout";
+import { NzMenuModule } from "ng-zorro-antd/menu";
+import { NzToolTipModule } from "ng-zorro-antd/tooltip";
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { FormsModule } from "@angular/forms";
+import { JobModel } from "../../data-access/model/jobModel.model";
+import { JobService } from "../../data-access/services/JobService.service";
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { finalize } from "rxjs";
 @Component({
   selector: "app-job-form",
   templateUrl: "./jobForm.component.html",
   standalone: true,
-  imports: [CommonModule],
+  imports: [
+    CommonModule,
+    NzButtonModule,
+    NzBreadCrumbModule,
+    NzIconModule,
+    NzLayoutModule,
+    NzMenuModule,
+    NzToolTipModule,
+    NzCardModule,
+    NzFormModule,
+    NzSelectModule,
+    FormsModule
+  ],
 })
-export class JobFormComponent {}
+export class JobFormComponent {
+  job: JobModel = {
+    type: '',
+    created_at: new Date().toISOString(),
+    company: '',
+    company_url: '',
+    location: '',
+    title: '',
+    description: ''
+  };
+  constructor(private jobService: JobService, private notification: NzNotificationService) {}
+
+  onSubmit() {
+    console.log('Job Data:', this.job);
+    this.jobService.addingNewJob(this.job).pipe(
+      finalize(() => this.notification.success('Success', 'Thêm thành công'))
+    ).subscribe();
+  }
+}

src/app/+admin/Management/job/feature/jobLayout/jobLayout.component.html

-<span class="tw-text-3xl tw-font-bold">Job</span>
-<div class="tw-w-full tw-grid tw-justify-items-end">
-  <button nz-button nzType="primary">Create new job</button>
-</div>
-<app-job-form></app-job-form>
+<span class="tw-text-3xl tw-font-bold">Danh sách công việc</span>
 <app-job-list></app-job-list>

src/app/+admin/Management/job/feature/jobLayout/jobLayout.component.ts

@@ -12,7 +12,6 @@ import { JobFormComponent } from "../jobForm/jobForm.component";
     CommonModule,
     RouterModule,
     JobListComponent,
-    JobFormComponent
   ],
 })
 export class JobLayoutComponent {

src/app/+admin/Management/job/feature/jobList/jobList.component.html

@@ -6,12 +6,12 @@
     >
       <thead>
         <tr>
-          <th>Job Id</th>
-          <th>Type</th>
-          <th>Title</th>
-          <th>Company</th>
-          <th>Location</th>
-          <th>Action</th>
+          <th>STT</th>
+          <th>Loại công việc</th>
+          <th>Tên công việc</th>
+          <th>Công ty</th>
+          <th>Địa chỉ</th>
+          <th>Thao tác</th>
         </tr>
       </thead>
       <tbody>
@@ -24,8 +24,9 @@
             <td>{{ data.location }}</td>
             <td>
               <nz-space nzSize="small">
-                <button class="tw-mr-2" nz-button nzType="default" nzSize="small" (click)="onEdit(data)">Edit</button>
-                <button nz-button nzType="primary" nzSize="small" nzDanger >Delete</button>
+                <button nz-button class="tw-mr-2" nzType="default" nzSize="small" >Xem chi tiết</button>
+                <button class="tw-mr-2" nz-button nzType="primary" nzSize="small" (click)="onEdit(data)">Sửa</button>
+                <button nz-button nzType="primary" nzSize="small" nzDanger (click)="onDelete(data)">Xóa</button>
               </nz-space>
             </td>
           </tr>

src/app/+admin/Management/job/feature/jobList/jobList.component.ts

@@ -7,7 +7,7 @@ import { JobModel } from "../../data-access/model/jobModel.model";
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzButtonModule } from "ng-zorro-antd/button";
 import { NzSpaceModule } from 'ng-zorro-antd/space';
-
+import { NzNotificationService } from 'ng-zorro-antd/notification';
 
 @Component({
   selector: "app-job-list",
@@ -47,7 +47,7 @@ export class JobListComponent implements OnInit {
     ).subscribe();
   }
 
-  constructor(private jobService: JobService) {}
+  constructor(private jobService: JobService,private notification: NzNotificationService) {}
 
   ngOnInit(): void {
     this.loadDataFromServer(this.pageIndex, this.pageSize);
@@ -55,6 +55,13 @@ export class JobListComponent implements OnInit {
   onEdit(data: any) {
     console.log(data);
   }
-
+  onDelete(data: any) {
+    this.jobService.deleteJob(data.id).pipe(
+      finalize(() => {
+        this.notification.success('Success', 'Xóa thành công');
+        this.listOfJob = this.listOfJob.filter(job => job.id !== data.id);
+      })
+    ).subscribe();
+  }
 
 }

src/app/+admin/Management/job/job.routes.ts

 import { Route } from '@angular/router';
 
+// file: job.routes.ts
 const JOB_ROUTES: Route[] = [
   {
-    path: '',
+    path: 'jobLayout',
     loadComponent: () =>
       import('./feature/jobLayout/jobLayout.component').then(
-        (m) => m.JobLayoutComponent),
+        (m) => m.JobLayoutComponent
+      ),
+  },
+  {
+    path: 'jobForm',
+    loadComponent: () =>
+      import('./feature/jobForm/jobForm.component').then(
+        (m) => m.JobFormComponent
+      ),
   },
 ];
 export default JOB_ROUTES;
 
+

src/app/+admin/admin.routes.ts

@@ -7,12 +7,7 @@ const ADMIN_ROUTES: Route[] = [
     component: AdminLayoutComponent,
     children: [
       {
-        path: '',
-        pathMatch: 'full',
-        redirectTo: 'configuration',
-      },
-      {
-        path: 'jobs',
+        path: 'job-management',
         children: [
           {
             path: '',

src/app/+admin/layout/feature/ui/layout.component.html

@@ -2,22 +2,25 @@
   <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
     <div class="logo"></div>
     <ul nz-menu nzTheme="dark" nzMode="inline">
-      <li nz-submenu nzTitle="Management" nzIcon="user">
+      <li nz-submenu nzTitle="Quản lí công việc" nzIcon="user">
         <ul>
           <li
-          nz-menu-item
-          routerLink="/admin/management/job"
+            nz-menu-item
+            routerLink="/admin/job-management/jobLayout"
           >
-            Job
+            Danh sách công việc
           </li>
           <li
-          nz-menu-item
-          routerLink="/admin/management/job"
+            nz-menu-item
+            routerLink="/admin/job-management/jobForm"
           >
-            thêm công việc
+            Thêm công việc
           </li>
         </ul>
       </li>
+          <li nz-menu-item nzIcon="close" (click)="logout()">
+            Đăng xuất
+          </li>
     </ul>
   </nz-sider>
   <nz-layout>

src/app/+admin/layout/feature/ui/layout.component.ts

@@ -19,7 +19,6 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
     RouterLink,
     CommonModule,
     RouterModule,
-    DatePipe,
     HeaderComponent,
     FooterComponent,
     NzButtonModule,
@@ -37,5 +36,8 @@ export class AdminLayoutComponent implements OnInit {
   constructor() {}
   isCollapsed = false;
   ngOnInit(): void {}
-
+  logout() {
+    localStorage.clear();
+    window.location.href = '/login';
+  }
 }