@operato/process 1.1.34 → 1.1.36

package/src/selector/process-creation-popup.ts

@@ -0,0 +1,102 @@
+import '@material/mwc-textfield'
+import '@material/mwc-textarea'
+import '@material/mwc-select'
+import '@material/mwc-list/mwc-list-item'
+import '@material/mwc-button'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+
+@customElement('process-creation-popup')
+export class ProcessCreationPopup extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+
+          padding: 10px;
+          background-color: white;
+        }
+
+        :host > * {
+          margin: 10px;
+        }
+
+        [content] {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
+
+        [content] > * {
+          margin: 10px 0;
+        }
+      `
+    ]
+  }
+
+  @property({ type: String }) defaultGroup?: string
+  @property({ type: Array }) groups?: { id: string; name: string }[]
+
+  render() {
+    var groups = this.groups || []
+
+    return html`
+      <div content>
+        <mwc-textfield label=${String(i18next.t('label.name'))} name="name" required field-name></mwc-textfield>
+        <mwc-textarea
+          label=${String(i18next.t('label.description'))}
+          name="description"
+          field-description
+        ></mwc-textarea>
+        <mwc-select
+          label=${String(i18next.t('label.group'))}
+          field-group
+          helper="If there is no group to choose, you can leave it empty."
+        >
+          ${groups.map(
+            group => html`
+              <mwc-list-item value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</mwc-list-item>
+            `
+          )}
+        </mwc-select>
+      </div>
+
+      <mwc-button
+        raised
+        label=${String(i18next.t('button.create'))}
+        @click=${(e: MouseEvent) => this.onClickSubmit()}
+      ></mwc-button>
+    `
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      ;(this.renderRoot.querySelector('mwc-textfield') as any)?.focus()
+    }, 100)
+  }
+
+  onClickSubmit() {
+    var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {
+      return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value
+    })
+
+    if (!name) {
+      return
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('create-process', {
+        detail: {
+          name,
+          description,
+          groupId
+        }
+      })
+    )
+  }
+}

package/src/selector/process-thumbnail-card.ts

@@ -0,0 +1,175 @@
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+
+@customElement('process-thumbnail-card')
+export class ProcessThumbnailCard extends localize(i18next)(LitElement) {
+  static get styles() {
+    return [
+      css`
+        :host {
+          position: relative;
+
+          padding: 0;
+          margin: 0;
+          height: 100%;
+
+          -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+          -webkit-transition: all 0.5s ease-in-out;
+          transition: all 0.5s ease-in-out;
+        }
+
+        :host(.flipped) {
+          -webkit-transform: var(--card-list-flip-transform);
+          transform: var(--card-list-flip-transform);
+        }
+
+        [front],
+        [back] {
+          position: absolute;
+
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0;
+
+          border: var(--card-list-create-border);
+          border-radius: var(--card-list-create-border-radius);
+
+          background-color: #fff;
+
+          -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+        }
+
+        [front] {
+          text-align: center;
+          font-size: 0.8em;
+          color: var(--card-list-create-color);
+          text-transform: capitalize;
+        }
+
+        [front] mwc-icon {
+          margin-top: 15%;
+          display: block;
+          font-size: 3.5em;
+          color: var(--card-list-create-icon-color);
+        }
+
+        [back] {
+          -webkit-transform: var(--card-list-flip-transform);
+          transform: var(--card-list-flip-transform);
+        }
+
+        [back] form {
+          padding: var(--card-list-create-form-padding);
+          display: flex;
+          flex-flow: row wrap;
+        }
+
+        [back] form label {
+          flex: 1 1 25%;
+          font: var(--card-list-create-label-font);
+          color: var(--card-list-create-label-color);
+        }
+
+        [back] form input,
+        [back] form select {
+          flex: 1 1 60%;
+          width: 10px;
+          background-color: #fff;
+          border: var(--card-list-create-input-border);
+          border-radius: var(--card-list-create-input-border-radius);
+          padding: var(--card-list-create-input-padding);
+          font: var(--card-list-create-input-font);
+          color: var(--card-list-create-input-color);
+        }
+
+        form * {
+          margin: var(--card-list-create-margin);
+        }
+
+        input[type='submit'] {
+          background-color: var(--button-background-color) !important;
+          margin: var(--button-margin);
+          font: var(--button-font);
+          color: var(--button-color) !important;
+          border-radius: var(--button-radius);
+          border: var(--button-border);
+        }
+      `
+    ]
+  }
+
+  @property({ type: String }) defaultGroup?: string
+  @property({ type: Array }) groups?: { id: string; name: string }[]
+
+  render() {
+    var groups = this.groups || []
+
+    return html`
+      <div @click=${(e: Event) => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create process</div>
+
+      <div @click=${(e: Event) => this.onClickFlip(e)} back>
+        <form @submit=${(e: Event) => this.onClickSubmit(e)}>
+          <label>${i18next.t('label.name')}</label>
+          <input type="text" name="name" />
+
+          <label>${i18next.t('label.description')}</label>
+          <input type="text" name="description" />
+
+          <label>${i18next.t('label.group')}</label>
+          <select .value=${this.defaultGroup || ''} name="groupId">
+            ${groups.map(
+              group => html`
+                <option value=${group.id} ?selected=${this.defaultGroup == group.id}>${group.name}</option>
+              `
+            )}
+          </select>
+
+          <input type="submit" value=${String(i18next.t('button.create'))} />
+        </form>
+      </div>
+    `
+  }
+
+  onClickFlip(e: Event) {
+    if ((e.currentTarget as any)?.hasAttribute('front') || (e.target as any)?.hasAttribute('back')) {
+      this.classList.toggle('flipped')
+    }
+
+    e.stopPropagation()
+  }
+
+  onClickSubmit(e: Event) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    var form = e.target as any
+
+    var name = form.elements['name'].value
+    var description = form.elements['description'].value
+    var groupId = form.elements['groupId'].value
+
+    this.dispatchEvent(
+      new CustomEvent('create-process', {
+        detail: {
+          name,
+          description,
+          groupId
+        }
+      })
+    )
+  }
+
+  reset() {
+    var form = this.shadowRoot?.querySelector('form')
+    if (form) {
+      form.reset()
+    }
+
+    this.classList.remove('flipped')
+  }
+}