@things-factory/organization 7.0.55 → 7.0.56

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

@@ -57,8 +57,8 @@ export class ApprovalLineBrief extends localize(i18next)(LitElement) {
       }
 
       [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/client/component/approval-line-items-editor-popup.ts

@@ -3,7 +3,7 @@ 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 { CommonHeaderStyles } from '@operato/styles'
 import { closePopup } from '@operato/popup'
 import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
@@ -16,7 +16,7 @@ import { ApprovalLineItem } from '../types/approval-line'
 @customElement('approval-line-items-editor-popup')
 export class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement) {
   static styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -48,13 +48,15 @@ export class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement)
         }}
       ></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>
     `
   }

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

@@ -5,7 +5,7 @@ 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 { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'
 import { isMobileDevice } from '@operato/utils'
 import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
 import { openPopup, PopupHandle } from '@operato/layout'
@@ -37,10 +37,8 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
         flex: 1;
       }
 
-      #select {
-        display: flex;
-        justify-content: end;
-        padding: 10px;
+      .header {
+        grid-template-areas: 'filters actions';
       }
     `
   ]
@@ -82,6 +80,7 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
             <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>
@@ -275,7 +274,7 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
     }
   }
 
-  async fetchHandler({ filters, page, limit, sortings = [] }) {
+  fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {
     const value = [...(this.value || [])]
     this.value = value
 

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

@@ -19,14 +19,14 @@ import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
 import { isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
+import { CommonHeaderStyles } from '@operato/styles'
 
 import { ApprovalLineView } from './approval-line-view'
 
 @customElement('approval-line-selector')
 export class ApprovalLineSelector extends LitElement {
   static styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -72,13 +72,13 @@ export class ApprovalLineSelector extends LitElement {
       >
       </ox-grist>
 
-      <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>
     `
   }

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

@@ -6,9 +6,9 @@ import { customElement, property, query } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
-import { getEditor, getRenderer } from '@operato/data-grist'
+import { FetchOption, getEditor, getRenderer } from '@operato/data-grist'
 import { isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
+import { CommonHeaderStyles } from '@operato/styles'
 
 import { ApprovalLine } from '../types/approval-line'
 
@@ -20,7 +20,7 @@ import { ApprovalLine } from '../types/approval-line'
 @customElement('approval-line-templates-manager')
 export class ApprovalLineTemplatesManager extends localize(i18next)(LitElement) {
   static styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -48,11 +48,13 @@ export class ApprovalLineTemplatesManager extends localize(i18next)(LitElement)
         .fetchHandler=${this.fetchHandler.bind(this)}
       ></ox-grist>
 
-      <div class="button-container">
+      <div class="footer">
         <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>
+        <button @click=${this._updateDataItems.bind(this)} done>
+          <md-icon>save</md-icon>${i18next.t('button.save')}
+        </button>
       </div>
     `
   }
@@ -175,7 +177,7 @@ export class ApprovalLineTemplatesManager extends localize(i18next)(LitElement)
     }
   }
 
-  async fetchHandler({ filters, page, limit, sortings = [] }) {
+  async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {
     const model = this.approvalLine?.model || []
 
     return {

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

@@ -44,7 +44,7 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
         position: absolute;
         margin-left: -25px;
         margin-top: 10px;
-        background-color: var(--secondary-text-color);
+        background-color: var(--md-sys-color-primary);
         opacity: 0.4;
       }
 
@@ -56,27 +56,31 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
         display: block;
         margin: auto;
         margin-bottom: var(--spacing-small);
+        color: var(--md-sys-color-primary);
         background-color: var(--md-sys-color-surface-variant);
         border-radius: 5px;
-        border: 2px solid var(--secondary-text-color);
+        border: 2px solid var(--md-sys-color-primary);
         font-size: var(--fontsize-small);
-        color: var(--secondary-text-color);
         line-height: 1;
         padding: var(--spacing-small) var(--spacing-medium);
       }
+
       [approver][current] span {
-        background-color: var(--secondary-text-color);
-        border-color: var(--secondary-text-color);
+        background-color: var(--md-sys-color-primary);
+        border-color: var(--md-sys-color-primary);
         color: var(--md-sys-color-on-primary);
       }
+
       [approver][current] {
         font-weight: bold;
       }
+
       [approver][current] ~ li span {
         background-color: rgba(0, 0, 0, 0.5);
         border-color: transparent;
         color: var(--md-sys-color-on-primary);
       }
+
       [approver][current] ~ li:before {
         background-color: rgba(0, 0, 0, 0.4);
         opacity: 1;
@@ -84,7 +88,7 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) model?: ApprovalLineItem[]
+  @property({ type: Array }) model?: ApprovalLineItem[]
   @property({ type: Number }) current?: number = -1
 
   render() {

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

@@ -3,7 +3,7 @@ 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 { CommonHeaderStyles } from '@operato/styles'
 import { closePopup } from '@operato/popup'
 
 import { AssigneesEditor } from './assignees-editor'
@@ -15,7 +15,7 @@ import { AssigneeItem } from '../types/org-member'
 @customElement('assignees-editor-popup')
 export class AssigneesEditorPopup extends localize(i18next)(LitElement) {
   static styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -47,13 +47,13 @@ export class AssigneesEditorPopup extends localize(i18next)(LitElement) {
         }}
       ></assignees-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>
     `
   }

package/client/component/assignees-editor.ts

@@ -5,7 +5,7 @@ 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 { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'
 import { isMobileDevice } from '@operato/utils'
 import { ButtonContainerStyles } from '@operato/styles'
 
@@ -42,7 +42,7 @@ export class AssigneesEditor extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) value?: AssigneeItem[]
+  @property({ type: Array }) value?: AssigneeItem[]
 
   @state() gristConfig?: any
 
@@ -201,7 +201,7 @@ export class AssigneesEditor extends localize(i18next)(LitElement) {
     }
   }
 
-  async fetchHandler({ filters, page, limit, sortings = [] }) {
+  async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {
     const value = [...(this.value || [])]
     this.value = value
 

package/client/component/department-selector.ts

@@ -8,12 +8,12 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ButtonContainerStyles } from '@operato/styles'
+import { CommonHeaderStyles } from '@operato/styles'
 
 import { Department } from '../types/department'
 
 const departmentFragment = gql`
-  fragment Department_department on Department {
+  fragment SubDepartment on Department {
     id
     controlNo
     name
@@ -27,7 +27,6 @@ const departmentFragment = gql`
       email
     }
     active
-    state
     picture
 
     updater {
@@ -41,7 +40,7 @@ const departmentFragment = gql`
 @customElement('department-selector')
 export class DepartmentSelector extends LitElement {
   static styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -70,16 +69,18 @@ export class DepartmentSelector extends LitElement {
         .data=${this.root}
         .selected=${this.value}
         @select=${this.onSelect.bind(this)}
+        id-property="controlNo"
         label-property="name"
+        description-property="description"
       ></ox-tree-vertical>
 
-      <div class="button-container" style="margin-left:unset;">
+      <div class="footer" style="margin-left:unset;">
         <button @click=${this.onEmpty.bind(this)}>
           <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
         </button>
         <div filler></div>
         <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
-        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
+        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }
@@ -106,22 +107,22 @@ export class DepartmentSelector extends LitElement {
     const response = await client.query({
       query: gql`
         query {
-          responses: departmentRoot {
-            ...Department_department
-            children {
-              ...Department_department
+          responses: departmentRoots {
+            total
+            items {
+              ...SubDepartment
               children {
-                ...Department_department
+                ...SubDepartment
                 children {
-                  ...Department_department
+                  ...SubDepartment
                   children {
-                    ...Department_department
+                    ...SubDepartment
                     children {
-                      ...Department_department
+                      ...SubDepartment
                       children {
-                        ...Department_department
+                        ...SubDepartment
                         children {
-                          ...Department_department
+                          ...SubDepartment
                         }
                       }
                     }
@@ -136,6 +137,8 @@ export class DepartmentSelector extends LitElement {
       `
     })
 
-    this.root = response.data.responses
+    const { items: records, total } = response.data.responses
+
+    this.root = records[0]
   }
 }

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

@@ -3,7 +3,7 @@ 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 { CommonHeaderStyles } from '@operato/styles'
 import { closePopup } from '@operato/popup'
 
 import { RecipientsEditor } from './recipients-editor'
@@ -15,7 +15,7 @@ import { AssigneeItem } from '../types/org-member'
 @customElement('recipients-editor-popup')
 export class RecipientsEditorPopup extends localize(i18next)(LitElement) {
   static styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -47,13 +47,13 @@ export class RecipientsEditorPopup extends localize(i18next)(LitElement) {
         }}
       ></recipients-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>
     `
   }

package/client/component/recipients-editor.ts

@@ -5,7 +5,7 @@ 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 { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'
 import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
@@ -196,7 +196,7 @@ export class RecipientsEditor extends localize(i18next)(LitElement) {
     }
   }
 
-  async fetchHandler({ filters, page, limit, sortings = [] }) {
+  async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {
     const value = [...(this.value || [])]
     this.value = value
 

package/client/grist-editor/grist-editor-department-object.ts

@@ -50,6 +50,7 @@ export class GristEditorDepartmentObject extends OxGristEditor {
             after: selected
               ? {
                   id: selected.id,
+                  controlNo: selected.controlNo,
                   name: selected.name,
                   description: selected.description
                 }

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

@@ -8,11 +8,11 @@ import { property } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
+import { CommonHeaderStyles } from '@operato/styles'
 
 export class DepartmentImporter extends LitElement {
   static styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -63,8 +63,9 @@ export class DepartmentImporter extends LitElement {
         }}
       ></ox-grist>
 
-      <div class="button-container">
-        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

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

@@ -19,8 +19,8 @@ import gql from 'graphql-tag'
 import { DepartmentImporter } from './department-importer'
 import { Department } from '../../types/department'
 
-const departmentFragment = gql`
-  fragment departmentFragment on Department {
+const SubDepartmentFragment = gql`
+  fragment SubDepartmentFragment on Department {
     id
     controlNo
     name
@@ -139,21 +139,21 @@ export class DepartmentListPage extends connect(store)(localize(i18next)(ScopedE
           responses: departmentRoots(filters: $filters, pagination: $pagination, sortings: $sortings) {
             total
             items {
-              ...departmentFragment
+              ...SubDepartmentFragment
               children(filters: $filters, sortings: $sortings) {
-                ...departmentFragment
+                ...SubDepartmentFragment
                 children(filters: $filters, sortings: $sortings) {
-                  ...departmentFragment
+                  ...SubDepartmentFragment
                   children(filters: $filters, sortings: $sortings) {
-                    ...departmentFragment
+                    ...SubDepartmentFragment
                     children(filters: $filters, sortings: $sortings) {
-                      ...departmentFragment
+                      ...SubDepartmentFragment
                       children(filters: $filters, sortings: $sortings) {
-                        ...departmentFragment
+                        ...SubDepartmentFragment
                         children(filters: $filters, sortings: $sortings) {
-                          ...departmentFragment
+                          ...SubDepartmentFragment
                           children(filters: $filters, sortings: $sortings) {
-                            ...departmentFragment
+                            ...SubDepartmentFragment
                           }
                         }
                       }
@@ -165,7 +165,7 @@ export class DepartmentListPage extends connect(store)(localize(i18next)(ScopedE
           }
         }
 
-        ${departmentFragment}
+        ${SubDepartmentFragment}
       `,
       variables: {
         filters,

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

@@ -17,8 +17,8 @@ import { Department } from '../../types/department'
 
 import { DepartmentView } from '../../component/department-view'
 
-const departmentFragment = gql`
-  fragment departmentFragment on Department {
+const SubDepartmentFragment = gql`
+  fragment SubDepartmentFragment on Department {
     id
     controlNo
     name
@@ -174,11 +174,11 @@ export class DepartmentTreePage extends connect(store)(localize(i18next)(ScopedE
       mutation: gql`
         mutation ($department: NewDepartment!) {
           createDepartment(department: $department) {
-            ...departmentFragment
+            ...SubDepartmentFragment
           }
         }
 
-        ${departmentFragment}
+        ${SubDepartmentFragment}
       `,
       variables: {
         department
@@ -224,11 +224,11 @@ export class DepartmentTreePage extends connect(store)(localize(i18next)(ScopedE
       mutation: gql`
         mutation ($id: String!, $patch: DepartmentPatch!) {
           updateDepartment(id: $id, patch: $patch) {
-            ...departmentFragment
+            ...SubDepartmentFragment
           }
         }
 
-        ${departmentFragment}
+        ${SubDepartmentFragment}
       `,
       variables: {
         id,
@@ -306,21 +306,21 @@ export class DepartmentTreePage extends connect(store)(localize(i18next)(ScopedE
           responses: departmentRoots {
             total
             items {
-              ...departmentFragment
+              ...SubDepartmentFragment
               children {
-                ...departmentFragment
+                ...SubDepartmentFragment
                 children {
-                  ...departmentFragment
+                  ...SubDepartmentFragment
                   children {
-                    ...departmentFragment
+                    ...SubDepartmentFragment
                     children {
-                      ...departmentFragment
+                      ...SubDepartmentFragment
                       children {
-                        ...departmentFragment
+                        ...SubDepartmentFragment
                         children {
-                          ...departmentFragment
+                          ...SubDepartmentFragment
                           children {
-                            ...departmentFragment
+                            ...SubDepartmentFragment
                           }
                         }
                       }
@@ -332,7 +332,7 @@ export class DepartmentTreePage extends connect(store)(localize(i18next)(ScopedE
           }
         }
 
-        ${departmentFragment}
+        ${SubDepartmentFragment}
       `
     })
     const { items: records, total } = response.data.responses

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

@@ -8,11 +8,11 @@ import { property } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
+import { CommonHeaderStyles } from '@operato/styles'
 
 export class EmployeeImporter extends LitElement {
   static styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -63,8 +63,9 @@ export class EmployeeImporter extends LitElement {
         }}
       ></ox-grist>
 
-      <div class="button-container">
-        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }