@colijnit/corecomponents_v12 255.1.10 → 255.1.11

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -14121,46 +14121,58 @@
             this.cdRef = cdRef;
             this.datePipe = datePipe;
             this.showClass = true;
-            this.hours = [];
+            this.hourLabels = [];
             this.scheduledObjects = {};
+            this.activeHour = null;
+            this.activeHalfHour = null;
             this.draggedObject = null;
             this.customTemplateUsed = false;
             this.timeChangeEvent = new i0.EventEmitter();
+            this.newObjectPlanEvent = new i0.EventEmitter();
+            document.addEventListener('click', this.onDocumentClick.bind(this));
         }
         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();
+            this.generateScheduledObjects();
+        };
+        HourSchedulingComponent.prototype.ngOnDestroy = function () {
+            document.removeEventListener('click', this.onDocumentClick.bind(this));
         };
         HourSchedulingComponent.prototype.generateTimeBlocks = function () {
+            var startUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.startTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.startTimeProp]));
+            var endUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.endTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.endTimeProp]));
+            var interval = 60 * 60;
+            for (var hourCount = startUnix; hourCount <= endUnix; hourCount += interval) {
+                var hour = new Date(hourCount * 1000);
+                var hourString = hour.getHours() + ":" + (hour.getMinutes() === 0 ? '00' : hour.getMinutes());
+                this.hourLabels.push(hourString);
+            }
+        };
+        HourSchedulingComponent.prototype.generateScheduledObjects = function () {
             var objectsList = this.schedule[this.objectsProp];
-            for (var hour = this.startTime; hour <= this.endTime; hour++) {
-                this.hours.push(this.formatHour(hour));
-                this.scheduledObjects[this.formatHour(hour)] = this._getObjectsForHour(hour, objectsList);
+            var startUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.startTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.startTimeProp]));
+            var endUnix = !this.childProp ? this.dateToUnixEpoch(new Date(this.schedule[this.endTimeProp])) : this.dateToUnixEpoch(new Date(this.schedule[this.childProp][this.endTimeProp]));
+            var interval = 30 * 60;
+            for (var hourCount = startUnix; hourCount <= endUnix; hourCount += interval) {
+                var hour = new Date(hourCount * 1000);
+                var hourString = hour.getHours() + ":" + (hour.getMinutes() === 0 ? '00' : hour.getMinutes());
+                this.scheduledObjects[hourString] = this._getObjectsForHourAndMinutes(hour.getHours(), hour.getMinutes(), objectsList);
             }
         };
-        HourSchedulingComponent.prototype._getObjectsForHour = function (hour, objectsList) {
+        HourSchedulingComponent.prototype._getObjectsForHourAndMinutes = function (hour, minutes, objectsList) {
             var _this = this;
             var objectsForHour = [];
             objectsList.forEach(function (obj) {
-                if (_this.convertToHourNotation(obj[_this.startTimeProp]) === hour) {
+                var split = _this.convertToHourNotation(obj[_this.startTimeProp]).split(':');
+                if (parseInt(split[0]) === hour && parseInt(split[1]) === minutes) {
                     objectsForHour.push(Object.assign({}, obj));
                 }
             });
             return objectsForHour;
         };
-        HourSchedulingComponent.prototype.formatHour = function (hour) {
-            return hour + ":00";
-        };
         HourSchedulingComponent.prototype.onDragStart = function (event, obj) {
             var currentTarget = event.currentTarget;
-            var currentHourSpan = currentTarget.parentElement.parentElement.querySelector('.hour-label span');
+            var currentHourSpan = currentTarget.parentElement.parentElement.querySelector('.hidden-hour-label');
             var currentHour = currentHourSpan.textContent;
             this.draggedObject = obj;
             event.dataTransfer.setData('text', JSON.stringify({ obj: this.draggedObject, currentHour: currentHour }));
@@ -14170,32 +14182,41 @@
         };
         HourSchedulingComponent.prototype.onDragOver = function (event) {
             event.preventDefault();
+            var currentTarget = event.currentTarget;
+            currentTarget.classList.add('drag-over');
+        };
+        HourSchedulingComponent.prototype.onDragLeave = function (event) {
+            var currentTarget = event.currentTarget;
+            currentTarget.classList.remove('drag-over'); // Remove 'drag-over' class
         };
         HourSchedulingComponent.prototype.onDrop = function (event, hour) {
-            var _a;
+            var _c;
             var _this = this;
             event.preventDefault();
             event.stopPropagation();
-            var data = JSON.parse(event.dataTransfer.getData('text'));
-            if (!data || !data.obj) {
+            var currentTarget = event.currentTarget;
+            currentTarget.classList.remove('drag-over');
+            var parsed = this.tryParseJSONObject(event.dataTransfer.getData("text"));
+            if (!parsed) {
+                this.newObjectPlanEvent.emit({ currentHour: hour, data: parsed.toString() });
                 return;
             }
-            var newStartHour = parseInt(hour.split(':')[0], 10);
-            var newEndHour = newStartHour + 1;
-            var originalStartHour = this.convertToHourNotation(data.obj[this.startTimeProp]);
+            var splitHour = hour.split(':');
+            var newEndMinutes = splitHour[1] === "00" ? 30 : 0;
+            var newEndHour = splitHour[1] === "30" ? (parseInt(splitHour[0]) + 1) : parseInt(splitHour[0]);
+            var originalStartHour = this.convertToHourNotation(parsed.obj[this.startTimeProp]);
             // Get the unique identifier value from the object using the `idProp`
-            var objId = data.obj[this.idProp];
+            var objId = parsed.obj[this.idProp];
             // Ensure we create a new object to avoid mutation issues
-            var updatedObject = Object.assign(Object.assign({}, data.obj), (_a = {}, _a[this.startTimeProp] = this.createDate(newStartHour), _a[this.endTimeProp] = this.createDate(newEndHour), _a));
+            var updatedObject = Object.assign(Object.assign({}, parsed.obj), (_c = {}, _c[this.startTimeProp] = this.createDate(parseInt(splitHour[0]), parseInt(splitHour[1])), _c[this.endTimeProp] = this.createDate(newEndHour, newEndMinutes), _c));
             // Remove the object from its old hour block using its unique id
-            var originalHourBlock = this.formatHour(originalStartHour);
+            var originalHourBlock = this.formatHour(parseInt(originalStartHour.split(':')[0]), parseInt(originalStartHour.split(':')[1]));
             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] = [];
+            if (!this.scheduledObjects[hour]) {
+                this.scheduledObjects[hour] = [];
             }
-            this.scheduledObjects[newHourBlock].push(updatedObject);
+            this.scheduledObjects[hour].push(updatedObject);
             // Clear the dragged object
             this.draggedObject = null;
             this.timeChangeEvent.emit(updatedObject);
@@ -14203,20 +14224,67 @@
             this.cdRef.detectChanges();
         };
         HourSchedulingComponent.prototype.convertToHourNotation = function (date) {
-            return parseInt(this.datePipe.transform(new Date(date).toISOString(), 'H:mm'));
+            return this.datePipe.transform(new Date(date).toISOString(), 'HH:mm');
         };
-        HourSchedulingComponent.prototype.createDate = function (hours) {
+        HourSchedulingComponent.prototype.createDate = function (hours, minutes) {
             var date = new Date();
             date.setHours(hours);
-            date.setMinutes(0, 0, 0);
+            date.setMinutes(minutes ? minutes : 0);
             return date;
         };
+        HourSchedulingComponent.prototype.dateToUnixEpoch = function (date) {
+            return Math.floor(date.getTime()) / 1000;
+        };
+        HourSchedulingComponent.prototype.formatHour = function (hour, minutes) {
+            return hour + ":" + (minutes ? minutes : '00');
+        };
+        HourSchedulingComponent.prototype.addMinutes = function (hour) {
+            var split = hour.split(":");
+            split[1] = "30";
+            return split.join(':');
+        };
+        HourSchedulingComponent.prototype.onDocumentClick = function (event) {
+            var targetElement = event.target;
+            // Clear active state when clicking outside
+            if (!targetElement.closest('.object-display')) {
+                this.activeHalfHour = null;
+                this.cdRef.detectChanges();
+            }
+        };
+        HourSchedulingComponent.prototype.onObjectDisplayClick = function (hour, half) {
+            var _a, _b;
+            var halfHourIdentifier = hour + "-" + half;
+            if (this.activeHalfHour === halfHourIdentifier) {
+                // Deactivate if clicked again
+                this.activeHalfHour = null;
+            }
+            else if (((_a = this.scheduledObjects[hour]) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = this.scheduledObjects[this.addMinutes(hour)]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                // Activate the half-hour if there are objects
+                this.activeHalfHour = halfHourIdentifier;
+            }
+        };
+        HourSchedulingComponent.prototype.tryParseJSONObject = function (jsonString) {
+            try {
+                var o = JSON.parse(jsonString);
+                // Handle non-exception-throwing cases:
+                // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,
+                // but... JSON.parse(null) returns null, and typeof null === "object",
+                // so we must check for that, too. Thankfully, null is falsey, so this suffices:
+                if (o && typeof o === "object") {
+                    return o;
+                }
+            }
+            catch (e) {
+            }
+            return false;
+        };
+        ;
         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\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  ",
+                    template: "\n    <div class=\"time-block\" *ngFor=\"let hour of hourLabels\">\n      <div class=\"hour-label\"><span [textContent]=\"hour\"></span></div>\n      <div class=\"object-display\">\n        <div class=\"first-half-hour object-half\"\n             [ngClass]=\"{'has-objects': scheduledObjects[hour]?.length > 0, 'active': activeHalfHour === hour + '-firstHalf'}\"\n             (dragover)=\"onDragOver($event)\"\n             (dragleave)=\"onDragLeave($event)\"\n             (click)=\"onObjectDisplayClick(hour, 'firstHalf')\"\n             (drop)=\"onDrop($event, hour)\">\n          <ng-container *ngIf=\"!customTemplateUsed\">\n            <ng-container *ngIf=\"scheduledObjects[hour]\">\n              <span class=\"hidden-hour-label\" [hidden]=\"true\" [textContent]=\"hour\"></span>\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=\"hidden-hour-label\" [hidden]=\"true\" [textContent]=\"addMinutes(hour)\"></span>\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              hiddenHour: hour,\n              objects: scheduledObjects[hour]\n            }\"\n            >\n            </ng-template>\n          </ng-container>\n        </div>\n\n        <div class=\"second-half-hour object-half\"\n             [ngClass]=\"{'has-objects': scheduledObjects[addMinutes(hour)]?.length > 0, 'active': activeHalfHour === hour + '-secondHalf'}\"\n             (dragover)=\"onDragOver($event)\"\n             (dragleave)=\"onDragLeave($event)\"\n             (click)=\"onObjectDisplayClick(hour, 'secondHalf')\"\n             (drop)=\"onDrop($event, addMinutes(hour))\">\n          <ng-container *ngIf=\"!customTemplateUsed\">\n            <ng-container *ngIf=\"scheduledObjects[addMinutes(hour)]\">\n              <div\n                *ngFor=\"let obj of scheduledObjects[addMinutes(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                <span class=\"hidden-hour-label\" [hidden]=\"true\" [textContent]=\"addMinutes(hour)\"></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              hiddenHour: addMinutes(hour),\n              objects: scheduledObjects[addMinutes(hour)]\n            }\"\n            >\n            </ng-template>\n          </ng-container>\n        </div>\n\n\n      </div>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -14234,6 +14302,7 @@
         customTemplateUsed: [{ type: i0.Input }],
         idProp: [{ type: i0.Input }],
         timeChangeEvent: [{ type: i0.Output }],
+        newObjectPlanEvent: [{ type: i0.Output }],
         generateTimeBlocks: [{ type: i0.HostBinding, args: ['class.co-hour-scheduling',] }]
     };