@things-factory/auth-ui 8.0.0 → 9.0.0-beta.3

package/client/pages/application/applications.ts

@@ -1,182 +0,0 @@
-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

@@ -1,211 +0,0 @@
-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

@@ -1,237 +0,0 @@
-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)
-  }
-}