@things-factory/board-ui 6.2.15 → 6.2.17

package/client/graphql/board-template.ts

@@ -0,0 +1,141 @@
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+import { gqlBuilder } from '@things-factory/utils'
+
+export async function fetchBoardTemplateList(listParam = {}) {
+  const response = await client.query({
+    query: gql`
+      {
+        boardTemplates(${gqlBuilder.buildArgs(listParam)}) {
+          items {
+            id
+            name
+            description
+            thumbnail
+            visibility
+            createdAt
+            updatedAt
+          }
+          total
+        }
+      }
+    `
+  })
+
+  return response.data
+}
+
+export async function fetchBoardTemplate(id) {
+  const response = await client.query({
+    query: gql`
+      query FetchBoardTemplate($id: String!) {
+        boardTemplate(id: $id) {
+          id
+          name
+          description
+          thumbnail
+          model
+          visibility
+          createdAt
+          creator {
+            id
+            name
+          }
+          updatedAt
+          updater {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: { id }
+  })
+
+  return response.data
+}
+
+export async function createBoardTemplate(boardTemplate) {
+  /*
+    input NewBoard {
+      name        : String!
+      description : String
+      model       : String!
+      visibility  : String!
+    }
+  */
+
+  boardTemplate.model = JSON.stringify(boardTemplate.model)
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation CreateBoardTemplate($boardTemplate: NewBoardTemplate!) {
+        createBoardTemplate(boardTemplate: $boardTemplate) {
+          id
+          name
+          description
+          model
+          visibility
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      boardTemplate
+    }
+  })
+
+  return response.data
+}
+
+export async function updateBoardTemplate(boardTemplate) {
+  /*
+    input BoardPatch {
+      name        : String
+      description : String
+      model       : String
+      visibility  : String
+    }
+    */
+  var { id, name, description, model, visibility } = boardTemplate
+  model = JSON.stringify(model)
+
+  const response = await client.mutate({
+    mutation: gql`
+      mutation UpdateBoard($id: String!, $patch: BoardTemplatePatch!) {
+        updateBoard(id: $id, patch: $patch) {
+          id
+          name
+          description
+          model
+          visibility
+          createdAt
+          updatedAt
+        }
+      }
+    `,
+    variables: {
+      id,
+      patch: { name, description, model, visibility }
+    }
+  })
+
+  return response.data
+}
+
+export async function deleteBoardTemplate(id) {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($id: String!) {
+        deleteBoardTemplate(id: $id)
+      }
+    `,
+    variables: {
+      id
+    }
+  })
+
+  return response.data
+}

package/client/graphql/index.ts

@@ -3,3 +3,4 @@ export * from './group'
 export * from './play-group'
 export * from './favorite-board'
 export * from './my-board'
+export * from './board-template'

package/client/pages/board-list-page.ts

@@ -360,6 +360,7 @@ export class BoardListPage extends localize(i18next)(connect(store)(InfiniteScro
           @delete-board=${e => this.onDeleteBoard(e.detail)}
           @join-playgroup=${e => this.onJoinPlayGroup(e.detail)}
           @leave-playgroup=${e => this.onLeavePlayGroup(e.detail)}
+          @register-template=${e => this.onRegisterTemplate(e.detail)}
         ></board-info>
       `
     })
@@ -549,6 +550,33 @@ export class BoardListPage extends localize(i18next)(connect(store)(InfiniteScro
     }
   }
 
+  async onRegisterTemplate({ id, name, description, visibility }) {
+    try {
+      const { data } = await client.mutate({
+        mutation: gql`
+          mutation ($id: String!, $name: String!, $description: String!, $visibility: String!) {
+            registerBoardAsTemplate(id: $id, name: $name, description: $description, visibility: $visibility) {
+              id
+            }
+          }
+        `,
+        variables: {
+          id,
+          name,
+          description,
+          visibility
+        }
+      })
+
+      data &&
+        this._notify('info', i18next.t('text.info_x_successfully', { x: i18next.t('text.register-template') }), {
+          name
+        })
+    } catch (ex) {
+      this._notify('error', ex, ex)
+    }
+  }
+
   async refreshFavorites() {
     const { data } = await client.query({
       query: gql`

package/client/pages/board-template/board-template-list-page.ts

@@ -1,14 +1,14 @@
 import '@operato/data-grist'
 
-import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
+import { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
-import { notify, openPopup } from '@operato/layout'
+import { notify } from '@operato/layout'
 import { OxPopup } from '@operato/popup'
 
 import { connect } from 'pwa-helpers/connect-mixin'
@@ -33,6 +33,7 @@ export class BoardTemplateListPage extends connect(store)(localize(i18next)(Scop
   ]
 
   @property({ type: Object }) gristConfig: any
+  @state() visibility: string = ''
 
   @query('ox-grist') private grist!: DataGrist
   @query('#sorter-control') private sortersControl!: OxPopup
@@ -51,19 +52,8 @@ export class BoardTemplateListPage extends connect(store)(localize(i18next)(Scop
           this.grist.toggleHeadroom()
         }
       },
-      help: 'board-service/board-template',
-      actions: [
-        {
-          title: i18next.t('button.save'),
-          action: this._updateBoardTemplate.bind(this),
-          ...CommonButtonStyles.save
-        },
-        {
-          title: i18next.t('button.delete'),
-          action: this._deleteBoardTemplate.bind(this),
-          ...CommonButtonStyles.delete
-        }
-      ]
+      board_topmenu: true,
+      help: 'board-service/board-template'
     }
   }
 
@@ -72,24 +62,7 @@ export class BoardTemplateListPage extends connect(store)(localize(i18next)(Scop
       <ox-grist mode="CARD" .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom">
           <div id="filters">
-            <ox-filters-form autofocus></ox-filters-form>
-          </div>
-
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.sortersControl.open({
-                  right: 0,
-                  top: target.offsetTop + target.offsetHeight
-                })
-              }}
-              >expand_more</mwc-icon
-            >
-            <ox-popup id="sorter-control">
-              <ox-sorters-control> </ox-sorters-control>
-            </ox-popup>
+            <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
         </div>
       </ox-grist>
@@ -99,18 +72,18 @@ export class BoardTemplateListPage extends connect(store)(localize(i18next)(Scop
   async pageInitialized(lifecycle: any) {
     this.gristConfig = {
       list: {
+        thumbnail: 'thumbnail',
         fields: ['name', 'description'],
-        details: ['active', 'updatedAt']
+        details: ['visibility', 'creator', 'createdAt']
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
-        { type: 'gutter', gutterName: 'row-selector', multiple: true },
         {
           type: 'string',
           name: 'name',
           header: i18next.t('field.name'),
           record: {
-            editable: true
+            editable: false
           },
           filter: 'search',
           sortable: true,
@@ -121,15 +94,50 @@ export class BoardTemplateListPage extends connect(store)(localize(i18next)(Scop
           name: 'description',
           header: i18next.t('field.description'),
           record: {
-            editable: true
+            editable: false
           },
           filter: 'search',
           width: 200
         },
+        {
+          type: 'boolean',
+          name: 'mine',
+          record: {
+            editable: false
+          },
+          hidden: true,
+          width: 0
+        },
+        {
+          type: 'select-buttons',
+          name: 'visibility',
+          header: i18next.t('field.visibility'),
+          label: true,
+          record: {
+            editable: false
+          },
+          filter: {
+            operator: 'in',
+            options: ['private', 'public', 'domain'],
+            value: this.visibility,
+            label: '' /* empty intentionally */
+          },
+          width: 200
+        },
+        {
+          type: 'image',
+          name: 'thumbnail',
+          header: i18next.t('field.thumbnail'),
+          record: {
+            editable: false
+          },
+          width: 200
+        },
         {
           type: 'resource-object',
-          name: 'updater',
-          header: i18next.t('field.updater'),
+          name: 'creator',
+          header: i18next.t('field.creator'),
+          label: true,
           record: {
             editable: false
           },
@@ -138,8 +146,9 @@ export class BoardTemplateListPage extends connect(store)(localize(i18next)(Scop
         },
         {
           type: 'datetime',
-          name: 'updatedAt',
-          header: i18next.t('field.updated_at'),
+          name: 'createdAt',
+          header: i18next.t('field.created_at'),
+          label: true,
           record: {
             editable: false
           },
@@ -148,9 +157,8 @@ export class BoardTemplateListPage extends connect(store)(localize(i18next)(Scop
         }
       ],
       rows: {
-        selectable: {
-          multiple: true
-        }
+        selectable: false,
+        appendable: false
       },
       sorters: [
         {
@@ -162,7 +170,7 @@ export class BoardTemplateListPage extends connect(store)(localize(i18next)(Scop
 
   async pageUpdated(changes: any, lifecycle: any) {
     if (this.active) {
-      // do something here when this page just became as active
+      this.grist.fetch()
     }
   }
 
@@ -175,14 +183,15 @@ export class BoardTemplateListPage extends connect(store)(localize(i18next)(Scop
               id
               name
               description
-              state
               model
               thumbnail
-              updater {
+              visibility
+              mine
+              creator {
                 id
                 name
               }
-              updatedAt
+              createdAt
             }
             total
           }
@@ -200,62 +209,4 @@ export class BoardTemplateListPage extends connect(store)(localize(i18next)(Scop
       records: response.data.responses.items || []
     }
   }
-
-  async _deleteBoardTemplate() {
-    if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
-      const ids = this.grist.selected.map(record => record.id)
-      if (ids && ids.length > 0) {
-        const [mutateFunction, { error }] = useMutation(`
-mutation ($ids: [String!]!) {
-  deleteBoardTemplates(ids: $ids)
-}`)
-
-        mutateFunction({
-          variables: {
-            ids
-          }
-        })
-
-        if (!error) {
-          this.grist.fetch()
-          notify({
-            message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
-          })
-        }
-      }
-    }
-  }
-
-  async _updateBoardTemplate() {
-    let patches = this.grist.dirtyRecords
-    if (patches && patches.length) {
-      patches = patches.map(patch => {
-        let patchField: any = patch.id ? { id: patch.id } : {}
-        const dirtyFields = patch.__dirtyfields__
-        for (let key in dirtyFields) {
-          patchField[key] = dirtyFields[key].after
-        }
-        patchField.cuFlag = patch.__dirty__
-
-        return patchField
-      })
-
-      const [mutateFunction, { error }] = useMutation(`
-mutation ($patches: [BoardTemplatePatch!]!) {
-  updateMultipleBoardTemplate(patches: $patches) {
-    name
-  }
-}`)
-
-      mutateFunction({
-        variables: {
-          patches
-        }
-      })
-
-      if (!error) {
-        this.grist.fetch()
-      }
-    }
-  }
 }

package/client/pages/font-list-page.ts

@@ -21,8 +21,7 @@ export class FontListPage extends PageView {
 
   get context() {
     return {
-      title: 'font list',
-      board_topmenu: true
+      title: 'font list'
     }
   }
 

package/client/viewparts/board-basic-info.ts

@@ -597,8 +597,6 @@ export class BoardInfo extends connect(store)(LitElement) {
         composed: true
       })
     )
-
-    this.close()
   }
 
   async updateBoard() {
@@ -612,8 +610,6 @@ export class BoardInfo extends connect(store)(LitElement) {
         composed: true
       })
     )
-
-    this.close()
   }
 
   async deleteBoard() {

package/client/viewparts/board-info-link.ts

@@ -1,7 +1,10 @@
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { i18next } from '@operato/i18n'
 
 import './link-builder.js'
+import './board-template-builder.js'
 
 @customElement('board-info-link')
 export class BoardInfoLink extends LitElement {
@@ -9,11 +12,14 @@ export class BoardInfoLink extends LitElement {
     css`
       :host {
         display: flex;
+        flex-direction: column;
         background-color: var(--main-section-background-color);
         position: relative;
         text-align: center;
         color: var(--label-color);
         font: var(--label-font);
+
+        overflow-y: auto;
       }
 
       link-builder {
@@ -21,6 +27,11 @@ export class BoardInfoLink extends LitElement {
         text-align: start;
       }
 
+      board-template-builder {
+        flex: 1;
+        text-align: start;
+      }
+
       @media screen and (max-width: 460px) {
         :host {
           width: 100vw;
@@ -29,7 +40,7 @@ export class BoardInfoLink extends LitElement {
     `
   ]
 
-  @property({ type: Object }) board?: { id: string; name: string }
+  @property({ type: Object }) board?: { id: string; name: string; description: string }
 
   render() {
     return html`
@@ -38,6 +49,8 @@ export class BoardInfoLink extends LitElement {
         target-id=${this.board?.id || ''}
         target-name=${this.board?.name || ''}
       ></link-builder>
+
+      <board-template-builder .board=${this.board}> </board-template-builder>
     `
   }
 }

package/client/viewparts/board-template-builder.ts

@@ -0,0 +1,133 @@
+import '@material/mwc-icon'
+import '@operato/i18n/ox-i18n.js'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { ScrollbarStyles } from '@operato/styles'
+import { i18next } from '@operato/i18n'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+
+@customElement('board-template-builder')
+export class BoardTemplateBuilder extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        padding: var(--padding-wide);
+
+        /* for narrow mode */
+        flex-direction: column;
+      }
+
+      div[template] {
+        display: grid;
+        position: relative;
+      }
+
+      label {
+        font: var(--label-font);
+        color: var(--label-color);
+        text-transform: capitalize;
+      }
+
+      input,
+      select,
+      textarea {
+        border: var(--border-dark-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        font: var(--input-font);
+        flex: 1 1 0%;
+      }
+
+      textarea {
+        min-height: 132px;
+        resize: none;
+      }
+
+      select:focus,
+      input:focus,
+      textarea:focus,
+      button {
+        outline: none;
+      }
+
+      button:hover {
+        border: var(--button-activ-border);
+        box-shadow: var(--button-active-box-shadow);
+      }
+    `
+  ]
+
+  @property({ type: Object }) board?: { id: string; name: string; description: string }
+
+  @state() visibility?: string = 'private'
+  @state() name?: string = ''
+  @state() description?: string = ''
+
+  render() {
+    const name = this.name || this.board?.name || ''
+    const description = this.description || this.board?.description || ''
+
+    return html`
+      <div template>
+        <h3>
+          <ox-title-with-help topic="board-service/board-template" msgid="label.board-template"
+            >board template</ox-title-with-help
+          >
+        </h3>
+        <label for="name">${i18next.t('field.name')}</label>
+        <input id="name" type="text" .value=${name} @change=${e => (this.name = e.target.value)} />
+
+        <label for="description">${i18next.t('field.description')}</label>
+        <textarea
+          id="description"
+          .value=${this.description}
+          @change=${e => (this.description = e.target.value)}
+        ></textarea>
+
+        <label>${i18next.t('field.visibility')}</label>
+        <select
+          @change=${e => (this.visibility = e.target.value)}
+          placeholder="choose visibility ..."
+          .value=${this.visibility}
+        >
+          <option value="private">private</option>
+          <option value="domain">domain</option>
+          <option value="public">public</option>
+        </select>
+
+        <button @click=${this.registerBoardAsTemplate}>${i18next.t('text.register-template')}</button>
+      </div>
+    `
+  }
+
+  async registerBoardAsTemplate() {
+    if (
+      await OxPrompt.open({
+        title: i18next.t('text.are_you_sure'),
+        text: i18next.t('text.sure_to_x', { x: i18next.t('text.register-template') }),
+        confirmButton: { text: i18next.t('button.confirm') },
+        cancelButton: { text: i18next.t('button.cancel') }
+      })
+    ) {
+      const { id } = this.board || {}
+
+      this.dispatchEvent(
+        new CustomEvent('register-template', {
+          detail: {
+            id,
+            name: this.name || this.board?.name,
+            description: this.description || this.board?.description,
+            visibility: this.visibility
+          },
+          bubbles: true,
+          composed: true
+        })
+      )
+    }
+  }
+}

package/client/viewparts/link-builder.ts

@@ -68,7 +68,7 @@ export class LinkBuilder extends LitElement {
 
       [button-in-field] {
         position: absolute;
-        top: 28px;
+        top: 64px;
         right: 6px;
 
         background-color: white;
@@ -98,11 +98,11 @@ export class LinkBuilder extends LitElement {
   render() {
     return html`
       <div link>
-        <label for="link">
+        <h3>
           <ox-title-with-help topic="operato-board/headless-link" msgid="label.headless-link"
             >headless-link</ox-title-with-help
           >
-        </label>
+        </h3>
         <textarea id="link" .value=${this.link || ''} readonly></textarea>
         <mwc-icon button-in-field clipboard-copy>content_copy</mwc-icon>
         <label for="key">${i18next.t('label.headless-link query-key')}</label>

package/dist-client/graphql/board-template.d.ts

@@ -0,0 +1,5 @@
+export declare function fetchBoardTemplateList(listParam?: {}): Promise<any>;
+export declare function fetchBoardTemplate(id: any): Promise<any>;
+export declare function createBoardTemplate(boardTemplate: any): Promise<any>;
+export declare function updateBoardTemplate(boardTemplate: any): Promise<any>;
+export declare function deleteBoardTemplate(id: any): Promise<any>;