@things-factory/organization 7.0.52 → 7.0.56

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

@@ -14,15 +14,18 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
-import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
+import { p13n } from '@operato/p13n'
 
 import { EmployeeImporter } from './employee-importer'
+import { ApprovalLineTemplatesManager } from 'component/approval-line-templates-manager'
 
 @customElement('employee-list-page')
-export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+export class EmployeeListPage extends connect(store)(p13n(localize(i18next)(ScopedElementsMixin(PageView)))) {
   static styles = [
     ScrollbarStyles,
+    CommonGristStyles,
     CommonHeaderStyles,
     css`
       :host {
@@ -75,12 +78,12 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
         {
           icon: 'save',
           title: i18next.t('button.save'),
-          action: this._updateEmployee.bind(this)
+          action: this.onUpdateEmployee.bind(this)
         },
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this._deleteEmployee.bind(this),
+          action: this.onDeleteEmployee.bind(this),
           emphasis: {
             danger: true
           }
@@ -101,13 +104,21 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
     const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}
+      >
         <div slot="headroom" class="header">
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
           </div>
+
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
     `
   }
@@ -123,21 +134,45 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
       columns: [
         { type: 'gutter', gutterName: 'sequence', fixed: true },
         { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },
+        // {
+        //   type: 'gutter',
+        //   gutterName: 'button',
+        //   fixed: true,
+        //   forList: true,
+        //   icon: 'contact_page',
+        //   iconOnly: false,
+        //   title: i18next.t('button.edit-contact'),
+        //   width: 110,
+        //   handlers: {
+        //     click: async (columns, data, column, record, rowIndex) => {
+        //       if (record && record.contact) {
+        //         this.openContactPopup(record)
+        //       } else {
+        //         this.openContactSelector(record)
+        //       }
+        //     }
+        //   }
+        // },
         {
-          type: 'gutter',
-          gutterName: 'button',
-          fixed: true,
-          forList: true,
-          icon: record => (!record ? 'contact_page' : record.id ? 'contact_page' : ''),
-          iconOnly: false,
-          title: record =>
-            !record ? i18next.t('button.edit-detail') : record.id ? i18next.t('button.edit-detail') : '',
-          width: 100,
+          type: 'image',
+          name: 'profile',
+          header: i18next.t('button.edit-contact'),
+          width: 80,
+          record: {
+            align: 'center',
+            renderer: function (value, column, record, rowIndex, field) {
+              return html`<ox-pfp-view
+                style="min-height: 36px; width: unset; aspect-ratio: 1 / 1;"
+                .profile=${record.profile}
+                .name=${record.name}
+              ></ox-pfp-view>`
+            }
+          },
           handlers: {
             click: async (columns, data, column, record, rowIndex) => {
-              if (record.contact) {
+              if (record && record.contact) {
                 this.openContactPopup(record)
-              } else if (record.id) {
+              } else {
                 this.openContactSelector(record)
               }
             }
@@ -149,7 +184,8 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
           fixed: true,
           header: i18next.t('field.control-no'),
           record: {
-            editable: true
+            editable: true,
+            mandatory: true
           },
           filter: 'search',
           sortable: true,
@@ -161,7 +197,8 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
           fixed: true,
           header: i18next.t('field.name'),
           record: {
-            editable: true
+            editable: true,
+            mandatory: true
           },
           filter: 'search',
           sortable: true,
@@ -210,7 +247,8 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
           filter: false,
           record: {
             editable: true,
-            codeName: 'EMPLOYEE_TYPE'
+            codeName: 'EMPLOYEE_TYPE',
+            selectDispOpt: 'name'
           }
         },
         {
@@ -274,7 +312,8 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
                   header: { renderer: () => i18next.t('label.type') },
                   record: {
                     editable: false,
-                    codeName: 'EMPLOYEE_TYPE'
+                    codeName: 'EMPLOYEE_TYPE',
+                    selectDispOpt: 'name'
                   }
                 },
                 {
@@ -284,7 +323,8 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
                   header: { renderer: () => i18next.t('label.job-position') },
                   record: {
                     editable: false,
-                    codeName: 'JOB_POSITION'
+                    codeName: 'JOB_POSITION',
+                    selectDispOpt: 'name'
                   }
                 },
                 {
@@ -294,14 +334,15 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
                   header: { renderer: () => i18next.t('label.job-responsibility') },
                   record: {
                     editable: false,
-                    codeName: 'JOB_RESPONSIBILITY'
+                    codeName: 'JOB_RESPONSIBILITY',
+                    selectDispOpt: 'name'
                   }
                 },
                 {
                   type: 'date',
                   name: 'hiredOn',
                   header: { renderer: () => i18next.t('field.hired-on') },
-                  width: 100
+                  width: 120
                 }
               ],
               valueField: 'id',
@@ -329,7 +370,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
           type: 'string',
           name: 'phone',
           header: i18next.t('field.phone'),
-          width: 110,
+          width: 130,
           record: {
             editable: false,
             renderer: function (value, column, record, rowIndex, field) {
@@ -345,7 +386,8 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
           width: 175,
           record: {
             editable: true,
-            codeName: 'JOB_RESPONSIBILITY'
+            codeName: 'JOB_RESPONSIBILITY',
+            selectDispOpt: 'name'
           }
         },
         {
@@ -355,14 +397,15 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
           width: 100,
           record: {
             editable: true,
-            codeName: 'JOB_POSITION'
+            codeName: 'JOB_POSITION',
+            selectDispOpt: 'name'
           }
         },
         {
           type: 'date',
           name: 'hiredOn',
           header: i18next.t('field.hired-on'),
-          width: 100,
+          width: 120,
           record: {
             editable: true
           },
@@ -372,7 +415,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
           type: 'date',
           name: 'retiredAt',
           header: i18next.t('label.retired-at'),
-          width: 100,
+          width: 120,
           record: {
             editable: true
           }
@@ -415,17 +458,8 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
           sortable: true
         },
         {
-          type: 'image',
-          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>`
-            }
-          },
+          type: 'resource-object',
+          name: 'contact',
           hidden: true
         }
       ],
@@ -470,6 +504,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
               }
               department {
                 id
+                controlNo
                 name
                 description
               }
@@ -518,7 +553,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
     }
   }
 
-  async _deleteEmployee() {
+  async onDeleteEmployee() {
     if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
       const ids = this.grist.selected.map(record => record.id)
       if (ids && ids.length > 0) {
@@ -543,7 +578,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
     }
   }
 
-  async _updateEmployee() {
+  async onUpdateEmployee() {
     let patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
@@ -628,43 +663,10 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
       return
     }
 
-    const response = await client.query({
-      query: gql`
-        query ($id: String!) {
-          contact(id: $id) {
-            id
-            name
-            company
-            department
-            email
-            phone
-            address
-            note
-            items {
-              type
-              label
-              value
-            }
-            profile {
-              left
-              top
-              zoom
-              picture
-            }
-          }
-        }
-      `,
-      variables: {
-        id: record.contact.id
-      }
-    })
-
-    const { contact } = response.data
-
     const popup = openPopup(
       html`
         <contact-popup
-          .contact=${contact}
+          .contactId=${record.contact.id}
           @change=${() => {
             this.grist.fetch()
           }}
@@ -696,37 +698,59 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
   }
 
   async attachContact(record: GristRecord, contact: Contact) {
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $contactId: String!) {
-          attachContact(id: $id, contactId: $contactId) {
-            id
+    if (record.id) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!, $contactId: String!) {
+            attachContact(id: $id, contactId: $contactId) {
+              id
+            }
           }
+        `,
+        variables: {
+          id: record.id,
+          contactId: contact.id
         }
-      `,
-      variables: {
-        id: record.id,
-        contactId: contact.id
-      }
-    })
+      })
+
+      this.grist.fetch()
+    } else if (contact?.id) {
+      this.grist.addRecord({
+        name: contact.name,
+        contact: {
+          id: contact.id,
+          name: contact.name,
+          email: (contact as any).email,
+          phone: (contact as any).phone,
+          address: (contact as any).address
+        }
+      })
+      this.grist.refresh()
+      await this.grist.requestUpdate()
 
-    this.grist.fetch()
+      this.grist.checkDirties()
+    }
   }
 
   async detachContact(record) {
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!) {
-          detachContact(id: $id) {
-            id
+    if (record.id) {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!) {
+            detachContact(id: $id) {
+              id
+            }
           }
+        `,
+        variables: {
+          id: record.id
         }
-      `,
-      variables: {
-        id: record.id
-      }
-    })
+      })
 
-    this.grist.fetch()
+      this.grist.fetch()
+    } else {
+      record.contact = null
+      this.grist.refresh()
+    }
   }
 }

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

@@ -18,7 +18,7 @@ import { Department } from '../../types/department'
 import { EmployeeListPage } from './employee-list-page'
 
 const departmentFragment = gql`
-  fragment Department_department on Department {
+  fragment SubDepartmentFragment on Department {
     id
     controlNo
     name
@@ -484,22 +484,22 @@ export class EmployeesByDepartment extends connect(store)(localize(i18next)(Scop
     const response = await client.query({
       query: gql`
         query {
-          responses: departmentRoot {
-            ...Department_department
+          responses: departmentRoots {
+            ...SubDepartmentFragment
             children {
-              ...Department_department
+              ...SubDepartmentFragment
               children {
-                ...Department_department
+                ...SubDepartmentFragment
                 children {
-                  ...Department_department
+                  ...SubDepartmentFragment
                   children {
-                    ...Department_department
+                    ...SubDepartmentFragment
                     children {
-                      ...Department_department
+                      ...SubDepartmentFragment
                       children {
-                        ...Department_department
+                        ...SubDepartmentFragment
                         children {
-                          ...Department_department
+                          ...SubDepartmentFragment
                         }
                       }
                     }

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

@@ -86,8 +86,8 @@ ApprovalLineBrief.styles = [
       }
 
       [past] span {
-        background-color: rgba(255, 255, 255, 0.9);
-        color: var(--primary-text-color);
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
       }
 
       [current] span {

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

@@ -1 +1 @@
-{"version":3,"file":"approval-line-brief.js","sourceRoot":"","sources":["../../client/component/approval-line-brief.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGlD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA7D;;QA4EsB,UAAK,GAAuB,EAAE,CAAA;QAC7B,YAAO,GAAW,CAAC,CAAC,CAAA;IAiClD,CAAC;IA/BC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAE5B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO,GAAG,CAAC,yBAAyB;YACpG,CAAC,CAAC,IAAI,CAAA,EAAE;UACR,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;;KAEjE,CAAA;IACH,CAAC;IAED,UAAU,CAAC,IAAsB,EAAE,KAAa;QAC9C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC/B,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,IAAI;YAC3B,IAAI,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC,QAAQ,CAC7G,IAAK,CACN;gBACC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;gBAC5B,CAAC,CAAC,EAAE;SACP,CAAA;QAED,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,KAAK,UAAU,IAAI,CAAC,OAAO,GAAG,KAAK,UAAU,IAAI,IAAI,EAAE;gBACrF,KAAK,GAAG,CAAC;eACV,IAAI;;KAEd,CAAA;IACH,CAAC;;AA5GM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;CACF,AAzEY,CAyEZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAA+B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAqB;AA7ErC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA8G7B","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ApprovalLineItem } from '../types/approval-line'\nimport { OrgMemberTargetType } from '../types/org-member'\n\n@customElement('approval-line-brief')\nexport class ApprovalLineBrief extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      ol {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n      }\n\n      li {\n        position: relative;\n        width: 85px;\n        text-align: center;\n        color: rgba(255, 255, 255, 0.7);\n      }\n\n      li div {\n        text-align: center;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      span:before {\n        content: '';\n        height: 2px;\n        width: 70px;\n        display: block;\n        position: absolute;\n        margin-left: -70px;\n        margin-top: 6px;\n        background-color: rgba(0, 0, 0, 0.4);\n      }\n\n      span {\n        display: block;\n        width: 15px;\n        height: 15px;\n        margin: auto;\n        background-color: rgba(0, 0, 0, 0.4);\n        border-radius: 50%;\n        color: var(--md-sys-color-on-primary);\n        line-height: 1.2;\n      }\n\n      [past] span {\n        background-color: rgba(255, 255, 255, 0.9);\n        color: var(--primary-text-color);\n      }\n\n      [current] span {\n        background-color: #84d600;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      [current] {\n        font-weight: bold;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      [past] span:before,\n      [current] span:before {\n        background-color: rgba(255, 255, 255, 0.9);\n      }\n\n      li:first-child span:before {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) model: ApprovalLineItem[] = []\n  @property({ type: Number }) current: number = -1\n\n  render() {\n    const items = this.model || []\n    const current = this.current\n\n    return html`\n      <ol>\n        ${this.model\n          ? html` <li approver ?current=${this.current <= 0} ?past=${this.current > 0}><span>1</span>ME</li> `\n          : html``}\n        ${items.map((item, order) => this.renderItem(item, order + 1))}\n      </ol>\n    `\n  }\n\n  renderItem(item: ApprovalLineItem, order: number): TemplateResult {\n    const { type, approver } = item\n    const { name } = approver || {\n      name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(\n        type!\n      )\n        ? i18next.t(`label.${type}`)\n        : ''\n    }\n\n    return html`\n      <li approver ?current=${this.current == order} ?past=${this.current > order} title=${name || ''}>\n        <span>${order + 1}</span>\n        <div>${name}</div>\n      </li>\n    `\n  }\n}\n"]}
+{"version":3,"file":"approval-line-brief.js","sourceRoot":"","sources":["../../client/component/approval-line-brief.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGlD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA7D;;QA4EsB,UAAK,GAAuB,EAAE,CAAA;QAC7B,YAAO,GAAW,CAAC,CAAC,CAAA;IAiClD,CAAC;IA/BC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAE5B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO,GAAG,CAAC,yBAAyB;YACpG,CAAC,CAAC,IAAI,CAAA,EAAE;UACR,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;;KAEjE,CAAA;IACH,CAAC;IAED,UAAU,CAAC,IAAsB,EAAE,KAAa;QAC9C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC/B,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,IAAI;YAC3B,IAAI,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC,QAAQ,CAC7G,IAAK,CACN;gBACC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;gBAC5B,CAAC,CAAC,EAAE;SACP,CAAA;QAED,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,KAAK,UAAU,IAAI,CAAC,OAAO,GAAG,KAAK,UAAU,IAAI,IAAI,EAAE;gBACrF,KAAK,GAAG,CAAC;eACV,IAAI;;KAEd,CAAA;IACH,CAAC;;AA5GM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;CACF,AAzEY,CAyEZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAA+B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAqB;AA7ErC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA8G7B","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ApprovalLineItem } from '../types/approval-line'\nimport { OrgMemberTargetType } from '../types/org-member'\n\n@customElement('approval-line-brief')\nexport class ApprovalLineBrief extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      ol {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n      }\n\n      li {\n        position: relative;\n        width: 85px;\n        text-align: center;\n        color: rgba(255, 255, 255, 0.7);\n      }\n\n      li div {\n        text-align: center;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      span:before {\n        content: '';\n        height: 2px;\n        width: 70px;\n        display: block;\n        position: absolute;\n        margin-left: -70px;\n        margin-top: 6px;\n        background-color: rgba(0, 0, 0, 0.4);\n      }\n\n      span {\n        display: block;\n        width: 15px;\n        height: 15px;\n        margin: auto;\n        background-color: rgba(0, 0, 0, 0.4);\n        border-radius: 50%;\n        color: var(--md-sys-color-on-primary);\n        line-height: 1.2;\n      }\n\n      [past] span {\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n      }\n\n      [current] span {\n        background-color: #84d600;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      [current] {\n        font-weight: bold;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      [past] span:before,\n      [current] span:before {\n        background-color: rgba(255, 255, 255, 0.9);\n      }\n\n      li:first-child span:before {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) model: ApprovalLineItem[] = []\n  @property({ type: Number }) current: number = -1\n\n  render() {\n    const items = this.model || []\n    const current = this.current\n\n    return html`\n      <ol>\n        ${this.model\n          ? html` <li approver ?current=${this.current <= 0} ?past=${this.current > 0}><span>1</span>ME</li> `\n          : html``}\n        ${items.map((item, order) => this.renderItem(item, order + 1))}\n      </ol>\n    `\n  }\n\n  renderItem(item: ApprovalLineItem, order: number): TemplateResult {\n    const { type, approver } = item\n    const { name } = approver || {\n      name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(\n        type!\n      )\n        ? i18next.t(`label.${type}`)\n        : ''\n    }\n\n    return html`\n      <li approver ?current=${this.current == order} ?past=${this.current > order} title=${name || ''}>\n        <span>${order + 1}</span>\n        <div>${name}</div>\n      </li>\n    `\n  }\n}\n"]}

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

@@ -12,7 +12,7 @@ export declare class ApprovalLineItemsEditorPopup extends ApprovalLineItemsEdito
     confirmCallback?: (value?: ApprovalLineItem[] | null) => void;
     editor: ApprovalLineItemsEditor;
     private changedValue?;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
     onEmpty(): Promise<void>;
     onCancel(): void;

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

@@ -3,7 +3,7 @@ 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';
-import { ButtonContainerStyles } from '@operato/styles';
+import { CommonHeaderStyles } from '@operato/styles';
 import { closePopup } from '@operato/popup';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { ApprovalLineItemsEditor } from './approval-line-items-editor';
@@ -25,13 +25,15 @@ let ApprovalLineItemsEditorPopup = class ApprovalLineItemsEditorPopup extends lo
         }}
       ></approval-line-items-editor>
 
-      <div class="button-container" style="margin-left:unset;">
+      <div class="footer">
         <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>
+        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `;
     }
@@ -59,7 +61,7 @@ let ApprovalLineItemsEditorPopup = class ApprovalLineItemsEditorPopup extends lo
     }
 };
 ApprovalLineItemsEditorPopup.styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css `
       :host {
         display: flex;

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;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;IAiDxD,CAAC;IA/CC,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;sDACM,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;yBAGtD,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,CAAC;YACb,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;YAClD,UAAU,CAAC,IAAI,CAAC,CAAA;QAClB,CAAC;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;;AAtEM,mCAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,AAdY,CAcZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;2DAA2B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qEAA8D;AACpD;IAApC,KAAK,CAAC,4BAA4B,CAAC;8BAAU,uBAAuB;IAErE,wEAAwE;;4DAFH;AApB1D,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAwExC","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: var(--md-sys-color-surface);\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)}>\n          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}\n        </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"]}
+{"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,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,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;IAmDxD,CAAC;IAjDC,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;sDACM,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;;;yBAKtD,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,gCAAgC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAExG,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,CAAC;YACb,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;YAClD,UAAU,CAAC,IAAI,CAAC,CAAA;QAClB,CAAC;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;;AAxEM,mCAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,AAdY,CAcZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;2DAA2B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qEAA8D;AACpD;IAApC,KAAK,CAAC,4BAA4B,CAAC;8BAAU,uBAAuB;IAErE,wEAAwE;;4DAFH;AApB1D,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CA0ExC","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 { CommonHeaderStyles } 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    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\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=\"footer\">\n        <button @click=${this.onEmpty.bind(this)}>\n          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}\n        </button>\n\n        <div filler></div>\n\n        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>\n        <button @click=${this.onConfirm.bind(this)} done><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.d.ts

@@ -1,7 +1,7 @@
 import './approval-line-view';
 import './approval-line-selector';
 import { LitElement } from 'lit';
-import { DataGrist } from '@operato/data-grist';
+import { DataGrist, FetchOption } from '@operato/data-grist';
 import { ApprovalLineView } from './approval-line-view';
 import { ApprovalLineItem } from '../types/approval-line';
 declare const ApprovalLineItemsEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
@@ -15,17 +15,12 @@ export declare class ApprovalLineItemsEditor extends ApprovalLineItemsEditor_bas
     grist?: DataGrist;
     view?: ApprovalLineView;
     private popup?;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): Promise<void>;
-    fetchHandler({ filters, page, limit, sortings }: {
-        filters: any;
-        page: any;
-        limit: any;
-        sortings?: never[] | undefined;
-    }): Promise<{
+    fetchHandler({ filters, page, limit, sortings }: FetchOption): {
         total: number;
         records: ApprovalLineItem[];
-    }>;
+    };
     deleteDataItems(): Promise<void>;
     openSelector(): void;
 }

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

@@ -39,6 +39,7 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
             <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>
@@ -226,7 +227,7 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
             sorters: []
         };
     }
-    async fetchHandler({ filters, page, limit, sortings = [] }) {
+    fetchHandler({ filters, page, limit, sortings = [] }) {
         const value = [...(this.value || [])];
         this.value = value;
         return {
@@ -283,10 +284,8 @@ ApprovalLineItemsEditor.styles = [
         flex: 1;
       }
 
-      #select {
-        display: flex;
-        justify-content: end;
-        padding: 10px;
+      .header {
+        grid-template-areas: 'filters actions';
       }
     `
 ];