Commit bf11e77c authored by vtduong0912's avatar vtduong0912

update: grid on modal

parent 1b3c45b2
...@@ -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
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