@operato/app 1.0.0-beta.9 → 1.0.2

package/src/grist-editor/ox-selector-resource-object-legacy.ts

@@ -0,0 +1,360 @@
+import '@operato/data-grist'
+import '@operato/form/ox-search-form.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import {
+  ColumnConfig,
+  DataGrist,
+  FetchHandler,
+  FetchOption,
+  GristData,
+  GristEventHandler,
+  GristRecord,
+  ZERO_DATA
+} from '@operato/data-grist'
+import { MultiColumnFormStyles, SearchForm } from '@operato/form'
+import { buildArgs, client, gqlContext } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { isMobileDevice } from '@operato/utils'
+
+@customElement('ox-selector-resource-object-legacy')
+export class OxSelectorResourceObjectLegacy extends LitElement {
+  static styles = [
+    MultiColumnFormStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+      }
+
+      form {
+        position: relative;
+      }
+
+      [search] {
+        position: absolute;
+        right: 0;
+      }
+    `
+  ]
+
+  @property({ type: String }) value?: string
+  @property({ type: Object }) config: any
+  @property({ type: Object }) data: GristData = ZERO_DATA
+  @property({ type: String }) queryName!: string
+  @property({ type: Object }) basicArgs: any
+  @property({ type: Object }) confirmCallback?: (record?: GristRecord | null) => void
+  @property({ type: Array }) selectedRecords: GristRecord[] = []
+
+  @property({ type: Array }) searchFields: any
+  @property({ type: Array }) select: {
+    type: string
+    name: string
+    header: string
+    subFields?: string[]
+    hidden: boolean
+    ignoreCondition: boolean
+    queryName: string
+    width: number
+  }[] = []
+  @property({ type: Object }) list: any
+  @property({ type: String }) valueField: string | ((item: any) => any) = 'id'
+
+  @query('ox-grist') grist!: DataGrist
+  @query('ox-search-form') searchForm!: SearchForm
+
+  render() {
+    return html`
+      <ox-search-form
+        id="search-form"
+        @keypress=${(e: KeyboardEvent) => {
+          if (e.key === 'Enter') {
+            this.grist.fetch()
+          }
+        }}
+        @submit=${(e: SubmitEvent) => this.grist.fetch()}
+        .fields=${this.searchFields}
+        autofocus
+      ></ox-search-form>
+
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.config}
+        .data=${this.data}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .selectedRecords=${this.selectedRecords}
+      >
+        <div slot="headroom" id="headroom">
+          <div id="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+        </div>
+      </ox-grist>
+
+      <div class="button-container">
+        <mwc-button @click=${this.onempty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
+        <mwc-button @click=${this.oncancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
+        <mwc-button @click=${this.onconfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      </div>
+    `
+  }
+
+  onempty() {
+    this.confirmCallback && this.confirmCallback()
+    closePopup(this)
+  }
+
+  oncancel() {
+    closePopup(this)
+  }
+
+  onconfirm() {
+    this.confirmCallback && this.confirmCallback(this.selected)
+    closePopup(this)
+  }
+
+  fetchHandler: FetchHandler = async ({ filters, page, limit, sorters = [] }) => {
+    const response = await client.query({
+      query: gql`
+        query {
+          fetch: ${this.queryName} (${buildArgs(await this._buildConditions({ filters, page, limit, sorters }))}) {
+            ${this.getSelectFields()}
+          }
+        }
+      `,
+      context: gqlContext()
+    })
+
+    if (!response.errors) {
+      const records = response.data.fetch.items.map((item: any) => {
+        let rowValue
+
+        if (this.valueField && typeof this.valueField === 'function') {
+          rowValue = this.valueField(item)
+        } else if (this.valueField) {
+          rowValue = item[this.valueField]
+        } else {
+          rowValue = item.id
+        }
+
+        if (this.value && this.value === rowValue) {
+          this.selectedRecords = [item]
+          item['__selected__'] = true
+        }
+
+        return item
+      })
+      const total = response.data.fetch.total
+
+      return {
+        records,
+        total,
+        limit,
+        page
+      }
+    }
+  }
+
+  async firstUpdated() {
+    this.config = {
+      columns: [
+        {
+          type: 'gutter',
+          gutterName: 'sequence'
+        },
+        {
+          type: 'gutter',
+          gutterName: 'row-selector',
+          multiple: false
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: false
+        },
+        handlers: {
+          click: 'select-row',
+          dblclick: ((columns, data, column, record, rowIndex, field) => {
+            this.onconfirm()
+          }) as GristEventHandler
+        },
+        appendable: false
+      }
+    }
+
+    if (this.select && this.select.length > 0) {
+      let _searchFields = this.select.filter(selectField => !selectField.hidden && !selectField.ignoreCondition)
+      if (this.list && this.list.fields && this.list.fields.length > 0) {
+        _searchFields = _searchFields.filter(searchField => this.list.fields.indexOf(searchField.name) >= 0)
+      } else {
+        _searchFields = _searchFields.slice(0, 4)
+      }
+
+      this.searchFields = _searchFields.map(selectField => {
+        const fieldType = (selectField.type && selectField.type.toLowerCase()) || 'string'
+        const numberTypes = ['integer', 'float']
+        return {
+          label: selectField.header || i18next.t(`field.${selectField.name}`),
+          name: selectField.name,
+          type:
+            fieldType === 'string'
+              ? 'text'
+              : numberTypes.indexOf(fieldType) >= 0
+              ? 'number'
+              : fieldType === 'boolean'
+              ? 'checkbox'
+              : fieldType,
+          queryName: selectField.queryName,
+          props:
+            fieldType === 'string'
+              ? { searchOper: 'i_like' }
+              : fieldType === 'object'
+              ? { searchOper: 'in' }
+              : { searchOper: 'eq' },
+          attrs: fieldType === 'boolean' ? ['indeterminated'] : []
+        }
+      })
+      this.config = {
+        ...this.config,
+        columns: [
+          ...this.config.columns,
+          ...this.select.map(selectField => {
+            return {
+              ...selectField,
+              type: selectField.type || 'string',
+              width: selectField.width || 160,
+              header: selectField.header || i18next.t(`field.${selectField.name}`)
+            }
+          })
+        ]
+      }
+    } else {
+      this.searchFields = [
+        {
+          label: i18next.t('field.name'),
+          name: 'name',
+          type: 'text',
+          props: { searchOper: 'i_like' }
+        },
+        {
+          label: i18next.t('field.description'),
+          name: 'description',
+          type: 'text',
+          props: { searchOper: 'i_like' }
+        }
+      ]
+
+      this.config = {
+        ...this.config,
+        columns: [
+          ...this.config.columns,
+          {
+            type: 'string',
+            name: 'id',
+            header: i18next.t('field.id'),
+            hidden: true
+          },
+          {
+            type: 'string',
+            name: 'name',
+            header: i18next.t('field.name'),
+            record: {
+              align: 'left'
+            },
+            sortable: true,
+            width: 160
+          },
+          {
+            type: 'string',
+            name: 'description',
+            header: i18next.t('field.description'),
+            record: {
+              align: 'left'
+            },
+            sortable: true,
+            width: 300
+          }
+        ]
+      }
+    }
+
+    this.config = {
+      ...this.config,
+      list: {
+        ...this.list,
+        fields:
+          this.list && this.list.fields && this.list.fields.length > 0
+            ? this.list.fields
+            : (this.config.columns as ColumnConfig[])
+                .filter(column => column.type !== 'gutter')
+                .slice(0, 3)
+                .map(column => column.name)
+      }
+    }
+
+    await this.updateComplete
+    this.grist && this.grist.focus()
+  }
+
+  getSelectFields() {
+    if (this.select && this.select.length > 0) {
+      return `items {
+        ${this.select.map(selectField => {
+          return selectField.type === 'object'
+            ? `${selectField.name} { ${
+                selectField.subFields && selectField.subFields.length > 0
+                  ? selectField.subFields.join(' ')
+                  : `id name description`
+              } }`
+            : `${selectField.name}`
+        })}
+      }
+      total`
+    } else {
+      return `
+        items {
+          id
+          name
+          description
+        }
+        total
+      `
+    }
+  }
+
+  async _buildConditions({ filters, page, limit, sorters }: FetchOption) {
+    const queryConditions = {
+      filters: [],
+      ...this.basicArgs
+    }
+
+    queryConditions.filters = [...queryConditions.filters, ...(await this.searchForm.getQueryFilters())]
+    queryConditions.pagination = { page, limit }
+    queryConditions.sortings = sorters
+
+    return queryConditions
+  }
+
+  get selected() {
+    var grist = this.renderRoot.querySelector('ox-grist') as DataGrist
+
+    var selected = grist.selected
+
+    return selected && selected.length > 0 ? selected[0] : undefined
+  }
+}

package/src/grist-editor/ox-selector-resource-object.ts

@@ -1,53 +1,46 @@
 import '@operato/data-grist'
-import '@operato/form/ox-search-form.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import {
-  ColumnConfig,
-  DataGrist,
-  FetchHandler,
-  FetchOption,
-  GristData,
-  GristEventHandler,
-  GristRecord,
-  ZERO_DATA
-} from '@operato/data-grist'
-import { MultiColumnFormStyles, SearchForm } from '@operato/form'
-import { buildArgs, client, gqlContext } from '@operato/graphql'
+import { DataGrist, FetchHandler, GristData, GristEventHandler, GristRecord, ZERO_DATA } from '@operato/data-grist'
+import { client, gqlContext } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
-import { isMobileDevice } from '@operato/utils'
+import { closePopup } from '@operato/popup'
+import { adjustFilters, isMobileDevice } from '@operato/utils'
 
 @customElement('ox-selector-resource-object')
 export class OxSelectorResourceObject extends LitElement {
   static styles = [
-    MultiColumnFormStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
         background-color: #fff;
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
       }
 
       ox-grist {
         flex: 1;
       }
 
-      .button-container {
+      #filters {
         display: flex;
-        margin-left: auto;
+        flex-direction: row;
+        justify-content: space-between;
       }
 
-      form {
-        position: relative;
+      #filters > * {
+        padding: var(--padding-default) var(--padding-wide);
       }
 
-      [search] {
-        position: absolute;
-        right: 0;
+      .button-container {
+        display: flex;
+        margin-left: auto;
       }
     `
   ]
@@ -61,13 +54,12 @@ export class OxSelectorResourceObject extends LitElement {
   @property({ type: Array }) selectedRecords: GristRecord[] = []
 
   @property({ type: Array }) searchFields: any
-  @property({ type: Array }) select: {
+  @property({ type: Array }) columns: {
     type: string
     name: string
     header: string
     subFields?: string[]
     hidden: boolean
-    ignoreCondition: boolean
     queryName: string
     width: number
   }[] = []
@@ -75,28 +67,20 @@ export class OxSelectorResourceObject extends LitElement {
   @property({ type: String }) valueField: string | ((item: any) => any) = 'id'
 
   @query('ox-grist') grist!: DataGrist
-  @query('ox-search-form') searchForm!: SearchForm
 
   render() {
     return html`
-      <ox-search-form
-        id="search-form"
-        @keypress=${(e: KeyboardEvent) => {
-          if (e.key === 'Enter') {
-            this.grist.fetch()
-          }
-        }}
-        @submit=${(e: SubmitEvent) => this.grist.fetch()}
-        .fields=${this.searchFields}
-      ></ox-search-form>
-
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.config}
         .data=${this.data}
         .fetchHandler=${this.fetchHandler.bind(this)}
         .selectedRecords=${this.selectedRecords}
-      ></ox-grist>
+      >
+        <div id="filters" slot="headroom">
+          <ox-filters-form autofocus></ox-filters-form>
+        </div>
+      </ox-grist>
 
       <div class="button-container">
         <mwc-button @click=${this.onempty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
@@ -108,27 +92,33 @@ export class OxSelectorResourceObject extends LitElement {
 
   onempty() {
     this.confirmCallback && this.confirmCallback()
-    history.back()
+    closePopup(this)
   }
 
   oncancel() {
-    history.back()
+    closePopup(this)
   }
 
   onconfirm() {
     this.confirmCallback && this.confirmCallback(this.selected)
-    history.back()
+    closePopup(this)
   }
 
-  fetchHandler: FetchHandler = async ({ filters, page, limit, sorters = [] }) => {
+  fetchHandler: FetchHandler = async ({ filters = [], page, limit, sortings = [] }) => {
+    if (this.basicArgs) {
+      filters = adjustFilters(filters, this.basicArgs)
+    }
+    const pagination = { page, limit }
+
     const response = await client.query({
       query: gql`
-        query {
-          fetch: ${this.queryName} (${buildArgs(await this._buildConditions({ filters, page, limit, sorters }))}) {
-            ${this.getSelectFields()}
+        query($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          fetch: ${this.queryName} (filters: $filters, pagination: $pagination, sortings: $sortings) {
+            ${this.getQueryFields()}
           }
         }
       `,
+      variables: { filters, pagination, sortings },
       context: gqlContext()
     })
 
@@ -189,124 +179,57 @@ export class OxSelectorResourceObject extends LitElement {
       }
     }
 
-    if (this.select && this.select.length > 0) {
-      let _searchFields = this.select.filter(selectField => !selectField.hidden && !selectField.ignoreCondition)
-      if (this.list && this.list.fields && this.list.fields.length > 0) {
-        _searchFields = _searchFields.filter(searchField => this.list.fields.indexOf(searchField.name) >= 0)
-      } else {
-        _searchFields = _searchFields.slice(0, 4)
-      }
-
-      this.searchFields = _searchFields.map(selectField => {
-        const fieldType = (selectField.type && selectField.type.toLowerCase()) || 'string'
-        const numberTypes = ['integer', 'float']
-        return {
-          label: selectField.header || i18next.t(`field.${selectField.name}`),
-          name: selectField.name,
-          type:
-            fieldType === 'string'
-              ? 'text'
-              : numberTypes.indexOf(fieldType) >= 0
-              ? 'number'
-              : fieldType === 'boolean'
-              ? 'checkbox'
-              : fieldType,
-          queryName: selectField.queryName,
-          props:
-            fieldType === 'string'
-              ? { searchOper: 'i_like' }
-              : fieldType === 'object'
-              ? { searchOper: 'in' }
-              : { searchOper: 'eq' },
-          attrs: fieldType === 'boolean' ? ['indeterminated'] : []
-        }
-      })
-      this.config = {
-        ...this.config,
-        columns: [
-          ...this.config.columns,
-          ...this.select.map(selectField => {
-            return {
-              ...selectField,
-              type: selectField.type || 'string',
-              width: selectField.width || 160,
-              header: selectField.header || i18next.t(`field.${selectField.name}`)
-            }
-          })
-        ]
-      }
-    } else {
-      this.searchFields = [
-        {
-          label: i18next.t('field.name'),
-          name: 'name',
-          type: 'text',
-          props: { searchOper: 'i_like' }
+    const columns = this.columns || [
+      {
+        type: 'string',
+        name: 'id',
+        header: i18next.t('field.id'),
+        hidden: true
+      },
+      {
+        type: 'string',
+        name: 'name',
+        header: i18next.t('field.name'),
+        record: {
+          align: 'left'
         },
-        {
-          label: i18next.t('field.description'),
-          name: 'description',
-          type: 'text',
-          props: { searchOper: 'i_like' }
-        }
-      ]
-
-      this.config = {
-        ...this.config,
-        columns: [
-          ...this.config.columns,
-          {
-            type: 'string',
-            name: 'id',
-            header: i18next.t('field.id'),
-            hidden: true
-          },
-          {
-            type: 'string',
-            name: 'name',
-            header: i18next.t('field.name'),
-            record: {
-              align: 'left'
-            },
-            sortable: true,
-            width: 160
-          },
-          {
-            type: 'string',
-            name: 'description',
-            header: i18next.t('field.description'),
-            record: {
-              align: 'left'
-            },
-            sortable: true,
-            width: 300
-          }
-        ]
+        sortable: true,
+        filter: 'search',
+        width: 160
+      },
+      {
+        type: 'string',
+        name: 'description',
+        header: i18next.t('field.description'),
+        record: {
+          align: 'left'
+        },
+        sortable: true,
+        filter: 'search',
+        width: 300
       }
-    }
+    ]
 
     this.config = {
       ...this.config,
-      list: {
-        ...this.list,
-        fields:
-          this.list && this.list.fields && this.list.fields.length > 0
-            ? this.list.fields
-            : (this.config.columns as ColumnConfig[])
-                .filter(column => column.type !== 'gutter')
-                .slice(0, 3)
-                .map(column => column.name)
-      }
+      columns: [
+        ...this.config.columns,
+        ...columns.map(selectField => {
+          return {
+            ...selectField,
+            type: selectField.type || 'string',
+            width: selectField.width || 160,
+            header: selectField.header || i18next.t(`field.${selectField.name}`)
+          }
+        })
+      ]
     }
-
-    await this.updateComplete
-    this.grist && this.grist.focus()
   }
 
-  getSelectFields() {
-    if (this.select && this.select.length > 0) {
+  getQueryFields() {
+    if (this.columns && this.columns.length > 0) {
       return `items {
-        ${this.select.map(selectField => {
+        ${this.columns.map(selectField => {
           return selectField.type === 'object'
             ? `${selectField.name} { ${
                 selectField.subFields && selectField.subFields.length > 0
@@ -329,19 +252,6 @@ export class OxSelectorResourceObject extends LitElement {
     }
   }
 
-  async _buildConditions({ filters, page, limit, sorters }: FetchOption) {
-    const queryConditions = {
-      filters: [],
-      ...this.basicArgs
-    }
-
-    queryConditions.filters = [...queryConditions.filters, ...(await this.searchForm.getQueryFilters())]
-    queryConditions.pagination = { page, limit }
-    queryConditions.sortings = sorters
-
-    return queryConditions
-  }
-
   get selected() {
     var grist = this.renderRoot.querySelector('ox-grist') as DataGrist