initial commit

app/javascript/elements/disable_hidden.js

@@ -0,0 +1,38 @@
+export default class extends HTMLElement {
+  static observedAttributes = ['class']
+
+  connectedCallback () {
+    this.trigger()
+  }
+
+  attributeChangedCallback (attributeName, oldValue, newValue) {
+    if (attributeName === 'class' && oldValue !== newValue) {
+      this.trigger()
+    }
+  }
+
+  trigger () {
+    const hasHiddenClass = this.classList.contains('hidden')
+    const elements = this.querySelectorAll('input, textarea, select')
+
+    elements.forEach((element) => {
+      if (hasHiddenClass) {
+        element.disabled = true
+
+        if (!element.dataset.wasRequired) {
+          element.dataset.wasRequired = element.required
+        }
+
+        element.required = false
+      } else {
+        element.disabled = false
+
+        if (element.dataset.wasRequired) {
+          element.required = element.dataset.wasRequired === 'true'
+
+          delete element.dataset.wasRequired
+        }
+      }
+    })
+  }
+}

app/javascript/elements/file_dropzone.js

@@ -0,0 +1,76 @@
+import { DirectUpload } from '@rails/activestorage'
+
+import { actionable } from '@github/catalyst/lib/actionable'
+import { target, targetable } from '@github/catalyst/lib/targetable'
+
+export default actionable(targetable(class extends HTMLElement {
+  static [target.static] = [
+    'loading',
+    'input'
+  ]
+
+  connectedCallback () {
+    this.addEventListener('drop', this.onDrop)
+
+    this.addEventListener('dragover', (e) => e.preventDefault())
+  }
+
+  onDrop (e) {
+    e.preventDefault()
+
+    this.uploadFiles(e.dataTransfer.files)
+  }
+
+  onSelectFiles (e) {
+    e.preventDefault()
+
+    this.uploadFiles(this.input.files).then(() => {
+      this.input.value = ''
+    })
+  }
+
+  async uploadFiles (files) {
+    const blobs = await Promise.all(
+      Array.from(files).map(async (file) => {
+        const upload = new DirectUpload(
+          file,
+          '/direct_uploads',
+          this.input
+        )
+
+        return new Promise((resolve, reject) => {
+          upload.create((error, blob) => {
+            if (error) {
+              console.error(error)
+
+              return reject(error)
+            } else {
+              return resolve(blob)
+            }
+          })
+        }).catch((error) => {
+          console.error(error)
+        })
+      })
+    )
+
+    await Promise.all(
+      blobs.map((blob) => {
+        return fetch('/api/attachments', {
+          method: 'POST',
+          body: JSON.stringify({
+            name: 'attachments',
+            blob_signed_id: blob.signed_id,
+            submission_slug: this.dataset.submissionSlug
+          }),
+          headers: { 'Content-Type': 'application/json' }
+        }).then(resp => resp.json()).then((data) => {
+          return data
+        })
+      })).then((result) => {
+      result.forEach((attachment) => {
+        this.dispatchEvent(new CustomEvent('upload', { detail: attachment }))
+      })
+    })
+  }
+}))

app/javascript/elements/files_list.js

@@ -0,0 +1,16 @@
+import { actionable } from '@github/catalyst/lib/actionable'
+import { targets, targetable } from '@github/catalyst/lib/targetable'
+
+export default actionable(targetable(class extends HTMLElement {
+  static [targets.static] = [
+    'items'
+  ]
+
+  add (e) {
+    const elem = document.createElement('input')
+    elem.value = e.detail.uuid
+    elem.name = `values[${this.dataset.fieldUuid}][]`
+
+    this.prepend(elem)
+  }
+}))

app/javascript/elements/flow_area.js

@@ -0,0 +1,5 @@
+export default class extends HTMLElement {
+  setValue (value) {
+    this.innerHTML = value
+  }
+}

app/javascript/elements/flow_view.js

@@ -0,0 +1,93 @@
+import { targets, target, targetable } from '@github/catalyst/lib/targetable'
+import { actionable } from '@github/catalyst/lib/actionable'
+
+export default actionable(targetable(class extends HTMLElement {
+  static observedAttributes = ['data-scale']
+
+  static [target.static] = [
+    'form',
+    'completed',
+    'submitButton'
+  ]
+
+  static [targets.static] = [
+    'areas',
+    'fields',
+    'steps'
+  ]
+
+  passValueToArea (e) {
+    return (this.areas || []).forEach((area) => {
+      if (area.dataset.fieldUuid === e.target.id) {
+        area.setValue(e.target.value)
+      }
+    })
+  }
+
+  submitSignature () {
+    this.submitButton.click()
+  }
+
+  setVisibleStep (uuid) {
+    this.steps.forEach((step) => {
+      step.classList.toggle('hidden', step.dataset.fieldUuid !== uuid)
+    })
+
+    this.fields.find(f => f.id === uuid).focus()
+  }
+
+  submitForm (e) {
+    e.preventDefault()
+
+    e.submitter.setAttribute('disabled', true)
+
+    fetch(this.form.action, {
+      method: this.form.method,
+      body: new FormData(this.form)
+    }).then(response => {
+      console.log('Form submitted successfully!', response)
+      this.moveNextStep()
+    }).catch(error => {
+      console.error('Error submitting form:', error)
+    }).finally(() => {
+      e.submitter.removeAttribute('disabled')
+    })
+  }
+
+  moveStepBack (e) {
+    e.preventDefault()
+
+    const currentStepIndex = this.steps.findIndex((el) => !el.classList.contains('hidden'))
+
+    const previousStep = this.steps[currentStepIndex - 1]
+
+    if (previousStep) {
+      this.setVisibleStep(previousStep.dataset.fieldUuid)
+    }
+  }
+
+  moveNextStep () {
+    const currentStepIndex = this.steps.findIndex((el) => !el.classList.contains('hidden'))
+
+    const nextStep = this.steps[currentStepIndex + 1]
+
+    if (nextStep) {
+      this.setVisibleStep(nextStep.dataset.fieldUuid)
+    } else {
+      this.form.classList.add('hidden')
+      this.completed.classList.remove('hidden')
+    }
+  }
+
+  focusField ({ target }) {
+    this.setVisibleStep(target.dataset.fieldUuid)
+  }
+
+  focusArea ({ target }) {
+    const area = this.areas.find(a => target.id === a.dataset.fieldUuid)
+
+    if (area) {
+      area.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
+  }
+}))

app/javascript/elements/signature_pad.js

@@ -0,0 +1,48 @@
+import SignaturePad from 'signature_pad'
+import { target, targetable } from '@github/catalyst/lib/targetable'
+import { actionable } from '@github/catalyst/lib/actionable'
+
+import { DirectUpload } from '@rails/activestorage'
+
+export default actionable(targetable(class extends HTMLElement {
+  static [target.static] = [
+    'canvas',
+    'input'
+  ]
+
+  connectedCallback () {
+    this.pad = new SignaturePad(this.canvas)
+  }
+
+  submit (e) {
+    e?.preventDefault()
+
+    this.canvas.toBlob((blob) => {
+      const file = new File([blob], 'signature.jpg', { type: 'image/jpg' })
+
+      new DirectUpload(
+        file,
+        '/direct_uploads'
+      ).create((_error, data) => {
+        fetch('/api/attachments', {
+          method: 'POST',
+          body: JSON.stringify({
+            submission_slug: this.dataset.submissionSlug,
+            blob_signed_id: data.signed_id,
+            name: 'signatures'
+          }),
+          headers: { 'Content-Type': 'application/json' }
+        }).then((resp) => resp.json()).then((attachment) => {
+          this.input.value = attachment.uuid
+          this.dispatchEvent(new CustomEvent('upload', { details: attachment }))
+        })
+      })
+    }, 'image/jpeg', 0.95)
+  }
+
+  clear (e) {
+    e?.preventDefault()
+
+    this.pad.clear()
+  }
+}))

app/javascript/elements/toggle_visible.js

@@ -0,0 +1,11 @@
+import { actionable } from '@github/catalyst/lib/actionable'
+
+export default actionable(class extends HTMLElement {
+  trigger (event) {
+    const elementIds = JSON.parse(this.dataset.elementIds)
+
+    elementIds.forEach((elementId) => {
+      document.getElementById(elementId).classList.toggle('hidden', event.target.value !== elementId)
+    })
+  }
+})

app/javascript/elements/turbo_modal.js

@@ -0,0 +1,37 @@
+import { actionable } from '@github/catalyst/lib/actionable'
+
+export default actionable(class extends HTMLElement {
+  connectedCallback () {
+    document.body.classList.add('overflow-hidden')
+
+    document.addEventListener('keyup', this.onEscKey)
+    document.addEventListener('turbo:submit-end', this.onSubmit)
+    document.addEventListener('turbo:before-cache', this.close)
+  }
+
+  disconnectedCallback () {
+    document.body.classList.remove('overflow-hidden')
+
+    document.removeEventListener('keyup', this.onEscKey)
+    document.removeEventListener('turbo:submit-end', this.handleSubmit)
+    document.removeEventListener('turbo:before-cache', this.close)
+  }
+
+  onSubmit = (e) => {
+    if (e.detail.success) {
+      this.close()
+    }
+  }
+
+  onEscKey = (e) => {
+    if (e.code === 'Escape') {
+      this.close()
+    }
+  }
+
+  close = (e) => {
+    e?.preventDefault()
+
+    this.remove()
+  }
+})