31 model name is not correctly saved (#32)

* fixed callback value for change event * Readme extended with debug stuff * linting fixes * fixed callback value for change event * linter fixes * linter fixes * Update README.md added a remark for the dependency on koi-api --------- Co-authored-by: Johannes Richter <hannesrichter@users.noreply.github.com>
koi-learning · Feb 20, 2023 · cdb05b5 · cdb05b5
1 parent 25b4a83
commit cdb05b5
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -3,3 +3,20 @@
 The *KOI-System* is framework for lifecycle-management of machine learning solutions.
 As such it allows the user to create, train, and deploy ML-solutions.
 "*KOI*" is an abbreviation of the german name "Kognitive Objekt-orientierte Intelligenz", which translates to "cognitive object-oriented intelligence".
+
+# Debug requirements
+To run the application in debug mode, you need to install the following tools:
+- Install: [Node.js](https://nodejs.org/en/) (<= 16.19.0)
+
+In the koi-pwa directory, you can run:
+- npm start
+
+Now by default the PWA is accessible at [http://localhost:8080](http://localhost:8080)
+
+The PWA needs an [KOI-Api](https://github.com/koi-learning/koi-api) instance to run.
+Connect your local or remote API by setting the ```apiBase``` variable in your browsers local storage.
+
+For Chrome do the following:
+- open the development console
+- Application -> LocalStorage -> apiBase
+- enter the full url to the service endpoint
diff --git a/src/components/accessCards.ts b/src/components/accessCards.ts
@@ -43,7 +43,7 @@ import { CRUDEntityState } from "@src/store/crud";
 
 @customElement("access-card")
 export class AccessCard extends LitElement {
-  @property() role: GeneralRole | ModelRole | InstanceRole; // Todo Unify Type
+  @property() aRole: GeneralRole | ModelRole | InstanceRole; // Todo Unify Type
   @property() users: UserEntityState;
   @property() access:
     | EntityState<GeneralAccess>
@@ -61,7 +61,7 @@ export class AccessCard extends LitElement {
     if (
       this.users &&
       this.access &&
-      (changedProperties.has("role") ||
+      (changedProperties.has("aRole") ||
         changedProperties.has("users") ||
         changedProperties.has("access"))
     ) {
@@ -71,7 +71,7 @@ export class AccessCard extends LitElement {
             this.access.ids.find(
               (id) =>
                 this.access.entities[id].user_uuid == user &&
-                this.access.entities[id].role_uuid == this.role.role_uuid
+                this.access.entities[id].role_uuid == this.aRole.role_uuid
             ) != null
         )
         .map((id) => this.users.entities[id]);
@@ -81,7 +81,7 @@ export class AccessCard extends LitElement {
             this.access.ids.find(
               (id) =>
                 this.access.entities[id].user_uuid == user &&
-                this.access.entities[id].role_uuid == this.role.role_uuid
+                this.access.entities[id].role_uuid == this.aRole.role_uuid
             ) == null
         )
         .map((id) => this.users.entities[id]);
@@ -135,7 +135,7 @@ export class AccessCard extends LitElement {
         <ul class="card-content">
           <li class="list-item header">
             <mwc-icon class="inverted">people</mwc-icon>
-            <span>${this.role.role_name}</span>
+            <span>${this.aRole.role_name}</span>
           </li>
           <li class="divider"></li>
           <li class="list-item add-section">
@@ -225,7 +225,7 @@ export class AccessCard extends LitElement {
       }
 
       .header > span::after {
-        content: " role";
+        content: " Role";
       }
 
       .list-item > mwc-icon-button {
@@ -264,7 +264,7 @@ export abstract class AccessCards extends connect(store)(LitElement) {
         this.roles,
         (role) =>
           html`<access-card
-            .role=${role}
+            .aRole=${role}
             .access=${this.access}
             .users=${this.users}
             @addAccess=${(e) => this.addAccess(role, e.detail.user)}

diff --git a/src/components/instance.ts b/src/components/instance.ts
@@ -132,16 +132,20 @@ export class InstanceDetails extends LitElement {
           label="Name"
           value=${this.instance.instance_name}
           @change=${(e) =>
-            this.updateInstance({ instance_name: e.path[0].value })}
-        ></mwc-textfield>
+            this.updateInstance({ instance_name: e.composedPath()[0].value })}
+        >
+        </mwc-textfield>
         <mwc-textarea
           label="Description"
           charCounter
           maxLength="500"
           value=${this.instance.instance_description}
           @change=${(e) =>
-            this.updateInstance({ instance_description: e.path[0].value })}
-        ></mwc-textarea>
+            this.updateInstance({
+              instance_description: e.composedPath()[0].value,
+            })}
+        >
+        </mwc-textarea>
       `;
     } else {
       return html`<div>

diff --git a/src/components/model.ts b/src/components/model.ts
@@ -100,16 +100,19 @@ export class ModelDetails extends LitElement {
         <mwc-textfield
           label="Name"
           value=${this.model.model_name}
-          @change=${(e) => this.updateModel({ model_name: e.path[0].value })}
-        ></mwc-textfield>
+          @change=${(e) =>
+            this.updateModel({ model_name: e.composedPath()[0].value })}
+        >
+        </mwc-textfield>
         <mwc-textarea
           label="Description"
           charCounter
           maxLength="500"
           value=${this.model.model_description}
           @change=${(e) =>
-            this.updateModel({ model_description: e.path[0].value })}
-        ></mwc-textarea>
+            this.updateModel({ model_description: e.composedPath()[0].value })}
+        >
+        </mwc-textarea>
       `;
     } else {
       return html`<div>

diff --git a/src/components/role.ts b/src/components/role.ts
@@ -38,7 +38,7 @@ import { CRUDEntityState } from "@src/store/crud";
 
 @customElement("role-card")
 export class GeneralAccessCards extends LitElement {
-  @property() role: AbstractRole;
+  @property() aRole: AbstractRole;
 
   static get styles() {
     return css`
@@ -75,7 +75,7 @@ export class GeneralAccessCards extends LitElement {
       page: true,
       loading: true,
     };
-    return Object.keys(this.role).filter((key) => !abstractKeys[key]);
+    return Object.keys(this.aRole).filter((key) => !abstractKeys[key]);
   }
 
   renderOption = (option: string) => {
@@ -88,7 +88,7 @@ export class GeneralAccessCards extends LitElement {
     };
     return html`
       <mwc-check-list-item
-        ?selected=${this.role[option]}
+        ?selected=${this.aRole[option]}
         @request-selected=${changeOption}
       >
         ${option}
@@ -103,13 +103,15 @@ export class GeneralAccessCards extends LitElement {
     };
     const changeName = (e) => {
       this.dispatchEvent(
-        new CustomEvent("change", { detail: { role_name: e.path[0].value } })
+        new CustomEvent("change", {
+          detail: { role_name: e.composedPath()[0].value },
+        })
       );
     };
     const changeDescription = (e) => {
       this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { role_description: e.path[0].value },
+          detail: { role_description: e.composedPath()[0].value },
         })
       );
     };
@@ -118,15 +120,15 @@ export class GeneralAccessCards extends LitElement {
         <div class="card-content">
           <mwc-textfield
             label="Name"
-            value=${this.role.role_name}
+            value=${this.aRole.role_name}
             @change=${changeName}
           >
           </mwc-textfield>
           <mwc-textarea
             label="Description"
             charCounter
             maxLength="500"
-            value=${this.role.role_description}
+            value=${this.aRole.role_description}
             @change=${changeDescription}
           ></mwc-textarea>
           <mwc-list multi> ${options.map(this.renderOption)} </mwc-list>
@@ -150,7 +152,7 @@ abstract class RoleCards extends connect(store)(LitElement) {
         this.roles,
         (role) =>
           html`<role-card
-            .role=${role}
+            .aRole=${role}
             @change=${(e) =>
               store.dispatch(this.changeRole({ id: role, data: e.detail }))}
             @del=${() => store.dispatch(this.delRole({ id: role }))}

diff --git a/src/pages/users.ts b/src/pages/users.ts
@@ -112,7 +112,7 @@ export class UsersPage extends BasePage {
           <mwc-textfield
             label="Name"
             value=${user.user_name}
-            @change=${(e) => changeName(e.path[0].value)}
+            @change=${(e) => changeName(e.composedPath()[0].value)}
           >
           </mwc-textfield>
           <mwc-button