@things-factory/accounting 8.0.0-alpha.1 → 8.0.0-alpha.11

package/client/pages/{ledger/ledger-list-page.ts → bank/bank-list-page.ts}

@@ -1,47 +1,57 @@
-import '@operato/data-grist'
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import '@operato/data-grist/ox-grist.js'
+import '@operato/data-grist/ox-filters-form.js'
+import '@operato/data-grist/ox-record-creator.js'
 
-import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
+import { ColumnConfig, DataGrist, FetchOption } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
-import { OxPopup } from '@operato/popup'
+import { OxPopup, OxPrompt } from '@operato/popup'
 import { isMobileDevice } from '@operato/utils'
 
 import { connect } from 'pwa-helpers/connect-mixin'
 import gql from 'graphql-tag'
 
-import { LedgerImporter } from './ledger-importer'
+import { BankImporter } from './bank-importer'
+
+@customElement('bank-list-page')
+export class BankListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
 
-@customElement('ledger-list-page')
-export class LedgerListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
 
         width: 100%;
 
-        --grid-record-emphasized-background-color: #8b0000;
-        --grid-record-emphasized-color: #ff6b6b;
+        --grid-record-emphasized-background-color: #8B0000;
+        --grid-record-emphasized-color: #FF6B6B;
       }
 
       ox-grist {
         overflow-y: auto;
         flex: 1;
       }
+
+      ox-filters-form {
+        flex: 1;
+      }
     `
   ]
 
   static get scopedElements() {
     return {
-      'ledger-importer': LedgerImporter
+      'bank-importer': BankImporter
     }
   }
 
@@ -49,37 +59,36 @@ export class LedgerListPage extends connect(store)(localize(i18next)(ScopedEleme
   @property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
 
   @query('ox-grist') private grist!: DataGrist
-  @query('#sorter-control') private sortersControl!: OxPopup
 
   get context() {
     return {
-      title: i18next.t('title.ledger list'),
+      title: i18next.t('title.bank list'),
       search: {
         handler: (search: string) => {
           this.grist.searchText = search
         },
-        value: this.grist?.searchText || ''
+        value: this.grist.searchText
       },
       filter: {
         handler: () => {
           this.grist.toggleHeadroom()
         }
       },
-      help: 'accounting/ledger',
+      help: 'accounting/bank',
       actions: [
         {
           title: i18next.t('button.save'),
-          action: this._updateLedger.bind(this),
+          action: this._updateBank.bind(this),
           ...CommonButtonStyles.save
         },
         {
           title: i18next.t('button.delete'),
-          action: this._deleteLedger.bind(this),
+          action: this._deleteBank.bind(this),
           ...CommonButtonStyles.delete
         }
       ],
       exportable: {
-        name: i18next.t('title.ledger list'),
+        name: i18next.t('title.bank list'),
         data: this.exportHandler.bind(this)
       },
       importable: {
@@ -92,33 +101,27 @@ export class LedgerListPage extends connect(store)(localize(i18next)(ScopedEleme
     const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom">
-          <div id="filters">
-            <ox-filters-form autofocus></ox-filters-form>
-          </div>
+      <ox-grist
+        .mode=${mode}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      >
+        <div slot="headroom" class="header">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
 
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.sortersControl.open({
-                  right: 0,
-                  top: target.offsetTop + target.offsetHeight
-                })
-              }}
-              >expand_more</mwc-icon
-            >
-            <ox-popup id="sorter-control">
-              <ox-sorters-control> </ox-sorters-control>
-            </ox-popup>
-          </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>
+
+            <ox-record-creator id="add" .callback=${this.creationCallback.bind(this)}>
+              <button>
+                <md-icon>add</md-icon>
+              </button>
+            </ox-record-creator>
 
-          <div id="modes">
-            <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>
@@ -189,6 +192,7 @@ export class LedgerListPage extends connect(store)(localize(i18next)(ScopedEleme
         }
       ],
       rows: {
+        appendable: false,
         selectable: {
           multiple: true
         }
@@ -211,7 +215,7 @@ export class LedgerListPage extends connect(store)(localize(i18next)(ScopedEleme
     const response = await client.query({
       query: gql`
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: ledgers(filters: $filters, pagination: $pagination, sortings: $sortings) {
+          responses: banks(filters: $filters, pagination: $pagination, sortings: $sortings) {
             items {
               id
               name
@@ -240,14 +244,21 @@ export class LedgerListPage extends connect(store)(localize(i18next)(ScopedEleme
     }
   }
 
-  async _deleteLedger() {
-    if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+  async _deleteBank() {
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),
+        confirmButton: { text: i18next.t('button.confirm') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
       const ids = this.grist.selected.map(record => record.id)
       if (ids && ids.length > 0) {
         const response = await client.mutate({
           mutation: gql`
             mutation ($ids: [String!]!) {
-              deleteLedgers(ids: $ids)
+              deleteBanks(ids: $ids)
             }
           `,
           variables: {
@@ -265,7 +276,7 @@ export class LedgerListPage extends connect(store)(localize(i18next)(ScopedEleme
     }
   }
 
-  async _updateLedger() {
+  async _updateBank() {
     let patches = this.grist.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
@@ -281,8 +292,8 @@ export class LedgerListPage extends connect(store)(localize(i18next)(ScopedEleme
 
       const response = await client.mutate({
         mutation: gql`
-          mutation ($patches: [LedgerPatch!]!) {
-            updateMultipleLedger(patches: $patches) {
+          mutation ($patches: [BankPatch!]!) {
+            updateMultipleBank(patches: $patches) {
               name
             }
           }
@@ -298,14 +309,63 @@ export class LedgerListPage extends connect(store)(localize(i18next)(ScopedEleme
     }
   }
 
+  async creationCallback(bank) {
+    try {
+      const response = await client.query({
+        query: gql`
+          mutation ($bank: NewBank!) {
+            createBank(bank: $bank) {
+              id
+            }
+          }
+        `,
+        variables: {
+          bank
+        },
+        context: {
+          hasUpload: true
+        }
+      })
+
+      if (!response.errors) {
+        this.grist.fetch()
+        document.dispatchEvent(
+          new CustomEvent('notify', {
+            detail: {
+              message: i18next.t('text.data_created_successfully')
+            }
+          })
+        )
+      }
+
+      return true
+    } catch (ex) {
+      console.error(ex)
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            type: 'error',
+            message: i18next.t('text.error')
+          }
+        })
+      )
+      return false
+    }
+  }
+
   async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
+    const targetFieldSet = new Set([
+      'id',
+      'name',
+      'description',
+      'active'
+    ])
 
-    return exportTargets.map(ledger => {
+    return exportTargets.map(bank => {
       let tempObj = {}
       for (const field of targetFieldSet) {
-        tempObj[field] = ledger[field]
+        tempObj[field] = bank[field]
       }
 
       return tempObj
@@ -315,23 +375,24 @@ export class LedgerListPage extends connect(store)(localize(i18next)(ScopedEleme
   async importHandler(records) {
     const popup = openPopup(
       html`
-        <ledger-importer
-          .ledgers=${records}
+        <bank-importer
+          .banks=${records}
           @imported=${() => {
             history.back()
             this.grist.fetch()
           }}
-        ></ledger-importer>
+        ></bank-importer>
       `,
       {
         backdrop: true,
         size: 'large',
-        title: i18next.t('title.import ledger')
+        title: i18next.t('title.import bank')
       }
     )
-
+    
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
+

package/client/pages/{ledger/ledger-importer.ts → bank-account/bank-account-importer.ts}

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,9 +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'
 
-export class LedgerImporter extends LitElement {
+export class BankAccountImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -21,20 +24,10 @@ export class LedgerImporter extends LitElement {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
-  @property({ type: Array }) ledgers: any[] = []
+  @property({ type: Array }) bankAccounts: any[] = []
   @property({ type: Object }) columns = {
     list: { fields: ['name', 'description'] },
     pagination: { infinite: true },
@@ -68,13 +61,13 @@ export class LedgerImporter extends LitElement {
         .config=${this.columns}
         .data=${
           { 
-            records: this.ledgers 
+            records: this.bankAccounts 
           }
         }
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }
@@ -82,11 +75,11 @@ export class LedgerImporter extends LitElement {
   async save() {
     const response = await client.mutate({
       mutation: gql`
-        mutation importLedgers($ledgers: [LedgerPatch!]!) {
-          importLedgers(ledgers: $ledgers)
+        mutation importBankAccounts($bankAccounts: [BankAccountPatch!]!) {
+          importBankAccounts(bankAccounts: $bankAccounts)
         }
       `,
-      variables: { ledgers: this.ledgers }
+      variables: { bankAccounts: this.bankAccounts }
     })
 
     if (response.errors?.length) return