create order

src/app/modules/orders/components/order-header/order-header.component.html

@@ -11,6 +11,6 @@
         <span class="d-block">User@gmail.com</span>
       </div>
     </div>
-    <button>+ New Request</button>
+    <button (click)="onCreateOrder()">+ New Request</button>
   </main>
 </header>

src/app/modules/orders/components/order-header/order-header.component.ts

@@ -1,10 +1,19 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { OrderFormComponent } from '../../order-form/order-form.component';
 
 @Component({
   selector: 'app-order-header',
   templateUrl: './order-header.component.html',
-  styleUrls: ['./order-header.component.scss']
+  styleUrls: ['./order-header.component.scss'],
 })
 export class OrderHeaderComponent {
+  constructor(public readonly dialog: MatDialog) {}
+  onCreateOrder(): void {
+    const dialogRef = this.dialog.open(OrderFormComponent, { width: '700px' });
 
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
 }

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

@@ -1 +1,52 @@
-<p>order-form works!</p>
+<form
+  fxLayout="column"
+  fxLayoutAlign="start stretch"
+  class="gap-20"
+  (submit)="onSubmit()"
+>
+  <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>
+    <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"
+    >
+      <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>
+  </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>
+  <button type="submit">Create</button>
+</form>

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

@@ -0,0 +1,45 @@
+form {
+  padding: 20px 40px;
+  h1 {
+    font-size: 18px;
+    color: #2e368f;
+    text-align: center;
+  }
+
+  .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;
+    }
+  }
+
+  button {
+    padding: 10px 20px;
+    width: inherit;
+    background-color: #28abe3;
+    color: #fff;
+    border-radius: 10px;
+    border: 1px solid #28abe3;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 15px;
+    transition: all 0.5s;
+    &:hover {
+      background-color: #1877f2;
+    }
+  }
+}

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

@@ -1,10 +1,14 @@
 import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-order-form',
   templateUrl: './order-form.component.html',
-  styleUrls: ['./order-form.component.scss']
+  styleUrls: ['./order-form.component.scss'],
 })
 export class OrderFormComponent {
-
+  constructor(public dialogRef: MatDialogRef<OrderFormComponent>) {}
+  onSubmit(): void {
+    this.dialogRef.close();
+  }
 }