order

src/app/modules/orders/order-form/business-trip-form/business-trip-form.component.html

@@ -0,0 +1,50 @@
+<form>
+  <div class="gap-20" fxLayout="wrap row" fxLayoutAlign="start start">
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex="100"
+    >
+      <label for="country">
+        <span>Date <span class="red">*</span></span>
+      </label>
+      <input type="date" placeholder="Date" id="date" />
+    </div>
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+    >
+      <label for="country">
+        <span>Country <span class="red">*</span></span>
+      </label>
+      <select id="country">
+        <!-- <option disabled selected>Select your country</option> -->
+      </select>
+    </div>
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+    >
+      <label for="city">
+        <span>City <span class="red">*</span></span>
+      </label>
+      <select id="city">
+        <!-- <option disabled selected>Select your country</option> -->
+      </select>
+    </div>
+  </div>
+
+  <div class="form-input mt-2" fxLayout="column" fxLayoutAlign="start stretch">
+    <label for="country">
+      <span>Reason</span>
+    </label>
+    <textarea rows="8" cols="5"></textarea>
+  </div>
+</form>

src/app/modules/orders/order-form/business-trip-form/business-trip-form.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BusinessTripFormComponent } from './business-trip-form.component';
+
+describe('BusinessTripFormComponent', () => {
+  let component: BusinessTripFormComponent;
+  let fixture: ComponentFixture<BusinessTripFormComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BusinessTripFormComponent]
+    });
+    fixture = TestBed.createComponent(BusinessTripFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/orders/order-form/business-trip-form/business-trip-form.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-business-trip-form',
+  templateUrl: './business-trip-form.component.html',
+  styleUrls: ['./business-trip-form.component.scss']
+})
+export class BusinessTripFormComponent {
+
+}

src/app/modules/orders/order-form/leaves-form/leaves-form.component.html

@@ -0,0 +1,49 @@
+<form>
+  <div class="form-input" fxLayout="column" fxLayoutAlign="start stretch">
+    <label for="requestType">
+      <span>Request Type <span class="red">*</span></span>
+    </label>
+    <select id="requestType">
+      <option disabled selected>Select your type</option>
+      <option value="1">Annual</option>
+      <option value="2">Slick</option>
+      <option value="3">Marriage</option>
+      <option value="4">Paternity</option>
+      <option value="5">Emergency</option>
+    </select>
+  </div>
+
+  <div class="gap-20 mt-2" fxLayout="wrap row" fxLayoutAlign="start start">
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+    >
+      <label for="startDate">
+        <span>Start Date <span class="red">*</span></span>
+      </label>
+      <input type="date" placeholder="Start Date" id="request_start_date" />
+    </div>
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+    >
+      <label for="country">
+        <span>End Date <span class="red">*</span></span>
+      </label>
+      <input type="date" placeholder="End Date" id="request_end_date" />
+    </div>
+  </div>
+
+  <div class="form-input mt-2" fxLayout="column" fxLayoutAlign="start stretch">
+    <label for="country">
+      <span>Notes</span>
+    </label>
+    <textarea rows="8" cols="5"></textarea>
+  </div>
+</form>

src/app/modules/orders/order-form/leaves-form/leaves-form.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LeavesFormComponent } from './leaves-form.component';
+
+describe('LeavesFormComponent', () => {
+  let component: LeavesFormComponent;
+  let fixture: ComponentFixture<LeavesFormComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [LeavesFormComponent]
+    });
+    fixture = TestBed.createComponent(LeavesFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/orders/order-form/leaves-form/leaves-form.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-leaves-form',
+  templateUrl: './leaves-form.component.html',
+  styleUrls: ['./leaves-form.component.scss']
+})
+export class LeavesFormComponent {
+
+}

src/app/modules/orders/order-form/medical-form/medical-form.component.html

@@ -0,0 +1,15 @@
+<form>
+  <div class="gap-20 mt-2" fxLayout="wrap row" fxLayoutAlign="start start">
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex="100"
+    >
+      <label for="startDate">
+        <span>Date <span class="red">*</span></span>
+      </label>
+      <input type="date" placeholder="Date" id="date" />
+    </div>
+  </div>
+</form>

src/app/modules/orders/order-form/medical-form/medical-form.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MedicalFormComponent } from './medical-form.component';
+
+describe('MedicalFormComponent', () => {
+  let component: MedicalFormComponent;
+  let fixture: ComponentFixture<MedicalFormComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MedicalFormComponent]
+    });
+    fixture = TestBed.createComponent(MedicalFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/orders/order-form/medical-form/medical-form.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-medical-form',
+  templateUrl: './medical-form.component.html',
+  styleUrls: ['./medical-form.component.scss']
+})
+export class MedicalFormComponent {
+
+}

src/app/modules/orders/order-form/order-form.component.html

@@ -6,47 +6,29 @@
 >
   <h1 class="bold">Create Order</h1>
   <div class="form-input" fxLayout="column" fxLayoutAlign="start stretch">
-    <label for="country">
-      <span>Request Title <span class="red">*</span></span>
+    <label for="requestType">
+      <span>Request Type <span class="red">*</span></span>
     </label>
-    <input type="text" placeholder="Request Title" id="request_title" />
-  </div>
-  <div class="gap-20" fxLayout="wrap row" fxLayoutAlign="start start">
-    <div
-      class="form-input"
-      fxLayout="column"
-      fxLayoutAlign="start stretch"
-      fxFlex.lt-md="100"
-      fxFlex.gt-sm="48"
-    >
-      <label for="country">
-        <span>Request Start Date <span class="red">*</span></span>
-      </label>
-      <input
-        type="date"
-        placeholder="Request Start Date"
-        id="request_start_date"
-      />
-    </div>
-    <div
-      class="form-input"
-      fxLayout="column"
-      fxLayoutAlign="start stretch"
-      fxFlex.lt-md="100"
-      fxFlex.gt-sm="48"
+    <select
+      id="requestType"
+      [value]="selectedType"
+      (change)="onChangeType($event)"
     >
-      <label for="country">
-        <span>Request End Date <span class="red">*</span></span>
-      </label>
-      <input type="date" placeholder="Request End Date" id="request_end_date" />
-    </div>
+      <option disabled selected>Select your type</option>
+      <option value="1">Leaves</option>
+      <option value="2">Overtime</option>
+      <option value="3">Medical</option>
+      <option value="4">Business Trip</option>
+    </select>
   </div>
-  <div class="form-input" fxLayout="column" fxLayoutAlign="start stretch">
-    <label for="country">
-      <span>Request Description</span>
-    </label>
-    <!-- <input type="text" placeholder="Request Title" id="last_name" /> -->
-    <textarea rows="8" cols="5"></textarea>
+
+  <div [ngSwitch]="selectedType">
+    <app-leaves-form *ngSwitchCase="1"></app-leaves-form>
+    <app-overtime-form *ngSwitchCase="2"></app-overtime-form>
+    <app-business-trip-form *ngSwitchCase="4"></app-business-trip-form>
+    <app-medical-form *ngSwitchCase="3"></app-medical-form>
   </div>
-  <button type="submit">Create</button>
+
+  <button type="submit" class="mt-2">Create</button>
+  <button type="button" class="cancel" mat-dialog-close>Cancel</button>
 </form>

src/app/modules/orders/order-form/order-form.component.ts

@@ -7,7 +7,12 @@ import { MatDialogRef } from '@angular/material/dialog';
   styleUrls: ['./order-form.component.scss'],
 })
 export class OrderFormComponent {
+  selectedType: number = 1;
   constructor(public dialogRef: MatDialogRef<OrderFormComponent>) {}
+
+  onChangeType(event: any): void {
+    this.selectedType = event?.target?.value;
+  }
   onSubmit(): void {
     this.dialogRef.close();
   }

src/app/modules/orders/order-form/overtime-form/overtime-form.component.html

@@ -0,0 +1,28 @@
+<form>
+  <div class="gap-20 mt-2" fxLayout="wrap row" fxLayoutAlign="start start">
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+    >
+      <label for="startDate">
+        <span>Date <span class="red">*</span></span>
+      </label>
+      <input type="date" placeholder="Date" id="date" />
+    </div>
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="48"
+    >
+      <label for="country">
+        <span>Time <span class="red">*</span></span>
+      </label>
+      <input type="time" placeholder="Time" id="time" />
+    </div>
+  </div>
+</form>

src/app/modules/orders/order-form/overtime-form/overtime-form.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OvertimeFormComponent } from './overtime-form.component';
+
+describe('OvertimeFormComponent', () => {
+  let component: OvertimeFormComponent;
+  let fixture: ComponentFixture<OvertimeFormComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [OvertimeFormComponent]
+    });
+    fixture = TestBed.createComponent(OvertimeFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/orders/order-form/overtime-form/overtime-form.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-overtime-form',
+  templateUrl: './overtime-form.component.html',
+  styleUrls: ['./overtime-form.component.scss']
+})
+export class OvertimeFormComponent {
+
+}

src/app/modules/orders/order-list/order-list.component.html

@@ -1,21 +1,15 @@
 <section class="order-list">
   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-    <!--- Note that these columns can be defined in any order.
-        The actual rendered columns are set as a property on the row definition" -->
-
-    <!-- Position Column -->
     <ng-container matColumnDef="order">
       <th mat-header-cell *matHeaderCellDef>Order</th>
       <td mat-cell *matCellDef="let element">{{ element.order }}</td>
     </ng-container>
 
-    <!-- Name Column -->
     <ng-container matColumnDef="date">
       <th mat-header-cell *matHeaderCellDef>Date</th>
       <td mat-cell *matCellDef="let element">{{ element.date }}</td>
     </ng-container>
 
-    <!-- Weight Column -->
     <ng-container matColumnDef="status">
       <th mat-header-cell *matHeaderCellDef>Status</th>
       <td mat-cell *matCellDef="let element">
@@ -31,7 +25,6 @@
       </td>
     </ng-container>
 
-    <!-- Weight Column -->
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let element" class="column-flex">

src/app/modules/orders/orders.module.ts

@@ -8,6 +8,10 @@ import { OrderFormComponent } from './order-form/order-form.component';
 import { OrderDetailsComponent } from './order-details/order-details.component';
 import { OrderHeaderComponent } from './components/order-header/order-header.component';
 import { SharedModule } from '@shared/shared.module';
+import { LeavesFormComponent } from './order-form/leaves-form/leaves-form.component';
+import { OvertimeFormComponent } from './order-form/overtime-form/overtime-form.component';
+import { MedicalFormComponent } from './order-form/medical-form/medical-form.component';
+import { BusinessTripFormComponent } from './order-form/business-trip-form/business-trip-form.component';
 
 @NgModule({
   declarations: [
@@ -16,6 +20,10 @@ import { SharedModule } from '@shared/shared.module';
     OrderFormComponent,
     OrderDetailsComponent,
     OrderHeaderComponent,
+    LeavesFormComponent,
+    OvertimeFormComponent,
+    MedicalFormComponent,
+    BusinessTripFormComponent,
   ],
   imports: [CommonModule, OrdersRoutingModule, SharedModule],
 })

src/styles.scss

@@ -289,3 +289,24 @@ input.mat-input-element {
 .mat-mdc-paginator-container {
   background-color: #e4e4ef !important;
 }
+
+.form-input {
+  width: 100%;
+  label {
+    margin-bottom: 5px;
+    font-size: 13px;
+    span {
+      margin: 0 5px;
+    }
+  }
+  input,
+  select,
+  textarea {
+    padding: 15px 20px;
+    border-radius: 10px;
+    box-shadow: 0px 5px 6px #2f2c8324;
+    border: 0.5px solid #2e368f;
+    border-radius: 10px;
+    outline: none;
+  }
+}