Added “collapse” component and updated AngularFrontend documentation

angular_frontend/src/app/app.component.scss

@@ -1,3 +1,3 @@
 div.content-wrapper {
     padding-top: 1%;
-}
+}

angular_frontend/src/app/app.module.ts

@@ -8,7 +8,7 @@ import { CommonModule } from '@angular/common';
 import { WindowComponent } from './window/window.component';
 import { ContainerComponent } from './container/container.component';
 import { DropdownMenuComponent } from './dropdown-menu/dropdown-menu.component';
-import { NgbCollapseModule, NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { LabelComponent } from './label/label.component';
 import { MenuBarComponent } from './menu-bar/menu-bar.component';
 import { ButtonComponent } from './button/button.component';
@@ -21,6 +21,7 @@ import { ModalComponent } from './modal/modal.component';
 import { ContextMenuComponent } from './context-menu/context-menu.component';
 import { ProgressBarComponent } from './progress-bar/progress-bar.component';
 import { CheckboxComponent } from './checkbox/checkbox.component';
+import { CollapseComponent } from './collapse/collapse.component';
 
 function initialize() {
   return (): Promise<boolean> => {
@@ -49,7 +50,8 @@ export function appConfigInit(appConfigService: ConfigService) {
     ModalComponent,
     ContextMenuComponent,
     ProgressBarComponent,
-    CheckboxComponent
+    CheckboxComponent,
+	CollapseComponent
   ],
   imports: [
     BrowserModule,

angular_frontend/src/app/attribute-helper.service.ts

@@ -24,6 +24,69 @@ export class AttributeHelperService {
         html.style.width = value
     }
 
+    handleStartDrag(event: DragEvent) {
+        if (event.target) {
+            const targetElement = document.getElementById((event.target as HTMLElement).id) as HTMLElement;
+            event.preventDefault();
+            // console.log(event.target);
+            // console.log((event.target as HTMLElement).id);
+            // console.log(targetElement);
+            if (targetElement) {
+                targetElement.classList.add("my-drop-target");
+            }
+        }
+    }
+
+    handleEndDrag(event: DragEvent) {
+        if (event.target) {
+            const targetElement = document.getElementById((event.target as HTMLElement).id) as HTMLElement;
+            if (targetElement) {
+                targetElement.classList.remove("my-drop-target");
+            }
+        }
+    }
+
+
+    setDrag(html: HTMLElement, attributes: AttributeDto[]) {
+
+        let draggable_as = this.findGetAttributeValue("draggable_as", attributes, "00")
+        let drop_targets = this.findAttributeList("drop_target", attributes)
+        // console.log(draggable_as);
+
+        let draggable = draggable_as != "00"
+        if (draggable) {
+            html.style.cursor = "grab"
+            html.draggable = true
+            html.addEventListener("dragstart", (event) => {
+
+                if (event.dataTransfer) {
+                    event.dataTransfer.setData('dragged-id', draggable_as);
+                }
+                html.classList.add("my-drag-target");
+                drop_targets.forEach(targetId => {
+                    const targetElement = document.getElementById(targetId);
+                    if (targetElement) {
+                        targetElement.classList.add("my-drop-valid-target");
+                        targetElement.addEventListener("dragover", this.handleStartDrag);
+                        targetElement.addEventListener("dragleave", this.handleEndDrag);
+                    }
+                });
+
+            });
+            html.addEventListener("dragend", (event) => {
+                html.classList.remove("my-drag-target");
+                drop_targets.forEach(targetId => {
+                    const targetElement = document.getElementById(targetId);
+                    if (targetElement) {
+                        targetElement.classList.remove("my-drop-valid-target");
+
+                        targetElement.removeEventListener("dragover", this.handleStartDrag);
+                        targetElement.removeEventListener("dragleave", this.handleEndDrag);
+                    }
+                });
+            });
+        }
+    }
 
     setBorderHelper(html: HTMLElement, attributes: AttributeDto[]) {
 
@@ -62,6 +125,7 @@ export class AttributeHelperService {
     addGeneralAttributes(html: HTMLElement, attributes: AttributeDto[]) {
         this.setGrid(html, attributes)
         this.setBorderHelper(html, attributes)
+        this.setDrag(html, attributes)
     }
 
     setGrid(html: HTMLElement, attributes: AttributeDto[]) {
@@ -185,6 +249,11 @@ export class AttributeHelperService {
         }
         return value
     }
+    findAttributeList(key: string, attributes: AttributeDto[]): string[] {
+        return attributes.filter(attr => attr.key === key).map(attr => attr.value);
+    }
+
+
 
     findGetAttributeValue(key: string, attributes: AttributeDto[], defaultValue: string) {
         let value = defaultValue

angular_frontend/src/app/callback-helper.service.ts

@@ -181,6 +181,21 @@ function handleUpdate(when: WhenDto, event: Event | null) {
 
 }
 
+function replaceDragged(operation_string: string, event: Event | null) {
+  let regex = /_value/g
+  if (event instanceof DragEvent) {
+    var dragged_id = event.dataTransfer?.getData("dragged-id")
+    if (dragged_id != null) {
+      operation_string = operation_string.replace(/_dragged/g, dragged_id)
+    }
+    else {
+      console.error("No dragged id found in data");
+    }
+  }
+
+  return operation_string
+}
+
 function replaceContext(operation_string: string) {
 
   let contextService = LocatorService.injector.get(ContextService)
@@ -255,11 +270,14 @@ function replaceContext(operation_string: string) {
 }
 
 function handleCallback(when: WhenDto, event: Event | null) {
+  console.log("---- Handling callback", when)
+
   let frontendService = LocatorService.injector.get(DrawFrontendService)
 
   let operation_string = when.operation
 
   operation_string = replaceContext(operation_string)
+  operation_string = replaceDragged(operation_string, event)
 
   when.operation = operation_string
 
@@ -284,7 +302,7 @@ function handleContext(when: WhenDto, event: Event | null) {
       let value = splits[1]
 
       if (event != null) {
-
+        // ====== Value for input
         let regex = /_value/g
         let eventTarget: EventTarget | null = event.target
 
@@ -300,6 +318,8 @@ function handleContext(when: WhenDto, event: Event | null) {
             value = value.replace("_value", eventTarget.value)
           }
         }
+        // Value for dragged
+
       }
 
       for (let index = 2; index < splits.length; index++) {
@@ -343,10 +363,12 @@ export class CallBackHelperService {
     this.handleEvent(html, dos, "mouseleave", "mouseleave")
     this.handleEvent(html, dos, "load", "load")
     this.handleEvent(html, dos, "dblclick", "dblclick")
+    this.handleEvent(html, dos, "drop", "drop")
   }
 
   handleEvent(html: HTMLElement, dos: WhenDto[], supportedAttributeName: string = "", htmlEventName: string = "") {
     let allEvents: WhenDto[] = []
+
     dos.forEach((when: WhenDto) => {
       if (when.actionType == supportedAttributeName) {
         allEvents.push(when)
@@ -374,9 +396,11 @@ export class CallBackHelperService {
         })
         return
       }
+
       if (supportedAttributeName == "click") {
         html.style.cursor = "pointer"
       }
+
       html.addEventListener(htmlEventName, function (event: Event) {
         allEvents.sort(function (a, b) {
           if (a.interactionType < b.interactionType) {
@@ -391,22 +415,7 @@ export class CallBackHelperService {
         const updates = allEvents.filter((w) => w.interactionType == "update")
         const context = allEvents.filter((w) => w.interactionType == "context")
         const call = allEvents.filter((w) => w.interactionType == "call" || w.interactionType == "callback")
-        // const context_menu = allEvents.filter((w) => w.interactionType == "show_context_menu" )
-
-        // context_menu.forEach((when:WhenDto) => {
-        //   try{
-        //     if (when.interactionType == "update") {
-        //       handleUpdate(when, event)
-        //     } else if (when.interactionType == "context") {
-        //       handleContext(when, event)
-        //     } else if (when.interactionType == "call" || when.interactionType == "callback") {
-        //       handleCallback(when, event)
-        //     }
-        //   }catch(error:any){
-        //     let frontendService = LocatorService.injector.get(DrawFrontendService)
-        //     frontendService.postMessage(error.message,"warning")
-        //   }
-        // })
+
 
         updates.forEach((when: WhenDto) => {
           try {

angular_frontend/src/app/child-bearer.service.ts

@@ -1,55 +1,61 @@
-import { ComponentRef, Injectable, ViewContainerRef } from "@angular/core";
+import { ComponentRef, Injectable, ViewContainerRef, ViewChild, ElementRef } from "@angular/core";
 import { ComponentCreationService } from "./component-creation.service";
 import { ElementDto } from "./types/json-response.dto";
 import { ElementLookupService } from "./element-lookup.service";
 import { AttributeHelperService } from "./attribute-helper.service";
+import { CallBackHelperService } from './callback-helper.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ChildBearerService {
 
-    constructor(private componentService: ComponentCreationService, private elementLookupService: ElementLookupService, private attributeService: AttributeHelperService) {}
+  @ViewChild("child", { static: false }) child!: ElementRef
 
-    bearChild(child : ViewContainerRef, item: ElementDto, childLayout : string): ComponentRef<any> | null {
-        let my_comp = this.componentService.componentCreation(child, item.type)
-
-        if (my_comp != null) {
-          my_comp.setInput("element",item)
-          my_comp.setInput("parentLayout", childLayout)
-          let html: HTMLElement = <HTMLElement>my_comp.location.nativeElement
-          html.id = item.id
+  constructor(private componentService: ComponentCreationService, private elementLookupService: ElementLookupService, private attributeService: AttributeHelperService, private callbackHelperService: CallBackHelperService) { }
 
-          this.elementLookupService.addElementTagHTML(item.id, html, item)
+  bearChild(child: ViewContainerRef, item: ElementDto, childLayout: string): ComponentRef<any> | null {
+    let my_comp = this.componentService.componentCreation(child, item.type)
 
-          this.setAllTagAttributes(html, item, childLayout)
-        }
+    if (my_comp != null) {
+      my_comp.setInput("element", item)
+      my_comp.setInput("parentLayout", childLayout)
+      let html: HTMLElement = <HTMLElement>my_comp.location.nativeElement
+      html.id = item.id
 
-        return my_comp
+      this.elementLookupService.addElementTagHTML(item.id, html, item)
+
+      this.setAllTagAttributes(html, item, childLayout)
     }
 
-    setAllTagAttributes(html:HTMLElement, item:ElementDto, childLayout:string) { 
-        if (item.type != "button") {
-            this.attributeService.setAbsoulteRelativePositions(childLayout, html, item)
-        }
-        this.setChildTagAttributes(html, item)
+    return my_comp
+  }
+
+  setAllTagAttributes(html: HTMLElement, item: ElementDto, childLayout: string) {
+    if (item.type != "button") {
+      this.attributeService.setAbsoulteRelativePositions(childLayout, html, item)
     }
+    this.setChildTagAttributes(html, item)
+  }
 
-    setChildTagAttributes(html:HTMLElement, item:ElementDto) {
-      //if (item.type != "button") {
-        this.attributeService.setAttributesDirectly(html, item.attributes)
-        this.attributeService.addGeneralAttributes(html, item.attributes)
+  setChildTagAttributes(html: HTMLElement, item: ElementDto) {
+    //if (item.type != "button") {
+    this.attributeService.setAttributesDirectly(html, item.attributes)
+    this.attributeService.addGeneralAttributes(html, item.attributes)
 
-        this.attributeService.addAttributes(html, item.attributes)
-        if (item.type == "container") {
-          this.attributeService.setChildLayout(html, item.attributes)
-          this.attributeService.setVisibility(html, item.attributes)
-          this.attributeService.addClasses(html, item.attributes, [], ["p-2"])
-        }
-
 
-      //}
+    this.attributeService.addAttributes(html, item.attributes)
+    if (item.type == "container") {
 
+      this.attributeService.setChildLayout(html, item.attributes)
+      this.attributeService.setVisibility(html, item.attributes)
+      this.attributeService.addClasses(html, item.attributes, [], ["p-2"])
+      this.callbackHelperService.setCallbacks(html, item.when)
     }
 
+
+    //}
+
+  }
+
 }

angular_frontend/src/app/collapse/collapse.component.html

@@ -0,0 +1,9 @@
+<div>
+	<button #toggleButton (click)="toggle()">
+	  <span #icon class="icon"></span>
+	  {{label}}
+	</button>
+	<div #collapseContent [ngbCollapse]="isCollapsed">
+	  <div #childContainer></div>
+	</div>
+  </div>