Fix stale data in group details page, fix role colour in group app access

4 years ago · 451c55ae67
1 changed files with 90 additions and 82 deletions
--- a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
@ -18,9 +18,10 @@
  import { users, apps, groups } from "stores/portal"
  import { onMount } from "svelte"
  import { RoleUtils } from "@budibase/frontend-core"
-  import { roles } from "../../../../../stores/backend"
+  import { roles } from "stores/backend"

  export let groupId
+
  let popoverAnchor
  let popover
  let searchTerm = ""
@ -28,6 +29,7 @@
  let prevSearch = undefined,
    search = undefined
  let pageInfo = createPaginationStore()
+  let loaded = false

  $: page = $pageInfo.page
  $: fetchUsers(page, search)
@ -113,98 +115,104 @@

  onMount(async () => {
    try {
-      await groups.actions.init()
-      await apps.load()
-      await roles.fetch()
+      await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
+      loaded = true
    } catch (error) {
-      notifications.error("Error fetching User Group data")
+      notifications.error("Error fetching user group data")
    }
  })
 </script>

-<Layout noPadding>
-  <div>
-    <ActionButton on:click={() => $goto("../groups")} size="S" icon="ArrowLeft">
-      Back
-    </ActionButton>
-  </div>
-  <div class="header">
-    <div class="title">
-      <div style="background: {group?.color};" class="circle">
-        <div>
-          <Icon size="M" name={group?.icon} />
+{#if loaded}
+  <Layout noPadding>
+    <div>
+      <ActionButton
+        on:click={() => $goto("../groups")}
+        size="S"
+        icon="ArrowLeft"
+      >
+        Back
+      </ActionButton>
+    </div>
+    <div class="header">
+      <div class="title">
+        <div style="background: {group?.color};" class="circle">
+          <div>
+            <Icon size="M" name={group?.icon} />
+          </div>
+        </div>
+        <div class="text-padding">
+          <Heading>{group?.name}</Heading>
        </div>
      </div>
-      <div class="text-padding">
-        <Heading>{group?.name}</Heading>
+      <div bind:this={popoverAnchor}>
+        <Button on:click={popover.show()} icon="UserAdd" cta>Add User</Button>
      </div>
+      <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
+        <UserGroupPicker
+          key={"email"}
+          title={"User"}
+          bind:searchTerm
+          bind:selected={selectedUsers}
+          bind:filtered
+          {addAll}
+          select={selectUser}
+        />
+      </Popover>
    </div>
-    <div bind:this={popoverAnchor}>
-      <Button on:click={popover.show()} icon="UserAdd" cta>Add User</Button>
-    </div>
-    <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
-      <UserGroupPicker
-        key={"email"}
-        title={"User"}
-        bind:searchTerm
-        bind:selected={selectedUsers}
-        bind:filtered
-        {addAll}
-        select={selectUser}
-      />
-    </Popover>
-  </div>
-
-  <List>
-    {#if group?.users.length}
-      {#each group.users as user}
-        <ListItem title={user?.email} avatar
-          ><Icon
-            on:click={() => removeUser(user?._id)}
-            hoverable
-            size="L"
-            name="Close"
-          /></ListItem
+
+    <List>
+      {#if group?.users.length}
+        {#each group.users as user}
+          <ListItem title={user?.email} avatar
+            ><Icon
+              on:click={() => removeUser(user?._id)}
+              hoverable
+              size="L"
+              name="Close"
+            /></ListItem
+          >
+        {/each}
+      {:else}
+        <ListItem icon="UserGroup" title="You have no users in this team" />
+      {/if}
+    </List>
+    <div
+      style="flex-direction: column; margin-top: var(--spacing-m)"
+      class="title"
+    >
+      <Heading weight="light" size="XS">Apps</Heading>
+      <div style="margin-top: var(--spacing-xs)">
+        <Body size="S"
+          >Manage apps that this User group has been assigned to</Body
        >
-      {/each}
-    {:else}
-      <ListItem icon="UserGroup" title="You have no users in this team" />
-    {/if}
-  </List>
-  <div
-    style="flex-direction: column; margin-top: var(--spacing-m)"
-    class="title"
-  >
-    <Heading weight="light" size="XS">Apps</Heading>
-    <div style="margin-top: var(--spacing-xs)">
-      <Body size="S">Manage apps that this User group has been assigned to</Body
-      >
+      </div>
    </div>
-  </div>
-
-  <List>
-    {#if groupApps.length}
-      {#each groupApps as app}
-        <ListItem
-          title={app.name}
-          icon={app?.icon?.name || "Apps"}
-          iconBackground={app?.icon?.color || ""}
-        >
-          <div class="title ">
-            <StatusLight
-              square
-              color={RoleUtils.getRoleColour(group.roles[app.appId])}
-            >
-              {getRoleLabel(app.appId)}
-            </StatusLight>
-          </div>
-        </ListItem>
-      {/each}
-    {:else}
-      <ListItem icon="UserGroup" title="No apps" />
-    {/if}
-  </List>
-</Layout>
+
+    <List>
+      {#if groupApps.length}
+        {#each groupApps as app}
+          <ListItem
+            title={app.name}
+            icon={app?.icon?.name || "Apps"}
+            iconBackground={app?.icon?.color || ""}
+          >
+            <div class="title ">
+              <StatusLight
+                square
+                color={RoleUtils.getRoleColour(group.roles[`app_${app.appId}`])}
+              >
+                {getRoleLabel(app.appId)}
+              </StatusLight>
+            </div>
+          </ListItem>
+        {/each}
+      {:else}
+        <ListItem icon="UserGroup" title="No apps" />
+      {/if}
+    </List>
+  </Layout>
+{/if}

 <style>
  .text-padding {