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

polished the UI a bit. next up: saving changes (and maybe a diff ui as confirmation dialog)

Browse source
This commit is contained in:
Chris Kruining 2024-10-16 16:13:12 +02:00
parent 1a963a665e
commit 7db65413be
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
9 changed files with 323 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/routes/(editor)/edit.tsx
View file

@ -2,8 +2,8 @@ import { Menu } from "~/features/menu";
import { Sidebar } from "~/components/sidebar";
import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, ParentProps, Show } from "solid-js";
import { Grid, load, useFiles } from "~/features/file";
import { createCommand, Modifier, noop } from "~/features/command";
import { GridContextType } from "~/features/file/grid";
import { Command, Context, createCommand, Modifier, noop } from "~/features/command";
import { GridApi, GridContextType } from "~/features/file/grid";
import css from "./edit.module.css";
import { emptyFolder, FolderEntry, walk as fileTreeWalk, Tree } from "~/components/filetree";
@ -33,9 +33,9 @@ export default function Edit(props: ParentProps) {
const filesContext = useFiles();
const [root, { mutate, refetch }] = createResource(() => filesContext?.get('root'));
const [tree, setFiles] = createSignal<FolderEntry>(emptyFolder);
const [columns, setColumns] = createSignal(['these', 'are', 'some', 'columns']);
const [columns, setColumns] = createSignal([]);
const [rows, setRows] = createSignal<Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>>(new Map);
const [ctx, setCtx] = createSignal<GridContextType>();
const [api, setApi] = createSignal<GridApi>();
// Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
onMount(() => {
@ -89,7 +89,7 @@ export default function Edit(props: ParentProps) {
console.log(fileHandle, file, text);
}, { key: 'o', modifier: Modifier.Control }),
openFolder: createCommand('open', async () => {
openFolder: createCommand('open folder', async () => {
const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
filesContext.set('root', directory);
@ -98,49 +98,64 @@ export default function Edit(props: ParentProps) {
save: createCommand('save', () => {
console.log('save', rows());
}, { key: 's', modifier: Modifier.Control }),
saveAs: createCommand('saveAs', () => {
console.log('save as ...');
saveAs: createCommand('save as', (handle?: FileSystemFileHandle) => {
console.log('save as ...', handle);
window.showSaveFilePicker({
startIn: root(),
excludeAcceptAllOption: true,
types: [
{ accept: { 'application/json': ['.json'] }, description: 'JSON' },
{ accept: { 'application/yaml': ['.yml', '.yaml'] }, description: 'YAML' },
{ accept: { 'application/csv': ['.csv'] }, description: 'CSV' },
]
});
}, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
edit: createCommand('edit', () => {
}),
selectAll: createCommand('selectAll', () => {
console.log(ctx(), ctx()?.selection.selectAll(true));
selectAll: createCommand('select all', () => {
api()?.selectAll();
}, { key: 'a', modifier: Modifier.Control }),
} as const;
const mutated = createMemo(() => Object.values(ctx()?.rows ?? {}).filter(row => Object.values(row).some(lang => lang.original !== lang.value)));
const mutated = createMemo(() => Object.values(api()?.rows() ?? {}).filter(row => Object.values(row).some(lang => lang.original !== lang.value)));
createEffect(() => {
console.log('KAAS', mutated());
});
return <div class={css.root}>
<Menu.Root>
<Menu.Item label="file">
<Menu.Item label="open" command={commands.open} />
<Context.Root commands={[commands.saveAs]}>
<Context.Menu>{
command => <Command command={command} />
}</Context.Menu>
<Menu.Item label="open folder" command={commands.openFolder} />
<Menu.Root>
<Menu.Item label="file">
<Menu.Item command={commands.open} />
<Menu.Item label="save" command={commands.save} />
<Menu.Item command={commands.openFolder} />
<Menu.Item label="save all" command={commands.saveAs} />
</Menu.Item>
<Menu.Item command={commands.save} />
</Menu.Item>
<Menu.Item label="edit" command={commands.edit} />
<Menu.Item command={commands.edit} />
<Menu.Item label="selection">
<Menu.Item label="select all" command={commands.selectAll} />
</Menu.Item>
<Menu.Item label="selection">
<Menu.Item command={commands.selectAll} />
</Menu.Item>
<Menu.Item label="view" command={noop} />
</Menu.Root>
<Menu.Item label="view" command={noop} />
</Menu.Root>
<Sidebar as="aside" class={css.sidebar}>
<Tree entries={tree().entries}>{
file => file().name
}</Tree>
</Sidebar>
<Sidebar as="aside" class={css.sidebar}>
<Tree entries={tree().entries}>{
file => <Context.Handle>{file().name}</Context.Handle>
}</Tree>
</Sidebar>
<Grid columns={columns()} rows={rows()} context={setCtx} />
<Grid columns={columns()} rows={rows()} api={setApi} />
</Context.Root>
</div>
}