@operato/board 8.0.0-alpha.5 → 8.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "8.0.0-alpha.5",
+  "version": "8.0.0-alpha.7",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -95,16 +95,16 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^8.0.0-alpha.5",
-    "@operato/data-grist": "^8.0.0-alpha.5",
-    "@operato/font": "^8.0.0-alpha.5",
+    "@operato/app": "^8.0.0-alpha.6",
+    "@operato/data-grist": "^8.0.0-alpha.6",
+    "@operato/font": "^8.0.0-alpha.6",
     "@operato/graphql": "^8.0.0-alpha.0",
     "@operato/i18n": "^8.0.0-alpha.0",
     "@operato/input": "^8.0.0-alpha.4",
     "@operato/layout": "^8.0.0-alpha.4",
     "@operato/markdown": "^8.0.0-alpha.4",
     "@operato/popup": "^8.0.0-alpha.4",
-    "@operato/property-editor": "^8.0.0-alpha.5",
+    "@operato/property-editor": "^8.0.0-alpha.6",
     "@operato/styles": "^8.0.0-alpha.4",
     "@operato/utils": "^8.0.0-alpha.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -155,5 +155,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "3c792906872d3f5d7740b045c06115423595accf"
+  "gitHead": "69bcec82b28333b750e85dd55d38f5ef113a07a8"
 }

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

@@ -1,3 +1,4 @@
+import '@operato/input/ox-input-search.js'
 import './ox-board-creation-card'
 
 import gql from 'graphql-tag'
@@ -9,6 +10,7 @@ import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 import InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'
 import { InheritedValueType } from '@operato/shell'
+import { adjustFilters } from '@operato/utils'
 
 const FETCH_BOARD_LIST_GQL = gql`
   query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $inherited: InheritedValueType) {
@@ -97,7 +99,7 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
         .card > .name {
           color: var(--md-sys-color-on-secondary);
           background-color: var(--md-sys-color-secondary);
-          opacity: 0.8;
+          opacity: 0.9;
           margin-top: -35px;
           width: 100%;
           font-weight: bolder;
@@ -106,12 +108,11 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
         }
 
         .card > .description {
-          color: var(--md-sys-color-on-surface);
-          background-color: var(--md-sys-color-surface);
+          color: var(--md-sys-color-on-secondary);
+          background-color: var(--md-sys-color-secondary);
           width: 100%;
-          min-height: 15px;
+          min-height: 16px;
           font-size: 0.6rem;
-          color: #fff;
           text-indent: 7px;
         }
         .card img {
@@ -120,12 +121,22 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
         }
 
         #filter {
+          display: flex;
+          align-items: center;
           padding: var(--popup-content-padding);
           color: var(--md-sys-color-on-surface-variant);
           background-color: var(--md-sys-color-surface-variant);
           box-shadow: var(--box-shadow);
         }
 
+        #filter > ox-input-search {
+          margin-right: auto;
+          border: var(--md-sys-color-primary) 1px solid;
+          padding: var(--spacing-small) var(--spacing-small);
+          border-radius: 999px;
+          color: var(--md-sys-color-primary);
+        }
+
         #filter > div {
           float: right;
           margin-left: 10px;
@@ -145,6 +156,7 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
   @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []
   @property({ type: Array }) boards: any[] = []
   @property({ type: String }) group?: string
+  @property({ type: String }) search?: string
   @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include
   @property({ type: Boolean }) creatable: boolean = false
   @property({ type: String }) value?: string
@@ -161,6 +173,11 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
   render() {
     return html`
       <div id="filter">
+        <ox-input-search
+          @change=${(e: Event) => {
+            this.search = (e.currentTarget as any)?.value
+          }}
+        ></ox-input-search>
         <div>
           <label for="group">Group</label>
           <select
@@ -233,7 +250,7 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
   }
 
   async updated(changed: PropertyValues<this>) {
-    if (changed.has('group') || changed.has('inherited')) {
+    if (changed.has('group') || changed.has('inherited') || changed.has('search')) {
       this.refreshBoards()
     }
   }
@@ -294,12 +311,29 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
       page
     }
 
-    if (this.group)
+    if (this.group) {
       filters.push({
         name: 'groupId',
         operator: 'eq',
         value: this.group
       })
+    }
+
+    if (this.search) {
+      const value = `%${this.search.trim()}%`
+
+      filters.push({
+        name: 'name',
+        operator: 'search',
+        value: this.search
+      })
+
+      filters.push({
+        name: 'description',
+        operator: 'search',
+        value: this.search
+      })
+    }
 
     var variables = {
       filters,
@@ -310,7 +344,6 @@ export class BoardSelector extends InfiniteScrollable(localize(i18next)(LitEleme
 
     var boardListResponse = await client.query({
       query: FETCH_BOARD_LIST_GQL,
-      context: gqlContext(),
       variables
     })