Add group icons to access tile and reduce API calls
This commit is contained in:
parent
d30353326b
commit
3479176021
|
@ -23,7 +23,7 @@
|
||||||
import AccessTab from "../_components/AccessTab.svelte"
|
import AccessTab from "../_components/AccessTab.svelte"
|
||||||
import { API } from "api"
|
import { API } from "api"
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
import { apps, auth } from "stores/portal"
|
import { apps, auth, groups } from "stores/portal"
|
||||||
import analytics, { Events, EventSource } from "analytics"
|
import analytics, { Events, EventSource } from "analytics"
|
||||||
import { AppStatus } from "constants"
|
import { AppStatus } from "constants"
|
||||||
import AppLockModal from "components/common/AppLockModal.svelte"
|
import AppLockModal from "components/common/AppLockModal.svelte"
|
||||||
|
@ -192,6 +192,7 @@
|
||||||
try {
|
try {
|
||||||
await API.syncApp(application)
|
await API.syncApp(application)
|
||||||
deployments = await fetchDeployments()
|
deployments = await fetchDeployments()
|
||||||
|
await groups.actions.init()
|
||||||
if (!apps.length) {
|
if (!apps.length) {
|
||||||
await apps.load()
|
await apps.load()
|
||||||
}
|
}
|
||||||
|
|
|
@ -78,8 +78,6 @@
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
try {
|
try {
|
||||||
await groups.actions.init()
|
|
||||||
await apps.load()
|
|
||||||
await roles.fetch()
|
await roles.fetch()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
notifications.error(error)
|
notifications.error(error)
|
||||||
|
|
|
@ -5,10 +5,11 @@
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
import clientPackage from "@budibase/client/package.json"
|
import clientPackage from "@budibase/client/package.json"
|
||||||
import { processStringSync } from "@budibase/string-templates"
|
import { processStringSync } from "@budibase/string-templates"
|
||||||
import { users, auth, apps } from "stores/portal"
|
import { users, auth, apps, groups } from "stores/portal"
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
import { fetchData } from "@budibase/frontend-core"
|
import { fetchData } from "@budibase/frontend-core"
|
||||||
import { API } from "api"
|
import { API } from "api"
|
||||||
|
import GroupIcon from "../../manage/groups/_components/GroupIcon.svelte"
|
||||||
|
|
||||||
export let app
|
export let app
|
||||||
export let deployments
|
export let deployments
|
||||||
|
@ -40,6 +41,13 @@
|
||||||
appId: apps.getProdAppID(app.devId),
|
appId: apps.getProdAppID(app.devId),
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
$: prodAppId = apps.getProdAppID(app.devId)
|
||||||
|
$: appGroups = $groups.filter(group => {
|
||||||
|
if (!group.roles) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return groups.actions.getGroupAppIds(group).includes(prodAppId)
|
||||||
|
})
|
||||||
|
|
||||||
const unpublishApp = () => {
|
const unpublishApp = () => {
|
||||||
dispatch("unpublish", app)
|
dispatch("unpublish", app)
|
||||||
|
@ -156,30 +164,45 @@
|
||||||
}}
|
}}
|
||||||
dataCy={"access"}
|
dataCy={"access"}
|
||||||
>
|
>
|
||||||
<div class="last-edited-content">
|
{#if appUsers.length || appGroups.length}
|
||||||
{#if appUsers.length}
|
<Layout noPadding gap="S">
|
||||||
<Layout noPadding gap="S">
|
<div class="access-tab-content">
|
||||||
<div class="users-tab">
|
{#if appUsers.length}
|
||||||
{#each appUsers.slice(0, 4) as user}
|
<div class="users">
|
||||||
<Avatar size="M" initials={getInitials(user)} />
|
<div class="list">
|
||||||
{/each}
|
{#each appUsers.slice(0, 4) as user}
|
||||||
</div>
|
<Avatar size="M" initials={getInitials(user)} />
|
||||||
|
{/each}
|
||||||
<div class="users-text">
|
</div>
|
||||||
{appUsers.length}
|
<div class="text">
|
||||||
{appUsers.length > 1 ? `users have` : `user has`} access to this
|
{appUsers.length}
|
||||||
app
|
{appUsers.length > 1 ? "users" : "user"} assigned
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</div>
|
||||||
{:else}
|
{/if}
|
||||||
<Layout noPadding gap="S">
|
{#if appGroups.length}
|
||||||
<Body>No users</Body>
|
<div class="groups">
|
||||||
<div class="users-text">
|
<div class="list">
|
||||||
No users have been assigned to this app
|
{#each appGroups.slice(0, 4) as group}
|
||||||
</div>
|
<GroupIcon {group} />
|
||||||
</Layout>
|
{/each}
|
||||||
{/if}
|
</div>
|
||||||
</div>
|
<div class="text">
|
||||||
|
{appGroups.length} user
|
||||||
|
{appGroups.length > 1 ? "groups" : "group"} assigned
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
{:else}
|
||||||
|
<Layout noPadding gap="S">
|
||||||
|
<Body>No users</Body>
|
||||||
|
<div class="users-text">
|
||||||
|
No users have been assigned to this app
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
{/if}
|
||||||
</DashCard>
|
</DashCard>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
@ -236,14 +259,26 @@
|
||||||
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
.users-tab {
|
.access-tab-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--spacing-s);
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--spacing-xl);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.access-tab-content > * {
|
||||||
|
flex: 1 1 0;
|
||||||
|
}
|
||||||
|
.access-tab-content .list {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.access-tab-content .text {
|
||||||
|
color: var(--spectrum-global-color-gray-600);
|
||||||
|
margin-top: var(--spacing-s);
|
||||||
}
|
}
|
||||||
|
|
||||||
.users-text {
|
|
||||||
color: var(--spectrum-global-color-gray-600);
|
|
||||||
}
|
|
||||||
.overview-tab .bottom,
|
.overview-tab .bottom,
|
||||||
.automation-metrics {
|
.automation-metrics {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
Loading…
Reference in New Issue