@things-factory/operato-pms 3.8.0 → 3.8.13

package/client/pages/master/truck.js

@@ -0,0 +1,416 @@
+import '@things-factory/form-ui'
+import '@things-factory/grist-ui'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit-element'
+
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client, CustomAlert, PageView } from '@things-factory/shell'
+import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@things-factory/utils'
+
+class MasterTruck extends localize(i18next)(PageView) {
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        search-form {
+          overflow: visible;
+        }
+
+        data-grist {
+          overflow-y: auto;
+          flex: 1;
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {
+      _searchFields: Array,
+      config: Object,
+      data: Object,
+      importHandler: Object
+    }
+  }
+
+  render() {
+    return html`
+      <search-form
+        id="search-form"
+        .fields=${this._searchFields}
+        initFocus="description"
+        @submit=${e => this.dataGrist.fetch()}
+      ></search-form>
+
+      <data-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.config}
+        .fetchHandler="${this.fetchHandler.bind(this)}"
+      ></data-grist>
+    `
+  }
+
+  get context() {
+    return {
+      title: i18next.t('title.truck'),
+      actions: [
+        {
+          title: i18next.t('button.save'),
+          action: this._saveTruck.bind(this),
+          ...CommonButtonStyles.save
+        },
+        {
+          title: i18next.t('button.delete'),
+          action: this._deleteTruck.bind(this),
+          ...CommonButtonStyles.delete
+        }
+      ],
+      exportable: {
+        name: i18next.t('title.staff'),
+        data: this._exportableData.bind(this)
+      },
+      importable: {
+        handler: this._importableData.bind(this)
+      }
+    }
+  }
+
+  async pageInitialized() {
+    const _companies = await this.fetchCompanies()
+
+    this._searchFields = [
+      {
+        label: i18next.t('field.truck_no'),
+        name: 'name',
+        type: 'text',
+        props: { searchOper: 'i_like' }
+      },
+      {
+        label: i18next.t('field.company'),
+        name: 'organizationId',
+        type: 'select',
+        options: [
+          { value: '' },
+          ..._companies
+            .map(company => {
+              return {
+                name: company.name,
+                value: company.id
+              }
+            })
+            .sort(this._compareValues('name', 'asc'))
+        ],
+        props: { searchOper: 'eq' }
+      }
+    ]
+
+    this.config = {
+      rows: { selectable: { multiple: true } },
+      pagination: { limit: 100, pages: [50, 100, 250] },
+      columns: [
+        { type: 'gutter', gutterName: 'dirty' },
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.truck_no'),
+          record: { editable: true },
+          imex: { header: i18next.t('field.truck_no'), key: 'name', width: 50, type: 'string' },
+          sortable: true,
+          width: 300
+        },
+        {
+          type: 'object',
+          name: 'organization',
+          header: i18next.t('field.company'),
+          record: {
+            editable: true,
+            options: {
+              queryName: 'organizations',
+              select: [
+                { name: 'id', hidden: true },
+                { name: 'name', header: i18next.t('field.name'), width: 350 },
+                { name: 'type', header: i18next.t('field.type'), width: 300 }
+              ]
+            }
+          },
+          sortable: true,
+          width: 200
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          sortable: true,
+          width: 180
+        },
+        {
+          type: 'object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          sortable: true,
+          width: 180
+        }
+      ]
+    }
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.dataGrist.fetch()
+    }
+  }
+
+  get searchForm() {
+    return this.shadowRoot.querySelector('search-form')
+  }
+
+  get dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
+
+  async fetchCompanies() {
+    const filters = []
+
+    const response = await client.query({
+      query: gql`
+        query organizations($filters: [Filter]) {
+          organizations(filters: $filters) {
+            items {
+              id
+              name
+              description
+            }
+          }
+        }
+      `,
+      variables: { filters }
+    })
+
+    return response.data.organizations.items
+  }
+
+  _importableData(records) {
+    setTimeout(() => {
+      openPopup(
+        html`
+          <import-pop-up
+            .records=${records}
+            .config=${{
+              rows: this.config.rows,
+              columns: [...this.config.columns.filter(column => column.imex !== undefined)]
+            }}
+            .importHandler="${this.importHandler.bind(this)}"
+          ></import-pop-up>
+        `,
+        {
+          backdrop: true,
+          size: 'large',
+          title: i18next.t('title.import')
+        }
+      )
+    }, 500)
+  }
+
+  _compareValues(key, order = 'asc') {
+    return function innerSort(a, b) {
+      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
+        return 0
+      }
+
+      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key]
+      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key]
+
+      let comparison = 0
+      if (varA > varB) {
+        comparison = 1
+      } else if (varA < varB) {
+        comparison = -1
+      }
+      return order === 'desc' ? comparison * -1 : comparison
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }) {
+    const filters = this.searchForm.queryFilters
+    const pagination = { page, limit }
+    const sortings = sorters
+
+    const response = await client.query({
+      query: gql`
+        query trucks($filters: [Filter], $pagination: Pagination, $sortings: [Sorting]) {
+          trucks(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              organization {
+                id
+                name
+                description
+              }
+              deletedAt
+              updatedAt
+              updater {
+                id
+                name
+                description
+              }
+            }
+            total
+          }
+        }
+      `,
+      variables: { filters, pagination, sortings }
+    })
+
+    return {
+      total: response.data.trucks.total || 0,
+      records: response.data.trucks.items || []
+    }
+  }
+
+  async importHandler(patches) {
+    const response = await client.mutate({
+      mutation: gql`
+        mutation updateMultipleTruck($patches: [TruckPatch]!) {
+          updateMultipleTruck(patches: $patches) {
+            name
+          }
+        }
+      `,
+      variables: { patches }
+    })
+
+    if (!response.errors) {
+      history.back()
+      this.dataGrist.fetch()
+      this._showToast({ message: i18next.t('text.data_imported_successfully') })
+    }
+  }
+
+  async _saveTruck() {
+    let patches = this.dataGrist.exportPatchList({ flagName: 'cuFlag' }).map(data => {
+      if (data?.organization?.id) {
+        data = { ...data, organization: { id: data.organization.id } }
+      }
+      return data
+    })
+
+    if (patches && patches.length) {
+      if (!patches?.length) {
+        CustomAlert({
+          title: i18next.t('text.nothing_changed'),
+          text: i18next.t('text.there_is_nothing_to_save')
+        })
+      } else {
+        const response = await client.mutate({
+          mutation: gql`
+            mutation updateMultipleTruck($patches: [TruckPatch]!) {
+              updateMultipleTruck(patches: $patches) {
+                name
+              }
+            }
+          `,
+          variables: { patches }
+        })
+
+        if (!response.errors) {
+          this.dataGrist.fetch()
+          this._showToast({ message: i18next.t('text.data_updated_successfully') })
+        }
+      }
+    }
+  }
+
+  async _deleteTruck() {
+    const ids = this.dataGrist.selected.map(record => record.id)
+    if (!ids?.length) {
+      CustomAlert({
+        title: i18next.t('text.nothing_selected'),
+        text: i18next.t('text.there_is_nothing_to_delete')
+      })
+    } else {
+      const answer = await CustomAlert({
+        type: 'warning',
+        title: i18next.t('button.delete'),
+        text: i18next.t('text.are_you_sure'),
+        confirmButton: { text: i18next.t('button.delete') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+
+      if (!answer.value) return
+
+      const response = await client.mutate({
+        mutation: gql`
+          mutation deleteTrucks($ids: [String]!) {
+            deleteTrucks(ids: $ids)
+          }
+        `,
+        variables: { ids }
+      })
+
+      if (!response.errors) {
+        this.dataGrist.fetch()
+        this._showToast({ message: i18next.t('text.data_deleted_successfully') })
+      }
+    }
+  }
+
+  get _columns() {
+    return this.config.columns
+  }
+
+  _exportableData() {
+    let records = []
+    if (this.dataGrist.selected && this.dataGrist.selected.length > 0) {
+      records = this.dataGrist.selected
+    } else {
+      records = this.dataGrist.data.records
+    }
+
+    var headerSetting = this.dataGrist._config.columns
+      .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+      .map(column => {
+        return column.imex
+      })
+
+    var data = records.map(item => {
+      return {
+        id: item.id,
+        ...this._columns
+          .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+          .reduce((record, column) => {
+            record[column.imex.key] = column.imex.key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            return record
+          }, {})
+      }
+    })
+
+    return { header: headerSetting, data: data }
+  }
+
+  _showToast({ type, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          message
+        }
+      })
+    )
+  }
+}
+
+customElements.define('master-truck', MasterTruck)

package/client/pages/report/home.js

@@ -1,81 +1,82 @@
-import { PageView, store } from '@things-factory/shell'
 import { css, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
+import { PageView, store } from '@things-factory/shell'
+
 class ReportHome extends connect(store)(PageView) {
   static get styles() {
     return [
       css`
-      :host {
-        display: block;
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        :host {
+          display: block;
+          background-color: var(--main-section-background-color);
+          padding: var(--padding-wide);
 
-        overflow: auto;
-      }
-      [message] {
-        padding: 40px 20px 0 20px;
-        max-width: var(--content-container-max-width);
-        font-size: 18px;
-        color: var(--secondary-color);
-        text-align: justify;
-      }
-      [message] strong {
-        display: block;
-        font-size: 2.5rem;
-        color: var(--primary-color);
-      }
-      [message] img {
-        float: right;
-        width: 450px;
-        max-width: 90%;
-        display: block;
-        margin: auto;
-        margin-top: 20px;
-      }
-      [message] ul {
-        margin: var(--margin-default) 0;
-        padding: 0;
-        list-style: circle inside;
-      }
-      [message] a {
-        color: var(--secondary-text-color);
-        font-size: 0.9rem;
-      }
-      [message] a:hover {
-        font-weight: bold;
-        color: var(--primary-color);
-      }
-      [button-primary] {
-        display: block;
-        background-color: var(--button-primary-background-color);
-        border: var(--button-border);
-        border-radius: var(--button-border-radius);
-        margin-top: var(--margin-wide);
-        padding: var(--button-padding);
-        color: var(--button-primary-color);
-        font: var(--button-primary-font);
-        text-transform: var(--button-text-transform);
-        text-decoration: none;
-      }
-      [button-primary]:hover {
-        background-color: var(--button-primary-active-background-color);
-        box-shadow: var(--button-active-box-shadow);
-      }
-      @media screen and (max-width: 480px) {
+          overflow: auto;
+        }
         [message] {
-          padding-top: 10px;
-          font-size: 15px;
+          padding: 40px 20px 0 20px;
+          max-width: var(--content-container-max-width);
+          font-size: 18px;
+          color: var(--secondary-color);
+          text-align: justify;
         }
         [message] strong {
-          font-size: 1.6rem;
+          display: block;
+          font-size: 2.5rem;
+          color: var(--primary-color);
         }
         [message] img {
-          float: none;
-          width: 90%;
+          float: right;
+          width: 450px;
+          max-width: 90%;
+          display: block;
+          margin: auto;
+          margin-top: 20px;
         }
-      }
-    `
+        [message] ul {
+          margin: var(--margin-default) 0;
+          padding: 0;
+          list-style: circle inside;
+        }
+        [message] a {
+          color: var(--secondary-text-color);
+          font-size: 0.9rem;
+        }
+        [message] a:hover {
+          font-weight: bold;
+          color: var(--primary-color);
+        }
+        [button-primary] {
+          display: block;
+          background-color: var(--button-primary-background-color);
+          border: var(--button-border);
+          border-radius: var(--button-border-radius);
+          margin-top: var(--margin-wide);
+          padding: var(--button-padding);
+          color: var(--button-primary-color);
+          font: var(--button-primary-font);
+          text-transform: var(--button-text-transform);
+          text-decoration: none;
+        }
+        [button-primary]:hover {
+          background-color: var(--button-primary-active-background-color);
+          box-shadow: var(--button-active-box-shadow);
+        }
+        @media screen and (max-width: 480px) {
+          [message] {
+            padding-top: 10px;
+            font-size: 15px;
+          }
+          [message] strong {
+            font-size: 1.6rem;
+          }
+          [message] img {
+            float: none;
+            width: 90%;
+          }
+        }
+      `
     ]
   }
 
@@ -92,11 +93,17 @@ class ReportHome extends connect(store)(PageView) {
   render() {
     return html`
       <div message>
-      <img src="/assets/images/image-api.png" />
+        <img src="/assets/images/image-api.png" />
         <strong>Plantation Report</strong>
         OPERATO allows plantation user to generate plantation report based on daily/monthly/annually.
         <ul>
           <li><a href="report-daily-production">Daily Production Report</a></li>
+          <li><a href="report-daily-staff-harvest">Daily Staff Harvest Report</a></li>
+          <li><a href="report-monthly-production">Monthly Production Report</a></li>
+          <li><a href="report-yearly-production">Yearly Production Report</a></li>
+          <li><a href="report-daily-ffb-dispatch-and-production">Daily FFB Dispatch And Production Report</a></li>
+          <li><a href="report-monthly-ffb-sale">Monthly FFB Sale</a></li>
+          <li><a href="report-ffb-tonnage-between-individual-block">FFB Tonnage Between Individual Block</a></li>
         </ul>
       </div>
     `