lint:fix & forman

2020-06-01 12:15:44 +01:00 · 2020-06-01 12:15:44 +01:00 · c1cc4f048e
parent 0db3706109
commit c1cc4f048e
8 changed files with 255 additions and 230 deletions
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@ -56,4 +56,4 @@ export const walkProps = (props, action, cancelToken = null) => {
      walkProps(child, action, cancelToken)
    }
  }
-}
+}
--- a/packages/builder/src/components/common/Icons/More.svelte
+++ b/packages/builder/src/components/common/Icons/More.svelte
@ -1,8 +1,12 @@
-<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  viewBox="0 0 24 24" 
-  width="24" 
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
  height="24">
-  <path fill="none" d="M0 0h24v24H0z"/>
-  <path d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z"/>
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6
+    12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21
+    12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5
+    1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z" />
 </svg>
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
@ -13,16 +13,20 @@

  const FIELD_TYPES = ["string", "number", "boolean"]

-  export let field = { type: "string", constraints: { type: "string", presence: false } }
+  export let field = {
+    type: "string",
+    constraints: { type: "string", presence: false },
+  }
  export let schema
  export let goBack

  let errors = []
  let draftField = cloneDeep(field)
-  
+
  let type = field.type
  let constraints = field.constraints
-  let required = field.constraints.presence && !field.constraints.presence.allowEmpty
+  let required =
+    field.constraints.presence && !field.constraints.presence.allowEmpty

  const save = () => {
    constraints.presence = required ? { allowEmpty: false } : false
@ -31,15 +35,19 @@
    schema[field.name] = draftField
    goBack()
  }
-  
-  $: constraints = 
-      type === "string" ? { type: "string", length: {}, presence: false }
-      : type === "number" ? { type: "number", presence: false, numericality: {} }
-      : type === "boolean" ? { type: "boolean", presence: false }
-      : type === "datetime" ? { type: "date", datetime: {}, presence: false }
-      : type.startsWith('array') ? { type: "array", presence: false }
+
+  $: constraints =
+    type === "string"
+      ? { type: "string", length: {}, presence: false }
+      : type === "number"
+      ? { type: "number", presence: false, numericality: {} }
+      : type === "boolean"
+      ? { type: "boolean", presence: false }
+      : type === "datetime"
+      ? { type: "date", datetime: {}, presence: false }
+      : type.startsWith("array")
+      ? { type: "array", presence: false }
      : { type: "string", presence: false }
-      
 </script>

 <div class="root">
@ -48,24 +56,26 @@

  <form on:submit|preventDefault class="uk-form-stacked">
    <Textbox label="Name" bind:text={field.name} />
-    <Dropdown
-      label="Type"
-      bind:selected={type}
-      options={FIELD_TYPES} />
-    
+    <Dropdown label="Type" bind:selected={type} options={FIELD_TYPES} />
+
    <Checkbox label="Required" bind:checked={required} />
-    

    {#if type === 'string'}
      <NumberBox label="Max Length" bind:value={constraints.length.maximum} />
      <ValuesList label="Categories" bind:values={constraints.inclusion} />
    {:else if type === 'datetime'}
      <!-- TODO: revisit and fix with JSON schema -->
-      <DatePicker label="Min Value" bind:value={constraints.datetime.earliest} />
+      <DatePicker
+        label="Min Value"
+        bind:value={constraints.datetime.earliest} />
      <DatePicker label="Max Value" bind:value={constraints.datetime.latest} />
    {:else if type === 'number'}
-      <NumberBox label="Min Value" bind:value={constraints.numericality.greaterThanOrEqualTo} />
-      <NumberBox label="Max Value" bind:value={constraints.numericality.lessThanOrEqualTo} />
+      <NumberBox
+        label="Min Value"
+        bind:value={constraints.numericality.greaterThanOrEqualTo} />
+      <NumberBox
+        label="Max Value"
+        bind:value={constraints.numericality.lessThanOrEqualTo} />
    {/if}
  </form>
 </div>
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
@ -23,22 +23,22 @@
  function closed() {
    onClosed()
  }
-  
+
  const isSelect = meta =>
-    meta.type === "string" 
-    && meta.constraints 
-    && meta.constraints.inclusion 
-    && meta.constraints.inclusion.length > 0
-    
+    meta.type === "string" &&
+    meta.constraints &&
+    meta.constraints.inclusion &&
+    meta.constraints.inclusion.length > 0
+
  function determineInputType(meta) {
    if (meta.type === "datetime") return "date"
    if (meta.type === "number") return "number"
    if (meta.type === "boolean") return "checkbox"
    if (isSelect(meta)) return "select"
-        
+
    return "text"
  }
-  
+
  function determineOptions(meta) {
    return isSelect(meta) ? meta.constraints.inclusion : []
  }
@ -54,8 +54,8 @@
    )
    if (recordResponse.errors) {
      errors = Object.keys(recordResponse.errors)
-                .map(k => ({dataPath: k,  message: recordResponse.errors[k]}))
-                .flat()
+        .map(k => ({ dataPath: k, message: recordResponse.errors[k] }))
+        .flat()
      return
    }

--- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
@ -4,15 +4,15 @@
  export let label
  export let errors = []
  export let options = []
-  
+
  let checked = type === "checkbox" ? value : false
-  
+
  const determineClassName = type => {
    if (type === "checkbox") return "uk-checkbox"
    if (type === "select") return "uk-select"
    return "uk-input"
  }
-    
+
  const handleInput = event => {
    if (event.target.type === "checkbox") {
      value = event.target.checked
@ -30,22 +30,22 @@

 <label>{label}</label>

-{#if type === "select"}
-<select 
-  class={determineClassName(type)}
-  bind:value={value}
-  class:uk-form-danger={errors.length > 0} >
-  {#each options as opt}
-    <option value={opt}>{ opt }</option>
-  {/each}
-</select>
+{#if type === 'select'}
+  <select
+    class={determineClassName(type)}
+    bind:value
+    class:uk-form-danger={errors.length > 0}>
+    {#each options as opt}
+      <option value={opt}>{opt}</option>
+    {/each}
+  </select>
 {:else}
-<input
-  class={determineClassName(type)}
-  class:uk-form-danger={errors.length > 0}
-  {checked}
-  {type}
-  {value}
-  on:input={handleInput}
-  on:change={handleInput} />
+  <input
+    class={determineClassName(type)}
+    class:uk-form-danger={errors.length > 0}
+    {checked}
+    {type}
+    {value}
+    on:input={handleInput}
+    on:change={handleInput} />
 {/if}
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@ -1,149 +1,160 @@
 <script>
-import { MoreIcon } from "components/common/Icons"
-import { store } from "builderStore"
-import { getComponentDefinition } from "builderStore/store"
-import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-import { last, cloneDeep } from "lodash/fp"
-import UIkit from "uikit"
-import { selectComponent, getParent, walkProps, saveCurrentPreviewItem } from "builderStore/storeUtils"
-import { uuid } from "builderStore/uuid"
+  import { MoreIcon } from "components/common/Icons"
+  import { store } from "builderStore"
+  import { getComponentDefinition } from "builderStore/store"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { last, cloneDeep } from "lodash/fp"
+  import UIkit from "uikit"
+  import {
+    selectComponent,
+    getParent,
+    walkProps,
+    saveCurrentPreviewItem,
+  } from "builderStore/storeUtils"
+  import { uuid } from "builderStore/uuid"

-export let component
+  export let component

-let confirmDeleteDialog
-let dropdownEl
+  let confirmDeleteDialog
+  let dropdownEl

-$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right", "delay-hide": 0, animation: false });
-$: dropdown && UIkit.util.on(dropdown, "shown", () => hidden = false)
-$: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false
-$: noPaste = !$store.componentToPaste || $store.componentToPaste._id === component._id
-
-const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
-
-const hideDropdown = () => {
-  dropdown.hide()
-}
-
-const moveUpComponent = () => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-
-    if (parent) {
-      const currentIndex = parent._children.indexOf(component)
-      if (currentIndex === 0) return s
-
-      const newChildren = parent._children.filter(c => c !== component)
-      newChildren.splice(currentIndex - 1, 0, component)
-      parent._children = newChildren
-    }
-    s.currentComponentInfo = component
-    saveCurrentPreviewItem(s)
-
-    return s
+  $: dropdown = UIkit.dropdown(dropdownEl, {
+    mode: "click",
+    offset: 0,
+    pos: "bottom-right",
+    "delay-hide": 0,
+    animation: false,
  })
-}
+  $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
+  $: noChildrenAllowed =
+    !component ||
+    getComponentDefinition($store, component._component).children === false
+  $: noPaste =
+    !$store.componentToPaste || $store.componentToPaste._id === component._id

-const moveDownComponent = () => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
+  const lastPartOfName = c => (c ? last(c._component.split("/")) : "")

-    if (parent) {
-      const currentIndex = parent._children.indexOf(component)
-      if (currentIndex === parent._children.length - 1) return s
+  const hideDropdown = () => {
+    dropdown.hide()
+  }

-      const newChildren = parent._children.filter(c => c !== component)
-      newChildren.splice(currentIndex + 1, 0, component)
-      parent._children = newChildren
-    }
-    s.currentComponentInfo = component
-    saveCurrentPreviewItem(s)
+  const moveUpComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)

-    return s
-  })
-}
+      if (parent) {
+        const currentIndex = parent._children.indexOf(component)
+        if (currentIndex === 0) return s

-const copyComponent = () => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-    const copiedComponent = cloneDeep(component)
-    walkProps(copiedComponent, p => {
+        const newChildren = parent._children.filter(c => c !== component)
+        newChildren.splice(currentIndex - 1, 0, component)
+        parent._children = newChildren
+      }
+      s.currentComponentInfo = component
+      saveCurrentPreviewItem(s)
+
+      return s
+    })
+  }
+
+  const moveDownComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
+
+      if (parent) {
+        const currentIndex = parent._children.indexOf(component)
+        if (currentIndex === parent._children.length - 1) return s
+
+        const newChildren = parent._children.filter(c => c !== component)
+        newChildren.splice(currentIndex + 1, 0, component)
+        parent._children = newChildren
+      }
+      s.currentComponentInfo = component
+      saveCurrentPreviewItem(s)
+
+      return s
+    })
+  }
+
+  const copyComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
+      const copiedComponent = cloneDeep(component)
+      walkProps(copiedComponent, p => {
+        p._id = uuid()
+      })
+      parent._children = [...parent._children, copiedComponent]
+      saveCurrentPreviewItem(s)
+      s.currentComponentInfo = copiedComponent
+      return s
+    })
+  }
+
+  const deleteComponent = () => {
+    store.update(state => {
+      const parent = getParent(state.currentPreviewItem.props, component)
+
+      if (parent) {
+        parent._children = parent._children.filter(c => c !== component)
+      }
+
+      saveCurrentPreviewItem(state)
+
+      return state
+    })
+  }
+
+  const generateNewIdsForComponent = c =>
+    walkProps(c, p => {
      p._id = uuid()
    })
-    parent._children = [...parent._children, copiedComponent]
-    saveCurrentPreviewItem(s)
-    s.currentComponentInfo = copiedComponent
-    return s
-  })
-}

-const deleteComponent = () => {
-  store.update(state => {
-    const parent = getParent(state.currentPreviewItem.props, component)
+  const storeComponentForCopy = (cut = false) => {
+    store.update(s => {
+      const copiedComponent = cloneDeep(component)
+      s.componentToPaste = copiedComponent
+      if (cut) {
+        const parent = getParent(s.currentPreviewItem.props, component._id)
+        parent._children = parent._children.filter(c => c._id !== component._id)
+        selectComponent(s, parent)
+      }

-    if (parent) {
-      parent._children = parent._children.filter(
-        c => c !== component
-      )
-    }
-
-    saveCurrentPreviewItem(state)
-
-    return state
-  })
-}
-
-const generateNewIdsForComponent = c =>
-  walkProps(c, p => {
-    p._id = uuid()
-  })
-
-const storeComponentForCopy = (cut = false) => {
-  store.update(s => {
-    const copiedComponent = cloneDeep(component)
-    s.componentToPaste = copiedComponent
-    if (cut) {
-      const parent = getParent(s.currentPreviewItem.props, component._id)
-      parent._children = parent._children.filter(c => c._id !== component._id)
-      selectComponent(s, parent)
-    }
-
-    return s
-  })
-}
-
-const pasteComponent = mode => {
-  store.update(s => {
-    if (!s.componentToPaste) return s
-
-    const componentToPaste = cloneDeep(s.componentToPaste)
-    generateNewIdsForComponent(componentToPaste)
-    delete componentToPaste._cutId
-
-    if (mode === "inside") {
-      component._children.push(componentToPaste)
      return s
-    }
+    })
+  }

-    const parent = getParent(s.currentPreviewItem.props, component)
+  const pasteComponent = mode => {
+    store.update(s => {
+      if (!s.componentToPaste) return s

-    const targetIndex = parent._children.indexOf(component)
-    const index = mode === "above" ? targetIndex : targetIndex + 1
-    parent._children.splice(index, 0, cloneDeep(componentToPaste))
+      const componentToPaste = cloneDeep(s.componentToPaste)
+      generateNewIdsForComponent(componentToPaste)
+      delete componentToPaste._cutId

-    saveCurrentPreviewItem(s)
-    selectComponent(s, componentToPaste)
+      if (mode === "inside") {
+        component._children.push(componentToPaste)
+        return s
+      }

-    return s
-  })
-}
+      const parent = getParent(s.currentPreviewItem.props, component)

+      const targetIndex = parent._children.indexOf(component)
+      const index = mode === "above" ? targetIndex : targetIndex + 1
+      parent._children.splice(index, 0, cloneDeep(componentToPaste))
+
+      saveCurrentPreviewItem(s)
+      selectComponent(s, componentToPaste)
+
+      return s
+    })
+  }
 </script>

-<div class="root" on:click|stopPropagation={()  => {}}>
+<div class="root" on:click|stopPropagation={() => {}}>
  <button>
    <MoreIcon />
  </button>
-  <ul class="menu"  bind:this={dropdownEl} on:click={hideDropdown}>
+  <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
    <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
    <li on:click={moveUpComponent}>Move up</li>
    <li on:click={moveDownComponent}>Move down</li>
@ -151,14 +162,20 @@ const pasteComponent = mode => {
    <li on:click={() => storeComponentForCopy(true)}>Cut</li>
    <li on:click={() => storeComponentForCopy(false)}>Copy</li>
    <hr />
-    <li class:disabled={noPaste} on:click={() => pasteComponent("above")}>Paste above</li>
-    <li class:disabled={noPaste} on:click={() => pasteComponent("below")}>Paste below</li>
-    <li class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent("inside")}>Paste inside</li>    
+    <li class:disabled={noPaste} on:click={() => pasteComponent('above')}>
+      Paste above
+    </li>
+    <li class:disabled={noPaste} on:click={() => pasteComponent('below')}>
+      Paste below
+    </li>
+    <li
+      class:disabled={noPaste || noChildrenAllowed}
+      on:click={() => pasteComponent('inside')}>
+      Paste inside
+    </li>
  </ul>
 </div>

-
-
 <ConfirmDialog
  bind:this={confirmDeleteDialog}
  title="Confirm Delete"
@ -167,52 +184,49 @@ const pasteComponent = mode => {
  onOk={deleteComponent} />

 <style>
+  .root {
+    overflow: hidden;
+    z-index: 9;
+  }

-.root {
-  overflow: hidden;
-  z-index:9;
-}
+  .root button {
+    border-style: none;
+    border-radius: 2px;
+    padding: 5px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--button-text);
+    outline: none;
+  }

-.root button {
-  border-style: none;
-  border-radius: 2px;
-  padding: 5px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--button-text);
-  outline: none;
-}
+  .menu {
+    z-index: 100000;
+    overflow: visible;
+    padding: 10px 0;
+  }

-.menu {
-  z-index: 100000;
-  overflow: visible;
-  padding: 10px 0
-}
+  .menu li {
+    border-style: none;
+    background-color: transparent;
+    list-style-type: none;
+    padding: 4px 5px 4px 15px;
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
+  }

-.menu li {
-  border-style: none;
-  background-color: transparent;
-  list-style-type: none;
-  padding: 4px 5px 4px 15px;
-  margin: 0;
-  width: 100%;
-  box-sizing: border-box;
-}
+  .menu li:not(.disabled) {
+    cursor: pointer;
+    color: var(--ink);
+  }

+  .menu li:not(.disabled):hover {
+    color: var(--button-text);
+    background-color: var(--grey-light);
+  }

-.menu li:not(.disabled) {
-  cursor: pointer;
-  color: var(--ink);
-}
-
-.menu li:not(.disabled):hover {
-  color: var(--button-text);
-  background-color: var(--grey-light); 
-}
-
-.disabled {
-  color: var(--grey-dark);
-  cursor: default;
-}
-
-</style>
+  .disabled {
+    color: var(--grey-dark);
+    cursor: default;
+  }
+</style>
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@ -16,7 +16,6 @@
  export let onSelect = () => {}
  export let level = 0

-
  const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
  const get_name = s => (!s ? "" : last(s.split("/")))

@ -43,7 +42,7 @@
        style="padding-left: {level * 20 + 53}px">
        <div>{get_capitalised_name(component._component)}</div>
        <div class="actions">
-          <ComponentDropdownMenu component={component}/>
+          <ComponentDropdownMenu {component} />
        </div>
      </div>

@ -96,5 +95,4 @@
  .item:hover .actions {
    display: block;
  }
-
 </style>
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@ -45,5 +45,4 @@
  .newscreen:hover {
    background: var(--grey-light);
  }
-
 </style>