starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-09-10 08:07:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove virtual list

Browse Source
This commit is contained in:
Ruben Fiszel
2022-12-10 16:35:03 +01:00
parent 3a17b1477b
commit f7af61848f
12 changed files with 102 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
-11
View File
@@ -12,7 +12,6 @@
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@leeoniya/ufuzzy": "^0.8.0",
"@redocly/json-to-json-schema": "^0.0.1",
"@sveltejs/svelte-virtual-list": "^3.0.1",
"@types/autosize": "^4.0.1",
"@types/node": "^18.11.9",
"async-mutex": "^0.4.0",
@@ -485,11 +484,6 @@
"vite": "^3.0.0"
}
},
"node_modules/@sveltejs/svelte-virtual-list": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz",
"integrity": "sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ=="
},
"node_modules/@sveltejs/vite-plugin-svelte": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.1.tgz",
@@ -7346,11 +7340,6 @@
"tiny-glob": "^0.2.9"
}
},
"@sveltejs/svelte-virtual-list": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz",
"integrity": "sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ=="
},
"@sveltejs/vite-plugin-svelte": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.1.tgz",
frontend/package.json
+1 -2
View File
@@ -63,7 +63,6 @@
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@leeoniya/ufuzzy": "^0.8.0",
"@redocly/json-to-json-schema": "^0.0.1",
"@sveltejs/svelte-virtual-list": "^3.0.1",
"@types/autosize": "^4.0.1",
"@types/node": "^18.11.9",
"async-mutex": "^0.4.0",
@@ -82,4 +81,4 @@
"svelte-select": "^5.0.0-beta.40",
"vscode-ws-jsonrpc": "^2.0.1"
}
}
}
frontend/src/lib/components/Dropdown.svelte
+75 -101
View File
@@ -1,120 +1,94 @@
<script lang="ts">
import { clickOutside } from '$lib/utils'
import type { DropdownItem } from '$lib/utils'
import { createEventDispatcher } from 'svelte'
import Icon from 'svelte-awesome'
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
import { Button } from './common'
import { Button, Menu } from './common'
let open = false
type Alignment = 'start' | 'end'
type Side = 'top' | 'bottom'
type Placement = `${Side}-${Alignment}`
export let dropdownItems: DropdownItem[]
export let name: string | undefined = undefined
// The dropdown is positioned versus its first relatively positioned partent
// By default, the dropdown is positioned relative to its button
// This can cause the dropdown to be hidden if it is in an overflow-hidden div.
// In that case, set relative to false and control the dropdown positioning from the div
export let relative = true
export let left = true
export let placement: Placement = 'bottom-start'
const dispatch = createEventDispatcher()
function toggle() {
open = !open
}
function handleClickOutsideMenu(event: Event) {
open = false
}
</script>
<div
class="{relative ? 'relative' : ''} {$$props.class}"
use:clickOutside
on:click_outside={handleClickOutsideMenu}
>
<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" on:click={toggle}>
<Menu {placement} let:close>
<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" slot="trigger">
{#if !$$slots.default}
<Icon data={faEllipsisH} scale={1.2} />
{:else}
<slot />
{/if}
</Button>
<div
class="flex flex-col z-50 origin-top-right absolute {left
? 'right-0'
: 'left-0'} mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none {open
? 'visible'
: 'hidden'}"
role="menu"
tabindex="-1"
>
{#if dropdownItems}
{#each dropdownItems as item, i}
{#if item.action}
<button
on:click={(event) => {
if (!item.disabled) {
event.preventDefault()
open = false
item.action && item.action(event)
dispatch('click', { item: item?.eventName })
}
}}
class="block hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30 px-4 py-2 text-sm text-gray-700 text-left{item.separatorTop
? 'border-t'
: ''} {item.separatorBottom ? 'border-b' : ''} {item.type == 'delete'
? 'text-red-500'
: ''}"
role="menuitem"
tabindex="-1"
id="user-menu-item-{name}-{i}}"
disabled={item.disabled}
class:disabled={item.disabled}
>
{#if item.icon}
<Icon
data={item.icon}
scale={0.6}
class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
/>
{/if}
{item.displayName}
</button>
{:else if item.href}
<a
href={item.href}
on:click={() => {
if (!item.disabled) {
open = false
}
}}
class="block px-4 py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
role="menuitem"
tabindex="-1"
id="user-menu-item-{name}-{i}}"
class:disabled={item.disabled}
>
{#if item.icon}
<Icon
data={item.icon}
scale={0.6}
class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
/>
{/if}
{item.displayName}
</a>
{:else}
<span
class="block px-4 py-2 text-sm text-gray-700"
role="menuitem"
tabindex="-1"
id="user-menu-item-{name}-{i}}"
>
{item.displayName}
</span>
{/if}
{/each}
{/if}
</div>
</div>
{#if dropdownItems}
{#each dropdownItems as item, i}
{#if item.action}
<button
on:click={(event) => {
if (!item.disabled) {
event.preventDefault()
close()
item.action && item.action(event)
dispatch('click', { item: item?.eventName })
}
}}
class="block whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30 px-4 py-2 text-sm text-gray-700 text-left{item.separatorTop
? 'border-t'
: ''} {item.separatorBottom ? 'border-b' : ''} {item.type == 'delete'
? 'text-red-500'
: ''}"
role="menuitem"
tabindex="-1"
id="user-menu-item-{name}-{i}}"
disabled={item.disabled}
class:disabled={item.disabled}
>
{#if item.icon}
<Icon
data={item.icon}
scale={0.6}
class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
/>
{/if}
{item.displayName}
</button>
{:else if item.href}
<a
href={item.href}
on:click={() => {
if (!item.disabled) {
close()
}
}}
class="block px-4 py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
role="menuitem"
tabindex="-1"
id="user-menu-item-{name}-{i}}"
class:disabled={item.disabled}
>
{#if item.icon}
<Icon
data={item.icon}
scale={0.6}
class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
/>
{/if}
{item.displayName}
</a>
{:else}
<span
class="block px-4 py-2 text-sm text-gray-700"
role="menuitem"
tabindex="-1"
id="user-menu-item-{name}-{i}}"
>
{item.displayName}
</span>
{/if}
{/each}
{/if}
</Menu>
frontend/src/lib/components/common/menu/Menu.svelte
-1
View File
@@ -51,7 +51,6 @@
<div on:click={() => (show = !show)} class="cursor-pointer hover:bg-gray-100/30">
<slot class="triggerable" name="trigger" />
</div>
{#if show}
<div
class={classNames(
frontend/src/lib/components/common/popup/Popup.svelte
-11
View File
@@ -145,17 +145,6 @@
<div class={innerClasses}>
<slot />
</div>
{#if !disableInstruction && focusableElements?.length}
<div
class="flex justify-center items-center font-semibold
text-xs text-gray-700 p-1 border-x border-b rounded-b bg-gray-100"
>
Use
<Kbd class="!bg-gray-200 !border-gray-300 !px-1 !py-0 !rounded-sm">↑</Kbd>
and
<Kbd class="!bg-gray-200 !border-gray-300 !px-1 !py-0 !rounded-sm">↓</Kbd>
</div>
{/if}
</div>
{/if}
</div>
frontend/src/lib/components/flows/pickers/PickHubScript.svelte
+7 -1
View File
@@ -26,6 +26,7 @@
loadHubScripts()
}
})
const maxItems = 40
</script>
<SearchItems {filter} items={prefilteredItems} bind:filteredItems f={(x) => x.summary} />
@@ -40,7 +41,7 @@
<NoItemFound />
{:else}
<ul class="divide-y divide-gray-200 border rounded-md">
{#each filteredItems as item (item.path)}
{#each filteredItems.slice(0, maxItems) as item (item.path)}
<li class="flex flex-row w-full">
<button
class="p-4 gap-4 flex flex-row grow hover:bg-gray-50 bg-white transition-all items-center"
@@ -81,6 +82,11 @@
{/each}
</ul>
{/if}
{#if filteredItems.length > maxItems}
<div class="text-gray-500 text-sm py-4">
There are more items ({filteredItems.length}) than being displayed. Refine your search.
</div>
{/if}
{:else}
{#each Array(10).fill(0) as _}
<Skeleton layout={[[4], 0.5]} />
frontend/src/lib/components/home/ItemsList.svelte
+12 -28
View File
@@ -1,23 +1,15 @@
<script lang="ts">
import CenteredPage from '$lib/components/CenteredPage.svelte'
import {
AppService,
FlowService,
ListableApp,
Script,
ScriptService,
type Flow,
type OpenFlow
} from '$lib/gen'
import { AppService, FlowService, ListableApp, Script, ScriptService, type Flow } from '$lib/gen'
import { superadmin, userStore, workspaceStore } from '$lib/stores'
import VirtualList from '@sveltejs/svelte-virtual-list'
import { Drawer, Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
import { canWrite, classNames, pluralize } from '$lib/utils'
import type { HubItem } from '$lib/components/flows/pickers/model'
import { Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
import { canWrite } from '$lib/utils'
import ShareModal from '$lib/components/ShareModal.svelte'
import type uFuzzy from '@leeoniya/ufuzzy'
import { Code2, LayoutDashboard, Wind } from 'lucide-svelte'
export let filter = ''
import ScriptRow from '$lib/components/common/table/ScriptRow.svelte'
import FlowRow from '$lib/components/common/table/FlowRow.svelte'
import AppRow from '$lib/components/common/table/AppRow.svelte'
@@ -46,7 +38,6 @@
let itemKind: 'script' | 'flow' | 'app' | 'all' = 'all'
let filter: string = ''
let shareModalScripts: ShareModal
let shareModalFlows: ShareModal
@@ -184,12 +175,6 @@
}
$: items = filter !== '' ? filteredItems : preFilteredItems
let start: number
let end: number
export let clientHeight: number
$: height = (100 * clientHeight) / window.innerHeight
function resetScroll() {
const element = document.getElementsByTagName('svelte-virtual-list-viewport')
@@ -294,11 +279,9 @@
{:else if filteredItems.length === 0}
<NoItemFound />
{:else}
<div
class={classNames('border rounded-md')}
style={`height: calc(100vh - 10em - ${height}vh);`}
>
<VirtualList {items} let:item bind:start bind:end>
<div class="border rounded-md divide-y divide-gray-200 mb-80">
<!-- <VirtualList {items} let:item bind:start bind:end> -->
{#each items ?? [] as item, i (item.type + '/' + item.path)}
{#if item.type == 'script'}
<ScriptRow
starred={item.starred ?? false}
@@ -323,10 +306,11 @@
app={item}
/>
{/if}
</VirtualList>
{/each}
<!-- </VirtualList> -->
</div>
<span class="text-xs">{pluralize(items?.length ?? 0, 'item')}</span>
<span class="text-xs">{`(${start} - ${end})`}</span>
<!-- <span class="text-xs">{pluralize(items?.length ?? 0, 'item')}</span>
<span class="text-xs">{`(${start} - ${end})`}</span> -->
{/if}
</div>
</CenteredPage>
frontend/src/routes/groups.svelte
+2 -2
View File
@@ -115,6 +115,7 @@
<td>{summary ?? ''}</td>
<td>
<Dropdown
placement="bottom-end"
dropdownItems={[
{
displayName: 'Manage members',
@@ -125,7 +126,7 @@
}
},
{
displayName: 'Manage ACL of the group itself',
displayName: 'Manage ACL of the group',
icon: faShare,
disabled: !canWrite,
action: () => {
@@ -144,7 +145,6 @@
}
}
]}
relative={false}
/>
</td>
</tr>
frontend/src/routes/index.svelte
+2 -5
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import CenteredPage from '$lib/components/CenteredPage.svelte'
import { FlowService, type OpenFlow } from '$lib/gen'
import { workspaceStore } from '$lib/stores'
import { Alert, Button, Drawer, DrawerContent, Tab, Tabs } from '$lib/components/common'
@@ -44,8 +43,6 @@
flowViewerFlow = hub
flowViewer.openDrawer?.()
}
$: clientHeight = 0
</script>
<Drawer bind:this={codeViewer} size="900px">
@@ -110,7 +107,7 @@
</DrawerContent>
</Drawer>
<div bind:clientHeight>
<div>
<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 h-fit-content">
{#if $workspaceStore == 'demo'}
<div class="my-4" />
@@ -166,5 +163,5 @@
</div>
{#if tab == 'workspace'}
<ItemsList {clientHeight} />
<ItemsList bind:filter />
{/if}
frontend/src/routes/resources.svelte
+1 -1
View File
@@ -431,6 +431,7 @@
</td>
<td>
<Dropdown
placement="bottom-end"
dropdownItems={[
{
displayName: 'Share',
@@ -483,7 +484,6 @@
]
: [])
]}
relative={true}
/>
</td>
</tr>
frontend/src/routes/schedules.svelte
+1 -1
View File
@@ -119,6 +119,7 @@
>
<td
><Dropdown
placement="bottom-end"
dropdownItems={[
{
displayName: enabled ? 'Disable' : 'Enable',
@@ -157,7 +158,6 @@
}
}
]}
relative={true}
/></td
>
</tr>
frontend/src/routes/variables.svelte
+1 -1
View File
@@ -272,6 +272,7 @@
</td>
<td
><Dropdown
placement="bottom-end"
dropdownItems={[
{
displayName: 'Edit',
@@ -322,7 +323,6 @@
]
: [])
]}
relative={true}
/></td
>
</tr>