@operato/attachment 0.2.52

package/src/ox-attachment-list.ts

@@ -0,0 +1,547 @@
+// import './attachment-creation-card'
+import '@operato/data-grist'
+
+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 { DataGrist, QueryFilter } from '@operato/data-grist'
+import {
+  ColumnConfig,
+  GristData,
+  GristRecord,
+  PaginationConfig,
+  SortersConfig
+} from '@operato/data-grist/dist/src/types'
+import { buildArgs, client } from '@operato/graphql'
+import { ScrollbarStyles, TooltipStyles } from '@operato/styles'
+
+const FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {
+  return gql`
+  {
+    attachments(${buildArgs(listParam)}) {
+      items {
+        id
+        name
+        description
+        mimetype
+        encoding
+        category
+        fullpath
+        path
+      }
+      total
+    }
+  }
+`
+}
+
+const DELETE_ATTACHMENT_GQL = gql`
+  mutation DeleteAttachment($id: String!) {
+    deleteAttachment(id: $id)
+  }
+`
+
+const CREATE_ATTACHMENTS_GQL = gql`
+  mutation ($attachments: [NewAttachment!]!) {
+    createAttachments(attachments: $attachments) {
+      id
+      name
+      description
+      mimetype
+      encoding
+      category
+      path
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+@customElement('ox-attachment-list')
+export class OxAttachmentList extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    TooltipStyles,
+    css`
+      :host {
+        display: flex;
+
+        width: 100%;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      ox-grist {
+        flex: 1;
+        overflow-y: auto;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      #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);
+        background-color: var(--theme-white-color);
+        box-shadow: var(--box-shadow);
+      }
+
+      #filters {
+        flex: 1;
+        --mdc-icon-size: 20px;
+      }
+      #mode {
+        width: 100px;
+      }
+      #add {
+        width: 50px;
+        text-align: right;
+      }
+
+      #modes > * {
+        padding: var(--padding-narrow);
+        font-size: 1em;
+        opacity: 0.5;
+        color: var(--primary-text-color);
+        cursor: pointer;
+      }
+
+      #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);
+      }
+
+      #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);
+      }
+
+      #filters {
+        position: relative;
+      }
+      #filters [type='text'] {
+        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 {
+        position: absolute;
+        top: 3px;
+        color: var(--secondary-color);
+      }
+      #filters * {
+        margin-right: var(--margin-default);
+      }
+
+      @media only screen and (max-width: 460px) {
+        #modes {
+          display: none;
+        }
+      }
+    `
+  ]
+
+  @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
+
+  render() {
+    const mode = this.mode || 'CARD'
+
+    return html`
+      <ox-grist .config=${this.gristConfig} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" id="headroom">
+          <div id="filters">
+            <mwc-icon>search</mwc-icon>
+            <input type="text" />
+
+            <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>
+          </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-grist>
+    `
+  }
+
+  async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {
+    const { items: records, total } = await this.getAttachments({ page, limit, sorters })
+
+    return {
+      total,
+      records
+    }
+  }
+
+  get gristConfig() {
+    return {
+      list: {
+        thumbnail: function (record: GristRecord, rowIndex: number) {
+          return record.category == 'image'
+            ? html` <img src=${record.fullpath} style="width: 100%; height: 100%;" /> `
+            : record.category == 'video'
+            ? html` <video src=${record.fullpath} style="width: 100%; height: 100%;" controls></video> `
+            : html`
+                <div style="width: 100%; height: 100%;" etc>
+                  <mwc-icon outlined>insert_drive_file</mwc-icon>
+                  <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>
+                </div>
+              `
+        },
+        fields: ['name'],
+        details: ['updatedAt']
+      },
+      columns: [
+        {
+          type: 'gutter',
+          gutterName: 'dirty'
+        },
+        {
+          type: 'gutter',
+          gutterName: 'sequence'
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'open_in_new',
+          handlers: {
+            click: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): void => {
+              window.open(record.fullpath, '_blank')
+            }
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'link',
+          handlers: {
+            click: async (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): 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')
+            }
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'delete',
+          handlers: {
+            click: async (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): Promise<void> => {
+              await this.deleteAttachment(record.id!)
+              this.refreshAttachments()
+            }
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'save_alt',
+          handlers: {
+            click: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): void => {
+              const element = document.createElement('a')
+              element.setAttribute('href', record.fullpath)
+              element.setAttribute('download', record.name!)
+              document.body.appendChild(element)
+              element.click()
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: 'name',
+          record: {
+            editable: true,
+            align: 'left'
+          },
+          width: 200,
+          sortable: true
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: 'description',
+          record: {
+            editable: true,
+            align: 'left'
+          },
+          width: 200,
+          handlers: {
+            dblclick: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number
+            ): void => {
+              alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)
+            }
+          }
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: 'updated at',
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 180
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: 'created at',
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 180
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        },
+        handlers: {},
+        classifier: function (
+          record: GristRecord,
+          rowIndex: number
+        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}
+      },
+      sorters: [
+        {
+          name: 'name',
+          desc: false
+        }
+      ],
+      pagination: {
+        pages: [20, 30, 50, 100, 200]
+      }
+    }
+  }
+
+  async firstUpdated() {
+    this.refreshAttachments()
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('category')) {
+      this.refreshAttachments()
+    }
+  }
+
+  onClickSelect(attachment: any) {
+    this.dispatchEvent(
+      new CustomEvent('attachment-selected', {
+        composed: true,
+        bubbles: true,
+        detail: {
+          attachment
+        }
+      })
+    )
+  }
+
+  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)
+
+    await this.createAttachments(category, files)
+    this.refreshAttachments()
+  }
+
+  async onDeleteAttachment(id: string) {
+    await this.deleteAttachment(id)
+
+    this.refreshAttachments()
+  }
+
+  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({
+    page = 1,
+    limit = 30,
+    sorters = []
+  }: { page?: number; limit?: number; sorters?: SortersConfig } = {}) {
+    var filters: QueryFilter[] = []
+    var sortings: SortersConfig = []
+    var pagination: PaginationConfig = {
+      limit,
+      page
+    }
+
+    if (this.category)
+      filters.push({
+        name: 'category',
+        operator: 'eq',
+        value: this.category
+      })
+
+    var params = {
+      filters,
+      sortings,
+      pagination
+    }
+
+    var attachmentListResponse = await client.query({
+      query: FETCH_ATTACHMENT_LIST_GQL(params)
+    })
+
+    if (!attachmentListResponse || !attachmentListResponse.data) {
+      return {}
+    }
+
+    return attachmentListResponse?.data?.attachments || {}
+  }
+
+  async createAttachments(category: string, files: File[]) {
+    /*
+      ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client
+        - TODO support multiple file upload
+    */
+
+    await client.mutate({
+      mutation: CREATE_ATTACHMENTS_GQL,
+      variables: {
+        attachments: files.map(file => {
+          return { category, file }
+        })
+      },
+      context: {
+        hasUpload: true
+      }
+    })
+  }
+
+  async deleteAttachment(id: string) {
+    const response = await client.mutate({
+      mutation: DELETE_ATTACHMENT_GQL,
+      variables: {
+        id
+      }
+    })
+
+    return response.data
+  }
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node", "mocha"]
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});