introduces portal stores concept and adds an org one that handles configs

packages/builder/src/pages/portal/_layout.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { isActive, url } from "@roxi/routify"
+  import { isActive, url, goto } from "@roxi/routify"
   import { onMount } from "svelte"
   import {
     Icon,
@@ -10,15 +10,12 @@
     SideNavigation as Navigation,
     SideNavigationItem as Item,
   } from "@budibase/bbui"
+  import { organisation } from "stores/portal"
+  organisation.init()
 
-  let orgName, orgLogo, onBoardingProgress, user
+  let onBoardingProgress, user
 
   async function getInfo() {
-    // fetch orgInfo
-    orgName = "ACME Inc."
-    orgLogo = "https://via.placeholder.com/150"
-
-    // set onBoardingProgress
     onBoardingProgress = 20
     user = { name: "John Doe" }
   }
@@ -43,8 +40,11 @@
     <div class="nav">
       <div class="branding">
         <div class="name">
-          <img src={orgLogo} alt="Logotype" />
-          <span>{orgName}</span>
+          <img
+            src={$organisation?.logoUrl || "https://via.placeholder.com/50"}
+            alt="Logotype"
+          />
+          <span>{$organisation?.company}</span>
         </div>
         <div class="onboarding">
           <ProgressCircle size="S" value={onBoardingProgress} />
@@ -88,6 +88,7 @@
   }
   .branding {
     display: grid;
+    grid-gap: var(--spacing-s);
     grid-template-columns: auto auto;
     justify-content: space-between;
     align-items: center;
@@ -127,4 +128,8 @@
     width: 32px;
     height: 32px;
   }
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 </style>

packages/builder/src/pages/portal/settings/general.svelte

@@ -3,12 +3,24 @@
     Layout,
     Heading,
     Body,
+    Button,
     Divider,
     Label,
     Input,
     Toggle,
     Dropzone,
   } from "@budibase/bbui"
+  import { organisation } from "stores/portal"
+
+  let company = $organisation?.company
+  let logoUrl = $organisation.logoUrl
+
+  async function saveConfig() {
+    const res = await organisation.save({ ...$organisation, company })
+    console.log(res)
+    await organisation.init()
+    console.log($organisation)
+  }
 </script>
 
 <div class="container">
@@ -29,14 +41,14 @@
       <div class="fields">
         <div class="field">
           <Label>Organization name</Label>
-          <Input />
+          <Input thin bind:value={company} />
         </div>
-        <div class="field">
+        <!-- <div class="field">
           <Label>Logo</Label>
           <div class="file">
             <Dropzone />
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <Divider size="S" />
@@ -46,11 +58,16 @@
         >If you would like to send analytics that help us make Budibase better,
         please let us know below.</Body
       >
+      <div class="fields">
         <div class="field">
           <Label>Send Analytics to Budibase</Label>
           <Toggle text="" />
         </div>
       </div>
+    </div>
+    <div class="save">
+      <Button on:click={saveConfig} cta>Save</Button>
+    </div>
   </Layout>
 </div>
 
@@ -58,6 +75,7 @@
   .fields {
     display: grid;
     grid-gap: var(--spacing-m);
+    margin-top: var(--spacing-xl);
   }
   .field {
     display: grid;
@@ -69,4 +87,7 @@
   .intro {
     display: grid;
   }
+  .save {
+    margin-left: auto;
+  }
 </style>

packages/builder/src/stores/portal/index.js

@@ -0,0 +1 @@
+export { organisation } from "./organisation"

packages/builder/src/stores/portal/organisation.js

@@ -0,0 +1,35 @@
+import { writable } from "svelte/store"
+import api from "builderStore/api"
+
+export function createOrganisationStore() {
+    const { subscribe, set } = writable({})
+  
+    return {
+      subscribe,
+      save: async config => {
+        try {
+          const res = await api.post('/api/admin/configs', { type: 'settings', config})
+          return await res.json()
+        } catch (error) {
+          console.error(error)
+        }
+      },
+      init: async () => {
+        try {
+          const response = await api.get(`/api/admin/configs/settings`)
+          const json = await response.json()
+          set(json)
+          // set(json)
+        } catch (error) {
+          set({
+            platformUrl: '',
+            logoUrl: '',
+            docsUrl: '',
+            company: ''
+          })
+        }
+      },
+    }
+  }
+
+export const organisation = createOrganisationStore()