Skip to content

Commit

Permalink
2.0.0 Alpha
Browse files Browse the repository at this point in the history
  • Loading branch information
@poirazis
poirazis committed Nov 5, 2023
1 parent 01683b9 commit e805aa3
Show file tree
Hide file tree
Showing 8 changed files with 132 additions and 54 deletions.
8 changes: 7 additions & 1 deletion lib/SuperTableCell/SuperCell.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@
<CellOptions
bind:editorState={innerCellState}
{cellState}
{cellOptions}
{value}
{fieldSchema}
multi={fieldSchema.type == "array"}
Expand All @@ -109,6 +110,7 @@
<CellNumber
bind:editorState={innerCellState}
{cellState}
{cellOptions}
{value}
{fieldSchema}
formattedValue = { getCellValue(value, valueTemplate) }
Expand All @@ -120,6 +122,7 @@
<CellDatetime
bind:editorState={innerCellState}
{cellState}
{cellOptions}
{value}
{fieldSchema}
formattedValue = { getCellValue(value, valueTemplate) }
Expand All @@ -131,9 +134,9 @@
<CellLink
bind:editorState={innerCellState}
{cellState}
{cellOptions}
{value}
{fieldSchema}
formattedValue = { getCellValue(value, valueTemplate) }
{unstyled}
{isHovered}
on:change
Expand All @@ -142,6 +145,7 @@
{:else if fieldSchema.type === "attachment" }
<CellAttachment
bind:editorState={innerCellState}
{cellOptions}
{cellState}
{value}
{fieldSchema}
Expand All @@ -153,6 +157,7 @@
{:else if fieldSchema.type === "boolean" }
<CellBoolean
bind:editorState={innerCellState}
{cellOptions}
{cellState}
{value}
{fieldSchema}
Expand All @@ -164,6 +169,7 @@
{:else if fieldSchema.type === "json" }
<CellJson
bind:editorState={innerCellState}
{cellOptions}
{cellState}
{value}
{fieldSchema}
Expand Down
3 changes: 3 additions & 0 deletions lib/SuperTableCell/cells/CellBoolean.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
export let cellState
export let fieldSchema
export let unstyled
export let cellOptions
const dispatch = createEventDispatcher()
Expand All @@ -27,6 +28,8 @@
class:inEdit={ $cellState == "Editing" }
class:unstyled
tabindex="-1"
style:padding-left={cellOptions?.padding}
style:padding-right={cellOptions?.padding}
on:keydown={handleKeyboard}
>
{#if $cellState == "Editing" }
Expand Down
3 changes: 3 additions & 0 deletions lib/SuperTableCell/cells/CellDatetime.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
export let formattedValue
export let unstyled
export let width
export let cellOptions
const dispatch = createEventDispatcher()
Expand All @@ -18,6 +19,8 @@
class="superCell"
class:unstyled
class:inEdit
style:padding-left={cellOptions?.padding}
style:padding-right={cellOptions?.padding}
style:max-width={width}
>
{#if inEdit}
Expand Down
23 changes: 16 additions & 7 deletions lib/SuperTableCell/cells/CellLink.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
import Popover from "../../../node_modules/@budibase/bbui/src/Popover/Popover.svelte";
import fsm from "svelte-fsm";
import { createEventDispatcher, beforeUpdate } from "svelte";
import { flip } from "svelte/animate"
import CellLinkPicker from "./CellLinkPicker.svelte";
const dispatch = createEventDispatcher();
export let value
export let value = []
export let cellState
export let fieldSchema;
export let isHovered;
export let placeholder
export let fadeToColor = "var(--spectrum-global-color-gray-50)"
export let unstyled
export let cellOptions
export let editorState=fsm("Closed", {
Open: { toggle: "Closed" },
Expand All @@ -25,6 +25,7 @@
let overflow
$: inEdit = $cellState == "Editing"
$: if ( value == "" || value == undefined ) value = []
const unselectRow = ( val ) => {
if ( value ) {
Expand All @@ -48,6 +49,12 @@
beforeUpdate ( () => {
overflow = valueAnchor ? valueAnchor.clientWidth != valueAnchor.scrollWidth : undefined
} )
const updateValue = ( newValue ) => {
value = newValue
dispatch("change", value)
if ( fieldSchema.relationshipType == "one-to-many" ) editorState.toggle();
}
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
Expand All @@ -58,15 +65,17 @@
class:inEdit
class:unstyled
class:focused={$cellState == "Focused"}
style:padding-left={cellOptions?.padding}
style:padding-right={cellOptions?.padding}
tabindex="0"
on:keydown={handleKeyboard}
>
<div bind:this={valueAnchor} class="inline-value">
{#if value?.length < 1 && inEdit}
<span class="placeholder">{ placeholder } </span>
<span class="placeholder">{ placeholder } </span>
{:else if value?.length > 0}
{#each value as val (val)}
<div animate:flip={{ duration: 130 }} class="item text">
{#each value as val}
<div class="item">
<span> {val.primaryDisplay} </span>
</div>
{/each}
Expand Down Expand Up @@ -95,7 +104,7 @@
open={ $editorState == "Open" }
on:close={ editorState.toggle }
>
<CellLinkPicker {value} tableId={fieldSchema.tableId} />
<CellLinkPicker {value} schema={fieldSchema} tableId={fieldSchema.tableId} on:change={ (e) => { updateValue (e.detail)} } />
</Popover>

<style>
Expand Down Expand Up @@ -133,4 +142,4 @@
white-space: nowrap;
gap: 0.5rem;
}
</style>
</style>
123 changes: 82 additions & 41 deletions lib/SuperTableCell/cells/CellLinkPicker.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
export let value = []
export let tableId
export let schema
export let active = false
let timer;
Expand Down Expand Up @@ -61,25 +62,33 @@
}
const selectRow = ( val ) => {
value.push ( { _id: val._id, primaryDisplay: val[tableSchema.primaryDisplay] } )
dispatch("change", { value: value })
if ( schema.relationshipType == "many-to-many" ) {
value.push ( { _id: val._id, primaryDisplay: val[tableSchema.primaryDisplay] } )
} else if ( schema.relationshipType == "many-to-one") {
value.push ( { _id: val._id, primaryDisplay: val[tableSchema.primaryDisplay] } )
} else if ( schema.relationshipType == "one-to-many") {
value = [ { _id: val._id, primaryDisplay: val[tableSchema.primaryDisplay] }]
}
dispatch("change", value )
}
const unselectRow = ( val ) => {
value.splice( value.findIndex ( (e) => e._id === val._id ), 1 );
dispatch("change", { value: value })
dispatch("change", value )
}
$: loadTableSchema(tableId)
$: results = loadTable(tableId, filteredValue, limit )
</script>
<div class="control" >
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="control" style:min-width={schema.relationshipType == "one-to-many" ? " 160px" : "320px"}>
<div class="searchControl">
<div class="columnSelect">
{primaryDisplay}
{primaryDisplay} - {schema.relationshipType}
</div>
<input class="input" on:input={debounce} type="text" placeholder="Search..."/>
<div class="pageSize">
Expand All @@ -90,54 +99,86 @@
</div>
</div>
<div class="listWrapper">
<div class="list">
<div class="options">
{#if results}
{#await results}
<CellSkeleton > <div class="option text"> Loading ... </div> </CellSkeleton>
{:then results}
{#if results.rows.length > 0 }
{#each results.rows as row, idx }
{#if !(rowSelected(row)) }
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="option" on:click={selectRow(row)} >
<div class="option text">
{row[primaryDisplay]}
{#if schema.relationshipType == "many-to-many" || schema.relationshipType == "many-to-one"}
<div class="listWrapper">
<div class="list">
<div class="options">
{#if results}
{#await results}
<CellSkeleton > <div class="option text"> Loading ... </div> </CellSkeleton>
{:then results}
{#key value}
{#if results.rows.length > 0 }
{#each results.rows as row, idx }
{#if !(rowSelected(row)) }
<div class="option" on:click={selectRow(row)} >
<div class="option text">
{row[primaryDisplay]}
</div>
</div>
</div>
{/if}
{/each}
{/if}
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
{/if}
{/if}
{/each}
{/if}
{/key}
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
{/if}
</div>
</div>
<div class="list listSelected">
<div class="options">
{#each value as val, idx }
{#if (rowSelected(val)) }
<div transition:fly={{ x: -20, duration: 130}} class="option" on:click={unselectRow(val)} >
<div class="option text">
{val.primaryDisplay}
</div>
</div>
{/if}
{/each}
</div>
</div>
</div>
<div class="list listSelected">
<div class="options">
{#each value as val, idx }
{#if (rowSelected(val)) }
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div transition:fly={{ x: -20, duration: 130}} class="option" on:click={unselectRow(val)} >
<div class="option text">
{val.primaryDisplay}
</div>
</div>
{/if}
{/each}
{/if}
{#if schema.relationshipType == "one-to-many"}
<div class="listWrapper">
<div class="list" style:width={"100%"}>
<div class="options">
{#if results}
{#await results}
<CellSkeleton > <div class="option text"> Loading ... </div> </CellSkeleton>
{:then results}
{#if results.rows.length > 0 }
{#key value}
{#each results.rows as row, idx }
{#if !(rowSelected(row)) }
<div class="option" on:click={selectRow(row)} >
<div class="option text">
{row[primaryDisplay]}
</div>
</div>
{/if}
{/each}
{/key}
{/if}
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
{/if}
</div>
</div>
</div>
</div>
{/if}
</div>
<style>
.control {
flex: auto;
flex-direction: column;
min-width: 400px;
display: flex;
align-items: stretch;
justify-content: space-around;
Expand Down
3 changes: 3 additions & 0 deletions lib/SuperTableCell/cells/CellNumber.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
export let unstyled
export let placeholder = "Enter..."
export let debounced
export let cellOptions
const dispatch = createEventDispatcher()
Expand Down Expand Up @@ -35,6 +36,8 @@
<div class="superCell"
class:inEdit
class:unstyled
style:padding-left={cellOptions?.padding}
style:padding-right={cellOptions?.padding}
>
{#if inEdit}
<input
Expand Down
3 changes: 3 additions & 0 deletions lib/SuperTableCell/cells/CellOptions.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { flip } from 'svelte/animate';
export let cellState
export let cellOptions
export let value;
export let fieldSchema;
Expand Down Expand Up @@ -128,6 +129,8 @@
class:inEdit
class:unstyled
class:focused={$cellState == "Focused"}
style:padding-left={cellOptions?.padding}
style:padding-right={cellOptions?.padding}
tabindex="-1"
on:keydown={handleKeyboard}
>
Expand Down
Loading

0 comments on commit e805aa3

Please sign in to comment.