Skip to content

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

update

parent 6b447bc1
Show 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 { NzButtonModule } from 'ng-zorro-antd/button';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { JobManagerService } from '../data-access/service/job-manager.service';
import { ResponseResult } from '../../../../shared/data-access/interface/response.type';
import { JobApi } from '../data-access/model/job-manager.model';
import { NzNotificationService } from 'ng-zorro-antd/notification'
import { catchError, of, tap } from 'rxjs';
import { NzFormModule } from 'ng-zorro-antd/form';
@Component({
selector: 'job-form',
......@@ -13,15 +15,16 @@ import { catchError, of, tap } from 'rxjs';
imports: [
NzButtonModule,
NzModalModule,
ReactiveFormsModule
ReactiveFormsModule,
NzFormModule
],
template: `
<div class="tw-w-full tw-grid tw-justify-items-end">
<button nz-button nzType="primary" (click)="isCreate = true">Create new job</button>
</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>
<form [formGroup]="jobCreatingFormGroup">
<form nz-form [formGroup]="jobCreatingFormGroup">
<div class="tw-flex tw-flex-col tw-flex-wrap tw-gap-y-1">
<label>Type</label>
<select class="tw-border tw-rounded-lg tw-h-8" formControlName="type">
......@@ -29,21 +32,69 @@ import { catchError, of, tap } from 'rxjs';
<option value="Part Time">Part Time</option>
</select>
<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>
<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>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="location">
<label>Tilte</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="title">
<nz-form-item>
<nz-form-control nzErrorTip="Please enter location!">
<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>
<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>
<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>
<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>
<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>
</form>
</ng-container>
......@@ -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;
jobCreatingFormGroup: FormGroup;
constructor(private _fb: FormBuilder, private _service: JobManagerService) {
constructor(private _fb: FormBuilder,
private _service: JobManagerService,
private _notification: NzNotificationService) {
this.jobCreatingFormGroup = this._fb.group({
type: ['Full Time', Validators.required],
company: ['', Validators.required],
......@@ -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() {
......@@ -90,18 +147,23 @@ export class JobFormComponent implements OnInit {
this._service.jobsPost(data)
.pipe(
tap((response: ResponseResult<JobApi.Request>) => {
console.log(response);
this.createNotification(
'success',
'Success!',
'You have created a new job successfully!'
);
this.ReloadData.emit();
}),
catchError((err) => {
this.createNotification(
'error',
'Error!',
'An error has occurred! Please try later!'
)
return of(null);
})
)
.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';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { response } from 'express';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzNotificationService } from 'ng-zorro-antd/notification';
@Component({
selector: 'job-list',
......@@ -46,30 +46,70 @@ import { NzFormModule } from 'ng-zorro-antd/form';
<option value="Full Time">Full Time</option>
<option value="Part Time">Part Time</option>
</select>
<nz-form-item>
<label>Company</label>
<nz-form-control nzErrorTip="Please input your username!">
<nz-input-group class="tw-h-12">
<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>
<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>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="location">
<label>Tilte</label>
<input class="tw-border tw-rounded-lg tw-h-8" type="text" formControlName="title">
<nz-form-item>
<nz-form-control nzErrorTip="Please enter location!">
<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>
<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>
<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>
<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>
<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>
</form>
</ng-container>
......@@ -152,7 +192,9 @@ export class JobListComponent implements OnInit {
constructor(
private _service: JobManagerService,
private _cdr: ChangeDetectorRef,
private _fb: FormBuilder) {
private _fb: FormBuilder,
private _notification: NzNotificationService
) {
this.jobEdittingFormGroup = this._fb.group({
type: ['Full Time', Validators.required],
company: ['', Validators.required],
......@@ -170,7 +212,15 @@ export class JobListComponent implements OnInit {
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)
.pipe(
tap((response: ResponseResult<Rows<JobApi.Response>>) => {
......@@ -200,9 +250,18 @@ export class JobListComponent implements OnInit {
pipe(
tap((response: ResponseResult<JobApi.Request>) => {
this.getAllJobs();
this.createNotification(
'success',
'Success!',
'You have deleted a job successfully!'
);
}),
catchError((err) => {
console.log(err);
this.createNotification(
'error',
'Error!',
'An error has occurred! Please try later!'
);
return of(null);
})
)
......@@ -235,6 +294,7 @@ export class JobListComponent implements OnInit {
})
)
.subscribe();
this.isEdit = false;
}
onEditOpen(id: string) {
......@@ -244,7 +304,7 @@ export class JobListComponent implements OnInit {
.pipe(
tap((response: ResponseResult<JobApi.Response>) => {
this.jobEdittingFormGroup = this._fb.group({
type: ['', Validators.required],
type: [response.responseData?.type, Validators.required],
company: [response.responseData?.company, Validators.required],
company_url: [response.responseData?.company_url, 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 { JobFormComponent } from './job-form.component';
......@@ -11,12 +11,17 @@ import { JobFormComponent } from './job-form.component';
],
template: `
<h1 class="tw-text-center tw-text-3xl tw-font-semibold tw-my-3">Jobs</h1>
<job-form></job-form>
<job-list></job-list>
<job-form (ReloadData)="sendReloadRequest()"></job-form>
<job-list #jobList></job-list>
`
})
export class JobComponent implements OnInit {
@ViewChild('jobList') jobList!: JobListComponent;
constructor() { }
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