@acorex/components 6.5.26 → 6.5.27

package/src/lib/calendar/scheduler/views/agenda/scheduler-agenda-view.component.html

@@ -0,0 +1,43 @@
+<div class="view ax-scheduler-agenda-view">
+    <table class="body" cdkDropListGroup>
+        <tbody *ngIf="slots.length; else elseTemplate">
+            <tr *ngFor="let slot of slots" cdkDropList [cdkDropListData]="slot" [attr.data-uid]="slot.uid"
+                (cdkDropListDropped)="onDragDropOnDay($event)">
+                <td class="day-column">
+                    <div class="day-num">{{slot.range.startTime | dt:"DD"}}</div>
+                    <div class="day-name">{{slot.range.startTime | dt:"ddd"}}</div>
+                </td>
+                <td class="day-border">
+                    <ul *ngIf="slot.events.length">
+                        <li *ngFor="let e of slot.events" [style.border-color]="e.color" cdkDrag [cdkDragData]="e"
+                            [attr.data-uid]="e.uid">
+                            <div class="event-title">{{e.title}}</div>
+                            <div class="event-time">{{e.range.startTime | dt:"HH:mm"}} - <span
+                                    *ngIf="e.range.duration('days')!=0 then a else b"></span></div>
+                            <ng-template #a>
+                                {{e.range.endTime | dt:"HH:mm"}}
+                            </ng-template>
+                            <ng-template #b>
+                                {{e.range.endTime | dt:"YYYY-MM-DD HH:mm"}}
+                            </ng-template>
+
+                            <div *cdkDragPreview [style.background-color]="e.color" class="event-drag-preview">
+                                {{e.title}}
+                            </div>
+                        </li>
+                    </ul>
+                    <div *ngIf="!slot.events.length" class="event-empty">No events</div>
+                </td>
+            </tr>
+        </tbody>
+        <ng-template #elseTemplate>
+            <tbody>
+                <tr>
+                    <td colspan="2">
+                        <div class="event-empty">No events</div>
+                    </td>
+                </tr>
+            </tbody>
+        </ng-template>
+    </table>
+</div>

package/src/lib/calendar/scheduler/views/agenda/scheduler-agenda-view.component.scss

@@ -0,0 +1,66 @@
+.ax-scheduler-agenda-view {
+  height: 100%;
+  overflow-y: auto;
+
+  table {
+    border-top: 1px solid var(--border-color);
+  }
+
+  .event-title {
+    color: var(--gray-fore-color);
+  }
+
+  td {
+    padding-top: 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: top;
+    border: none;
+
+    &.day-border {
+      border-bottom: 1px solid var(--border-color);
+      padding: 5px;
+      vertical-align: middle;
+    }
+  }
+
+  .day-column {
+    width: 80px;
+    text-align: center;
+
+    .day-num {
+      font-weight: 600;
+    }
+
+    .day-name {
+      font-size: smaller;
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+
+    li {
+      border-left: 4px solid var(--primary-color);
+      margin-bottom: var(--sp-sm-size);
+      padding: 0px 8px;
+
+      &:hover {
+        background-color: var(--primary-lighter-color);
+        cursor: pointer;
+      }
+
+      .event-time {
+        color: var(--gray-fore-color);
+        font-size: smaller;
+      }
+
+      .event-empty {
+        color: var(--gray-fore-color);
+        font-size: smaller;
+      }
+    }
+  }
+}

package/src/lib/calendar/scheduler/views/agenda/scheduler-agenda-view.component.ts

@@ -0,0 +1,50 @@
+import { Component, ElementRef, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
+import { AXSchedulerBaseViewComponent } from '../scheduler-view.component';
+import { AXSchedulerSlot } from '../../scheduler.class';
+import { AXDateTime, AXDateTimeRange } from '@acorex/core';
+
+@Component({
+    templateUrl: './scheduler-agenda-view.component.html',
+    styleUrls: ['./scheduler-agenda-view.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerAgendaViewComponent }]
+})
+export class AXSchedulerAgendaViewComponent extends AXSchedulerBaseViewComponent {
+    constructor(
+        private elm: ElementRef<HTMLDivElement>,
+        private cdr: ChangeDetectorRef
+    ) {
+        super();
+    }
+
+    hideEmptyDays: boolean = true;
+
+    updateSize() {
+    }
+
+
+    navigate(date: AXDateTime = new AXDateTime()) {
+        this.slots = [];
+        for (let i = 0; i < this.interval; i++) {
+            let d = date.addDay(i);
+            const range = new AXDateTimeRange(d, d);
+            const slot: AXSchedulerSlot = {
+                range,
+                events: this.getEvents(range, 'day')
+            }
+            if (this.hideEmptyDays && slot.events.length === 0) {
+                continue;
+            }
+            this.slots.push(slot);
+        }
+        this.navigatorDate = date;
+        this.cdr.detectChanges();
+    }
+
+    next(): void {
+        this.navigate(this.navigatorDate.addDay(this.interval));
+    }
+    prev(): void {
+        this.navigate(this.navigatorDate.addDay(-this.interval));
+    }
+}

package/src/lib/calendar/scheduler/views/daytime/scheduler-daytime-view.component.html

@@ -0,0 +1,45 @@
+<div class="view ax-scheduler-day-time-view">
+    <table class="header">
+        <thead>
+            <th class="time-column"></th>
+            <th *ngFor="let d of slots" class="header-cell">
+                <div [class.same-week-day]="d.range.startTime.equal(today)">
+                    {{d.range.startTime | dt: 'ddd'}}<br>
+                    {{d.range.startTime | dt: 'DD'}}
+                </div>
+            </th>
+        </thead>
+    </table>
+    <div class="v-scroll">
+        <table class="body" cdkDropListGroup>
+            <tbody>
+                <tr *ngFor="let t of times">
+                    <td>
+                        {{t.display}}
+                    </td>
+                    <td *ngFor="let d of slots" class="slot-cell" cdkDropList [cdkDropListData]="d"
+                    (cdkDropListDropped)="onDragDropOnDay($event,t.value)" [attr.data-uid]="d.uid">
+                        <div class="event-wrapper">
+                            <ng-container *ngFor="let e of d.events">
+                                <div *ngIf="e.range.startTime.hour==t.value" class="event"
+                                    role="button" aria-readonly="false" aria-selected="true" aria-grabbed="false"
+                                    cdkDrag [cdkDragData]="e" 
+                                    [attr.data-uid]="e.uid" [style.background-color]="e.color" [title]="e.title">
+                                    <div class="event-title">{{e.title}}</div>
+                                    <div>
+                                        <span>{{e.range.startTime | dt: 'HH:mm'}}</span> -
+                                        <span>{{e.range.endTime | dt: 'HH:mm'}}</span>
+                                    </div>
+                                    <div *cdkDragPreview [style.background-color]="e.color" class="event-drag-preview">
+                                        {{e.title}}
+                                    </div>
+                                    <div class="event-drag-placeholder" *cdkDragPlaceholder></div>
+                                </div>
+                            </ng-container>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>

package/src/lib/calendar/scheduler/views/daytime/scheduler-daytime-view.component.scss

@@ -0,0 +1,19 @@
+.ax-scheduler-day-time-view {
+    .event-wrapper {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        display: inline-flex;
+        flex: auto;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        width: 100%;
+
+        .event {
+            display: block;
+            position: relative;
+            flex: 1;
+        }
+    }
+}

package/src/lib/calendar/scheduler/views/daytime/scheduler-daytime-view.component.ts

@@ -0,0 +1,103 @@
+import { Component, ElementRef, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
+import { AXSchedulerBaseViewComponent } from '../scheduler-view.component';
+import { AXSchedulerSlot, AXSchedulerEvent } from '../../scheduler.class';
+import { AXDateTime, AXDateTimeRange } from '@acorex/core';
+
+@Component({
+    templateUrl: './scheduler-daytime-view.component.html',
+    styleUrls: ['./scheduler-daytime-view.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerDayTimeViewComponent }]
+})
+export class AXSchedulerDayTimeViewComponent extends AXSchedulerBaseViewComponent {
+    constructor(private elm: ElementRef<HTMLDivElement>, private cdr: ChangeDetectorRef) { super(); }
+    times: any[] = [];
+    private vScroll: HTMLElement;
+    private container: HTMLElement;
+    private view: HTMLElement;
+    private header: HTMLElement;
+    private body: HTMLElement;
+
+    ngOnInit(): void {
+    }
+
+    ngAfterViewInit(): void {
+        this.vScroll = this.elm.nativeElement.querySelector<HTMLElement>('.v-scroll');
+        this.header = this.elm.nativeElement.querySelector<HTMLElement>('.header');
+        this.body = this.elm.nativeElement.querySelector<HTMLElement>('.body');
+        this.view = this.elm.nativeElement.querySelector<HTMLElement>('.view');
+        this.container = this.elm.nativeElement.closest('.view-container') as HTMLElement;
+    }
+
+    updateSize(): void {
+        const firstTr = this.body.querySelector('tr');
+        if (firstTr) {
+            let index = 0;
+            this.header.querySelectorAll('th').forEach(c => {
+                const td = firstTr.children.item(index++) as HTMLElement;
+                td.style.width = `${c.offsetWidth}px`;
+            });
+            this.vScroll.style.height = `calc(100% - ${this.header.clientHeight}px)`;
+            if (this.container) {
+                this.view.style.height = `${this.container.clientHeight}px`;
+            }
+        }
+        this.arrangeEvents();
+    }
+
+    navigate(date: AXDateTime = new AXDateTime()) {
+        this.times = [];
+        this.slots = [];
+        for (let i = 0; i < this.interval; i++) {
+            const d = date.addDay(i);
+            const range = new AXDateTimeRange(d, d);
+            const slot: AXSchedulerSlot = {
+                range,
+                events: this.getEvents(range, 'day')
+            };
+            this.slots.push(slot);
+        }
+        for (let i = 0; i < 24; i++) {
+            this.times.push({
+                display: ('0' + i).slice(-2) + ':00',
+                value: i
+            });
+        }
+        this.navigatorDate = date;
+        this.cdr.detectChanges();
+    }
+
+    next(): void {
+        this.navigate(this.navigatorDate.addDay(this.interval));
+    }
+    prev(): void {
+        this.navigate(this.navigatorDate.addDay(-this.interval));
+    }
+
+    arrangeEvents() {
+        const events = this.elm.nativeElement.querySelectorAll<HTMLElement>('.event');
+        if (events.length) {
+            const height = events[0].closest('td').offsetHeight;
+            events.forEach(e => {
+                const uid = e.attributes.getNamedItem('data-uid').value;
+                const event = this.events.find(c => c.uid === uid);
+                const dur = Math.ceil(Math.abs(event.range.duration('hours')));
+                let total = dur + 1;
+                if (event.range.startTime.hour + total > 23) {
+                    total = 24 - event.range.startTime.hour;
+                }
+                e.style.height = (total * height) + 'px';
+            });
+        }
+    }
+
+    findEventIndex(event: AXSchedulerEvent): number {
+        const a = this.events.filter(c =>
+            c.range.startTime.equal(event.range.startTime, 'day')
+        ).sort((d1, d2) => {
+            return d1.range.startTime.compaireNew(d2.range.startTime);
+        });
+
+        return a.indexOf(event);
+    }
+}

package/src/lib/calendar/scheduler/views/month/scheduler-month-view.component.html

@@ -0,0 +1,39 @@
+<div class="view ax-sheduler-month-view">
+    <table class="header">
+        <thead>
+            <th *ngFor="let d of weekDays" class="header-cell">
+                <span [class.same-week-day]="d.index==today.dayInWeek"> {{d.title}}</span>
+            </th>
+        </thead>
+    </table>
+    <table class="body" cdkDropListGroup>
+        <tbody>
+            <tr *ngFor="let r of matrixSlots">
+                <td *ngFor="let d of r" class="cell-slot" cdkDropList [cdkDropListData]="d"
+                    (cdkDropListDropped)="onDragDropOnDay($event)" 
+                    [attr.data-uid]="d.uid">
+                    <div class="day-num" [class.first-day-month]="d.range.startTime.dayInMonth==1"
+                        [class.today]="d.range.startTime.equal(today)">
+                        <ng-container *ngIf="d.range.startTime.dayInMonth==1">
+                            {{d.range.startTime | dt: 'MMM'}}
+                        </ng-container>
+                        {{d.range.startTime | dt: 'DD'}}
+                    </div>
+                    <div class="event-wrapper">
+                        <ng-container *ngFor="let e of d.events">
+                            <div class="event ax-scheduler-event" cdkDrag [cdkDragData]="e" [attr.data-uid]="e.uid"
+                                [style.background-color]="e.color"
+                                (cdkDragStarted)="onDragStarted($event)"
+                                (cdkDragEnded)="onDragEnded($event)"
+                                (cdkDragEntered)="onDragEntered($event)">
+                                <span class="ax-sch-str">{{e.range.startTime | dt: 'HH:mm'}}</span><span
+                                    class="event-title">{{e.title}}</span><span>{{e.range.endTime | dt: 'HH:mm'}}</span>
+                            </div>
+                        </ng-container>
+                    </div>
+                    <div class="view-more"></div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>

package/src/lib/calendar/scheduler/views/month/scheduler-month-view.component.scss

@@ -0,0 +1,55 @@
+.ax-sheduler-month-view {
+    .day-num {
+        position: absolute;
+        left: 5px;
+        top: 5px;
+        font-size: smaller;
+        padding: 1px 5px;
+        display: flex;
+        border-radius: 10%;
+        align-items: center;
+        justify-content: center;
+
+        &.first-day-month {
+            color: var(--primary-color);
+            font-weight: bold;
+        }
+
+        &:hover {
+            text-decoration: underline;
+            cursor: pointer;
+        }
+
+        &.today {
+            background-color: var(--primary-light-color);
+            color: var(--danger-fore-color);
+        }
+    }
+
+    .view-more {
+        position: absolute;
+        bottom: 0;
+        font-size: x-small;
+        right: 0;
+        padding: 0 5px;
+        width: 100%;
+        cursor: pointer;
+        text-align: center;
+        background-color: var(--gray-dark-color);
+
+        &:hover {
+            
+            box-shadow: 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12), 0 3px 5px -1px rgba(0,0,0,.2);
+        }
+    }
+
+    .event-wrapper {
+        position: absolute;
+        top: 30px;
+        left: 0px;
+
+        .event {
+            position: absolute;
+        }
+    }
+}

package/src/lib/calendar/scheduler/views/month/scheduler-month-view.component.ts

@@ -0,0 +1,233 @@
+import { Component, ElementRef, ChangeDetectorRef, ViewEncapsulation, HostListener, NgZone } from '@angular/core';
+import { AXSchedulerBaseViewComponent } from '../scheduler-view.component';
+import { AXSchedulerEvent, AXSchedulerEventChangeArgs } from '../../scheduler.class';
+import { AXDateTime, AXDateTimeRange } from '@acorex/core';
+
+@Component({
+    templateUrl: './scheduler-month-view.component.html',
+    styleUrls: ['./scheduler-month-view.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerMonthViewComponent }]
+})
+export class AXSchedulerMonthViewComponent extends AXSchedulerBaseViewComponent {
+
+
+    constructor(
+        private elm: ElementRef<HTMLDivElement>,
+        private zone: NgZone,
+        private cdr: ChangeDetectorRef) {
+        super();
+    }
+
+    @HostListener('wheel', ['$event'])
+    onKeydownHandler(e: any) {
+        if (e.deltaY > 0) {
+            this.navigate(this.navigatorDate.addMonth(1))
+        }
+        else if (e.deltaY < 0) {
+            this.navigate(this.navigatorDate.addMonth(-1))
+        }
+    }
+
+    weekDays: any[] = [
+        {
+            index: 0, title: 'Sunday'
+        },
+        {
+            index: 1, title: 'Moday'
+        },
+        {
+            index: 2, title: 'Tuesday'
+        },
+        {
+            index: 3, title: 'Wednesday'
+        },
+        {
+            index: 4, title: 'Thursday'
+        },
+        {
+            index: 5, title: 'Friday'
+        },
+        {
+            index: 6, title: 'Saturday'
+        }];
+    startDayOfWeek = 'Moday';
+
+
+
+    private container: HTMLElement;
+    private view: HTMLElement;
+    private header: HTMLElement;
+    private body: HTMLElement;
+
+
+
+
+    ngAfterViewInit(): void {
+        this.header = this.elm.nativeElement.querySelector<HTMLElement>('.header');
+        this.body = this.elm.nativeElement.querySelector<HTMLElement>('.body');
+        this.view = this.elm.nativeElement.querySelector<HTMLElement>('.view');
+        this.container = this.elm.nativeElement.closest('.view-container') as HTMLElement;
+
+    }
+
+
+    updateSize(): void {
+        const firstTr = this.body.querySelector('tr');
+        if (firstTr) {
+            let index = 0;
+            this.header.querySelectorAll('th').forEach(c => {
+                const td = firstTr.children.item(index++) as HTMLElement;
+                td.style.width = `${c.offsetWidth}px`;
+            });
+            this.body.style.height = `calc(100% - ${this.header.clientHeight}px)`;
+            if (this.container) {
+                this.view.style.height = `${this.container.clientHeight}px`;
+            }
+        }
+        this.arrangeEvents();
+    }
+
+    matrixify(arr, rows, cols) {
+        const matrix = [];
+        if (rows * cols === arr.length) {
+            for (let i = 0; i < arr.length; i += cols) {
+                matrix.push(arr.slice(i, cols + i));
+            }
+        }
+        return matrix;
+    }
+
+    matrixSlots: any;
+
+    navigate(date: AXDateTime = new AXDateTime()) {
+
+        const start = date.month.range.startTime.firstDayOfWeek;
+        const end = date.month.range.startTime.endDayOfWeek;
+        const dur = end.duration(start);
+        this.slots = [];
+        for (let i = 0; i < dur; i++) {
+            const d = start.addDay(i);
+            const range: AXDateTimeRange = new AXDateTimeRange(d, d);
+            this.slots.push({
+                range,
+                events: this.getEvents(range, 'day'),
+                uid: range.startTime.date.getTime().toString()
+            });
+        }
+        const dayInWeek = 7;
+        const rows = Math.floor(dur / dayInWeek);
+        this.matrixSlots = this.matrixify(this.slots, rows, dayInWeek);
+        this.navigatorDate = date;
+        this.cdr.detectChanges();
+    }
+
+
+    next(): void {
+        this.navigate(this.navigatorDate.addMonth(this.interval));
+    }
+    prev(): void {
+        this.navigate(this.navigatorDate.addMonth(-this.interval));
+    }
+
+    arrangeEvents() {
+        this.slots.forEach(slot => {
+            const slotTd = this.elm.nativeElement.querySelector<HTMLElement>(`[data-uid='` + slot.uid + `']`);
+            const viewMoreDiv = slotTd.querySelector<HTMLElement>('.view-more');
+            let viewMore = 0;
+            viewMoreDiv.style.display = 'none';
+            const width = slotTd.offsetWidth;
+            slot.events.forEach(event => {
+                const e = slotTd.querySelector<HTMLElement>(`[data-uid='` + event.uid + `']`);
+                if (e) {
+                    const dur = Math.ceil(Math.abs(event.range.duration()));
+                    e.style.visibility = 'unset';
+                    e.style.width = (dur * width) + 'px';
+                    e.style.top = ((this.findEventIndex(event)) * 25) + 'px';
+                    if (e.getBoundingClientRect().bottom >= slotTd.getBoundingClientRect().bottom) {
+                        viewMore++;
+                        e.style.visibility = 'hidden';
+                        viewMoreDiv.style.display = 'unset';
+                        viewMoreDiv.innerHTML = `+${viewMore} more`;
+                    }
+                }
+            });
+        });
+    }
+
+    findEventIndex(event: AXSchedulerEvent): number {
+        const a = this.events.filter(c =>
+            c.range.startTime.equal(event.range.startTime, 'days')
+        ).sort((d1, d2) => {
+            const v = d1.range.startTime.compaireNew(d2.range.startTime, 'YMDhm');
+            return v;
+        });
+        return a.indexOf(event);
+    }
+
+    private dragEnterSlot: HTMLElement;
+    private dragPreview: HTMLElement;
+    private dragHour: number = null;
+    onDragStarted(event) {
+        this.zone.runOutsideAngular(() => {
+            this.dragEnterSlot = event.source.dropContainer.element.nativeElement;
+            this.elm.nativeElement.addEventListener('mousemove', this.drageMouseMove.bind(this));
+        });
+    }
+    onDragEntered(event) {
+        this.dragPreview = document.querySelector<HTMLElement>('.cdk-drag-preview');
+        this.dragEnterSlot = event.container.element.nativeElement;
+    }
+    onDragEnded(event) {
+        this.dragEnterSlot = null;
+        this.dragPreview = null;
+        this.zone.runOutsideAngular(() => {
+            this.elm.nativeElement.removeEventListener('mousemove', this.drageMouseMove.bind(this));
+        });
+    }
+
+    private drageMouseMove(e: MouseEvent) {
+        this.zone.runOutsideAngular(() => {
+            if (!this.dragPreview) {
+                this.dragPreview = document.querySelector<HTMLElement>('.cdk-drag-preview');
+            }
+            if (this.dragEnterSlot && this.dragPreview) {
+                const diff = this.dragPreview.getBoundingClientRect().top - this.dragEnterSlot.getBoundingClientRect().top;
+                const hour = Math.round((diff / this.dragEnterSlot.getBoundingClientRect().height) * 24);
+                this.dragPreview.querySelector('.ax-sch-str').innerHTML = `${hour > 0 ? hour : 0}:00`;
+                this.dragHour = hour;
+            }
+        });
+    }
+
+    onDragDropOnDay(e) {
+        const el = e.item.element.nativeElement as HTMLElement;
+        if (e.previousContainer !== e.container) {
+            el.style.opacity = '0';
+            const r: AXSchedulerEventChangeArgs = new AXSchedulerEventChangeArgs();
+            r.event = e.item.data;
+            r.oldSlot = e.previousContainer.data;
+            r.newSlot = e.container.data;
+            //
+            r.onComplete.subscribe((er: AXSchedulerEventChangeArgs) => {
+                el.style.opacity = '1';
+                if (!er.canceled) {
+                    const slotTime = er.newSlot.range.startTime.startOf();
+                    const z = er.event.range.startTime.clone();
+                    const durDay = slotTime.duration(z.startOf(), 'days');
+                    er.event.range.startTime = er.event.range.startTime.add('day', durDay);
+                    if (this.dragHour != null) {
+                        er.event.range.startTime = er.event.range.startTime.set('hour', this.dragHour);
+                        er.event.range.startTime = er.event.range.startTime.set('minute', 0);
+                    }
+                    er.event.range.endTime = er.event.range.endTime.add('day', durDay);
+                    er.oldSlot.events = er.oldSlot.events.filter(c => c.uid !== er.event.uid);
+                    er.newSlot.events.push(er.event);
+                }
+            });
+            this.onEventChanged.emit(r);
+        }
+
+    }
+
+}