@things-factory/auth-ui 8.0.0-beta.8 → 8.0.0

package/client/pages/application/applications.ts

@@ -0,0 +1,182 @@
+import '@material/web/button/elevated-button.js'
+import '@material/web/button/outlined-button.js'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { client } from '@operato/graphql'
+import { navigate, PageView, store } from '@operato/shell'
+
+@customElement('applications-page')
+class Applications extends connect(store)(PageView) {
+  static styles = [
+    css`
+      :host {
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
+
+        overflow: auto;
+      }
+
+      md-elevated-button {
+        text-transform: capitalize;
+      }
+
+      md-outlined-button {
+        float: right;
+        margin-top: var(--spacing-medium);
+        text-transform: capitalize;
+      }
+
+      h2 {
+        margin: var(--title-margin);
+        font: var(--title-font);
+        color: var(--title-text-color);
+      }
+
+      [page-description] {
+        margin: var(--page-description-margin);
+        font: var(--page-description-font);
+        color: var(--page-description-color);
+      }
+
+      table {
+        margin: var(--spacing-large) 0;
+        width: 100%;
+        border-collapse: collapse;
+      }
+
+      tr {
+        background-color: var(--tr-background-color);
+      }
+
+      tr:nth-child(odd) {
+        background-color: var(--tr-background-odd-color);
+      }
+
+      tr:hover {
+        background-color: var(--tr-background-hover-color);
+      }
+
+      th {
+        border-top: var(--th-border-top);
+        border-bottom: var(--td-border-bottom);
+        padding: var(--th-padding);
+
+        font: var(--th-font);
+        color: var(--th-color);
+        text-transform: var(--th-text-transform);
+        text-align: left;
+      }
+
+      td {
+        padding: var(--td-padding);
+        border-bottom: var(--td-border-bottom);
+        font: var(--td-font);
+        color: var(--td-color);
+      }
+
+      td a {
+        font: var(--td-font);
+        text-decoration: none;
+        color: var(--md-sys-color-on-surface);
+      }
+
+      td a strong {
+        font: bold 16px var(--theme-font);
+
+        display: block;
+        text-decoration: none;
+      }
+
+      .text-align-center {
+        text-align: center;
+      }
+
+      .text-align-right {
+        text-align: right;
+      }
+    `
+  ]
+
+  @property({ type: Array }) applications: any[] = []
+
+  get context() {
+    return {
+      title: `applications`,
+      help: 'auth/application'
+    }
+  }
+
+  render() {
+    var apps = this.applications || []
+
+    return html`
+      <div>
+        <h2>Registered Applications</h2>
+        <p page-description>
+          What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.
+        </p>
+
+        <md-elevated-button @click=${e => navigate('application-register')}
+          >register new application</md-elevated-button
+        >
+      </div>
+
+      <table>
+        <tr>
+          <th>app name</th>
+          <th>API health</th>
+          <th>Installs</th>
+          <th>status</th>
+        </tr>
+        ${apps.map(
+          app => html`
+            <tr>
+              <td>
+                <a href=${`application/${app.id}`}>
+                  <strong>${app.name}</strong>
+                  ${app.description}
+                </a>
+              </td>
+              <td>OK</td>
+              <td class="text-align-center">1</td>
+              <td>draft</td>
+            </tr>
+          `
+        )}
+      </table>
+
+      <md-outlined-button @click=${e => navigate('app-bindings')}>bound applications ..</md-outlined-button>
+    `
+  }
+
+  async pageUpdated(changes, lifecycle, before) {
+    if (this.active) {
+      this.applications = (await this.fetchApplications()).items
+    }
+  }
+
+  async fetchApplications() {
+    const response = await client.query({
+      query: gql`
+        query {
+          applications {
+            items {
+              id
+              name
+              description
+            }
+            total
+          }
+        }
+      `
+    })
+
+    if (!response.errors) {
+      return response.data.applications
+    }
+  }
+}

package/client/pages/application/register.ts

@@ -0,0 +1,211 @@
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { client } from '@operato/graphql'
+import { navigate, PageView, store } from '@operato/shell'
+
+@customElement('application-register')
+class ApplicationRegister extends connect(store)(PageView) {
+  static styles = [
+    css`
+      :host {
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
+
+        position: relative;
+
+        overflow: auto;
+      }
+      h2 {
+        margin: var(--title-margin);
+        font: var(--title-font);
+        color: var(--title-text-color);
+      }
+      [page-description] {
+        margin: var(--page-description-margin);
+        font: var(--page-description-font);
+        color: var(--page-description-color);
+      }
+      [icon] {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+
+        max-width: 80px;
+      }
+      [icon] img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      img[pagedeco] {
+        width: 150px;
+        margin: 0 var(--spacing-large);
+        float: left;
+        position: relative;
+        top: -20px;
+      }
+
+      [form-container] {
+        background-color: var(--md-sys-color-surface);
+        padding: var(--spacing-large);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        max-width: var(--input-container-max-width);
+        position: relative;
+        top: -50px;
+        clear: both;
+      }
+      label {
+        font: var(--label-font);
+        color: var(--label-color, var(--md-sys-color-on-surface));
+        text-transform: var(--label-text-transform);
+      }
+      input {
+        border: var(--border-dim-color);
+        border-radius: var(--border-radius);
+        margin: var(--input-margin);
+        padding: var(--input-padding);
+        font: var(--input-font);
+
+        flex: 1;
+      }
+      select:focus,
+      input:focus {
+        outline: none;
+      }
+      [field-2column] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 15px;
+      }
+      [field] {
+        display: flex;
+        flex-direction: column;
+      }
+      [grid-span] {
+        grid-column: span 2;
+      }
+      @media screen and (max-width: 480px) {
+        img[pagedeco] {
+          display: none;
+        }
+        [form-container] {
+          position: initial;
+        }
+        [field] {
+          grid-column: span 2;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) application: any
+
+  @query('form') form!: HTMLFormElement
+
+  @state() _icon?: string
+
+  get context() {
+    return {
+      title: `application registration`,
+      help: 'auth/application'
+    }
+  }
+
+  render() {
+    return html`
+      <img src="/assets/images/image-api.png" pagedeco />
+      <h2>Register new application</h2>
+      <p page-description>
+        You can register new application here.<br />
+        What type of app are you building? Choose the app type that best suits the audience you’re building for.
+      </p>
+
+      ${this._icon
+        ? html`
+            <div icon>
+              <img src=${this._icon} />
+            </div>
+          `
+        : html``}
+
+      <div form-container>
+        <form>
+          <div field-2column>
+            <div field grid-span>
+              <label for="name">name</label>
+              <input id="name" type="text" name="name" />
+            </div>
+
+            <div field grid-span>
+              <label for="description">description</label>
+              <input id="description" type="text" name="description" />
+            </div>
+
+            <div field grid-span>
+              <label for="app-url">application url</label>
+              <input id="app-url" type="text" name="url" />
+            </div>
+
+            <div field grid-span>
+              <label for="redirect-url">redirectUrl</label>
+              <input id="redirect-url" type="text" name="redirectUrl" />
+            </div>
+
+            <div field grid-span>
+              <label for="icon">application icon</label>
+              <input id="icon" type="text" name="icon" @change=${e => (this._icon = e.target.value)} />
+            </div>
+
+            <div field grid-span>
+              <label for="email">contact email</label>
+              <input id="email" type="text" name="email" />
+            </div>
+
+            <md-elevated-button grid-span @click=${this.createApplication.bind(this)}>register</md-elevated-button>
+          </div>
+        </form>
+      </div>
+    `
+  }
+
+  async createApplication(e) {
+    e.preventDefault()
+
+    const formData = new FormData(this.form)
+
+    const application = Array.from(formData.entries()).reduce((application, [key, value]) => {
+      application[key] = value
+      return application
+    }, {})
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($application: NewApplication!) {
+          createApplication(application: $application) {
+            id
+          }
+        }
+      `,
+      variables: {
+        application
+      }
+    })
+
+    if (response.errors) {
+      console.log('creation fail.')
+    } else {
+      const id = response.data.createApplication.id
+      navigate(`application/${id}`)
+    }
+  }
+
+  pageUpdated(changes, lifecycle, before) {
+    if (this.active) {
+      this.form.reset()
+    }
+  }
+}

package/client/pages/attribute/attribute-set-item-list.ts

@@ -0,0 +1,237 @@
+import '@material/web/icon/icon.js'
+
+import gql from 'graphql-tag'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+import { DataGrist, FetchOption } from '@operato/data-grist'
+import { CommonHeaderStyles } from '@operato/styles'
+
+@customElement('attribute-set-item-list')
+class AttributeSetItemList extends localize(i18next)(LitElement) {
+  @property({ type: Object }) attribute: any
+
+  @state() gristConfig: any
+
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+  ]
+
+  @query('ox-grist') private grist!: DataGrist
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      ></ox-grist>
+
+      <div class="footer">
+        <div filler></div>
+        <button danger @click=${this.deleteAttributeSetItems.bind(this)}>
+          <md-icon>delete_forever</md-icon>${i18next.t('button.delete')}
+        </button>
+        <button @click=${this.updateAttributeSetItems.bind(this)} done>
+          <md-icon>save</md-icon>${i18next.t('button.save')}
+        </button>
+      </div>
+    `
+  }
+
+  async firstUpdated() {
+    this.gristConfig = {
+      list: { fields: ['name', 'description', 'active'] },
+      columns: [
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'add',
+          handlers: {
+            click: 'record-copy'
+          }
+        },
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'arrow_upward',
+          handlers: {
+            click: 'move-up'
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'arrow_downward',
+          handlers: {
+            click: 'move-down'
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: true
+          },
+          width: 140
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: true
+          },
+          width: 180
+        },
+        {
+          type: 'varname',
+          name: 'tag',
+          header: i18next.t('field.tag'),
+          record: {
+            editable: true
+          },
+          width: 180
+        },
+        {
+          type: 'checkbox',
+          name: 'active',
+          label: true,
+          header: i18next.t('field.active'),
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'checkbox',
+          name: 'hidden',
+          label: true,
+          header: i18next.t('field.hidden'),
+          record: {
+            editable: true
+          },
+          sortable: true,
+          width: 60
+        },
+        {
+          type: 'select',
+          name: 'type',
+          header: i18next.t('field.type'),
+          record: {
+            options: ['', 'number', 'text', 'select', 'boolean', 'date', 'datetime', 'file'],
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'parameters',
+          name: 'options',
+          header: i18next.t('field.options'),
+          record: {
+            editable: true,
+            renderer: 'json5',
+            options: async (value, column, record, row, field) => {
+              return {
+                name: record.type,
+                help: '',
+                spec:
+                  record.type === 'select'
+                    ? [
+                        {
+                          type: 'options' /* property-editor type */,
+                          name: 'options',
+                          label: 'options'
+                        }
+                      ]
+                    : [],
+                context: this.grist,
+                objectified: true
+              }
+            }
+          },
+          width: 120
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        }
+      },
+      pagination: {
+        infinite: true
+      },
+      sorters: []
+    }
+  }
+
+  async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {
+    const attributes = this.attribute.items || []
+
+    return {
+      total: attributes.length,
+      records: attributes
+    }
+  }
+
+  private async updateAttributeSetItems() {
+    this.grist.commit()
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!, $patch: AttributeSetPatch!) {
+          updateAttributeSet(id: $id, patch: $patch) {
+            entity
+          }
+        }
+      `,
+      variables: {
+        id: this.attribute.id,
+        patch: {
+          items: this.grist.data.records,
+          cuFlag: 'M'
+        }
+      }
+    })
+
+    if (!response.errors) {
+      await document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            message: i18next.t('text.info_x_successfully', {
+              x: i18next.t('button.save')
+            })
+          }
+        })
+      )
+    }
+  }
+
+  private async deleteAttributeSetItems() {
+    if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+      return
+    }
+
+    this.grist.deleteSelectedRecords(false)
+  }
+}