From 17e0912c70958025585523fa7e88fb77896ff9fe Mon Sep 17 00:00:00 2001
From: Max <walzen665@web.de>
Date: Sun, 16 Jun 2024 21:39:55 +0200
Subject: [PATCH] Added sample object creation UI

---
 src/main/webui/angular.json                   |  3 ++
 src/main/webui/src/app/app.component.html     | 12 ++---
 src/main/webui/src/app/app.component.spec.ts  | 24 ---------
 src/main/webui/src/app/app.component.ts       | 27 ++--------
 .../app/create/object/object.component.css    |  0
 .../app/create/object/object.component.html   | 16 ++++++
 .../create/object/object.component.spec.ts    | 23 ++++++++
 .../src/app/create/object/object.component.ts | 52 +++++++++++++++++++
 .../objecttype/objecttype.component.css       |  0
 .../objecttype/objecttype.component.html      |  4 ++
 .../objecttype/objecttype.component.spec.ts   | 23 ++++++++
 .../create/objecttype/objecttype.component.ts | 34 ++++++++++++
 12 files changed, 161 insertions(+), 57 deletions(-)
 create mode 100644 src/main/webui/src/app/create/object/object.component.css
 create mode 100644 src/main/webui/src/app/create/object/object.component.html
 create mode 100644 src/main/webui/src/app/create/object/object.component.spec.ts
 create mode 100644 src/main/webui/src/app/create/object/object.component.ts
 create mode 100644 src/main/webui/src/app/create/objecttype/objecttype.component.css
 create mode 100644 src/main/webui/src/app/create/objecttype/objecttype.component.html
 create mode 100644 src/main/webui/src/app/create/objecttype/objecttype.component.spec.ts
 create mode 100644 src/main/webui/src/app/create/objecttype/objecttype.component.ts

diff --git a/src/main/webui/angular.json b/src/main/webui/angular.json
index a0fc124..65f995e 100644
--- a/src/main/webui/angular.json
+++ b/src/main/webui/angular.json
@@ -92,5 +92,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/src/main/webui/src/app/app.component.html b/src/main/webui/src/app/app.component.html
index 24b52c8..ba27a25 100644
--- a/src/main/webui/src/app/app.component.html
+++ b/src/main/webui/src/app/app.component.html
@@ -1,12 +1,6 @@
 <h1>Sample object control panel</h1>
 <h3>Create object types</h3>
-<form>
-  <input type="text" pInputText />
-  <button pButton type="submit">Create</button>
-</form>
+<app-objecttype></app-objecttype>
 <h3>Create object</h3>
-<form>
-  <input type="text" pInputText />
-  <p-dropdown [options]="cities" [(ngModel)]="selectedCity1" placeholder="Select a City" optionLabel="name"></p-dropdown>
-  <button pButton type="submit">Create</button>
-</form>
+<app-object></app-object>
+
diff --git a/src/main/webui/src/app/app.component.spec.ts b/src/main/webui/src/app/app.component.spec.ts
index 61f3b32..4a2a4e9 100644
--- a/src/main/webui/src/app/app.component.spec.ts
+++ b/src/main/webui/src/app/app.component.spec.ts
@@ -2,28 +2,4 @@ import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have the 'webui' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('webui');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, webui');
-  });
 });
diff --git a/src/main/webui/src/app/app.component.ts b/src/main/webui/src/app/app.component.ts
index 604c5a8..bb914a1 100644
--- a/src/main/webui/src/app/app.component.ts
+++ b/src/main/webui/src/app/app.component.ts
@@ -1,38 +1,17 @@
 import {Component} from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { ButtonModule } from 'primeng/button';
-import {PaginatorModule} from "primeng/paginator";
-import { InputTextModule } from 'primeng/inputtext';
-import { DropdownModule } from 'primeng/dropdown';
-
-
-interface City {
-  name: string,
-  code: string
-}
+import {ObjecttypeComponent} from "./create/objecttype/objecttype.component";
+import {ObjectComponent} from "./create/object/object.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, ButtonModule, PaginatorModule, InputTextModule, DropdownModule],
+  imports: [RouterOutlet, ObjecttypeComponent, ObjectComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 
 
 export class AppComponent {
-  cities: City[];
 
-  selectedCity1: City;
-
-  constructor() {
-    this.cities = [
-      {name: 'New York', code: 'NY'},
-      {name: 'Rome', code: 'RM'},
-      {name: 'London', code: 'LDN'},
-      {name: 'Istanbul', code: 'IST'},
-      {name: 'Paris', code: 'PRS'}
-    ];
-    this.selectedCity1 = this.cities[0]
-  }
 }
diff --git a/src/main/webui/src/app/create/object/object.component.css b/src/main/webui/src/app/create/object/object.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webui/src/app/create/object/object.component.html b/src/main/webui/src/app/create/object/object.component.html
new file mode 100644
index 0000000..3859dce
--- /dev/null
+++ b/src/main/webui/src/app/create/object/object.component.html
@@ -0,0 +1,16 @@
+
+<div>
+  <form>
+    <input type="text" pInputText />
+    <p-dropdown [options]="objectTypes" [(ngModel)]="selectedObjectType" placeholder="Select a object type" name="objectTypeSelect" [editable]="true"></p-dropdown>
+  </form>
+  <h4>Object attributes</h4>
+  <div *ngFor="let objectAttribute of objectAttributes">
+      <input type="text" pInputText [(ngModel)]="objectAttribute.name" name="attributename" placeholder="Object attribute name"/>
+      <p-dropdown [options]="valueTypes" [(ngModel)]="objectAttribute.type" placeholder="Select a object type" name="objectAttributeTyoeSelect" ></p-dropdown>
+      <input type="text" pInputText [(ngModel)]="objectAttribute.value" placeholder="Attribute type"/>
+  </div>
+  <button pButton (click)="createAttribute()">Add</button>
+</div>
+<br>
+<button pButton type="submit" (click)="createNewObject()">Create Object</button>
diff --git a/src/main/webui/src/app/create/object/object.component.spec.ts b/src/main/webui/src/app/create/object/object.component.spec.ts
new file mode 100644
index 0000000..331e141
--- /dev/null
+++ b/src/main/webui/src/app/create/object/object.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ObjectComponent } from './object.component';
+
+describe('ObjectComponent', () => {
+  let component: ObjectComponent;
+  let fixture: ComponentFixture<ObjectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ObjectComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ObjectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/main/webui/src/app/create/object/object.component.ts b/src/main/webui/src/app/create/object/object.component.ts
new file mode 100644
index 0000000..ff9901d
--- /dev/null
+++ b/src/main/webui/src/app/create/object/object.component.ts
@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import {ButtonDirective} from "primeng/button";
+import {DropdownModule} from "primeng/dropdown";
+import {FormsModule} from "@angular/forms";
+import {InputTextModule} from "primeng/inputtext";
+import {PaginatorModule} from "primeng/paginator";
+import {SelectItem} from "primeng/api";
+import {NgForOf} from "@angular/common";
+
+interface ObjectAttribute {
+  name: string;
+  type: string; // This should be an enum
+  value: string;
+}
+
+@Component({
+  selector: 'app-object',
+  standalone: true,
+  imports: [
+    ButtonDirective,
+    DropdownModule,
+    FormsModule,
+    InputTextModule,
+    PaginatorModule,
+    NgForOf
+  ],
+  templateUrl: './object.component.html',
+  styleUrl: './object.component.css'
+})
+export class ObjectComponent {
+  objectTypes!:SelectItem[];
+  selectedObjectType!:SelectItem;
+  objectAttributes!:ObjectAttribute[];
+  valueTypes!:SelectItem[];
+
+  constructor() {
+    this.objectTypes = [];
+    this.objectTypes.push({label: 'Example', value: 'Example'}); // Note that the objectTypes array must be initialized with at least one element for the dropdown to work
+    this.valueTypes = [{label: 'String', value: 'String'}, {label: 'Number', value: 'Number'}, {label: 'Boolean', value: 'Boolean'}];
+  }
+
+  createNewObject() {
+    console.log('selectedObjectType', this.selectedObjectType);
+  }
+
+  createAttribute() {
+    if(this.objectAttributes === undefined) {
+      this.objectAttributes = [];
+    }
+    this.objectAttributes.push({name: '', type: '', value: ''});
+  }
+}
diff --git a/src/main/webui/src/app/create/objecttype/objecttype.component.css b/src/main/webui/src/app/create/objecttype/objecttype.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webui/src/app/create/objecttype/objecttype.component.html b/src/main/webui/src/app/create/objecttype/objecttype.component.html
new file mode 100644
index 0000000..0d3b8b3
--- /dev/null
+++ b/src/main/webui/src/app/create/objecttype/objecttype.component.html
@@ -0,0 +1,4 @@
+<form>
+  <input type="text" pInputText [(ngModel)]="newObjectType" name="newObjectType"/>
+  <button pButton (click)="createNewObjectType()">Create</button>
+</form>
diff --git a/src/main/webui/src/app/create/objecttype/objecttype.component.spec.ts b/src/main/webui/src/app/create/objecttype/objecttype.component.spec.ts
new file mode 100644
index 0000000..30ffca2
--- /dev/null
+++ b/src/main/webui/src/app/create/objecttype/objecttype.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ObjecttypeComponent } from './objecttype.component';
+
+describe('ObjecttypeComponent', () => {
+  let component: ObjecttypeComponent;
+  let fixture: ComponentFixture<ObjecttypeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ObjecttypeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ObjecttypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/main/webui/src/app/create/objecttype/objecttype.component.ts b/src/main/webui/src/app/create/objecttype/objecttype.component.ts
new file mode 100644
index 0000000..3fafb63
--- /dev/null
+++ b/src/main/webui/src/app/create/objecttype/objecttype.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import {ButtonDirective} from "primeng/button";
+import {FormsModule} from "@angular/forms";
+import {InputTextModule} from "primeng/inputtext";
+import {PaginatorModule} from "primeng/paginator";
+import {SelectItem} from "primeng/api";
+
+
+@Component({
+  selector: 'app-objecttype',
+  standalone: true,
+    imports: [
+        ButtonDirective,
+        FormsModule,
+        InputTextModule,
+        PaginatorModule
+    ],
+  templateUrl: './objecttype.component.html',
+  styleUrl: './objecttype.component.css'
+})
+export class ObjecttypeComponent {
+  objectTypes!:SelectItem[];
+  newObjectType:string = '';
+
+
+  createNewObjectType() {
+    if(this.objectTypes === undefined) {
+      this.objectTypes = [];
+    }
+    this.objectTypes.push({label: this.newObjectType, value: this.newObjectType});
+    console.log('objectTypes', this.objectTypes)
+    this.newObjectType = '';
+  }
+}