convert to new ListItem component

2022-06-26 20:46:31 +01:00 · 2022-06-26 20:46:31 +01:00 · d51efb2f70
parent 18782a7425
commit d51efb2f70
9 changed files with 65 additions and 209 deletions
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@ -376,6 +376,8 @@
                class="spectrum-Table-cell"
                class:spectrum-Table-cell--divider={!!schema[field].divider}
                style={cellStyles[field]}
+                on:click={e =>
+                  schema[field].noPropagation && e.stopPropagation()}
              >
                <CellRenderer
                  {customRenderers}
--- a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
@ -12,11 +12,13 @@
    Divider,
    Detail,
    notifications,
+    List,
+    ListItem,
+    StatusLight,
  } from "@budibase/bbui"
-  import UserRow from "./_components/UserRow.svelte"
  import { users, apps, groups } from "stores/portal"
  import { onMount } from "svelte"
-  import GroupAppsRow from "./_components/GroupAppsRow.svelte"
+  import { RoleUtils } from "@budibase/frontend-core"

  export let groupId
  let popoverAnchor
@ -31,7 +33,7 @@
  )
  let app_list = [
    {
-      access: "Developer",
+      access: "ADMIN",
      name: "test app",
      icon: "Anchor",
      color: "blue",
@ -138,24 +140,22 @@
    </Popover>
  </div>

-  <div class="usersTable">
-    {#if group?.users?.length}
+  <List>
+    {#if group?.users.length}
      {#each group.users as user}
-        <div>
-          <UserRow {removeUser} {user} />
-        </div>
+        <ListItem subtitle={user.access} title={user.email} avatar
+          ><Icon
+            on:click={() => removeUser(user._id)}
+            hoverable
+            size="L"
+            name="Close"
+          /></ListItem
+        >
      {/each}
    {:else}
-      <div>
-        <div class="title header text-padding">
-          <Icon name="UserGroup" />
-          <div class="text-padding">
-            <Body size="S">You have no users in this team</Body>
-          </div>
-        </div>
-      </div>
+      <ListItem icon="UserGroup" title="You have no users in this team" />
    {/if}
-  </div>
+  </List>
  <div
    style="flex-direction: column; margin-top: var(--spacing-m)"
    class="title"
@ -167,24 +167,22 @@
    </div>
  </div>

-  <div style="" class="usersTable">
+  <List>
    {#if app_list.length}
      {#each app_list as app}
-        <div>
-          <GroupAppsRow {app} />
-        </div>
+        <ListItem title={app.name} icon={app.icon} iconBackground={app.color}>
+          <div class="title ">
+            <StatusLight color={RoleUtils.getRoleColour(app.access)} />
+            <div style="margin-left: var(--spacing-s);">
+              <Body size="XS">{app.access}</Body>
+            </div>
+          </div>
+        </ListItem>
      {/each}
    {:else}
-      <div>
-        <div class="title header text-padding">
-          <Icon name="UserGroup" />
-          <div class="text-padding">
-            <Body size="S">You have no users in this team</Body>
-          </div>
-        </div>
-      </div>
+      <ListItem icon="UserGroup" title="You have no users in this team" />
    {/if}
-  </div>
+  </List>
 </Layout>

 <style>
@ -230,29 +228,4 @@
  .circle > div {
    padding: calc(1.5 * var(--spacing-xs)) var(--spacing-xs);
  }
-
-  .usersTable {
-    display: grid;
-    grid-template-rows: auto;
-    align-items: center;
-    border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
-    border-left: 1px solid var(--spectrum-alias-border-color-mid);
-    background: var(--spectrum-global-color-gray-50);
-  }
-
-  .usersTable :global(> div) {
-    background: var(--bg-color);
-
-    height: 70px;
-    display: grid;
-    align-items: center;
-    grid-gap: var(--spacing-xl);
-    grid-template-columns: 0.1fr 0.6fr 2fr 0.4fr;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0 var(--spacing-s);
-    border-top: 1px solid var(--spectrum-alias-border-color-mid);
-    border-right: 1px solid var(--spectrum-alias-border-color-mid);
-  }
 </style>
--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupAppsRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/GroupAppsRow.svelte
@ -1,73 +0,0 @@
-<script>
-  import { Icon, Body, StatusLight } from "@budibase/bbui"
-
-  export let app
-</script>
-
-<div class="title">
-  <div class="name app-icon" style="color: {app.icon?.color || ''}">
-    <Icon size="XL" name={app.icon?.name || "Apps"} />
-  </div>
-</div>
-<div class="desktop">
-  <div class="name-content">
-    <Body size="M">{app.name}</Body>
-    <div class="access">
-      <Body size="XS">{app.access}</Body>
-    </div>
-  </div>
-</div>
-<div class="desktop" />
-<div class="apps">
-  <StatusLight purple />
-  <Body size="XS">{app.access}</Body>
-</div>
-
-<style>
-  .name {
-    grid-gap: var(--spacing-xl);
-    grid-template-columns: 75px 75px;
-    align-items: center;
-  }
-  .app-icon {
-    display: flex;
-    margin-left: var(--spacing-xl);
-  }
-
-  .apps {
-    display: flex;
-    align-items: baseline;
-    margin-right: var(--spacing-xl);
-  }
-
-  .access {
-    opacity: 0.5;
-    margin: var(--spacing-xs) 0 0 var(--spacing-m);
-  }
-
-  .name-content {
-    display: flex;
-    align-items: center;
-  }
-  .name {
-    text-decoration: none;
-    overflow: hidden;
-  }
-  .name :global(.spectrum-Heading) {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    margin-left: calc(1.5 * var(--spacing-xl));
-  }
-  .title :global(h1:hover) {
-    color: var(--spectrum-global-color-blue-600);
-    cursor: pointer;
-    transition: color 130ms ease;
-  }
-
-  @media (max-width: 640px) {
-    .desktop {
-      display: none !important;
-    }
-  }
-</style>
--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/UserRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/UserRow.svelte
@ -1,66 +0,0 @@
-<script>
-  import { Icon, Body, Avatar } from "@budibase/bbui"
-
-  export let user
-  export let removeUser
-</script>
-
-<div class="title">
-  <div class="name" style="display: flex; margin-left: var(--spacing-xl)">
-    <div>
-      <Avatar size="L" initials="PC" />
-    </div>
-  </div>
-</div>
-<div class="desktop">
-  <div class="align-email">
-    <Body size="M">{user.email}</Body>
-    <div class="text">
-      <Body size="XS">{user.access}</Body>
-    </div>
-  </div>
-</div>
-<div class="desktop" />
-<div>
-  <Icon on:click={() => removeUser(user._id)} hoverable size="L" name="Close" />
-</div>
-
-<style>
-  .name {
-    grid-gap: var(--spacing-xl);
-    grid-template-columns: 75px 75px;
-    align-items: center;
-  }
-
-  .text {
-    opacity: 0.5;
-    margin: var(--spacing-xs) 0 0 var(--spacing-m);
-  }
-
-  .align-email {
-    display: flex;
-    align-items: center;
-  }
-
-  .name {
-    text-decoration: none;
-    overflow: hidden;
-  }
-  .name :global(.spectrum-Heading) {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    margin-left: calc(1.5 * var(--spacing-xl));
-  }
-  .title :global(h1:hover) {
-    color: var(--spectrum-global-color-blue-600);
-    cursor: pointer;
-    transition: color 130ms ease;
-  }
-
-  @media (max-width: 640px) {
-    .desktop {
-      display: none !important;
-    }
-  }
-</style>
--- a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
@ -43,7 +43,6 @@
  onMount(async () => {
    try {
      await groups.actions.init()
-      console.log($groups)
    } catch (error) {
      notifications.error("Error getting User groups")
    }
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
@ -1,7 +1,6 @@
 <script>
  import { Icon, Body } from "@budibase/bbui"
  export let value
-  $: console.log(value)
 </script>

 <div class="align">
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/NameTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/NameTableRenderer.svelte
@ -1,14 +1,21 @@
 <script>
  import { Avatar } from "@budibase/bbui"
+
  export let value
 </script>

 <div class="align">
-  {#if value?.name}
+  {#if value}
    <div class="spacing">
-      <Avatar size="L" initials="PC" />
+      <Avatar
+        size="L"
+        initials={value
+          .split(" ")
+          .map(x => x[0])
+          .join("")}
+      />
    </div>
-    {value.name}
+    {value}
  {:else}
    <div class="text">Invite pending...</div>
  {/if}
@ -17,6 +24,7 @@
 <style>
  .align {
    display: flex;
+    align-items: center;
  }

  .spacing {
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
@ -2,18 +2,25 @@
  import { Select } from "@budibase/bbui"

  const options = [
-    { label: "App User", value: true },
-    { label: "Developer", value: false },
-    { label: "Admin", value: false },
+    { label: "App User", value: "appUser" },
+    { label: "Developer", value: "developer" },
+    { label: "Admin", value: "admin" },
  ]
 </script>

 <div class="align">
-  <Select {options} />
+  <Select
+    on:click={e => e.stopPropagation()}
+    value={"Admin"}
+    quiet
+    {options}
+    placeholder="Admin"
+  />
 </div>

 <style>
  .align {
    display: flex;
+    z-index: 1000;
  }
 </style>
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -19,16 +19,20 @@
  import NameTableRenderer from "./_components/NameTableRenderer.svelte"
  import SettingsTableRenderer from "./_components/SettingsTableRenderer.svelte"
  import RoleTableRenderer from "./_components/RoleTableRenderer.svelte"
+  import { goto } from "@roxi/routify"

  const schema = {
    name: {},
    email: {},
-    role: {},
-    userGroups: { displayName: "User groups" },
+    role: { noPropagation: true, sortable: false },
+    userGroups: { sortable: false, displayName: "User groups" },
    apps: {},
-    settings: { width: "50px", displayName: "", align: "Right" },
-    // access: {},
-    // group: {}
+    settings: {
+      sortable: false,
+      width: "50px",
+      displayName: "",
+      align: "Right",
+    },
  }

  const accessTypes = [
@ -71,6 +75,7 @@
    })
    return {
      ...user,
+      name: user.firstName ? user.firstName + " " + user.lastName : "",
      userGroups,
    }
  })
@ -118,17 +123,19 @@
      <Button icon="Import" primary>Import Users</Button>
    </ButtonGroup>
    <Table
+      on:click={({ detail }) => $goto(`./${detail._id}`)}
      {schema}
      data={enrichedUsers}
      allowEditColumns={false}
      allowEditRows={false}
-      allowSelectRows={false}
+      allowSelectRows={true}
      showHeaderBorder={false}
      customRenderers={[
        { column: "userGroups", component: GroupsTableRenderer },
        { column: "apps", component: AppsTableRenderer },
        { column: "name", component: NameTableRenderer },
        { column: "settings", component: SettingsTableRenderer },
+        { column: "role", component: RoleTableRenderer },
      ]}
    />
  </Layout>