@things-factory/operato-pms 3.7.6 → 3.8.14

package/client/pages/report/report-daily-ffb-dispatch-and-production.js

@@ -0,0 +1,436 @@
+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 { ScrollbarStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@things-factory/utils'
+
+class ReportDailyFfbDispatchAndProduction extends connect(store)(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: Object,
+      _config: Object,
+      _gristData: Object,
+      _blocks: Object,
+      _mills: Object,
+      _month: String,
+      data: Object
+    }
+  }
+
+  get context() {
+    let fileName = `${i18next.t('title.daily_ffb_dispatch_and_production')}`
+    return {
+      title: i18next.t('title.daily_ffb_dispatch_and_production'),
+      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 _monthInput() {
+    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>
+
+      <data-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this._config}
+        .fetchHandler="${this.fetchHandler.bind(this)}"
+      ></data-grist>
+    `
+  }
+
+  get searchFields() {
+    return [
+      {
+        label: i18next.t('field.month'),
+        name: 'month',
+        type: 'month',
+        props: {
+          searchOper: 'eq',
+          min: '2019-01'
+        },
+        handlers: { change: this._dateChange.bind(this) },
+        value: (() => {
+          let date = new Date()
+          return date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0)
+          // return new Date()
+        })()
+      }
+    ]
+  }
+
+  get reportConfig() {
+    return {
+      pagination: { limit: 250, pages: [50, 100, 250, 500] },
+      rows: {
+        selectable: false,
+        insertable: false,
+        appendable: false
+      }
+    }
+  }
+
+  // get sectionOneColumns() {
+  //   return [
+  //     {
+  //       type: 'string',
+  //       name: 'date',
+  //       header: i18next.t('field.date'),
+  //       record: { editable: false, align: 'left' },
+  //       imex: {
+  //         header: i18next.t('field.date'),
+  //         key: 'date',
+  //         width: 20,
+  //         type: 'string'
+  //       },
+  //       width: 120
+  //     }
+  //   ]
+  // }
+
+  // get sectionTwoColumns() {
+  //   return this._blocks.sort(this._compareValues('name', 'asc')).map(blk => {
+  //     return {
+  //       type: 'number',
+  //       name: blk.name,
+  //       header: blk.name,
+  //       record: { editable: false, align: 'center' },
+  //       imex: {
+  //         header: blk.name,
+  //         key: blk.name,
+  //         width: 30,
+  //         type: 'decimal'
+  //       },
+  //       width: 120
+  //     }
+  //   })
+  // }
+
+  // get sectionThreeColumns() {
+  //   return this._mills.sort(this._compareValues('name', 'asc')).map(mill => {
+  //     return {
+  //       type: 'number',
+  //       name: mill.name,
+  //       header: mill.name,
+  //       record: { editable: false, align: 'center' },
+  //       imex: {
+  //         header: mill.name,
+  //         key: mill.name,
+  //         width: 30,
+  //         type: 'decimal'
+  //       },
+  //       width: 120
+  //     }
+  //   })
+  // }
+
+  async pageInitialized() {
+    this._blocks = [...(await this._fetchBlocks())]
+    this._mills = [...(await this._fetchMills())]
+    this._gristData = { total: 0, records: [] }
+    this._searchFields = this.searchFields
+    this._config = {
+      ...this.reportConfig,
+      columns: [
+        {
+          type: 'string',
+          name: 'date',
+          header: i18next.t('field.date'),
+          record: { editable: false, align: 'left' },
+          imex: {
+            header: i18next.t('field.date'),
+            key: 'date',
+            width: 20,
+            type: 'string'
+          },
+          width: 120
+        },
+        ...this._blocks.sort(this._compareValues('name', 'asc')).map(blk => {
+          return {
+            type: 'string',
+            name: blk.name,
+            header: blk.name,
+            record: { editable: false, align: 'center' },
+            imex: {
+              header: blk.name,
+              key: blk.name,
+              width: 30,
+              type: 'string'
+            },
+            width: 130
+          }
+        }),
+        ...this._mills.sort(this._compareValues('name', 'asc')).map(mill => {
+          return {
+            type: 'string',
+            name: mill.name,
+            header: mill.name,
+            record: { editable: false, align: 'center' },
+            imex: {
+              header: mill.name,
+              key: mill.name,
+              width: 30,
+              type: 'string'
+            },
+            width: 130
+          }
+        }),
+        {
+          type: 'string',
+          name: 'unknown',
+          header: 'UNKNOWN',
+          record: { editable: false, align: 'center' },
+          imex: {
+            header: 'UNKNOWN',
+            key: 'unknown',
+            width: 30,
+            type: 'string'
+          },
+          width: 130
+        },
+        {
+          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: 130
+        }
+      ]
+    }
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.dataGrist.fetch()
+    }
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }) {
+    try {
+      const filters = this.searchForm.queryFilters
+      const pagination = { page, limit }
+      const sortings = sorters
+
+      const response = await client.query({
+        query: gql`
+          query dailyFfbDispatchProductionReports($filters: [Filter], $pagination: Pagination, $sortings: [Sorting]) {
+            dailyFfbDispatchProductionReports(filters: $filters, pagination: $pagination, sortings: $sortings) {
+              items {
+                date
+                blockData
+                today
+              }
+              total
+            }
+          }
+        `,
+        variables: { filters, pagination, sortings }
+      })
+
+      const data = {
+        records:
+          response.data.dailyFfbDispatchProductionReports.items.map((item, idx) => {
+            let blockData = JSON.parse(item.blockData)
+            return {
+              ...item,
+              ...blockData,
+              runningNo: idx + 1
+            }
+          }) || [],
+        total: response.data.dailyFfbDispatchProductionReports.total
+      }
+
+      this._gristData = {
+        ...data
+      }
+
+      this.updateContext()
+
+      return data
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  async _fetchBlocks() {
+    const filters = []
+    const pagination = { page: 1, limit: 99999999 }
+
+    const response = await client.query({
+      query: gql`
+        query ramps($filters: [Filter], $pagination: Pagination) {
+          ramps(filters: $filters, pagination: $pagination) {
+            items {
+              id
+              name
+              block {
+                id
+                name
+              }
+            }
+          }
+        }
+      `,
+      variables: { filters, pagination }
+    })
+
+    if (!response.errors) {
+      return response.data.ramps.items.reduce((acc, ramp) => {
+        if (!acc.find(itm => itm.id == ramp.block.id) && !ramp.block.deletedAt)
+          acc.push({
+            id: ramp.block.id,
+            name: ramp.block.name
+          })
+
+        return acc
+      }, [])
+    }
+  }
+
+  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]
+    }
+  }
+
+  _dateChange(e) {
+    const monthNames = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December'
+    ]
+    let selectedDate = this._monthInput.valueAsDate
+    this._month = `${monthNames[selectedDate.getMonth()]} ${selectedDate.getFullYear().toString()}`
+
+    this.searchForm.submit()
+  }
+
+  async _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
+        })
+
+      let data = await this.fetchHandler({ page: 1, limit: 9999999 })
+      return { header: headerSetting, data: data.records }
+    } else {
+      throw new Error('No Data to Export')
+    }
+  }
+
+  _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
+    }
+  }
+
+  _showToast({ type, message }) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          type,
+          message
+        }
+      })
+    )
+  }
+}
+
+window.customElements.define('report-daily-ffb-dispatch-and-production', ReportDailyFfbDispatchAndProduction)

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

@@ -1,13 +1,15 @@
 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 { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
+
 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 { ScrollbarStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@things-factory/utils'
+
 class ReportDailyProduction extends connect(store)(localize(i18next)(PageView)) {
   static get styles() {
     return [
@@ -37,11 +39,14 @@ class ReportDailyProduction extends connect(store)(localize(i18next)(PageView))
       _config: Object,
       _gristData: Object,
       _blocks: Object,
+      _block: String,
+      _month: String,
       data: Object
     }
   }
 
   get context() {
+    let fileName = `${i18next.t('title.daily_production_report')} (Block ${this._block} ${this._month})`
     return {
       title: i18next.t('title.daily_production_report'),
       printable: {
@@ -49,7 +54,7 @@ class ReportDailyProduction extends connect(store)(localize(i18next)(PageView))
         content: this
       },
       exportable: {
-        name: i18next.t('title.daily_production_report'),
+        name: fileName,
         data: this._exportableData.bind(this)
       }
     }
@@ -71,6 +76,12 @@ class ReportDailyProduction extends connect(store)(localize(i18next)(PageView))
     return this.searchForm.shadowRoot.querySelector('input[name=month]')
   }
 
+  constructor() {
+    super()
+    this._block = ''
+    this._month = ''
+  }
+
   render() {
     return html`
       <search-form id="search-form" .fields=${this._searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
@@ -360,13 +371,28 @@ class ReportDailyProduction extends connect(store)(localize(i18next)(PageView))
     this._config = this.reportConfig
   }
 
-  async pageUpdated(changes, lifecycle) {
+  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 }
@@ -418,6 +444,12 @@ class ReportDailyProduction extends connect(store)(localize(i18next)(PageView))
         ...data
       }
 
+      let selectedDate = this._monthInput.valueAsDate
+
+      this._block = this._blockSelector.options[this._blockSelector.selectedIndex].text
+      this._month = `${monthNames[selectedDate.getMonth()]} ${selectedDate.getFullYear().toString()}`
+      this.updateContext()
+
       return data
     } catch (e) {
       console.log(e)

package/client/pages/report/report-daily-staff-harvest.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 ReportDailyStaffHarvest extends connect(store)(localize(i18next)(PageView)) {
   static get styles() {
     return css`
@@ -28,11 +30,15 @@ class ReportDailyStaffHarvest extends connect(store)(localize(i18next)(PageView)
       _searchFields: Object,
       _config: Object,
       _gristData: Object,
+      _block: String,
+      _month: String,
       data: Object
     }
   }
 
   get context() {
+    let fileName = `${i18next.t('title.daily_staff_harvest')} (Block ${this._block} ${this._month})`
+
     return {
       title: i18next.t('title.daily_staff_harvest'),
       printable: {
@@ -40,7 +46,7 @@ class ReportDailyStaffHarvest extends connect(store)(localize(i18next)(PageView)
         content: this
       },
       exportable: {
-        name: i18next.t('title.daily_staff_harvest'),
+        name: fileName,
         data: this._exportableData.bind(this)
       }
     }
@@ -62,6 +68,12 @@ class ReportDailyStaffHarvest extends connect(store)(localize(i18next)(PageView)
     return this.searchForm.shadowRoot.querySelector('input[name=month]')
   }
 
+  constructor() {
+    super()
+    this._block = ''
+    this._month = ''
+  }
+
   render() {
     return html`
       <search-form id="search-form" .fields=${this._searchFields} @submit=${e => this.dataGrist.fetch()}></search-form>
@@ -144,13 +156,28 @@ class ReportDailyStaffHarvest extends connect(store)(localize(i18next)(PageView)
     this._updateGrist()
   }
 
-  async pageUpdated(changes, lifecycle) {
+  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 }
@@ -183,6 +210,11 @@ class ReportDailyStaffHarvest extends connect(store)(localize(i18next)(PageView)
         ...data
       }
 
+      let selectedDate = this._monthInput.valueAsDate
+
+      this._block = this._blockSelector.options[this._blockSelector.selectedIndex].text
+      this._month = `${monthNames[selectedDate.getMonth()]} ${selectedDate.getFullYear().toString()}`
+      this.updateContext()
       return data
     } catch (e) {
       console.log(e)
@@ -209,6 +241,19 @@ class ReportDailyStaffHarvest extends connect(store)(localize(i18next)(PageView)
       }
     })
 
+    let yearMonth = (this.searchForm.queryFilters.find(x => x.name == 'month')?.value || this._monthSearch).split('-')
+    let columns = [...this.reportConfig.columns]
+    for (
+      let start = new Date(yearMonth[0], yearMonth[1] - 1, 1);
+      start < new Date(yearMonth[0], yearMonth[1], 1);
+      start.setDate(start.getDate() + 1)
+    ) {
+      let day = start.getDate().toString()
+
+      for (let index = 0; index < massagedData.length; index++) {
+        massagedData[index][day] = massagedData[index][day] ? massagedData[index][day] : '-'
+      }
+    }
     return massagedData
   }