From d6483e8d9266c39a649ce3ff8fd2f1cd599d79ca Mon Sep 17 00:00:00 2001 From: NEOLPAR Date: Mon, 11 Jul 2022 15:12:45 +0100 Subject: [PATCH] filtering apps with user groups, added clear button in pickerdropdown component --- .../bbui/src/Form/Core/PickerDropdown.svelte | 188 +++++++++++------- packages/bbui/src/Form/PickerDropdown.svelte | 6 +- .../apps/_components/AcessFilter.svelte | 43 ++++ .../pages/builder/portal/apps/index.svelte | 17 +- 4 files changed, 177 insertions(+), 77 deletions(-) create mode 100644 packages/builder/src/pages/builder/portal/apps/_components/AcessFilter.svelte diff --git a/packages/bbui/src/Form/Core/PickerDropdown.svelte b/packages/bbui/src/Form/Core/PickerDropdown.svelte index 6c4709f0b7..863403ee0c 100644 --- a/packages/bbui/src/Form/Core/PickerDropdown.svelte +++ b/packages/bbui/src/Form/Core/PickerDropdown.svelte @@ -10,6 +10,7 @@ import Detail from "../../Typography/Detail.svelte" export let primaryLabel = "" + export let primaryValue = null export let id = null export let placeholder = "Choose an option or type" export let disabled = false @@ -73,6 +74,11 @@ primaryOpen = false } + const onClearPrimary = () => { + dispatch("pickprimary", null) + primaryOpen = false + } + const onPickSecondary = newValue => { dispatch("picksecondary", newValue) secondaryOpen = false @@ -123,7 +129,7 @@ class:is-invalid={!!error} class:is-disabled={disabled} class:is-focused={focus} - style="width: 70%" + class:is-full-width={!secondaryOptions.length} > {#if iconData} + {#if primaryValue} + + {/if} {#if primaryOpen}
{/if} -
- - {#if secondaryOpen} -
(secondaryOpen = false)} - transition:fly|local={{ y: -20, duration: 200 }} - class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" - style="width: 30%" - > -
    - {#each secondaryOptions as option, idx} -
  • - onPickSecondary(getSecondaryOptionValue(option, idx))} - > - {#if getSecondaryOptionColour(option, idx)} - - - - {/if} + {#if secondaryFieldIcon} + + + + {:else if secondaryFieldColour} + + + + {/if} - - {getSecondaryOptionLabel(option, idx)} - -
    (secondaryOpen = false)} + transition:fly|local={{ y: -20, duration: 200 }} + class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" + style="width: 30%" + > +
      + {#each secondaryOptions as option, idx} +
    • + onPickSecondary(getSecondaryOptionValue(option, idx))} > - - -
    • - {/each} -
    -
    - {/if} -
+ {#if getSecondaryOptionColour(option, idx)} + + + + {/if} + + + {getSecondaryOptionLabel(option, idx)} + + + + {/each} + +
+ {/if} + + {/if} diff --git a/packages/bbui/src/Form/PickerDropdown.svelte b/packages/bbui/src/Form/PickerDropdown.svelte index eec5b2823b..4ffb8248d0 100644 --- a/packages/bbui/src/Form/PickerDropdown.svelte +++ b/packages/bbui/src/Form/PickerDropdown.svelte @@ -71,9 +71,9 @@ } const onPickPrimary = e => { - primaryLabel = e.detail.label - primaryValue = e.detail.value - dispatch("pickprimary", e.detail.value) + primaryLabel = e?.detail?.label || null + primaryValue = e?.detail?.value || null + dispatch("pickprimary", e?.detail?.value || {}) } const onPickSecondary = e => { diff --git a/packages/builder/src/pages/builder/portal/apps/_components/AcessFilter.svelte b/packages/builder/src/pages/builder/portal/apps/_components/AcessFilter.svelte new file mode 100644 index 0000000000..d0662e7b41 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/apps/_components/AcessFilter.svelte @@ -0,0 +1,43 @@ + + + diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index de5ad178cb..7eee36f2b6 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -20,12 +20,13 @@ import { store, automationStore } from "builderStore" import { API } from "api" import { onMount } from "svelte" - import { apps, auth, admin, templates } from "stores/portal" + import { apps, auth, admin, templates, groups } from "stores/portal" import download from "downloadjs" import { goto } from "@roxi/routify" import AppRow from "components/start/AppRow.svelte" import { AppStatus } from "constants" import Logo from "assets/bb-space-man.svg" + import AccessFilter from "./_components/AcessFilter.svelte" let sortBy = "name" let template @@ -39,6 +40,7 @@ let cloud = $admin.cloud let creatingFromTemplate = false let automationErrors + let accessFilterList = null const resolveWelcomeMessage = (auth, apps) => { const userWelcome = auth?.user?.firstName @@ -56,8 +58,10 @@ : "Start from scratch" $: enrichedApps = enrichApps($apps, $auth.user, sortBy) - $: filteredApps = enrichedApps.filter(app => - app?.name?.toLowerCase().includes(searchTerm.toLowerCase()) + $: filteredApps = enrichedApps.filter( + app => + app?.name?.toLowerCase().includes(searchTerm.toLowerCase()) && + (accessFilterList !== null ? accessFilterList.includes(app?.appId) : true) ) $: lockedApps = filteredApps.filter(app => app?.lockedYou || app?.lockedOther) @@ -202,6 +206,10 @@ $goto(`../../app/${app.devId}`) } + const accessFilterAction = accessFilter => { + accessFilterList = accessFilter.detail + } + function createAppFromTemplateUrl(templateKey) { // validate the template key just to make sure const templateParts = templateKey.split("/") @@ -347,6 +355,9 @@ {/if}
+ {#if $groups.length} + + {/if}