From 482d791b96d087d66cb6a14b37d8dae63eb15aa9 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 19 Jun 2020 09:14:03 +0200
Subject: [PATCH] Sets up tabbed modal for settings

---
 packages/builder/package.json                 |   2 +-
 .../src/components/settings/Link.svelte       |  48 +++++++++
 .../src/components/settings/Modal.svelte      | 102 ++++++++++++++++++
 .../settings/tabs/DangerZone.svelte           |   1 +
 .../components/settings/tabs/General.svelte   |   1 +
 .../settings/tabs/Integrations.svelte         |   1 +
 .../settings/tabs/Permissions.svelte          |   1 +
 .../src/components/settings/tabs/Users.svelte |   1 +
 .../src/components/settings/tabs/index.js     |   5 +
 .../src/pages/[application]/_reset.svelte     |  10 +-
 10 files changed, 164 insertions(+), 8 deletions(-)
 create mode 100644 packages/builder/src/components/settings/Link.svelte
 create mode 100644 packages/builder/src/components/settings/Modal.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/DangerZone.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/General.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/Integrations.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/Permissions.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/Users.svelte
 create mode 100644 packages/builder/src/components/settings/tabs/index.js

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 8fe9ffd494..b5b71eab0a 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.1.1",
+    "@budibase/bbui": "^1.5.0",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
new file mode 100644
index 0000000000..fe2ec26752
--- /dev/null
+++ b/packages/builder/src/components/settings/Link.svelte
@@ -0,0 +1,48 @@
+<script>
+  import Modal from "./Modal.svelte"
+  import { SettingsIcon } from "components/common/Icons/"
+  import { getContext } from "svelte"
+  import { isActive, goto, layout } from "@sveltech/routify"
+
+  // Handle create app modal
+  const { open } = getContext("simple-modal")
+
+  const showSettingsModal = () => {
+    open(
+      Modal,
+      {
+        name: "Placeholder App Name",
+        description: "This is a hardcoded description that needs to change",
+      },
+      {
+        closeButton: false,
+        closeOnEsc: true,
+        styleContent: { padding: 0 },
+        closeOnOuterClick: true,
+      }
+    )
+  }
+</script>
+
+<span class="topnavitemright" on:click={showSettingsModal}>
+  <SettingsIcon />
+</span>
+
+<style>
+  span:first-letter {
+    text-transform: capitalize;
+  }
+  .topnavitemright {
+    cursor: pointer;
+    color: var(--ink-light);
+    margin: 0px 20px 0px 0px;
+    padding-top: 4px;
+    font-weight: 500;
+    font-size: 1rem;
+    height: 100%;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/packages/builder/src/components/settings/Modal.svelte b/packages/builder/src/components/settings/Modal.svelte
new file mode 100644
index 0000000000..bc7898442f
--- /dev/null
+++ b/packages/builder/src/components/settings/Modal.svelte
@@ -0,0 +1,102 @@
+<script>
+  import { General, Permissions, Users, Integrations, DangerZone } from "./tabs"
+
+  import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
+  import { SettingsIcon, CloseIcon } from "components/common/Icons/"
+  import { getContext } from "svelte"
+  import { post } from "builderStore/api"
+
+  const { open, close } = getContext("simple-modal")
+  export let name = ""
+  export let description = ""
+  const tabs = [
+    {
+      title: "General",
+      key: "GENERAL",
+      component: General,
+    },
+    {
+      title: "Permissions",
+      key: "PERMISSIONS",
+      component: Permissions,
+    },
+    {
+      title: "Users",
+      key: "USERS",
+      component: Users,
+    },
+    {
+      title: "Integrations",
+      key: "INTEGRATIONS",
+      component: Integrations,
+    },
+    {
+      title: "Danger Zone",
+      key: "DANGERZONE",
+      component: DangerZone,
+    },
+  ]
+  let value = "GENERAL"
+  $: selectedTab = tabs.find(tab => tab.key === value).component
+</script>
+
+<div class="container">
+  <div class="body">
+    <div class="heading">
+      <span class="icon">
+        <SettingsIcon />
+      </span>
+      <h3>Settings</h3>
+    </div>
+    <Switcher headings={tabs} bind:value>
+      <svelte:component this={selectedTab} />
+    </Switcher>
+  </div>
+  <div class="close-button" on:click={close}>
+    <CloseIcon />
+  </div>
+</div>
+
+<style>
+  .container {
+    position: relative;
+  }
+
+  .close-button {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
+  .close-button :global(svg) {
+    width: 24px;
+    height: 24px;
+  }
+  .heading {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  h3 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: bold;
+  }
+  .icon {
+    display: grid;
+    border-radius: 3px;
+    align-content: center;
+    justify-content: center;
+    margin-right: 12px;
+    height: 20px;
+    width: 20px;
+    padding: 10px;
+    background-color: var(--blue-light);
+  }
+  .body {
+    padding: 40px 40px 80px 40px;
+    display: grid;
+    grid-gap: 20px;
+  }
+</style>
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
new file mode 100644
index 0000000000..5766d97588
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@@ -0,0 +1 @@
+Danger
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
new file mode 100644
index 0000000000..7cc1079673
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -0,0 +1 @@
+General
diff --git a/packages/builder/src/components/settings/tabs/Integrations.svelte b/packages/builder/src/components/settings/tabs/Integrations.svelte
new file mode 100644
index 0000000000..9e932e2e89
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/Integrations.svelte
@@ -0,0 +1 @@
+Integrations
diff --git a/packages/builder/src/components/settings/tabs/Permissions.svelte b/packages/builder/src/components/settings/tabs/Permissions.svelte
new file mode 100644
index 0000000000..ca206fbdda
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/Permissions.svelte
@@ -0,0 +1 @@
+Permissions
diff --git a/packages/builder/src/components/settings/tabs/Users.svelte b/packages/builder/src/components/settings/tabs/Users.svelte
new file mode 100644
index 0000000000..f3d929a074
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/Users.svelte
@@ -0,0 +1 @@
+Users
diff --git a/packages/builder/src/components/settings/tabs/index.js b/packages/builder/src/components/settings/tabs/index.js
new file mode 100644
index 0000000000..b723ca68d3
--- /dev/null
+++ b/packages/builder/src/components/settings/tabs/index.js
@@ -0,0 +1,5 @@
+export { default as General } from './General.svelte';
+export { default as Integrations } from './Integrations.svelte';
+export { default as Permissions } from './Permissions.svelte';
+export { default as Users } from './Users.svelte';
+export { default as DangerZone } from './DangerZone.svelte';
\ No newline at end of file
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 4d2a708f1e..071eeabcd0 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -1,6 +1,7 @@
 <script>
   import Modal from "svelte-simple-modal"
   import { store } from "builderStore"
+  import { getContext } from "svelte"
   import { get } from "builderStore/api"
 
   import { fade } from "svelte/transition"
@@ -8,6 +9,7 @@
 
   import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
   import IconButton from "components/common/IconButton.svelte"
+  import SettingsLink from "components/settings/Link.svelte"
 
   // Get Package and set store
   export let application
@@ -29,7 +31,6 @@
 
 <Modal>
   <div class="root">
-
     <div class="top-nav">
       <div class="topleftnav">
         <button class="home-logo">
@@ -53,12 +54,7 @@
                       hoverColor="var(--secondary75)"/> -->
       </div>
       <div class="toprightnav">
-        <span
-          class:active={$isActive(`/settings`)}
-          class="topnavitemright"
-          on:click={() => $goto(`/settings`)}>
-          <SettingsIcon />
-        </span>
+        <SettingsLink />
         <span
           class:active={false}
           class="topnavitemright"