feat(scheduel): add new properties typesConfig and blocked event to e…

…vents
TemainfoSoftware · Jul 3, 2019 · 81737c6 · 81737c6
1 parent b14e866
commit 81737c6
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 33 deletions.
diff --git a/projects/truly-ui/src/components/schedule/index.ts b/projects/truly-ui/src/components/schedule/index.ts
@@ -13,11 +13,13 @@ import { BlockUIModule } from '../blockui/index';
 import { ButtonModule } from '../button/index';
 import { ButtonGroupModule } from '../buttongroup/index';
 import { LoaderModule } from '../loader/index';
+import { SplitButtonModule } from '../splitbutton/index';
+import { IconsModule } from '../icons/index';
 
 import { GenerateEventsService } from './services/generate-events.service';
 import { WorkScaleService } from './services/work-scale.service';
 import { EventService } from './services/event.service';
-import {SplitButtonModule} from '../splitbutton/index';
+
 
 
 @NgModule({
@@ -30,6 +32,7 @@ import {SplitButtonModule} from '../splitbutton/index';
       BlockUIModule,
       ButtonModule,
       LoaderModule,
+      IconsModule,
       SplitButtonModule
     ],
     declarations: [

diff --git a/projects/truly-ui/src/components/schedule/schedule.html b/projects/truly-ui/src/components/schedule/schedule.html
@@ -30,6 +30,7 @@
         [currentDate]="currentDate"
         [showNowIndicator]="showNowIndicator"
         [statusConfig]="statusConfig"
+        [typesConfig]="typesConfig"
         [events]="events"
         [slotSettings]="slotSettings"
         [slatNumberRowsAsArray]="slatNumberRowsAsArray"

diff --git a/projects/truly-ui/src/components/schedule/schedule.ts b/projects/truly-ui/src/components/schedule/schedule.ts
@@ -54,6 +54,8 @@ export class TlSchedule implements OnInit, OnChanges {
 
   @Input() statusConfig: StatusType;
 
+  @Input() typesConfig: any;
+
   @Input() currentDate = new Date();
 
   @Input() height = '550px';

diff --git a/projects/truly-ui/src/components/schedule/views/day/view-day.component.html b/projects/truly-ui/src/components/schedule/views/day/view-day.component.html
@@ -27,7 +27,7 @@
     <div class="ui-schedule-list-events">
 
       <!-- CREATE EVENTS BOXES-->
-      <div class="ui-schedule-event-box"
+      <div class="ui-schedule-event-box" [style.borderLeftWidth]="event?.data?.blocked ? 0 : '5px'"
            #elementBox
            *ngFor="let event of eventsWithPositions; let index = index"
            [ngStyle]="{
@@ -38,17 +38,32 @@
            }"
            [style.borderLeftColor]="statusConfig ? statusConfig[event?.data?.status]?.color : '#FFFFFF'"
            [tooltip]="{text: statusConfig ? statusConfig[event?.data?.status]?.description : '' , placement: 'top-center'}"
-           (contextmenu)="onEventContextmenu.emit( { event: $event, data: event?.data, element: elementBox } ); false"
            (click)="onEventClick.emit( event?.data )"
            (dblclick)="onEventDbClick.emit( event?.data )"
            (mouseover)="onEventMouseout.emit( event?.data )"
            (mouseout)="onEventMouseout.emit( event?.data )"
       >
-        <div class="ui-schedule-description">
-          <div class="ui-event-title">{{event?.data?.title}}</div>
-          <div class="ui-event-detail">{{event?.data?.detail}}</div>
-        </div>
-        <div class="ui-event-hour">{{event?.data?.date?.start | date: 'HH:mm'}} - {{event?.data?.date?.end | date: 'HH:mm'}}</div>
+        <ng-container *ngIf="!event?.data?.blocked">
+          <div class="ui-schedule-description">
+            <div class="ui-event-title">{{event?.data?.title}}</div>
+            <div class="ui-event-detail">{{event?.data?.detail}}</div>
+          </div>
+          <div class="ui-event-hour">
+            {{event?.data?.date?.start | date: 'HH:mm'}} - {{event?.data?.date?.end | date: 'HH:mm'}}<br>
+            {{typesConfig[event?.data?.type]?.description}}
+          </div>
+        </ng-container>
+
+        <ng-container *ngIf="event?.data?.blocked">
+          <div class="ui-schedule-event-blocked">
+            <div class="ui-event-title">{{event?.data?.title}}</div>
+            <div class="ui-event-hour">
+              <tl-icon [lib]="'fa'" [style]="'far'">clock</tl-icon>
+              {{event?.data?.date?.start | date: 'HH:mm'}} - {{event?.data?.date?.end | date: 'HH:mm'}}<br>
+            </div>
+          </div>
+
+        </ng-container>
       </div>
 
     </div>

diff --git a/projects/truly-ui/src/components/schedule/views/day/view-day.component.scss b/projects/truly-ui/src/components/schedule/views/day/view-day.component.scss
@@ -106,8 +106,35 @@
     align-items: center;
     display: flex;
     width: 35%;
+    text-align: center;
   }
-  > .ui-schedule-description{
+  > .ui-schedule-event-blocked {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: repeating-linear-gradient(
+        135deg,
+        #F5F5F5C4,
+        #F5F5F5C4 10px,
+        #FFFFFF 10px,
+        #FFFFFF 20px
+    );
+    > .ui-event-title{
+      font-size: 0.9em;
+      font-weight: 600;
+      color: #454e58;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-variant-caps: all-petite-caps;
+    }
+    > .ui-event-hour{
+      font-size: 1.0em;
+      color: #454e58;
+    }
+  }
+  > .ui-schedule-description {
     padding: 2px 0 0 5px;
     width: 65%;
     line-height: 1.3em;

diff --git a/projects/truly-ui/src/components/schedule/views/day/view-day.component.ts b/projects/truly-ui/src/components/schedule/views/day/view-day.component.ts
@@ -24,6 +24,8 @@ export class ViewDayComponent implements OnInit, AfterViewInit, OnChanges, OnDes
 
   @Input() statusConfig: {StatusType};
 
+  @Input() typesConfig: any;
+
   @Input() showNowIndicator = false;
 
   @Input() slotSettings: SlotSettingsType;

diff --git a/projects/truly-ui/src/components/tooltip/directives/tooltip.directive.ts b/projects/truly-ui/src/components/tooltip/directives/tooltip.directive.ts
@@ -26,7 +26,7 @@ export class TooltipDirective  {
   }
 
   private show() {
-    if ( this.tooltip.text !== '' ) {
+    if ( (this.tooltip.text !== '') && (this.tooltip.text !== null) ) {
       const componentFactory = this.compiler.resolveComponentFactory( TlToolTipContainer );
       const componentRef = this.view.createComponent( componentFactory );
       (<TlToolTipContainer>componentRef.instance).setOptions( this.tooltip );

diff --git a/src/app/components/schedule/overview/scheduledemo-overview.component.html b/src/app/components/schedule/overview/scheduledemo-overview.component.html
@@ -16,6 +16,7 @@ <h6>Basic</h6>
                   [workScale]="workScale"
                   [showNowIndicator]="false"
                   [statusConfig]="statusConfig"
+                  [typesConfig]="types"
                   (eventContextmenu)="onEventContextmenu($event)"
                   (rowDbClick)="onRowClick($event)"
                   (changeDate)="onChangeDate( $event )"

diff --git a/src/app/components/schedule/overview/scheduledemo-overview.component.ts b/src/app/components/schedule/overview/scheduledemo-overview.component.ts
@@ -49,42 +49,96 @@ export class ScheduleDemoOverviewComponent {
 
   public statusConfig = {};
 
+  public types = {
+    CONSULTA : { status : 'CONSULTA', color : '#90ED5D', description : 'Consulta' },
+    EVENTO: { status : 'EVENTO', color : '#FF385C', description : 'Evento' },
+    PREAGENDAMENTO: { status : 'PREAGENDAMENTO', color : '#1d8bff', description : 'Pre Agendamento' }
+  };
+
   public isLoading = true;
 
  // public data = [];
   public data = [
+  //   {
+  //     value: '1',
+  //     title: 'William Aguera - 1',
+  //     detail: 'Consulta | Particular',
+  //     status: 'missed',
+  //     allday: false,
+  //     date: { start: new Date(new Date().setHours(8, 0)).getTime() , end: new Date( new Date().setHours(8, 30) ).getTime() }
+  //   },
+  //  {
+  //   value: '2',
+  //   title: 'William Aguera - 2',
+  //   detail: 'Consulta | Particular',
+  //   status: 'attended',
+  //   allday: false,
+  //   date: { start: new Date(new Date().setHours(8, 30)).getTime() , end: new Date(new Date().setHours(9, 0 )).getTime() }
+  // },
     {
-      value: '1',
-      title: 'William Aguera - 1',
+      value: '3',
+      title: 'William Aguera - 3',
       detail: 'Consulta | Particular',
-      status: 'missed',
       allday: false,
-      date: { start: new Date(new Date().setHours(8, 0)).getTime() , end: new Date( new Date().setHours(8, 30) ).getTime() }
+      status: 'attended',
+      type: 'CONSULTA',
+      date: { start: new Date(new Date().setHours(9, 0)).getTime() , end: new Date(new Date().setHours(9, 30 )).getTime() }
     },
-   {
-    value: '2',
-    title: 'William Aguera - 2',
-    detail: 'Consulta | Particular',
-    status: 'attended',
-    allday: false,
-    date: { start: new Date(new Date().setHours(8, 30)).getTime() , end: new Date(new Date().setHours(9, 0 )).getTime() }
-  },
     {
-      value: '3',
-      title: 'William Aguera - 3',
+      value: '32',
+      title: 'William Aguera - 32',
       detail: 'Consulta | Particular',
       allday: false,
       status: 'attended',
+      type: 'CONSULTA',
       date: { start: new Date(new Date().setHours(9, 0)).getTime() , end: new Date(new Date().setHours(9, 30 )).getTime() }
     },
-  {
-    value: '4',
-    title: 'Jerson Algo - 4',
-    detail: 'Consulta | Unimed',
-    allday: false,
-    status: 'missed',
-    date: { start: new Date(new Date().setHours(8, 30)).getTime() , end: new Date(new Date().setHours(9, 30 )).getTime() }
-  },
+    {
+      value: '132',
+      title: 'Marcio Chagas de Brito',
+      detail: 'Consulta | Unimed | (44) 98266416',
+      allday: false,
+      status: 'attended',
+      type: 'PREAGENDAMENTO',
+      date: { start: new Date(new Date().setHours(9, 30)).getTime() , end: new Date(new Date().setHours(10, 15 )).getTime() }
+    },
+    {
+      value: '31',
+      title: 'William Aguera - 32',
+      detail: 'Consulta | Particular',
+      allday: false,
+      status: 'attended',
+      type: 'CONSULTA',
+      date: { start: new Date(new Date().setHours(9, 0)).getTime() , end: new Date(new Date().setHours(9, 15 )).getTime() }
+    },
+    {
+      value: '41',
+      title: 'Reunião na Unimed',
+      detail: '',
+      allday: false,
+      status: '',
+      type: 'EVENTO',
+      blocked: true,
+      date: { start: new Date(new Date().setHours(9, 30)).getTime() , end: new Date(new Date().setHours(10, 15 )).getTime() }
+    },
+    {
+      value: '42',
+      title: 'Reunião no Congresso Universitario',
+      detail: '',
+      allday: false,
+      status: '',
+      type: 'EVENTO',
+      blocked: true,
+      date: { start: new Date(new Date().setHours(9, 30)).getTime() , end: new Date(new Date().setHours(10, 15 )).getTime() }
+    },
+  // {
+  //   value: '4',
+  //   title: 'Jerson Algo - 4',
+  //   detail: 'Consulta | Unimed',
+  //   allday: false,
+  //   status: 'missed',
+  //   date: { start: new Date(new Date().setHours(8, 30)).getTime() , end: new Date(new Date().setHours(9, 30 )).getTime() }
+  // },
   // {
   //   value: '5',
   //   title: 'Jerson Algo - 5',
@@ -255,7 +309,7 @@ export class ScheduleDemoOverviewComponent {
           this.dataSource = data;
           this.change.detectChanges();
         });
-    }, 3000);
+    }, 100);
   }
 
   getStatusConfig() {