@things-factory/contact 7.0.55 → 7.0.56

package/client/components/contact-popup.ts

@@ -2,21 +2,21 @@ import '@material/web/icon/icon.js'
 import '@operato/contact/ox-contact-view.js'
 import '@operato/contact/ox-contact-edit.js'
 
-import { html, css, LitElement } from 'lit'
+import { html, css, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import gql from 'graphql-tag'
 
 import { client } from '@operato/graphql'
 import { Contact } from '@operato/contact/ox-contact.js'
 import { i18next } from '@operato/i18n'
-import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 import { OxContactEdit } from '@operato/contact/ox-contact-edit.js'
 
 @customElement('contact-popup')
 export class ContactPopup extends LitElement {
   static styles = [
     ScrollbarStyles,
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -33,9 +33,12 @@ export class ContactPopup extends LitElement {
     `
   ]
 
-  @property({ type: Object }) contact: Contact = {}
+  @property({ type: String }) contactId?: string
   @property({ type: Boolean, attribute: 'edit-mode' }) editMode?: boolean = false
   @property({ type: Boolean }) detachable?: boolean = false
+  @property({ type: Object }) closeCallback?: (contact?: Contact | null) => void
+
+  @state() contact: Contact = {}
 
   @query('ox-contact-edit') editor!: OxContactEdit
 
@@ -54,7 +57,7 @@ export class ContactPopup extends LitElement {
           : html` <ox-contact-view .contact=${this.contact}></ox-contact-view>`}
       </div>
 
-      <div class="button-container">
+      <div class="footer">
         ${!this.editMode
           ? html`
               ${this.detachable
@@ -71,22 +74,71 @@ export class ContactPopup extends LitElement {
                     </button>
                   `
                 : html``}
+              <div filler></div>
               <button @click=${() => (this.editMode = true)}><md-icon>edit</md-icon>${i18next.t('button.edit')}</button>
-              <button @click=${() => history.back()}><md-icon>close</md-icon>${i18next.t('button.close')}</button>
+              <button @click=${this.onClose} ok><md-icon>close</md-icon>${i18next.t('button.close')}</button>
             `
           : html`
-              <button @click=${() => this.editor.save()}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
-              <button @click=${() => this.editor.cancel()}>
-                <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
-              </button>
               <button @click=${() => this.editor.reset()}>
                 <md-icon>restart_alt</md-icon>${i18next.t('button.reset')}
               </button>
+              <div filler></div>
+              <button @click=${() => this.editor.cancel()}>
+                <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+              </button>
+              <button @click=${() => this.editor.save()} ok><md-icon>save</md-icon>${i18next.t('button.save')}</button>
             `}
       </div>
     `
   }
 
+  onClose() {
+    this.closeCallback && this.closeCallback(this.contact?.id ? this.contact : null)
+
+    history.back()
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('contactId') && this.contactId) {
+      this.fetchContact()
+    }
+  }
+
+  async fetchContact() {
+    const response = await client.query({
+      query: gql`
+        query ($id: String!) {
+          contact(id: $id) {
+            id
+            name
+            company
+            department
+            email
+            phone
+            address
+            note
+            items {
+              type
+              label
+              value
+            }
+            profile {
+              left
+              top
+              zoom
+              picture
+            }
+          }
+        }
+      `,
+      variables: {
+        id: this.contactId
+      }
+    })
+
+    this.contact = response.data.contact
+  }
+
   async updateContact(contact: Contact) {
     if (contact.id) {
       var { id, ...patch } = contact

package/client/components/contact-selector.ts

@@ -1,23 +1,25 @@
 import '@material/web/icon/icon.js'
 import '@operato/data-grist'
+import './contact-popup'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import { DataGrist, FetchHandler, GristData, GristEventHandler, GristRecord, ZERO_DATA } from '@operato/data-grist'
-import { client, gqlContext } from '@operato/graphql'
+import { DataGrist, FetchHandler, GristData, GristRecord, ZERO_DATA } from '@operato/data-grist'
+import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
+import { openPopup } from '@operato/layout'
 import { isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
 
 @customElement('contact-selector')
 export class ContactSelector extends LitElement {
   static styles = [
     ScrollbarStyles,
-    ButtonContainerStyles,
     CommonGristStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -33,14 +35,8 @@ export class ContactSelector extends LitElement {
         flex: 1;
       }
 
-      #filters {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
-      #filters > * {
-        padding: var(--spacing-medium) var(--spacing-large);
+      .header {
+        grid-template-areas: 'filters actions';
       }
     `
   ]
@@ -64,18 +60,28 @@ export class ContactSelector extends LitElement {
         .fetchHandler=${this.fetchHandler.bind(this)}
         .selectedRecords=${this.selectedRecords}
       >
-        <div id="filters" slot="headroom">
-          <ox-filters-form autofocus></ox-filters-form>
+        <div class="header" slot="headroom">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+
+          <div class="actions">
+            <button @click=${this.onCreate.bind(this)} class="iconbtn">
+              <md-icon>add</md-icon>${i18next.t('button.add')}
+            </button>
+          </div>
         </div>
       </ox-grist>
 
-      <div class="button-container" style="margin-left:unset;">
+      <div class="footer">
         <button @click=${this.onEmpty.bind(this)}>
           <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
         </button>
+
         <div filler></div>
+
         <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
-        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
+        <button @click=${this.onConfirm.bind(this)} ok><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }
@@ -94,6 +100,34 @@ export class ContactSelector extends LitElement {
     closePopup(this)
   }
 
+  onCreate() {
+    var createdContact
+    const popup = openPopup(
+      html`
+        <contact-popup
+          edit-mode
+          .closeCallback=${contact => {
+            createdContact = contact
+          }}
+        ></contact-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.contact')
+      }
+    )
+
+    popup.onclosed = () => {
+      if (createdContact) {
+        this.confirmCallback && this.confirmCallback(createdContact)
+        closePopup(this)
+      } else {
+        this.grist.fetch()
+      }
+    }
+  }
+
   fetchHandler: FetchHandler = async ({ page = 1, limit = 100, sortings = [], filters = [] }) => {
     const response = await client.query({
       query: gql`
@@ -128,8 +162,7 @@ export class ContactSelector extends LitElement {
         filters,
         pagination: { page, limit },
         sortings
-      },
-      context: gqlContext()
+      }
     })
 
     if (!response.errors) {

package/client/pages/contact-importer.ts

@@ -8,11 +8,11 @@ import { property } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
+import { CommonHeaderStyles } from '@operato/styles'
 
 export class ContactImporter extends LitElement {
   static styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -63,8 +63,9 @@ export class ContactImporter extends LitElement {
         }}
       ></ox-grist>
 
-      <div class="button-container">
-        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

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

@@ -414,40 +414,7 @@ export class ContactListPage extends connect(store)(localize(i18next)(ScopedElem
   }
 
   async openContactPopup(record: any) {
-    const response = await client.query({
-      query: gql`
-        query ($id: String!) {
-          contact(id: $id) {
-            id
-            name
-            company
-            email
-            phone
-            address
-            department
-            note
-            items {
-              type
-              label
-              value
-            }
-            profile {
-              left
-              top
-              zoom
-              picture
-            }
-          }
-        }
-      `,
-      variables: {
-        id: record.id
-      }
-    })
-
-    const { contact } = response.data
-
-    const popup = openPopup(html` <contact-popup .contact=${contact}></contact-popup> `, {
+    const popup = openPopup(html` <contact-popup .contactId=${record.id}></contact-popup> `, {
       backdrop: true,
       size: 'large',
       title: i18next.t('title.contact')

package/dist-client/components/contact-popup.d.ts

@@ -1,15 +1,20 @@
 import '@material/web/icon/icon.js';
 import '@operato/contact/ox-contact-view.js';
 import '@operato/contact/ox-contact-edit.js';
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import { Contact } from '@operato/contact/ox-contact.js';
 import { OxContactEdit } from '@operato/contact/ox-contact-edit.js';
 export declare class ContactPopup extends LitElement {
     static styles: import("lit").CSSResult[];
-    contact: Contact;
+    contactId?: string;
     editMode?: boolean;
     detachable?: boolean;
+    closeCallback?: (contact?: Contact | null) => void;
+    contact: Contact;
     editor: OxContactEdit;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    onClose(): void;
+    updated(changes: PropertyValues<this>): void;
+    fetchContact(): Promise<void>;
     updateContact(contact: Contact): Promise<void>;
 }

package/dist-client/components/contact-popup.js

@@ -3,18 +3,18 @@ import '@material/web/icon/icon.js';
 import '@operato/contact/ox-contact-view.js';
 import '@operato/contact/ox-contact-edit.js';
 import { html, css, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import gql from 'graphql-tag';
 import { client } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
-import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
 import { OxContactEdit } from '@operato/contact/ox-contact-edit.js';
 let ContactPopup = class ContactPopup extends LitElement {
     constructor() {
         super(...arguments);
-        this.contact = {};
         this.editMode = false;
         this.detachable = false;
+        this.contact = {};
     }
     render() {
         return html `
@@ -31,7 +31,7 @@ let ContactPopup = class ContactPopup extends LitElement {
             : html ` <ox-contact-view .contact=${this.contact}></ox-contact-view>`}
       </div>
 
-      <div class="button-container">
+      <div class="footer">
         ${!this.editMode
             ? html `
               ${this.detachable
@@ -48,21 +48,66 @@ let ContactPopup = class ContactPopup extends LitElement {
                     </button>
                   `
                 : html ``}
+              <div filler></div>
               <button @click=${() => (this.editMode = true)}><md-icon>edit</md-icon>${i18next.t('button.edit')}</button>
-              <button @click=${() => history.back()}><md-icon>close</md-icon>${i18next.t('button.close')}</button>
+              <button @click=${this.onClose} ok><md-icon>close</md-icon>${i18next.t('button.close')}</button>
             `
             : html `
-              <button @click=${() => this.editor.save()}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
-              <button @click=${() => this.editor.cancel()}>
-                <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
-              </button>
               <button @click=${() => this.editor.reset()}>
                 <md-icon>restart_alt</md-icon>${i18next.t('button.reset')}
               </button>
+              <div filler></div>
+              <button @click=${() => this.editor.cancel()}>
+                <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+              </button>
+              <button @click=${() => this.editor.save()} ok><md-icon>save</md-icon>${i18next.t('button.save')}</button>
             `}
       </div>
     `;
     }
+    onClose() {
+        var _a;
+        this.closeCallback && this.closeCallback(((_a = this.contact) === null || _a === void 0 ? void 0 : _a.id) ? this.contact : null);
+        history.back();
+    }
+    updated(changes) {
+        if (changes.has('contactId') && this.contactId) {
+            this.fetchContact();
+        }
+    }
+    async fetchContact() {
+        const response = await client.query({
+            query: gql `
+        query ($id: String!) {
+          contact(id: $id) {
+            id
+            name
+            company
+            department
+            email
+            phone
+            address
+            note
+            items {
+              type
+              label
+              value
+            }
+            profile {
+              left
+              top
+              zoom
+              picture
+            }
+          }
+        }
+      `,
+            variables: {
+                id: this.contactId
+            }
+        });
+        this.contact = response.data.contact;
+    }
     async updateContact(contact) {
         if (contact.id) {
             var { id } = contact, patch = __rest(contact, ["id"]);
@@ -138,7 +183,7 @@ let ContactPopup = class ContactPopup extends LitElement {
 };
 ContactPopup.styles = [
     ScrollbarStyles,
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css `
       :host {
         display: flex;
@@ -155,9 +200,9 @@ ContactPopup.styles = [
     `
 ];
 __decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], ContactPopup.prototype, "contact", void 0);
+    property({ type: String }),
+    __metadata("design:type", String)
+], ContactPopup.prototype, "contactId", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'edit-mode' }),
     __metadata("design:type", Boolean)
@@ -166,6 +211,14 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
 ], ContactPopup.prototype, "detachable", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Function)
+], ContactPopup.prototype, "closeCallback", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ContactPopup.prototype, "contact", void 0);
 __decorate([
     query('ox-contact-edit'),
     __metadata("design:type", OxContactEdit)

package/dist-client/components/contact-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact-popup.js","sourceRoot":"","sources":["../../client/components/contact-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/contact/ox-contact-view.js'\nimport '@operato/contact/ox-contact-edit.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport gql from 'graphql-tag'\n\nimport { client } from '@operato/graphql'\nimport { Contact } from '@operato/contact/ox-contact.js'\nimport { i18next } from '@operato/i18n'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\nimport { OxContactEdit } from '@operato/contact/ox-contact-edit.js'\n\n@customElement('contact-popup')\nexport class ContactPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        color: var(--popup-content-color);\n        background-color: var(--popup-content-background-color);\n      }\n\n      [content] {\n        flex: 1;\n        padding: var(--spacing-medium);\n        overflow: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) contact: Contact = {}\n  @property({ type: Boolean, attribute: 'edit-mode' }) editMode?: boolean = false\n  @property({ type: Boolean }) detachable?: boolean = false\n\n  @query('ox-contact-edit') editor!: OxContactEdit\n\n  render() {\n    return html`\n      <div content>\n        ${this.editMode\n          ? html`<ox-contact-edit\n              .contact=${this.contact}\n              @edit-cancel=${() => (this.editMode = false)}\n              @edit-done=${(e: CustomEvent) => {\n                this.updateContact(e.detail)\n                this.editMode = false\n              }}\n            ></ox-contact-edit>`\n          : html` <ox-contact-view .contact=${this.contact}></ox-contact-view>`}\n      </div>\n\n      <div class=\"button-container\">\n        ${!this.editMode\n          ? html`\n              ${this.detachable\n                ? html`\n                    <button\n                      danger\n                      @click=${() => {\n                        this.dispatchEvent(new CustomEvent('detach'))\n                        history.back()\n                      }}\n                    >\n                      <md-icon>link_off</md-icon>\n                      ${i18next.t('button.detach')}\n                    </button>\n                  `\n                : html``}\n              <button @click=${() => (this.editMode = true)}><md-icon>edit</md-icon>${i18next.t('button.edit')}</button>\n              <button @click=${() => history.back()}><md-icon>close</md-icon>${i18next.t('button.close')}</button>\n            `\n          : html`\n              <button @click=${() => this.editor.save()}><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n              <button @click=${() => this.editor.cancel()}>\n                <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n              </button>\n              <button @click=${() => this.editor.reset()}>\n                <md-icon>restart_alt</md-icon>${i18next.t('button.reset')}\n              </button>\n            `}\n      </div>\n    `\n  }\n\n  async updateContact(contact: Contact) {\n    if (contact.id) {\n      var { id, ...patch } = contact\n\n      var response = await client.mutate({\n        mutation: gql`\n          mutation ($id: String!, $patch: ContactPatch!) {\n            contact: updateContact(id: $id, patch: $patch) {\n              id\n              name\n              company\n              email\n              note\n              items {\n                label\n                type\n                value\n              }\n              profile {\n                left\n                top\n                zoom\n                picture\n              }\n            }\n          }\n        `,\n        variables: {\n          id,\n          patch\n        },\n        context: {\n          hasUpload: true\n        }\n      })\n    } else {\n      var response = await client.mutate({\n        mutation: gql`\n          mutation ($contact: NewContact!) {\n            contact: createContact(contact: $contact) {\n              id\n              name\n              company\n              email\n              note\n              items {\n                label\n                type\n                value\n              }\n              profile {\n                left\n                top\n                zoom\n                picture\n              }\n            }\n          }\n        `,\n        variables: {\n          contact\n        },\n        context: {\n          hasUpload: true\n        }\n      })\n    }\n\n    this.contact = response.data.contact\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.contact\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"contact-popup.js","sourceRoot":"","sources":["../../client/components/contact-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/contact/ox-contact-view.js'\nimport '@operato/contact/ox-contact-edit.js'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport gql from 'graphql-tag'\n\nimport { client } from '@operato/graphql'\nimport { Contact } from '@operato/contact/ox-contact.js'\nimport { i18next } from '@operato/i18n'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\nimport { OxContactEdit } from '@operato/contact/ox-contact-edit.js'\n\n@customElement('contact-popup')\nexport class ContactPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        color: var(--popup-content-color);\n        background-color: var(--popup-content-background-color);\n      }\n\n      [content] {\n        flex: 1;\n        padding: var(--spacing-medium);\n        overflow: auto;\n      }\n    `\n  ]\n\n  @property({ type: String }) contactId?: string\n  @property({ type: Boolean, attribute: 'edit-mode' }) editMode?: boolean = false\n  @property({ type: Boolean }) detachable?: boolean = false\n  @property({ type: Object }) closeCallback?: (contact?: Contact | null) => void\n\n  @state() contact: Contact = {}\n\n  @query('ox-contact-edit') editor!: OxContactEdit\n\n  render() {\n    return html`\n      <div content>\n        ${this.editMode\n          ? html`<ox-contact-edit\n              .contact=${this.contact}\n              @edit-cancel=${() => (this.editMode = false)}\n              @edit-done=${(e: CustomEvent) => {\n                this.updateContact(e.detail)\n                this.editMode = false\n              }}\n            ></ox-contact-edit>`\n          : html` <ox-contact-view .contact=${this.contact}></ox-contact-view>`}\n      </div>\n\n      <div class=\"footer\">\n        ${!this.editMode\n          ? html`\n              ${this.detachable\n                ? html`\n                    <button\n                      danger\n                      @click=${() => {\n                        this.dispatchEvent(new CustomEvent('detach'))\n                        history.back()\n                      }}\n                    >\n                      <md-icon>link_off</md-icon>\n                      ${i18next.t('button.detach')}\n                    </button>\n                  `\n                : html``}\n              <div filler></div>\n              <button @click=${() => (this.editMode = true)}><md-icon>edit</md-icon>${i18next.t('button.edit')}</button>\n              <button @click=${this.onClose} ok><md-icon>close</md-icon>${i18next.t('button.close')}</button>\n            `\n          : html`\n              <button @click=${() => this.editor.reset()}>\n                <md-icon>restart_alt</md-icon>${i18next.t('button.reset')}\n              </button>\n              <div filler></div>\n              <button @click=${() => this.editor.cancel()}>\n                <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n              </button>\n              <button @click=${() => this.editor.save()} ok><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n            `}\n      </div>\n    `\n  }\n\n  onClose() {\n    this.closeCallback && this.closeCallback(this.contact?.id ? this.contact : null)\n\n    history.back()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('contactId') && this.contactId) {\n      this.fetchContact()\n    }\n  }\n\n  async fetchContact() {\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          contact(id: $id) {\n            id\n            name\n            company\n            department\n            email\n            phone\n            address\n            note\n            items {\n              type\n              label\n              value\n            }\n            profile {\n              left\n              top\n              zoom\n              picture\n            }\n          }\n        }\n      `,\n      variables: {\n        id: this.contactId\n      }\n    })\n\n    this.contact = response.data.contact\n  }\n\n  async updateContact(contact: Contact) {\n    if (contact.id) {\n      var { id, ...patch } = contact\n\n      var response = await client.mutate({\n        mutation: gql`\n          mutation ($id: String!, $patch: ContactPatch!) {\n            contact: updateContact(id: $id, patch: $patch) {\n              id\n              name\n              company\n              email\n              note\n              items {\n                label\n                type\n                value\n              }\n              profile {\n                left\n                top\n                zoom\n                picture\n              }\n            }\n          }\n        `,\n        variables: {\n          id,\n          patch\n        },\n        context: {\n          hasUpload: true\n        }\n      })\n    } else {\n      var response = await client.mutate({\n        mutation: gql`\n          mutation ($contact: NewContact!) {\n            contact: createContact(contact: $contact) {\n              id\n              name\n              company\n              email\n              note\n              items {\n                label\n                type\n                value\n              }\n              profile {\n                left\n                top\n                zoom\n                picture\n              }\n            }\n          }\n        `,\n        variables: {\n          contact\n        },\n        context: {\n          hasUpload: true\n        }\n      })\n    }\n\n    this.contact = response.data.contact\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.contact\n      })\n    )\n  }\n}\n"]}

package/dist-client/components/contact-selector.d.ts

@@ -1,5 +1,6 @@
 import '@material/web/icon/icon.js';
 import '@operato/data-grist';
+import './contact-popup';
 import { LitElement } from 'lit';
 import { DataGrist, FetchHandler, GristData, GristRecord } from '@operato/data-grist';
 export declare class ContactSelector extends LitElement {
@@ -11,10 +12,11 @@ export declare class ContactSelector extends LitElement {
     selectedRecords: GristRecord[];
     list: any;
     grist: DataGrist;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     onEmpty(): void;
     onCancel(): void;
     onConfirm(): void;
+    onCreate(): void;
     fetchHandler: FetchHandler;
     firstUpdated(): Promise<void>;
     get selected(): GristRecord | undefined;

package/dist-client/components/contact-selector.js

@@ -1,15 +1,17 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import '@operato/data-grist';
+import './contact-popup';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { DataGrist, ZERO_DATA } from '@operato/data-grist';
-import { client, gqlContext } from '@operato/graphql';
+import { client } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
 import { closePopup } from '@operato/popup';
+import { openPopup } from '@operato/layout';
 import { isMobileDevice } from '@operato/utils';
-import { ButtonContainerStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
 let ContactSelector = class ContactSelector extends LitElement {
     constructor() {
         super(...arguments);
@@ -49,8 +51,7 @@ let ContactSelector = class ContactSelector extends LitElement {
                     filters,
                     pagination: { page, limit },
                     sortings
-                },
-                context: gqlContext()
+                }
             });
             if (!response.errors) {
                 const records = response.data.fetch.items.map((item) => {
@@ -79,18 +80,28 @@ let ContactSelector = class ContactSelector extends LitElement {
         .fetchHandler=${this.fetchHandler.bind(this)}
         .selectedRecords=${this.selectedRecords}
       >
-        <div id="filters" slot="headroom">
-          <ox-filters-form autofocus></ox-filters-form>
+        <div class="header" slot="headroom">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+
+          <div class="actions">
+            <button @click=${this.onCreate.bind(this)} class="iconbtn">
+              <md-icon>add</md-icon>${i18next.t('button.add')}
+            </button>
+          </div>
         </div>
       </ox-grist>
 
-      <div class="button-container" style="margin-left:unset;">
+      <div class="footer">
         <button @click=${this.onEmpty.bind(this)}>
           <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
         </button>
+
         <div filler></div>
+
         <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
-        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
+        <button @click=${this.onConfirm.bind(this)} ok><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `;
     }
@@ -105,6 +116,30 @@ let ContactSelector = class ContactSelector extends LitElement {
         this.confirmCallback && this.confirmCallback(this.selected);
         closePopup(this);
     }
+    onCreate() {
+        var createdContact;
+        const popup = openPopup(html `
+        <contact-popup
+          edit-mode
+          .closeCallback=${contact => {
+            createdContact = contact;
+        }}
+        ></contact-popup>
+      `, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.contact')
+        });
+        popup.onclosed = () => {
+            if (createdContact) {
+                this.confirmCallback && this.confirmCallback(createdContact);
+                closePopup(this);
+            }
+            else {
+                this.grist.fetch();
+            }
+        };
+    }
     async firstUpdated() {
         this.config = {
             pagination: { pages: [100, 200, 500] },
@@ -244,8 +279,8 @@ let ContactSelector = class ContactSelector extends LitElement {
 };
 ContactSelector.styles = [
     ScrollbarStyles,
-    ButtonContainerStyles,
     CommonGristStyles,
+    CommonHeaderStyles,
     css `
       :host {
         display: flex;
@@ -261,14 +296,8 @@ ContactSelector.styles = [
         flex: 1;
       }
 
-      #filters {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
-      #filters > * {
-        padding: var(--spacing-medium) var(--spacing-large);
+      .header {
+        grid-template-areas: 'filters actions';
       }
     `
 ];