@things-factory/organization 7.0.1-alpha.4 → 7.0.1-alpha.43

package/client/component/approval-line-items-editor-popup.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
@@ -46,10 +47,11 @@ export class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement)
         }}
       ></approval-line-items-editor>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}</button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/client/component/approval-line-selector.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import './approval-line-view'
 
@@ -5,15 +6,7 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import {
-  getRenderer,
-  DataGrist,
-  FetchOption,
-  GristEventHandler,
-  GristData,
-  GristRecord,
-  ZERO_DATA
-} from '@operato/data-grist'
+import { getRenderer, DataGrist, FetchOption, GristEventHandler, GristData, GristRecord, ZERO_DATA } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
@@ -44,11 +37,6 @@ export class ApprovalLineSelector extends LitElement {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -76,10 +64,11 @@ export class ApprovalLineSelector extends LitElement {
       >
       </ox-grist>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}</button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/client/component/assignees-editor-popup.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
@@ -29,7 +30,7 @@ export class AssigneesEditorPopup extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) value?: AssigneeItem[]
+  @property({ type: Array }) value?: AssigneeItem[]
 
   @property({ type: Object }) confirmCallback?: (value?: AssigneeItem[] | null) => void
   @query('assignees-editor') editor!: AssigneesEditor
@@ -46,10 +47,11 @@ export class AssigneesEditorPopup extends localize(i18next)(LitElement) {
         }}
       ></assignees-editor>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}</button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/client/component/department-selector.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-tree'
 
 import gql from 'graphql-tag'
@@ -55,11 +56,6 @@ export class DepartmentSelector extends LitElement {
       ox-tree-vertical {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -70,17 +66,13 @@ export class DepartmentSelector extends LitElement {
 
   render() {
     return html`
-      <ox-tree-vertical
-        .data=${this.root}
-        .selected=${this.value}
-        @select=${this.onSelect.bind(this)}
-        label-property="name"
-      ></ox-tree-vertical>
-
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <ox-tree-vertical .data=${this.root} .selected=${this.value} @select=${this.onSelect.bind(this)} label-property="name"></ox-tree-vertical>
+
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}</button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/client/component/department-view.ts

@@ -91,11 +91,7 @@ export class DepartmentView extends localize(i18next)(ScopedElementsMixin(LitEle
 
   render() {
     return html`
-      <ox-properties-dynamic-view
-        .props=${this.properties}
-        .value=${this.department}
-        @property-change=${this.onPropertyChange.bind(this)}
-      ></ox-properties-dynamic-view>
+      <ox-properties-dynamic-view .props=${this.properties} .value=${this.department} @property-change=${this.onPropertyChange.bind(this)}></ox-properties-dynamic-view>
     `
   }
 

package/client/component/recipients-editor-popup.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
@@ -29,7 +30,7 @@ export class RecipientsEditorPopup extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) value?: AssigneeItem[]
+  @property({ type: Array }) value?: AssigneeItem[]
 
   @property({ type: Object }) confirmCallback?: (value?: AssigneeItem[] | null) => void
   @query('recipients-editor') editor!: RecipientsEditor
@@ -46,10 +47,11 @@ export class RecipientsEditorPopup extends localize(i18next)(LitElement) {
         }}
       ></recipients-editor>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}</button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/client/pages/approval-line/common-approval-line-templates-page.ts

@@ -67,7 +67,10 @@ export class CommonApprovalLineTemplatesPage extends connect(store)(localize(i18
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this.deleteApprovalLines.bind(this)
+          action: this.deleteApprovalLines.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ],
       toolbar: false
@@ -80,10 +83,7 @@ export class CommonApprovalLineTemplatesPage extends connect(store)(localize(i18
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.common-approval-line template list')}
-          </div>
+          <div class="title">${i18next.t('title.common-approval-line template list')}</div>
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>

package/client/pages/approval-line/my-approval-line-templates-page.ts

@@ -67,7 +67,10 @@ export class MyApprovalLineTemplatesPage extends connect(store)(localize(i18next
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this.deleteApprovalLines.bind(this)
+          action: this.deleteApprovalLines.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ],
       toolbar: false
@@ -80,10 +83,7 @@ export class MyApprovalLineTemplatesPage extends connect(store)(localize(i18next
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.my-approval-line template list')}
-          </div>
+          <div class="title">${i18next.t('title.my-approval-line template list')}</div>
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>

package/client/pages/department/department-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,9 +8,11 @@ import { property } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 export class DepartmentImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -21,16 +24,6 @@ export class DepartmentImporter extends LitElement {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -60,21 +53,18 @@ export class DepartmentImporter extends LitElement {
     ]
   }
 
-
   render() {
     return html`
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
-        .data=${
-          { 
-            records: this.departments 
-          }
-        }
+        .data=${{
+          records: this.departments
+        }}
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }
@@ -94,4 +84,3 @@ export class DepartmentImporter extends LitElement {
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-

package/client/pages/department/department-list-page.ts

@@ -100,7 +100,10 @@ export class DepartmentListPage extends connect(store)(localize(i18next)(ScopedE
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this.delete.bind(this)
+          action: this.delete.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ].filter(Boolean),
       toolbar: false
@@ -115,10 +118,7 @@ export class DepartmentListPage extends connect(store)(localize(i18next)(ScopedE
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.department list')}
-          </div>
+          <div class="title">${i18next.t('title.department list')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>

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

@@ -105,7 +105,10 @@ export class DepartmentTreePage extends connect(store)(localize(i18next)(ScopedE
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this.delete.bind(this)
+          action: this.delete.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ].filter(Boolean),
       exportable: {
@@ -122,10 +125,7 @@ export class DepartmentTreePage extends connect(store)(localize(i18next)(ScopedE
   render() {
     return html`
       <div class="header">
-        <div class="title">
-          <mwc-icon>summarize</mwc-icon>
-          ${i18next.t('title.department list')}
-        </div>
+        <div class="title">${i18next.t('title.department list')}</div>
 
         <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
       </div>

package/client/pages/employee/employee-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,9 +8,11 @@ import { property } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 export class EmployeeImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -21,16 +24,6 @@ export class EmployeeImporter extends LitElement {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -71,7 +64,7 @@ export class EmployeeImporter extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/employee/employee-list-page.ts

@@ -76,7 +76,10 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this._deleteEmployee.bind(this)
+          action: this._deleteEmployee.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ],
       exportable: {
@@ -96,10 +99,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.employee list')}
-          </div>
+          <div class="title">${i18next.t('title.employee list')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
@@ -415,11 +415,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
           name: 'profile',
           record: {
             renderer: function (value, column, record, rowIndex, field) {
-              return html`<ox-pfp-view
-                style="height:90%; width: unset; aspect-ratio: 1 / 1;"
-                .profile=${record.profile}
-                .name=${record.name}
-              ></ox-pfp-view>`
+              return html`<ox-pfp-view style="height:90%; width: unset; aspect-ratio: 1 / 1;" .profile=${record.profile} .name=${record.name}></ox-pfp-view>`
             }
           },
           hidden: true
@@ -574,17 +570,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
 
   async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'controlNo',
-      'name',
-      'alias',
-      'type',
-      'hiredOn',
-      'retiredAt',
-      'active',
-      'note'
-    ])
+    const targetFieldSet = new Set(['id', 'controlNo', 'name', 'alias', 'type', 'hiredOn', 'retiredAt', 'active', 'note'])
 
     return exportTargets.map(employee => {
       let tempObj = {}
@@ -679,16 +665,11 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
   }
 
   async openContactSelector(record: GristRecord) {
-    const popup = openPopup(
-      html`
-        <contact-selector .confirmCallback=${selected => this.attachContact(record, selected)}></contact-selector>
-      `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.contact')
-      }
-    )
+    const popup = openPopup(html` <contact-selector .confirmCallback=${selected => this.attachContact(record, selected)}></contact-selector> `, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.contact')
+    })
   }
 
   async attachContact(record: GristRecord, contact: Contact) {

package/client/pages/employee/employees-by-department.ts

@@ -87,12 +87,7 @@ export class EmployeesByDepartment extends connect(store)(localize(i18next)(Scop
 
   render() {
     return html`
-      <ox-tree
-        .data=${this.root}
-        .selected=${this.selected}
-        @select=${this.onSelect.bind(this)}
-        label-property="name"
-      ></ox-tree>
+      <ox-tree .data=${this.root} .selected=${this.selected} @select=${this.onSelect.bind(this)} label-property="name"></ox-tree>
 
       <ox-grist .config=${this.gristConfig} .fetchHandler=${this.fetchEmployees.bind(this)}>
         <div slot="headroom">

package/dist-client/component/approval-line-items-editor-popup.d.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 import { ApprovalLineItemsEditor } from './approval-line-items-editor';
 import { ApprovalLineItem } from '../types/approval-line';

package/dist-client/component/approval-line-items-editor-popup.js

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
@@ -23,10 +24,11 @@ let ApprovalLineItemsEditorPopup = class ApprovalLineItemsEditorPopup extends lo
         }}
       ></approval-line-items-editor>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}</button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `;
     }

package/dist-client/component/approval-line-items-editor-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"approval-line-items-editor-popup.js","sourceRoot":"","sources":["../../client/component/approval-line-items-editor-popup.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AAGtE;;GAEG;AAEI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAxE;;QAsBL,wEAAwE;QAChE,iBAAY,GAAwB,IAAI,CAAC,KAAK,CAAA;IAqCxD,CAAC;IAnCC,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;kBACT,CAAC,CAAc,EAAE,EAAE;YAC3B,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;QACnC,CAAC;;;;6BAIoB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;6BACpD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAA;IAChC,CAAC;IAED,OAAO;QACL,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;QAClD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,QAAQ;QACN,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QAE/D,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA1DM,mCAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;2DAA2B;AAErD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qEAA8D;AACzF;IAAC,KAAK,CAAC,4BAA4B,CAAC;8BAAU,uBAAuB;IAErE,wEAAwE;;4DAFH;AApB1D,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CA4DxC;SA5DY,4BAA4B","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ButtonContainerStyles } from '@operato/styles'\nimport { closePopup } from '@operato/popup'\n\nimport { ApprovalLineItemsEditor } from './approval-line-items-editor'\nimport { ApprovalLineItem } from '../types/approval-line'\n\n/**\n * 결재선의 각 결재자 리스트를 편집한다.\n */\n@customElement('approval-line-items-editor-popup')\nexport class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n      }\n\n      approval-line-items-editor {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) value?: ApprovalLineItem[]\n\n  @property({ type: Object }) confirmCallback?: (value?: ApprovalLineItem[] | null) => void\n  @query('approval-line-items-editor') editor!: ApprovalLineItemsEditor\n\n  /* this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */\n  private changedValue?: ApprovalLineItem[] = this.value\n\n  render() {\n    return html`\n      <approval-line-items-editor\n        .value=${this.value}\n        @change=${(e: CustomEvent) => {\n          this.changedValue = [...e.detail]\n        }}\n      ></approval-line-items-editor>\n\n      <div class=\"button-container\">\n        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>\n        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.changedValue = this.value\n  }\n\n  onEmpty() {\n    this.confirmCallback && this.confirmCallback(null)\n    closePopup(this)\n  }\n\n  onCancel() {\n    closePopup(this)\n  }\n\n  onConfirm() {\n    this.confirmCallback && this.confirmCallback(this.changedValue)\n\n    closePopup(this)\n  }\n}\n"]}
+{"version":3,"file":"approval-line-items-editor-popup.js","sourceRoot":"","sources":["../../client/component/approval-line-items-editor-popup.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AAGtE;;GAEG;AAEI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAxE;;QAsBL,wEAAwE;QAChE,iBAAY,GAAwB,IAAI,CAAC,KAAK,CAAA;IAsCxD,CAAC;IApCC,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;kBACT,CAAC,CAAc,EAAE,EAAE;YAC3B,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;QACnC,CAAC;;;;yBAIgB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,8CAA8C,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;yBAE9F,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,6BAA6B,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;yBAC/E,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEnG,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAA;IAChC,CAAC;IAED,OAAO;QACL,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;QAClD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,QAAQ;QACN,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QAE/D,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA3DM,mCAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;2DAA2B;AAErD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qEAA8D;AACzF;IAAC,KAAK,CAAC,4BAA4B,CAAC;8BAAU,uBAAuB;IAErE,wEAAwE;;4DAFH;AApB1D,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CA6DxC;SA7DY,4BAA4B","sourcesContent":["import '@material/web/icon/icon.js'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ButtonContainerStyles } from '@operato/styles'\nimport { closePopup } from '@operato/popup'\n\nimport { ApprovalLineItemsEditor } from './approval-line-items-editor'\nimport { ApprovalLineItem } from '../types/approval-line'\n\n/**\n * 결재선의 각 결재자 리스트를 편집한다.\n */\n@customElement('approval-line-items-editor-popup')\nexport class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement) {\n  static styles = [\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n      }\n\n      approval-line-items-editor {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) value?: ApprovalLineItem[]\n\n  @property({ type: Object }) confirmCallback?: (value?: ApprovalLineItem[] | null) => void\n  @query('approval-line-items-editor') editor!: ApprovalLineItemsEditor\n\n  /* this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */\n  private changedValue?: ApprovalLineItem[] = this.value\n\n  render() {\n    return html`\n      <approval-line-items-editor\n        .value=${this.value}\n        @change=${(e: CustomEvent) => {\n          this.changedValue = [...e.detail]\n        }}\n      ></approval-line-items-editor>\n\n      <div class=\"button-container\" style=\"margin-left:unset;\">\n        <button @click=${this.onEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}</button>\n        <div filler></div>\n        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>\n        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.changedValue = this.value\n  }\n\n  onEmpty() {\n    this.confirmCallback && this.confirmCallback(null)\n    closePopup(this)\n  }\n\n  onCancel() {\n    closePopup(this)\n  }\n\n  onConfirm() {\n    this.confirmCallback && this.confirmCallback(this.changedValue)\n\n    closePopup(this)\n  }\n}\n"]}

package/dist-client/component/approval-line-selector.d.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js';
 import '@operato/data-grist';
 import './approval-line-view';
 import { LitElement } from 'lit';

package/dist-client/component/approval-line-selector.js

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import '@operato/data-grist';
 import './approval-line-view';
 import gql from 'graphql-tag';
@@ -33,10 +34,11 @@ let ApprovalLineSelector = class ApprovalLineSelector extends LitElement {
       >
       </ox-grist>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}</button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `;
     }
@@ -200,11 +202,6 @@ ApprovalLineSelector.styles = [
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
 ];
 __decorate([

package/dist-client/component/approval-line-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"approval-line-selector.js","sourceRoot":"","sources":["../../client/component/approval-line-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport './approval-line-view'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport {\n  getRenderer,\n  DataGrist,\n  FetchOption,\n  GristEventHandler,\n  GristData,\n  GristRecord,\n  ZERO_DATA\n} from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { isMobileDevice } from '@operato/utils'\nimport { ButtonContainerStyles } from '@operato/styles'\n\nimport { ApprovalLineView } from './approval-line-view'\n\n@customElement('approval-line-selector')\nexport class ApprovalLineSelector extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      approval-line-view {\n        min-height: 100px;\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n      }\n    `\n  ]\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) config: any\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) confirmCallback?: (record?: GristRecord) => Promise<void>\n  @property({ type: Array }) selectedRecords: GristRecord[] = []\n\n  @query('ox-grist') grist!: DataGrist\n  @query('approval-line-view') view?: ApprovalLineView\n\n  render() {\n    return html`\n      <approval-line-view></approval-line-view>\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.config}\n        .data=${this.data}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .selectedRecords=${this.selectedRecords}\n        @select-record-change=${e => {\n          this.view!.model = this.selected?.model || []\n        }}\n      >\n      </ox-grist>\n\n      <div class=\"button-container\">\n        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>\n        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n      </div>\n    `\n  }\n\n  searchText(value: string) {\n    this.grist!.searchText = value\n  }\n\n  onEmpty() {\n    this.confirmCallback && this.confirmCallback()\n    closePopup(this)\n  }\n\n  onCancel() {\n    closePopup(this)\n  }\n\n  onConfirm() {\n    this.confirmCallback && this.confirmCallback(this.selected)\n    closePopup(this)\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          responses: approvalLineReferences(filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              description\n              ownerType\n              owner {\n                id\n                name\n                description\n                controlNo\n              }\n              model {\n                type\n                approver {\n                  id\n                  name\n                  description\n                  controlNo\n                }\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        filters,\n        pagination: { page, limit },\n        sortings\n      }\n    })\n\n    return {\n      total: response.data.responses.total || 0,\n      records: response.data.responses.items || []\n    }\n  }\n\n  async firstUpdated() {\n    this.config = {\n      list: {\n        fields: ['name', 'description'],\n        details: ['ownerType', 'owner']\n      },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: false },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: {\n            editable: false\n          },\n          filter: 'search',\n          sortable: true,\n          width: 150\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: {\n            editable: false\n          },\n          filter: 'search',\n          width: 200\n        },\n        {\n          type: 'string',\n          name: 'ownerType',\n          header: i18next.t('field.owner-type'),\n          record: {\n            editable: false\n          },\n          width: 200\n        },\n        {\n          type: 'resource-object',\n          name: 'owner',\n          header: i18next.t('field.owner'),\n          record: {\n            editable: false,\n            renderer: function (value, column, record, rowIndex, field) {\n              var options = {}\n              switch (record.ownerType) {\n                case 'Employee':\n                  options = {\n                    valueField: 'id',\n                    nameField: 'name',\n                    descriptionField: 'controlNo'\n                  }\n                  break\n                case 'Common':\n                default:\n                  return\n              }\n\n              var dynamicRecord = { ...column.record, options }\n\n              return getRenderer(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)\n            }\n          },\n          width: 200\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: false\n        },\n        appendable: false,\n        handlers: {\n          click: 'select-row',\n          dblclick: ((columns, data, column, record, rowIndex, field) => {\n            this.onConfirm()\n          }) as GristEventHandler\n        }\n      }\n    }\n  }\n\n  get selected() {\n    var selected = this.grist.selected\n\n    return selected && selected.length > 0 ? selected[0] : undefined\n  }\n}\n"]}
+{"version":3,"file":"approval-line-selector.js","sourceRoot":"","sources":["../../client/component/approval-line-selector.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAC5B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,SAAS,EAA0D,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/H,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAGhD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QA0BuB,SAAI,GAAc,SAAS,CAAA;QAE5B,oBAAe,GAAkB,EAAE,CAAA;IAkLhE,CAAC;IA7KC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,MAAM;gBACb,IAAI,CAAC,IAAI;wBACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;2BACzB,IAAI,CAAC,eAAe;gCACf,CAAC,CAAC,EAAE;;YAC1B,IAAI,CAAC,IAAK,CAAC,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,KAAI,EAAE,CAAA;QAC/C,CAAC;;;;;yBAKgB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,8CAA8C,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;yBAE9F,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,6BAA6B,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;yBAC/E,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEnG,CAAA;IACH,CAAC;IAED,UAAU,CAAC,KAAa;QACtB,IAAI,CAAC,KAAM,CAAC,UAAU,GAAG,KAAK,CAAA;IAChC,CAAC;IAED,OAAO;QACL,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE,CAAA;QAC9C,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,QAAQ;QACN,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC3D,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAe;QACpF,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BT;YACD,SAAS,EAAE;gBACT,OAAO;gBACP,UAAU,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;gBAC3B,QAAQ;aACT;SACF,CAAC,CAAA;QAEF,OAAO;YACL,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;YACzC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE;SAC7C,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,MAAM,GAAG;YACZ,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;gBAC/B,OAAO,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC;aAChC;YACD,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE;gBAC1C,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE;gBAC/D;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;qBAChB;oBACD,MAAM,EAAE,QAAQ;oBAChB,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;qBAChB;oBACD,MAAM,EAAE,QAAQ;oBAChB,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACrC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;qBAChB;oBACD,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,iBAAiB;oBACvB,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;oBAChC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;4BACxD,IAAI,OAAO,GAAG,EAAE,CAAA;4BAChB,QAAQ,MAAM,CAAC,SAAS,EAAE;gCACxB,KAAK,UAAU;oCACb,OAAO,GAAG;wCACR,UAAU,EAAE,IAAI;wCAChB,SAAS,EAAE,MAAM;wCACjB,gBAAgB,EAAE,WAAW;qCAC9B,CAAA;oCACD,MAAK;gCACP,KAAK,QAAQ,CAAC;gCACd;oCACE,OAAM;6BACT;4BAED,IAAI,aAAa,mCAAQ,MAAM,CAAC,MAAM,KAAE,OAAO,GAAE,CAAA;4BAEjD,OAAO,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,kCAAO,MAAM,KAAE,MAAM,EAAE,aAAa,KAAI,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;wBACvG,CAAC;qBACF;oBACD,KAAK,EAAE,GAAG;iBACX;aACF;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE;oBACV,QAAQ,EAAE,KAAK;iBAChB;gBACD,UAAU,EAAE,KAAK;gBACjB,QAAQ,EAAE;oBACR,KAAK,EAAE,YAAY;oBACnB,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;wBAC5D,IAAI,CAAC,SAAS,EAAE,CAAA;oBAClB,CAAC,CAAsB;iBACxB;aACF;SACF,CAAA;IACH,CAAC;IAED,IAAI,QAAQ;QACV,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;QAElC,OAAO,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAClE,CAAC;;AA5MM,2BAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAY;AACvC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAA4B;AACvD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAA0D;AACrF;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;6DAAoC;AAE9D;IAAC,KAAK,CAAC,UAAU,CAAC;8BAAS,SAAS;mDAAA;AACpC;IAAC,KAAK,CAAC,oBAAoB,CAAC;8BAAQ,gBAAgB;kDAAA;AA/BzC,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CA8MhC;SA9MY,oBAAoB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\nimport './approval-line-view'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { getRenderer, DataGrist, FetchOption, GristEventHandler, GristData, GristRecord, ZERO_DATA } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { isMobileDevice } from '@operato/utils'\nimport { ButtonContainerStyles } from '@operato/styles'\n\nimport { ApprovalLineView } from './approval-line-view'\n\n@customElement('approval-line-selector')\nexport class ApprovalLineSelector extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      approval-line-view {\n        min-height: 100px;\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) config: any\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) confirmCallback?: (record?: GristRecord) => Promise<void>\n  @property({ type: Array }) selectedRecords: GristRecord[] = []\n\n  @query('ox-grist') grist!: DataGrist\n  @query('approval-line-view') view?: ApprovalLineView\n\n  render() {\n    return html`\n      <approval-line-view></approval-line-view>\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.config}\n        .data=${this.data}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .selectedRecords=${this.selectedRecords}\n        @select-record-change=${e => {\n          this.view!.model = this.selected?.model || []\n        }}\n      >\n      </ox-grist>\n\n      <div class=\"button-container\" style=\"margin-left:unset;\">\n        <button @click=${this.onEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}</button>\n        <div filler></div>\n        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>\n        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>\n      </div>\n    `\n  }\n\n  searchText(value: string) {\n    this.grist!.searchText = value\n  }\n\n  onEmpty() {\n    this.confirmCallback && this.confirmCallback()\n    closePopup(this)\n  }\n\n  onCancel() {\n    closePopup(this)\n  }\n\n  onConfirm() {\n    this.confirmCallback && this.confirmCallback(this.selected)\n    closePopup(this)\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          responses: approvalLineReferences(filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              description\n              ownerType\n              owner {\n                id\n                name\n                description\n                controlNo\n              }\n              model {\n                type\n                approver {\n                  id\n                  name\n                  description\n                  controlNo\n                }\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        filters,\n        pagination: { page, limit },\n        sortings\n      }\n    })\n\n    return {\n      total: response.data.responses.total || 0,\n      records: response.data.responses.items || []\n    }\n  }\n\n  async firstUpdated() {\n    this.config = {\n      list: {\n        fields: ['name', 'description'],\n        details: ['ownerType', 'owner']\n      },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: false },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: {\n            editable: false\n          },\n          filter: 'search',\n          sortable: true,\n          width: 150\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: {\n            editable: false\n          },\n          filter: 'search',\n          width: 200\n        },\n        {\n          type: 'string',\n          name: 'ownerType',\n          header: i18next.t('field.owner-type'),\n          record: {\n            editable: false\n          },\n          width: 200\n        },\n        {\n          type: 'resource-object',\n          name: 'owner',\n          header: i18next.t('field.owner'),\n          record: {\n            editable: false,\n            renderer: function (value, column, record, rowIndex, field) {\n              var options = {}\n              switch (record.ownerType) {\n                case 'Employee':\n                  options = {\n                    valueField: 'id',\n                    nameField: 'name',\n                    descriptionField: 'controlNo'\n                  }\n                  break\n                case 'Common':\n                default:\n                  return\n              }\n\n              var dynamicRecord = { ...column.record, options }\n\n              return getRenderer(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)\n            }\n          },\n          width: 200\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: false\n        },\n        appendable: false,\n        handlers: {\n          click: 'select-row',\n          dblclick: ((columns, data, column, record, rowIndex, field) => {\n            this.onConfirm()\n          }) as GristEventHandler\n        }\n      }\n    }\n  }\n\n  get selected() {\n    var selected = this.grist.selected\n\n    return selected && selected.length > 0 ? selected[0] : undefined\n  }\n}\n"]}

package/dist-client/component/assignees-editor-popup.d.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 import { AssigneesEditor } from './assignees-editor';
 import { AssigneeItem } from '../types/org-member';