Add deletion modal and hover on delete icon

5 years ago · fba0975c54
4 changed files with 84 additions and 19 deletions
--- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
@ -3,18 +3,19 @@
  import { store, selectedAccessRole, allScreens } from "builderStore"
  import { cloneDeep } from "lodash/fp"
  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
+  import { onDestroy } from "svelte"

  export let screenNameModal
  export let selectedScreens
  export let modal
  export let screenName
+  export let url
+
  let roleId = $selectedAccessRole || "BASIC"

  let routeError
  let selectedNav
  let createdScreens = []
-  let createLink = true
-
  $: {
    selectedScreens.forEach(screen => {
      createdScreens = [...createdScreens, screen.create()]
@ -24,22 +25,33 @@
  $: blankSelected = selectedScreens.find(x => x.id === "createFromScratch")

  const save = async screens => {
-    screens.forEach(screen => {
-      saveScreens(screen)
-    })
+    for (let screen of screens) {
+      await saveScreens(screen)
+    }

    let navLayout = cloneDeep(
      $store.layouts.find(layout => layout._id === "layout_private_master")
    )
    navLayout.props.navigation = selectedNav
+
+    await store.actions.routing.fetch()
    await store.actions.layouts.save(navLayout)
+    selectedScreens = []
+    screenName = ""
+    url = ""
  }
-
  const saveScreens = async draftScreen => {
-    let route = screenName
-      ? sanitizeUrl(`/${screenName}`)
-      : draftScreen.routing.route
+    let existingScreenCount = $store.screens.filter(
+      s => s.props._instanceName == draftScreen.props._instanceName
+    ).length
+
+    if (existingScreenCount > 0) {
+      let oldUrlArr = draftScreen.routing.route.split("/")
+      oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
+      draftScreen.routing.route = oldUrlArr.join("/")
+    }

+    let route = url ? sanitizeUrl(`${url}`) : draftScreen.routing.route
    if (draftScreen) {
      if (!route) {
        routeError = "URL is required"
@ -53,15 +65,19 @@

      if (routeError) return false

+      if (screenName) {
+        draftScreen.props._instanceName = screenName
+      }
+
      draftScreen.routing.route = route
+
      await store.actions.screens.create(draftScreen)
-      if (createLink) {
+      if (draftScreen.props._instanceName.endsWith("List")) {
        await store.actions.components.links.save(
          draftScreen.routing.route,
-          draftScreen.props._instanceName
+          draftScreen.routing.route.split("/")[1]
        )
      }
-      await store.actions.routing.fetch()
    }
  }

@ -72,6 +88,12 @@
        screen.routing.roleId === roleId
    )
  }
+
+  onDestroy(() => {
+    selectedScreens = []
+    screenName = ""
+    url = ""
+  })
 </script>

 <ModalContent
@ -90,6 +112,7 @@

  <div class="wrapper">
    <div
+      data-cy="left-nav"
      on:click={() => (selectedNav = "Left")}
      class:unselected={selectedNav && selectedNav !== "Left"}
    >
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@ -50,7 +50,7 @@
        toggleScreenSelection(templates.find(t => t.id === blankScreen))}
      class:disabled={autoSelected}
    >
-      <div class="content">
+      <div data-cy="blank-screen" class="content">
        <Body size="S">Blank</Body>
      </div>
      <div style="color: var(--spectrum-global-color-green-600); float: right">
--- a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte
@ -1,19 +1,52 @@
 <script>
  import { ModalContent, Input } from "@budibase/bbui"
+  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
+  import { selectedAccessRole, allScreens } from "builderStore"

  export let modal
  export let navigationSelectionModal
  export let screenName
+  export let url
+
+  let routeError
+  let roleId = $selectedAccessRole || "BASIC"
+
+  const routeChanged = event => {
+    if (!event.detail.startsWith("/")) {
+      url = "/" + event.detail
+    }
+    url = sanitizeUrl(url)
+
+    if (routeExists(url, roleId)) {
+      routeError = "This URL is already taken for this access role"
+    } else {
+      routeError = ""
+    }
+  }
+
+  const routeExists = (url, roleId) => {
+    return $allScreens.some(
+      screen =>
+        screen.routing.route.toLowerCase() === url.toLowerCase() &&
+        screen.routing.roleId === roleId
+    )
+  }
 </script>

 <ModalContent
  size="M"
-  title={"Enter name"}
+  title={"Enter Details"}
  confirmText={"Continue"}
  onCancel={() => modal.show()}
  onConfirm={() => navigationSelectionModal.show()}
  cancelText={"Back"}
-  disabled={!screenName}
+  disabled={!screenName || !url || routeError}
 >
  <Input label="Name" bind:value={screenName} />
+  <Input
+    label="URL"
+    error={routeError}
+    bind:value={url}
+    on:change={routeChanged}
+  />
 </ModalContent>
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@ -34,6 +34,7 @@
  let navigationSelectionModal
  let screenNameModal
  let screenName = ""
+  let url = ""
  let selectedScreens = []

  // Hydrate state from URL params
@ -185,7 +186,7 @@
          <Layout gap="S" justifyItems="center">
            <img class="img-size" alt="logo" src={Logo} />
            <div class="new-screen-text">
-              <Detail size="L">Let's add some life to this screen</Detail>
+              <Detail size="M">Let's add some life to this screen</Detail>
            </div>
            <Button on:click={() => modal.show()} size="M" cta>
              <div class="new-screen-button">
@ -218,13 +219,19 @@
 </Modal>

 <Modal bind:this={screenNameModal}>
-  <ScreenNameModal bind:screenName {modal} {navigationSelectionModal} />
+  <ScreenNameModal
+    bind:screenName
+    bind:url
+    {modal}
+    {navigationSelectionModal}
+  />
 </Modal>
 <Modal bind:this={navigationSelectionModal}>
  <NavigationSelectionModal
-    {screenName}
+    bind:url
+    bind:screenName
    {modal}
-    {selectedScreens}
+    bind:selectedScreens
    {screenNameModal}
  />
 </Modal>
@ -240,6 +247,8 @@
  .new-screen-text {
    width: 160px;
    text-align: center;
+    color: #2c2c2c;
+    font-weight: 600;
  }

  .new-screen-button {