#117 device set tag edit functionallity

htl-leo-itp-2325-4-5BHITM · Oct 3, 2024 · 206935b · 206935b
1 parent 2001800
commit 206935b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties
@@ -3,7 +3,7 @@ quarkus.http.cors.origins=*
 quarkus.http.cors.methods=GET, POST, PUT, DELETE
 quarkus.http.cors.headers=Content-Type, Authorization
 
-quarkus.hibernate-orm.database.generation=drop-and-create
+quarkus.hibernate-orm.database.generation=update
 quarkus.hibernate-orm.log.sql=false
 #added dont-import.qsl because quarkus will crash wehen fed a completly commented out sql script.. or maybe just our sql script
 quarkus.hibernate-orm.sql-load-script=import.sql

diff --git a/frontend/web/src/components/app/edit/deviceSetEditEntry.component.ts b/frontend/web/src/components/app/edit/deviceSetEditEntry.component.ts
@@ -9,7 +9,7 @@ import {EditPageEnum, ObservedProperty} from "../../../model"
 import {AppState} from "../../../AppState"
 import {model} from "../../../index"
 import PopupEngine from "../../../util/PopupEngine"
-import DeviceSetService, {DeviceSet} from "../../../service/deviceSet.service"
+import DeviceSetService, {DeviceSet, DeviceSetCreateDTO} from "../../../service/deviceSet.service"
 
 @customElement('cc-device-set-edit-entry')
 export class DeviceSetEditEntryComponent extends LitElement {
@@ -37,15 +37,24 @@ export class DeviceSetEditEntryComponent extends LitElement {
             <div class="deviceSetInfo">
                 ${
                     this.deviceSet.device_types?.map((deviceType, index) => {
-                        return html`<span>${deviceType.name} ${this.deviceSet.device_types.length - 1 <= index ? '' : ','}</span>`
+                        return html`<span>${deviceType.name} ${this.deviceSet.device_types.length - 1 <= index ? '' : ' • '}</span>`
                     })
                 }
             </div>
             
             <div class="edit">
                 <cc-button type="text" color="${ColorEnum.GRAY}" size="${SizeEnum.SMALL}"  @click="${(event) => {
+                    let convertedDeviceSet : DeviceSetCreateDTO = {
+                        id: this.deviceSet.id,
+                        name: this.deviceSet.name,
+                        description: this.deviceSet.description,
+                        deviceTypeIds: this.deviceSet.device_types.map(deviceType => deviceType.type_id) || [],
+                        status: this.deviceSet.status
+                    } as DeviceSetCreateDTO
+                    
+                    
                     //UrlHandler.updateUrl('/app/edit/device?did=' + this.device.device_id)
-                    model.appState.value.openOverlay(html`<cc-edit-device-set-modal .element="${this.deviceSet}" .isEditMode="${true}"></cc-edit-device-set-modal>`, () => {})
+                    model.appState.value.openOverlay(html`<cc-edit-device-set-modal .element="${convertedDeviceSet}" .isEditMode="${true}"></cc-edit-device-set-modal>`, () => {})
                     event.stopPropagation()
                 }}">
                     <div slot="left" class="icon accent">

diff --git a/frontend/web/src/components/app/edit/editDeviceSetModal.component.ts b/frontend/web/src/components/app/edit/editDeviceSetModal.component.ts
@@ -25,7 +25,7 @@ import {ChipType} from "../../basic/chip.component";
 import DeviceService, {Device, DeviceStatus} from "../../../service/device.service";
 import {unsafeSVG} from "lit/directives/unsafe-svg.js";
 import {icon} from "@fortawesome/fontawesome-svg-core";
-import {faTag} from "@fortawesome/free-solid-svg-icons";
+import {faTag, faTrash} from "@fortawesome/free-solid-svg-icons";
 import PopupEngine from "../../../util/PopupEngine"
 import UrlHandler from "../../../util/UrlHandler"
 import DeviceSetService, {DeviceSetCreateDTO, DeviceSet} from "../../../service/deviceSet.service"
@@ -127,7 +127,7 @@ export class EditDeviceSetModalComponent extends LitElement {
                                       .onInput="${text => {
                         this.element.description = text;
                         this.updateDeviceSet(this.element);
-                    }}" maxLength="30"></cc-input>
+                    }}"></cc-input>
                 </div>
                 <div class="separator">
                     <cc-line></cc-line>
@@ -162,10 +162,17 @@ export class EditDeviceSetModalComponent extends LitElement {
                     ></cc-autocomplete>
 
                     <div class="entries">
-                        <div class="entry">
-                            <p>${this.deviceTypes.map(deviceType => html`${deviceType.name}`)}</p>
-
-                        </div>
+                        ${this.deviceTypes.map(deviceType => html`
+                            <div>
+                                <p>${deviceType.name}</p>
+                                <icon-cta @click="${() => {
+                                        this.deviceTypes = this.deviceTypes.filter(dt => dt.type_id !== deviceType.type_id);
+                                        this.element.deviceTypeIds = this.element.deviceTypeIds.filter(id => id !== deviceType.type_id);
+                                        this.updateDeviceSet(this.element);
+                                }}">
+                                    ${unsafeSVG(icon(faTrash).html[0])}</icon-cta>
+                            </div>`
+                        )}
                     </div>
                 </div>
             `;

diff --git a/frontend/web/styles/components/app/edit/editModal.styles.scss b/frontend/web/styles/components/app/edit/editModal.styles.scss
@@ -80,4 +80,20 @@ div.selectType{
       }
     }
   }
+}
+
+div.entries{
+  display: flex;
+  flex-direction: column;
+
+  div{
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid $gray500;
+    padding: .5rem;
+
+    icon-cta svg *{
+      fill: $gray700;
+    }
+  }
 }