@acorex/components 6.5.28 → 6.5.29

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

@@ -1,103 +0,0 @@
-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

@@ -1,39 +0,0 @@
-<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

@@ -1,55 +0,0 @@
-.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

@@ -1,233 +0,0 @@
-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);
-        }
-
-    }
-
-}

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

@@ -1,124 +0,0 @@
-import { Input, EventEmitter, OnDestroy } from '@angular/core';
-import { AXDateTime, AXDateTimeRange, TimeUnit } from '@acorex/core';
-import { Output, Directive } from '@angular/core';
-import { AXSchedulerSlot, AXSchedulerEventChangeArgs, AXSchedulerEvent, AXSchedulerViewType } from '../scheduler.class';
-
-
-
-
-
-@Directive()
-export abstract class AXSchedulerBaseViewComponent implements OnDestroy {
-
-    type: AXSchedulerViewType;
-    timeSlot: number = 1;
-
-    interval: number = 1;
-
-    abstract updateSize(): void;
-
-    abstract next(): void;
-
-    abstract prev(): void;
-
-    abstract navigate(date: AXDateTime): void;
-
-    get dateRange(): AXDateTimeRange {
-        if (this.slots && this.slots.length) {
-            return new AXDateTimeRange(this.slots[0].range.startTime, this.slots[this.slots.length - 1].range.startTime);
-        }
-        else {
-            return null;
-        }
-    }
-
-
-    today: AXDateTime = new AXDateTime();
-
-
-
-    @Output()
-    onNavigatorDateChanged: EventEmitter<AXDateTime> = new EventEmitter<AXDateTime>();
-
-    private _navigatorDate: AXDateTime;
-    public get navigatorDate(): AXDateTime {
-        return this._navigatorDate;
-    }
-    public set navigatorDate(v: AXDateTime) {
-        this._navigatorDate = v;
-        this.onNavigatorDateChanged.emit(v);
-    }
-
-    events: AXSchedulerEvent[] = [];
-
-    slots: AXSchedulerSlot[] = [];
-
-    getEvents(range: AXDateTimeRange, unit: TimeUnit) {
-        return this.events.filter(c => c.range.startTime.equal(range.startTime, unit))
-    }
-
-    ngAfterViewChecked(): void {
-        this.updateSize();
-    }
-
-    @Output()
-    onEventChanged: EventEmitter<AXSchedulerEventChangeArgs> = new EventEmitter<AXSchedulerEventChangeArgs>(true);
-
-
-    ngOnDestroy(): void {
-        if (this.onEventChanged) {
-            this.onEventChanged.unsubscribe();
-        }
-        if (this.onNavigatorDateChanged) {
-            this.onEventChanged.unsubscribe();
-        }
-        if (this.slots) {
-            this.slots = null;
-        }
-        if (this.events) {
-            this.events = null;
-        }
-    }
-
-
-    onDragDropOnDay(e, time?: number) {
-        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');
-                    const durTime = slotTime.duration(z, 'hours');
-                    const eventRange = er.event.range;
-                    //
-                    // if (time && slotTime.add('hour', time).hour + eventRange.duration('hours') > 24) {
-                    //     return;
-                    // }
-                    if (time) {
-                        return;
-                    }
-                    er.event.range.startTime = er.event.range.startTime.add('day', durDay);
-                    er.event.range.endTime = er.event.range.endTime.add('day', durDay);
-                    er.oldSlot.events = er.oldSlot.events.filter(c => c.uid !== er.event.uid);
-                    if (time) {
-                        er.event.range.startTime = er.event.range.startTime.set('hour', time);
-                        let durTime = er.event.range.startTime.duration(z, 'hours') % 24;
-                        er.event.range.endTime = er.event.range.endTime.add('hour', durTime);
-                    }
-                    er.newSlot.events.push(er.event);
-
-                }
-            });
-            this.onEventChanged.emit(r);
-        }
-    }
-
-}

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

@@ -1,50 +0,0 @@
-<div class="view ax-scheduler-timeline-view">
-    <table class="header">
-        <colgroup>
-            <col *ngFor="let t of times" class="time-column"/>
-        </colgroup>
-        <tbody>
-            <ng-container *ngFor="let d of slots">
-                <tr>
-                    <td class="header-cell" [attr.colspan]="times.length">
-                        <div [class.same-week-day]="d.range.startTime.equal(today)">
-                            {{d.range.startTime | dt: 'MMM DD, dddd'}}
-                        </div>
-                    </td>
-                </tr>
-                <tr>
-                    <td *ngFor="let t of times">
-                        <div>
-                            {{t.display}}
-                        </div>
-                    </td>
-                </tr>
-            </ng-container>
-        </tbody>
-    </table>
-    <!-- <div class="v-scroll">
-        <table class="body">
-            <tbody>
-                <tr *ngFor="let t of times">
-                    <td>
-                        {{t.display}}
-                    </td>
-                    <td *ngFor="let d of slots" class="slot-cell">
-                        <div class="event-wrapper">
-                            <ng-container *ngFor="let e of d.events">
-                                <div *ngIf="e.range.startTime.date.getHours()==t.value" class="event"
-                                    [attr.data-uid]="e.uid" [style.background-color]="e.color">
-                                    <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>
-                            </ng-container>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div> -->
-</div>

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

@@ -1,4 +0,0 @@
-.ax-scheduler-timeline-view
-{
-    
-}