update

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

@@ -98,7 +98,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
                     <nz-form-item>
                         <nz-form-control nzErrorTip="Please enter description!">
                             <nz-input-group>
-                            <textarea class="tw-border tw-rounded-lg tw-w-full tw-h-40" type="text" formControlName="description"></textarea>
+                            <textarea id=myTextarea class="tw-border tw-rounded-lg tw-w-full tw-h-40" type="text" formControlName="description"></textarea>
                             </nz-input-group>
                         </nz-form-control>
                     </nz-form-item>
@@ -115,20 +115,13 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
                 </div>
                 <div class="tw-col-span-full">
                     <label>Company Logo</label>
-                    <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>
+                    <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>
                 </div>
                 <div class="tw-col-span-full">
                     <label>Url</label>
@@ -164,21 +157,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
                 >
                 <thead>
                     <tr>
-                        <th nzWidth="100px">
-                            Ord.
-                        </th>
-                        <th nzWidth="100px">
-                            Title
-                        </th>
-                        <th nzWidth="100px">
-                            Company
-                        </th>
-                        <th nzWidth="100px"> 
-                            Created at
-                        </th>
-                        <th nzWidth="100px">
-                            Actions
-                        </th>
+                        <th *ngFor="let item of columnTitleItems" nzWidth="100px"> {{ item }} </th>
                     </tr>
                 </thead>
                 <tbody>
@@ -213,17 +192,13 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
         (nzPageIndexChange)="onPageIndexChange($event)"
         [nzPageIndex]="pageIndex"
         [nzPageSize]="pageSize"
-        [nzTotal]="jobsList?.itemCount || 0 * 10"
+        [nzTotal]="jobsList?.itemCount || 0"
       >
       </nz-pagination>
         <div class="tw-my-auto">
             <label>Item per page</label>
             <select class="tw-h-8 tw-border tw-ms-3" [(ngModel)]="pageSize" (change)="onPageSizeChanged()">
-                    <option value="5">5</option>
-                    <option value="10">10</option>
-                    <option value="25">25</option>
-                    <option value="50">50</option>
-                    <option value="100">100</option>
+                    <option *ngFor="let item of itemPerPagesItems" (value)="item">{{item}}</option>
             </select>
         </div>
       </div>
@@ -235,19 +210,19 @@ export class JobListComponent implements OnInit {
     pageIndex: number = 1;
     pageSize: number = 5;
     jobsList: Rows<JobApi.Response> | null = null;
-
     isDeleting: boolean = false;
     isEdit: boolean = false;
-
     searchString: string = "";
     deletetingId: string = "";
     edittingId: string = "";
-
     jobEdittingFormGroup: FormGroup;
-
     loading = false;
     avatarUrl?: string;
-    
+
+    jobTypeItems = ['Full Time', 'Part Time'];
+    columnTitleItems = ['Ord', 'Title', 'Company', 'Created at', 'Actions'];
+    itemPerPagesItems = [5, 10, 25, 50, 100];
+
     @Output() pageIndexChange: EventEmitter<number> = new EventEmitter<number>;
 
     constructor(
@@ -271,6 +246,7 @@ export class JobListComponent implements OnInit {
 
     ngOnInit(): void {
         this.getAllJobs(this.pageIndex, this.pageSize);
+
     }
 
     createNotification(type: string, title: string, message: string) {
@@ -394,27 +370,4 @@ 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/feature/job.component.html

@@ -7,22 +7,7 @@
     </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">
-      <a class="tw-border tw-p-1">Laravel</a>
-      <a class="tw-border tw-p-1">VueJS</a>
-      <a class="tw-border tw-p-1">React</a>
-      <a class="tw-border tw-p-1">.NET Core</a>
-      <a class="tw-border tw-p-1">SpringBoot</a>
-      <a class="tw-border tw-p-1">Java</a>
-      <a class="tw-border tw-p-1">Svelte</a>
-      <a class="tw-border tw-p-1">CodeIgniter</a>
-      <a class="tw-border tw-p-1">Flutter</a>
-      <a class="tw-border tw-p-1">React Native</a>
-      <a class="tw-border tw-p-1">DevOps</a>
-      <a class="tw-border tw-p-1">FLask</a>
-      <a class="tw-border tw-p-1">Django</a>
-      <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>
+      <a class="tw-border tw-p-1" *ngFor="let item of tagItems">{{ item }}</a>
     </div>
   </div>
   <div class="tw-flex tw-flex-row tw-flex-wrap tw-mt-6">

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

@@ -28,10 +28,10 @@ import { RouterLink } from '@angular/router';
 })
 export class JobComponent implements OnInit {
   jobList: Rows<Jobs.Job> | null = null;
-
   pageIndex: number = 1;
   pageSize: number = 5;
-
+  tagItems = ['Laravel', 'React', 'React Native', 'VueJS', 'Vite', 'Svelte', 'CodeIgniter', 'Flask', 'Python',
+    'C++', 'C', 'C#', 'Java', 'Dart', 'Flutter']
   @Output() pageIndexChange: EventEmitter<number> = new EventEmitter<number>;
 
   constructor(

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

@@ -12,7 +12,6 @@ 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';
 
 @Component({
@@ -37,7 +36,7 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
           <router-outlet></router-outlet>
         </div>
       </div>
-      <meu-footer></meu-footer>
+      <meu-footer></meu-footer>                                  
       </nz-layout>
     </div>
   `,
@@ -52,7 +51,7 @@ export class LayoutComponent implements OnInit {
     this.breakpointObserver.observe([Breakpoints.Handset]).subscribe((res) => {
       this.isSmallScreen.set(res.matches);
     });
-
+    
     if (
       typeof window !== 'undefined' &&
       window.matchMedia('(prefers-color-scheme: dark)').matches

src/index.html

@@ -9,6 +9,8 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
           integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
           crossorigin="anonymous" referrerpolicy="no-referrer"/>
+  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
+
 </head>
 <body>
   <app-root></app-root>