@things-factory/operato-pms 3.8.0 → 3.8.13

package/client/pages/report/report-monthly-ffb-sale.js

@@ -0,0 +1,413 @@
+import '@things-factory/form-ui'
+import '@things-factory/grist-ui'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit-element'
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client, PageView, store } from '@things-factory/shell'
+import { isMobileDevice } from '@things-factory/utils'
+
+class ReportMonthlyFfbSale extends connect(store)(localize(i18next)(PageView)) {
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      data-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  }
+
+  static get properties() {
+    return {
+      _searchFields: Object,
+      _config: Object,
+      _gristData: Object,
+      _mill: String,
+      _month: String,
+      data: Object
+    }
+  }
+
+  get context() {
+    let fileName = `${i18next.t('title.monthly_ffb_sale_report')} (${this._mill} ${this._month})`
+    return {
+      title: i18next.t('title.monthly_ffb_sale_report'),
+      printable: {
+        accept: ['preview'],
+        content: this
+      },
+      exportable: {
+        name: fileName,
+        data: this._exportableData.bind(this)
+      }
+    }
+  }
+
+  get dataGrist() {
+    return this.shadowRoot.querySelector('data-grist')
+  }
+
+  get searchForm() {
+    return this.shadowRoot.querySelector('search-form')
+  }
+
+  get _millSelector() {
+    return this.searchForm.shadowRoot.querySelector('select[name=organization]')
+  }
+
+  get _monthInput() {
+    return this.searchForm.shadowRoot.querySelector('input[name=month]')
+  }
+
+  constructor() {
+    super()
+    this._mill = ''
+    this._month = ''
+  }
+
+  render() {
+    return html`
+      <search-form id="search-form" .fields=${this._searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
+
+      <data-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this._config}
+        .fetchHandler="${this.fetchHandler.bind(this)}"
+      ></data-grist>
+    `
+  }
+
+  get searchFields() {
+    return [
+      {
+        label: i18next.t('field.mill'),
+        name: 'organization',
+        type: 'select',
+        options: [
+          { name: 'All', value: '' },
+          { name: 'UNKNOWN', value: 'null' },
+          ...this._mills
+            .map(mill => {
+              return {
+                name: mill.name,
+                value: mill.id
+              }
+            })
+            .sort(this._compareValues('name', 'asc'))
+        ],
+        props: { searchOper: 'eq' },
+        handlers: { change: this._submit.bind(this) }
+      },
+      {
+        label: i18next.t('field.month'),
+        name: 'month',
+        type: 'month',
+        props: {
+          searchOper: 'eq',
+          min: '2019-01'
+        },
+        value: this._monthSearch,
+        handlers: { change: this._submit.bind(this) }
+      }
+    ]
+  }
+
+  get reportConfig() {
+    return {
+      pagination: { infinite: true },
+      rows: {
+        selectable: false,
+        insertable: false,
+        appendable: false
+      },
+      columns: [
+        {
+          type: 'string',
+          name: 'dispatchAt',
+          header: i18next.t('field.date'),
+          record: { editable: false, align: 'left' },
+          imex: {
+            header: i18next.t('field.date'),
+            key: 'dispatchAt',
+            width: 20,
+            type: 'string'
+          },
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'dispatchTo',
+          header: i18next.t('field.mill'),
+          record: { editable: false, align: 'left' },
+          imex: {
+            header: i18next.t('field.mill'),
+            key: 'dispatchTo',
+            width: 50,
+            type: 'string'
+          },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'lorryNo',
+          header: i18next.t('field.lorry_no'),
+          record: { editable: false, align: 'left' },
+          imex: {
+            header: i18next.t('field.lorry_no'),
+            key: 'lorryNo',
+            width: 50,
+            type: 'string'
+          },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'chitNo',
+          header: i18next.t('field.chit_no'),
+          record: { editable: false, align: 'left' },
+          imex: {
+            header: i18next.t('field.chit_no'),
+            key: 'chitNo',
+            width: 50,
+            type: 'string'
+          },
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'tonnage',
+          header: i18next.t('field.tonnage'),
+          record: { editable: false, align: 'center' },
+          imex: {
+            header: i18next.t('field.tonnage'),
+            key: 'tonnage',
+            width: 30,
+            type: 'string'
+          },
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'today',
+          header: i18next.t('field.today'),
+          record: { editable: false, align: 'center' },
+          imex: {
+            header: i18next.t('field.today'),
+            key: 'today',
+            width: 30,
+            type: 'string'
+          },
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'todate',
+          header: i18next.t('field.to_date'),
+          record: { editable: false, align: 'center' },
+          imex: {
+            header: i18next.t('field.to_date'),
+            key: 'todate',
+            width: 30,
+            type: 'string'
+          },
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'percentage',
+          header: i18next.t('field.percents'),
+          record: { editable: false, align: 'center' },
+          imex: {
+            header: i18next.t('field.percents'),
+            key: 'percentage',
+            width: 30,
+            type: 'string'
+          },
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'todateAvg',
+          header: i18next.t('field.avg'),
+          record: { editable: false, align: 'center' },
+          imex: {
+            header: i18next.t('field.avg'),
+            key: 'todateAvg',
+            width: 30,
+            type: 'string'
+          },
+          width: 120
+        }
+      ]
+    }
+  }
+
+  async pageInitialized() {
+    let date = new Date()
+    this._monthSearch = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0)
+    this._mills = [...(await this._fetchMills())]
+    this._gristData = { total: 0, records: [] }
+    this._searchFields = this.searchFields
+    this._config = this.reportConfig
+
+    // this._updateGrist()
+  }
+
+  async pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.dataGrist.fetch()
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }) {
+    const monthNames = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December'
+    ]
+
+    try {
+      const filters = this.searchForm.queryFilters
+      const pagination = { page, limit }
+      const sortings = sorters
+
+      this._validate()
+      const response = await client.query({
+        query: gql`
+          query monthlyFfbSaleReports($filters: [Filter], $pagination: Pagination, $sortings: [Sorting]) {
+            monthlyFfbSaleReports(filters: $filters, pagination: $pagination, sortings: $sortings) {
+              items {
+                id
+                dispatchAt
+                dispatchTo
+                lorryNo
+                driverIdentification
+                chitNo
+                percentage
+                dispatchTo
+                tonnage
+                todayAvg
+                todateAvg
+                today
+                todate
+              }
+              total
+            }
+          }
+        `,
+        variables: { filters, pagination, sortings }
+      })
+
+      const data = {
+        // records: this._dataMassage(response.data.dailyStaffHarvestReports.items) || [],
+        records: response.data.monthlyFfbSaleReports.items || [],
+        total: response.data.monthlyFfbSaleReports.total
+      }
+
+      this._gristData = {
+        ...data
+      }
+
+      let selectedDate = this._monthInput.valueAsDate
+
+      this._mill = this._millSelector.options[this._millSelector.selectedIndex].text
+      this._month = `${monthNames[selectedDate.getMonth()]} ${selectedDate.getFullYear().toString()}`
+      this.updateContext()
+      return data
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  _submit(e) {
+    this.searchForm.submit()
+  }
+
+  _exportableData() {
+    if (this._gristData.records.length > 0) {
+      var headerSetting = this._config.columns
+        .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+        .map(column => {
+          return column.imex
+        })
+
+      return { header: headerSetting, data: this._gristData.records }
+    } else {
+      throw new Error('No Data to Export')
+    }
+  }
+
+  _validate() {}
+
+  _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 _fetchMills() {
+    const filters = [{ name: 'type', operator: 'eq', value: 'MILL' }]
+    const pagination = { page: 1, limit: 99999999 }
+
+    const response = await client.query({
+      query: gql`
+        query organizations($filters: [Filter], $pagination: Pagination) {
+          organizations(filters: $filters, pagination: $pagination) {
+            items {
+              id
+              name
+            }
+          }
+        }
+      `,
+      variables: { filters, pagination }
+    })
+
+    if (!response.errors) {
+      return [...response.data.organizations.items]
+    }
+  }
+
+  _showToast({ type, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          message
+        }
+      })
+    )
+  }
+}
+
+window.customElements.define('report-monthly-ffb-sale', ReportMonthlyFfbSale)

package/client/pages/report/report-monthly-production.js

@@ -1,12 +1,14 @@
 import '@things-factory/form-ui'
 import '@things-factory/grist-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client, PageView, store } from '@things-factory/shell'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
+
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin'
 
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client, PageView, store } from '@things-factory/shell'
+import { isMobileDevice } from '@things-factory/utils'
+
 class ReportMonthlyProduction extends connect(store)(localize(i18next)(PageView)) {
   static get styles() {
     return css`
@@ -28,11 +30,13 @@ class ReportMonthlyProduction extends connect(store)(localize(i18next)(PageView)
       _searchFields: Object,
       _config: Object,
       _gristData: Object,
+      _month: String,
       data: Object
     }
   }
 
   get context() {
+    let fileName = `${i18next.t('title.monthly_production_report')} (${this._month})`
     return {
       title: i18next.t('title.monthly_production_report'),
       printable: {
@@ -40,7 +44,7 @@ class ReportMonthlyProduction extends connect(store)(localize(i18next)(PageView)
         content: this
       },
       exportable: {
-        name: i18next.t('title.monthly_production_report'),
+        name: fileName,
         data: this._exportableData.bind(this)
       }
     }
@@ -58,6 +62,11 @@ class ReportMonthlyProduction extends connect(store)(localize(i18next)(PageView)
     return this.searchForm.shadowRoot.querySelector('input[name=month]')
   }
 
+  constructor() {
+    super()
+    this._month = ''
+  }
+
   render() {
     return html`
       <search-form id="search-form" .fields=${this._searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
@@ -362,6 +371,21 @@ class ReportMonthlyProduction extends connect(store)(localize(i18next)(PageView)
   }
 
   async fetchHandler({ page, limit, sorters = [] }) {
+    const monthNames = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December'
+    ]
+
     try {
       const filters = this.searchForm.queryFilters
       const pagination = { page, limit }
@@ -409,6 +433,11 @@ class ReportMonthlyProduction extends connect(store)(localize(i18next)(PageView)
         ...data
       }
 
+      let selectedDate = this._monthInput.valueAsDate
+
+      this._month = `${monthNames[selectedDate.getMonth()]} ${selectedDate.getFullYear().toString()}`
+      this.updateContext()
+
       return data
     } catch (e) {
       console.log(e)

package/client/pages/report/report-yearly-production.js

@@ -1,12 +1,14 @@
 import '@things-factory/form-ui'
 import '@things-factory/grist-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client, PageView, store } from '@things-factory/shell'
-import { gqlBuilder, isMobileDevice } from '@things-factory/utils'
+
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
 import { connect } from 'pwa-helpers/connect-mixin'
 
+import { i18next, localize } from '@things-factory/i18n-base'
+import { client, PageView, store } from '@things-factory/shell'
+import { isMobileDevice } from '@things-factory/utils'
+
 class ReportYearlyProduction extends connect(store)(localize(i18next)(PageView)) {
   static get styles() {
     return css`
@@ -28,11 +30,13 @@ class ReportYearlyProduction extends connect(store)(localize(i18next)(PageView))
       _searchFields: Object,
       _config: Object,
       _gristData: Object,
+      _year: String,
       data: Object
     }
   }
 
   get context() {
+    let fileName = `${i18next.t('title.yearly_production_report')} (${this._year})`
     return {
       title: i18next.t('title.yearly_production_report'),
       printable: {
@@ -40,7 +44,7 @@ class ReportYearlyProduction extends connect(store)(localize(i18next)(PageView))
         content: this
       },
       exportable: {
-        name: i18next.t('title.yearly_production_report'),
+        name: fileName,
         data: this._exportableData.bind(this)
       }
     }
@@ -55,7 +59,12 @@ class ReportYearlyProduction extends connect(store)(localize(i18next)(PageView))
   }
 
   get _yearInput() {
-    return this.searchForm.shadowRoot.querySelector('input[name=year]')
+    return this.searchForm.shadowRoot.querySelector('select[name=year]')
+  }
+
+  constructor() {
+    super()
+    this._year = ''
   }
 
   render() {
@@ -264,13 +273,13 @@ class ReportYearlyProduction extends connect(store)(localize(i18next)(PageView))
     }
   }
 
-  async pageInitialized() {
+  pageInitialized() {
     this._gristData = { total: 0, records: [] }
     this._searchFields = this.searchFields
     this._config = this.reportConfig
   }
 
-  async pageUpdated(changes, lifecycle) {
+  pageUpdated(changes, lifecycle) {
     if (this.active) {
       this.dataGrist.fetch()
     }
@@ -317,6 +326,11 @@ class ReportYearlyProduction extends connect(store)(localize(i18next)(PageView))
         ...data
       }
 
+      let selectedYear = this._yearInput.value
+
+      this._year = `${selectedYear.toString()}`
+      this.updateContext()
+
       return data
     } catch (e) {
       console.log(e)
@@ -337,7 +351,9 @@ class ReportYearlyProduction extends connect(store)(localize(i18next)(PageView))
     }
   }
 
-  _validate() {}
+  _validate() {
+    debugger
+  }
 
   _showToast({ type, message }) {
     document.dispatchEvent(

package/client/pages/setting/home.js

@@ -0,0 +1,107 @@
+import { css, html } from 'lit-element'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { PageView, store } from '@things-factory/shell'
+
+class SettingHome extends connect(store)(PageView) {
+  static get styles() {
+    return [
+      css`
+        :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) {
+          [message] {
+            padding-top: 10px;
+            font-size: 15px;
+          }
+          [message] strong {
+            font-size: 1.6rem;
+          }
+          [message] img {
+            float: none;
+            width: 90%;
+          }
+        }
+      `
+    ]
+  }
+
+  static get properties() {
+    return {}
+  }
+
+  get context() {
+    return {
+      title: `setting home`
+    }
+  }
+
+  render() {
+    return html`
+      <div message>
+        <img src="/assets/images/image-api.png" />
+        <strong>Plantation Inventory Setting</strong>
+        OPERATO allows plantation user to set inventory to be tracked or non-tracked.
+        <ul>
+          <li><a href="plantation-setting">Plantation Inventory</a></li>
+        </ul>
+      </div>
+    `
+  }
+}
+
+window.customElements.define('setting-home', SettingHome)