@colijnit/corecomponents_v12 255.1.6 → 255.1.7

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -14115,8 +14115,9 @@
     ];
 
     var HourSchedulingComponent = /** @class */ (function () {
-        function HourSchedulingComponent(cdRef) {
+        function HourSchedulingComponent(cdRef, _datepipe) {
             this.cdRef = cdRef;
+            this._datepipe = _datepipe;
             this.showClass = true;
             this.customTemplateUsed = false;
             this.hours = [];
@@ -14124,21 +14125,28 @@
             this.draggedObject = null;
         }
         HourSchedulingComponent.prototype.ngOnInit = function () {
+            if (!this.childProp) {
+                this.startTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.startTimeProp]).toISOString(), 'H:mm'));
+                this.endTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.endTimeProp]).toISOString(), 'H:mm'));
+            }
+            else {
+                this.startTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.childProp][this.startTimeProp]).toISOString(), 'H:mm'));
+                this.endTime = parseInt(this._datepipe.transform(new Date(this.schedule[this.childProp][this.endTimeProp]).toISOString(), 'H:mm'));
+            }
             this.generateTimeBlocks();
         };
         HourSchedulingComponent.prototype.generateTimeBlocks = function () {
-            var startTime = this.schedule[this.startTimeProp];
-            var endTime = this.schedule[this.endTimeProp];
             var objectsList = this.schedule[this.objectsProp];
-            for (var hour = startTime; hour <= endTime; hour++) {
+            for (var hour = this.startTime; hour <= this.endTime; hour++) {
                 this.hours.push(this.formatHour(hour));
-                this.scheduledObjects[this.formatHour(hour)] = this.getObjectsForHour(hour, objectsList);
+                this.scheduledObjects[this.formatHour(hour)] = this._getObjectsForHour(hour, objectsList);
             }
         };
-        HourSchedulingComponent.prototype.getObjectsForHour = function (hour, objectsList) {
+        HourSchedulingComponent.prototype._getObjectsForHour = function (hour, objectsList) {
+            var _this = this;
             var objectsForHour = [];
             objectsList.forEach(function (obj) {
-                if (obj.start === hour) {
+                if (_this.convertToHourNotation(obj[_this.startTimeProp]) === hour) {
                     objectsForHour.push(Object.assign({}, obj));
                 }
             });
@@ -14152,49 +14160,77 @@
             var currentHourSpan = currentTarget.parentElement.parentElement.querySelector('.hour-label span');
             var currentHour = currentHourSpan.textContent;
             this.draggedObject = obj;
-            event.dataTransfer.setData('text', JSON.stringify({ obj: obj, currentHour: currentHour }));
+            event.dataTransfer.setData('text', JSON.stringify({ obj: this.draggedObject, currentHour: currentHour }));
+        };
+        HourSchedulingComponent.prototype.onCustomDragStart = function (event, obj) {
+            this.onDragStart(event, obj);
         };
         HourSchedulingComponent.prototype.onDragOver = function (event) {
             event.preventDefault();
         };
         HourSchedulingComponent.prototype.onDrop = function (event, hour) {
+            var _a;
             var _this = this;
             event.preventDefault();
+            event.stopPropagation();
             var data = JSON.parse(event.dataTransfer.getData('text'));
+            if (!data || !data.obj) {
+                return;
+            }
             var newStartHour = parseInt(hour.split(':')[0], 10);
             var newEndHour = newStartHour + 1;
-            data.obj.start = newStartHour;
-            data.obj.end = newEndHour;
-            var currentHourBlock = data.currentHour;
-            this.scheduledObjects[currentHourBlock] = this.scheduledObjects[currentHourBlock].filter(function (o) { return o !== _this.draggedObject; });
+            var originalStartHour = this.convertToHourNotation(data.obj[this.startTimeProp]);
+            // Get the unique identifier value from the object using the `idProp`
+            var objId = data.obj[this.idProp];
+            // Ensure we create a new object to avoid mutation issues
+            var updatedObject = Object.assign(Object.assign({}, data.obj), { start: newStartHour, end: newEndHour });
+            var updatedObject2 = Object.assign(Object.assign({}, data.obj), (_a = {}, _a[this.startTimeProp] = this.createDate(newStartHour), _a[this.endTimeProp] = this.createDate(newEndHour), _a));
+            // Remove the object from its old hour block using its unique id
+            var originalHourBlock = this.formatHour(originalStartHour);
+            this.scheduledObjects[originalHourBlock] = this.scheduledObjects[originalHourBlock].filter(function (o) { return o[_this.idProp] !== objId; });
+            // Add the object to the new hour block
             var newHourBlock = this.formatHour(newStartHour);
             if (!this.scheduledObjects[newHourBlock]) {
                 this.scheduledObjects[newHourBlock] = [];
             }
-            this.scheduledObjects[newHourBlock].push(data.obj);
+            this.scheduledObjects[newHourBlock].push(updatedObject2);
+            // Clear the dragged object
             this.draggedObject = null;
+            // Trigger change detection to update the view
             this.cdRef.detectChanges();
         };
+        HourSchedulingComponent.prototype.convertToHourNotation = function (date) {
+            return parseInt(this._datepipe.transform(new Date(date).toISOString(), 'H:mm'));
+        };
+        HourSchedulingComponent.prototype.createDate = function (hours) {
+            var date = new Date();
+            date.setHours(hours);
+            date.setMinutes(0, 0, 0);
+            return date;
+        };
         return HourSchedulingComponent;
     }());
     HourSchedulingComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-hour-scheduling',
-                    template: "\n    <div class=\"time-block\" *ngFor=\"let hour of hours\">\n      <div class=\"hour-label\"><span [textContent]=\"hour\"></span></div>\n      <div class=\"object-display\"\n           (dragover)=\"onDragOver($event)\"\n           (drop)=\"onDrop($event, hour)\">\n        <ng-container *ngIf=\"!customTemplateUsed\">\n          <ng-container *ngIf=\"scheduledObjects[hour]\">\n            <div *ngFor=\"let obj of scheduledObjects[hour]\" class=\"scheduled-object\"\n                 [draggable]=\"true\"\n                 (dragstart)=\"onDragStart($event, obj)\">\n              <span class=\"title\" [textContent]=\"obj.title\"></span>\n              <span class=\"sub-title\" [textContent]=\"obj.subTitle\"></span>\n            </div>\n          </ng-container>\n        </ng-container>\n        <ng-template #customContent *ngIf=\"customTemplateUsed\">\n          <ng-container *ngTemplateOutlet=\"customTemplate; context: { objects: scheduledObjects[hour] }\">\n          </ng-container>\n        </ng-template>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"time-block\" *ngFor=\"let hour of hours\">\n      <div class=\"hour-label\"><span [textContent]=\"hour\"></span></div>\n      <div\n        class=\"object-display\"\n        (dragover)=\"onDragOver($event)\"\n        (drop)=\"onDrop($event, hour)\"\n      >\n        <ng-container *ngIf=\"!customTemplateUsed\">\n          <ng-container *ngIf=\"scheduledObjects[hour]\">\n            <div\n              *ngFor=\"let obj of scheduledObjects[hour]\"\n              class=\"scheduled-object\"\n              [draggable]=\"true\"\n              (dragstart)=\"onDragStart($event, obj)\"\n            >\n              <span class=\"title\" [textContent]=\"obj.title\"></span>\n              <span class=\"sub-title\" [textContent]=\"obj.subTitle\"></span>\n            </div>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"customTemplateUsed\">\n          <ng-template\n            [ngTemplateOutlet]=\"customTemplate\"\n            [ngTemplateOutletContext]=\"{\n              hour: hour,\n              objects: scheduledObjects[hour]\n            }\"\n          >\n          </ng-template>\n        </ng-container>\n      </div>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     HourSchedulingComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef },
+        { type: common.DatePipe }
     ]; };
     HourSchedulingComponent.propDecorators = {
-        showClass: [{ type: i0.HostBinding, args: ['class.co-hour-scheduling',] }],
         schedule: [{ type: i0.Input }],
         startTimeProp: [{ type: i0.Input }],
         endTimeProp: [{ type: i0.Input }],
         objectsProp: [{ type: i0.Input }],
+        childProp: [{ type: i0.Input }],
         customTemplate: [{ type: i0.Input }],
-        customTemplateUsed: [{ type: i0.Input }]
+        customTemplateUsed: [{ type: i0.Input }],
+        idProp: [{ type: i0.Input }],
+        generateTimeBlocks: [{ type: i0.HostBinding, args: ['class.co-hour-scheduling',] }]
     };
 
     var HourSchedulingTestObjectComponent = /** @class */ (function () {
@@ -14235,7 +14271,8 @@
                     exports: [
                         HourSchedulingComponent,
                         HourSchedulingTestObjectComponent
-                    ]
+                    ],
+                    providers: [common.DatePipe]
                 },] }
     ];