@things-factory/worklist 6.0.39 → 6.0.41

package/client/pages/todo/assigned-list-page.ts

@@ -1,258 +0,0 @@
-import '@operato/data-grist'
-import '@operato/input/ox-input-select-buttons.js'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { DataGrist, FetchOption, getRenderer } from '@operato/data-grist'
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { PageView, store } from '@operato/shell'
-import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
-import { isMobileDevice } from '@operato/utils'
-
-const FILTERS = [
-  {
-    display: 'Important',
-    value: 'Important'
-  },
-  {
-    display: 'Imminent',
-    value: 'Imminent'
-  },
-  {
-    display: 'Disapproved',
-    value: 'Disapproved'
-  }
-]
-
-@customElement('assigned-list-page')
-export class AssignedListPage extends connect(store)(localize(i18next)(PageView)) {
-  static styles = [
-    ScrollbarStyles,
-    CommonGristStyles,
-    css`
-      :host {
-        display: flex;
-
-        width: 100%;
-
-        --grid-record-emphasized-background-color: red;
-        --grid-record-emphasized-color: yellow;
-      }
-
-      #modes {
-        margin-left: auto;
-      }
-    `
-  ]
-
-  @property({ type: Object }) gristConfig?: any
-  @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'LIST' : 'GRID'
-
-  @query('ox-grist') grist!: DataGrist
-
-  @state() filters?: string[]
-
-  get context() {
-    return {
-      search: {
-        handler: (search: string) => {
-          this.grist.searchText = search
-        },
-        placeholder: i18next.t('title.assigned list'),
-        value: this.grist.searchText
-      },
-      filter: {
-        handler: () => {
-          this.grist.toggleHeadroom()
-        }
-      }
-    }
-  }
-
-  render() {
-    const mode = this.mode
-
-    return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom">
-          <div id="filters">
-            <ox-input-select-buttons
-              .value=${this.filters}
-              .options=${FILTERS}
-              @change=${(e: CustomEvent) => {
-                this.filters = (e.currentTarget as any)?.value
-              }}
-              multiple
-            ></ox-input-select-buttons>
-          </div>
-
-          <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>
-    `
-  }
-
-  async pageInitialized(lifecycle) {
-    this.gristConfig = {
-      list: {
-        thumbnail: 'thumbnail',
-        fields: ['name', 'description'],
-        details: ['createdAt', 'due']
-      },
-      columns: [
-        { type: 'gutter', gutterName: 'sequence' },
-        {
-          type: 'string',
-          name: 'name',
-          header: i18next.t('field.name'),
-          record: {
-            editable: false
-          },
-          filter: 'search',
-          sortable: true,
-          width: 150
-        },
-        {
-          type: 'string',
-          name: 'description',
-          header: i18next.t('field.description'),
-          record: {
-            editable: false
-          },
-          filter: 'search',
-          width: 200
-        },
-        {
-          type: 'string',
-          name: 'uiSource',
-          header: i18next.t('field.ui-source'),
-          record: {
-            editable: false,
-            renderer: function (value, column, record, rowIndex, field) {
-              const { uiType, uiSource } = record.activity || {}
-              var type = uiType !== 'board' ? 'string' : 'board'
-              return getRenderer(type)(uiSource, column, record, rowIndex, field)
-            }
-          },
-          width: 140,
-          hidden: true
-        },
-        {
-          type: 'resource-object',
-          name: 'creator',
-          header: i18next.t('field.creator'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          width: 120
-        },
-        {
-          type: 'datetime',
-          name: 'dueAt',
-          header: i18next.t('field.due-at'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          // filter: {
-          //   type: 'date',
-          //   operator: 'between'
-          // },
-          width: 180
-        },
-        {
-          type: 'datetime',
-          name: 'updatedAt',
-          header: i18next.t('field.updated_at'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          width: 180
-        },
-        {
-          type: 'datetime',
-          name: 'createdAt',
-          header: i18next.t('field.created_at'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          // filter: 'between',
-          width: 180
-        },
-        {
-          type: 'image',
-          name: 'thumbnail',
-          header: i18next.t('field.thumbnail'),
-          record: { editable: false },
-          hidden: true
-        }
-      ],
-      rows: {
-        appendable: false
-      },
-      sorters: [
-        {
-          name: 'name'
-        }
-      ]
-    }
-  }
-
-  async pageUpdated(changes, lifecycle, changedBefore) {
-    if (this.active) {
-      this.grist?.fetch()
-    }
-  }
-
-  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
-    const response = await client.query({
-      query: gql`
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: activityInstances(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
-              name
-              description
-              priority
-              state
-              input
-              activityType
-              uiType
-              uiSource
-              dueAt
-              thumbnail
-              updatedAt
-              createdAt
-              creator {
-                id
-                name
-              }
-            }
-            total
-          }
-        }
-      `,
-      variables: {
-        filters,
-        pagination: { page, limit },
-        sortings
-      }
-    })
-
-    return {
-      total: response.data.responses.total || 0,
-      records: response.data.responses.items || []
-    }
-  }
-}