@operato/board 1.5.16 → 1.5.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.5.16",
+  "version": "1.5.18",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -22,6 +22,7 @@
     "./ox-scene-property.js": "./dist/src/modeller/scene-viewer/ox-scene-property.js",
     "./ox-scene-viewer.js": "./dist/src/modeller/scene-viewer/ox-scene-viewer.js",
     "./ox-board-list.js": "./dist/src/ox-board-list.js",
+    "./ox-board-template-list.js": "./dist/src/ox-board-template-list.js",
     "./ox-board-viewer.js": "./dist/src/ox-board-viewer.js",
     "./ox-board-player.js": "./dist/src/ox-board-player.js",
     "./ox-board-modeller.js": "./dist/src/ox-board-modeller.js",
@@ -48,6 +49,9 @@
       "ox-board-list.js": [
         "./dist/src/ox-board-list.d.ts"
       ],
+      "ox-board-template-list.js": [
+        "./dist/src/ox-board-template-list.d.ts"
+      ],
       "ox-board-viewer.js": [
         "./dist/src/ox-board-viewer.d.ts"
       ],
@@ -88,16 +92,16 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.0.0-next.6",
-    "@operato/app": "^1.5.16",
-    "@operato/data-grist": "^1.5.16",
-    "@operato/font": "^1.5.16",
+    "@operato/app": "^1.5.18",
+    "@operato/data-grist": "^1.5.17",
+    "@operato/font": "^1.5.18",
     "@operato/graphql": "^1.4.76",
     "@operato/i18n": "^1.5.14",
     "@operato/input": "^1.5.14",
     "@operato/layout": "^1.5.15",
     "@operato/markdown": "^1.4.64",
     "@operato/popup": "^1.5.13",
-    "@operato/property-editor": "^1.5.16",
+    "@operato/property-editor": "^1.5.17",
     "@operato/styles": "^1.4.64",
     "@operato/utils": "^1.4.64",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -148,5 +152,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5aff1de80ed25649dda3e77ff87d7b039d094f4c"
+  "gitHead": "a36791f6b8384021a731a3e3933f7e38a96ecb23"
 }

package/src/ox-board-template-list.ts

@@ -0,0 +1,265 @@
+import '@operato/data-grist'
+import '@operato/input/ox-input-file.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import {
+  ColumnConfig,
+  DataGrist,
+  FetchOption,
+  FilterValue,
+  GristData,
+  GristRecord,
+  PaginationConfig,
+  SortersConfig
+} from '@operato/data-grist'
+import { buildArgs, client } from '@operato/graphql'
+import { ScrollbarStyles, TooltipStyles } from '@operato/styles'
+
+const FETCH_BOARD_TEMPLATE_LIST_GQL = (listParam: any) => {
+  return gql`
+  {
+    boardTemplates(${buildArgs(listParam)}) {
+      items {
+        id
+        name
+        description
+        visibility
+        thumbnail
+      }
+      total
+    }
+  }
+`
+}
+
+const FETCH_BOARD_TEMPLATE_GQL = (id: string) => {
+  return gql`
+  {
+    boardTemplate(id: "${id}") {
+      id
+      name
+      description
+      visibility
+      model
+      thumbnail
+    }
+  }
+`
+}
+
+@customElement('ox-board-template-list')
+export class OxBoardTemplateList 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 {
+        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 {
+        display: flex;
+        flex-direction: row;
+        place-content: space-between;
+        margin: var(--margin-default) 0;
+      }
+
+      select {
+        border: 0;
+        outline: none;
+        text-align: right;
+      }
+
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false
+
+  @query('ox-grist') grist!: DataGrist
+
+  render() {
+    return html`
+      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" id="headroom">
+          <div id="filters">
+            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>
+          </div>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
+    const { items: records, total } = await this.getBoardTemplates({ page, limit, filters, sortings })
+
+    return {
+      total,
+      records
+    }
+  }
+
+  get gristConfig() {
+    return {
+      list: {
+        thumbnail: 'thumbnail',
+        fields: ['name'],
+        details: ['description']
+      },
+      columns: [
+        {
+          type: 'string',
+          name: 'id',
+          hidden: true
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: 'name',
+          record: {
+            editable: true,
+            align: 'left'
+          },
+          width: 200,
+          filter: 'search',
+          sortable: true
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: 'description',
+          record: {
+            editable: true,
+            align: 'left'
+          },
+          width: 200,
+          filter: 'search'
+        },
+        {
+          type: 'select-buttons',
+          name: 'visibility',
+          header: 'visibility',
+          record: {
+            editable: false
+          },
+          hidden: true,
+          filter: {
+            operator: 'in',
+            options: ['private', 'domain', 'public'],
+            label: ''
+          }
+        },
+        {
+          type: 'image',
+          name: 'thumbnail',
+          hidden: true,
+          record: {
+            editable: false
+          }
+        }
+      ],
+      rows: {
+        appendable: false,
+        selectable: {
+          multiple: false
+        },
+        handlers: {
+          click: 'select-row-toggle'
+        }
+      },
+      sorters: [
+        {
+          name: 'name',
+          desc: false
+        }
+      ],
+      pagination: {
+        pages: [20, 30, 50, 100, 200]
+      }
+    }
+  }
+
+  async firstUpdated() {
+    this.refreshBoardTemplates()
+  }
+
+  async getSelected() {
+    const selected = this.grist.selected
+    const templateId = selected && selected[0]?.id
+
+    if (!templateId) {
+      return
+    }
+
+    var boardTemplateResponse = await client.query({
+      query: FETCH_BOARD_TEMPLATE_GQL(templateId)
+    })
+
+    var template = boardTemplateResponse.data?.boardTemplate
+
+    if (template) {
+      template = {
+        ...template,
+        model: JSON.parse(template.model)
+      }
+    }
+
+    return template
+  }
+
+  async refreshBoardTemplates() {
+    this.grist.fetch()
+  }
+
+  async getBoardTemplates({
+    page = 1,
+    limit = 30,
+    filters = [],
+    sortings = []
+  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {
+    var pagination: PaginationConfig = {
+      limit,
+      page
+    }
+
+    var params = {
+      filters,
+      sortings,
+      pagination
+    }
+
+    var boardTemplateListResponse = await client.query({
+      query: FETCH_BOARD_TEMPLATE_LIST_GQL(params)
+    })
+
+    return boardTemplateListResponse?.data?.boardTemplates || {}
+  }
+}

package/src/selector/board-creation-popup.ts

@@ -3,11 +3,13 @@ import '@material/mwc-textarea'
 import '@material/mwc-select'
 import '@material/mwc-list/mwc-list-item'
 import '@material/mwc-button'
+import '../ox-board-template-list'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
+import { OxBoardTemplateList } from '../ox-board-template-list'
 
 @customElement('board-creation-popup')
 export class BoardCreationPopup extends localize(i18next)(LitElement) {
@@ -17,24 +19,46 @@ export class BoardCreationPopup extends localize(i18next)(LitElement) {
         :host {
           display: flex;
           flex-direction: column;
-
+          gap: 10px;
           padding: 10px;
+
           background-color: white;
         }
 
-        :host > * {
-          margin: 10px;
+        [body] {
+          flex: 1;
+
+          display: flex;
+          flex-direction: row;
+          gap: 10px;
+
+          overflow: hidden;
         }
 
         [content] {
           flex: 1;
+
           display: flex;
           flex-direction: column;
+          gap: 10px;
+
           overflow: auto;
         }
 
-        [content] > * {
-          margin: 10px 0;
+        [content] > mwc-textarea {
+          flex: 1;
+        }
+
+        [templates] {
+          flex: 2;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        [templates] > ox-board-template-list {
+          flex: 1;
+          overflow: hidden;
         }
       `
     ]
@@ -43,28 +67,39 @@ export class BoardCreationPopup extends localize(i18next)(LitElement) {
   @property({ type: String }) defaultGroup?: string
   @property({ type: Array }) groups?: { id: string; name: string }[]
 
+  @query('ox-board-template-list') boardTemplateList!: OxBoardTemplateList
+
   render() {
     var groups = this.groups || []
 
     return html`
-      <div content>
-        <mwc-textfield label=${String(i18next.t('label.name'))} name="name" required field-name></mwc-textfield>
-        <mwc-textarea
-          label=${String(i18next.t('label.description'))}
-          name="description"
-          field-description
-        ></mwc-textarea>
-        <mwc-select
-          label=${String(i18next.t('label.group'))}
-          field-group
-          helper="If there is no group to choose, you can leave it empty."
-        >
-          ${groups.map(
-            group => html`
-              <mwc-list-item value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</mwc-list-item>
-            `
-          )}
-        </mwc-select>
+      <div body>
+        <div content>
+          <mwc-textfield label=${String(i18next.t('label.name'))} name="name" required field-name></mwc-textfield>
+          <mwc-textarea
+            label=${String(i18next.t('label.description'))}
+            name="description"
+            field-description
+          ></mwc-textarea>
+          <mwc-select
+            label=${String(i18next.t('label.group'))}
+            field-group
+            helper="If there is no group to choose, you can leave it empty."
+          >
+            ${groups.map(
+              group => html`
+                <mwc-list-item value=${group.id} ?selected=${this.defaultGroup == group.id}
+                  >${group.name}</mwc-list-item
+                >
+              `
+            )}
+          </mwc-select>
+        </div>
+
+        <div templates>
+          <div>${i18next.t('label.board-template')}</div>
+          <ox-board-template-list></ox-board-template-list>
+        </div>
       </div>
 
       <mwc-button
@@ -81,7 +116,7 @@ export class BoardCreationPopup extends localize(i18next)(LitElement) {
     }, 100)
   }
 
-  onClickSubmit() {
+  async onClickSubmit() {
     var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {
       return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value
     })
@@ -90,12 +125,16 @@ export class BoardCreationPopup extends localize(i18next)(LitElement) {
       return
     }
 
+    const template = await this.boardTemplateList.getSelected()
+
     this.dispatchEvent(
       new CustomEvent('create-board', {
         detail: {
           name,
           description,
-          groupId
+          groupId,
+          model: template?.model,
+          thumbnail: template?.thumbnail
         }
       })
     )

package/src/selector/ox-board-creation-card.ts

@@ -64,14 +64,16 @@ export class BoardCreationCard extends localize(i18next)(LitElement) {
         .defaultGroup=${this.defaultGroup}
         .groups=${this.groups}
         @create-board=${async (e: CustomEvent) => {
-          var { name, description, groupId } = e.detail
+          var { name, description, groupId, model, thumbnail } = e.detail
 
           this.dispatchEvent(
             new CustomEvent('create-board', {
               detail: {
                 name,
                 description,
-                groupId
+                groupId,
+                model,
+                thumbnail
               }
             })
           )