events panel work - backup

6 years ago · 2aae64521f
5 changed files with 147 additions and 10 deletions
--- a/packages/builder/src/components/common/Icons/CloseCircle.svelte
+++ b/packages/builder/src/components/common/Icons/CloseCircle.svelte
@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    fill="currentColor"
+    d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
+    10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12
+    13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" />
+</svg>
--- a/packages/builder/src/components/common/Icons/index.js
+++ b/packages/builder/src/components/common/Icons/index.js
@ -32,3 +32,4 @@ export { default as TwitterIcon } from "./Twitter.svelte"
 export { default as InfoIcon } from "./Info.svelte"
 export { default as CloseIcon } from "./Close.svelte"
 export { default as MoreIcon } from "./More.svelte"
+export { default as CloseCircleIcon } from "./CloseCircle.svelte"
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@ -7,7 +7,7 @@
    Heading,
    DropdownMenu,
  } from "@budibase/bbui"
-  import { AddIcon } from "components/common/Icons/"
+  import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
  import actionTypes from "./actions"
  import { createEventDispatcher } from "svelte"
@ -95,9 +95,11 @@
      {#each actions as action, index}
        <div class="action-container">
          <div on:click={selectAction(action)}>
-            <Body size="medium">
+            <p
+              class="bb-body bb-body--small bb-body--color-dark"
+              style="margin: var(--spacing-s) 0;">
              {index + 1}. {action[EVENT_TYPE_MEMBER_NAME]}
-            </Body>
+            </p>
          </div>
          {#if action === selectedAction}
            <div class="selected-action-container">
@ -154,16 +156,25 @@
  .actions-container {
    flex: 1;
    min-height: 0px;
-    padding: var(--spacing-xl);
-    padding-bottom: var(--spacing-m);
-    padding-top: var(--spacing-m);
+    padding-bottom: var(--spacing-s);
+    padding-top: 0;
    border: var(--border-light);
    border-width: 0 0 1px 0;
+    overflow-y: auto;
  }

  .action-container {
    border: var(--border-light);
    border-width: 1px 0 0 0;
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .selected-action-container {
+    padding-bottom: var(--spacing-s);
+    padding-top: var(--spacing-s);
  }

  .delete-action-button {
@ -191,4 +202,8 @@
  .footer > a:hover {
    color: var(--blue);
  }
+
+  .rotate :global(svg) {
+    transform: rotate(-90deg);
+  }
 </style>
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte
@ -5,12 +5,25 @@
  export let parameters
 </script>

-<div>
+<div class="root">
  <Label size="m" color="dark">Screen</Label>
-  <Select outline bind:value={parameters.url}>
+  <Select secondary bind:value={parameters.url}>
    <option value="" />
    {#each $store.screens as screen}
-      <option value={screen.url}>{screen.props._instanceName}</option>
+      <option value={screen.route}>{screen.props._instanceName}</option>
    {/each}
  </Select>
 </div>
+
+<style>
+  .root {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }
+
+  .root :global(.relative) {
+    flex: 1;
+    margin-left: var(--spacing-l);
+  }
+</style>
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRecord.svelte
@ -1,5 +1,101 @@
 <script>
+  import { Select, Label, TextButton } from "@budibase/bbui"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import { CloseCircleIcon } from "components/common/icons"

+  export let parameters
+
+  const emptyField = () => ({ name: "", value: "" })
+
+  $: fields = Object.keys(parameters.fields || emptyField()).map(name => ({
+    name,
+    value: (parameters.fields && parameters.fields[name]) || "",
+  }))
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    models: $backendUiStore.models,
+  })
+
+  const addField = () => {
+    const newFields = fields.filter(f => f.name)
+    newFields.push(emptyField())
+    fields = newFields
+  }
+
+  const bindablePropertyName = prop => {
+    if (prop.type === "instance") return prop.instance._instanceName
+    return instance.readableBinding.split(".")[
+      instance.readableBinding.lastIndexOf(".")
+    ]
+  }
+
+  let fieldNames
+  $: {
+    fieldNames =
+      parameters.model &&
+      Object.keys(
+        $backendUiStore.models.find(model => model._id === parameters.model)
+          .schema
+      )
+  }
 </script>

-<div>Update Record</div>
+<div class="root">
+  <Label size="m" color="dark">Table</Label>
+  <Select secondary bind:value={parameters.model}>
+    <option value="" />
+    {#each $backendUiStore.models as model}
+      <option value={model._id}>{model.name}</option>
+    {/each}
+  </Select>
+
+  {#if parameters.model && fields}
+    {#each fields as field}
+      <Label size="m" color="dark">Field</Label>
+      <Select secondary bind:value={field.name}>
+        <option value="" />
+        {#each fieldNames as fieldName}
+          <option value={fieldName}>{fieldName}</option>
+        {/each}
+      </Select>
+      <Label size="m" color="dark">Value</Label>
+      <Select secondary bind:value={field.value}>
+        <option value="" />
+        {#each bindableProperties as bindableProp}
+          <option value={bindableProp.runtimeBinding}>
+            {bindablePropertyName(bindableProp)}
+          </option>
+        {/each}
+      </Select>
+      <div class="remove-field-container">
+        <TextButton text small>
+          <CloseCircleIcon />
+        </TextButton>
+      </div>
+    {/each}
+  {/if}
+
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-s);
+    row-gap: var(--spacing-s);
+    grid-template-columns: auto 1fr auto 1fr auto;
+    align-items: baseline;
+  }
+
+  .root :global(.relative:nth-child(2)) {
+    grid-column-start: 2;
+    grid-column-end: 6;
+  }
+
+  .remove-field-container :global(button) {
+    vertical-align: bottom;
+  }
+</style>