@things-factory/kpi 9.0.31 → 9.0.32

package/client/pages/kpi/kpi-overview.ts

@@ -8,20 +8,18 @@ import gql from 'graphql-tag'
 
 const GET_KPI_OVERVIEW = gql`
   query {
-    kpiCategories {
-      items {
+    kpiCategories: kpisLevel1 {
+      id
+      name
+      description
+      active
+      kpis: children {
         id
         name
         description
+        formula
         active
-        kpis {
-          id
-          name
-          description
-          formula
-          active
-          grades
-        }
+        grades
       }
     }
   }
@@ -184,7 +182,7 @@ export class KpiOverview extends PageView {
   async firstUpdated() {
     try {
       const { data } = await client.query({ query: GET_KPI_OVERVIEW })
-      this.kpiCategories = data.kpiCategories.items
+      this.kpiCategories = data.kpiCategories
       this.loading = false
     } catch (e) {
       this.error = e instanceof Error ? e : new Error(String(e))

package/client/pages/kpi/kpi-tree-page.ts

@@ -0,0 +1,409 @@
+import '@operato/data-tree'
+import '@operato/context/ox-context-page-toolbar.js'
+import './kpi-view'
+
+import gql from 'graphql-tag'
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { CustomAlert, PageView, store } from '@operato/shell'
+
+import { KpiImporter } from './kpi-importer'
+import { KpiView } from './kpi-view'
+
+const SubKpiFragment = gql`
+  fragment SubKpiFragment on Kpi {
+    id
+    name
+    description
+    active
+    formula
+    periodType
+    scoreFormula
+    grades
+    vizType
+    vizMeta
+    weight
+    schedule
+    scheduleId
+    timezone
+    version
+    isLeaf
+    parent {
+      id
+      name
+    }
+    updater {
+      id
+      name
+    }
+    updatedAt
+    creator {
+      id
+      name
+    }
+    createdAt
+  }
+`
+
+@customElement('kpi-tree-page')
+export class KpiTreePage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+  static styles = [
+    CommonHeaderStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        overflow: auto;
+      }
+
+      content {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+      }
+
+      div[editor] {
+        width: 400px;
+        display: flex;
+        flex-direction: column;
+        border-left: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      ox-tree-horizontal {
+        flex: 1;
+        overflow: auto;
+      }
+
+      kpi-view {
+        flex: 1;
+        padding: var(--spacing-medium);
+        background-color: var(--md-sys-color-surface-variant);
+        overflow: auto;
+      }
+
+      .footer {
+        display: flex;
+        gap: var(--spacing-small);
+        padding: var(--spacing-medium);
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+        background-color: var(--md-sys-color-surface);
+      }
+
+      .footer button {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+        padding: var(--spacing-small) var(--spacing-medium);
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--md-sys-shape-corner-small);
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        cursor: pointer;
+      }
+
+      .footer button:hover {
+        background-color: var(--md-sys-color-secondary-container);
+      }
+
+      .footer button[disabled] {
+        color: var(--md-sys-color-surface-dim);
+        background-color: transparent;
+        cursor: not-allowed;
+      }
+
+      .footer button[done] {
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+      }
+
+      .footer div[filler] {
+        flex: 1;
+      }
+    `
+  ]
+
+  static get scopedElements() {
+    return {
+      'kpi-importer': KpiImporter
+    }
+  }
+
+  @state() root?: any
+  @state() selected?: any
+  @state() kpi?: any
+  @state() modified: boolean = false
+  @state() appendable: boolean = false
+
+  @query('kpi-view') kpiView!: KpiView
+
+  get context() {
+    return {
+      title: i18next.t('title.kpi tree'),
+      help: 'kpi/kpi',
+      actions: [
+        {
+          icon: 'delete',
+          title: i18next.t('button.delete'),
+          action: this.delete.bind(this),
+          emphasis: {
+            danger: true
+          }
+        }
+      ].filter(Boolean),
+      exportable: {
+        name: i18next.t('title.kpi tree'),
+        data: this.exportHandler.bind(this)
+      },
+      importable: {
+        handler: this.importHandler.bind(this)
+      },
+      toolbar: false
+    }
+  }
+
+  render() {
+    return html`
+      <div class="header">
+        <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
+      </div>
+
+      <content>
+        <ox-tree-horizontal
+          .data=${this.root}
+          .selected=${this.selected}
+          @select=${this.onSelect.bind(this)}
+          id-property="name"
+          label-property=""
+          description-property="description"
+        ></ox-tree-horizontal>
+
+        <div editor>
+          <kpi-view
+            .kpi=${this.kpi}
+            @property-change=${(e: CustomEvent) => {
+              const { name } = e.detail || {}
+              this.modified = true
+              this.appendable = name && name !== this.selected?.name
+            }}
+          ></kpi-view>
+          <div class="footer">
+            <button @click=${this.reset.bind(this)}>
+              <md-icon>restart_alt</md-icon>
+              ${i18next.t('button.reset')}
+            </button>
+            <div filler></div>
+            <button @click=${this.create.bind(this)} ?disabled=${!this.appendable}>
+              <md-icon>add</md-icon>
+              ${i18next.t('button.add')}
+            </button>
+            <button @click=${this.save.bind(this)} ?disabled=${!this.modified} done>
+              <md-icon>save</md-icon>
+              ${i18next.t('button.save')}
+            </button>
+          </div>
+        </div>
+      </content>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('selected')) {
+      this.modified = false
+      this.kpi = { ...this.selected }
+    }
+  }
+
+  onSelect(e: CustomEvent) {
+    this.selected = e.detail
+    this.updateContext()
+  }
+
+  reset() {
+    if (this.kpiView) {
+      this.kpiView.kpi = {}
+    }
+  }
+
+  async create() {
+    const { id: parentId } = this.selected || {}
+    const { name, description, formula, active, isLeaf, weight } = this.kpi || {}
+
+    const kpi = {
+      name,
+      description,
+      formula,
+      active: active !== false,
+      isLeaf: isLeaf !== false,
+      weight: weight || 1
+    } as any
+
+    if (parentId) {
+      kpi.parent = { id: parentId }
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($kpi: NewKpi!) {
+          createKpi(kpi: $kpi) {
+            ...SubKpiFragment
+          }
+        }
+        ${SubKpiFragment}
+      `,
+      variables: {
+        kpi
+      }
+    })
+
+    this.selected = response.data.createKpi
+    this.updateContext()
+
+    await this.fetch()
+  }
+
+  async save() {
+    const { id, name, description, formula, active, isLeaf, weight } = this.kpi || {}
+
+    if (!id) {
+      await CustomAlert({
+        type: 'warning',
+        title: i18next.t('message.kpi_not_selected'),
+        text: i18next.t('message.select_kpi_first'),
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
+      return
+    }
+
+    const patch = {
+      name,
+      description,
+      formula,
+      active,
+      isLeaf,
+      weight
+    } as any
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!, $patch: KpiPatch!) {
+          updateKpi(id: $id, patch: $patch) {
+            ...SubKpiFragment
+          }
+        }
+        ${SubKpiFragment}
+      `,
+      variables: {
+        id,
+        patch
+      }
+    })
+
+    this.selected = response.data.updateKpi
+    this.fetch()
+  }
+
+  async delete() {
+    if (!this.selected) {
+      await CustomAlert({
+        type: 'warning',
+        title: i18next.t('message.kpi_not_selected'),
+        text: i18next.t('message.select_kpi_first'),
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
+      return
+    }
+
+    const children = this.selected?.children
+    if (children && children.length > 0) {
+      await CustomAlert({
+        type: 'warning',
+        title: i18next.t('message.kpis_with_children_cannot_be_deleted'),
+        text: i18next.t('message.kpi_having_children_cannot_be_deleted'),
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
+      return
+    }
+
+    if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+      const { id } = this.selected || {}
+
+      await client.mutate({
+        mutation: gql`
+          mutation ($ids: [String!]!) {
+            deleteKpis(ids: $ids)
+          }
+        `,
+        variables: {
+          ids: [id]
+        }
+      })
+
+      this.selected = {}
+      this.updateContext()
+      await this.fetch()
+    }
+  }
+
+  async pageInitialized(lifecycle: any) {
+    this.fetch()
+  }
+
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+      // do something here when this page just became as active
+    }
+  }
+
+  async fetch() {
+    const response = await client.query({
+      query: gql`
+        query {
+          kpiTree {
+            ...SubKpiFragment
+            children {
+              ...SubKpiFragment
+              children {
+                ...SubKpiFragment
+                children {
+                  ...SubKpiFragment
+                  children {
+                    ...SubKpiFragment
+                    children {
+                      ...SubKpiFragment
+                      children {
+                        ...SubKpiFragment
+                        children {
+                          ...SubKpiFragment
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        ${SubKpiFragment}
+      `
+    })
+
+    const records = response.data.kpiTree || []
+    /* 다중루트를 지원하기 위해서 this.root 에 모든 루트를 저장하라. */
+    this.root = records
+  }
+
+  async exportHandler() {
+    // Export functionality can be implemented here
+  }
+
+  async importHandler(records: any[]) {
+    // Import functionality can be implemented here
+  }
+}

package/client/pages/kpi/kpi-view.ts

@@ -0,0 +1,187 @@
+import '@material/web/textfield/outlined-text-field.js'
+import '@material/web/textfield/filled-text-field.js'
+import '@material/web/checkbox/checkbox.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { i18next, localize } from '@operato/i18n'
+
+@customElement('kpi-view')
+export class KpiView extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium);
+        padding: var(--spacing-medium);
+      }
+
+      .form-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small);
+      }
+
+      .form-row {
+        display: flex;
+        gap: var(--spacing-medium);
+        align-items: center;
+      }
+
+      .form-row > * {
+        flex: 1;
+      }
+
+      label {
+        font-weight: 500;
+        color: var(--md-sys-color-on-surface);
+        margin-bottom: var(--spacing-small);
+      }
+
+      md-outlined-text-field,
+      md-filled-text-field,
+      md-outlined-select {
+        width: 100%;
+      }
+
+      .checkbox-group {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+      }
+
+      .section-title {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: var(--md-sys-color-primary);
+        margin-top: var(--spacing-large);
+        margin-bottom: var(--spacing-medium);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        padding-bottom: var(--spacing-small);
+      }
+
+      textarea {
+        width: 100%;
+        min-height: 100px;
+        padding: var(--spacing-small);
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--md-sys-shape-corner-small);
+        font-family: monospace;
+        resize: vertical;
+      }
+    `
+  ]
+
+  @property({ type: Object }) kpi: any = {}
+
+  render() {
+    return html`
+      <div class="section-title">${i18next.t('label.basic_information')}</div>
+      
+      <div class="form-group">
+        <label>Name *</label>
+        <md-outlined-text-field
+          .value=${this.kpi?.name || ''}
+          @input=${(e: any) => this.updateProperty('name', e.target.value)}
+          required
+        ></md-outlined-text-field>
+      </div>
+
+      <div class="form-group">
+        <label>Description</label>
+        <md-outlined-text-field
+          .value=${this.kpi?.description || ''}
+          @input=${(e: any) => this.updateProperty('description', e.target.value)}
+          type="textarea"
+          rows="3"
+        ></md-outlined-text-field>
+      </div>
+
+      <div class="form-group">
+        <label>Weight</label>
+        <md-outlined-text-field
+          type="number"
+          .value=${this.kpi?.weight?.toString() || '1'}
+          @input=${(e: any) => this.updateProperty('weight', parseFloat(e.target.value) || 1)}
+          min="0"
+          step="0.1"
+        ></md-outlined-text-field>
+      </div>
+
+      <div class="form-row">
+        <div class="checkbox-group">
+          <md-checkbox
+            ?checked=${this.kpi?.active !== false}
+            @change=${(e: any) => this.updateProperty('active', e.target.checked)}
+          ></md-checkbox>
+          <label>Active</label>
+        </div>
+
+        <div class="checkbox-group">
+          <md-checkbox
+            ?checked=${this.kpi?.isLeaf !== false}
+            @change=${(e: any) => this.updateProperty('isLeaf', e.target.checked)}
+          ></md-checkbox>
+          <label>${i18next.t('label.is_leaf_node')}</label>
+        </div>
+      </div>
+
+      <div class="section-title">${i18next.t('label.formula_calculation')}</div>
+
+      <div class="form-group">
+        <label>${i18next.t('label.kpi_formula')}</label>
+        <textarea
+          .value=${this.kpi?.formula || ''}
+          @input=${(e: any) => this.updateProperty('formula', e.target.value)}
+          placeholder="${i18next.t('placeholder.enter_formula')}"
+        ></textarea>
+      </div>
+
+      <div class="form-group">
+        <label>${i18next.t('label.score_formula')}</label>
+        <textarea
+          .value=${this.kpi?.scoreFormula || ''}
+          @input=${(e: any) => this.updateProperty('scoreFormula', e.target.value)}
+          placeholder="${i18next.t('placeholder.enter_score_formula')}"
+        ></textarea>
+      </div>
+
+      <div class="section-title">Schedule</div>
+
+      <div class="form-group">
+        <label>Cron Schedule</label>
+        <md-outlined-text-field
+          .value=${this.kpi?.schedule || ''}
+          @input=${(e: any) => this.updateProperty('schedule', e.target.value)}
+          placeholder="${i18next.t('placeholder.cron_schedule')}"
+        ></md-outlined-text-field>
+      </div>
+
+      <div class="form-group">
+        <label>Timezone</label>
+        <md-outlined-text-field
+          .value=${this.kpi?.timezone || ''}
+          @input=${(e: any) => this.updateProperty('timezone', e.target.value)}
+          placeholder="${i18next.t('placeholder.timezone')}"
+        ></md-outlined-text-field>
+      </div>
+    `
+  }
+
+  updateProperty(property: string, value: any) {
+    this.kpi = {
+      ...this.kpi,
+      [property]: value
+    }
+
+    this.dispatchEvent(new CustomEvent('property-change', {
+      detail: this.kpi,
+      bubbles: true,
+      composed: true
+    }))
+
+    this.requestUpdate()
+  }
+
+}

package/client/pages/kpi-dashboard/cards/kpi-level1-card.ts

@@ -149,7 +149,7 @@ export class KpiLevel1Card extends LitElement {
                   name
                   targetValue
                   unit
-                  category {
+                  category: parent {
                     id
                     name
                   }

package/client/pages/kpi-dashboard/cards/kpi-level2-comparison.ts

@@ -134,7 +134,7 @@ export class KpiLevel2Comparison extends LitElement {
                   name
                   targetValue
                   unit
-                  category {
+                  category: parent {
                     id
                     name
                   }

package/client/pages/kpi-dashboard/cards/kpi-level3-comparison.ts

@@ -170,7 +170,7 @@ export class KpiLevel3Comparison extends LitElement {
                   name
                   targetValue
                   unit
-                  category {
+                  category: parent {
                     id
                     name
                   }