allow Template result to be used in Event content

dev/index.ts

@@ -28,15 +28,15 @@ rows[2].parent = rows[1];
 rows[0].parent = rows[1];
 const data = dayjs().startOf("hour").hour(9);
 const timeslots:Array<IEvent> = [
-    {id:'1', title:"Fixed ressource" ,ressourceId:'3', start:data.subtract(3,"h").toDate(), end:data.toDate(), ressourceEditable:false,bgColor:"darkgreen"},
-    {id:'2', title:"Fixed time" , ressourceId:'3', start:data.toDate(), end:data.endOf("hour").add(1,"h").toDate(), editable:false,bgColor:"FireBrick"},
+    {id:'1', content:"Fixed ressource" ,ressourceId:'3', start:data.subtract(3,"h").toDate(), end:data.toDate(), ressourceEditable:false,bgColor:"darkgreen"},
+    {id:'2', content:"Fixed time" , ressourceId:'3', start:data.toDate(), end:data.endOf("hour").add(1,"h").toDate(), editable:false,bgColor:"FireBrick"},
     {id:'3', ressourceId:'4', start:data.add(1,"h").toDate(), end:data.endOf("hour").add(2,"h").toDate()},
     {id:'4', ressourceId:'3', start:data.startOf("day").subtract(1,"h").toDate(), end:dayjs().endOf("hour").add(1,"h").toDate()}
 ]
 for(let i = 5; i < 10; i++){
     timeslots.push({
         id : i.toFixed(0),
-        title: "event " + i,
+        content: "event " + i,
         ressourceId:'1',
         start:data.add(i,'h').toDate(),
         end:data.add(i,'h').endOf("hour").add(1,"h").toDate(),

doc/js/genericTimeline.js

@@ -9,8 +9,8 @@ const rows = [
 
 const data = dayjs().startOf("hour").hour(9);
 const timeslots = [
-    {id:'1', title:"Fixed ressource" ,ressourceId:'3', start:data.subtract(3,"h").toDate(), end:data.toDate(), ressourceEditable:false,bgColor:"darkgreen"},
-    {id:'2', title:"Fixed time" , ressourceId:'3', start:data.toDate(), end:data.endOf("hour").add(1,"h").toDate(), editable:false,bgColor:"FireBrick"},
+    {id:'1', content:"Fixed ressource" ,ressourceId:'3', start:data.subtract(3,"h").toDate(), end:data.toDate(), ressourceEditable:false,bgColor:"darkgreen"},
+    {id:'2', content:"Fixed time" , ressourceId:'3', start:data.toDate(), end:data.endOf("hour").add(1,"h").toDate(), editable:false,bgColor:"FireBrick"},
     {id:'3', ressourceId:'4', start:data.add(1,"h").toDate(), end:data.endOf("hour").add(2,"h").toDate()},
     {id:'4', ressourceId:'3', start:data.startOf("day").subtract(1,"h").toDate(), end:dayjs().endOf("hour").add(1,"h").toDate()}
 ]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jc-timeline",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "web component to manage ressources in time",
   "main": "./lib/main.js",
   "types": "./lib/main.d.ts",

src/Event.ts

@@ -1,4 +1,5 @@
 
+import { TemplateResult } from 'lit-html';
 import Selectable from './utils/selectable';
 
 export interface IEvent{
@@ -6,7 +7,7 @@ export interface IEvent{
     start:Date
     end: Date
     ressourceId:string
-    title?:string
+    content?:string |TemplateResult
     editable?:boolean | null
     ressourceEditable?:boolean | null
     bgColor?:string
@@ -15,7 +16,7 @@ export class Event implements IEvent, Selectable{
     id:string
     start:Date
     end:Date
-    title: string
+    content: string | TemplateResult
     ressourceId: string
     isDisplayed: boolean
     offset: number
@@ -30,7 +31,7 @@ export class Event implements IEvent, Selectable{
       this.start = obj.start;
       this.end = obj.end;
       this.ressourceId = obj.ressourceId;
-      this.title = obj?.title || this.id;
+      this.content = obj?.content || this.id;
       this.isDisplayed = false;
       this.offset = 0;
       this.editable = obj?.editable === undefined ? null : obj.editable;

src/Timeline.ts

@@ -184,7 +184,7 @@ class Timeline extends LitElement {
         }
     
         this.addRessources(r.children);
-        
+        this._clearSelectedItems()
         this._updateEventPosition(r)
         return r;
     }
@@ -274,6 +274,7 @@ class Timeline extends LitElement {
         // Update timeslot status
         timeslot.isDisplayed = timeslot.end > this._start.toDate() || timeslot.start < this._end.toDate();
         this._updateEventPosition(ressource)
+        this._clearSelectedItems()
         return timeslot;
     }
 
@@ -524,10 +525,11 @@ class Timeline extends LitElement {
         }
     }
     private _clearSelectedItems(){
-        this.selectedList.map(selectable => {
+        this.items.forEach((selectable) => {
             selectable.selected = false;
             this.updateEventById(selectable.id)
         });
+        this.rows.forEach((selectable) => selectable.selected = false);
         this.selectedList = []
     }
     private _clearSelectionHandler = (_e: MouseEvent)=>{
@@ -618,7 +620,7 @@ class Timeline extends LitElement {
             return html`<div class="jc-timeslot empty" style="${styleMap(style)}"></div>`
         }
 
-        let content: TemplateResult = html`${evt.title}`
+        let content: TemplateResult = html`${evt.content}`
         const resizer = evt.editable === null ? ressource.eventEditable : evt.editable;
         const editableRessource = evt.ressourceEditable === null ? ressource.eventRessourceEditable : evt.ressourceEditable;
         if (resizer) {