[ Workshop-details]- display Working hours #1088

src/app/shared/components/working-hours-form/working-hours-form.component.html

@@ -1,4 +1,4 @@
-<div fxLayout='row' fxLayoutAlign='start center' fxLayoutGap='1rem' fxLayout.xs="column"
+<div fxLayout="row" fxLayoutAlign='start center' fxLayoutGap='1rem' fxLayout.xs="column"
   fxLayoutAlign.xs="center start">
   <div>
     <div fxLayout='row' fxLayoutAlign='space-between'

src/app/shared/components/working-hours-form/working-hours-form.component.scss

@@ -1,5 +1,6 @@
 @import "src/app/shared/styles/validation-form.scss";
 @import "src/app/shared/styles/buttons.scss";
+@import "src/app/shared/styles/working-hours.scss";
 
 .days-toggle{
   min-width: 200px;
@@ -9,45 +10,13 @@
     border: 1px solid #C72A21;
   }
 }
-.toggle{
-    height: 40px;
-    flex-grow: 1;
-    box-sizing: border-box;
-    border: 1px solid #EBEBEB;
-    background: #FFFFFF;
-    &-selected{
-      background: rgba(56, 73, 249, 0.07);
-      border: 1px solid #3849F9;
-    }
-    &:first-child{
-      border-top-left-radius: 25px;
-      border-bottom-left-radius: 25px;
-    }
-    &:last-child{
-      border-top-right-radius: 25px;
-      border-bottom-right-radius: 25px;
-    }
+.toggle{    
     &:hover{
       cursor: pointer;
       opacity: 0.8;
     }
   }
-.input{
-    border: 1px solid #E3E3E3;
-    box-sizing: border-box;
-    border-radius: 21px;
-    padding:0.5rem;
-    max-width: max-content;
-    height: 40px;
-    align-items: center;
-    text-align: center;
-}
-.text{
-  font-family: Open Sans;
-  font-weight: 700;
-  color: #AAAAAA;
-  padding: 5px;
-}
+
 .mat-icon-delete{
   color:#3849F9;
   &:hover{

src/app/shared/styles/working-hours.scss

@@ -0,0 +1,40 @@
+.toggle {
+  height: 40px;
+  padding: 5px;
+  margin-top: 10px;
+  flex-grow: 1;
+  box-sizing: border-box;
+  border: 1px solid #EBEBEB;
+  background: #FFFFFF;
+  &-selected{
+    background: rgba(56, 73, 249, 0.07);
+    border: 1px solid #3849F9;
+  }
+  &:first-child{
+    border-top-left-radius: 25px;
+    border-bottom-left-radius: 25px;
+  }
+  &:last-child{
+    border-top-right-radius: 25px;
+    border-bottom-right-radius: 25px;
+  }
+}
+
+.text{
+  font-family: Open Sans;
+  font-weight: 700;
+  color: #AAAAAA;
+  padding: 5px;
+}
+
+.input {
+  font-family: Open Sans;
+  border: 1px solid #E3E3E3;
+  box-sizing: border-box;
+  border-radius: 21px;
+  padding: 0.5rem 2rem;
+  max-width: max-content;
+  height: 40px;
+  align-items: center;
+  text-align: center;
+}

src/app/shell/details/information-page/workshop-about/workshop-about.component.html

@@ -6,4 +6,23 @@ <h5> Вартість </h5>
   <p *ngIf="workshop.price"> {{ workshop.price }} грн/ {{ workshop.isPerMonth ? 'місяць' : 'заняття' }} </p>
   <h5> Наявність ресурсу для надання освіти для осіб з ООП та осіб з інвалідністю </h5>
   <p> {{ workshop.withDisabilityOptions ? workshop.disabilityOptionsDesc : 'Відсутні' }} </p>
+
+  <h5>Дні/Години</h5>
+  <div *ngFor="let timeRange of workshop.dateTimeRanges">
+    <div fxLayout='row' fxLayoutAlign='start center' fxLayoutGap='1rem' 
+    fxLayout.xs="column" fxLayoutAlign.xs="center start">    
+      <div fxLayout='row' fxLayoutAlign='space-between'>
+        <div *ngFor="let day of days" class="toggle" fxLayout='row' 
+          fxLayoutAlign='center center'
+          [ngClass]="{ 'toggle-selected' : timeRange.workdays.includes(workingDaysReverse[day.value] | titlecase) }">
+          {{day.value}}
+        </div>
+      </div>
+      <div fxLayout='row' fxLayoutAlign='center center'>
+        <p class="text">Від</p><p class="input">{{timeRange.startTime}}</p>
+        <p class="text">До</p><p class="input">{{timeRange.endTime}}</p>
+      </div>    
+    </div>  
+  </div>
+
 </div>

src/app/shell/details/information-page/workshop-about/workshop-about.component.scss

@@ -1,3 +1,5 @@
+@import "src/app/shared/styles/working-hours.scss";
+
 .wrapper{
-  margin-top: 2rem;
-}
+  margin: 2rem 0;
+}

src/app/shell/details/information-page/workshop-about/workshop-about.component.ts

@@ -1,4 +1,7 @@
 import { Component, Input } from '@angular/core';
+import { WorkingDaysValues } from 'src/app/shared/constants/constants';
+import { WorkingDays, WorkingDaysReverse } from 'src/app/shared/enum/enumUA/working-hours';
+import { WorkingDaysToggleValue } from 'src/app/shared/models/workingHours.model';
 import { Workshop } from 'src/app/shared/models/workshop.model';
 
 @Component({
@@ -8,13 +11,9 @@ import { Workshop } from 'src/app/shared/models/workshop.model';
 })
 
 export class WorkshopAboutComponent {
-  @Input() workshop: Workshop;
-
-  workshopDetailsMock = {
-    description: 'Бальні танці — різновид парних танців, упорядкованих та кодифікованих для спортивних змагань.',
-    programm: 'Інформація про програму має бути тут',
-    groupe: 'Молодша група (7-10 років)',
-    schedule: 'Пн, Ср 12-14 год Вт, Чт 18-20 год',
-    duration: '2 години',
-  };
+  readonly workingDays = WorkingDays;
+  readonly workingDaysReverse = WorkingDaysReverse;
+  @Input() workshop!: Workshop;
+  days: WorkingDaysToggleValue[] = WorkingDaysValues
+    .map((value: WorkingDaysToggleValue) => Object.assign({}, value));
 }