search for rmployee

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

@@ -56,12 +56,12 @@ export class SideNavComponent {
     //   img: '../../../../assets/images/tracker.svg',
     //   link: '/tracker',
     // },
-    // {
-    //   index: 8,
-    //   name: 'Search for employees',
-    //   img: '../../../../assets/images/search-for-staff-svgrepo-com.svg',
-    //   link: 'search',
-    // },
+    {
+      index: 8,
+      name: 'Search for employees',
+      img: '../../../../assets/images/search-for-staff-svgrepo-com.svg',
+      link: 'search-employee',
+    },
     {
       index: 9,
       name: 'Human recourse',
@@ -80,11 +80,7 @@ export class SideNavComponent {
       img: '../../../../assets/images/order.svg',
       link: '/modules/orders',
     },
-    // {
-    //   index: 11,
-    //   name: 'Setting',
-    //   img: '../../../../assets/images/setting.svg',
-    // },
+
     {
       index: 11,
       name: 'Logout',

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

@@ -61,6 +61,13 @@ const routes: Routes = [
           ),
       },
       {
+        path: 'search-employee',
+        loadChildren: () =>
+          import('./search-employee/search-employee.module').then(
+            (m) => m.SearchEmployeeModule
+          ),
+      },
+      {
         path: '',
         redirectTo: 'dashboard',
         pathMatch: 'full',

src/app/modules/search-employee/components/employee-filter/employee-filter.component.html

@@ -0,0 +1 @@
+<p>employee-filter works!</p>

src/app/modules/search-employee/components/employee-filter/employee-filter.component.spec.ts

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

src/app/modules/search-employee/components/employee-filter/employee-filter.component.ts

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

src/app/modules/search-employee/employee-list/employee-list.component.html

@@ -0,0 +1,53 @@
+<section class="search-employee">
+  <main>
+    <h1 class="bold">Search for employees</h1>
+    <div class="search mt-2 gap-5" fxLayout="row" fxLayoutAlign="start center">
+      <input class="input-search" type="text" placeholder="Search..." />
+      <button class="filter">Filter</button>
+    </div>
+  </main>
+
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 mt-3">
+    <ng-container matColumnDef="user">
+      <th mat-header-cell *matHeaderCellDef>User</th>
+      <td mat-cell *matCellDef="let element">
+        <div fxLayout="row" fxLayoutAlign="start center" class="gap-10 ptb-10">
+          <img [src]="element.user.img" alt="" title="" />
+          <div>
+            <span class="span bold d-block ptr">{{ element.user.name }}</span>
+            <span class="span gray d-block">{{ element.user.position }}</span>
+            <span class="span gray d-block">{{ element.user.email }}</span>
+          </div>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef>Status</th>
+      <td mat-cell *matCellDef="let element">{{ element.status }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="industry">
+      <th mat-header-cell *matHeaderCellDef>Industry</th>
+      <td mat-cell *matCellDef="let element">{{ element.industry }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="country">
+      <th mat-header-cell *matHeaderCellDef>Country</th>
+      <td mat-cell *matCellDef="let element">
+        <span>{{ element.country }}</span>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="company">
+      <th mat-header-cell *matHeaderCellDef>Company Name</th>
+      <td mat-cell *matCellDef="let element">
+        <span>{{ element.company }}</span>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+  <app-pagenation></app-pagenation>
+</section>

src/app/modules/search-employee/employee-list/employee-list.component.scss

@@ -0,0 +1,28 @@
+.mat-mdc-table {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.mat-mdc-header-row {
+  color: #2e368f;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.mat-mdc-row {
+  color: #28abe3;
+}
+
+.mat-mdc-cell {
+  border-bottom: 1px solid #fff;
+}
+
+.vacation-days {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #e5c9d3;
+  border-radius: 10px;
+  width: 40px;
+  height: 40px;
+}

src/app/modules/search-employee/employee-list/employee-list.component.spec.ts

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

src/app/modules/search-employee/employee-list/employee-list.component.ts

@@ -0,0 +1,76 @@
+import { Component } from '@angular/core';
+
+export interface PeriodicElement {
+  user: any;
+  status: string;
+  industry: string;
+  country: string;
+  company: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    status: 'Employed',
+    industry: 'Programming',
+    country: '1 ST',
+    company: 'Rabbit Technology',
+  },
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    status: 'Employed',
+    industry: 'Programming',
+    country: '1 ST',
+    company: 'Rabbit Technology',
+  },
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    status: 'Employed',
+    industry: 'Programming',
+    country: '1 ST',
+    company: 'Rabbit Technology',
+  },
+  {
+    user: {
+      name: 'Mai Ghoneim',
+      img: 'assets/images/avatar.png',
+      email: 'ebrahimnour186@gmail.com',
+      position: 'Senior UI/UX Designer',
+    },
+    status: 'Employed',
+    industry: 'Programming',
+    country: '1 ST',
+    company: 'Rabbit Technology',
+  },
+];
+
+@Component({
+  selector: 'app-employee-list',
+  templateUrl: './employee-list.component.html',
+  styleUrls: ['./employee-list.component.scss'],
+})
+export class EmployeeListComponent {
+  displayedColumns: string[] = [
+    'user',
+    'status',
+    'industry',
+    'country',
+    'company',
+  ];
+  dataSource = ELEMENT_DATA;
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { SearchEmployeeComponent } from './search-employee.component';
+import { EmployeeListComponent } from './employee-list/employee-list.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SearchEmployeeComponent,
+    children: [{ path: '', component: EmployeeListComponent }],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SearchEmployeeRoutingModule {}

src/app/modules/search-employee/search-employee.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/modules/search-employee/search-employee.component.scss

@@ -0,0 +1,45 @@
+@mixin search-employee-theme() {
+  app-search-employee {
+    .search-employee {
+      background-color: $off-white;
+      box-shadow: -2px 6px 9px #2f2c8333;
+      padding: 20px;
+      margin: 20px 0;
+      border-radius: 18px;
+      main {
+        h1 {
+          color: $main-color;
+          font-size: 18px;
+          span {
+            margin: 0 10px;
+          }
+        }
+        .search {
+          width: 40%;
+          @media (max-width: 767px) {
+            width: 100%;
+          }
+
+          .input-search {
+            width: 100%;
+            padding: 10px 15px;
+            border-radius: 10px;
+            box-shadow: 0px 5px 6px #2f2c8324;
+            border: 0.5px solid #2e368f;
+            border-radius: 10px;
+            outline: none;
+          }
+          .filter {
+            background-color: $light-blue;
+            color: $white-color;
+            border: 1px solid $light-blue;
+            padding: 8px 15px;
+            border-radius: 10px;
+            font-size: 16px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

src/app/modules/search-employee/search-employee.component.spec.ts

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

src/app/modules/search-employee/search-employee.component.ts

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

src/app/modules/search-employee/search-employee.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SearchEmployeeRoutingModule } from './search-employee-routing.module';
+import { SearchEmployeeComponent } from './search-employee.component';
+import { EmployeeListComponent } from './employee-list/employee-list.component';
+import { EmployeeFilterComponent } from './components/employee-filter/employee-filter.component';
+import { SharedModule } from '@shared/shared.module';
+
+@NgModule({
+  declarations: [
+    SearchEmployeeComponent,
+    EmployeeListComponent,
+    EmployeeFilterComponent,
+  ],
+  imports: [CommonModule, SearchEmployeeRoutingModule, SharedModule],
+})
+export class SearchEmployeeModule {}

src/assets/scss/spineer.scss

@@ -27,10 +27,10 @@
 .input {
   padding: 15px;
   border-radius: 10px;
-  border: 1px solid $main-color;
-  background-color: $white-color;
+  border: 1px solid #ccc;
+  background-color: #fff;
   box-shadow: 0px 5px 6px #2f2c8324;
-  background-color: $white-color;
+  background-color: #fff;
   outline: none;
   font-size: 15px;
 }

src/assets/scss/variables.scss

@@ -87,6 +87,8 @@ $span-color: #707070;
 @import "../../app/modules/attendance/attendance.component.scss";
 @import "../../app/modules/human-resource/human-resource.component.scss";
 @import "../../app/modules/medical-insurance/medical-insurance.component.scss";
+@import "../../app/modules/search-employee/search-employee.component.scss";
+
 @import "./spineer.scss";
 
 @mixin component-theme() {
@@ -106,6 +108,7 @@ $span-color: #707070;
   @include attendance-theme();
   @include human-resourcce-theme();
   @include medical-theme();
+  @include search-employee-theme();
 }
 
 @include component-theme();