@operato/attachment 1.0.0-beta.5 → 1.0.0-beta.50

package/src/ox-attachment-list.ts

@@ -1,25 +1,25 @@
 import '@operato/data-grist'
 import '@operato/input/ox-input-file.js'
 
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
 import {
   ColumnConfig,
   DataGrist,
+  FetchOption,
   FieldRenderer,
   FiltersForm,
+  FilterValue,
   GristData,
   GristRecord,
   PaginationConfig,
-  QueryFilter,
   SortersConfig
 } from '@operato/data-grist'
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { ScrollbarStyles, TooltipStyles } from '@operato/styles'
 import { buildArgs, client } from '@operato/graphql'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import gql from 'graphql-tag'
-import i18next from 'i18next'
-import { sleep } from '@operato/utils'
+import { ScrollbarStyles, TooltipStyles } from '@operato/styles'
+import { copyToClipboard, sleep } from '@operato/utils'
 
 const FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {
   return gql`
@@ -120,7 +120,6 @@ export class OxAttachmentList extends LitElement {
     `
   ]
 
-  @property({ type: Array }) categories: any[] = ['audio', 'video', 'image', 'text', 'application']
   @property({ type: String }) category: string = ''
   @property({ type: Boolean }) creatable: boolean = false
 
@@ -134,23 +133,7 @@ export class OxAttachmentList extends LitElement {
         <div slot="headroom" id="headroom">
         
           <div id="filters">
-            <ox-filters-form
-              slot="headroom"
-              @change=${(e: Event) => this.grist.fetch(true)}
-            ></ox-filters-form>
-
-            <select
-              @change=${(e: Event) => {
-                this.category = (e.currentTarget as HTMLInputElement)?.value
-                this.requestUpdate()
-              }}
-            >
-              <option value="">${i18next.t('text.please choose a category')}</option>
-              ${this.categories.map(
-                category =>
-                  html` <option value=${category} ?selected=${this.category == category}>${category}</option> `
-              )}
-            </select>
+            <ox-filters-form></ox-filters-form>
           </div>
 
           <ox-input-file
@@ -163,9 +146,8 @@ export class OxAttachmentList extends LitElement {
     `
   }
 
-  async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {
-    const filters: QueryFilter[] = await this.filtersForm.getQueryFilters()
-    const { items: records, total } = await this.getAttachments({ page, limit, filters, sortings: sorters })
+  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
+    const { items: records, total } = await this.getAttachments({ page, limit, filters, sortings })
 
     return {
       total,
@@ -220,7 +202,7 @@ export class OxAttachmentList extends LitElement {
               target: HTMLElement
             ): Promise<void> => {
               var { protocol, hostname, port } = location
-              await navigator.clipboard.writeText(`${protocol}//${hostname}:${port}${record.fullpath}`)
+              await copyToClipboard(`${protocol}//${hostname}:${port}${record.fullpath}`)
 
               target.setAttribute('data-tooltip', 'url copied!')
               await sleep(2000)
@@ -306,6 +288,19 @@ export class OxAttachmentList extends LitElement {
             }
           }
         },
+        {
+          type: 'select',
+          name: 'category',
+          header: 'category',
+          record: {
+            options: ['', 'audio', 'video', 'image', 'text', 'application'],
+            editable: false
+          },
+          hidden: true,
+          filter: {
+            value: this.category
+          }
+        },
         {
           type: 'image',
           name: 'thumbnail',
@@ -387,12 +382,6 @@ export class OxAttachmentList extends LitElement {
     this.refreshAttachments()
   }
 
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('category')) {
-      this.refreshAttachments()
-    }
-  }
-
   onClickSelect(attachment: any) {
     this.dispatchEvent(
       new CustomEvent('attachment-selected', {
@@ -427,19 +416,12 @@ export class OxAttachmentList extends LitElement {
     limit = 30,
     filters = [],
     sortings = []
-  }: { page?: number; limit?: number; filters?: QueryFilter[]; sortings?: SortersConfig } = {}) {
+  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {
     var pagination: PaginationConfig = {
       limit,
       page
     }
 
-    if (this.category)
-      filters.push({
-        name: 'category',
-        operator: 'eq',
-        value: this.category
-      })
-
     var params = {
       filters,
       sortings,

package/src/ox-property-editor-attachment-selector.ts

@@ -1,14 +1,15 @@
 import './ox-attachment-selector'
 
-import { OxPropertyEditor } from '@operato/property-editor'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
 
 @customElement('ox-property-editor-attachment-selector')
 class OxPropertyEditorAttachmentSelector extends OxPropertyEditor {
-  editorTemplate() {
+  editorTemplate(value: any, spec: PropertySpec) {
     return html`
-      <ox-attachment-selector id="editor" .value=${this.value} .properties=${this.property}></ox-attachment-selector>
+      <ox-attachment-selector id="editor" .value=${value} .properties=${spec.property}></ox-attachment-selector>
     `
   }
 }

package/src/ox-property-editor-image-selector.ts

@@ -1,18 +1,19 @@
 import './ox-attachment-selector'
 
-import { OxPropertyEditor } from '@operato/property-editor'
-import { customElement } from 'lit/decorators.js'
 import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
 
 @customElement('ox-property-editor-image-selector')
 class OxPropertyEditorImageSelector extends OxPropertyEditor {
-  editorTemplate() {
+  editorTemplate(value: any, spec: PropertySpec) {
     return html`
       <ox-attachment-selector
         id="editor"
-        .value=${this.value}
+        .value=${value}
         .properties=${{
-          ...this.property,
+          ...spec.property,
           category: 'image'
         }}
       ></ox-attachment-selector>