meetings

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AttendanceRoutingModule { }

src/app/modules/attendance/attendance.component.html

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

src/app/modules/attendance/attendance.component.spec.ts

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

src/app/modules/attendance/attendance.component.ts

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

src/app/modules/attendance/attendance.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AttendanceRoutingModule } from './attendance-routing.module';
+import { AttendanceComponent } from './attendance.component';
+
+
+@NgModule({
+  declarations: [
+    AttendanceComponent
+  ],
+  imports: [
+    CommonModule,
+    AttendanceRoutingModule
+  ]
+})
+export class AttendanceModule { }

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

@@ -28,6 +28,12 @@ export class SideNavComponent {
     },
     {
       index: 4,
+      name: 'Meetings',
+      img: '',
+      link: '/modules/meetings',
+    },
+    {
+      index: 4,
       name: 'Contracts',
       img: '../../../../assets/images/dashboard.svg',
       link: '/contracts',

src/app/modules/meetings/components/ceate-meeting/ceate-meeting.component.html

@@ -0,0 +1,128 @@
+<h2 mat-dialog-title class="text-center">
+  <span>Create Meeting</span>
+</h2>
+<mat-dialog-content class="mat-typography">
+  <form fxLayout="column" fxLayoutAlign="start stretch" class="gap-20">
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex="100"
+    >
+      <label for="title">
+        <span>Title <span class="red">*</span></span>
+      </label>
+      <input type="text" id="title" placeholder="Enter Meeting Title" />
+    </div>
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex="100"
+    >
+      <label for="location">
+        <span>Meeting location or Link <span class="red">*</span></span>
+      </label>
+      <input
+        type="text"
+        id="location"
+        placeholder="Enter meeting location or link"
+      />
+    </div>
+
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex="100"
+    >
+      <label for="location">
+        <span>Details <span class="red">*</span></span>
+      </label>
+      <textarea
+        rows="4"
+        cols="6"
+        placeholder="Enter meeting details"
+      ></textarea>
+    </div>
+
+    <div fxLayout="row" fxLayoutAlign="start start" class="gap-20">
+      <div
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="50"
+      >
+        <label for="date">
+          <span class="fz-13">Date<span class="red">*</span></span>
+        </label>
+        <input class="date" type="date" id="date" placeholder="Select Date" />
+      </div>
+
+      <div
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="50"
+      >
+        <label for="time">
+          <span class="fz-13">Time<span class="red">*</span></span>
+        </label>
+        <div fxLayout="row" fxLayoutAlign="start ccenter" class="gap-20">
+          <input
+            type="time"
+            id="time"
+            placeholder="From"
+            class="time"
+            fxFlex.lt-md="100"
+            fxFlex.gt-sm="50"
+          />
+          <input
+            type="time"
+            id="time"
+            placeholder="To"
+            class="time"
+            fxFlex.lt-md="100"
+            fxFlex.gt-sm="50"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="form-input"
+      fxLayout="column"
+      fxLayoutAlign="start stretch"
+      fxFlex="100"
+    >
+      <label for="repeated">
+        <span>Repeat</span>
+      </label>
+      <select></select>
+    </div>
+
+    <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100">
+      <span class="fz-13">Assigne</span>
+      <mat-form-field appearance="outline">
+        <mat-select multiple>
+          <!-- <mat-select-trigger>
+            {{toppings.value?.[0] || ''}}
+            @if ((toppings.value?.length || 0) > 1) {
+            <span class="example-additional-selection">
+              (+{{ (toppings.value?.length || 0) - 1 }}
+              {{ toppings.value?.length === 2 ? "other" : "others" }})
+            </span>
+            }
+          </mat-select-trigger> -->
+          <!-- @for (topping of toppingList; track topping) {
+          <mat-option [value]="topping">{{ topping }}</mat-option>
+          } -->
+        </mat-select>
+      </mat-form-field>
+    </div>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>save</button>
+</mat-dialog-actions>

src/app/modules/meetings/components/ceate-meeting/ceate-meeting.component.scss

@@ -0,0 +1,42 @@
+h2 {
+  span {
+    color: #2e368f;
+    font-size: 20px;
+  }
+}
+
+.form-input {
+  width: 100%;
+  label {
+    margin-bottom: 5px;
+    font-size: 13px;
+    span {
+      margin: 0 5px;
+    }
+  }
+  input,
+  select,
+  textarea,
+  .time {
+    padding: 15px 20px;
+    border-radius: 10px;
+    // box-shadow: 0px 5px 6px #2f2c8324;
+    border: 0.5px solid #2f2c83;
+    border-radius: 10px;
+    outline: none;
+  }
+}
+
+.time,
+.date {
+  padding: 15px 20px;
+  border-radius: 10px;
+  // box-shadow: 0px 5px 6px #2f2c8324;
+  border: 0.5px solid #2f2c83;
+  border-radius: 10px;
+  outline: none;
+}
+
+.time {
+  background-color: #2f2c8326;
+}

src/app/modules/meetings/components/ceate-meeting/ceate-meeting.component.spec.ts

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

src/app/modules/meetings/components/ceate-meeting/ceate-meeting.component.ts

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

src/app/modules/meetings/components/meeting-item/meeting-item.component.html

@@ -0,0 +1,18 @@
+<div class="item-card">
+  <h1>
+    <span>9:30 AM - 12:30 PM</span>
+  </h1>
+  <p>Meeting with CEO</p>
+  <ul fxLayout="row" fxLayoutAlign="start center">
+    <li>
+      <img src="../../../../../assets/images/avatar.png" alt="" title="" />
+    </li>
+    <li>
+      <img src="../../../../../assets/images/avatar.png" alt="" title="" />
+    </li>
+    <li>
+      <img src="../../../../../assets/images/avatar.png" alt="" title="" />
+    </li>
+    <li class="count">15</li>
+  </ul>
+</div>

src/app/modules/meetings/components/meeting-item/meeting-item.component.spec.ts

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

src/app/modules/meetings/components/meeting-item/meeting-item.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-meeting-item',
+  templateUrl: './meeting-item.component.html',
+  styleUrls: ['./meeting-item.component.scss'],
+})
+export class MeetingItemComponent {}

src/app/modules/meetings/list/list.component.html

@@ -0,0 +1,28 @@
+<section class="meetings-list">
+  <header fxLayout="row" fxLayoutAlign="space-between start">
+    <h1 class="bold">Meetings</h1>
+    <!-- <mat-form-field>
+      <mat-label>Verbose datepicker</mat-label>
+      <input matInput [matDatepicker]="dp" />
+      <mat-datepicker-toggle matIconSuffix [for]="dp"></mat-datepicker-toggle>
+      <mat-datepicker #dp></mat-datepicker>
+    </mat-form-field> -->
+    <button (click)="openCreateDialog()">Create Meeting</button>
+  </header>
+
+  <div class="meetings-list__content">
+    <p class="bold">Sun <span>01/8/2023</span></p>
+    <div class="mt-5 gap-10" fxLayout="row wrap" fxLayoutAlign="center start">
+      <app-meeting-item fxFlex.lt-md="100" fxFlex.gt-sm="24"></app-meeting-item>
+      <app-meeting-item fxFlex.lt-md="100" fxFlex.gt-sm="24"></app-meeting-item>
+      <app-meeting-item fxFlex.lt-md="100" fxFlex.gt-sm="24"></app-meeting-item>
+      <app-meeting-item fxFlex.lt-md="100" fxFlex.gt-sm="24">
+      </app-meeting-item>
+      <app-meeting-item fxFlex.lt-md="100" fxFlex.gt-sm="24"></app-meeting-item>
+      <app-meeting-item fxFlex.lt-md="100" fxFlex.gt-sm="24"></app-meeting-item>
+      <app-meeting-item fxFlex.lt-md="100" fxFlex.gt-sm="24"></app-meeting-item>
+      <app-meeting-item fxFlex.lt-md="100" fxFlex.gt-sm="24">
+      </app-meeting-item>
+    </div>
+  </div>
+</section>

src/app/modules/meetings/list/list.component.spec.ts

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

src/app/modules/meetings/list/list.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { CeateMeetingComponent } from '../components/ceate-meeting/ceate-meeting.component';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss'],
+})
+export class ListComponent {
+  constructor(public readonly dialog: MatDialog) {}
+  openCreateDialog(): void {
+    const dialogRef = this.dialog.open(CeateMeetingComponent, {
+      width: '800px',
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
+}

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

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

src/app/modules/meetings/meetings-theme.scss

@@ -0,0 +1,71 @@
+@mixin meetings-theme() {
+  app-meetings {
+    .meetings-list {
+      height: 100%;
+      background-color: $off-white;
+      margin: 10px 0;
+      padding: 20px 20px;
+      border-radius: 20px;
+      header {
+        h1 {
+          color: $main-color;
+          font-size: 20px;
+        }
+
+        button {
+          background-color: $light-blue;
+          padding: 10px 20px;
+          border-radius: 20px;
+          color: $white-color;
+          outline: none;
+          border: 1px solid $light-blue;
+          font-size: 18px;
+          cursor: pointer;
+        }
+      }
+      &__content {
+        padding: 20px 0;
+        p {
+          color: #707070;
+          font-size: 17px;
+          span {
+            color: $main-color;
+          }
+        }
+      }
+    }
+
+    .item-card {
+      background-color: $white-color;
+      padding: 20px;
+      border-radius: 15px;
+      margin: 0 10px;
+      margin-bottom: 20px;
+      h1 {
+        font-size: 15px;
+        color: $main-color;
+      }
+      p {
+        margin-top: 10px;
+        color: $main-color;
+        font-size: 15px;
+      }
+
+      ul {
+        list-style: none;
+        margin-top: 10px;
+        .count {
+          text-align: center;
+          letter-spacing: 0px;
+          color: #707070;
+          opacity: 1;
+          box-shadow: 0px 2px 5px #00000029;
+          background-color: $white-color;
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}

src/app/modules/meetings/meetings.component.html

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

src/app/modules/meetings/meetings.component.spec.ts

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

src/app/modules/meetings/meetings.component.ts

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

src/app/modules/meetings/meetings.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MeetingsRoutingModule } from './meetings-routing.module';
+import { MeetingsComponent } from './meetings.component';
+import { ListComponent } from './list/list.component';
+import { MeetingItemComponent } from './components/meeting-item/meeting-item.component';
+import { SharedModule } from '@shared/shared.module';
+import { CeateMeetingComponent } from './components/ceate-meeting/ceate-meeting.component';
+
+@NgModule({
+  declarations: [MeetingsComponent, ListComponent, MeetingItemComponent, CeateMeetingComponent],
+  imports: [CommonModule, MeetingsRoutingModule, SharedModule],
+})
+export class MeetingsModule {}

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

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

src/app/modules/task-management/components/attachements/attachements.component.html

@@ -13,7 +13,7 @@
         <td>Mohamed-cv.doc</td>
         <td>1.8 BM</td>
         <td>17-5-2022</td>
-        <td fxLayout="row" fxLayoutAlign="start start">
+        <td fxLayout="row" fxLayoutAlign="start center" class="gap-10">
           <img src="../../../../../assets/images/avatar.png" alt="" title="" />
           <span>Franky Schmidt</span>
         </td>

src/app/modules/task-management/task-details/task-details.component.html

@@ -18,23 +18,6 @@
       >
     </div>
   </main>
-  <mat-tab-group
-    animationDuration="300ms"
-    mat-stretch-tabs="false"
-    mat-align-tabs="start"
-    class="mt-3"
-  >
-    <mat-tab label="Comments">
-      <app-comments></app-comments>
-    </mat-tab>
-    <mat-tab label="Discription">
-      <app-description></app-description>
-    </mat-tab>
-    <mat-tab label="Attachements">
-      <app-attachements></app-attachements>
-    </mat-tab>
-  </mat-tab-group>
-
   <div class="task-details__details">
     <p fxLayout="row" fxLayoutAlign="start center" class="gap-20">
       <span>Status</span>
@@ -56,5 +39,20 @@
     </p>
   </div>
 
-  <div class="tabs"></div>
+  <mat-tab-group
+    animationDuration="300ms"
+    mat-stretch-tabs="false"
+    mat-align-tabs="start"
+    class="mt-3"
+  >
+    <mat-tab label="Comments">
+      <app-comments></app-comments>
+    </mat-tab>
+    <mat-tab label="Discription">
+      <app-description></app-description>
+    </mat-tab>
+    <mat-tab label="Attachements">
+      <app-attachements></app-attachements>
+    </mat-tab>
+  </mat-tab-group>
 </section>

src/assets/scss/variables.scss

@@ -82,6 +82,7 @@ $span-color: #707070;
 @import "../../app/modules/profile/profile-theme.scss";
 @import "../../app/modules/teams/teams.component.scss";
 @import "../../app/modules/task-management//task-managemnt-theme.scss";
+@import "../../app/modules/meetings/meetings-theme.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
@@ -96,6 +97,7 @@ $span-color: #707070;
   @include profile-theme();
   @include teams-theme();
   @include task-management();
+  @include meetings-theme();
 }
 
 @include component-theme();

src/styles.scss

@@ -242,3 +242,7 @@ input.mat-input-element {
   padding-left: 5px;
   padding-right: 5px;
 }
+
+.fz-13 {
+  font-size: 13px;
+}