order list

src/app/modules/components/side-nav/side-nav.component.ts

@@ -18,7 +18,7 @@ export class SideNavComponent {
       index: 2,
       name: 'Employees',
       img: '../../../../assets/images/teams.svg',
-      link: '/employee',
+      link: '/modules/employee',
     },
     {
       index: 3,
@@ -78,7 +78,7 @@ export class SideNavComponent {
       index: 11,
       name: 'Orders',
       img: '../../../../assets/images/order.svg',
-      link: 'orders',
+      link: '/modules/orders',
     },
     {
       index: 11,

src/app/modules/modules-routing.module.ts

@@ -35,6 +35,11 @@ const routes: Routes = [
           import('./meetings/meetings.module').then((m) => m.MeetingsModule),
       },
       {
+        path: 'orders',
+        loadChildren: () =>
+          import('./orders/orders.module').then((m) => m.OrdersModule),
+      },
+      {
         path: '',
         redirectTo: 'dashboard',
         pathMatch: 'full',

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

@@ -0,0 +1,16 @@
+<header>
+  <h1 class="bold">
+    <span>Orders</span>
+  </h1>
+  <main fxLayout="row wrap" fxLayoutAlign="space-between center">
+    <div fxLayout="row wrap" fxLayoutAlign="start center" class="gap-10">
+      <img src="assets/images/avatar.png" alt="" title="" />
+      <div>
+        <p class="bold">Mai Ghoneim</p>
+        <span class="d-block">Senior UI/UX Designer</span>
+        <span class="d-block">User@gmail.com</span>
+      </div>
+    </div>
+    <button>+ New Request</button>
+  </main>
+</header>

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

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

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

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

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

@@ -1 +1,45 @@
-<p>order-list works!</p>
+<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">
+        <span
+          class="bold"
+          [ngClass]="{
+            active: element.status === 'Aproved',
+            pending: element.status === 'Pending',
+            rejected: element.status === 'Rjected'
+          }"
+          >{{ element.status }}</span
+        >
+      </td>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let element">
+        <button class="btn">View Detail</button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+</section>

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

@@ -0,0 +1,25 @@
+.mat-mdc-table {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.active {
+  background-color: #0fbb3726;
+  border-radius: 10px;
+  color: #0fbb37;
+  padding: 12px 15px;
+}
+
+.pending {
+  background-color: #ebc5b4;
+  border-radius: 10px;
+  color: #ff6600;
+  padding: 12px 15px;
+}
+
+.rejected {
+  background-color: #e5c9d3;
+  border-radius: 10px;
+  color: #e73232;
+  padding: 12px 15px;
+}

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

@@ -1,10 +1,29 @@
 import { Component } from '@angular/core';
 
+export interface PeriodicElement {
+  order: number;
+  date: string;
+  status: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  { order: 1, date: 'Hydrogen', status: 'Aproved' },
+  { order: 2, date: 'Helium', status: 'Aproved' },
+  { order: 3, date: 'Lithium', status: 'Aproved' },
+  { order: 4, date: 'Beryllium', status: 'Rjected' },
+  { order: 5, date: 'Boron', status: 'Rjected' },
+  { order: 6, date: 'Carbon', status: 'Rjected' },
+  { order: 7, date: 'Nitrogen', status: 'Rjected' },
+  { order: 8, date: 'Oxygen', status: 'Pending' },
+  { order: 9, date: 'Fluorine', status: 'Pending' },
+  { order: 10, date: 'Neon', status: 'Pending' },
+];
 @Component({
   selector: 'app-order-list',
   templateUrl: './order-list.component.html',
-  styleUrls: ['./order-list.component.scss']
+  styleUrls: ['./order-list.component.scss'],
 })
 export class OrderListComponent {
-
+  displayedColumns: string[] = ['order', 'date', 'status', 'actions'];
+  dataSource = ELEMENT_DATA;
 }

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

@@ -1,10 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { OrdersComponent } from './orders.component';
+import { OrderListComponent } from './order-list/order-list.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    component: OrdersComponent,
+    children: [{ path: '', component: OrderListComponent }],
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class OrdersRoutingModule { }
+export class OrdersRoutingModule {}

src/app/modules/orders/orders.component.html

@@ -1 +1,4 @@
-<p>orders works!</p>
+<section class="orders">
+  <app-order-header></app-order-header>
+  <router-outlet></router-outlet>
+</section>

src/app/modules/orders/orders.component.scss

@@ -0,0 +1,64 @@
+@mixin order-list() {
+  app-orders {
+    .orders {
+      background-color: $off-white;
+      border-radius: 25px;
+      padding: 20px;
+      margin: 20px 0;
+      header {
+        h1 {
+          font-size: 18px;
+          color: $main-color;
+        }
+        main {
+          padding: 20px 0;
+          div {
+            img {
+              width: 50px;
+              height: 50px;
+              object-fit: cover;
+            }
+            p {
+              font-size: 19px;
+              color: $light-blue;
+            }
+            span {
+              font-size: 16px;
+              color: #7b8793;
+            }
+          }
+          button {
+            /* UI Properties */
+            background: $main-color;
+            border-radius: 10px;
+            padding: 10px 40px;
+            color: $white-color;
+            border: 1px solid $main-color;
+            font-size: 16px;
+            cursor: pointer;
+            transition: all 0.5s;
+            &:hover {
+              background-color: $main-blue;
+              border: 1px solid $main-blue;
+            }
+          }
+        }
+      }
+    }
+    .btn {
+      /* UI Properties */
+      background: $main-color;
+      border-radius: 10px;
+      padding: 10px;
+      color: $white-color;
+      border: 1px solid $main-color;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.5s;
+      &:hover {
+        background-color: $main-blue;
+        border: 1px solid $main-blue;
+      }
+    }
+  }
+}

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

@@ -6,18 +6,17 @@ import { OrdersComponent } from './orders.component';
 import { OrderListComponent } from './order-list/order-list.component';
 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';
 
 @NgModule({
   declarations: [
     OrdersComponent,
     OrderListComponent,
     OrderFormComponent,
-    OrderDetailsComponent
+    OrderDetailsComponent,
+    OrderHeaderComponent,
   ],
-  imports: [
-    CommonModule,
-    OrdersRoutingModule
-  ]
+  imports: [CommonModule, OrdersRoutingModule, SharedModule],
 })
-export class OrdersModule { }
+export class OrdersModule {}

src/app/shared/shared.module.ts

@@ -26,6 +26,7 @@ import { ErrorFormComponent } from './components/error-form/error-form.component
 import { TranslateModule } from '@ngx-translate/core';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTabsModule } from '@angular/material/tabs';
+import { MatTableModule } from '@angular/material/table';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -49,6 +50,7 @@ const MATERIAL_MODULES = [
   MatDialogModule,
   MatProgressBarModule,
   MatTabsModule,
+  MatTableModule,
 ];
 
 const COMPONENTS = [ErrorFormComponent, WarningComponent, FileUploadComponent];

src/assets/scss/variables.scss

@@ -83,6 +83,7 @@ $span-color: #707070;
 @import "../../app/modules/teams/teams.component.scss";
 @import "../../app/modules/task-management//task-managemnt-theme.scss";
 @import "../../app/modules/meetings/meetings-theme.scss";
+@import "../../app/modules/orders/orders.component.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
@@ -98,6 +99,7 @@ $span-color: #707070;
   @include teams-theme();
   @include task-management();
   @include meetings-theme();
+  @include order-list();
 }
 
 @include component-theme();

src/styles.scss

@@ -250,3 +250,7 @@ input.mat-input-element {
 .fs-15 {
   font-size: 15px;
 }
+
+.d-block {
+  display: block;
+}