@open-rlb/ng-bootstrap 2.4.15 → 2.4.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3437,11 +3437,11 @@ class CalendarWeekGridComponent {
|
|
|
3437
3437
|
});
|
|
3438
3438
|
}
|
|
3439
3439
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarWeekGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3440
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarWeekGridComponent, isStandalone: false, selector: "rlb-calendar-week-grid", inputs: { view: "view", currentDate: "currentDate", events: "events", layout: "layout" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n <!-- HEADER WRAPPER -->\n <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n [style.padding-right.px]=\"scrollbarWidth\">\n\n <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n\n <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n <div class=\"days-header d-flex flex-grow-1\">\n @for (day of days; track day) {\n <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- BODY WRAPPER -->\n <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout.maxBodyHeight\">\n\n <div class=\"body-row d-flex position-relative\">\n\n <!-- SIDEBAR (Sticky Left) -->\n <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n @for (time of timeSlots; track time; let i = $index) {\n <div\n class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n [style.height.px]=\"layout.rowHeight\">\n @if (i !== 0) {\n <span style=\"transform: translateY(-50%)\">\n {{ time }}\n </span>\n }\n </div>\n }\n </div>\n\n <!-- GRID AND EVENTS -->\n <div class=\"grid-layer flex-grow-1 position-relative\">\n\n <!-- LAYER 1: Grid -->\n <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n @for (time of timeSlots; track time) {\n <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n </div>\n }\n </div>\n\n <!-- Layer 2: Events -->\n <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n @for (day of days; track day) {\n <div class=\"day-column position-relative border-end h-100\" cdkDropList\n [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n (click)=\"eventClick.emit()\">\n @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n <rlb-calendar-event [view]=\"view\"\n [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n </rlb-calendar-event>\n }\n @if (isToday(day)) {\n <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div
|
|
3440
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarWeekGridComponent, isStandalone: false, selector: "rlb-calendar-week-grid", inputs: { view: "view", currentDate: "currentDate", events: "events", layout: "layout" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n <!-- HEADER WRAPPER -->\n <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n [style.padding-right.px]=\"scrollbarWidth\">\n\n <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n\n <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n <div class=\"days-header d-flex flex-grow-1\">\n @for (day of days; track day.timestamp) {\n <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- BODY WRAPPER -->\n <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout.maxBodyHeight\">\n\n <div class=\"body-row d-flex position-relative\">\n\n <!-- SIDEBAR (Sticky Left) -->\n <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n @for (time of timeSlots; track time; let i = $index) {\n <div\n class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n [style.height.px]=\"layout.rowHeight\">\n @if (i !== 0) {\n <span style=\"transform: translateY(-50%)\">\n {{ time }}\n </span>\n }\n </div>\n }\n </div>\n\n <!-- GRID AND EVENTS -->\n <div class=\"grid-layer flex-grow-1 position-relative\">\n\n <!-- LAYER 1: Grid -->\n <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n @for (time of timeSlots; track time) {\n <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n </div>\n }\n </div>\n\n <!-- Layer 2: Events -->\n <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n @for (day of days; track day.timestamp) {\n <div class=\"day-column position-relative border-end h-100\" cdkDropList\n [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n (click)=\"eventClick.emit()\">\n @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n <rlb-calendar-event [view]=\"view\"\n [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n </rlb-calendar-event>\n }\n @if (isToday(day)) {\n <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["eventClick", "eventContainerClick"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3441
3441
|
}
|
|
3442
3442
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarWeekGridComponent, decorators: [{
|
|
3443
3443
|
type: Component,
|
|
3444
|
-
args: [{ selector: 'rlb-calendar-week-grid', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n <!-- HEADER WRAPPER -->\n <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n [style.padding-right.px]=\"scrollbarWidth\">\n\n <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n\n <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n <div class=\"days-header d-flex flex-grow-1\">\n @for (day of days; track day) {\n <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- BODY WRAPPER -->\n <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout.maxBodyHeight\">\n\n <div class=\"body-row d-flex position-relative\">\n\n <!-- SIDEBAR (Sticky Left) -->\n <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n @for (time of timeSlots; track time; let i = $index) {\n <div\n class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n [style.height.px]=\"layout.rowHeight\">\n @if (i !== 0) {\n <span style=\"transform: translateY(-50%)\">\n {{ time }}\n </span>\n }\n </div>\n }\n </div>\n\n <!-- GRID AND EVENTS -->\n <div class=\"grid-layer flex-grow-1 position-relative\">\n\n <!-- LAYER 1: Grid -->\n <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n @for (time of timeSlots; track time) {\n <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n </div>\n }\n </div>\n\n <!-- Layer 2: Events -->\n <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n @for (day of days; track day) {\n <div class=\"day-column position-relative border-end h-100\" cdkDropList\n [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n (click)=\"eventClick.emit()\">\n @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n <rlb-calendar-event [view]=\"view\"\n [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n </rlb-calendar-event>\n }\n @if (isToday(day)) {\n <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div
|
|
3444
|
+
args: [{ selector: 'rlb-calendar-week-grid', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n <!-- HEADER WRAPPER -->\n <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n [style.padding-right.px]=\"scrollbarWidth\">\n\n <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n\n <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n <div class=\"days-header d-flex flex-grow-1\">\n @for (day of days; track day.timestamp) {\n <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- BODY WRAPPER -->\n <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout.maxBodyHeight\">\n\n <div class=\"body-row d-flex position-relative\">\n\n <!-- SIDEBAR (Sticky Left) -->\n <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n @for (time of timeSlots; track time; let i = $index) {\n <div\n class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n [style.height.px]=\"layout.rowHeight\">\n @if (i !== 0) {\n <span style=\"transform: translateY(-50%)\">\n {{ time }}\n </span>\n }\n </div>\n }\n </div>\n\n <!-- GRID AND EVENTS -->\n <div class=\"grid-layer flex-grow-1 position-relative\">\n\n <!-- LAYER 1: Grid -->\n <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n @for (time of timeSlots; track time) {\n <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n </div>\n }\n </div>\n\n <!-- Layer 2: Events -->\n <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n @for (day of days; track day.timestamp) {\n <div class=\"day-column position-relative border-end h-100\" cdkDropList\n [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n (click)=\"eventClick.emit()\">\n @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n <rlb-calendar-event [view]=\"view\"\n [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n </rlb-calendar-event>\n }\n @if (isToday(day)) {\n <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.z-0{z-index:0}.z-1{z-index:1}\n"] }]
|
|
3445
3445
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { view: [{
|
|
3446
3446
|
type: Input
|
|
3447
3447
|
}], currentDate: [{
|
|
@@ -4045,8 +4045,6 @@ class CalendarComponent {
|
|
|
4045
4045
|
this.dateChange = new EventEmitter();
|
|
4046
4046
|
this.viewChange = new EventEmitter();
|
|
4047
4047
|
this.eventClick = new EventEmitter();
|
|
4048
|
-
// private userTimeZone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
4049
|
-
this.dateFormat = 'YYYY-MM-DD HH:mm:ss';
|
|
4050
4048
|
this.currentDate = getToday();
|
|
4051
4049
|
}
|
|
4052
4050
|
ngOnChanges(changes) {
|
|
@@ -4066,30 +4064,40 @@ class CalendarComponent {
|
|
|
4066
4064
|
const idx = this.events.findIndex((event) => event.id === eventToEdit.id);
|
|
4067
4065
|
this.events[idx] = eventToEdit;
|
|
4068
4066
|
this.events = [...this.events];
|
|
4069
|
-
this.toasts
|
|
4067
|
+
this.toasts
|
|
4068
|
+
.openToast('toast-c-1', 'rlb-calendar-toast', {
|
|
4070
4069
|
title: 'Success!',
|
|
4071
4070
|
content: 'Event edited successfully.',
|
|
4072
4071
|
type: 'success',
|
|
4073
|
-
})
|
|
4072
|
+
})
|
|
4073
|
+
.pipe(take(1))
|
|
4074
|
+
.subscribe();
|
|
4074
4075
|
}
|
|
4075
4076
|
onEventContainerClick(events) {
|
|
4076
|
-
this.modals
|
|
4077
|
+
this.modals
|
|
4078
|
+
.openModal('rlb-calendar-overlow-events-container', {
|
|
4077
4079
|
title: 'Overflow events',
|
|
4078
4080
|
ok: 'OK',
|
|
4079
4081
|
type: 'success',
|
|
4080
|
-
content: events
|
|
4081
|
-
})
|
|
4082
|
+
content: events,
|
|
4083
|
+
})
|
|
4084
|
+
.pipe(take(1), filter((modalResult) => modalResult.reason === 'ok'), switchMap((modalResult) => {
|
|
4082
4085
|
const action = modalResult.result.action;
|
|
4083
4086
|
const event = modalResult.result.event;
|
|
4084
4087
|
if (action === 'delete') {
|
|
4085
|
-
return this.modals
|
|
4088
|
+
return this.modals
|
|
4089
|
+
.openConfirmModal('Event delete', 'Are you sure you want to delete this event?', '', 'Ok', 'Cancel')
|
|
4090
|
+
.pipe(take(1), filter((deleteConfirmResult) => deleteConfirmResult.reason === 'ok'), map((result) => ({ action, modalResult: result, event })));
|
|
4086
4091
|
}
|
|
4087
4092
|
else {
|
|
4088
|
-
return this.openEditEventDialog(event).pipe(map(result => ({ action, modalResult: result, event })));
|
|
4093
|
+
return this.openEditEventDialog(event).pipe(map((result) => ({ action, modalResult: result, event })));
|
|
4089
4094
|
}
|
|
4090
4095
|
}), switchMap(({ action, modalResult, event }) => {
|
|
4091
|
-
if (action === 'delete' && modalResult.reason === 'ok' ||
|
|
4092
|
-
|
|
4096
|
+
if ((action === 'delete' && modalResult.reason === 'ok') ||
|
|
4097
|
+
(action === 'edit' && modalResult.reason === 'cancel')) {
|
|
4098
|
+
this.events = [
|
|
4099
|
+
...this.events.filter((entry) => event.id !== entry.id),
|
|
4100
|
+
];
|
|
4093
4101
|
return of({ action: 'delete' });
|
|
4094
4102
|
}
|
|
4095
4103
|
if (action === 'edit' && modalResult.reason === 'ok') {
|
|
@@ -4116,28 +4124,36 @@ class CalendarComponent {
|
|
|
4116
4124
|
content = 'Event created successfully.';
|
|
4117
4125
|
break;
|
|
4118
4126
|
}
|
|
4119
|
-
return this.toasts
|
|
4127
|
+
return this.toasts
|
|
4128
|
+
.openToast('toast-c-1', 'rlb-calendar-toast', {
|
|
4120
4129
|
title: 'Success!',
|
|
4121
4130
|
content,
|
|
4122
4131
|
type,
|
|
4123
|
-
})
|
|
4132
|
+
})
|
|
4133
|
+
.pipe(take(1));
|
|
4124
4134
|
}
|
|
4125
4135
|
return of(null);
|
|
4126
|
-
}))
|
|
4136
|
+
}))
|
|
4137
|
+
.subscribe();
|
|
4127
4138
|
}
|
|
4128
4139
|
onEventClick(eventToEdit) {
|
|
4129
4140
|
if (eventToEdit) {
|
|
4130
4141
|
this.eventClick.emit(eventToEdit);
|
|
4131
4142
|
}
|
|
4132
|
-
this.openEditEventDialog(eventToEdit)
|
|
4143
|
+
this.openEditEventDialog(eventToEdit)
|
|
4144
|
+
.pipe(switchMap((modalResult) => {
|
|
4133
4145
|
const newEvent = modalResult.result;
|
|
4134
4146
|
let result = null;
|
|
4135
4147
|
if (modalResult.reason === 'cancel' && eventToEdit) {
|
|
4136
|
-
this.events = [
|
|
4148
|
+
this.events = [
|
|
4149
|
+
...this.events.filter((event) => event.id !== eventToEdit.id),
|
|
4150
|
+
];
|
|
4137
4151
|
result = { action: 'delete' };
|
|
4138
4152
|
return of(result);
|
|
4139
4153
|
}
|
|
4140
|
-
if (modalResult.reason === 'cancel' ||
|
|
4154
|
+
if (modalResult.reason === 'cancel' ||
|
|
4155
|
+
modalResult.reason === 'close' ||
|
|
4156
|
+
modalResult.reason === undefined) {
|
|
4141
4157
|
return of(result);
|
|
4142
4158
|
}
|
|
4143
4159
|
if (eventToEdit) {
|
|
@@ -4168,14 +4184,17 @@ class CalendarComponent {
|
|
|
4168
4184
|
content = 'Event created successfully.';
|
|
4169
4185
|
break;
|
|
4170
4186
|
}
|
|
4171
|
-
return this.toasts
|
|
4187
|
+
return this.toasts
|
|
4188
|
+
.openToast('toast-c-1', 'rlb-calendar-toast', {
|
|
4172
4189
|
title: 'Success!',
|
|
4173
4190
|
content,
|
|
4174
4191
|
type,
|
|
4175
|
-
})
|
|
4192
|
+
})
|
|
4193
|
+
.pipe(take(1));
|
|
4176
4194
|
}
|
|
4177
4195
|
return of(null);
|
|
4178
|
-
}))
|
|
4196
|
+
}))
|
|
4197
|
+
.subscribe();
|
|
4179
4198
|
}
|
|
4180
4199
|
setDate(date) {
|
|
4181
4200
|
this.currentDate = date;
|
|
@@ -4185,136 +4204,22 @@ class CalendarComponent {
|
|
|
4185
4204
|
this.view = view;
|
|
4186
4205
|
this.viewChange.emit({ date: this.currentDate, view });
|
|
4187
4206
|
}
|
|
4188
|
-
generateTestEvents() {
|
|
4189
|
-
const events = [];
|
|
4190
|
-
const now = getToday();
|
|
4191
|
-
events.push({
|
|
4192
|
-
color: 'primary',
|
|
4193
|
-
title: 'Today 1.5h (11:00-12:30)',
|
|
4194
|
-
start: new DateTz(now).convertToTimezone('UTC').set(11, 'hour').set(0, 'minute'),
|
|
4195
|
-
end: new DateTz(now).convertToTimezone('UTC').set(12, 'hour').set(30, 'minute'),
|
|
4196
|
-
});
|
|
4197
|
-
events.push({
|
|
4198
|
-
color: 'danger',
|
|
4199
|
-
title: 'Today 1h (11:00-12:00)',
|
|
4200
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(11, 'hour').set(0, 'minute'),
|
|
4201
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(0, 'minute'),
|
|
4202
|
-
});
|
|
4203
|
-
events.push({
|
|
4204
|
-
color: 'success',
|
|
4205
|
-
title: 'Today 1.5h (11:30-12:30)',
|
|
4206
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(11, 'hour').set(30, 'minute'),
|
|
4207
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(30, 'minute'),
|
|
4208
|
-
});
|
|
4209
|
-
events.push({
|
|
4210
|
-
color: 'info',
|
|
4211
|
-
title: 'Today 1.5h (11:00-12:30)',
|
|
4212
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(11, 'hour').set(0, 'minute'),
|
|
4213
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(30, 'minute'),
|
|
4214
|
-
});
|
|
4215
|
-
events.push({
|
|
4216
|
-
color: 'warning',
|
|
4217
|
-
title: 'Today 1.75h (11:15-12:30)',
|
|
4218
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(11, 'hour').set(15, 'minute'),
|
|
4219
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(30, 'minute'),
|
|
4220
|
-
});
|
|
4221
|
-
events.push({
|
|
4222
|
-
color: 'secondary',
|
|
4223
|
-
title: 'Today 1.75h (10:45-12:30)',
|
|
4224
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(10, 'hour').set(45, 'minute'),
|
|
4225
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(30, 'minute'),
|
|
4226
|
-
});
|
|
4227
|
-
events.push({
|
|
4228
|
-
color: 'danger',
|
|
4229
|
-
title: 'Today 0.5h test 2 (11:30-12:00)',
|
|
4230
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(11, 'hour').set(30, 'minute'),
|
|
4231
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(0, 'minute'),
|
|
4232
|
-
});
|
|
4233
|
-
events.push({
|
|
4234
|
-
color: 'success',
|
|
4235
|
-
title: 'Today 1.75h test 3 (10:15-12:00)',
|
|
4236
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(10, 'hour').set(15, 'minute'),
|
|
4237
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(0, 'minute'),
|
|
4238
|
-
});
|
|
4239
|
-
events.push({
|
|
4240
|
-
color: 'warning',
|
|
4241
|
-
title: 'Today 1.5h test 4 (12:00-13:30)',
|
|
4242
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(0, 'minute'),
|
|
4243
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(13, 'hour').set(30, 'minute'),
|
|
4244
|
-
});
|
|
4245
|
-
events.push({
|
|
4246
|
-
color: 'primary',
|
|
4247
|
-
title: 'Today 0.5h test 4 (13:30-14:00)',
|
|
4248
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(13, 'hour').set(30, 'minute'),
|
|
4249
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(14, 'hour').set(0, 'minute'),
|
|
4250
|
-
});
|
|
4251
|
-
// Today from 15:15 to 16:00
|
|
4252
|
-
events.push({
|
|
4253
|
-
color: 'danger',
|
|
4254
|
-
title: 'Today 45min (15:15-16:00)',
|
|
4255
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(15, 'hour').set(15, 'minute'),
|
|
4256
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(16, 'hour').set(0, 'minute'),
|
|
4257
|
-
});
|
|
4258
|
-
events.push({
|
|
4259
|
-
color: 'primary',
|
|
4260
|
-
title: 'Today 45min 2 (15:15-16:00)',
|
|
4261
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(15, 'hour').set(15, 'minute'),
|
|
4262
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(16, 'hour').set(0, 'minute'),
|
|
4263
|
-
});
|
|
4264
|
-
// === 2. Event "Tomorrow" (currentDate + 1 day) ===
|
|
4265
|
-
const tomorrowBase = new DateTz(now).add(1, 'day');
|
|
4266
|
-
events.push({
|
|
4267
|
-
color: 'info',
|
|
4268
|
-
title: 'Tomorrow 2h (09:00-11:00)',
|
|
4269
|
-
start: new DateTz(tomorrowBase).convertToTimezone('UTC').set(9, 'hour').set(0, 'minute'),
|
|
4270
|
-
end: new DateTz(tomorrowBase).convertToTimezone('UTC').set(11, 'hour').set(0, 'minute'),
|
|
4271
|
-
});
|
|
4272
|
-
// === 3. Event after tomorrow (currentDate + 2 days) ===
|
|
4273
|
-
const dayAfterTomorrowBase = new DateTz(now).add(2, 'day');
|
|
4274
|
-
events.push({
|
|
4275
|
-
color: 'success',
|
|
4276
|
-
title: 'After Tomorrow 1h (17:00-18:00)',
|
|
4277
|
-
start: new DateTz(dayAfterTomorrowBase).convertToTimezone('UTC').set(17, 'hour').set(0, 'minute'),
|
|
4278
|
-
end: new DateTz(dayAfterTomorrowBase).convertToTimezone('UTC').set(18, 'hour').set(0, 'minute'),
|
|
4279
|
-
});
|
|
4280
|
-
// === 4. Event (currentDate - 1 day) ===
|
|
4281
|
-
const yesterdayBase = new DateTz(now).add(-1, 'day');
|
|
4282
|
-
events.push({
|
|
4283
|
-
color: 'warning',
|
|
4284
|
-
title: 'Yesterday 2h (14:00-16:00)',
|
|
4285
|
-
start: new DateTz(yesterdayBase).convertToTimezone('UTC').set(14, 'hour').set(0, 'minute'),
|
|
4286
|
-
end: new DateTz(yesterdayBase).convertToTimezone('UTC').set(16, 'hour').set(0, 'minute'),
|
|
4287
|
-
});
|
|
4288
|
-
// === 5. Event "Cross day" ===
|
|
4289
|
-
const dayBeforeYesterdayBase = new DateTz(now).add(-2, 'day');
|
|
4290
|
-
const dayBeforeYesterdayEndBase = new DateTz(now).add(-1, 'day');
|
|
4291
|
-
events.push({
|
|
4292
|
-
color: 'secondary',
|
|
4293
|
-
title: 'Cross Day (22:00 -> 02:00)',
|
|
4294
|
-
start: new DateTz(dayBeforeYesterdayBase).convertToTimezone('UTC').set(22, 'hour').set(0, 'minute').stripSecMillis(),
|
|
4295
|
-
end: new DateTz(dayBeforeYesterdayEndBase).convertToTimezone('UTC').set(2, 'hour').set(0, 'minute').stripSecMillis(),
|
|
4296
|
-
});
|
|
4297
|
-
this.events = events.map((event) => {
|
|
4298
|
-
return {
|
|
4299
|
-
...event,
|
|
4300
|
-
id: this.unique.id
|
|
4301
|
-
};
|
|
4302
|
-
});
|
|
4303
|
-
}
|
|
4304
4207
|
openEditEventDialog(eventToEdit) {
|
|
4305
|
-
return this.modals
|
|
4208
|
+
return this.modals
|
|
4209
|
+
.openModal('rlb-calendar-event-create-edit', {
|
|
4306
4210
|
title: eventToEdit ? 'Edit event' : 'Create event',
|
|
4307
4211
|
content: eventToEdit,
|
|
4308
4212
|
ok: 'OK',
|
|
4309
4213
|
type: 'success',
|
|
4310
|
-
})
|
|
4214
|
+
})
|
|
4215
|
+
.pipe(take(1));
|
|
4311
4216
|
}
|
|
4312
4217
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarComponent, deps: [{ token: ModalService }, { token: UniqueIdService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4313
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarComponent, isStandalone: false, selector: "rlb-calendar", inputs: { view: "view", events: "events", currentDate: ["current-date", "currentDate", (d) => new DateTz(d)], loading: ["loading", "loading", booleanAttribute], showToolbar: ["show-toolbar", "showToolbar", booleanAttribute], layout: "layout" }, outputs: { dateChange: "date-change", viewChange: "view-change", eventClick: "event-click" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rlb-calendar\">\n
|
|
4218
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarComponent, isStandalone: false, selector: "rlb-calendar", inputs: { view: "view", events: "events", currentDate: ["current-date", "currentDate", (d) => new DateTz(d)], loading: ["loading", "loading", booleanAttribute], showToolbar: ["show-toolbar", "showToolbar", booleanAttribute], layout: "layout" }, outputs: { dateChange: "date-change", viewChange: "view-change", eventClick: "event-click" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rlb-calendar\">\n\n @if (showToolbar) {\n <rlb-calendar-header\n [view]=\"view\"\n [currentDate]=\"currentDate\"\n (viewChange)=\"setView($event)\"\n (dateChange)=\"setDate($event)\"\n >\n </rlb-calendar-header>\n }\n\n @if (loading) {\n <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n </rlb-progress>\n } @else {\n <rlb-calendar-grid\n [events]=\"events\"\n [view]=\"view\"\n [currentDate]=\"currentDate\"\n [layout]=\"mergedLayout\"\n (eventClick)=\"onEventClick($event)\"\n (eventContainerClick)=\"onEventContainerClick($event)\"\n (eventChange)=\"onEventChange($event)\"\n >\n </rlb-calendar-grid>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }, { kind: "component", type: CalendarHeaderComponent, selector: "rlb-calendar-header", inputs: ["view", "currentDate"], outputs: ["dateChange", "viewChange"] }, { kind: "component", type: CalendarGrid, selector: "rlb-calendar-grid", inputs: ["view", "currentDate", "events", "layout"], outputs: ["eventClick", "eventContainerClick", "eventChange"] }] }); }
|
|
4314
4219
|
}
|
|
4315
4220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
4316
4221
|
type: Component,
|
|
4317
|
-
args: [{ selector:
|
|
4222
|
+
args: [{ selector: 'rlb-calendar', standalone: false, template: "<div class=\"rlb-calendar\">\n\n @if (showToolbar) {\n <rlb-calendar-header\n [view]=\"view\"\n [currentDate]=\"currentDate\"\n (viewChange)=\"setView($event)\"\n (dateChange)=\"setDate($event)\"\n >\n </rlb-calendar-header>\n }\n\n @if (loading) {\n <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n </rlb-progress>\n } @else {\n <rlb-calendar-grid\n [events]=\"events\"\n [view]=\"view\"\n [currentDate]=\"currentDate\"\n [layout]=\"mergedLayout\"\n (eventClick)=\"onEventClick($event)\"\n (eventContainerClick)=\"onEventContainerClick($event)\"\n (eventChange)=\"onEventChange($event)\"\n >\n </rlb-calendar-grid>\n }\n</div>\n" }]
|
|
4318
4223
|
}], ctorParameters: () => [{ type: ModalService }, { type: UniqueIdService }, { type: ToastService }], propDecorators: { view: [{
|
|
4319
4224
|
type: Input,
|
|
4320
4225
|
args: [{ alias: 'view' }]
|