Skip to content

M
Meu-Template-Angular-CSR
Commit 78cc8c91 authored by vtduong0912's avatar vtduong0912
Browse files
Options

update

parent 7fce6108
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 60 deletions
src/app/+admin/management/job/feature/job-list.component.ts
View file @ 78cc8c91
...@@ -3,7 +3,7 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout'; ...@@ -3,7 +3,7 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzTableModule } from 'ng-zorro-antd/table'; import { NzTableModule } from 'ng-zorro-antd/table';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { JobManagerService } from '../data-access/service/job-manager.service'; 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 { ResponseResult, Rows } from '../../../../shared/data-access/interface/response.type';
import { JobApi } from '../data-access/model/job-manager.model'; import { JobApi } from '../data-access/model/job-manager.model';
import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzButtonModule } from 'ng-zorro-antd/button';
...@@ -13,6 +13,7 @@ import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } ...@@ -13,6 +13,7 @@ import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators }
import { NzFormModule } from 'ng-zorro-antd/form'; import { NzFormModule } from 'ng-zorro-antd/form';
import { NzNotificationService } from 'ng-zorro-antd/notification'; import { NzNotificationService } from 'ng-zorro-antd/notification';
import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
@Component({ @Component({
selector: 'job-list', selector: 'job-list',
...@@ -27,7 +28,8 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; ...@@ -27,7 +28,8 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
ReactiveFormsModule, ReactiveFormsModule,
NzFormModule, NzFormModule,
NzIconModule, NzIconModule,
FormsModule FormsModule,
NzUploadModule,
], ],
styles: ` styles: `
nz-table[_ngcontent-jjj-c198] nz-pagination[_ngcontent-jjj-c198] { nz-table[_ngcontent-jjj-c198] nz-pagination[_ngcontent-jjj-c198] {
...@@ -113,20 +115,27 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; ...@@ -113,20 +115,27 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
</div> </div>
<div class="tw-col-span-full"> <div class="tw-col-span-full">
<label>Company Logo</label> <label>Company Logo</label>
<nz-form-item> <nz-upload
<nz-form-control nzErrorTip="Please enter Company Logo!"> class="avatar-uploader"
<nz-input-group> nzName="avatar"
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company_logo"> nzListType="picture-card"
</nz-input-group> [nzShowUploadList]="false"
</nz-form-control> (nzChange)="handleChange($event)"
</nz-form-item> >
@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>
<div class="tw-col-span-full"> <div class="tw-col-span-full">
<label>Url</label> <label>Url</label>
<nz-form-item> <nz-form-item>
<nz-form-control nzErrorTip="Please enter Url!"> <nz-form-control nzErrorTip="Please enter Url!">
<nz-input-group> <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-input-group>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
...@@ -187,8 +196,12 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; ...@@ -187,8 +196,12 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
<p>{{ job.created_at | date: 'dd/MM/yyyy' }}</p> <p>{{ job.created_at | date: 'dd/MM/yyyy' }}</p>
</td> </td>
<td> <td>
<button nz-button nzType="primary" class="tw-mx-0.5" (click)="onEditOpen(job.id)">Edit</button> <button nz-button nzType="primary" nzShape="circle" class="tw-mx-0.5" (click)="onEditOpen(job.id)">
<button nz-button nzType="primary" nzDanger class="tw-mx-0.5" (click)="showConfirmModal(job.id)">Delete</button> <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> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -223,22 +236,25 @@ export class JobListComponent implements OnInit { ...@@ -223,22 +236,25 @@ export class JobListComponent implements OnInit {
pageSize: number = 5; pageSize: number = 5;
jobsList: Rows<JobApi.Response> | null = null; jobsList: Rows<JobApi.Response> | null = null;
searchString: string = "";
isDeleting: boolean = false; isDeleting: boolean = false;
deletetingId: string = "";
isEdit: boolean = false; isEdit: boolean = false;
searchString: string = "";
deletetingId: string = "";
edittingId: string = ""; edittingId: string = "";
jobEdittingFormGroup: FormGroup; jobEdittingFormGroup: FormGroup;
loading = false;
avatarUrl?: string;
@Output() pageIndexChange: EventEmitter<number> = new EventEmitter<number>; @Output() pageIndexChange: EventEmitter<number> = new EventEmitter<number>;
constructor( constructor(
private _service: JobManagerService, private _service: JobManagerService,
private _cdr: ChangeDetectorRef,
private _fb: FormBuilder, private _fb: FormBuilder,
private _notification: NzNotificationService private _notification: NzNotificationService,
private _cdr: ChangeDetectorRef,
) { ) {
this.jobEdittingFormGroup = this._fb.group({ this.jobEdittingFormGroup = this._fb.group({
type: ['Full Time', Validators.required], type: ['Full Time', Validators.required],
...@@ -287,7 +303,6 @@ export class JobListComponent implements OnInit { ...@@ -287,7 +303,6 @@ export class JobListComponent implements OnInit {
onPageSizeChanged() { onPageSizeChanged() {
this.pageIndex = 1; this.pageIndex = 1;
this.getAllJobs(this.pageIndex, this.pageSize); this.getAllJobs(this.pageIndex, this.pageSize);
console.log(this.pageSize)
} }
showConfirmModal(id: string) { showConfirmModal(id: string) {
...@@ -379,4 +394,27 @@ export class JobListComponent implements OnInit { ...@@ -379,4 +394,27 @@ export class JobListComponent implements OnInit {
) )
.subscribe(); .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
View file @ 78cc8c91
...@@ -3,6 +3,12 @@ export namespace Jobs { ...@@ -3,6 +3,12 @@ export namespace Jobs {
items: Job[]; items: Job[];
total: number total: number
} }
export interface Request {
filters: {
searchString? : string;
}
}
export interface Job { export interface Job {
id: null | string; id: null | string;
......
src/app/+job/data-access/service/job.service.ts
View file @ 78cc8c91
...@@ -17,7 +17,7 @@ export class JobService { ...@@ -17,7 +17,7 @@ export class JobService {
'jobs', { 'jobs', {
params: { params: {
page: index, page: index,
take: pageSize take: pageSize,
} }
}); });
} }
......
src/app/+job/feature/+job_detail/job-detail.component.ts
View file @ 78cc8c91
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; 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 { JobService } from '../../data-access/service/job.service';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { catchError, of, tap } from 'rxjs'; import { catchError, of, tap } from 'rxjs';
import { Jobs } from '../../data-access/model/job.model'; import { Jobs } from '../../data-access/model/job.model';
import { NzButtonModule } from 'ng-zorro-antd/button';
@Component({ @Component({
selector: 'job-detail', selector: 'job-detail',
standalone: true, standalone: true,
imports: [
NzButtonModule
],
template: ` template: `
<div class="tw-w-full tw-gap-y-2 tw-flex tw-flex-col"> <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 class="tw-text-2xl tw-font-bold tw-border-b">{{ job?.title }}</p>
<p> {{ job?.created_at }} by {{ job?.company }} </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">
<span class="tw-bg-black tw-p-2 tw-rounded-lg tw-text-white tw-my-auto">{{ job?.type }}</span> <div class="tw-flex tw-gap-y-2 tw-gap-x-3 tw-text-md">
<span class="tw-my-auto"><i class="fa-solid fa-location-dot"></i> {{ job?.location }} </span> <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> </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 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"> <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"> <div class="tw-border-b tw-flex tw-justify-between">
<p class="tw-text-lg tw-font-semibold"> {{ job?.company }}</p> <p class="tw-text-lg tw-font-semibold"> {{ job?.company }}</p>
<span> <span>
<a class="tw-text-link tw-font-semibold" href="{{job?.company_url}}">Website</a> <a class="tw-text-link tw-font-semibold" href="{{job?.company_url}}">Website</a>
&nbsp; &nbsp;
<a class="tw-text-link tw-font-semibold" href="{{job?.company_url}}">How to apply</a>
</span> </span>
</div> </div>
<div> <div>
<p class="tw-text-lg"> {{ job?.company }} is a company that we are creating values through bla bla bla bla <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>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
</div> </div>
</div> </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> </div>
</div> </div>
`, `,
......
src/app/+job/feature/job.component.html
View file @ 78cc8c91
<div class="tw-max-w-3xl tw-mx-auto"> <div class="tw-max-w-3xl tw-mx-auto">
<div class="tw-w-full"> <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"> <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,..."> <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-rounded-md tw-bg-sky">Search</button> <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> </div>
<p class="tw-text-lg tw-font-semibold tw-mt-3">Suggested keywords:</p> <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"> <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">Laravel</a>
<a class="tw-border tw-p-1">VueJS</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">React</a>
<a class="tw-border tw-p-1">.NET Core</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">SpringBoot</a>
<a class="tw-border tw-p-1">Java</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">Svelte</a>
<a class="tw-border tw-p-1">CodeIgniter</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">Flutter</a>
<a class="tw-border tw-p-1">React Native</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">DevOps</a>
<a class="tw-border tw-p-1">FLask</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">Django</a>
<a class="tw-border tw-p-1">GoLang</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">Wizard</a>
<a class="tw-border tw-p-1">NodeJS</a> <a class="tw-border tw-p-1">NodeJS</a>
</div> </div>
</div> </div>
<div class="tw-flex tw-flex-row tw-flex-wrap tw-mt-6"> <div class="tw-flex tw-flex-row tw-flex-wrap tw-mt-6">
<nz-card <nz-card
*ngFor="let job of jobList?.rows" *ngFor="let job of jobList?.rows; let idx = index"
class="tw-w-full tw-my-1" class="tw-w-full tw-my-1"
[nzTitle]="job.title" [nzTitle]="job.title"
[nzExtra]="companyLink" [nzExtra]="companyLink"
...@@ -39,8 +38,10 @@ ...@@ -39,8 +38,10 @@
<div class="tw-flex tw-flex-row tw-flex-wrap tw-gap-3"> <div class="tw-flex tw-flex-row tw-flex-wrap tw-gap-3">
<div class="tw-pointer-events-auto tw-flex"> <div class="tw-pointer-events-auto tw-flex">
<nz-avatar <nz-avatar
nzShape="square"
[nzSize]="64"
class="tw-my-auto" class="tw-my-auto"
nzSrc="{{ job.company_logo }}" [nzSrc]="'https://loremflickr.com/200/200?random=' + rand() + idx"
></nz-avatar> ></nz-avatar>
</div> </div>
<div> <div>
......
src/app/+job/feature/job.component.ts
View file @ 78cc8c91
...@@ -62,4 +62,8 @@ export class JobComponent implements OnInit { ...@@ -62,4 +62,8 @@ export class JobComponent implements OnInit {
) )
.subscribe(); .subscribe();
} }
rand() {
return Math.floor(Math.random() * 20000);
}
} }
tailwind.config.js
View file @ 78cc8c91
...@@ -30,7 +30,13 @@ module.exports = { ...@@ -30,7 +30,13 @@ module.exports = {
black: "#000000", black: "#000000",
sky: "#a3e4ff", sky: "#a3e4ff",
link: "#1484b2", link: "#1484b2",
wind: "#def6ff" wind: "#def6ff",
orange: "#ff9957",
yellow: "##fffa57",
teal: "#7ffff3",
"hard-gray": "#8b8b8b",
"light-gray": "#dcdcdc",
"light-purple": "#e5c1ff"
}, },
fontFamily: { fontFamily: {
"roboto-black": ["Roboto-Black", "sans-serif"], "roboto-black": ["Roboto-Black", "sans-serif"],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment