119 lines
2.9 KiB
Svelte
119 lines
2.9 KiB
Svelte
<script>
|
|
import CreateAutomationModal from "./CreateAutomationModal.svelte"
|
|
import { Modal, notifications, Layout } from "@budibase/bbui"
|
|
import NavHeader from "components/common/NavHeader.svelte"
|
|
import { onMount } from "svelte"
|
|
import {
|
|
automationStore,
|
|
selectedAutomation,
|
|
userSelectedResourceMap,
|
|
} from "stores/builder"
|
|
import NavItem from "components/common/NavItem.svelte"
|
|
import EditAutomationPopover from "./EditAutomationPopover.svelte"
|
|
|
|
export let modal
|
|
export let webhookModal
|
|
let searchString
|
|
|
|
$: selectedAutomationId = $selectedAutomation?._id
|
|
|
|
$: filteredAutomations = $automationStore.automations
|
|
.filter(automation => {
|
|
return (
|
|
!searchString ||
|
|
automation.name.toLowerCase().includes(searchString.toLowerCase())
|
|
)
|
|
})
|
|
.sort((a, b) => {
|
|
const lowerA = a.name.toLowerCase()
|
|
const lowerB = b.name.toLowerCase()
|
|
return lowerA > lowerB ? 1 : -1
|
|
})
|
|
|
|
$: showNoResults = searchString && !filteredAutomations.length
|
|
|
|
onMount(async () => {
|
|
try {
|
|
await automationStore.actions.fetch()
|
|
} catch (error) {
|
|
notifications.error("Error getting automations list")
|
|
}
|
|
})
|
|
|
|
function selectAutomation(id) {
|
|
automationStore.actions.select(id)
|
|
}
|
|
</script>
|
|
|
|
<div class="side-bar">
|
|
<div class="side-bar-controls">
|
|
<NavHeader
|
|
title="Automations"
|
|
placeholder="Search for automations"
|
|
bind:value={searchString}
|
|
onAdd={() => modal.show()}
|
|
/>
|
|
</div>
|
|
<div class="side-bar-nav">
|
|
{#each filteredAutomations as automation}
|
|
<NavItem
|
|
text={automation.name}
|
|
selected={automation._id === selectedAutomationId}
|
|
on:click={() => selectAutomation(automation._id)}
|
|
selectedBy={$userSelectedResourceMap[automation._id]}
|
|
disabled={automation.disabled}
|
|
>
|
|
<EditAutomationPopover {automation} />
|
|
</NavItem>
|
|
{/each}
|
|
|
|
{#if showNoResults}
|
|
<Layout paddingY="none" paddingX="L">
|
|
<div class="no-results">
|
|
There aren't any automations matching that name
|
|
</div>
|
|
</Layout>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<Modal bind:this={modal}>
|
|
<CreateAutomationModal {webhookModal} />
|
|
</Modal>
|
|
|
|
<style>
|
|
.side-bar {
|
|
flex: 0 0 260px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
border-right: var(--border-light);
|
|
background: var(--spectrum-global-color-gray-100);
|
|
overflow: hidden;
|
|
transition: margin-left 300ms ease-out;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.side-bar {
|
|
margin-left: -262px;
|
|
}
|
|
}
|
|
|
|
.side-bar-controls {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: var(--spacing-l);
|
|
padding: 0 var(--spacing-l);
|
|
}
|
|
.side-bar-nav {
|
|
flex: 1 1 auto;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.no-results {
|
|
color: var(--spectrum-global-color-gray-600);
|
|
}
|
|
</style>
|