@operato/attachment 7.0.73 → 7.0.78

package/src/ox-attachment-list.ts

@@ -4,6 +4,7 @@ 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 { openPopup, PopupHandle } from '@operato/popup'
 
 import {
   ColumnConfig,
@@ -34,6 +35,7 @@ const FETCH_ATTACHMENT_LIST_GQL = (listParam: any) => {
         category
         fullpath
         path
+        tags
         createdAt
         updatedAt
       }
@@ -59,6 +61,24 @@ const CREATE_ATTACHMENTS_GQL = gql`
       encoding
       category
       path
+      tags
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+const UPDATE_ATTACHMENT_GQL = gql`
+  mutation UpdateAttachment($patch: AttachmentPatch!, $id: String!) {
+    updateAttachment(patch: $patch, id: $id) {
+      id
+      name
+      description
+      mimetype
+      encoding
+      category
+      path
+      tags
       createdAt
       updatedAt
     }
@@ -136,7 +156,7 @@ export class OxAttachmentList extends LitElement {
       list: {
         thumbnail: 'thumbnail',
         fields: ['name'],
-        details: ['updatedAt']
+        details: ['tags', 'updatedAt']
       },
       columns: [
         {
@@ -147,6 +167,24 @@ export class OxAttachmentList extends LitElement {
           type: 'gutter',
           gutterName: 'sequence'
         },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'tag',
+          title: i18next.t('field.hashtags'),
+          handlers: {
+            click: (
+              columns: ColumnConfig[],
+              data: GristData,
+              column: ColumnConfig,
+              record: GristRecord,
+              rowIndex: number,
+              target: HTMLElement
+            ): void => {
+              this.popupHashtagEditor(record)
+            }
+          }
+        },
         {
           type: 'gutter',
           gutterName: 'button',
@@ -241,16 +279,13 @@ export class OxAttachmentList extends LitElement {
         {
           type: 'string',
           name: 'id',
+          filter: 'search',
           hidden: true
         },
         {
           type: 'string',
           name: 'name',
-          header: 'name',
-          record: {
-            editable: true,
-            align: 'left'
-          },
+          header: i18next.t('field.name'),
           width: 200,
           filter: 'search',
           sortable: true
@@ -258,21 +293,14 @@ export class OxAttachmentList extends LitElement {
         {
           type: 'string',
           name: 'description',
-          header: 'description',
-          record: {
-            editable: true,
-            align: 'left'
-          },
+          header: i18next.t('field.description'),
           width: 200,
           filter: 'search'
         },
         {
           type: 'select-buttons',
           name: 'category',
-          header: 'category',
-          record: {
-            editable: false
-          },
+          header: i18next.t('field.category'),
           hidden: true,
           filter: {
             operator: 'in',
@@ -281,6 +309,17 @@ export class OxAttachmentList extends LitElement {
             label: ''
           }
         },
+        {
+          type: 'hashtags',
+          name: 'tags',
+          header: i18next.t('field.hashtags'),
+          label: true,
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          width: 200
+        },
         {
           type: 'image',
           name: 'thumbnail',
@@ -317,20 +356,14 @@ export class OxAttachmentList extends LitElement {
         {
           type: 'datetime',
           name: 'updatedAt',
-          header: 'updated at',
-          record: {
-            editable: true
-          },
+          header: i18next.t('field.updated-at'),
           sortable: true,
           width: 180
         },
         {
           type: 'datetime',
           name: 'createdAt',
-          header: 'created at',
-          record: {
-            editable: true
-          },
+          header: i18next.t('field.created-at'),
           sortable: true,
           width: 180
         }
@@ -340,9 +373,6 @@ export class OxAttachmentList extends LitElement {
         selectable: {
           multiple: true
         },
-        handlers: {
-          click: 'select-row-toggle'
-        },
         classifier: function (
           record: GristRecord,
           rowIndex: number
@@ -435,6 +465,13 @@ export class OxAttachmentList extends LitElement {
     })
   }
 
+  async updateAttachment(patch: any) {
+    const response = await client.mutate({
+      mutation: UPDATE_ATTACHMENT_GQL,
+      variables: patch
+    })
+  }
+
   async deleteAttachment(id: string) {
     const response = await client.mutate({
       mutation: DELETE_ATTACHMENT_GQL,
@@ -445,4 +482,27 @@ export class OxAttachmentList extends LitElement {
 
     return response.data
   }
+
+  popupHashtagEditor(record: GristRecord) {
+    const hashtags = Array.isArray(record.tags) ? [...record.tags] : []
+
+    const confirmCallback = async (newval: any) => {
+      await this.updateAttachment({
+        id: record.id,
+        patch: { tags: newval }
+      })
+
+      this.refreshAttachments()
+    }
+
+    openPopup(
+      html`
+        <ox-popup-hashtags-input .value=${hashtags} .confirmCallback=${confirmCallback}></ox-popup-hashtags-input>
+      `,
+      {
+        backdrop: true,
+        title: i18next.t('title.edit hashtags')
+      }
+    )
+  }
 }