@operato/attachment 0.2.52 → 0.3.7

package/src/ox-attachment-list.ts

@@ -1,21 +1,23 @@
-// import './attachment-creation-card'
 import '@operato/data-grist'
+import '@operato/input'
 
 import gql from 'graphql-tag'
 import i18next from 'i18next'
 import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { customElement, property, query } from 'lit/decorators.js'
 
-import { DataGrist, QueryFilter } from '@operato/data-grist'
 import {
   ColumnConfig,
+  DataGrist,
   GristData,
   GristRecord,
   PaginationConfig,
+  QueryFilter,
   SortersConfig
-} from '@operato/data-grist/dist/src/types'
+} from '@operato/data-grist'
 import { buildArgs, client } from '@operato/graphql'
 import { ScrollbarStyles, TooltipStyles } from '@operato/styles'
+import { sleep } from '@operato/utils'
 
 const FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {
   return gql`
@@ -30,6 +32,8 @@ const FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {
         category
         fullpath
         path
+        createdAt
+        updatedAt
       }
       total
     }
@@ -83,8 +87,6 @@ export class OxAttachmentList extends LitElement {
       }
 
       #headroom {
-        display: flex;
-        flex-direction: row;
         align-items: center;
         padding: var(--padding-default) var(--padding-wide);
         border-top: 2px solid rgba(0, 0, 0, 0.2);
@@ -93,104 +95,68 @@ export class OxAttachmentList extends LitElement {
       }
 
       #filters {
-        flex: 1;
-        --mdc-icon-size: 20px;
-      }
-      #mode {
-        width: 100px;
-      }
-      #add {
-        width: 50px;
-        text-align: right;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
       }
 
-      #modes > * {
-        padding: var(--padding-narrow);
-        font-size: 1em;
-        opacity: 0.5;
-        color: var(--primary-text-color);
-        cursor: pointer;
+      #filters > * {
+        padding: var(--padding-default) var(--padding-wide);
       }
 
-      #modes > mwc-icon[active] {
-        border-radius: 9px;
-        background-color: rgba(var(--primary-color-rgb), 0.05);
-        opacity: 1;
-        color: var(--secondary-text-color);
-        cursor: default;
-      }
-      #modes > mwc-icon:hover {
-        opacity: 1;
-        color: var(--secondary-text-color);
-      }
+      #search {
+        display: flex;
+        position: relative;
+        align-items: center;
 
-      #add button {
-        background-color: var(--status-success-color);
-        border: 0;
-        border-radius: 50%;
-        padding: 5px;
-        width: 36px;
-        height: 36px;
-        cursor: pointer;
-      }
-      #add button:hover {
-        background-color: var(--focus-background-color);
-        box-shadow: var(--box-shadow);
-      }
-      #add button mwc-icon {
-        font-size: 2em;
-        color: var(--theme-white-color);
+        --mdc-icon-size: 20px;
       }
 
-      #filters {
-        position: relative;
-      }
-      #filters [type='text'] {
+      #search [type='text'] {
+        flex: 1;
         background-color: transparent;
         border: 0;
         border-bottom: var(--border-dark-color);
         padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
         font-size: var(--fontsize-large);
-      }
-      #filters [type='text']:focus {
         outline: none;
       }
-      #filters mwc-icon {
+
+      #search mwc-icon {
         position: absolute;
-        top: 3px;
         color: var(--secondary-color);
       }
-      #filters * {
-        margin-right: var(--margin-default);
+
+      select {
+        border: 0;
+        outline: none;
+        text-align: right;
       }
 
       @media only screen and (max-width: 460px) {
-        #modes {
-          display: none;
+        #filters {
+          flex-direction: column;
         }
       }
     `
   ]
 
   @property({ type: Array }) categories: any[] = ['audio', 'video', 'image', 'text', 'application']
-  @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = 'CARD'
   @property({ type: String }) category: string = ''
   @property({ type: Boolean }) creatable: boolean = false
 
-  @state() private _total: number = 0
-  @state() private _page: number = 1
-
   @query('ox-grist') private grist!: DataGrist
+  @query('ox-input-file') fileUploader!: any
 
   render() {
-    const mode = this.mode || 'CARD'
-
     return html`
-      <ox-grist .config=${this.gristConfig} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" id="headroom">
           <div id="filters">
-            <mwc-icon>search</mwc-icon>
-            <input type="text" />
+            <div id="search">
+              <mwc-icon>search</mwc-icon>
+              <input type="text"/>
+            </div>
 
             <select
               @change=${(e: Event) => {
@@ -198,7 +164,7 @@ export class OxAttachmentList extends LitElement {
                 this.requestUpdate()
               }}
             >
-              <option value="">--${i18next.t('text.please choose a category')}--</option>
+              <option value="">${i18next.t('text.please choose a category')}</option>
               ${this.categories.map(
                 category =>
                   html` <option value=${category} ?selected=${this.category == category}>${category}</option> `
@@ -206,24 +172,12 @@ export class OxAttachmentList extends LitElement {
             </select>
           </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>
-
-          <!-- ${this.creatable
-            ? html`
-                <attachment-creation-card
-                  class="card create"
-                  .categories=${this.categories}
-                  .defaultCategory=${this.category}
-                  @create-attachment=${(e: CustomEvent) => this.onCreateAttachment(e)}
-                  @file-drop=${(e: CustomEvent) => this.onAttachmentDropped(e)}
-                ></attachment-creation-card>
-              `
-            : undefined} -->
-        </div>
+          <ox-input-file
+            accept="*/*"
+            multiple="true"
+            hide-filelist
+            @change=${this.onCreateAttachment.bind(this)}
+          ></ox-input-file>
       </ox-grist>
     `
   }
@@ -274,7 +228,8 @@ export class OxAttachmentList extends LitElement {
               data: GristData,
               column: ColumnConfig,
               record: GristRecord,
-              rowIndex: number
+              rowIndex: number,
+              target: HTMLElement
             ): void => {
               window.open(record.fullpath, '_blank')
             }
@@ -290,15 +245,15 @@ export class OxAttachmentList extends LitElement {
               data: GristData,
               column: ColumnConfig,
               record: GristRecord,
-              rowIndex: number
+              rowIndex: number,
+              target: HTMLElement
             ): Promise<void> => {
               var { protocol, hostname, port } = location
               await navigator.clipboard.writeText(`${protocol}//${hostname}:${port}${record.fullpath}`)
 
-              // TODO how to access clicked target
-              // this.setAttribute('data-tooltip', 'url copied!')
-              // await sleep(2000)
-              // this.removeAttribute('data-tooltip')
+              target.setAttribute('data-tooltip', 'url copied!')
+              await sleep(2000)
+              target.removeAttribute('data-tooltip')
             }
           }
         },
@@ -312,7 +267,8 @@ export class OxAttachmentList extends LitElement {
               data: GristData,
               column: ColumnConfig,
               record: GristRecord,
-              rowIndex: number
+              rowIndex: number,
+              target: HTMLElement
             ): Promise<void> => {
               await this.deleteAttachment(record.id!)
               this.refreshAttachments()
@@ -329,7 +285,8 @@ export class OxAttachmentList extends LitElement {
               data: GristData,
               column: ColumnConfig,
               record: GristRecord,
-              rowIndex: number
+              rowIndex: number,
+              target: HTMLElement
             ): void => {
               const element = document.createElement('a')
               element.setAttribute('href', record.fullpath)
@@ -401,7 +358,9 @@ export class OxAttachmentList extends LitElement {
         selectable: {
           multiple: true
         },
-        handlers: {},
+        handlers: {
+          click: 'select-row-toggle'
+        },
         classifier: function (
           record: GristRecord,
           rowIndex: number
@@ -441,19 +400,10 @@ export class OxAttachmentList extends LitElement {
     )
   }
 
-  async onAttachmentDropped(e: CustomEvent) {
-    var files = e.detail
-
-    await this.createAttachments('', files)
-    this.refreshAttachments()
-  }
-
   async onCreateAttachment(e: CustomEvent) {
-    var { category, files } = e.detail
-
-    files = Array.from(files)
+    const files = e.detail
 
-    await this.createAttachments(category, files)
+    await this.createAttachments(files)
     this.refreshAttachments()
   }
 
@@ -465,18 +415,6 @@ export class OxAttachmentList extends LitElement {
 
   async refreshAttachments() {
     this.grist.fetch()
-    // var attachments = await this.getAttachments()
-    // this.attachments = [...attachments]
-
-    // var creationCard = this.shadowRoot.querySelector('attachment-creation-card')
-    // if (creationCard) {
-    //   creationCard.reset()
-    // }
-  }
-
-  async appendAttachments() {
-    // var attachments = await this.getAttachments({ page: this._page + 1 })
-    // this.attachments = [...this.attachments, ...attachments]
   }
 
   async getAttachments({
@@ -515,17 +453,16 @@ export class OxAttachmentList extends LitElement {
     return attachmentListResponse?.data?.attachments || {}
   }
 
-  async createAttachments(category: string, files: File[]) {
+  async createAttachments(files: File[]) {
     /*
       ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client
-        - TODO support multiple file upload
     */
 
-    await client.mutate({
+    const response = await client.mutate({
       mutation: CREATE_ATTACHMENTS_GQL,
       variables: {
         attachments: files.map(file => {
-          return { category, file }
+          return { file }
         })
       },
       context: {

package/tsconfig.json

@@ -9,6 +9,7 @@
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "importHelpers": true,
     "outDir": "dist",
     "sourceMap": true,