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

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

@@ -5,6 +5,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ButtonContainerStyles } from '@operato/styles'
 import { closePopup } from '@operato/popup'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
 import { ApprovalLineItemsEditor } from './approval-line-items-editor'
 import { ApprovalLineItem } from '../types/approval-line'
@@ -60,9 +61,18 @@ export class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement)
     this.changedValue = this.value
   }
 
-  onEmpty() {
-    this.confirmCallback && this.confirmCallback(null)
-    closePopup(this)
+  async onEmpty() {
+    const reaction = await OxPrompt.open({
+      title: i18next.t('text.are_you_sure'),
+      text: i18next.t('prompt.sure to empty approval line ?'),
+      confirmButton: { text: i18next.t('button.confirm') },
+      cancelButton: { text: i18next.t('button.cancel') }
+    })
+
+    if (reaction) {
+      this.confirmCallback && this.confirmCallback(null)
+      closePopup(this)
+    }
   }
 
   onCancel() {

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

@@ -7,7 +7,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { DataGrist, getEditor, getRenderer } from '@operato/data-grist'
 import { isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
+import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
 import { openPopup, PopupHandle } from '@operato/layout'
 
 import { ApprovalLineView } from './approval-line-view'
@@ -19,6 +19,7 @@ import { ApprovalLine, ApprovalLineItem } from '../types/approval-line'
 @customElement('approval-line-items-editor')
 export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
   static styles = [
+    CommonHeaderStyles,
     ButtonContainerStyles,
     css`
       :host {
@@ -44,7 +45,7 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) value?: ApprovalLineItem[]
+  @property({ type: Array }) value?: ApprovalLineItem[]
 
   @state() gristConfig?: any
 
@@ -76,10 +77,10 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
           )
         }}
       >
-        <div slot="headroom">
-          <div id="select">
-            <mwc-button @click=${this.openSelector.bind(this)}>${i18next.t('button.copy from')}</mwc-button>
-            <mwc-button raised danger @click=${() => this.deleteDataItems()}>${i18next.t('button.delete')}</mwc-button>
+        <div slot="headroom" class="header">
+          <div class="actions">
+            <button @click=${this.openSelector.bind(this)}><md-icon>content_copy</md-icon>${i18next.t('button.copy from')}</button>
+            <button danger @click=${() => this.deleteDataItems()}><md-icon>delete</md-icon>${i18next.t('button.delete')}</button>
           </div>
         </div>
       </ox-grist>
@@ -132,7 +133,7 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
                 case 'Employee':
                   options = {
                     title: i18next.t('title.employee list'),
-                    pagination: { pages : [50, 100, 200] },
+                    pagination: { pages: [50, 100, 200] },
                     basicArgs: { filters: [{ name: 'active', operator: 'eq', value: 'true' }] },
                     queryName: 'employees',
                     columns: [
@@ -144,54 +145,54 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
                         filter: 'search',
                         sortable: true
                       },
-                      { 
+                      {
                         name: 'name',
                         width: 120,
-                        header: { renderer: () => i18next.t('field.name') }, 
+                        header: { renderer: () => i18next.t('field.name') },
                         filter: 'search',
                         sortable: true
                       },
-                      { 
-                        name: 'alias', 
+                      {
+                        name: 'alias',
                         width: 150,
-                        header: { renderer: () => i18next.t('label.alias') }, 
+                        header: { renderer: () => i18next.t('label.alias') },
                         filter: 'search',
                         sortable: true
                       },
-                      { 
-                        type: 'code', 
-                        name: 'type', 
+                      {
+                        type: 'code',
+                        name: 'type',
                         width: 110,
-                        header: { renderer: () => i18next.t('label.type') }, 
-                        record: { 
-                          editable: false, 
-                          codeName: 'EMPLOYEE_TYPE' 
+                        header: { renderer: () => i18next.t('label.type') },
+                        record: {
+                          editable: false,
+                          codeName: 'EMPLOYEE_TYPE'
                         }
                       },
-                      { 
-                        type: 'code', 
-                        name: 'jobPosition', 
+                      {
+                        type: 'code',
+                        name: 'jobPosition',
                         width: 110,
-                        header: { renderer: () => i18next.t('label.job-position') }, 
-                        record: { 
-                          editable: false, 
-                          codeName: 'JOB_POSITION' 
+                        header: { renderer: () => i18next.t('label.job-position') },
+                        record: {
+                          editable: false,
+                          codeName: 'JOB_POSITION'
                         }
                       },
-                      { 
-                        type: 'code', 
-                        name: 'jobResponsibility', 
+                      {
+                        type: 'code',
+                        name: 'jobResponsibility',
                         width: 200,
-                        header: { renderer: () => i18next.t('label.job-responsibility') }, 
-                        record: { 
-                          editable: false, 
-                          codeName: 'JOB_RESPONSIBILITY' 
+                        header: { renderer: () => i18next.t('label.job-responsibility') },
+                        record: {
+                          editable: false,
+                          codeName: 'JOB_RESPONSIBILITY'
                         }
                       },
                       {
                         type: 'date',
                         name: 'hiredOn',
-                        header: { renderer: () => i18next.t('field.hired-on') }, 
+                        header: { renderer: () => i18next.t('field.hired-on') },
                         width: 100
                       }
                     ],
@@ -303,19 +304,16 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
       )
     }
 
-    this.popup = openPopup(
-      html` <approval-line-selector .confirmCallback=${confirmCallback.bind(this)}></approval-line-selector> `,
-      {
-        backdrop: true,
-        size: 'large',
-        search: {
-          placeholder: i18next.t('title.approval-line template list'),
-          handler: (instance: any, value: any) => {
-            /* instance: template instance */
-            instance.searchText(value)
-          }
+    this.popup = openPopup(html` <approval-line-selector .confirmCallback=${confirmCallback.bind(this)}></approval-line-selector> `, {
+      backdrop: true,
+      size: 'large',
+      search: {
+        placeholder: i18next.t('title.approval-line template list'),
+        handler: (instance: any, value: any) => {
+          /* instance: template instance */
+          instance.searchText(value)
         }
       }
-    )
+    })
   }
 }

package/client/component/approval-line-templates-manager.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -8,7 +10,7 @@ import { getEditor, getRenderer } from '@operato/data-grist'
 import { isMobileDevice } from '@operato/utils'
 import { ButtonContainerStyles } from '@operato/styles'
 
-import { ApprovalLine, ApprovalLineItem } from '../types/approval-line'
+import { ApprovalLine } from '../types/approval-line'
 
 /**
  * 결재선 관리를 위해서
@@ -40,14 +42,11 @@ export class ApprovalLineTemplatesManager extends localize(i18next)(LitElement)
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'CARD' : 'GRID'}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'CARD' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
+
       <div class="button-container">
-        <mwc-button raised danger @click=${this._deleteDataItems.bind(this)}>${i18next.t('button.delete')}</mwc-button>
-        <mwc-button raised @click=${this._updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button danger @click=${this._deleteDataItems.bind(this)}><md-icon>delete</md-icon>${i18next.t('button.delete')}</button>
+        <button @click=${this._updateDataItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/component/assignees-editor.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import './assignees-view'
 
 import { css, html, LitElement } from 'lit'
@@ -73,7 +74,7 @@ export class AssigneesEditor extends localize(i18next)(LitElement) {
       >
         <div slot="headroom">
           <div id="select">
-            <mwc-button raised danger @click=${() => this.deleteDataItems()}>${i18next.t('button.delete')}</mwc-button>
+            <button danger @click=${() => this.deleteDataItems()}><md-icon>delete</md-icon>${i18next.t('button.delete')}</button>
           </div>
         </div>
       </ox-grist>

package/client/component/recipients-editor.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import './recipients-view'
 
 import { css, html, LitElement } from 'lit'
@@ -5,8 +6,8 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { DataGrist, getEditor, getRenderer } from '@operato/data-grist'
+import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
 
 import { AssigneeItem } from '../types/org-member'
 
@@ -16,6 +17,7 @@ import { AssigneeItem } from '../types/org-member'
 @customElement('recipients-editor')
 export class RecipientsEditor extends localize(i18next)(LitElement) {
   static styles = [
+    CommonHeaderStyles,
     ButtonContainerStyles,
     css`
       :host {
@@ -32,16 +34,10 @@ export class RecipientsEditor extends localize(i18next)(LitElement) {
       ox-grist {
         flex: 1;
       }
-
-      #select {
-        display: flex;
-        justify-content: end;
-        padding: 10px;
-      }
     `
   ]
 
-  @property({ type: Object }) value?: AssigneeItem[]
+  @property({ type: Array }) value?: AssigneeItem[]
 
   @state() gristConfig?: any
 
@@ -71,9 +67,9 @@ export class RecipientsEditor extends localize(i18next)(LitElement) {
           )
         }}
       >
-        <div slot="headroom">
-          <div id="select">
-            <mwc-button raised danger @click=${() => this.deleteDataItems()}>${i18next.t('button.delete')}</mwc-button>
+        <div slot="headroom" class="header">
+          <div id="actions">
+            <button danger @click=${() => this.deleteDataItems()}><md-icon>delete</md-icon>${i18next.t('button.delete')}</button>
           </div>
         </div>
       </ox-grist>

package/client/grist-editor/grist-editor-approval-line.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '../component/approval-line-items-editor-popup.js'
 
 import { html, TemplateResult } from 'lit'
@@ -17,8 +18,8 @@ export class GristEditorApprovalLine extends OxGristEditor {
     return !value || !(value instanceof Array) || value.length == 0
       ? html``
       : value.length == 1
-      ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-      : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+      ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+      : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
   }
 
   _onclick(e: Event): void {
@@ -58,13 +59,7 @@ export class GristEditorApprovalLine extends OxGristEditor {
     var value = this.value || []
 
     var template =
-      this.template ||
-      html`
-        <approval-line-items-editor-popup
-          .value=${value}
-          .confirmCallback=${confirmCallback.bind(this)}
-        ></approval-line-items-editor-popup>
-      `
+      this.template || html` <approval-line-items-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></approval-line-items-editor-popup> `
 
     this.popup = openPopup(template, {
       backdrop: true,

package/client/grist-editor/grist-editor-assignees.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '../component/assignees-editor-popup.js'
 
 import { html, TemplateResult } from 'lit'
@@ -17,8 +18,8 @@ export class GristEditorAssignees extends OxGristEditor {
     return !value || !(value instanceof Array) || value.length == 0
       ? html``
       : value.length == 1
-      ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-      : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+      ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+      : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
   }
 
   _onclick(e: Event): void {
@@ -57,11 +58,7 @@ export class GristEditorAssignees extends OxGristEditor {
 
     var value = this.value || []
 
-    var template =
-      this.template ||
-      html`
-        <assignees-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></assignees-editor-popup>
-      `
+    var template = this.template || html` <assignees-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></assignees-editor-popup> `
 
     this.popup = openPopup(template, {
       backdrop: true,

package/client/grist-editor/grist-editor-recipients.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '../component/recipients-editor-popup.js'
 
 import { html, TemplateResult } from 'lit'
@@ -17,8 +18,8 @@ export class GristEditorRecipients extends OxGristEditor {
     return !value || !(value instanceof Array) || value.length == 0
       ? html``
       : value.length == 1
-      ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-      : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+      ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+      : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
   }
 
   _onclick(e: Event): void {
@@ -57,14 +58,7 @@ export class GristEditorRecipients extends OxGristEditor {
 
     var value = this.value || []
 
-    var template =
-      this.template ||
-      html`
-        <recipients-editor-popup
-          .value=${value}
-          .confirmCallback=${confirmCallback.bind(this)}
-        ></recipients-editor-popup>
-      `
+    var template = this.template || html` <recipients-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></recipients-editor-popup> `
 
     this.popup = openPopup(template, {
       backdrop: true,

package/client/grist-editor/grist-renderer-approval-line.ts

@@ -1,4 +1,5 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+
 import { html } from 'lit-html'
 
 import { FieldRenderer } from '@operato/data-grist'
@@ -7,6 +8,6 @@ export const GristRendererApprovalLine: FieldRenderer = (value, column, record,
   return !value || !(value instanceof Array) || value.length == 0
     ? html``
     : value.length == 1
-    ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-    : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+    ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+    : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
 }

package/client/grist-editor/grist-renderer-assignees.ts

@@ -1,4 +1,5 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+
 import { html } from 'lit-html'
 
 import { FieldRenderer } from '@operato/data-grist'
@@ -7,6 +8,6 @@ export const GristRendererAssignees: FieldRenderer = (value, column, record, row
   return !value || !(value instanceof Array) || value.length == 0
     ? html``
     : value.length == 1
-    ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-    : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+    ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+    : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
 }

package/client/grist-editor/grist-renderer-recipients.ts

@@ -1,4 +1,5 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+
 import { html } from 'lit-html'
 
 import { FieldRenderer } from '@operato/data-grist'
@@ -7,6 +8,6 @@ export const GristRendererRecipients: FieldRenderer = (value, column, record, ro
   return !value || !(value instanceof Array) || value.length == 0
     ? html``
     : value.length == 1
-    ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-    : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+    ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+    : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
 }

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

@@ -118,6 +118,8 @@ export class MyApprovalLineTemplatesPage extends connect(store)(localize(i18next
                     .confirmCallback=${async model => {
                       await this.updateApprovalLine(id, model)
                       await this.grist.fetch()
+
+                      return false
                     }}
                     .value=${model}
                   ></approval-line-items-editor-popup>

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

@@ -14,7 +14,7 @@ export declare class ApprovalLineItemsEditorPopup extends ApprovalLineItemsEdito
     private changedValue?;
     render(): import("lit").TemplateResult<1>;
     firstUpdated(): void;
-    onEmpty(): void;
+    onEmpty(): Promise<void>;
     onCancel(): void;
     onConfirm(): void;
 }

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

@@ -5,6 +5,7 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { ButtonContainerStyles } from '@operato/styles';
 import { closePopup } from '@operato/popup';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { ApprovalLineItemsEditor } from './approval-line-items-editor';
 /**
  * 결재선의 각 결재자 리스트를 편집한다.
@@ -35,9 +36,17 @@ let ApprovalLineItemsEditorPopup = class ApprovalLineItemsEditorPopup extends lo
     firstUpdated() {
         this.changedValue = this.value;
     }
-    onEmpty() {
-        this.confirmCallback && this.confirmCallback(null);
-        closePopup(this);
+    async onEmpty() {
+        const reaction = await OxPrompt.open({
+            title: i18next.t('text.are_you_sure'),
+            text: i18next.t('prompt.sure to empty approval line ?'),
+            confirmButton: { text: i18next.t('button.confirm') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
+        if (reaction) {
+            this.confirmCallback && this.confirmCallback(null);
+            closePopup(this);
+        }
     }
     onCancel() {
         closePopup(this);

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,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"]}
+{"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;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAEtD,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;IA+CxD,CAAC;IA7CC,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,KAAK,CAAC,OAAO;QACX,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC;YACnC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;YACrC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,sCAAsC,CAAC;YACvD,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;YACpD,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE;SACnD,CAAC,CAAA;QAEF,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;YAClD,UAAU,CAAC,IAAI,CAAC,CAAA;SACjB;IACH,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;;AApEM,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,CAsExC;SAtEY,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'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\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  async onEmpty() {\n    const reaction = await OxPrompt.open({\n      title: i18next.t('text.are_you_sure'),\n      text: i18next.t('prompt.sure to empty approval line ?'),\n      confirmButton: { text: i18next.t('button.confirm') },\n      cancelButton: { text: i18next.t('button.cancel') }\n    })\n\n    if (reaction) {\n      this.confirmCallback && this.confirmCallback(null)\n      closePopup(this)\n    }\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-items-editor.js

@@ -6,7 +6,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { DataGrist, getEditor, getRenderer } from '@operato/data-grist';
 import { isMobileDevice } from '@operato/utils';
-import { ButtonContainerStyles } from '@operato/styles';
+import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles';
 import { openPopup } from '@operato/layout';
 import { ApprovalLineView } from './approval-line-view';
 /**
@@ -34,10 +34,10 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
             }));
         }}
       >
-        <div slot="headroom">
-          <div id="select">
-            <mwc-button @click=${this.openSelector.bind(this)}>${i18next.t('button.copy from')}</mwc-button>
-            <mwc-button raised danger @click=${() => this.deleteDataItems()}>${i18next.t('button.delete')}</mwc-button>
+        <div slot="headroom" class="header">
+          <div class="actions">
+            <button @click=${this.openSelector.bind(this)}><md-icon>content_copy</md-icon>${i18next.t('button.copy from')}</button>
+            <button danger @click=${() => this.deleteDataItems()}><md-icon>delete</md-icon>${i18next.t('button.delete')}</button>
           </div>
         </div>
       </ox-grist>
@@ -261,6 +261,7 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
     }
 };
 ApprovalLineItemsEditor.styles = [
+    CommonHeaderStyles,
     ButtonContainerStyles,
     css `
       :host {
@@ -286,7 +287,7 @@ ApprovalLineItemsEditor.styles = [
     `
 ];
 __decorate([
-    property({ type: Object }),
+    property({ type: Array }),
     __metadata("design:type", Array)
 ], ApprovalLineItemsEditor.prototype, "value", void 0);
 __decorate([