@acorex/components 6.5.26 → 6.5.28

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

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

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

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

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

@@ -0,0 +1,92 @@
+import { Component, OnInit, Input, ElementRef, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
+import { AXSchedulerBaseViewComponent } from '../scheduler-view.component';
+import { AXDateTime, AXDateTimeRange } from '@acorex/core';
+import { AXSchedulerSlot } from '../../scheduler.class';
+
+@Component({
+    templateUrl: './scheduler-timeline-view.component.html',
+    styleUrls:['./scheduler-timeline-view.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: AXSchedulerBaseViewComponent, useExisting: AXSchedulerTimelineViewComponent }]
+})
+export class AXSchedulerTimelineViewComponent extends AXSchedulerBaseViewComponent {
+    constructor(private elm: ElementRef<HTMLDivElement>, private cdr: ChangeDetectorRef) { super(); }
+
+
+
+
+    times: any[] = []
+
+    //private hScroll: HTMLElement;
+    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.hScroll = this.elm.nativeElement.querySelector<HTMLElement>(".h-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;
+        // this.hScroll.addEventListener("scroll", () => {
+        //     this.updateSize();
+        // });
+    }
+
+
+    updateSize(): void {
+        // let firstTr = this.body.querySelector('tr');
+        // if (firstTr) {
+        //     let index = 0;
+        //     this.header.querySelectorAll('th').forEach(c => {
+        //         let td = firstTr.children.item(index++) as HTMLElement;
+        //         td.style.width = `${c.offsetWidth}px`;
+        //     })
+        //     this.vScroll.style.height = `calc(100% - ${this.header.clientHeight}px)`;
+        //     //this.vScroll.style.width = `${this.hScroll.clientWidth + this.hScroll.scrollLeft}px`;
+        //     if (this.container)
+        //         this.view.style.height = `${this.container.clientHeight}px`;
+        // }
+    }
+
+    navigate(date: AXDateTime = new AXDateTime()) {
+        this.navigatorDate = date;
+        this.times=[];
+        this.slots = [];
+        for (let i = 0; i < this.interval; i++) {
+            let d = date.addDay(i);
+            let range = new AXDateTimeRange(d, d);
+            let slot: AXSchedulerSlot = {
+                range: 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.cdr.detectChanges();
+    }
+
+    next(): void {
+        this.navigate(this.navigatorDate.addDay(this.interval));
+    }
+    prev(): void {
+        this.navigate(this.navigatorDate.addDay(-this.interval));
+    }
+
+    arrangeEvents()
+    {
+        
+    }
+}

package/src/lib/checkbox/checkbox.component.html

@@ -0,0 +1,22 @@
+<!-- <label class="ax checkbox {{size}}" for="{{uid}}" [ngClass]="{ 'disabled': disabled, 'readonly': readonly }"
+  (click)="handleClick($event)">
+  {{ label }}
+  <input #input type="checkbox" id="{{uid}}" [readonly]="readonly" [checked]="value"
+    [disabled]="disabled || readonly" />
+  <span class="checkmark" [ngClass]="{'indeterminate': indeterminate && value == null}"></span>
+
+</label> -->
+
+
+<!-- [(ngModel)]="value" -->
+<!-- (click)="handleClick($event)"  -->
+
+<label class="ax-checkbox-container" for="{{uid}}" [ngClass]="{ 'disabled': disabled, 'readonly': readonly }">
+
+  <input #input class="ax-checkbox" type="checkbox" id="{{uid}}" [readonly]="readonly" [class.checked]="value"
+    [checked]="value" [ngClass]="{'indeterminate': indeterminate && value == null}" (click)="handleClick($event)"
+    [disabled]="disabled || readonly" />
+
+
+  <span>{{ label ? label : '&nbsp;' }}</span>
+</label>

package/src/lib/checkbox/checkbox.component.ts

@@ -0,0 +1,107 @@
+import {
+  Component,
+  ViewEncapsulation,
+  Output,
+  EventEmitter,
+  Input,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
+import { AXBaseComponent, AXBaseSizableComponent, AXBaseValueComponent, AXElementSize, AXValidatableComponent } from '../base/element.class';
+import { AXValueEvent, AXHtmlEvent } from '../base/events.class';
+
+export class AXCheckBoxItemClick extends AXHtmlEvent<MouseEvent> {
+  value?: boolean;
+}
+
+@Component({
+  selector: 'ax-check-box',
+  templateUrl: './checkbox.component.html',
+  encapsulation: ViewEncapsulation.None,
+  providers: [{ provide: AXValidatableComponent, useExisting: AXCheckBoxComponent }],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AXCheckBoxComponent extends AXValidatableComponent implements AXBaseSizableComponent, AXBaseComponent, AXBaseValueComponent<boolean> {
+  @ViewChild('input', { static: true }) input: ElementRef<HTMLInputElement>;
+
+  @Input()
+  readonly: boolean = false;
+
+  @Input()
+  disabled: boolean = false;
+
+  @Input()
+  size: AXElementSize = 'md';
+
+  @Input()
+  label: string = '';
+
+  @Input()
+  tabIndex: number = 0;
+
+  @Input()
+  indeterminate: boolean = false;
+
+  focus(): void { }
+  constructor(protected cdr: ChangeDetectorRef, private ref: ElementRef) {
+    super();
+  }
+  // Value
+  @Output()
+  onValueChanged: EventEmitter<AXValueEvent<boolean>> = new EventEmitter<AXValueEvent<boolean>>();
+  @Output()
+  valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  //
+  @Output()
+  onClick: EventEmitter<AXCheckBoxItemClick> = new EventEmitter<AXCheckBoxItemClick>();
+
+  private _value?: boolean = false;
+  public get value(): boolean {
+    return this._value;
+  }
+
+  @Input()
+  public set value(v: boolean) {
+    if (v != this._value && v !== undefined) {
+      const old = this._value;
+      this._value = v;
+      this.valueChange.emit(v);
+      this.onValueChanged.emit({
+        component: this,
+        value: v,
+        oldValue: old,
+        htmlElement: this.ref.nativeElement
+      });
+    }
+  }
+
+  // handelChange(e) {
+  //   const val = e.target.checked;
+  //   this.value = val;
+  // }
+
+  ngOnInit(): void {
+    if (!this.indeterminate && this.value == null) {
+      this.value = false;
+    }
+  }
+
+  handleClick(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    //  setTimeout(() => {
+    if (!this.disabled && !this.readonly) {
+      //TODO: check intermddiate;
+      this.value = !this.value;
+      this.onClick.emit({
+        component: this,
+        htmlElement: this.ref.nativeElement,
+        htmlEvent: e,
+        value: this.value
+      });
+    }
+    //  }, 100);
+  }
+}

package/src/lib/checkbox/checkbox.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AXCheckBoxComponent } from './checkbox.component';
+@NgModule({
+  declarations: [AXCheckBoxComponent],
+  imports: [CommonModule, FormsModule],
+  exports: [AXCheckBoxComponent],
+  providers: []
+})
+export class AXCheckBoxModule { }

package/src/lib/color-picker/color-box/color-box.component.html

@@ -0,0 +1,37 @@
+<div class="color-box">
+    <div class="color-box-pallet">
+        <div class="color-item" *ngFor="let item of colors" [style.background-color]="item.code" [title]="item.code"
+            (click)="onColorClick(item)">
+            <i class="fas fa-check-circle color-active" *ngIf="item.active"></i>
+        </div>
+    </div>
+    <div class="text-input">
+        <ng-container *ngIf="inputFormat=='rgb';else hexTemplate">
+            <div class="color-part">
+                <ax-text-box [(value)]="rColor" (textChange)="handleColorChange()" (onKey)="handleKeyEvent($event)">
+                </ax-text-box>
+            </div>
+            <div class="color-part">
+                <ax-text-box [(value)]="gColor" (textChange)="handleColorChange()" (onKey)="handleKeyEvent($event)">
+                </ax-text-box>
+            </div>
+            <div class="color-part">
+                <ax-text-box [(value)]="bColor" (textChange)="handleColorChange()" (onKey)="handleKeyEvent($event)">
+                </ax-text-box>
+            </div>
+            <div class="color-part switch" (click)="inputFormat='hex'">
+                <span>RGB</span>
+            </div>
+        </ng-container>
+        <ng-template #hexTemplate>
+            <div class="color-part">
+                <ax-text-box [(value)]="value" size="sm" (onKey)="handleKeyEvent($event)">
+                </ax-text-box>
+            </div>
+            <!-- <div class="color-part switch" (click)="inputFormat='rgb'">
+                <span>HEX</span>
+            </div> -->
+        </ng-template>
+
+    </div>
+</div>

package/src/lib/color-picker/color-box/color-box.component.scss

@@ -0,0 +1,60 @@
+.color-box {
+  border: 1px solid var(--ax-border-color);
+  max-width: 300px;
+  padding: 5px;
+
+  .color-box-pallet {
+    display: flex;
+    width: 100%;
+    height: auto;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+
+    div {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid var(--ax-border-color);
+      margin: 1px;
+    }
+
+    .color-active {
+      color: #fff;
+      box-shadow: 1px 1px 4px 0px #5a5a5a;
+      border-radius: 50%;
+      font-size: 0.875rem;
+    }
+  }
+
+  .text-input {
+    display: flex;
+    justify-content: space-between;
+
+    .color-part {
+      padding: 2px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+
+      &.switch {
+        cursor: pointer;
+        font-weight: bold;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      .ax-field-set .no-label input {
+        margin-top: 0 !important;
+        text-align: center;
+        height: var(--ax-size-md);
+      }
+    }
+  }
+}