@things-factory/auth-ui 4.0.41 → 4.0.45

package/client/bootstrap.js

@@ -3,8 +3,8 @@ import '@operato/i18n'
 
 import { html } from 'lit-html'
 
+import { TOOL_POSITION } from '@operato/layout'
 import { auth } from '@things-factory/auth-base'
-import { TOOL_POSITION } from '@things-factory/layout-base'
 import { ADD_MORENDA } from '@things-factory/more-base'
 import { navigate, store } from '@things-factory/shell'
 

package/client/components/abstract-auth-page.js

@@ -4,7 +4,7 @@ import '@material/mwc-icon-button'
 import '@material/mwc-textfield'
 import '@operato/lottie-player'
 import '@operato/i18n/ox-i18n-selector.js'
-import '@things-factory/layout-ui/client/layouts/snack-bar'
+import '@operato/layout/ox-snack-bar.js'
 
 import { css, html, LitElement } from 'lit'
 
@@ -115,7 +115,7 @@ export class AbstractAuthPage extends localize(i18next)(LitElement) {
         </div>
 
         <mwc-icon-button home icon="home" @click=${e => (window.location.href = '/')}></mwc-icon-button>
-        <snack-bar id="snackbar" level="error" .message=${this.message}></snack-bar>
+        <ox-snack-bar id="snackbar" level="error" .message=${this.message}></ox-snack-bar>
 
         ${isSafari()
           ? html``

package/client/components/abstract-password-reset.js

@@ -3,6 +3,7 @@ import '@material/mwc-textfield'
 import '@operato/lottie-player'
 import '../components/profile-component'
 import '@operato/i18n/ox-i18n-selector.js'
+import '@operato/layout/ox-snack-bar.js'
 
 import { css, html } from 'lit'
 
@@ -124,7 +125,7 @@ export class AbstractPasswordReset extends AbstractAuthPage {
           </form>
         </div>
       </div>
-      <snack-bar id="snackbar" level="error" .message=${this.message}></snack-bar>
+      <ox-snack-bar id="snackbar" level="error" .message=${this.message}></ox-snack-bar>
 
       ${isSafari()
         ? html``

package/client/components/delete-user-popup.js

@@ -1,8 +1,8 @@
 import { css, html, LitElement } from 'lit'
 
 import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
 import { auth } from '@things-factory/auth-base'
-import { notify } from '@things-factory/layout-base'
 
 export class DeleteUserPopup extends localize(i18next)(LitElement) {
   static get styles() {

package/client/components/profile-component.js

@@ -6,8 +6,8 @@ import './my-login-history'
 import { css, html, LitElement } from 'lit'
 
 import { i18next, localize } from '@operato/i18n'
+import { notify, openPopup } from '@operato/layout'
 import { auth } from '@things-factory/auth-base'
-import { notify, openPopup } from '@things-factory/layout-base'
 
 export class ProfileComponent extends localize(i18next)(LitElement) {
   static get properties() {

package/client/components/user-role-editor.js

@@ -6,7 +6,7 @@ import { css, html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { i18next } from '@operato/i18n'
-import { openPopup } from '@things-factory/layout-base'
+import { openPopup } from '@operato/layout'
 import { client, CustomAlert, gqlContext, store } from '@things-factory/shell'
 
 class UserRoleEditor extends connect(store)(LitElement) {

package/client/entries/auth/activate.js

@@ -1,5 +1,5 @@
 import '@material/mwc-button'
-import '@things-factory/layout-ui/client/layouts/snack-bar'
+import '@operato/layout/ox-snack-bar.js'
 import '@operato/lottie-player'
 
 import { css, html, LitElement } from 'lit'
@@ -161,7 +161,7 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         </div>
         <!--lottie animation end-->
       </div>
-      <snack-bar id="snackbar"></snack-bar>
+      <ox-snack-bar id="snackbar"></ox-snack-bar>
     `
   }
 

package/client/entries/auth/forgot-password.js

@@ -1,5 +1,4 @@
 import '@material/mwc-button'
-import '@things-factory/layout-ui/client/layouts/snack-bar'
 import '../../components/profile-component'
 
 import { html } from 'lit'

package/client/pages/application/register.js

@@ -1,8 +1,8 @@
-import { LitElement, css, html } from 'lit'
-import { PageView, client, navigate, store } from '@things-factory/shell'
-
-import { connect } from 'pwa-helpers/connect-mixin.js'
 import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { client, navigate, PageView, store } from '@things-factory/shell'
 
 class ApplicationRegister extends connect(store)(PageView) {
   static get styles() {
@@ -185,7 +185,7 @@ class ApplicationRegister extends connect(store)(PageView) {
 
     const response = await client.mutate({
       mutation: gql`
-        mutation($application: NewApplication!) {
+        mutation ($application: NewApplication!) {
           createApplication(application: $application) {
             id
           }

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'
@@ -6,21 +8,23 @@ import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { i18next, localize } from '@operato/i18n'
-import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { openPopup } from '@operato/layout'
+import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
-import { openPopup } from '@things-factory/layout-base'
 import { client, PageView, store } from '@things-factory/shell'
 
 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.41",
+  "version": "4.0.45",
   "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.21",
-    "@operato/i18n": "^0.3.21",
-    "@operato/lottie-player": "^0.3.21",
-    "@things-factory/auth-base": "^4.0.41",
-    "@things-factory/i18n-base": "^4.0.41",
-    "@things-factory/layout-ui": "^4.0.41",
-    "@things-factory/more-base": "^4.0.41",
+    "@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.0.45",
+    "@things-factory/i18n-base": "^4.0.45",
+    "@things-factory/more-base": "^4.0.45",
     "clipboard": "^2.0.6"
   },
-  "gitHead": "1dd445b5b5e5b9e37291dc274886131199d7bf6a"
+  "gitHead": "6c37578551d77fed098e5eed4cd2cc9eb9c0dd4b"
 }