chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

woop in a working state again

Browse source
This commit is contained in:
Chris Kruining 2024-12-18 16:32:21 +01:00
parent 4a5f0cf2d1
commit ab68df340f
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
15 changed files with 259 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/routes/(editor)/experimental/grid.module.css
View file

@ -21,18 +21,27 @@
flex-flow: column;
gap: var(--padding-m);
}
ol {
margin-block: 0;
}
}
& .content {
display: block grid;
grid: 1fr 1fr / 100%;
background-color: var(--surface-500);
border-top-left-radius: var(--radii-xl);
& > header {
padding-inline-start: var(--padding-l);
}
padding: var(--padding-m);
& .table {
border-radius: inherit;
}
& > fieldset {
border-radius: var(--radii-l);
overflow: auto;
background-color: inherit;
}
}
}

57
src/routes/(editor)/experimental/grid.tsx
View file

@ -1,12 +1,14 @@
import { Sidebar } from '~/components/sidebar';
import { Column, DataSetGroupNode, DataSetNode, DataSetRowNode, Grid, GridApi } from '~/components/grid';
import { CellEditor, Column, DataSetGroupNode, DataSetNode, DataSetRowNode, Grid, GridApi } from '~/components/grid';
import { people, Person } from './experimental.data';
import { Component, createEffect, createMemo, createSignal, For, Match, Switch } from 'solid-js';
import { Created, debounce, Deleted, MutarionKind, Mutation, Updated } from '~/utilities';
import { debounce, MutarionKind, Mutation } from '~/utilities';
import { createDataSet, Table } from '~/components/table';
import css from './grid.module.css';
export default function GridExperiment() {
const editor: CellEditor<any, any> = ({ value, mutate }) => <input value={value} oninput={debounce(e => mutate(e.target.value.trim()), 300)} />
const columns: Column<Person>[] = [
{
id: 'id',
@ -24,35 +26,37 @@ export default function GridExperiment() {
id: 'name',
label: 'Name',
sortable: true,
editor,
},
{
id: 'email',
label: 'Email',
sortable: true,
editor: ({ value, mutate }) => <input value={value} oninput={debounce(e => {
console.log('WHAAAAT????', e);
return mutate(e.target.value.trim());
}, 100)} />,
editor,
},
{
id: 'address',
label: 'Address',
sortable: true,
editor,
},
{
id: 'currency',
label: 'Currency',
sortable: true,
editor,
},
{
id: 'phone',
label: 'Phone',
sortable: true,
editor,
},
{
id: 'country',
label: 'Country',
sortable: true,
editor,
},
];
@ -60,46 +64,55 @@ export default function GridExperiment() {
const mutations = createMemo(() => api()?.mutations() ?? [])
// createEffect(() => {
// console.log(mutations());
// });
const rows = createDataSet(people.slice(0, 20), {
// group: { by: 'country' },
sort: { by: 'name', reversed: false },
});
return <div class={css.root}>
<Sidebar as="aside" label={'Grid options'} class={css.sidebar}>
<fieldset>
<legend>Commands</legend>
<button onclick={() => api()?.insert({ id: 'some guid', name: 'new person', address: '', country: '', currency: '', email: 'some@email.email', phone: '' })}>add row</button>
<button onclick={() => api()?.insert({ id: crypto.randomUUID(), name: '', address: '', country: '', currency: '', email: '', phone: '' })}>add row</button>
<button onclick={() => api()?.remove(api()?.selection()?.map(i => i.key as any) ?? [])} disabled={api()?.selection().length === 0}>Remove {api()?.selection().length} items</button>
</fieldset>
<fieldset>
<legend>Selection ({api()?.selection().length})</legend>
<pre>{JSON.stringify(api()?.selection().map(i => i.key))}</pre>
</fieldset>
<fieldset>
<legend>Mutations ({mutations().length})</legend>
<Mutations mutations={mutations()} />
<ol>
<For each={api()?.selection()}>{
item => <li value={item.key}>{item.value().name}</li>
}</For>
</ol>
</fieldset>
</Sidebar>
<div class={css.content}>
<Grid api={setApi} rows={people} columns={columns} groupBy="country" />
<Grid class={css.table} api={setApi} rows={rows} columns={columns} groupBy="country" />
<fieldset class={css.mutaions}>
<legend>Mutations ({mutations().length})</legend>
<Mutations mutations={mutations()} />
</fieldset>
</div>
</div >;
}
type M = { kind: MutarionKind, key: string, original?: any, value?: any };
const Mutations: Component<{ mutations: Mutation[] }> = (props) => {
const columns: Column<M>[] = [{ id: 'key', label: 'Key' }, { id: 'original', label: 'original' }, { id: 'value', label: 'Value' }];
const columns: Column<M>[] = [{ id: 'key', label: 'Key' }, { id: 'original', label: 'Old' }, { id: 'value', label: 'New' }];
const rows = createMemo(() => createDataSet<M>(props.mutations));
return <Table rows={rows()} columns={columns} groupBy='kind'>{{
original: ({ value }) => <del>{value}</del>,
value: ({ value }) => <ins>{value}</ins>,
createEffect(() => {
rows().group({ by: 'kind' });
});
return <Table rows={rows()} columns={columns}>{{
original: ({ value }) => value ? <del><pre>{JSON.stringify(value, null, 2)}</pre></del> : null,
value: ({ value }) => value ? <ins><pre>{JSON.stringify(value, null, 2)}</pre></ins> : null,
}}</Table>
};

32
src/routes/(editor)/experimental/table.tsx
View file

@ -3,9 +3,8 @@ import { Column, createDataSet, DataSetGroupNode, DataSetNode, DataSetRowNode, G
import { createStore } from 'solid-js/store';
import { Person, people } from './experimental.data';
import { createEffect, createMemo, For } from 'solid-js';
import css from './table.module.css';
import { Menu } from '~/features/menu';
import { Command, createCommand, Modifier } from '~/features/command';
import css from './table.module.css';
export default function TableExperiment() {
const columns: Column<Person>[] = [
@ -53,20 +52,31 @@ export default function TableExperiment() {
},
];
const [store, setStore] = createStore<{ selectionMode: SelectionMode, group?: GroupOptions<Person>, sort?: SortOptions<Person> }>({
const [store, setStore] = createStore<{ selectionMode: SelectionMode, grouping?: GroupOptions<Person>, sorting?: SortOptions<Person> }>({
selectionMode: SelectionMode.None,
group: undefined,
sort: undefined,
grouping: { by: 'country' },
sorting: { by: 'country', reversed: false },
});
const rows = createMemo(() => createDataSet(people));
const rows = createMemo(() => createDataSet(people, {
group: { by: 'country' },
sort: { by: 'country', reversed: false },
}));
createEffect(() => {
rows().setGrouping(store.group);
rows().group(store.grouping);
});
createEffect(() => {
rows().setSorting(store.sort);
rows().sort(store.sorting);
});
createEffect(() => {
setStore('sorting', rows().sorting());
});
createEffect(() => {
setStore('grouping', rows().grouping());
});
return <div class={css.root}>
@ -93,7 +103,7 @@ export default function TableExperiment() {
<label>
Group by
<select value={store.group?.by ?? ''} oninput={e => setStore('group', 'by', (e.target.value || undefined) as any)}>
<select value={store.grouping?.by ?? ''} oninput={e => setStore('grouping', e.target.value ? { by: e.target.value as keyof Person } : undefined)}>
<option value=''>None</option>
<For each={columns}>{
column => <option value={column.id}>{column.label}</option>
@ -108,7 +118,7 @@ export default function TableExperiment() {
<label>
by
<select value={store.sort?.by ?? ''} oninput={e => setStore('sort', prev => e.target.value ? { by: e.target.value as keyof Person, reversed: prev?.reversed } : undefined)}>
<select value={store.sorting?.by ?? ''} oninput={e => setStore('sorting', prev => e.target.value ? { by: e.target.value as keyof Person, reversed: prev?.reversed } : undefined)}>
<option value=''>None</option>
<For each={columns}>{
column => <option value={column.id}>{column.label}</option>
@ -119,7 +129,7 @@ export default function TableExperiment() {
<label>
reversed
<input type="checkbox" checked={store.sort?.reversed ?? false} oninput={e => setStore('sort', prev => prev !== undefined ? { by: prev.by, reversed: e.target.checked || undefined } : undefined)} />
<input type="checkbox" checked={store.sorting?.reversed ?? false} oninput={e => setStore('sorting', prev => prev !== undefined ? { by: prev.by, reversed: e.target.checked || undefined } : undefined)} />
</label>
</fieldset>
</Sidebar>