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
Show 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,15 +22,18 @@ import { NzFormModule } from 'ng-zorro-antd/form';
<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)="onCreateSubmit()">
<nz-modal [(nzVisible)]="isCreate" nzTitle="Create new job" nzCancelText="Cancel" nzOkText="Create" (nzOnCancel)="isCreate = false" (nzOnOk)="onCreateSubmit()" nzWidth="720px">
<ng-container *nzModalContent>
<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">
<div>
<label>Type</label>
<select class="tw-border tw-rounded-lg tw-h-8" formControlName="type">
<select class="tw-border tw-rounded-lg tw-w-full tw-h-8" formControlName="type">
<option value="Full Time">Full Time</option>
<option value="Part Time">Part Time</option>
</select>
</div>
<div class="tw-col-span-2">
<label>Company</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter company!">
......@@ -39,6 +42,8 @@ import { NzFormModule } from 'ng-zorro-antd/form';
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div>
<label>Company Url</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter company url!">
......@@ -47,6 +52,8 @@ import { NzFormModule } from 'ng-zorro-antd/form';
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div class="tw-col-span-2">
<label>Location</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter location!">
......@@ -55,6 +62,8 @@ import { NzFormModule } from 'ng-zorro-antd/form';
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div class="tw-col-span-full">
<label>Title</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter title!">
......@@ -63,14 +72,18 @@ import { NzFormModule } from 'ng-zorro-antd/form';
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div class="tw-col-span-full">
<label>Description</label>
<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>
<textarea 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>
</div>
<div class="tw-col-span-full">
<label>How to Apply</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter 'How to Apply'!">
......@@ -79,6 +92,8 @@ import { NzFormModule } from 'ng-zorro-antd/form';
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div class="tw-col-span-full">
<label>Company Logo</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter Company Logo!">
......@@ -87,6 +102,8 @@ import { NzFormModule } from 'ng-zorro-antd/form';
</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!">
......@@ -96,6 +113,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
</nz-form-control>
</nz-form-item>
</div>
</div>
</form>
</ng-container>
</nz-modal>
......
src/app/+admin/management/job/feature/job-list.component.ts
View file @ bf11e77c
......@@ -37,15 +37,18 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
<p>Are you sure you want to delete this job?</p>
</ng-container>
</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>
<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">
<div>
<label>Type</label>
<select class="tw-border tw-rounded-lg tw-h-8" formControlName="type">
<select class="tw-border tw-rounded-lg tw-w-full tw-h-8" formControlName="type">
<option value="Full Time">Full Time</option>
<option value="Part Time">Part Time</option>
</select>
</div>
<div class="tw-col-span-2">
<label>Company</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter company!">
......@@ -54,6 +57,8 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div>
<label>Company Url</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter company url!">
......@@ -62,6 +67,8 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div class="tw-col-span-2">
<label>Location</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter location!">
......@@ -70,6 +77,8 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div class="tw-col-span-full">
<label>Title</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter title!">
......@@ -78,14 +87,18 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div class="tw-col-span-full">
<label>Description</label>
<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>
<textarea 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>
</div>
<div class="tw-col-span-full">
<label>How to Apply</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter 'How to Apply'!">
......@@ -94,6 +107,8 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<div class="tw-col-span-full">
<label>Company Logo</label>
<nz-form-item>
<nz-form-control nzErrorTip="Please enter Company Logo!">
......@@ -102,6 +117,8 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
</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!">
......@@ -111,6 +128,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
</nz-form-control>
</nz-form-item>
</div>
</div>
</form>
</ng-container>
</nz-modal>
......@@ -173,7 +191,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
</nz-pagination>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class JobListComponent implements OnInit {
pageIndex: number = 1;
......@@ -225,7 +243,6 @@ export class JobListComponent implements OnInit {
.pipe(
tap((response: ResponseResult<Rows<JobApi.Response>>) => {
this.jobsList = response.responseData;
console.log(this.jobsList);
this._cdr.markForCheck();
}),
catchError((err) => {
......@@ -286,10 +303,8 @@ export class JobListComponent implements OnInit {
.pipe(
tap((response: ResponseResult<JobApi.Request>) => {
this.getAllJobs();
this.isEdit = false;
}),
catchError((err) => {
console.log(err);
return of(null);
})
)
......@@ -303,17 +318,18 @@ export class JobListComponent implements OnInit {
this._service.jobsGetOne(id)
.pipe(
tap((response: ResponseResult<JobApi.Response>) => {
this.jobEdittingFormGroup = this._fb.group({
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],
title: [response.responseData?.title, Validators.required],
description: [response.responseData?.description, Validators.required],
how_to_apply: [response.responseData?.how_to_apply, Validators.required],
company_logo: [response.responseData?.company_logo, Validators.required],
url: [response.responseData?.url],
this.jobEdittingFormGroup.patchValue({
type: response.responseData?.type,
company: response.responseData?.company,
company_url: response.responseData?.company_url,
location: response.responseData?.location,
title: response.responseData?.title,
description: response.responseData?.description,
how_to_apply: response.responseData?.how_to_apply,
company_logo: response.responseData?.company_logo,
url: response.responseData?.url,
});
console.log(this.jobEdittingFormGroup.value);
}),
catchError((err) => {
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