@operato/attachment 0.2.52

package/dist/src/ox-attachment-list.js

@@ -0,0 +1,489 @@
+import { __decorate } from "tslib";
+// import './attachment-creation-card'
+import '@operato/data-grist';
+import gql from 'graphql-tag';
+import i18next from 'i18next';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { buildArgs, client } from '@operato/graphql';
+import { ScrollbarStyles, TooltipStyles } from '@operato/styles';
+const FETCH_ATTACHMENT_LIST_GQL = (listParam) => {
+    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
+    }
+  }
+`;
+let OxAttachmentList = class OxAttachmentList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.categories = ['audio', 'video', 'image', 'text', 'application'];
+        this.mode = 'CARD';
+        this.category = '';
+        this.creatable = false;
+        this._total = 0;
+        this._page = 1;
+    }
+    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) => {
+            var _a;
+            this.category = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.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) => this.onCreateAttachment(e)}
+                  @file-drop=${(e) => this.onAttachmentDropped(e)}
+                ></attachment-creation-card>
+              `
+            : undefined} -->
+        </div>
+      </ox-grist>
+    `;
+    }
+    async fetchHandler({ page, limit, sorters = [] }) {
+        const { items: records, total } = await this.getAttachments({ page, limit, sorters });
+        return {
+            total,
+            records
+        };
+    }
+    get gristConfig() {
+        return {
+            list: {
+                thumbnail: function (record, rowIndex) {
+                    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, data, column, record, rowIndex) => {
+                            window.open(record.fullpath, '_blank');
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'link',
+                    handlers: {
+                        click: async (columns, data, column, record, rowIndex) => {
+                            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, data, column, record, rowIndex) => {
+                            await this.deleteAttachment(record.id);
+                            this.refreshAttachments();
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'save_alt',
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            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, data, column, record, rowIndex) => {
+                            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, rowIndex) { }
+            },
+            sorters: [
+                {
+                    name: 'name',
+                    desc: false
+                }
+            ],
+            pagination: {
+                pages: [20, 30, 50, 100, 200]
+            }
+        };
+    }
+    async firstUpdated() {
+        this.refreshAttachments();
+    }
+    updated(changes) {
+        if (changes.has('category')) {
+            this.refreshAttachments();
+        }
+    }
+    onClickSelect(attachment) {
+        this.dispatchEvent(new CustomEvent('attachment-selected', {
+            composed: true,
+            bubbles: true,
+            detail: {
+                attachment
+            }
+        }));
+    }
+    async onAttachmentDropped(e) {
+        var files = e.detail;
+        await this.createAttachments('', files);
+        this.refreshAttachments();
+    }
+    async onCreateAttachment(e) {
+        var { category, files } = e.detail;
+        files = Array.from(files);
+        await this.createAttachments(category, files);
+        this.refreshAttachments();
+    }
+    async onDeleteAttachment(id) {
+        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 = [] } = {}) {
+        var _a;
+        var filters = [];
+        var sortings = [];
+        var pagination = {
+            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 ((_a = attachmentListResponse === null || attachmentListResponse === void 0 ? void 0 : attachmentListResponse.data) === null || _a === void 0 ? void 0 : _a.attachments) || {};
+    }
+    async createAttachments(category, files) {
+        /*
+          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) {
+        const response = await client.mutate({
+            mutation: DELETE_ATTACHMENT_GQL,
+            variables: {
+                id
+            }
+        });
+        return response.data;
+    }
+};
+OxAttachmentList.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;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], OxAttachmentList.prototype, "categories", void 0);
+__decorate([
+    property({ type: String })
+], OxAttachmentList.prototype, "mode", void 0);
+__decorate([
+    property({ type: String })
+], OxAttachmentList.prototype, "category", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxAttachmentList.prototype, "creatable", void 0);
+__decorate([
+    state()
+], OxAttachmentList.prototype, "_total", void 0);
+__decorate([
+    state()
+], OxAttachmentList.prototype, "_page", void 0);
+__decorate([
+    query('ox-grist')
+], OxAttachmentList.prototype, "grist", void 0);
+OxAttachmentList = __decorate([
+    customElement('ox-attachment-list')
+], OxAttachmentList);
+export { OxAttachmentList };
+//# sourceMappingURL=ox-attachment-list.js.map

package/dist/src/ox-attachment-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-attachment-list.js","sourceRoot":"","sources":["../../src/ox-attachment-list.ts"],"names":[],"mappings":"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","sourcesContent":["// import './attachment-creation-card'\nimport '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport i18next from 'i18next'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { DataGrist, QueryFilter } from '@operato/data-grist'\nimport {\n  ColumnConfig,\n  GristData,\n  GristRecord,\n  PaginationConfig,\n  SortersConfig\n} from '@operato/data-grist/dist/src/types'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles, TooltipStyles } from '@operato/styles'\n\nconst FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    attachments(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        mimetype\n        encoding\n        category\n        fullpath\n        path\n      }\n      total\n    }\n  }\n`\n}\n\nconst DELETE_ATTACHMENT_GQL = gql`\n  mutation DeleteAttachment($id: String!) {\n    deleteAttachment(id: $id)\n  }\n`\n\nconst CREATE_ATTACHMENTS_GQL = gql`\n  mutation ($attachments: [NewAttachment!]!) {\n    createAttachments(attachments: $attachments) {\n      id\n      name\n      description\n      mimetype\n      encoding\n      category\n      path\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-attachment-list')\nexport class OxAttachmentList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      #headroom {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n      }\n\n      #filters {\n        flex: 1;\n        --mdc-icon-size: 20px;\n      }\n      #mode {\n        width: 100px;\n      }\n      #add {\n        width: 50px;\n        text-align: right;\n      }\n\n      #modes > * {\n        padding: var(--padding-narrow);\n        font-size: 1em;\n        opacity: 0.5;\n        color: var(--primary-text-color);\n        cursor: pointer;\n      }\n\n      #modes > mwc-icon[active] {\n        border-radius: 9px;\n        background-color: rgba(var(--primary-color-rgb), 0.05);\n        opacity: 1;\n        color: var(--secondary-text-color);\n        cursor: default;\n      }\n      #modes > mwc-icon:hover {\n        opacity: 1;\n        color: var(--secondary-text-color);\n      }\n\n      #add button {\n        background-color: var(--status-success-color);\n        border: 0;\n        border-radius: 50%;\n        padding: 5px;\n        width: 36px;\n        height: 36px;\n        cursor: pointer;\n      }\n      #add button:hover {\n        background-color: var(--focus-background-color);\n        box-shadow: var(--box-shadow);\n      }\n      #add button mwc-icon {\n        font-size: 2em;\n        color: var(--theme-white-color);\n      }\n\n      #filters {\n        position: relative;\n      }\n      #filters [type='text'] {\n        background-color: transparent;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;\n        font-size: var(--fontsize-large);\n      }\n      #filters [type='text']:focus {\n        outline: none;\n      }\n      #filters mwc-icon {\n        position: absolute;\n        top: 3px;\n        color: var(--secondary-color);\n      }\n      #filters * {\n        margin-right: var(--margin-default);\n      }\n\n      @media only screen and (max-width: 460px) {\n        #modes {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) categories: any[] = ['audio', 'video', 'image', 'text', 'application']\n  @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = 'CARD'\n  @property({ type: String }) category: string = ''\n  @property({ type: Boolean }) creatable: boolean = false\n\n  @state() private _total: number = 0\n  @state() private _page: number = 1\n\n  @query('ox-grist') private grist!: DataGrist\n\n  render() {\n    const mode = this.mode || 'CARD'\n\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"filters\">\n            <mwc-icon>search</mwc-icon>\n            <input type=\"text\" />\n\n            <select\n              @change=${(e: Event) => {\n                this.category = (e.currentTarget as HTMLInputElement)?.value\n                this.requestUpdate()\n              }}\n            >\n              <option value=\"\">--${i18next.t('text.please choose a category')}--</option>\n              ${this.categories.map(\n                category =>\n                  html` <option value=${category} ?selected=${this.category == category}>${category}</option> `\n              )}\n            </select>\n          </div>\n\n          <div id=\"modes\">\n            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>\n            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>\n            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>\n          </div>\n\n          <!-- ${this.creatable\n            ? html`\n                <attachment-creation-card\n                  class=\"card create\"\n                  .categories=${this.categories}\n                  .defaultCategory=${this.category}\n                  @create-attachment=${(e: CustomEvent) => this.onCreateAttachment(e)}\n                  @file-drop=${(e: CustomEvent) => this.onAttachmentDropped(e)}\n                ></attachment-creation-card>\n              `\n            : undefined} -->\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page, limit, sorters = [] }: { page: number; limit: number; sorters: SortersConfig }) {\n    const { items: records, total } = await this.getAttachments({ page, limit, sorters })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    return {\n      list: {\n        thumbnail: function (record: GristRecord, rowIndex: number) {\n          return record.category == 'image'\n            ? html` <img src=${record.fullpath} style=\"width: 100%; height: 100%;\" /> `\n            : record.category == 'video'\n            ? html` <video src=${record.fullpath} style=\"width: 100%; height: 100%;\" controls></video> `\n            : html`\n                <div style=\"width: 100%; height: 100%;\" etc>\n                  <mwc-icon outlined>insert_drive_file</mwc-icon>\n                  <span>${record.path.substr(record.path.lastIndexOf('.'))}</span>\n                </div>\n              `\n        },\n        fields: ['name'],\n        details: ['updatedAt']\n      },\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'dirty'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'open_in_new',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number\n            ): void => {\n              window.open(record.fullpath, '_blank')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'link',\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number\n            ): Promise<void> => {\n              var { protocol, hostname, port } = location\n              await navigator.clipboard.writeText(`${protocol}//${hostname}:${port}${record.fullpath}`)\n\n              // TODO how to access clicked target\n              // this.setAttribute('data-tooltip', 'url copied!')\n              // await sleep(2000)\n              // this.removeAttribute('data-tooltip')\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'delete',\n          handlers: {\n            click: async (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number\n            ): Promise<void> => {\n              await this.deleteAttachment(record.id!)\n              this.refreshAttachments()\n            }\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'save_alt',\n          handlers: {\n            click: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number\n            ): void => {\n              const element = document.createElement('a')\n              element.setAttribute('href', record.fullpath)\n              element.setAttribute('download', record.name!)\n              document.body.appendChild(element)\n              element.click()\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          handlers: {\n            dblclick: (\n              columns: ColumnConfig[],\n              data: GristData,\n              column: ColumnConfig,\n              record: GristRecord,\n              rowIndex: number\n            ): void => {\n              alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`)\n            }\n          }\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: 'updated at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'datetime',\n          name: 'createdAt',\n          header: 'created at',\n          record: {\n            editable: true\n          },\n          sortable: true,\n          width: 180\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: true\n        },\n        handlers: {},\n        classifier: function (\n          record: GristRecord,\n          rowIndex: number\n        ): { emphasized?: boolean | string | string[]; [key: string]: any } | void {}\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshAttachments()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('category')) {\n      this.refreshAttachments()\n    }\n  }\n\n  onClickSelect(attachment: any) {\n    this.dispatchEvent(\n      new CustomEvent('attachment-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          attachment\n        }\n      })\n    )\n  }\n\n  async onAttachmentDropped(e: CustomEvent) {\n    var files = e.detail\n\n    await this.createAttachments('', files)\n    this.refreshAttachments()\n  }\n\n  async onCreateAttachment(e: CustomEvent) {\n    var { category, files } = e.detail\n\n    files = Array.from(files)\n\n    await this.createAttachments(category, files)\n    this.refreshAttachments()\n  }\n\n  async onDeleteAttachment(id: string) {\n    await this.deleteAttachment(id)\n\n    this.refreshAttachments()\n  }\n\n  async refreshAttachments() {\n    this.grist.fetch()\n    // var attachments = await this.getAttachments()\n    // this.attachments = [...attachments]\n\n    // var creationCard = this.shadowRoot.querySelector('attachment-creation-card')\n    // if (creationCard) {\n    //   creationCard.reset()\n    // }\n  }\n\n  async appendAttachments() {\n    // var attachments = await this.getAttachments({ page: this._page + 1 })\n    // this.attachments = [...this.attachments, ...attachments]\n  }\n\n  async getAttachments({\n    page = 1,\n    limit = 30,\n    sorters = []\n  }: { page?: number; limit?: number; sorters?: SortersConfig } = {}) {\n    var filters: QueryFilter[] = []\n    var sortings: SortersConfig = []\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    if (this.category)\n      filters.push({\n        name: 'category',\n        operator: 'eq',\n        value: this.category\n      })\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var attachmentListResponse = await client.query({\n      query: FETCH_ATTACHMENT_LIST_GQL(params)\n    })\n\n    if (!attachmentListResponse || !attachmentListResponse.data) {\n      return {}\n    }\n\n    return attachmentListResponse?.data?.attachments || {}\n  }\n\n  async createAttachments(category: string, files: File[]) {\n    /*\n      ref. https://github.com/jaydenseric/graphql-multipart-request-spec#client\n        - TODO support multiple file upload\n    */\n\n    await client.mutate({\n      mutation: CREATE_ATTACHMENTS_GQL,\n      variables: {\n        attachments: files.map(file => {\n          return { category, file }\n        })\n      },\n      context: {\n        hasUpload: true\n      }\n    })\n  }\n\n  async deleteAttachment(id: string) {\n    const response = await client.mutate({\n      mutation: DELETE_ATTACHMENT_GQL,\n      variables: {\n        id\n      }\n    })\n\n    return response.data\n  }\n}\n"]}