MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added basic grouping to automations side panel

This commit is contained in:
Dean 2024-07-02 11:05:35 +01:00
parent 7bd6615144
commit 199d597786
1 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import CreateAutomationModal from "./CreateAutomationModal.svelte" import CreateAutomationModal from "./CreateAutomationModal.svelte"
import { Modal, notifications, Layout } from "@budibase/bbui" import { Modal, notifications, Layout, Icon } from "@budibase/bbui"
import NavHeader from "components/common/NavHeader.svelte" import NavHeader from "components/common/NavHeader.svelte"
import { onMount } from "svelte" import { onMount } from "svelte"
import { import {
@ -30,6 +30,18 @@
return lowerA > lowerB ? 1 : -1 return lowerA > lowerB ? 1 : -1
}) })
$: groupedAutomations = filteredAutomations.reduce((acc, auto) => {
acc[auto.definition.trigger.event] = acc[auto.definition.trigger.event] || {
icon: auto.definition.trigger.icon,
name: auto.definition.trigger.name,
entries: [],
}
acc[auto.definition.trigger.event].entries.push(auto)
return acc
}, {})
$: console.log("grouped ", Object.entries(groupedAutomations))
$: showNoResults = searchString && !filteredAutomations.length $: showNoResults = searchString && !filteredAutomations.length
onMount(async () => { onMount(async () => {
@ -55,16 +67,25 @@
/> />
</div> </div>
<div class="side-bar-nav"> <div class="side-bar-nav">
{#each filteredAutomations as automation} {#each Object.values(groupedAutomations || {}) as triggerGroup}
<NavItem <div class="nav-group">
text={automation.name} <div class="nav-group-header" title={triggerGroup?.name.toUpperCase()}>
selected={automation._id === selectedAutomationId} {triggerGroup?.name.toUpperCase()}
on:click={() => selectAutomation(automation._id)} </div>
selectedBy={$userSelectedResourceMap[automation._id]} {#each triggerGroup.entries as automation}
disabled={automation.disabled} <NavItem
> icon={triggerGroup.icon}
<EditAutomationPopover {automation} /> iconColor={"var(--spectrum-global-color-gray-900)"}
</NavItem> text={automation.name}
selected={automation._id === selectedAutomationId}
on:click={() => selectAutomation(automation._id)}
selectedBy={$userSelectedResourceMap[automation._id]}
disabled={automation.disabled}
>
<EditAutomationPopover {automation} />
</NavItem>
{/each}
</div>
{/each} {/each}
{#if showNoResults} {#if showNoResults}
@ -82,6 +103,17 @@
</Modal> </Modal>
<style> <style>
.nav-group {
padding-top: var(--spacing-l);
}
.nav-group-header {
color: var(--spectrum-global-color-gray-600);
padding: 0px calc(var(--spacing-l) + 4px);
padding-bottom: var(--spacing-l);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.side-bar { .side-bar {
flex: 0 0 260px; flex: 0 0 260px;
display: flex; display: flex;
@ -104,7 +136,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: var(--spacing-l); gap: var(--spacing-l);
padding: 0 var(--spacing-l); padding: 0 calc(var(--spacing-l) + 4px);
} }
.side-bar-nav { .side-bar-nav {
flex: 1 1 auto; flex: 1 1 auto;