@things-factory/auth-ui 4.0.42 → 4.1.1

package/client/pages/domain/domain-management.js

@@ -1,4 +1,6 @@
-import '@operato/data-grist'
+import '@operato/data-grist/ox-grist.js'
+import '@operato/data-grist/ox-filters-form.js'
+import '@operato/data-grist/ox-sorters-control.js'
 import '../../components/create-domain-popup'
 
 import gql from 'graphql-tag'
@@ -7,7 +9,7 @@ import { connect } from 'pwa-helpers/connect-mixin'
 
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
-import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 import { client, PageView, store } from '@things-factory/shell'
 
@@ -15,12 +17,14 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
   static get properties() {
     return {
       active: String,
-      config: Object
+      config: Object,
+      mode: String
     }
   }
 
   static get styles() {
     return [
+      CommonGristStyles,
       ScrollbarStyles,
       css`
         :host {
@@ -29,25 +33,16 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
 
           overflow: hidden;
         }
-
-        ox-grist {
-          overflow-y: auto;
-          flex: 1;
-        }
-
-        #filters {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-        }
-
-        #filters > * {
-          padding: var(--padding-default) var(--padding-wide);
-        }
       `
     ]
   }
 
+  constructor() {
+    super()
+
+    this.mode = isMobileDevice() ? 'LIST' : 'GRID'
+  }
+
   get context() {
     return {
       title: i18next.t('text.domain management'),
@@ -56,11 +51,6 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
           title: i18next.t('button.save'),
           action: this.onUpdateDomains.bind(this),
           ...CommonButtonStyles.save
-        },
-        {
-          title: i18next.t('button.add'),
-          action: this.onCreateDomain.bind(this),
-          ...CommonButtonStyles.add
         }
       ]
     }
@@ -68,22 +58,45 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .fetchHandler="${this.fetchHandler.bind(this)}"
-      >
-        <div id="filters" slot="headroom">
-          <ox-filters-form @change=${e => this.dataGrist.fetch()}></ox-filters-form>
+      <ox-grist .mode=${this.mode} .config=${this.config} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.renderRoot.querySelector('#sorter-control').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>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${this.mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${this.mode == 'LIST'}
+              >format_list_bulleted</mwc-icon
+            >
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${this.mode == 'CARD'}>apps</mwc-icon>
+          </div>
+
+          <div id="add">
+            <button><mwc-icon @click=${this.onCreateDomain.bind(this)}>add</mwc-icon></button>
+          </div>
         </div>
       </ox-grist>
     `
   }
 
-  get searchForm() {
-    return this.renderRoot.querySelector('ox-filters-form')
-  }
-
   get dataGrist() {
     return this.renderRoot.querySelector('ox-grist')
   }
@@ -116,6 +129,7 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
             editable: false
           },
           filter: 'search',
+          sortable: true,
           width: 200
         },
         {
@@ -170,9 +184,7 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
     }
   }
 
-  async fetchHandler({ page, limit, sorters = [] }) {
-    const filters = (await this.searchForm.getQueryFilters()) || []
-
+  async fetchHandler({ page, limit, sortings = [], filters = [] }) {
     const response = await client.query({
       query: gql`
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -192,7 +204,7 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
       variables: {
         filters,
         pagination: { page, limit },
-        sortings: sorters
+        sortings
       }
     })
 
@@ -228,6 +240,7 @@ export class DomainManagement extends connect(store)(localize(i18next)(PageView)
       })
 
       if (!response.errors) {
+        this.dataGrist.fetch()
         return this.showToast(i18next.t('text.updated_successfully'))
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/auth-ui",
-  "version": "4.0.42",
+  "version": "4.1.1",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -30,14 +30,14 @@
     "@material/mwc-icon-button": "^0.25.3",
     "@material/mwc-textarea": "^0.25.3",
     "@material/mwc-textfield": "^0.25.3",
-    "@operato/data-grist": "^0.3.24",
-    "@operato/i18n": "^0.3.24",
-    "@operato/layout": "^0.3.24",
-    "@operato/lottie-player": "^0.3.24",
-    "@things-factory/auth-base": "^4.0.42",
-    "@things-factory/i18n-base": "^4.0.42",
-    "@things-factory/more-base": "^4.0.42",
+    "@operato/data-grist": "^0.3.28",
+    "@operato/i18n": "^0.3.28",
+    "@operato/layout": "^0.3.28",
+    "@operato/lottie-player": "^0.3.28",
+    "@things-factory/auth-base": "^4.1.1",
+    "@things-factory/i18n-base": "^4.1.1",
+    "@things-factory/more-base": "^4.1.1",
     "clipboard": "^2.0.6"
   },
-  "gitHead": "794709ebadf4ae0f89a107a86a41a381ce26b465"
+  "gitHead": "09378a57e788038c086c6c40e6135cf14082b185"
 }