@things-factory/organization 6.1.18 → 6.1.22

package/client/bootstrap.ts

@@ -4,6 +4,8 @@ import { GristRendererDepartmentObject } from './grist-editor/grist-renderer-dep
 import { GristEditorDepartmentObject } from './grist-editor/grist-editor-department-object'
 import { GristEditorAssignees } from './grist-editor/grist-editor-assignees'
 import { GristRendererAssignees } from './grist-editor/grist-renderer-assignees'
+import { GristEditorRecipients } from './grist-editor/grist-editor-recipients'
+import { GristRendererRecipients } from './grist-editor/grist-renderer-recipients'
 import { GristEditorApprovalLine } from './grist-editor/grist-editor-approval-line'
 import { GristRendererApprovalLine } from './grist-editor/grist-renderer-approval-line'
 
@@ -12,8 +14,10 @@ export default function bootstrap() {
   registerEditor('department-object', GristEditorDepartmentObject)
   registerEditor('approval-line', GristEditorApprovalLine)
   registerEditor('assignees', GristEditorAssignees)
+  registerEditor('recipients', GristEditorRecipients)
 
   registerRenderer('department-object', GristRendererDepartmentObject)
   registerRenderer('approval-line', GristRendererApprovalLine)
   registerRenderer('assignees', GristRendererAssignees)
+  registerRenderer('recipients', GristRendererRecipients)
 }

package/client/component/index.ts

@@ -10,3 +10,7 @@ export * from './approval-line-items-editor-popup'
 export * from './assignees-view'
 export * from './assignees-editor'
 export * from './assignees-editor-popup'
+
+export * from './recipients-view'
+export * from './recipients-editor'
+export * from './recipients-editor-popup'

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

@@ -0,0 +1,75 @@
+import { css, html, LitElement } from 'lit'
+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 { RecipientsEditor } from './recipients-editor'
+import { AssigneeItem } from '../types/org-member'
+
+/**
+ * 결재선의 각 결재자 리스트를 편집한다.
+ */
+@customElement('recipients-editor-popup')
+export class RecipientsEditorPopup extends localize(i18next)(LitElement) {
+  static styles = [
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      recipients-editor {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: AssigneeItem[]
+
+  @property({ type: Object }) confirmCallback?: (value?: AssigneeItem[] | null) => void
+  @query('recipients-editor') editor!: RecipientsEditor
+
+  /* this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */
+  private changedValue?: AssigneeItem[] = this.value
+
+  render() {
+    return html`
+      <recipients-editor
+        .value=${this.value}
+        @change=${(e: CustomEvent) => {
+          this.changedValue = [...e.detail]
+        }}
+      ></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>
+    `
+  }
+
+  firstUpdated() {
+    this.changedValue = this.value
+  }
+
+  onEmpty() {
+    this.confirmCallback && this.confirmCallback(null)
+    closePopup(this)
+  }
+
+  onCancel() {
+    closePopup(this)
+  }
+
+  onConfirm() {
+    this.confirmCallback && this.confirmCallback(this.changedValue)
+
+    closePopup(this)
+  }
+}

package/client/component/recipients-editor.ts

@@ -0,0 +1,214 @@
+import './recipients-view'
+
+import { css, html, LitElement } from 'lit'
+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 { AssigneeItem } from '../types/org-member'
+
+/**
+ * Assignee 리스트를 편집한다.
+ */
+@customElement('recipients-editor')
+export class RecipientsEditor extends localize(i18next)(LitElement) {
+  static styles = [
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      recipients-view {
+        min-height: 100px;
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+
+      #select {
+        display: flex;
+        justify-content: end;
+        padding: 10px;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: AssigneeItem[]
+
+  @state() gristConfig?: any
+
+  @query('ox-grist') grist?: DataGrist
+
+  render() {
+    return html`
+      <recipients-view .value=${this.value}></recipients-view>
+
+      <ox-grist
+        .mode=${isMobileDevice() ? 'CARD' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        @record-change=${e => {
+          this.value = ((this.grist as any)?._data.records || [])
+            .map(v => {
+              return { type: v.type, assignee: v.assignee }
+            })
+            .filter(v => v.type)
+
+          this.dispatchEvent(
+            new CustomEvent('change', {
+              bubbles: true,
+              composed: true,
+              detail: this.value
+            })
+          )
+        }}
+      >
+        <div slot="headroom">
+          <div id="select">
+            <mwc-button raised danger @click=${() => this.deleteDataItems()}>${i18next.t('button.delete')}</mwc-button>
+          </div>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async firstUpdated() {
+    this.gristConfig = {
+      list: {
+        fields: ['type', 'assignee']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'arrow_upward',
+          handlers: {
+            click: 'move-up'
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'arrow_downward',
+          handlers: {
+            click: 'move-down'
+          }
+        },
+        {
+          type: 'select',
+          name: 'type',
+          header: i18next.t('field.type'),
+          record: {
+            editable: true,
+            options: ['', 'Employee', 'Department', 'Role', 'MyDepartment', 'MySupervisor', 'Myself']
+          },
+          width: 140
+        },
+        {
+          type: 'resource-object',
+          name: 'assignee',
+          header: i18next.t('field.assignee'),
+          record: {
+            editable: true,
+            editor: function (value, column, record, rowIndex, field) {
+              var options = {}
+              switch (record.type) {
+                case 'Employee':
+                  options = {
+                    title: i18next.t('title.employee list'),
+                    queryName: 'employees',
+                    columns: [
+                      { name: 'id', hidden: true },
+                      {
+                        name: 'controlNo',
+                        header: { renderer: () => i18next.t('field.control-no') },
+                        filter: 'search'
+                      },
+                      { name: 'name', header: { renderer: () => i18next.t('field.name') }, filter: 'search' }
+                    ],
+                    list: { fields: ['name', 'control-no'] },
+                    valueField: 'id',
+                    nameField: 'name',
+                    descriptionField: 'controlNo'
+                  }
+                  break
+                case 'Department':
+                  options = {
+                    title: i18next.t('title.department list'),
+                    queryName: 'departments'
+                  }
+                  break
+                case 'Role':
+                  options = {
+                    title: i18next.t('title.lookup role'),
+                    queryName: 'roles'
+                  }
+                  break
+                default:
+                  options = {}
+              }
+
+              var dynamicRecord = { ...column.record, options }
+
+              return getEditor(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)
+            },
+            renderer: function (value, column, record, rowIndex, field) {
+              var options = {}
+              switch (record.type) {
+                case 'Employee':
+                  options = {
+                    valueField: 'id',
+                    nameField: 'name',
+                    descriptionField: 'controlNo'
+                  }
+                  break
+                case 'Department':
+                case 'Role':
+                default:
+                  break
+              }
+
+              var dynamicRecord = { ...column.record, options }
+
+              return getRenderer(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)
+            }
+          },
+          width: 180
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        }
+      },
+      pagination: {
+        infinite: true
+      },
+      sorters: []
+    }
+  }
+
+  async fetchHandler({ filters, page, limit, sortings = [] }) {
+    const value = [...(this.value || [])]
+    this.value = value
+
+    return {
+      total: value.length,
+      records: value
+    }
+  }
+
+  async deleteDataItems() {
+    this.grist?.deleteSelectedRecords(false)
+  }
+}

package/client/component/recipients-view.ts

@@ -0,0 +1,55 @@
+import { css, html, LitElement, TemplateResult } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { AssigneeItem } from '../types/org-member'
+
+@customElement('recipients-view')
+export class RecipientsView extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        gap: 10px;
+        padding: 10px;
+
+        align-items: center;
+
+        background-color: #fff;
+
+        --mdc-icon-size: 3em;
+        color: var(--secondary-color, black);
+      }
+
+      div[assignee] {
+        padding: 5px;
+        border-radius: 5px;
+        border: 2px solid var(--primary-color, black);
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: AssigneeItem[]
+
+  render() {
+    const items = this.value || []
+
+    return html` ${items.map((item, order) => this.renderItem(item, order + 1))} `
+  }
+
+  renderItem(item: AssigneeItem, order: number): TemplateResult {
+    const { type, assignee } = item
+    const { name, description, controlNo } = assignee || {}
+    const subname = (description || controlNo) && `(${description || controlNo})`
+
+    return html`
+      <div assignee>
+        <div>${type}</div>
+        <div><span name>${name}</span>${subname}</div>
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,75 @@
+import '../component/recipients-editor-popup.js'
+
+import { html, TemplateResult } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/layout'
+
+@customElement('grist-editor-recipients')
+export class GristEditorRecipients extends OxGristEditor {
+  private popup?: PopupHandle
+  private template?: TemplateResult
+
+  get editorTemplate() {
+    const value = this.value
+    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>`
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (selected?: { [field: string]: any }) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected || [],
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var value = this.value || []
+
+    var template =
+      this.template ||
+      html`
+        <recipients-editor-popup
+          .value=${value}
+          .confirmCallback=${confirmCallback.bind(this)}
+        ></recipients-editor-popup>
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.recipients editor')
+    })
+  }
+}

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

@@ -0,0 +1,12 @@
+import '@material/mwc-icon'
+import { html } from 'lit-html'
+
+import { FieldRenderer } from '@operato/data-grist'
+
+export const GristRendererRecipients: FieldRenderer = (value, column, record, rowIndex, field) => {
+  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>`
+}

package/client/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "../../tsconfig-base.json",
   "compilerOptions": {
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
     "strict": true,
     "declaration": true,
     "module": "esnext",

package/client/types/org-member.ts

@@ -19,3 +19,9 @@ export class AssigneeItem {
   value?: string
   assignee?: OrgMemberTarget
 }
+
+export class RecipientItem {
+  type?: OrgMemberTargetType
+  value?: string
+  recipient?: OrgMemberTarget
+}

package/dist-client/bootstrap.js

@@ -3,6 +3,8 @@ import { GristRendererDepartmentObject } from './grist-editor/grist-renderer-dep
 import { GristEditorDepartmentObject } from './grist-editor/grist-editor-department-object';
 import { GristEditorAssignees } from './grist-editor/grist-editor-assignees';
 import { GristRendererAssignees } from './grist-editor/grist-renderer-assignees';
+import { GristEditorRecipients } from './grist-editor/grist-editor-recipients';
+import { GristRendererRecipients } from './grist-editor/grist-renderer-recipients';
 import { GristEditorApprovalLine } from './grist-editor/grist-editor-approval-line';
 import { GristRendererApprovalLine } from './grist-editor/grist-renderer-approval-line';
 export default function bootstrap() {
@@ -10,8 +12,10 @@ export default function bootstrap() {
     registerEditor('department-object', GristEditorDepartmentObject);
     registerEditor('approval-line', GristEditorApprovalLine);
     registerEditor('assignees', GristEditorAssignees);
+    registerEditor('recipients', GristEditorRecipients);
     registerRenderer('department-object', GristRendererDepartmentObject);
     registerRenderer('approval-line', GristRendererApprovalLine);
     registerRenderer('assignees', GristRendererAssignees);
+    registerRenderer('recipients', GristRendererRecipients);
 }
 //# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtE,OAAO,EAAE,6BAA6B,EAAE,MAAM,iDAAiD,CAAA;AAC/F,OAAO,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAA;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAC5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAA;AACnF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAEvF,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,2CAA2C;IAC3C,cAAc,CAAC,mBAAmB,EAAE,2BAA2B,CAAC,CAAA;IAChE,cAAc,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAA;IACxD,cAAc,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IAEjD,gBAAgB,CAAC,mBAAmB,EAAE,6BAA6B,CAAC,CAAA;IACpE,gBAAgB,CAAC,eAAe,EAAE,yBAAyB,CAAC,CAAA;IAC5D,gBAAgB,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAA;AACvD,CAAC","sourcesContent":["import { registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { GristRendererDepartmentObject } from './grist-editor/grist-renderer-department-object'\nimport { GristEditorDepartmentObject } from './grist-editor/grist-editor-department-object'\nimport { GristEditorAssignees } from './grist-editor/grist-editor-assignees'\nimport { GristRendererAssignees } from './grist-editor/grist-renderer-assignees'\nimport { GristEditorApprovalLine } from './grist-editor/grist-editor-approval-line'\nimport { GristRendererApprovalLine } from './grist-editor/grist-renderer-approval-line'\n\nexport default function bootstrap() {\n  /* register grist renderer/editor for id */\n  registerEditor('department-object', GristEditorDepartmentObject)\n  registerEditor('approval-line', GristEditorApprovalLine)\n  registerEditor('assignees', GristEditorAssignees)\n\n  registerRenderer('department-object', GristRendererDepartmentObject)\n  registerRenderer('approval-line', GristRendererApprovalLine)\n  registerRenderer('assignees', GristRendererAssignees)\n}\n"]}
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtE,OAAO,EAAE,6BAA6B,EAAE,MAAM,iDAAiD,CAAA;AAC/F,OAAO,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAA;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAC5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAA;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAA;AACnF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAEvF,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,2CAA2C;IAC3C,cAAc,CAAC,mBAAmB,EAAE,2BAA2B,CAAC,CAAA;IAChE,cAAc,CAAC,eAAe,EAAE,uBAAuB,CAAC,CAAA;IACxD,cAAc,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAA;IACjD,cAAc,CAAC,YAAY,EAAE,qBAAqB,CAAC,CAAA;IAEnD,gBAAgB,CAAC,mBAAmB,EAAE,6BAA6B,CAAC,CAAA;IACpE,gBAAgB,CAAC,eAAe,EAAE,yBAAyB,CAAC,CAAA;IAC5D,gBAAgB,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAA;IACrD,gBAAgB,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;AACzD,CAAC","sourcesContent":["import { registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { GristRendererDepartmentObject } from './grist-editor/grist-renderer-department-object'\nimport { GristEditorDepartmentObject } from './grist-editor/grist-editor-department-object'\nimport { GristEditorAssignees } from './grist-editor/grist-editor-assignees'\nimport { GristRendererAssignees } from './grist-editor/grist-renderer-assignees'\nimport { GristEditorRecipients } from './grist-editor/grist-editor-recipients'\nimport { GristRendererRecipients } from './grist-editor/grist-renderer-recipients'\nimport { GristEditorApprovalLine } from './grist-editor/grist-editor-approval-line'\nimport { GristRendererApprovalLine } from './grist-editor/grist-renderer-approval-line'\n\nexport default function bootstrap() {\n  /* register grist renderer/editor for id */\n  registerEditor('department-object', GristEditorDepartmentObject)\n  registerEditor('approval-line', GristEditorApprovalLine)\n  registerEditor('assignees', GristEditorAssignees)\n  registerEditor('recipients', GristEditorRecipients)\n\n  registerRenderer('department-object', GristRendererDepartmentObject)\n  registerRenderer('approval-line', GristRendererApprovalLine)\n  registerRenderer('assignees', GristRendererAssignees)\n  registerRenderer('recipients', GristRendererRecipients)\n}\n"]}

package/dist-client/component/index.d.ts

@@ -7,3 +7,6 @@ export * from './approval-line-items-editor-popup';
 export * from './assignees-view';
 export * from './assignees-editor';
 export * from './assignees-editor-popup';
+export * from './recipients-view';
+export * from './recipients-editor';
+export * from './recipients-editor-popup';

package/dist-client/component/index.js

@@ -7,4 +7,7 @@ export * from './approval-line-items-editor-popup';
 export * from './assignees-view';
 export * from './assignees-editor';
 export * from './assignees-editor-popup';
+export * from './recipients-view';
+export * from './recipients-editor';
+export * from './recipients-editor-popup';
 //# sourceMappingURL=index.js.map

package/dist-client/component/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../client/component/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AAExC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oCAAoC,CAAA;AAElD,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,0BAA0B,CAAA","sourcesContent":["export * from './department-selector'\nexport * from './approval-line-selector'\n\nexport * from './department-view'\n\nexport * from './approval-line-view'\nexport * from './approval-line-items-editor'\nexport * from './approval-line-items-editor-popup'\n\nexport * from './assignees-view'\nexport * from './assignees-editor'\nexport * from './assignees-editor-popup'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../client/component/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AAExC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oCAAoC,CAAA;AAElD,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,0BAA0B,CAAA;AAExC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA","sourcesContent":["export * from './department-selector'\nexport * from './approval-line-selector'\n\nexport * from './department-view'\n\nexport * from './approval-line-view'\nexport * from './approval-line-items-editor'\nexport * from './approval-line-items-editor-popup'\n\nexport * from './assignees-view'\nexport * from './assignees-editor'\nexport * from './assignees-editor-popup'\n\nexport * from './recipients-view'\nexport * from './recipients-editor'\nexport * from './recipients-editor-popup'\n"]}

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import { RecipientsEditor } from './recipients-editor';
+import { AssigneeItem } from '../types/org-member';
+declare const RecipientsEditorPopup_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * 결재선의 각 결재자 리스트를 편집한다.
+ */
+export declare class RecipientsEditorPopup extends RecipientsEditorPopup_base {
+    static styles: import("lit").CSSResult[];
+    value?: AssigneeItem[];
+    confirmCallback?: (value?: AssigneeItem[] | null) => void;
+    editor: RecipientsEditor;
+    private changedValue?;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    onEmpty(): void;
+    onCancel(): void;
+    onConfirm(): void;
+}
+export {};

package/dist-client/component/recipients-editor-popup.js

@@ -0,0 +1,81 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+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 { RecipientsEditor } from './recipients-editor';
+/**
+ * 결재선의 각 결재자 리스트를 편집한다.
+ */
+let RecipientsEditorPopup = class RecipientsEditorPopup extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /* this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */
+        this.changedValue = this.value;
+    }
+    render() {
+        return html `
+      <recipients-editor
+        .value=${this.value}
+        @change=${(e) => {
+            this.changedValue = [...e.detail];
+        }}
+      ></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>
+    `;
+    }
+    firstUpdated() {
+        this.changedValue = this.value;
+    }
+    onEmpty() {
+        this.confirmCallback && this.confirmCallback(null);
+        closePopup(this);
+    }
+    onCancel() {
+        closePopup(this);
+    }
+    onConfirm() {
+        this.confirmCallback && this.confirmCallback(this.changedValue);
+        closePopup(this);
+    }
+};
+RecipientsEditorPopup.styles = [
+    ButtonContainerStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      recipients-editor {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Array)
+], RecipientsEditorPopup.prototype, "value", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Function)
+], RecipientsEditorPopup.prototype, "confirmCallback", void 0);
+__decorate([
+    query('recipients-editor'),
+    __metadata("design:type", RecipientsEditor
+    /* this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */
+    )
+], RecipientsEditorPopup.prototype, "editor", void 0);
+RecipientsEditorPopup = __decorate([
+    customElement('recipients-editor-popup')
+], RecipientsEditorPopup);
+export { RecipientsEditorPopup };
+//# sourceMappingURL=recipients-editor-popup.js.map

package/dist-client/component/recipients-editor-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipients-editor-popup.js","sourceRoot":"","sources":["../../client/component/recipients-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,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAGtD;;GAEG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAjE;;QAsBL,wEAAwE;QAChE,iBAAY,GAAoB,IAAI,CAAC,KAAK,CAAA;IAqCpD,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,4BAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAuB;AAElD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAA0D;AACrF;IAAC,KAAK,CAAC,mBAAmB,CAAC;8BAAU,gBAAgB;IAErD,wEAAwE;;qDAFnB;AApB1C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA4DjC;SA5DY,qBAAqB","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 { RecipientsEditor } from './recipients-editor'\nimport { AssigneeItem } from '../types/org-member'\n\n/**\n * 결재선의 각 결재자 리스트를 편집한다.\n */\n@customElement('recipients-editor-popup')\nexport class RecipientsEditorPopup 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      recipients-editor {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: AssigneeItem[]\n\n  @property({ type: Object }) confirmCallback?: (value?: AssigneeItem[] | null) => void\n  @query('recipients-editor') editor!: RecipientsEditor\n\n  /* this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */\n  private changedValue?: AssigneeItem[] = this.value\n\n  render() {\n    return html`\n      <recipients-editor\n        .value=${this.value}\n        @change=${(e: CustomEvent) => {\n          this.changedValue = [...e.detail]\n        }}\n      ></recipients-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"]}