@operato/form 1.0.0-alpha.1

package/src/components/ox-search-form.ts

@@ -0,0 +1,317 @@
+import '@material/mwc-icon'
+import './ox-custom-input.js'
+import './ox-custom-select.js'
+
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { buildArgs, client } from '@operato/graphql'
+import { customElement, property, query, queryAll } from 'lit/decorators.js'
+
+import { SearchFormStyles } from '../styles/search-form-styles.js'
+import gql from 'graphql-tag'
+
+@customElement('ox-search-form')
+export class SearchForm extends LitElement {
+  static styles = [
+    SearchFormStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        position: relative;
+      }
+
+      ::placeholder {
+        text-transform: capitalize;
+        color: var(--theme-white-color);
+      }
+    `
+  ]
+
+  @property({ type: Array }) fields?: {
+    type: string
+    hidden: boolean
+    name: string
+    id: string
+    label: string
+    placeholder: string
+    value: any
+    field: string
+    queryName: string
+    props: { [prop: string]: string }
+    attrs: string[]
+    options: { name: string; value: string }[]
+    handlers: { [event: string]: EventListener }
+  }[]
+  @property({ type: Boolean }) hideSearchButton: boolean = false
+
+  @query('form') form!: HTMLFormElement
+  @queryAll('input, select') formFields!: ((HTMLInputElement | HTMLSelectElement) & { field: string; _value: any })[]
+
+  /* @deprecated */
+  getFields() {
+    return Array.from(this.form.querySelectorAll('input, select') || [])
+  }
+
+  render() {
+    return html`
+      <form
+        class="search-form"
+        @keypress=${(e: KeyboardEvent) => {
+          if (e.keyCode === 13) {
+            e.preventDefault()
+            this.submit()
+          }
+        }}
+      >
+        ${(this.fields || []).map(
+          field => html`
+            ${field.type === 'select'
+              ? html`
+                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
+                  <select .value=${field.value} .name=${field.name} ?hidden=${field.hidden}>
+                    ${(field.options || []).map(
+                      (option: { name: string; value: string }) => html`
+                        <option ?selected=${option.value == field.value} value=${option.value}>${option.name}</option>
+                      `
+                    )}
+                  </select>
+                `
+              : field.type === 'checkbox'
+              ? html`
+                  <input
+                    id="ckbx_${field.name}"
+                    type="checkbox"
+                    ?checked="${field.value}"
+                    .name=${field.name}
+                    ?hidden=${field.hidden}
+                    @click=${(e: MouseEvent) => {
+                      const checkbox = e.currentTarget as HTMLInputElement & { _value: any }
+                      if (checkbox.hasAttribute('indeterminate')) {
+                        const values = [undefined, 'on', 'off']
+                        const currentValue = checkbox._value
+                        const newValue =
+                          values.indexOf(currentValue) + 1 > values.length - 1
+                            ? values[0]
+                            : values[values.indexOf(currentValue) + 1]
+
+                        if (newValue === 'on') {
+                          checkbox.checked = true
+                        } else if (newValue === 'off') {
+                          checkbox.checked = false
+                        } else {
+                          checkbox.indeterminate = true
+                        }
+                        checkbox._value = newValue
+                      }
+                    }}
+                  />
+                  <label for="ckbx_${field.name}" ?hidden=${field.hidden}
+                    >${field.label || field.name || field.id}</label
+                  >
+                `
+              : field.type === 'object'
+              ? html`
+                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
+                  <input
+                    .type=${field.type}
+                    .value=${field.value || ''}
+                    .name=${field.name}
+                    .field=${field.field}
+                    .queryName=${field.queryName}
+                    ?hidden=${field.hidden}
+                  />
+                `
+              : html`
+                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
+                  <input
+                    .type=${field.type}
+                    .value=${field.value || ''}
+                    .name=${field.name}
+                    ?hidden=${field.hidden}
+                    .placeholder=${field.placeholder || ''}
+                  />
+                `}
+          `
+        )}
+        ${this.hideSearchButton || false
+          ? ``
+          : html`<mwc-icon @click=${(e: MouseEvent) => this.submit()} search>search</mwc-icon>`}
+      </form>
+    `
+  }
+
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('fields')) {
+      this._checkInputValidity()
+
+      var formFields = this.formFields
+      this.fields &&
+        this.fields.forEach(field => {
+          var formField = formFields.find(f => f.name == field.name)
+          if (field.props instanceof Object && !Array.isArray(field.props)) {
+            for (let prop in field.props) {
+              if (field.props[prop]) {
+                formField!.setAttribute(prop, field.props[prop])
+              }
+            }
+          }
+
+          if (field.attrs && Array.isArray(field.attrs)) {
+            field.attrs.forEach(attr => {
+              if (attr === 'indeterminate') {
+                ;(formField as HTMLInputElement).indeterminate = true
+              } else {
+                formField!.setAttribute(attr, '')
+              }
+            })
+          }
+
+          if (field.handlers instanceof Object && !Array.isArray(field.handlers)) {
+            for (let eventName in field.handlers) {
+              formField!.addEventListener(eventName, field.handlers[eventName])
+            }
+          }
+        })
+    }
+  }
+
+  _checkInputValidity() {
+    const names = this.fields?.map(i => i.name) || []
+    const result = names.every(name => {
+      return names.indexOf(name) === names.lastIndexOf(name)
+    })
+    if (!result) {
+      throw new Error('Field name is duplicated.')
+    }
+  }
+
+  get searchParams() {
+    let searchParam = new URLSearchParams()
+    const fields = this.formFields
+    fields.forEach(field => searchParam.append(field.name, field.value))
+
+    return decodeURI(searchParam.toString())
+  }
+
+  get queryFilters() {
+    return this.formFields
+      .filter(
+        field =>
+          (field.type !== 'checkbox' && field.value && field.value !== '') ||
+          (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||
+          (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value)
+      )
+      .map(field => {
+        const operator = field.getAttribute('searchOper') || ''
+        let value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value
+        return {
+          name: field.name,
+          value:
+            field.type === 'text'
+              ? value
+              : field.type === 'checkbox'
+              ? field.hasAttribute('indeterminate')
+                ? field._value === 'on'
+                  ? true
+                  : false
+                : (field as HTMLInputElement).checked
+              : field.type === 'number'
+              ? parseFloat(value)
+              : value,
+          operator
+        }
+      })
+  }
+
+  public async getQueryFilters() {
+    return await Promise.all(
+      this.formFields
+        .filter(
+          field =>
+            (field.type !== 'checkbox' && field.value && field.value !== '') ||
+            (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||
+            (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value)
+        )
+        .map(async field => {
+          const name = field.name
+          const operator = (field.type === 'text' && field.field ? 'in' : field.getAttribute('searchOper')) || ''
+          const value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value
+          const filter = {
+            name,
+            operator,
+            value:
+              field.type === 'text' && field.getAttribute('type') === 'object'
+                ? await this._getResourceIds(field)
+                : field.type === 'text'
+                ? value
+                : field.type === 'checkbox'
+                ? field.hasAttribute('indeterminate')
+                  ? field._value === 'on'
+                    ? true
+                    : false
+                  : (field as HTMLInputElement).checked
+                : field.type === 'number'
+                ? parseFloat(value)
+                : value,
+            relation: field.type === 'text' && field.getAttribute('type') === 'object'
+          }
+          return filter
+        })
+    )
+  }
+
+  private async _getResourceIds(inputField: HTMLInputElement | HTMLSelectElement) {
+    const {
+      field = 'name',
+      value,
+      queryName
+    } = inputField as (HTMLInputElement | HTMLSelectElement) & { field: string; queryName: string }
+
+    const response = await client.query({
+      query: gql`
+        query {
+          fetch: ${queryName}(${buildArgs({
+        filters: [
+          {
+            name: field,
+            operator: 'i_like',
+            value: `%${value}%`
+          }
+        ]
+      })}) {
+            items {
+              id
+            }
+          }
+        }
+      `
+    })
+
+    if (!response.errors) {
+      const items = response.data.fetch.items as { id: string }[]
+      return (items && items.map(item => item.id)) || []
+    }
+  }
+
+  serialize() {
+    let data: { [name: string]: any } = {}
+
+    this.formFields.forEach(field => {
+      const name = field.name
+      if (field.type === 'number') {
+        data[name] = parseFloat(field.value)
+      } else if (field.type === 'checkbox') {
+        data[name] = (field as HTMLInputElement).checked
+      } else {
+        data[name] = field.value
+      }
+    })
+
+    return data
+  }
+
+  submit() {
+    this.dispatchEvent(new CustomEvent('submit'))
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './styles'
+export * from './components/ox-search-form'
+export * from './components/ox-file-uploader'

package/src/styles/index.ts

@@ -0,0 +1,3 @@
+export * from './single-column-form-styles'
+export * from './multi-column-form-styles'
+export * from './search-form-styles'

package/src/styles/multi-column-form-styles.ts

@@ -0,0 +1,192 @@
+import { css } from 'lit'
+
+export const MultiColumnFormStyles = css`
+  :host {
+    overflow: auto;
+    padding: var(--form-container-padding);
+  }
+
+  .multi-column-form {
+    display: grid;
+    grid-template-columns: repeat(24, 1fr);
+    grid-gap: var(--form-grid-gap);
+    grid-auto-rows: minmax(24px, auto);
+    max-width: var(--form-multi-column-max-width);
+    margin: var(--form-margin);
+  }
+  .multi-column-form fieldset {
+    display: contents;
+  }
+  .multi-column-form legend {
+    grid-column: span 24;
+    text-transform: capitalize;
+
+    padding: var(--legend-padding);
+    font: var(--legend-font);
+    color: var(--legend-text-color);
+    border-bottom: var(--legend-border-bottom);
+  }
+
+  .multi-column-form label {
+    grid-column: span 3;
+    text-align: right;
+    text-transform: capitalize;
+    align-self: center;
+
+    color: var(--label-color);
+    font: var(--label-font);
+  }
+
+  .multi-column-form input,
+  .multi-column-form table,
+  .multi-column-form select,
+  .multi-column-form textarea,
+  .multi-column-form [custom-input] {
+    grid-column: span 9;
+
+    border: var(--input-field-border);
+    border-radius: var(--input-field-border-radius);
+    padding: var(--input-field-padding);
+    font: var(--input-field-font);
+    max-width: 85%;
+  }
+  .multi-column-form select {
+    min-height: 25px;
+    max-width: calc(85% + 18px);
+  }
+
+  .multi-column-form input[type='checkbox'],
+  .multi-column-form input[type='radio'] {
+    justify-self: end;
+    align-self: center;
+    grid-column: span 3 / auto;
+    position: relative;
+    left: 17px;
+  }
+
+  .multi-column-form input[type='checkbox'] + label,
+  .multi-column-form input[type='radio'] + label {
+    padding-left: 17px;
+    text-align: left;
+    align-self: center;
+    grid-column: span 9 / auto;
+
+    font: var(--form-sublabel-font);
+    color: var(--form-sublabel-color);
+  }
+  .multi-column-form [options-wrap] {
+    grid-column: span 21 / auto;
+  }
+
+  input:focus {
+    outline: none;
+    border: 1px solid var(--focus-background-color);
+  }
+  input[type='checkbox'] {
+    margin: 0;
+  }
+
+  @media screen and (max-width: 480px) {
+    .multi-column-form {
+      max-width: 100%;
+      grid-template-columns: repeat(12, 1fr);
+      grid-gap: 5px;
+    }
+    .multi-column-form legend {
+      grid-column: span 12;
+    }
+    .multi-column-form label {
+      grid-column: span 4 / auto;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .multi-column-form input,
+    .multi-column-form table,
+    .multi-column-form select,
+    .multi-column-form textarea,
+    .multi-column-form [custom-input] {
+      grid-column: span 8 / auto;
+      max-width: initial;
+      padding: var(--padding-default);
+      font: normal 15px var(--theme-font);
+    }
+    .multi-column-form input[type='checkbox'],
+    .multi-column-form input[type='radio'] {
+      justify-self: left;
+      align-self: center;
+      grid-column: span 1 / auto;
+      left: 0;
+      zoom: 1.4;
+    }
+
+    .multi-column-form input[type='checkbox'] + label,
+    .multi-column-form input[type='radio'] + label {
+      grid-column: span 11 / auto;
+      align-self: center;
+      position: relative;
+      left: -25px;
+    }
+    .multi-column-form [options-wrap] {
+      grid-column: span 12 / auto;
+      display: grid;
+      grid-gap: var(--padding-default) var(--padding-narrow);
+      grid-template-columns: repeat(12, 1fr);
+    }
+    .multi-column-form [options-wrap] input[type='checkbox'] + label,
+    .multi-column-form [options-wrap] input[type='radio'] + label {
+      grid-column: span 5 / auto;
+      align-self: left;
+      left: -4%;
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 481px) and (max-width: 1024px) {
+    .multi-column-form select {
+      max-width: calc(85% + 10px);
+    }
+  }
+  @media screen and (min-width: 1201px) and (max-width: 2000px) {
+    .multi-column-form {
+      grid-template-columns: repeat(36, 1fr);
+    }
+    .multi-column-form legend {
+      grid-column: span 36;
+    }
+    .multi-column-form input,
+    .multi-column-form table,
+    .multi-column-form select,
+    .multi-column-form textarea,
+    .multi-column-form [custom-input] {
+      max-width: 90%;
+    }
+    .multi-column-form select {
+      max-width: calc(90% + 18px);
+    }
+    .multi-column-form [options-wrap] {
+      grid-column: span 33 / auto;
+    }
+  }
+  @media screen and (min-width: 2001px) {
+    .multi-column-form {
+      grid-template-columns: repeat(48, 1fr);
+    }
+    .multi-column-form legend {
+      grid-column: span 48;
+    }
+    .multi-column-form input,
+    .multi-column-form table,
+    .multi-column-form select,
+    .multi-column-form textarea,
+    .multi-column-form [custom-input] {
+      max-width: 90%;
+    }
+    .multi-column-form select {
+      max-width: calc(90% + 18px);
+    }
+    .multi-column-form [options-wrap] {
+      grid-column: span 45 / auto;
+    }
+  }
+`

package/src/styles/search-form-styles.ts

@@ -0,0 +1,156 @@
+import { css } from 'lit'
+
+export const SearchFormStyles = css`
+  :host {
+    overflow: auto;
+    background-color: var(--search-form-background-color);
+  }
+
+  .search-form {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(24, 1fr);
+    grid-gap: var(--form-grid-gap);
+    grid-auto-rows: minmax(24px, auto);
+    padding: var(--search-form-box-padding);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .search-form label {
+    grid-column: span 3;
+    text-align: right;
+    align-self: center;
+    text-transform: capitalize;
+
+    color: var(--label-color);
+    font: var(--label-font);
+  }
+
+  .search-form input,
+  .search-form select {
+    grid-column: span 9;
+
+    border: var(--input-field-border);
+    border-radius: var(--input-field-border-radius);
+    padding: var(--input-field-padding);
+    font: var(--input-field-font);
+    max-width: 85%;
+    color: var(--input-field-color);
+    background-color: var(--input-field-background-color);
+  }
+
+  .search-form select {
+    min-height: 25px;
+    max-width: calc(85% + 18px);
+  }
+
+  .search-form input[type='checkbox'],
+  .search-form input[type='radio'] {
+    justify-self: end;
+    align-self: center;
+    grid-column: span 3 / auto;
+    position: relative;
+    left: 17px;
+  }
+
+  .search-form input[type='checkbox'] + label,
+  .search-form input[type='radio'] + label {
+    padding-left: 17px;
+    text-align: left;
+    align-self: center;
+    grid-column: span 9 / auto;
+
+    font: var(--form-sublabel-font);
+    color: var(--form-sublabel-color);
+  }
+
+  input:focus {
+    outline: none;
+    border: 1px solid var(--focus-background-color);
+  }
+  input[type='checkbox'] {
+    margin: 0;
+  }
+
+  [search] {
+    position: absolute;
+    right: 1%;
+    bottom: 15px;
+    color: var(--search-form-icon-color);
+  }
+
+  @media screen and (max-width: 460px) {
+    .search-form {
+      grid-template-columns: repeat(12, 1fr);
+      grid-gap: 10px 5px;
+      background-color: var(--search-form-narrow-background-color);
+
+      max-height: 54px;
+      overflow-y: auto;
+    }
+    .search-form label {
+      grid-column: span 3;
+      padding-right: 5px;
+      align-self: center;
+      color: var(--search-form-narrow-text-color);
+    }
+    .search-form input,
+    .search-form select {
+      grid-column: span 8;
+      max-width: 100%;
+      color: var(--theme-white-color);
+    }
+    .search-form input[type='checkbox'],
+    .search-form input[type='radio'] {
+      justify-self: end;
+      align-self: center;
+      grid-column: span 3 / auto;
+    }
+
+    .search-form input[type='checkbox'] + label,
+    .search-form input[type='radio'] + label {
+      grid-column: span 8 / auto;
+      align-self: center;
+      position: relative;
+      left: 5px;
+      color: var(--search-form-narrow-text-color);
+    }
+
+    [search] {
+      right: 3%;
+      color: var(--search-form-narrow-text-color);
+    }
+  }
+  @media (min-width: 461px) and (max-width: 1024px) {
+    .search-form select {
+      max-width: calc(85% + 10px);
+    }
+  }
+  @media screen and (min-width: 1201px) and (max-width: 2000px) {
+    .search-form {
+      grid-template-columns: repeat(36, 1fr);
+    }
+    .search-form input,
+    .search-form select {
+      max-width: 90%;
+    }
+    .search-form select {
+      max-width: calc(90% + 18px);
+    }
+  }
+
+  @media screen and (min-width: 2001px) {
+    .search-form {
+      grid-template-columns: repeat(48, 1fr);
+    }
+    .search-form input,
+    .search-form select {
+      max-width: 90%;
+    }
+    .search-form select {
+      max-width: calc(90% + 18px);
+    }
+    [search] {
+      right: 0.8%;
+    }
+  }
+`