@things-factory/tax-invoice 7.0.0-alpha.8 → 7.0.0

package/client/pages/{tax-invoice-company/tax-invoice-company-importer.ts → tax-invoice-send/company-list-popup.ts}

@@ -1,175 +1,187 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
-import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
+import { property, query } from 'lit/decorators.js'
+import { DataGrist } from '@operato/data-grist'
 import { i18next } from '@operato/i18n'
-import { isMobileDevice } from '@operato/utils'
-import { COMPANY_TYPE_LABEL } from './tax-invoice-company-list-page'
+import { ButtonContainerStyles } from '@operato/styles'
 
-export class TaxInvoiceCompanyImporter extends LitElement {
+export class CompanyListPopup extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       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 }) taxInvoiceCompanies: any[] = []
+  @query('ox-grist') private grist!: DataGrist
+
+  @property({ type: Array }) companyList: any[] = []
   @property({ type: Object }) columns = {
-    list: { fields: ['name', 'description'] },
     pagination: { infinite: true },
     columns: [
+      { type: 'gutter', gutterName: 'sequence' },
+      { type: 'gutter', gutterName: 'row-selector', multiple: false },
       {
         type: 'string',
         name: 'name',
         header: i18next.t('field.name'),
-        width: 150
-      },
-      {
-        type: 'string',
-        name: 'description',
-        header: i18next.t('field.description'),
-        width: 200
-      },
-      {
-        type: 'select',
-        name: 'type',
-        header: i18next.t('field.type'),
         record: {
-          renderer: value => COMPANY_TYPE_LABEL[value]
+          editable: false
         },
-        width: 100
+        filter: 'search',
+        sortable: true,
+        width: 150
       },
       {
         type: 'string',
         name: 'businessRegistrationNumber',
         header: i18next.t('field.business registration number'),
+        record: {
+          editable: false
+        },
         width: 150
       },
       {
         type: 'string',
         name: 'branchIdentification',
         header: i18next.t('field.branch identification'),
+        record: {
+          editable: false
+        },
         width: 150
       },
       {
         type: 'string',
         name: 'businessName',
         header: i18next.t('field.tax invoice business name'),
+        record: {
+          editable: false
+        },
         width: 150
       },
       {
         type: 'string',
         name: 'representativeName',
         header: i18next.t('field.tax invoice representative name'),
+        record: {
+          editable: false
+        },
         width: 150
       },
       {
         type: 'string',
         name: 'address',
         header: i18next.t('field.address'),
+        record: {
+          editable: false
+        },
         width: 200
       },
       {
         type: 'string',
         name: 'businessType',
         header: i18next.t('field.business type'),
+        record: {
+          editable: false
+        },
         width: 100
       },
       {
         type: 'string',
         name: 'industryType',
         header: i18next.t('field.industry type'),
+        record: {
+          editable: false
+        },
         width: 100
       },
       {
         type: 'string',
         name: 'department',
         header: i18next.t('field.department'),
+        record: {
+          editable: false
+        },
         width: 150
       },
       {
         type: 'string',
         name: 'contactName',
         header: i18next.t('field.contact name'),
+        record: {
+          editable: false
+        },
         width: 150
       },
       {
         type: 'string',
         name: 'contactPhone',
         header: i18next.t('field.contact phone'),
+        record: {
+          editable: false
+        },
         width: 150
       },
       {
         type: 'string',
         name: 'contactEmail',
         header: i18next.t('field.contact email'),
+        record: {
+          editable: false
+        },
         width: 150
       },
       {
         type: 'string',
         name: 'contactCellPhone',
         header: i18next.t('field.contact cell phone'),
-        width: 150
-      },
-      {
-        type: 'attributes',
-        name: 'attributes',
-        header: i18next.t('field.attributes'),
+        record: {
+          editable: false
+        },
         width: 150
       }
-    ]
+    ],
+    rows: {
+      selectable: {
+        multiple: false
+      },
+      handlers: {
+        click: 'select-row-toggle'
+      },
+      appendable: false
+    }
   }
 
   render() {
     return html`
       <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .mode=${'GRID'}
         .config=${this.columns}
         .data=${{
-          records: this.taxInvoiceCompanies
+          records: this.companyList
         }}
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.select.bind(this)}">
+          <md-icon>select_check_box</md-icon>${i18next.t('button.select')}
+        </button>
       </div>
     `
   }
 
-  async save() {
-    const response = await client.mutate({
-      mutation: gql`
-        mutation importTaxInvoiceCompanies($taxInvoiceCompanies: [TaxInvoiceCompanyPatch!]!) {
-          importTaxInvoiceCompanies(taxInvoiceCompanies: $taxInvoiceCompanies)
-        }
-      `,
-      variables: { taxInvoiceCompanies: this.taxInvoiceCompanies }
-    })
-
-    if (response.errors?.length) return
-
-    this.dispatchEvent(new CustomEvent('imported'))
+  async select() {
+    this.dispatchEvent(new CustomEvent('selected', { detail: this.grist.selected[0] }))
   }
 }