update: admin-side, job management

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

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

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

+<p>This is footer</p>
\ No newline at end of file

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

+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
+
+@Component({
+    selector: 'meu-admin-footer',
+    standalone: true,
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.scss'],
+    imports: [
+      CommonModule,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+  })
+  export class AdminFooterComponent implements OnInit {
+    ngOnInit(): void {
+        
+    }
+  }
\ No newline at end of file

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

+<nz-layout>
+    <nz-header>
+        <img src="https://yt3.googleusercontent.com/y4J_Fs5ksRlxx6_LzT1VKxVqH_T8Vyn_RN_YYgLJhuMzBS5qxTgm7NlEcMkQd3hgCpfWtYcEUg=s900-c-k-c0x00ffffff-no-rj" class="tw-border tw-rounded-full tw-w-10 tw-h-10 tw-mt-3 tw-float-left tw-me-6">
+      <ul nz-menu nzTheme="dark" nzMode="horizontal" class="header-menu">
+        <li nz-menu-item nzSelected>Management</li>
+        <li nz-menu-item>Statistics</li>
+        <li nz-menu-item>Configurations</li>
+      </ul>
+    </nz-header>
+    <nz-layout>
+      <nz-sider nzWidth="200px" nzTheme="light">
+        <ul nz-menu nzMode="inline" class="sider-menu">
+          <li nz-submenu nzOpen nzIcon="user" nzTitle="Management">
+            <ul>
+              <li nz-menu-item routerLink="/admin/jobs" routerLinkActive="active">Jobs</li>
+              <li nz-menu-item>Business</li>
+            </ul>
+          </li>
+          <li nz-submenu nzTitle="subnav 2" nzIcon="laptop">
+            <ul>
+              <li nz-menu-item>option5</li>
+              <li nz-menu-item>option6</li>
+              <li nz-menu-item>option7</li>
+              <li nz-menu-item>option8</li>
+            </ul>
+          </li>
+          <li nz-submenu nzTitle="subnav 3" nzIcon="notification">
+            <ul>
+              <li nz-menu-item>option9</li>
+              <li nz-menu-item>option10</li>
+              <li nz-menu-item>option11</li>
+              <li nz-menu-item>option12</li>
+            </ul>
+          </li>
+        </ul>
+      </nz-sider>
+      <nz-layout class="inner-layout tw-relative tw-min-h-[92dvh]">
+        <ng-content></ng-content>
+      </nz-layout>
+    </nz-layout>
+  </nz-layout>
\ No newline at end of file

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

+.logo {
+    width: 120px;
+    height: 31px;
+    background: rgba(255, 255, 255, 0.2);
+    margin: 16px 30px 16px 0;
+    float: left;
+  }
+
+  .header-menu {
+    line-height: 64px;
+  }
+
+  .sider-menu {
+    height: 100%;
+    border-right: 0;
+  }
+
+  .inner-layout {
+    padding: 0 24px 24px;
+  }
+
+  nz-breadcrumb {
+    margin: 16px 0;
+  }
+
+  nz-content {
+    background: #fff;
+    padding: 24px;
+    min-height: 280px;
+  }
\ No newline at end of file

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

+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";
+import { RouterLink, RouterLinkActive, RouterOutlet } from "@angular/router";
+import { NzLayoutModule } from "ng-zorro-antd/layout";
+import { NzMenuModule } from "ng-zorro-antd/menu";
+
+@Component({
+    selector: 'meu-admin-header',
+    standalone: true,
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    imports: [
+      CommonModule,
+      NzLayoutModule,
+      NzMenuModule,
+      RouterOutlet,
+      RouterLink,
+      RouterLinkActive
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+  })
+  export class AdminHeaderComponent implements OnInit {
+    ngOnInit(): void {
+        
+    }
+  }
\ No newline at end of file

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

@@ -3,6 +3,9 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
 
 import { CommonModule } from '@angular/common';
+import { AdminHeaderComponent } from "./components/header/feature/header.component";
+import { AdminFooterComponent } from "./components/footer/feature/footer.component";
+import { JobListComponent } from "../../../management/job/feature/job-list.component";
 
 @Component({
   selector: 'admin-layout',
@@ -13,10 +16,18 @@ import { CommonModule } from '@angular/common';
     RouterLink,
     RouterModule,
     CommonModule,
-  ],
+    AdminHeaderComponent,
+    AdminFooterComponent,
+    JobListComponent
+],
   template: ` <nz-content>
-    <div>
-      <router-outlet></router-outlet>
+    <div class="tw-container">
+      <nz-layout>
+      <meu-admin-header>
+        <router-outlet></router-outlet>
+      </meu-admin-header>
+      <meu-admin-footer></meu-admin-footer>
+      </nz-layout>
     </div>
   </nz-content>`,
   changeDetection: ChangeDetectionStrategy.OnPush,

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

+export namespace Jobs {
+    export type Job = {
+        id:            null | string;
+        type:          string;
+        created_at:    string;
+        company:       string;
+        company_url:   string;
+        location:      string;
+        title:         string;  
+        description:   string;
+        how_to_apply?: string;
+        company_logo?: null | string;
+        url?:          string;
+    }
+
+    export interface GetResponse {
+        items: Job[];
+        total: number
+    }
+
+    export type GetRequest = {
+        
+    }
+
+    export interface Response {
+        newItem: Job
+    }
+
+    export type Request = {
+        id:            string;
+        type:          string;
+        created_at:    string;
+        company:       string;
+        company_url:   string;
+        location:      string;
+        title:         string;  
+        description:   string;
+        how_to_apply?: string;
+        company_logo?: null | string;
+        url?:          string;
+    }
+}
\ No newline at end of file

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

+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Jobs } from "../model/job-manager.model";
+import { ResponseResult, Rows } from "../../../../../shared/data-access/interface/response.type";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class JobManagerService {
+    constructor(private _http: HttpClient) {}
+
+    jobsGet(pageIndex: number = 1, pageSize: number = 5) {
+        return this._http.get<ResponseResult<Rows<Jobs.Job>>>('jobs', { 
+            params: {
+                page: pageIndex,
+                take: pageSize
+            }
+        });
+    }
+
+    jobsPost(request: Jobs.Request) {
+        return this._http.post<ResponseResult<Jobs.Response>>('jobs', request);
+    }
+
+    jobsPut(request: Jobs.Request) {
+        return this._http.put<ResponseResult<Jobs.Response>>('jobs', request);
+    }
+
+    jobsDelete(request: Jobs.Request) {
+        return this._http.delete<ResponseResult<Jobs.Response>>('jobs', {
+            body: request
+        });
+    }
+}
\ No newline at end of file

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

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { CommonModule } from '@angular/common';
+import { JobManagerService } from '../data-access/service/job-manager.service';
+import { catchError, of, tap } from 'rxjs';
+import { ResponseResult, Rows } from '../../../../shared/data-access/interface/response.type';
+import { Jobs } from '../data-access/model/job-manager.model';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+
+@Component({
+    selector: 'job-list',
+    standalone: true,
+    imports: [
+        CommonModule,
+        NzLayoutModule,
+        NzTableModule,
+        NzButtonModule
+    ],
+    template: `
+        <nz-content class="tw-my-3">
+            <button nz-button nzType="primary">Create new job</button>
+            <nz-table 
+                #rowTable
+                [nzData]="jobsList"
+                [nzPageSize]="5"
+                nzShowPagination
+                nzShowSizeChanger
+                [nzPageSizeOptions]="[5, 10, 25, 50, 100]"
+                class="tw-my-3"
+                >
+                <thead>
+                    <tr>
+                        <th class="tw-text-start">
+                            Title
+                        </th>
+                        <th class="tw-text-start">
+                            Company
+                        </th>
+                        <th class="tw-text-start">
+                            Created at
+                        </th>
+                        <th class="tw-text-start">
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let job of rowTable.data" class="tw-border-b">
+                        <td>
+                            <p>{{ job.title }}</p>
+                        </td>
+                        <td>
+                            <p>{{ job.company }}</p>
+                        </td>
+                        <td>
+                            <p>{{ job.created_at | date: 'dd/MM/yyyy' }}</p>
+                        </td>
+                        <td>
+                            <button nz-button nzType="primary" class="tw-mx-0.5">Edit</button>
+                            <button nz-button nzType="primary" nzDanger class="tw-mx-0.5">Delete</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </nz-table>
+        </nz-content>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class JobListComponent implements OnInit {
+
+    pageIndex: number = 1;
+    pageSize: number = 999;
+    jobsList: Jobs.Job[] = [];
+    @Output() pageIndexChange: EventEmitter<number> = new EventEmitter<number>;
+
+    constructor(private _service: JobManagerService, private _cdr: ChangeDetectorRef) { }
+    ngOnInit(): void {
+        this.getAllJobs(this.pageIndex, this.pageSize);
+    }
+
+    getAllJobs(pageIndex: number = 1, pageSize: number = 5) {
+        this._service.jobsGet(pageIndex, pageSize)
+            .pipe(
+                tap((response: ResponseResult<Rows<Jobs.Job>>) => {
+                    this.jobsList = response.responseData?.rows || [];
+                    console.log(this.jobsList);
+                    this._cdr.markForCheck();
+                }),
+                catchError((err) => {
+                    return of(null);
+                })
+            )
+            .subscribe();
+    }
+
+    onPageIndexChange(index: number) {
+        this.getAllJobs(index, this.pageSize);
+    }
+}

src/app/+admin/management/job/job-manager.routes.ts

+import { Route } from "@angular/router";
+
+const JOB_MANANGER_ROUTES: Route[] = [
+    {
+        path: '',
+        loadComponent: () =>
+            import('./feature/job-list.component').then((m) => m.JobListComponent),
+    }
+]
+export default JOB_MANANGER_ROUTES
\ No newline at end of file

src/app/+job/data-access/service/job.service.ts

-import { HttpClient, HttpParams, HttpRequest } from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { Jobs } from "../model/job.model";
 import { ResponseResult, Rows } from "../../../shared/data-access/interface/response.type";
-import { Observable, map } from "rxjs";
 
 @Injectable({
     providedIn: 'root'