update

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

@@ -3,7 +3,7 @@ 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 { Observable, Observer, catchError, of, tap } from 'rxjs';
 import { ResponseResult, Rows } from '../../../../shared/data-access/interface/response.type';
 import { JobApi } from '../data-access/model/job-manager.model';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -13,6 +13,7 @@ import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators }
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
 
 @Component({
     selector: 'job-list',
@@ -27,7 +28,8 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
         ReactiveFormsModule,
         NzFormModule,
         NzIconModule,
-        FormsModule
+        FormsModule,
+        NzUploadModule,
     ],
     styles: `
         nz-table[_ngcontent-jjj-c198] nz-pagination[_ngcontent-jjj-c198] {
@@ -113,20 +115,27 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
                 </div>
                 <div class="tw-col-span-full">
                     <label>Company Logo</label>
-                    <nz-form-item>
-                        <nz-form-control nzErrorTip="Please enter Company Logo!">
-                            <nz-input-group>
-                            <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company_logo">
-                            </nz-input-group>
-                        </nz-form-control>
-                    </nz-form-item>
+                    <nz-upload
+                        class="avatar-uploader"
+                        nzName="avatar"
+                        nzListType="picture-card"
+                        [nzShowUploadList]="false"
+                        (nzChange)="handleChange($event)"
+                        >
+                        @if (!avatarUrl) {
+                            <span class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></span>
+                            <div class="ant-upload-text">Upload</div>
+                        } @else {
+                            <img [src]="avatarUrl" style="width: 100%" />
+                        }
+                    </nz-upload>
                 </div>
                 <div class="tw-col-span-full">
                     <label>Url</label>
                     <nz-form-item>
                         <nz-form-control nzErrorTip="Please enter Url!">
                             <nz-input-group>
-                            <input [(ngModel)]="searchString" (change)="getAllJobs()" class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="url">
+                            <input (change)="getAllJobs()" class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="url">
                             </nz-input-group>
                         </nz-form-control>
                     </nz-form-item>
@@ -187,8 +196,12 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
                             <p>{{ job.created_at | date: 'dd/MM/yyyy' }}</p>
                         </td>
                         <td>
-                            <button nz-button nzType="primary" class="tw-mx-0.5" (click)="onEditOpen(job.id)">Edit</button>
-                            <button nz-button nzType="primary" nzDanger class="tw-mx-0.5" (click)="showConfirmModal(job.id)">Delete</button>
+                            <button nz-button nzType="primary" nzShape="circle" class="tw-mx-0.5" (click)="onEditOpen(job.id)">
+                                <span nz-icon nzType="edit" nzTheme="outline"></span>
+                            </button>
+                            <button nz-button nzType="primary" nzDanger nzShape="circle" class="tw-mx-0.5" (click)="showConfirmModal(job.id)">
+                                <span nz-icon nzType="delete" nzTheme="outline"></span>
+                            </button>
                         </td>
                     </tr>
                 </tbody>
@@ -223,22 +236,25 @@ export class JobListComponent implements OnInit {
     pageSize: number = 5;
     jobsList: Rows<JobApi.Response> | null = null;
 
-    searchString: string = "";
-
     isDeleting: boolean = false;
-    deletetingId: string = "";
-
     isEdit: boolean = false;
+
+    searchString: string = "";
+    deletetingId: string = "";
     edittingId: string = "";
+
     jobEdittingFormGroup: FormGroup;
 
+    loading = false;
+    avatarUrl?: string;
+    
     @Output() pageIndexChange: EventEmitter<number> = new EventEmitter<number>;
 
     constructor(
         private _service: JobManagerService,
-        private _cdr: ChangeDetectorRef,
         private _fb: FormBuilder,
-        private _notification: NzNotificationService
+        private _notification: NzNotificationService,
+        private _cdr: ChangeDetectorRef,
     ) {
         this.jobEdittingFormGroup = this._fb.group({
             type: ['Full Time', Validators.required],
@@ -287,7 +303,6 @@ export class JobListComponent implements OnInit {
     onPageSizeChanged() {
         this.pageIndex = 1;
         this.getAllJobs(this.pageIndex, this.pageSize);
-        console.log(this.pageSize)
     }
 
     showConfirmModal(id: string) {
@@ -379,4 +394,27 @@ export class JobListComponent implements OnInit {
             )
             .subscribe();
     }
+
+    private getBase64(img: File, callback: (img: string) => void): void {
+        const reader = new FileReader();
+        reader.addEventListener('load', () => callback(reader.result!.toString()));
+        reader.readAsDataURL(img);
+    }
+
+    handleChange(info: { file: NzUploadFile }): void {
+        switch (info.file.status) {
+        case 'uploading':
+            this.loading = true;
+            break;
+        case 'done':
+            this.getBase64(info.file!.originFileObj!, (img: string) => {
+            this.loading = false;
+            this.avatarUrl = img;
+            });
+            break;
+        case 'error':
+            this.loading = false;
+            break;
+        }
+    }
 }

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

@@ -4,6 +4,12 @@ export namespace Jobs {
         total: number
     }
 
+    export interface Request {
+        filters: {
+            searchString? : string;
+        }
+    }
+    
     export interface Job {
         id:            null | string;
         type:          string;

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

@@ -17,7 +17,7 @@ export class JobService {
                 'jobs', {
                 params: {
                     page: index,
-                    take: pageSize
+                    take: pageSize,
                 }
             });
     }

src/app/+job/feature/+job_detail/job-detail.component.ts

 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { JobApi } from '../../../+admin/management/job/data-access/model/job-manager.model';
 import { JobService } from '../../data-access/service/job.service';
 import { ActivatedRoute } from '@angular/router';
 import { catchError, of, tap } from 'rxjs';
 import { Jobs } from '../../data-access/model/job.model';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
     selector: 'job-detail',
     standalone: true,
+    imports: [
+        NzButtonModule
+    ],
     template: `
         <div class="tw-w-full tw-gap-y-2 tw-flex tw-flex-col">
             <p class="tw-text-2xl tw-font-bold tw-border-b">{{ job?.title }}</p>
             <p> {{ job?.created_at }} by {{ job?.company }} </p>
-            <div class="tw-flex tw-gap-y-2 tw-gap-x-3">
+            <div class="tw-bg-wind tw-shadow-md tw-p-3 tw-my-3">
+                <div class="tw-flex tw-gap-y-2 tw-gap-x-3 tw-text-md">
                     <span class="tw-bg-black tw-p-2 tw-rounded-lg tw-text-white tw-my-auto">{{ job?.type }}</span>
                     <span class="tw-my-auto"><i class="fa-solid fa-location-dot"></i> {{ job?.location }} </span>
+                    <span class="tw-my-auto"><i class="fa-solid fa-comments-dollar"></i> Negotiable</span>
+                    <div class="tw-my-auto tw-flex-1 tw-text-end">
+                        <button class="tw-text-md" nz-button nzType="primary" nzShape="round">Apply now!</button>
                     </div>
-            <div>
-                <div class="tw-bg-sky tw-rounded-lg tw-px-3 tw-py-2 tw-flex tw-gap-x-6 tw-shadow-xl">
+                </div>
+            </div>
+            
+            <div class="tw-relative tw-min-h-72">
+                <img class="tw-w-full tw-h-52 tw-object-cover tw-blur-sm" src="https://status.riotgames.com/static/media/riotSelectorMobile.480c8eae.png">
+                <div class="tw-absolute tw-top-28 tw-bg-wind tw-rounded-lg tw-px-3 tw-py-2 tw-flex tw-gap-x-6 tw-shadow-xl tw-m-6">
                     <img class="tw-rounded-full tw-object-cover tw-h-20 tw-w-20" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAGvRhdg1vaZyhkn5zzE7p35e70SUgv0TVCw&s">
-                    <div>
+                    <div class="tw-h-36">
                         <div class="tw-border-b tw-flex tw-justify-between">
                             <p class="tw-text-lg tw-font-semibold"> {{ job?.company }}</p>
                             <span>
                                 <a class="tw-text-link tw-font-semibold" href="{{job?.company_url}}">Website</a>
                                 &nbsp;
-                                <a class="tw-text-link tw-font-semibold" href="{{job?.company_url}}">How to apply</a>
                             </span>
                         </div>
                         <div>
-                            <p class="tw-text-lg"> {{ job?.company }} is a company that we are creating values through bla bla bla bla
-                            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
+                            <p class="tw-text-lg tw-line-clamp-4"> {{ job?.company }} was founded in 2006 to develop, publish, and support the most player-focused games in the world. As we went from one game to many, we have expanded to over 4,500 Rioters across more than 20 offices around the world bringing a global perspective to the games we create and the characters in them. From the streets of Piltover to the Radianite labs of Alpha Earth, we are all about making games and serving the people who love them.</p>
                         </div>
                     </div>
                 </div>
-                <div class="tw-mt-6 tw-text-lg" [innerHTML]="job?.description">
-                    
             </div>
+            <div class="tw-mt-6 tw-text-lg" [innerHTML]="job?.description">        
             </div>
         </div>
     `,

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

 <div class="tw-max-w-3xl tw-mx-auto">
   <div class="tw-w-full">
-    <p class="tw-text-lg tw-font-semibold">Search for your dream job...!</p>
+    <p class="tw-text-lg tw-font-semibold tw-my-3">Search for your dream job...!</p>
     <div class="tw-flex tw-gap-x-3">
-      <input class="tw-h-8 tw-shadow-md tw-border tw-rounded-md tw-w-full tw-flex-1 tw-px-2" placeholder="Location, Title,...">
-      <button type="button" class="tw-h-8 tw-shadow-md tw-border tw-rounded-md tw-bg-sky">Search</button>
+        <input class="tw-h-8 tw-shadow-md tw-border tw-rounded-md tw-border-light-gray tw-w-full tw-flex-1 tw-px-2" placeholder="Location, Title,...">
+        <button type="button" class="tw-h-8 tw-shadow-md tw-border tw-border-light-gray tw-rounded-md tw-bg-sky tw-px-3">Search</button>
     </div>
     <p class="tw-text-lg tw-font-semibold tw-mt-3">Suggested keywords:</p>
     <div class="tw-flex tw-flex-wrap tw-gap-x-3 tw-gap-y-1 tw-my-3">
@@ -23,12 +23,11 @@
       <a class="tw-border tw-p-1">GoLang</a>
       <a class="tw-border tw-p-1">Wizard</a>
       <a class="tw-border tw-p-1">NodeJS</a>
-</div>
     </div>
-  
+  </div>
   <div class="tw-flex tw-flex-row tw-flex-wrap tw-mt-6">
     <nz-card
-      *ngFor="let job of jobList?.rows"
+      *ngFor="let job of jobList?.rows; let idx = index"
       class="tw-w-full tw-my-1"
       [nzTitle]="job.title"
       [nzExtra]="companyLink"
@@ -39,8 +38,10 @@
       <div class="tw-flex tw-flex-row tw-flex-wrap tw-gap-3">
         <div class="tw-pointer-events-auto tw-flex">
           <nz-avatar
+            nzShape="square"
+            [nzSize]="64"
             class="tw-my-auto"
-            nzSrc="{{ job.company_logo }}"
+            [nzSrc]="'https://loremflickr.com/200/200?random=' + rand() + idx"
           ></nz-avatar>
         </div>
         <div>

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

@@ -62,4 +62,8 @@ export class JobComponent implements OnInit {
     )
     .subscribe();
   }
+
+  rand() {
+    return Math.floor(Math.random() * 20000);
+  }
 }

tailwind.config.js

@@ -30,7 +30,13 @@ module.exports = {
       black: "#000000",
       sky: "#a3e4ff",
       link: "#1484b2",
-      wind: "#def6ff"
+      wind: "#def6ff",
+      orange: "#ff9957",
+      yellow: "##fffa57",
+      teal: "#7ffff3",
+      "hard-gray": "#8b8b8b",
+      "light-gray": "#dcdcdc",
+      "light-purple": "#e5c1ff"
     },
     fontFamily: {
       "roboto-black": ["Roboto-Black", "sans-serif"],