Skip to content

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

update: grid on modal

parent 1b3c45b2
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 158 deletions
src/app/+admin/management/job/feature/job-form.component.ts
View file @ bf11e77c
...@@ -22,79 +22,97 @@ import { NzFormModule } from 'ng-zorro-antd/form'; ...@@ -22,79 +22,97 @@ import { NzFormModule } from 'ng-zorro-antd/form';
<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)="onCreateSubmit()"> <nz-modal [(nzVisible)]="isCreate" nzTitle="Create new job" nzCancelText="Cancel" nzOkText="Create" (nzOnCancel)="isCreate = false" (nzOnOk)="onCreateSubmit()" nzWidth="720px">
<ng-container *nzModalContent> <ng-container *nzModalContent>
<form nz-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-grid tw-grid-cols-3 tw-gap-2">
<label>Type</label> <div>
<select class="tw-border tw-rounded-lg tw-h-8" formControlName="type"> <label>Type</label>
<option value="Full Time">Full Time</option> <select class="tw-border tw-rounded-lg tw-w-full tw-h-8" formControlName="type">
<option value="Part Time">Part Time</option> <option value="Full Time">Full Time</option>
</select> <option value="Part Time">Part Time</option>
<label>Company</label> </select>
<nz-form-item> </div>
<nz-form-control nzErrorTip="Please enter company!"> <div class="tw-col-span-2">
<nz-input-group> <label>Company</label>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company"> <nz-form-item>
</nz-input-group> <nz-form-control nzErrorTip="Please enter company!">
</nz-form-control> <nz-input-group>
</nz-form-item> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company">
<label>Company Url</label> </nz-input-group>
<nz-form-item> </nz-form-control>
<nz-form-control nzErrorTip="Please enter company url!"> </nz-form-item>
<nz-input-group> </div>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company_url"> <div>
</nz-input-group> <label>Company Url</label>
</nz-form-control> <nz-form-item>
</nz-form-item> <nz-form-control nzErrorTip="Please enter company url!">
<label>Location</label> <nz-input-group>
<nz-form-item> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company_url">
<nz-form-control nzErrorTip="Please enter location!"> </nz-input-group>
<nz-input-group> </nz-form-control>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="location"> </nz-form-item>
</nz-input-group> </div>
</nz-form-control> <div class="tw-col-span-2">
</nz-form-item> <label>Location</label>
<label>Title</label> <nz-form-item>
<nz-form-item> <nz-form-control nzErrorTip="Please enter location!">
<nz-form-control nzErrorTip="Please enter title!"> <nz-input-group>
<nz-input-group> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="location">
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="title"> </nz-input-group>
</nz-input-group> </nz-form-control>
</nz-form-control> </nz-form-item>
</nz-form-item> </div>
<label>Description</label> <div class="tw-col-span-full">
<nz-form-item> <label>Title</label>
<nz-form-control nzErrorTip="Please enter description!"> <nz-form-item>
<nz-input-group> <nz-form-control nzErrorTip="Please enter title!">
<textarea class="tw-border tw-rounded-lg tw-w-full tw-h-20" type="text" formControlName="description"></textarea> <nz-input-group>
</nz-input-group> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="title">
</nz-form-control> </nz-input-group>
</nz-form-item> </nz-form-control>
<label>How to Apply</label> </nz-form-item>
<nz-form-item> </div>
<nz-form-control nzErrorTip="Please enter 'How to Apply'!"> <div class="tw-col-span-full">
<nz-input-group> <label>Description</label>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="how_to_apply"> <nz-form-item>
</nz-input-group> <nz-form-control nzErrorTip="Please enter description!">
</nz-form-control> <nz-input-group>
</nz-form-item> <textarea class="tw-border tw-rounded-lg tw-w-full tw-h-40" type="text" formControlName="description"></textarea>
<label>Company Logo</label> </nz-input-group>
<nz-form-item> </nz-form-control>
<nz-form-control nzErrorTip="Please enter Company Logo!"> </nz-form-item>
<nz-input-group> </div>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company_logo"> <div class="tw-col-span-full">
</nz-input-group> <label>How to Apply</label>
</nz-form-control> <nz-form-item>
</nz-form-item> <nz-form-control nzErrorTip="Please enter 'How to Apply'!">
<label>Url</label> <nz-input-group>
<nz-form-item> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="how_to_apply">
<nz-form-control nzErrorTip="Please enter Url!"> </nz-input-group>
<nz-input-group> </nz-form-control>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="url"> </nz-form-item>
</nz-input-group> </div>
</nz-form-control> <div class="tw-col-span-full">
</nz-form-item> <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>
</div>
<div class="tw-col-span-full">
<label>Url</label>
<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> </div>
</form> </form>
</ng-container> </ng-container>
...@@ -164,6 +182,6 @@ export class JobFormComponent { ...@@ -164,6 +182,6 @@ export class JobFormComponent {
}) })
) )
.subscribe(); .subscribe();
this.isCreate = false; this.isCreate = false;
} }
} }
\ No newline at end of file
src/app/+admin/management/job/feature/job-list.component.ts
View file @ bf11e77c
...@@ -37,79 +37,97 @@ import { NzNotificationService } from 'ng-zorro-antd/notification'; ...@@ -37,79 +37,97 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
<p>Are you sure you want to delete this job?</p> <p>Are you sure you want to delete this job?</p>
</ng-container> </ng-container>
</nz-modal> </nz-modal>
<nz-modal [(nzVisible)]="isEdit" nzTitle="Create new job" nzCancelText="Cancel" nzOkText="Confirm" (nzOnCancel)="isEdit = false" (nzOnOk)="onEditSubmit()"> <nz-modal [(nzVisible)]="isEdit" nzTitle="Create new job" nzCancelText="Cancel" nzOkText="Confirm" (nzOnCancel)="isEdit = false" (nzOnOk)="onEditSubmit()" nzWidth="720px">
<ng-container *nzModalContent> <ng-container *nzModalContent>
<form nz-form [formGroup]="jobEdittingFormGroup"> <form nz-form [formGroup]="jobEdittingFormGroup">
<div class="tw-flex tw-flex-col tw-flex-wrap tw-gap-y-1"> <div class="tw-grid tw-grid-cols-3 tw-gap-2">
<label>Type</label> <div>
<select class="tw-border tw-rounded-lg tw-h-8" formControlName="type"> <label>Type</label>
<option value="Full Time">Full Time</option> <select class="tw-border tw-rounded-lg tw-w-full tw-h-8" formControlName="type">
<option value="Part Time">Part Time</option> <option value="Full Time">Full Time</option>
</select> <option value="Part Time">Part Time</option>
<label>Company</label> </select>
<nz-form-item> </div>
<nz-form-control nzErrorTip="Please enter company!"> <div class="tw-col-span-2">
<nz-input-group> <label>Company</label>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company"> <nz-form-item>
</nz-input-group> <nz-form-control nzErrorTip="Please enter company!">
</nz-form-control> <nz-input-group>
</nz-form-item> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company">
<label>Company Url</label> </nz-input-group>
<nz-form-item> </nz-form-control>
<nz-form-control nzErrorTip="Please enter company url!"> </nz-form-item>
<nz-input-group> </div>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company_url"> <div>
</nz-input-group> <label>Company Url</label>
</nz-form-control> <nz-form-item>
</nz-form-item> <nz-form-control nzErrorTip="Please enter company url!">
<label>Location</label> <nz-input-group>
<nz-form-item> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company_url">
<nz-form-control nzErrorTip="Please enter location!"> </nz-input-group>
<nz-input-group> </nz-form-control>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="location"> </nz-form-item>
</nz-input-group> </div>
</nz-form-control> <div class="tw-col-span-2">
</nz-form-item> <label>Location</label>
<label>Title</label> <nz-form-item>
<nz-form-item> <nz-form-control nzErrorTip="Please enter location!">
<nz-form-control nzErrorTip="Please enter title!"> <nz-input-group>
<nz-input-group> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="location">
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="title"> </nz-input-group>
</nz-input-group> </nz-form-control>
</nz-form-control> </nz-form-item>
</nz-form-item> </div>
<label>Description</label> <div class="tw-col-span-full">
<nz-form-item> <label>Title</label>
<nz-form-control nzErrorTip="Please enter description!"> <nz-form-item>
<nz-input-group> <nz-form-control nzErrorTip="Please enter title!">
<textarea class="tw-border tw-rounded-lg tw-w-full tw-h-20" type="text" formControlName="description"></textarea> <nz-input-group>
</nz-input-group> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="title">
</nz-form-control> </nz-input-group>
</nz-form-item> </nz-form-control>
<label>How to Apply</label> </nz-form-item>
<nz-form-item> </div>
<nz-form-control nzErrorTip="Please enter 'How to Apply'!"> <div class="tw-col-span-full">
<nz-input-group> <label>Description</label>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="how_to_apply"> <nz-form-item>
</nz-input-group> <nz-form-control nzErrorTip="Please enter description!">
</nz-form-control> <nz-input-group>
</nz-form-item> <textarea class="tw-border tw-rounded-lg tw-w-full tw-h-40" type="text" formControlName="description"></textarea>
<label>Company Logo</label> </nz-input-group>
<nz-form-item> </nz-form-control>
<nz-form-control nzErrorTip="Please enter Company Logo!"> </nz-form-item>
<nz-input-group> </div>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="company_logo"> <div class="tw-col-span-full">
</nz-input-group> <label>How to Apply</label>
</nz-form-control> <nz-form-item>
</nz-form-item> <nz-form-control nzErrorTip="Please enter 'How to Apply'!">
<label>Url</label> <nz-input-group>
<nz-form-item> <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="how_to_apply">
<nz-form-control nzErrorTip="Please enter Url!"> </nz-input-group>
<nz-input-group> </nz-form-control>
<input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="url"> </nz-form-item>
</nz-input-group> </div>
</nz-form-control> <div class="tw-col-span-full">
</nz-form-item> <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>
</div>
<div class="tw-col-span-full">
<label>Url</label>
<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> </div>
</form> </form>
</ng-container> </ng-container>
...@@ -173,7 +191,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification'; ...@@ -173,7 +191,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
</nz-pagination> </nz-pagination>
</div> </div>
`, `,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class JobListComponent implements OnInit { export class JobListComponent implements OnInit {
pageIndex: number = 1; pageIndex: number = 1;
...@@ -225,7 +243,6 @@ export class JobListComponent implements OnInit { ...@@ -225,7 +243,6 @@ export class JobListComponent implements OnInit {
.pipe( .pipe(
tap((response: ResponseResult<Rows<JobApi.Response>>) => { tap((response: ResponseResult<Rows<JobApi.Response>>) => {
this.jobsList = response.responseData; this.jobsList = response.responseData;
console.log(this.jobsList);
this._cdr.markForCheck(); this._cdr.markForCheck();
}), }),
catchError((err) => { catchError((err) => {
...@@ -286,15 +303,13 @@ export class JobListComponent implements OnInit { ...@@ -286,15 +303,13 @@ export class JobListComponent implements OnInit {
.pipe( .pipe(
tap((response: ResponseResult<JobApi.Request>) => { tap((response: ResponseResult<JobApi.Request>) => {
this.getAllJobs(); this.getAllJobs();
this.isEdit = false;
}), }),
catchError((err) => { catchError((err) => {
console.log(err);
return of(null); return of(null);
}) })
) )
.subscribe(); .subscribe();
this.isEdit = false; this.isEdit = false;
} }
onEditOpen(id: string) { onEditOpen(id: string) {
...@@ -303,17 +318,18 @@ export class JobListComponent implements OnInit { ...@@ -303,17 +318,18 @@ export class JobListComponent implements OnInit {
this._service.jobsGetOne(id) this._service.jobsGetOne(id)
.pipe( .pipe(
tap((response: ResponseResult<JobApi.Response>) => { tap((response: ResponseResult<JobApi.Response>) => {
this.jobEdittingFormGroup = this._fb.group({ this.jobEdittingFormGroup.patchValue({
type: [response.responseData?.type, Validators.required], type: response.responseData?.type,
company: [response.responseData?.company, Validators.required], company: response.responseData?.company,
company_url: [response.responseData?.company_url, Validators.required], company_url: response.responseData?.company_url,
location: [response.responseData?.location, Validators.required], location: response.responseData?.location,
title: [response.responseData?.title, Validators.required], title: response.responseData?.title,
description: [response.responseData?.description, Validators.required], description: response.responseData?.description,
how_to_apply: [response.responseData?.how_to_apply, Validators.required], how_to_apply: response.responseData?.how_to_apply,
company_logo: [response.responseData?.company_logo, Validators.required], company_logo: response.responseData?.company_logo,
url: [response.responseData?.url], url: response.responseData?.url,
}); });
console.log(this.jobEdittingFormGroup.value);
}), }),
catchError((err) => { catchError((err) => {
return of(null); return of(null);
......
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