Skip to content

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

update

parent 6b447bc1
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 60 deletions
src/app/+admin/management/job/feature/job-form.component.ts
View file @ 7595efc7
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzModalModule } from 'ng-zorro-antd/modal'; import { NzModalModule } from 'ng-zorro-antd/modal';
import { JobManagerService } from '../data-access/service/job-manager.service'; import { JobManagerService } from '../data-access/service/job-manager.service';
import { ResponseResult } from '../../../../shared/data-access/interface/response.type'; import { ResponseResult } 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 { NzNotificationService } from 'ng-zorro-antd/notification'
import { catchError, of, tap } from 'rxjs'; import { catchError, of, tap } from 'rxjs';
import { NzFormModule } from 'ng-zorro-antd/form';
@Component({ @Component({
selector: 'job-form', selector: 'job-form',
...@@ -13,15 +15,16 @@ import { catchError, of, tap } from 'rxjs'; ...@@ -13,15 +15,16 @@ import { catchError, of, tap } from 'rxjs';
imports: [ imports: [
NzButtonModule, NzButtonModule,
NzModalModule, NzModalModule,
ReactiveFormsModule ReactiveFormsModule,
NzFormModule
], ],
template: ` template: `
<div class="tw-w-full tw-grid tw-justify-items-end"> <div class="tw-w-full tw-grid tw-justify-items-end">
<button nz-button nzType="primary" (click)="isCreate = true">Create new job</button> <button nz-button nzType="primary" (click)="isCreate = true">Create new job</button>
</div> </div>
<nz-modal [(nzVisible)]="isCreate" nzTitle="Create new job" nzCancelText="Cancel" nzOkText="Create" (nzOnCancel)="isCreate = false" (nzOnOk)="isCreate = false; onCreateSubmit()"> <nz-modal [(nzVisible)]="isCreate" nzTitle="Create new job" nzCancelText="Cancel" nzOkText="Create" (nzOnCancel)="isCreate = false" (nzOnOk)="onCreateSubmit()">
<ng-container *nzModalContent> <ng-container *nzModalContent>
<form [formGroup]="jobCreatingFormGroup"> <form nz-form [formGroup]="jobCreatingFormGroup">
<div class="tw-flex tw-flex-col tw-flex-wrap tw-gap-y-1"> <div class="tw-flex tw-flex-col tw-flex-wrap tw-gap-y-1">
<label>Type</label> <label>Type</label>
<select class="tw-border tw-rounded-lg tw-h-8" formControlName="type"> <select class="tw-border tw-rounded-lg tw-h-8" formControlName="type">
...@@ -29,21 +32,69 @@ import { catchError, of, tap } from 'rxjs'; ...@@ -29,21 +32,69 @@ import { catchError, of, tap } from 'rxjs';
<option value="Part Time">Part Time</option> <option value="Part Time">Part Time</option>
</select> </select>
<label>Company</label> <label>Company</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="company"> <nz-form-item>
<nz-form-control nzErrorTip="Please enter company!">
<nz-input-group>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>Company Url</label> <label>Company Url</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="company_url"> <nz-form-item>
<nz-form-control nzErrorTip="Please enter company url!">
<nz-input-group>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company_url">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>Location</label> <label>Location</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="location"> <nz-form-item>
<label>Tilte</label> <nz-form-control nzErrorTip="Please enter location!">
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="title"> <nz-input-group>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="location">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>Title</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter title!">
<nz-input-group>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="title">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>Description</label> <label>Description</label>
<textarea class="tw-border tw-rounded-lg tw-h-20" type="text" formControlName="description"></textarea> <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-20" type="text" formControlName="description"></textarea>
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>How to Apply</label> <label>How to Apply</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="how_to_apply"> <nz-form-item>
<nz-form-control nzErrorTip="Please enter 'How to Apply'!">
<nz-input-group>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="how_to_apply">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>Company Logo</label> <label>Company Logo</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="company_logo"> <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>
<label>Url</label> <label>Url</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="url"> <nz-form-item>
<nz-form-control nzErrorTip="Please enter Url!">
<nz-input-group>
<input 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>
</div> </div>
</form> </form>
</ng-container> </ng-container>
...@@ -51,13 +102,15 @@ import { catchError, of, tap } from 'rxjs'; ...@@ -51,13 +102,15 @@ import { catchError, of, tap } from 'rxjs';
` `
}) })
export class JobFormComponent implements OnInit { export class JobFormComponent {
@Output() ReloadData = new EventEmitter();
isCreate: boolean = false; isCreate: boolean = false;
jobCreatingFormGroup: FormGroup; jobCreatingFormGroup: FormGroup;
constructor(private _fb: FormBuilder, private _service: JobManagerService) { constructor(private _fb: FormBuilder,
private _service: JobManagerService,
private _notification: NzNotificationService) {
this.jobCreatingFormGroup = this._fb.group({ this.jobCreatingFormGroup = this._fb.group({
type: ['Full Time', Validators.required], type: ['Full Time', Validators.required],
company: ['', Validators.required], company: ['', Validators.required],
...@@ -71,8 +124,12 @@ export class JobFormComponent implements OnInit { ...@@ -71,8 +124,12 @@ export class JobFormComponent implements OnInit {
}); });
} }
ngOnInit() { createNotification(type: string, title: string, message: string): void {
this._notification.create(
type,
title,
message
);
} }
onCreateSubmit() { onCreateSubmit() {
...@@ -90,18 +147,23 @@ export class JobFormComponent implements OnInit { ...@@ -90,18 +147,23 @@ export class JobFormComponent implements OnInit {
this._service.jobsPost(data) this._service.jobsPost(data)
.pipe( .pipe(
tap((response: ResponseResult<JobApi.Request>) => { tap((response: ResponseResult<JobApi.Request>) => {
console.log(response); this.createNotification(
'success',
'Success!',
'You have created a new job successfully!'
);
this.ReloadData.emit();
}), }),
catchError((err) => { catchError((err) => {
this.createNotification(
'error',
'Error!',
'An error has occurred! Please try later!'
)
return of(null); return of(null);
}) })
) )
.subscribe(); .subscribe();
this.isCreate = false;
} }
onEditSubmit() {
}
} }
\ No newline at end of file
src/app/+admin/management/job/feature/job-list.component.ts
View file @ 7595efc7
...@@ -10,8 +10,8 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; ...@@ -10,8 +10,8 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzModalModule } from 'ng-zorro-antd/modal'; import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzPaginationModule } from 'ng-zorro-antd/pagination'; import { NzPaginationModule } from 'ng-zorro-antd/pagination';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { response } from 'express';
import { NzFormModule } from 'ng-zorro-antd/form'; import { NzFormModule } from 'ng-zorro-antd/form';
import { NzNotificationService } from 'ng-zorro-antd/notification';
@Component({ @Component({
selector: 'job-list', selector: 'job-list',
...@@ -46,30 +46,70 @@ import { NzFormModule } from 'ng-zorro-antd/form'; ...@@ -46,30 +46,70 @@ import { NzFormModule } from 'ng-zorro-antd/form';
<option value="Full Time">Full Time</option> <option value="Full Time">Full Time</option>
<option value="Part Time">Part Time</option> <option value="Part Time">Part Time</option>
</select> </select>
<label>Company</label>
<nz-form-item> <nz-form-item>
<label>Company</label> <nz-form-control nzErrorTip="Please enter company!">
<nz-form-control nzErrorTip="Please input your username!"> <nz-input-group>
<nz-input-group class="tw-h-12"> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company">
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="company"> </nz-input-group>
</nz-input-group>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<label>Company Url</label> <label>Company Url</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="company_url"> <nz-form-item>
<nz-form-control nzErrorTip="Please enter company url!">
<nz-input-group>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company_url">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>Location</label> <label>Location</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="location"> <nz-form-item>
<label>Tilte</label> <nz-form-control nzErrorTip="Please enter location!">
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="title"> <nz-input-group>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="location">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>Title</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter title!">
<nz-input-group>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="title">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>Description</label> <label>Description</label>
<textarea class="tw-border tw-rounded-lg tw-h-20" type="text" formControlName="description"></textarea> <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-20" type="text" formControlName="description"></textarea>
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>How to Apply</label> <label>How to Apply</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="how_to_apply"> <nz-form-item>
<nz-form-control nzErrorTip="Please enter 'How to Apply'!">
<nz-input-group>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="how_to_apply">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<label>Company Logo</label> <label>Company Logo</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="company_logo"> <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>
<label>Url</label> <label>Url</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="url"> <nz-form-item>
<nz-form-control nzErrorTip="Please enter Url!">
<nz-input-group>
<input 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>
</div> </div>
</form> </form>
</ng-container> </ng-container>
...@@ -144,7 +184,7 @@ export class JobListComponent implements OnInit { ...@@ -144,7 +184,7 @@ export class JobListComponent implements OnInit {
deletetingId: string = ""; deletetingId: string = "";
isEdit: boolean = false; isEdit: boolean = false;
edittingId: string = ""; edittingId: string = "";
jobEdittingFormGroup: FormGroup; jobEdittingFormGroup: FormGroup;
@Output() pageIndexChange: EventEmitter<number> = new EventEmitter<number>; @Output() pageIndexChange: EventEmitter<number> = new EventEmitter<number>;
...@@ -152,7 +192,9 @@ export class JobListComponent implements OnInit { ...@@ -152,7 +192,9 @@ export class JobListComponent implements OnInit {
constructor( constructor(
private _service: JobManagerService, private _service: JobManagerService,
private _cdr: ChangeDetectorRef, private _cdr: ChangeDetectorRef,
private _fb: FormBuilder) { private _fb: FormBuilder,
private _notification: NzNotificationService
) {
this.jobEdittingFormGroup = this._fb.group({ this.jobEdittingFormGroup = this._fb.group({
type: ['Full Time', Validators.required], type: ['Full Time', Validators.required],
company: ['', Validators.required], company: ['', Validators.required],
...@@ -170,7 +212,15 @@ export class JobListComponent implements OnInit { ...@@ -170,7 +212,15 @@ export class JobListComponent implements OnInit {
this.getAllJobs(this.pageIndex, this.pageSize); this.getAllJobs(this.pageIndex, this.pageSize);
} }
getAllJobs(pageIndex: number = 1, pageSize: number = 5) { createNotification(type: string, title: string, message: string) {
this._notification.create(
type,
title,
message
);
}
getAllJobs(pageIndex: number = this.pageIndex, pageSize: number = 5) {
this._service.jobsGet(pageIndex, pageSize) this._service.jobsGet(pageIndex, pageSize)
.pipe( .pipe(
tap((response: ResponseResult<Rows<JobApi.Response>>) => { tap((response: ResponseResult<Rows<JobApi.Response>>) => {
...@@ -200,9 +250,18 @@ export class JobListComponent implements OnInit { ...@@ -200,9 +250,18 @@ export class JobListComponent implements OnInit {
pipe( pipe(
tap((response: ResponseResult<JobApi.Request>) => { tap((response: ResponseResult<JobApi.Request>) => {
this.getAllJobs(); this.getAllJobs();
this.createNotification(
'success',
'Success!',
'You have deleted a job successfully!'
);
}), }),
catchError((err) => { catchError((err) => {
console.log(err); this.createNotification(
'error',
'Error!',
'An error has occurred! Please try later!'
);
return of(null); return of(null);
}) })
) )
...@@ -224,17 +283,18 @@ export class JobListComponent implements OnInit { ...@@ -224,17 +283,18 @@ export class JobListComponent implements OnInit {
} }
this.jobEdittingFormGroup.markAllAsTouched(); this.jobEdittingFormGroup.markAllAsTouched();
this._service.jobsPut(this.edittingId, data) this._service.jobsPut(this.edittingId, data)
.pipe( .pipe(
tap((response: ResponseResult<JobApi.Request>) => { tap((response: ResponseResult<JobApi.Request>) => {
this.getAllJobs(); this.getAllJobs();
this.isEdit = false; this.isEdit = false;
}), }),
catchError((err) => { catchError((err) => {
console.log(err); console.log(err);
return of(null); return of(null);
}) })
) )
.subscribe(); .subscribe();
this.isEdit = false;
} }
onEditOpen(id: string) { onEditOpen(id: string) {
...@@ -244,7 +304,7 @@ export class JobListComponent implements OnInit { ...@@ -244,7 +304,7 @@ export class JobListComponent implements OnInit {
.pipe( .pipe(
tap((response: ResponseResult<JobApi.Response>) => { tap((response: ResponseResult<JobApi.Response>) => {
this.jobEdittingFormGroup = this._fb.group({ this.jobEdittingFormGroup = this._fb.group({
type: ['', Validators.required], type: [response.responseData?.type, Validators.required],
company: [response.responseData?.company, Validators.required], company: [response.responseData?.company, Validators.required],
company_url: [response.responseData?.company_url, Validators.required], company_url: [response.responseData?.company_url, Validators.required],
location: [response.responseData?.location, Validators.required], location: [response.responseData?.location, Validators.required],
......
src/app/+admin/management/job/feature/job.component.ts
View file @ 7595efc7
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { JobListComponent } from './job-list.component'; import { JobListComponent } from './job-list.component';
import { JobFormComponent } from './job-form.component'; import { JobFormComponent } from './job-form.component';
...@@ -11,12 +11,17 @@ import { JobFormComponent } from './job-form.component'; ...@@ -11,12 +11,17 @@ import { JobFormComponent } from './job-form.component';
], ],
template: ` template: `
<h1 class="tw-text-center tw-text-3xl tw-font-semibold tw-my-3">Jobs</h1> <h1 class="tw-text-center tw-text-3xl tw-font-semibold tw-my-3">Jobs</h1>
<job-form></job-form> <job-form (ReloadData)="sendReloadRequest()"></job-form>
<job-list></job-list> <job-list #jobList></job-list>
` `
}) })
export class JobComponent implements OnInit { export class JobComponent implements OnInit {
@ViewChild('jobList') jobList!: JobListComponent;
constructor() { } constructor() { }
ngOnInit() { } ngOnInit() { }
sendReloadRequest() {
this.jobList.getAllJobs();
}
} }
\ No newline at end of file
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