list job

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

+export interface JobModel {
+  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;
+}

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 { Observable } from 'rxjs';
+import { environment } from '../../../../../../environments/environment.development';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class JobService {
+  apiUrl = environment.API_DOMAIN + '/jobs';
+  constructor(private http: HttpClient) {}
+
+  jobsGet(pageNumber: number, pageSize: number): Observable<any> {
+    const params = new HttpParams()
+      .set('pageNumber', pageNumber.toString())
+      .set('pageSize', pageSize.toString());
+    return this.http.get<any>(this.apiUrl, { params });
+  }
+}

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

+form ne

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

+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-job-form",
+  templateUrl: "./jobForm.component.html",
+  standalone: true,
+  imports: [CommonModule],
+})
+export class JobFormComponent {}

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>
+<app-job-list></app-job-list>

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

+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { RouterModule, RouterOutlet } from "@angular/router";
+import { JobListComponent } from "../jobList/jobList.component";
+import { JobFormComponent } from "../jobForm/jobForm.component";
+
+@Component({
+  selector: "app-jobLayout",
+  templateUrl: "./jobLayout.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    JobListComponent,
+    JobFormComponent
+  ],
+})
+export class JobLayoutComponent {
+  constructor() {}
+}
+

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

+<nz-table #JobTable [nzData]="listOfJob"
+    [nzLoading]="loading"
+    [nzFrontPagination]="true"
+    nzShowSizeChanger
+    [nzPageSize]="5"
+    >
+      <thead>
+        <tr>
+          <th>Job Id</th>
+          <th>Type</th>
+          <th>Title</th>
+          <th>Company</th>
+          <th>Location</th>
+          <th>Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (data of JobTable.data; track data) {
+          <tr>
+            <td>{{ listOfJob.indexOf(data) + 1 }}</td>
+            <td>{{ data.type }}</td>
+            <td>{{ data.title }}</td>
+            <td>{{ data.company }}</td>
+            <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>
+              </nz-space>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </nz-table>

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

+import { CommonModule } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+import { JobService } from "../../data-access/services/JobService.service";
+import { NzTableModule, NzTableQueryParams } from 'ng-zorro-antd/table';
+import { catchError, finalize, of, tap } from "rxjs";
+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';
+
+
+@Component({
+  selector: "app-job-list",
+  templateUrl: "./jobList.component.html",
+  standalone: true,
+  imports: [CommonModule,
+    NzTableModule,
+    NzDividerModule,
+    NzButtonModule,
+    NzSpaceModule
+  ],
+})
+export class JobListComponent implements OnInit {
+
+  total = 1;
+  listOfJob: JobModel[] = [];
+  loading = true;
+  pageSize = 15;
+  pageIndex = 1;
+
+  loadDataFromServer(
+    pageIndex: number,
+    pageSize: number
+  ): void {
+    this.loading = true;
+    this.jobService.jobsGet(pageIndex, pageSize).pipe(
+      tap((res) => {
+        this.loading = false;
+        this.total = res.total;
+        this.listOfJob = res.responseData.items;
+        console.log(this.listOfJob);
+      }),
+      catchError((err) => {
+        console.log(err);
+        return of(null);
+      })
+    ).subscribe();
+  }
+
+  constructor(private jobService: JobService) {}
+
+  ngOnInit(): void {
+    this.loadDataFromServer(this.pageIndex, this.pageSize);
+  }
+  onEdit(data: any) {
+    console.log(data);
+  }
+
+
+}

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

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

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

@@ -11,6 +11,16 @@ const ADMIN_ROUTES: Route[] = [
         pathMatch: 'full',
         redirectTo: 'configuration',
       },
+      {
+        path: 'jobs',
+        children: [
+          {
+            path: '',
+            loadChildren: () => import('./Management/job/job.routes'),
+          },
+        ]
+      }
+
     ],
   },
 ];

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

+<nz-footer>
+  <footer class="tw-bg-gray-900 tw-py-6 tw-text-center">
+    <div class="tw-container tw-mx-auto">
+      <p>© 2024 Meu Solution. All rights reserved.</p>
+      <p>Designed by Meu Solution</p>
+
+      <div class="tw-flex tw-justify-center tw-space-x-4 tw-mt-4">
+        <a href="#about" class=" hover:tw-text-blue-500">About Us</a>
+        <a href="#contact" class=" hover:tw-text-blue-500">Contact</a>
+        <a href="#privacy" class=" hover:tw-text-blue-500">Privacy Policy</a>
+      </div>
+
+      <div class="tw-flex tw-justify-center tw-space-x-4 tw-mt-4">
+        <a href="#" target="_blank" class=" hover:tw-text-blue-500">
+          <i nz-icon nzType="facebook" class="tw-text-2xl"></i>
+        </a>
+        <a href="#" target="_blank" class=" hover:tw-text-blue-500">
+          <i nz-icon nzType="twitter" class="tw-text-2xl"></i>
+        </a>
+        <a href="#" target="_blank" class=" hover:tw-text-blue-500">
+          <i nz-icon nzType="instagram" class="tw-text-2xl"></i>
+        </a>
+      </div>
+    </div>
+  </footer>
+
+
+
+</nz-footer>

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

+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
+@Component({
+  selector: 'meu-footer',
+  standalone: true,
+  imports: [CommonModule,
+    NzLayoutModule,
+    NzIconModule
+  ],
+  templateUrl: './footer.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FooterComponent implements OnInit {
+  ngOnInit(): void {}
+}

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

+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
+@Component({
+  selector: 'meu-header',
+  standalone: true,
+  imports: [CommonModule,NzLayoutModule],
+  templateUrl: './header.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeaderComponent implements OnInit {
+  ngOnInit(): void {}
+}

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

+<nz-layout>
+  <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">
+        <ul>
+          <li
+          nz-menu-item
+          routerLink="/admin/management/job"
+          >
+            Job
+          </li>
+          <li
+          nz-menu-item
+          routerLink="/admin/management/job"
+          >
+            thêm công việc
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nz-sider>
+  <nz-layout>
+    <meu-header></meu-header>
+    <nz-header>
+      <span
+        class="trigger"
+        nz-icon
+        [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
+        (click)="isCollapsed = !isCollapsed"
+      ></span>
+    </nz-header>
+    <nz-content>
+      <router-outlet></router-outlet>
+    </nz-content>
+    <meu-footer></meu-footer>
+  </nz-layout>
+</nz-layout>

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

+.trigger {
+  font-size: 18px;
+  line-height: 64px;
+  padding: 0 24px;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.trigger:hover {
+  color: #1890ff;
+}
+
+.logo {
+  height: 32px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 16px;
+}
+
+nz-header {
+  background: #fff;
+  padding: 0;
+}
+
+nz-content {
+  margin: 0 16px;
+}
+
+nz-breadcrumb {
+  margin: 16px 0;
+}
+
+.inner-content {
+  padding: 24px;
+  background: #fff;
+  min-height: 360px;
+}
+
+nz-footer {
+  text-align: center;
+}

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

@@ -2,27 +2,40 @@ import { RouterLink, RouterModule, RouterOutlet } from '@angular/router';
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
 
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
+import { HeaderComponent } from './Components/header/header.component';
+import { FooterComponent } from './Components/footer/footer.component';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzMenuModule } from 'ng-zorro-antd/menu';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 @Component({
   selector: 'admin-layout',
   standalone: true,
   imports: [
     RouterOutlet,
-    NzLayoutModule,
     RouterLink,
-    RouterModule,
     CommonModule,
+    RouterModule,
+    DatePipe,
+    HeaderComponent,
+    FooterComponent,
+    NzButtonModule,
+    NzBreadCrumbModule,
+    NzIconModule,
+    NzLayoutModule,
+    NzMenuModule,
+    NzToolTipModule,
   ],
-  template: ` <nz-content>
-    <div>
-      admin
-      <router-outlet></router-outlet>
-    </div>
-  </nz-content>`,
+  styleUrls: ['./layout.component.scss'],
+  templateUrl: './layout.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AdminLayoutComponent implements OnInit {
   constructor() {}
+  isCollapsed = false;
   ngOnInit(): void {}
+
 }

src/app/+login/data-access/guard/auth.guard.ts

@@ -10,7 +10,7 @@ export class AuthGuard implements CanActivate {
   canActivate(): boolean {
     const token = localStorage.getItem('token');
     if (token) {
-      this.router.navigate(['/home']);
+      this.router.navigate(['/admin']);
       return false;
     } else {
       return true;

src/app/+shell/ui/layout.component.html

-<nz-layout>
-  <nz-sider nzCollapsible nzWidth="200px">
-    <div class="logo"></div>
-    <ul nz-menu nzTheme="dark" nzMode="inline">
-      <li nz-menu-item>
-        <span nz-icon nzType="pie-chart"></span>
-        <span>Option 1</span>
-      </li>
-      <li nz-menu-item>
-        <span nz-icon nzType="desktop"></span>
-        <span>Option 2</span>
-      </li>
-      <li nz-submenu nzTitle="User" nzIcon="user">
-        <ul>
-          <li nz-menu-item>Tom</li>
-          <li nz-menu-item>Bill</li>
-          <li nz-menu-item>Alex</li>
-        </ul>
-      </li>
-      <li nz-submenu nzTitle="Team" nzIcon="team">
-        <ul>
-          <li nz-menu-item>Team 1</li>
-          <li nz-menu-item>Team 2</li>
-        </ul>
-      </li>
-      <li nz-menu-item>
-        <span nz-icon nzType="file"></span>
-        <span>File</span>
-      </li>
-    </ul>
-  </nz-sider>
-  <nz-layout>
-    <meu-header></meu-header>
-    <nz-content>
-      <nz-breadcrumb>
-        <nz-breadcrumb-item>User</nz-breadcrumb-item>
-        <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
-      </nz-breadcrumb>
-      <router-outlet></router-outlet>
-    </nz-content>
-    <meu-footer>Ant Design ©2020 Implement By Angular</meu-footer>
-  </nz-layout>
-</nz-layout>

src/app/+shell/ui/layout.component.ts

@@ -12,9 +12,8 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { HeaderComponent } from './components/header/feature/header.component';
 import { FooterComponent } from './components/footer/feature/footer.component';
+import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
-import { NzMenuModule } from 'ng-zorro-antd/menu';
-import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 
 @Component({
   selector: 'meu-layout',
@@ -28,11 +27,19 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
     NzIconModule,
     CommonModule,
     NzToolTipModule,
-    NzLayoutModule,
-    NzBreadCrumbModule,
-    NzMenuModule
+    NzLayoutModule
   ],
-  templateUrl: './layout.component.html',
+  template: `
+    <div class="tw-container">
+      <nz-layout>
+      <meu-header></meu-header>
+      <div class="tw-relative tw-min-h-[92dvh]">
+        <router-outlet></router-outlet>
+      </div>
+      <meu-footer></meu-footer>
+      </nz-layout>
+    </div>
+  `,
   animations: [],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })