@things-factory/accounting 7.0.6 → 7.1.2

package/client/activities/activity-book-edit.ts

@@ -25,7 +25,7 @@ export class ActivityBookView extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: var(--md-sys-color-surface);
+        background-color: #fff;
       }
 
       book-edit {

package/client/activities/activity-book-view.ts

@@ -25,7 +25,7 @@ export class ActivityBookView extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: var(--md-sys-color-surface);
+        background-color: #fff;
       }
 
       book-view {

package/client/activities/activity-expense-edit.ts

@@ -25,7 +25,7 @@ export class ActivityExpenseView extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: var(--md-sys-color-surface);
+        background-color: #fff;
       }
 
       expense-edit {

package/client/activities/activity-expense-view.ts

@@ -25,7 +25,7 @@ export class ActivityExpenseView extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: var(--md-sys-color-surface);
+        background-color: #fff;
       }
 
       expense-view {

package/client/bootstrap.ts

@@ -1 +1,10 @@
-export default function bootstrap() {}
+import { registerEditor, registerRenderer } from '@operato/data-grist'
+
+import { GristRendererAccountingCategoryObject } from './grist-editors/grist-renderer-accounting-category-object'
+import { GristEditorAccountingCategoryObject } from './grist-editors/grist-editor-accounting-category-object'
+
+export default function bootstrap() {
+  registerEditor('accounting-category-object', GristEditorAccountingCategoryObject)
+
+  registerRenderer('accounting-category-object', GristRendererAccountingCategoryObject)
+}

package/client/components/accounting-category-selector.ts

@@ -0,0 +1,136 @@
+import '@material/web/icon/icon.js'
+import '@operato/data-tree'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+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 { CommonHeaderStyles } from '@operato/styles'
+
+import { AccountingCategory } from '../types/accounting-category'
+
+const accountingCategoryFragment = gql`
+  fragment SubAccountingCategory on AccountingCategory {
+    id
+    code
+    name
+    description
+    active
+  }
+`
+
+@customElement('accounting-category-selector')
+export class AccountingCategorySelector extends LitElement {
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+
+        overflow: auto;
+      }
+
+      ox-tree-vertical {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Object }) confirmCallback?: (selected?: any) => void
+  @property({ type: Object }) value?: AccountingCategory
+
+  @state() root?: AccountingCategory
+
+  render() {
+    return html`
+      <ox-tree-vertical
+        .data=${this.root}
+        .selected=${this.value}
+        @select=${e => this.onSelect(e, false)}
+        @select-confirm=${e => this.onSelect(e, true)}
+        id-property="code"
+        label-property="name"
+        description-property="description"
+      ></ox-tree-vertical>
+
+      <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)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
+      </div>
+    `
+  }
+
+  onSelect(e: CustomEvent, confirm?: boolean) {
+    this.value = e.detail as AccountingCategory
+
+    if (confirm) {
+      this.onConfirm()
+    }
+  }
+
+  onEmpty() {
+    this.confirmCallback && this.confirmCallback(null)
+    closePopup(this)
+  }
+
+  onCancel() {
+    closePopup(this)
+  }
+
+  onConfirm() {
+    this.confirmCallback && this.confirmCallback(this.value)
+    closePopup(this)
+  }
+
+  async firstUpdated() {
+    const response = await client.query({
+      query: gql`
+        query {
+          responses: accountingCategoryRoots {
+            total
+            items {
+              ...SubAccountingCategory
+              children {
+                ...SubAccountingCategory
+                children {
+                  ...SubAccountingCategory
+                  children {
+                    ...SubAccountingCategory
+                    children {
+                      ...SubAccountingCategory
+                      children {
+                        ...SubAccountingCategory
+                        children {
+                          ...SubAccountingCategory
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        ${accountingCategoryFragment}
+      `
+    })
+
+    const { items: records, total } = response.data.responses
+
+    this.root = records[0]
+  }
+}

package/client/components/accounting-category-view.ts

@@ -0,0 +1,75 @@
+import '@operato/property-editor'
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+
+import { LitElement, css, html, PropertyValueMap } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('accounting-category-view')
+export class AccountingCategoryView extends localize(i18next)(ScopedElementsMixin(LitElement)) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: auto;
+      }
+
+      ox-properties-dynamic-view {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+      }
+    `
+  ]
+
+  @property({ type: Object }) accountingCategory: any
+
+  @query('ox-properties-dynamic-view') dynamicView!: any
+
+  @state() private properties: any
+
+  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+    this.properties = [
+      {
+        type: 'string',
+        name: 'code',
+        label: 'code'
+      },
+      {
+        type: 'string',
+        name: 'name',
+        label: 'name'
+      },
+      {
+        type: 'string',
+        name: 'description',
+        label: 'description'
+      },
+      {
+        type: 'boolean',
+        name: 'active',
+        label: 'active'
+      }
+    ]
+  }
+
+  render() {
+    return html`
+      <ox-properties-dynamic-view
+        .props=${this.properties}
+        .value=${this.accountingCategory}
+        @property-change=${this.onPropertyChange.bind(this)}
+      ></ox-properties-dynamic-view>
+    `
+  }
+
+  onPropertyChange(e: CustomEvent) {
+    this.accountingCategory = e.detail
+  }
+}

package/client/grist-editors/grist-editor-accounting-category-object.ts

@@ -0,0 +1,83 @@
+import '../components/accounting-category-selector.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-accounting-category-object')
+export class GristEditorAccountingCategoryObject extends OxGristEditor {
+  private popup?: PopupHandle
+  private template?: TemplateResult
+
+  get editorTemplate() {
+    var { name, description } = this.value || {}
+
+    return html`
+      ${!this.value
+        ? html``
+        : html` <span tabindex="0" style="flex:1">${name || ''}${(description && `(${description})`) || ''}</span> `}
+    `
+  }
+
+  _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
+              ? {
+                  id: selected.id,
+                  code: selected.code,
+                  name: selected.name,
+                  description: selected.description
+                }
+              : null,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var value = this.value || {}
+
+    var template =
+      this.template ||
+      html`
+        <accounting-category-selector
+          .value=${value}
+          .confirmCallback=${confirmCallback.bind(this)}
+        ></accounting-category-selector>
+      `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select_item')
+    })
+  }
+}

package/client/grist-editors/grist-renderer-accounting-category-object.ts

@@ -0,0 +1,13 @@
+import { html } from 'lit-html'
+
+import { FieldRenderer } from '@operato/data-grist'
+
+export const GristRendererAccountingCategoryObject: FieldRenderer = (value, column, record, rowIndex, field) => {
+  if (!value) {
+    return ''
+  }
+
+  const { name, description } = value
+
+  return html`<span>${name || ''}${(description && `(${description})`) || ''}</span> `
+}

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

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

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

@@ -96,7 +96,7 @@ export class AccountListPage extends connect(store)(localize(i18next)(ScopedElem
 
           <div id="sorters">
             Sort
-            <md-icon
+            <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -104,7 +104,7 @@ export class AccountListPage extends connect(store)(localize(i18next)(ScopedElem
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</md-icon
+              >expand_more</mwc-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -112,10 +112,9 @@ export class AccountListPage extends connect(store)(localize(i18next)(ScopedElem
           </div>
 
           <div id="modes">
-            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
-            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
-            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
-          </div>
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
           </div>
         </div>
       </ox-grist>
@@ -131,17 +130,42 @@ export class AccountListPage extends connect(store)(localize(i18next)(ScopedElem
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'code',
+          header: i18next.t('field.code'),
+          record: {
+            editable: true,
+            mandatory: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
         {
           type: 'string',
           name: 'name',
           header: i18next.t('field.name'),
           record: {
-            editable: true
+            editable: true,
+            mandatory: true
           },
           filter: 'search',
           sortable: true,
           width: 150
         },
+        {
+          type: 'accounting-category-object',
+          name: 'category',
+          header: i18next.t('field.category'),
+          record: {
+            editable: true,
+            mandatory: true
+          },
+          sortable: false,
+          filter: true,
+          width: 150
+        },
         {
           type: 'string',
           name: 'description',
@@ -192,7 +216,7 @@ export class AccountListPage extends connect(store)(localize(i18next)(ScopedElem
       },
       sorters: [
         {
-          name: 'name'
+          name: 'code'
         }
       ]
     }
@@ -211,9 +235,15 @@ export class AccountListPage extends connect(store)(localize(i18next)(ScopedElem
           responses: accounts(filters: $filters, pagination: $pagination, sortings: $sortings) {
             items {
               id
+              code
               name
               description
               active
+              category {
+                code
+                name
+                description
+              }
               updater {
                 id
                 name

package/client/pages/accounting-category/accounting-category-importer.ts

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

package/client/pages/accounting-category/accounting-category-list-page.ts

@@ -101,7 +101,7 @@ export class AccountingCategoryListPage extends connect(store)(localize(i18next)
 
           <div id="sorters">
             Sort
-            <md-icon
+            <mwc-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -109,7 +109,7 @@ export class AccountingCategoryListPage extends connect(store)(localize(i18next)
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</md-icon
+              >expand_more</mwc-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -117,9 +117,9 @@ export class AccountingCategoryListPage extends connect(store)(localize(i18next)
           </div>
 
           <div id="modes">
-            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
-            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
-            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
           </div>
         </div>
       </ox-grist>
@@ -135,17 +135,41 @@ export class AccountingCategoryListPage extends connect(store)(localize(i18next)
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'code',
+          header: i18next.t('field.code'),
+          record: {
+            editable: true,
+            mandatory: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
         {
           type: 'string',
           name: 'name',
           header: i18next.t('field.name'),
           record: {
-            editable: true
+            editable: true,
+            mandatory: true
           },
           filter: 'search',
           sortable: true,
           width: 150
         },
+        {
+          type: 'resource-object',
+          name: 'parent',
+          header: i18next.t('field.parent'),
+          record: {
+            editable: true
+          },
+          filter: true,
+          sortable: true,
+          width: 150
+        },
         {
           type: 'string',
           name: 'description',
@@ -215,9 +239,15 @@ export class AccountingCategoryListPage extends connect(store)(localize(i18next)
           responses: accountingCategories(filters: $filters, pagination: $pagination, sortings: $sortings) {
             items {
               id
+              code
               name
               description
               active
+              parent {
+                code
+                name
+                description
+              }
               updater {
                 id
                 name