quick snapshot
This commit is contained in:
Chris Kruining
parent
b03f80f34f
commit
5367ed2f44
10 changed files with 309 additions and 191 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, For, JSX, onMount, ParentComponent, Show, useContext } from "solid-js";
|
||||
import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, For, JSX, onMount, ParentComponent, Setter, Show, useContext } from "solid-js";
|
||||
import css from "./tabs.module.css";
|
||||
|
||||
interface TabsContextType {
|
||||
|
|
@ -17,37 +17,18 @@ const useTabs = () => {
|
|||
return context!;
|
||||
}
|
||||
|
||||
export const Tabs: ParentComponent = (props) => {
|
||||
export const Tabs: ParentComponent<{ active?: Setter<string | undefined> }> = (props) => {
|
||||
const [active, setActive] = createSignal<string | undefined>(undefined);
|
||||
const [tabs, setTabs] = createSignal<{ id: string, label: string }[]>([]);
|
||||
// const resolved = children(() => props.children);
|
||||
// const resolvedArray = createMemo(() => resolved.toArray());
|
||||
// const tabs = createMemo(() => resolvedArray().map(t => ({ id: t.id, label: t.dataset?.label ?? '' })));
|
||||
|
||||
// createEffect(() => {
|
||||
// for (const t of resolvedArray()) {
|
||||
// console.log(t);
|
||||
// }
|
||||
// });
|
||||
createEffect(() => {
|
||||
props.active?.(active());
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
setActive(tabs().at(-1)?.id);
|
||||
});
|
||||
|
||||
// createRenderEffect(() => {
|
||||
// if (isServer) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// for (const t of resolvedArray().filter(t => t instanceof HTMLElement)) {
|
||||
// if (active() === t.id) {
|
||||
// t.classList.add(css.active);
|
||||
// } else {
|
||||
// t.classList.remove(css.active);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
const ctx = {
|
||||
register(id: string, label: string) {
|
||||
setTabs(tabs => [...tabs, { id, label }]);
|
||||
|
|
@ -56,10 +37,6 @@ export const Tabs: ParentComponent = (props) => {
|
|||
},
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
console.log(tabs());
|
||||
});
|
||||
|
||||
return <TabsContext.Provider value={ctx}>
|
||||
<div class={css.tabs}>
|
||||
<header>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
|
||||
margin: 0;
|
||||
gap: var(--padding-m);
|
||||
padding: var(--padding-m);
|
||||
padding: var(--padding-m) 0;
|
||||
font-size: var(--text-s);
|
||||
|
||||
background-color: var(--surface-1);
|
||||
color: var(--text-1);
|
||||
border: 1px solid var(--text-1);
|
||||
border: 1px solid var(--surface-5);
|
||||
border-radius: var(--radii-m);
|
||||
|
||||
& > li {
|
||||
|
|
@ -23,10 +23,16 @@
|
|||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
|
||||
padding: var(--padding-s) var(--padding-m);
|
||||
|
||||
& > sub {
|
||||
color: var(--text-2);
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-4);
|
||||
}
|
||||
}
|
||||
|
||||
&:popover-open {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
& textarea {
|
||||
resize: vertical;
|
||||
min-block-size: 2em;
|
||||
min-block-size: max(2em, 100%);
|
||||
max-block-size: 50em;
|
||||
|
||||
background-color: var(--surface-1);
|
||||
|
|
@ -39,10 +39,6 @@
|
|||
& > span {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
& > textarea {
|
||||
min-block-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& :is(.header, .main, .footer) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Accessor, Component, createContext, createEffect, createMemo, createRenderEffect, createSignal, For, onMount, ParentComponent, Show, useContext } from "solid-js";
|
||||
import { Accessor, Component, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, For, onMount, ParentComponent, Show, useContext } from "solid-js";
|
||||
import { createStore, unwrap } from "solid-js/store";
|
||||
import { SelectionProvider, useSelection, selectable } from "../selectable";
|
||||
import { debounce, deepCopy, deepDiff, Mutation } from "~/utilities";
|
||||
|
|
@ -10,15 +10,17 @@ interface Leaf extends Record<string, string> { }
|
|||
export interface Entry extends Record<string, Entry | Leaf> { }
|
||||
|
||||
type Rows = Map<string, Record<string, string>>;
|
||||
type SelectionItem = { key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> };
|
||||
|
||||
export interface GridContextType {
|
||||
readonly rows: Accessor<Record<string, Record<string, string>>>;
|
||||
readonly mutations: Accessor<Mutation[]>;
|
||||
readonly selection: Accessor<object[]>;
|
||||
readonly selection: Accessor<SelectionItem[]>;
|
||||
mutate(prop: string, lang: string, value: string): void;
|
||||
}
|
||||
|
||||
export interface GridApi {
|
||||
readonly selection: Accessor<Record<string, Record<string, string>>>;
|
||||
readonly rows: Accessor<Record<string, Record<string, string>>>;
|
||||
readonly mutations: Accessor<Mutation[]>;
|
||||
selectAll(): void;
|
||||
|
|
@ -31,7 +33,7 @@ const isLeaf = (entry: Entry | Leaf): entry is Leaf => Object.values(entry).some
|
|||
const useGrid = () => useContext(GridContext)!;
|
||||
|
||||
const GridProvider: ParentComponent<{ rows: Rows }> = (props) => {
|
||||
const [selection, setSelection] = createSignal<object[]>([]);
|
||||
const [selection, setSelection] = createSignal<SelectionItem[]>([]);
|
||||
const [state, setState] = createStore<{ rows: Record<string, Record<string, string>>, snapshot: Rows, numberOfRows: number }>({
|
||||
rows: {},
|
||||
snapshot: new Map,
|
||||
|
|
@ -106,9 +108,14 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
|
|||
|
||||
const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) => {
|
||||
const gridContext = useGrid();
|
||||
const selectionContext = useSelection();
|
||||
const selectionContext = useSelection<{ key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> }>();
|
||||
|
||||
const api: GridApi = {
|
||||
selection: createMemo(() => {
|
||||
const selection = selectionContext.selection();
|
||||
|
||||
return Object.fromEntries(selection.map(({ key, value }) => [key, value()] as const));
|
||||
}),
|
||||
rows: gridContext.rows,
|
||||
mutations: gridContext.mutations,
|
||||
selectAll() {
|
||||
|
|
@ -160,7 +167,7 @@ const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
|
|||
return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
|
||||
<div class={css.row} use:selectable={{ value, key: k }}>
|
||||
<div class={css.cell}>
|
||||
<input type="checkbox" checked={isSelected()} on:input={() => context.select([k])} />
|
||||
<input type="checkbox" checked={isSelected()} on:input={() => context.select([k])} on:pointerdown={e => e.stopPropagation()} />
|
||||
</div>
|
||||
|
||||
<div class={css.cell}>
|
||||
|
|
@ -217,6 +224,13 @@ const TextArea: Component<{ key: string, value: string, lang: string, oninput?:
|
|||
resize();
|
||||
});
|
||||
|
||||
const observer = new MutationObserver((e) => {
|
||||
if (element()?.isConnected) {
|
||||
resize();
|
||||
}
|
||||
});
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
return <textarea
|
||||
ref={setElement}
|
||||
value={props.value}
|
||||
|
|
@ -226,5 +240,7 @@ const TextArea: Component<{ key: string, value: string, lang: string, oninput?:
|
|||
spellcheck
|
||||
wrap="soft"
|
||||
onkeyup={onKeyUp}
|
||||
on:keydown={e => e.stopPropagation()}
|
||||
on:pointerdown={e => e.stopPropagation()}
|
||||
/>
|
||||
};
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.item {
|
||||
padding: .5em 1em;
|
||||
padding: var(--padding-m) var(--padding-l);
|
||||
|
||||
background-color: inherit;
|
||||
color: var(--text-1);
|
||||
|
|
@ -34,6 +34,13 @@
|
|||
display: grid;
|
||||
}
|
||||
|
||||
& > .separator {
|
||||
grid-column: span 2;
|
||||
inline-size: calc(100% - (2 * var(--padding-m)));
|
||||
margin-block: 0;
|
||||
border: 1px solid var(--surface-5);
|
||||
}
|
||||
|
||||
& > .item {
|
||||
grid-column: span 2;
|
||||
display: grid;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Accessor, Component, For, JSX, ParentComponent, Setter, Show, children, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, useContext } from "solid-js";
|
||||
import { Accessor, Component, For, JSX, Match, ParentComponent, Setter, Show, Switch, children, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, useContext } from "solid-js";
|
||||
import { Portal } from "solid-js/web";
|
||||
import { createStore } from "solid-js/store";
|
||||
import { CommandType, Command } from "../command";
|
||||
|
|
@ -9,8 +9,8 @@ export interface MenuContextType {
|
|||
ref: Accessor<Node | undefined>;
|
||||
setRef: Setter<Node | undefined>;
|
||||
|
||||
addItems(items: (Item | ItemWithChildren)[]): void;
|
||||
items: Accessor<(Item | ItemWithChildren)[]>;
|
||||
addItems(items: (Item | Separator | ItemWithChildren)[]): void;
|
||||
items: Accessor<(Item | Separator | ItemWithChildren)[]>;
|
||||
commands(): CommandType[];
|
||||
};
|
||||
|
||||
|
|
@ -21,11 +21,15 @@ export interface Item {
|
|||
command: CommandType;
|
||||
}
|
||||
|
||||
export interface Separator {
|
||||
kind: 'separator';
|
||||
}
|
||||
|
||||
export interface ItemWithChildren {
|
||||
kind: 'node';
|
||||
id: string;
|
||||
label: string;
|
||||
children: Item[];
|
||||
children: (Item | Separator)[];
|
||||
}
|
||||
|
||||
const MenuContext = createContext<MenuContextType>();
|
||||
|
|
@ -51,7 +55,7 @@ export const MenuProvider: ParentComponent<{ commands?: CommandType[] }> = (prop
|
|||
},
|
||||
commands() {
|
||||
return Object.values(store.items)
|
||||
.map(item => item.kind === 'node' ? item.children.map(c => c.command) : item.command)
|
||||
.map(item => item.kind === 'node' ? item.children.filter(c => c.kind === 'leaf').map(c => c.command) : item.command)
|
||||
.flat()
|
||||
.concat(props.commands ?? []);
|
||||
},
|
||||
|
|
@ -90,6 +94,10 @@ const Item: Component<ItemProps> = (props) => {
|
|||
}) as unknown as JSX.Element;
|
||||
}
|
||||
|
||||
const Separator: Component = (props) => {
|
||||
return mergeProps(props, { kind: 'separator' }) as unknown as JSX.Element;
|
||||
}
|
||||
|
||||
const Root: ParentComponent<{}> = (props) => {
|
||||
const menu = useMenu();
|
||||
const [current, setCurrent] = createSignal<HTMLElement>();
|
||||
|
|
@ -125,7 +133,8 @@ const Root: ParentComponent<{}> = (props) => {
|
|||
|
||||
return <Portal mount={menu.ref()}>
|
||||
<For each={items}>{
|
||||
item => <Show when={Object.hasOwn(item, 'children') ? item as ItemWithChildren : undefined} fallback={<Child command={item.command} />}>{
|
||||
item => <Switch>
|
||||
<Match when={item.kind === 'node' ? item as ItemWithChildren : undefined}>{
|
||||
item => <>
|
||||
<div
|
||||
class={css.child}
|
||||
|
|
@ -138,9 +147,15 @@ const Root: ParentComponent<{}> = (props) => {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<For each={item().children}>
|
||||
{(child) => <Child command={child.command} />}
|
||||
</For>
|
||||
<For each={item().children}>{
|
||||
child => <Switch>
|
||||
<Match when={child.kind === 'leaf' ? child as Item : undefined}>{
|
||||
item => <Child command={item().command} />
|
||||
}</Match>
|
||||
|
||||
<Match when={child.kind === 'separator'}><hr class={css.separator} /></Match>
|
||||
</Switch>
|
||||
}</For>
|
||||
</div>
|
||||
|
||||
<button
|
||||
|
|
@ -152,7 +167,12 @@ const Root: ParentComponent<{}> = (props) => {
|
|||
{item().label}
|
||||
</button>
|
||||
</>
|
||||
}</Show>
|
||||
}</Match>
|
||||
|
||||
<Match when={item.kind === 'leaf' ? item as Item : undefined}>{
|
||||
item => <Child command={item().command} />
|
||||
}</Match>
|
||||
</Switch>
|
||||
}</For>
|
||||
</Portal>
|
||||
};
|
||||
|
|
@ -207,7 +227,7 @@ export const asMenuRoot = (element: Element) => {
|
|||
menu.setRef(element);
|
||||
};
|
||||
|
||||
export const Menu = { Root, Item } as const;
|
||||
export const Menu = { Root, Item, Separator } as const;
|
||||
|
||||
export interface CommandPaletteApi {
|
||||
readonly open: Accessor<boolean>;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Accessor, children, createContext, createEffect, createMemo, createRend
|
|||
import { createStore } from "solid-js/store";
|
||||
import { isServer } from "solid-js/web";
|
||||
import css from "./index.module.css";
|
||||
import { isFocusable } from "~/utilities";
|
||||
|
||||
enum Modifier {
|
||||
None = 0,
|
||||
|
|
@ -17,8 +16,8 @@ enum SelectionMode {
|
|||
Toggle,
|
||||
}
|
||||
|
||||
export interface SelectionContextType {
|
||||
readonly selection: Accessor<object[]>;
|
||||
export interface SelectionContextType<T extends object = object> {
|
||||
readonly selection: Accessor<T[]>;
|
||||
readonly length: Accessor<number>;
|
||||
select(selection: string[], options?: Partial<{ mode: SelectionMode }>): void;
|
||||
selectAll(): void;
|
||||
|
|
@ -31,19 +30,21 @@ interface InternalSelectionContextType {
|
|||
readonly selectables: Signal<HTMLElement[]>,
|
||||
add(key: string, value: object, element: HTMLElement): void;
|
||||
}
|
||||
export type SelectionHandler = (selection: object[]) => any;
|
||||
export interface SelectionHandler<T extends object = object> {
|
||||
(selection: T[]): any;
|
||||
}
|
||||
|
||||
const SelectionContext = createContext<SelectionContextType>();
|
||||
const InternalSelectionContext = createContext<InternalSelectionContextType>();
|
||||
|
||||
export const useSelection = () => {
|
||||
export function useSelection<T extends object = object>(): SelectionContextType<T> {
|
||||
const context = useContext(SelectionContext);
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error('selection context is used outside of a provider');
|
||||
}
|
||||
|
||||
return context;
|
||||
return context as SelectionContextType<T>;
|
||||
};
|
||||
const useInternalSelection = () => useContext(InternalSelectionContext)!;
|
||||
|
||||
|
|
@ -69,8 +70,6 @@ export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler,
|
|||
mode = SelectionMode.Toggle;
|
||||
}
|
||||
|
||||
console.log(selection, mode);
|
||||
|
||||
setState('selection', existing => {
|
||||
switch (mode) {
|
||||
case SelectionMode.Toggle: {
|
||||
|
|
@ -127,6 +126,7 @@ const Root: ParentComponent = (props) => {
|
|||
|
||||
if (!isServer && r) {
|
||||
const findSelectables = () => {
|
||||
setTimeout(() => {
|
||||
setSelectables(Array.from((function* () {
|
||||
const iterator = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
|
||||
acceptNode: (node: HTMLElement) => node.dataset.selectionKey ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
|
||||
|
|
@ -136,6 +136,7 @@ const Root: ParentComponent = (props) => {
|
|||
yield iterator.currentNode as HTMLElement;
|
||||
}
|
||||
})()));
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const observer = new MutationObserver(entries => {
|
||||
|
|
@ -191,6 +192,7 @@ const Root: ParentComponent = (props) => {
|
|||
});
|
||||
|
||||
return <div ref={setRoot} style={{ 'display': 'contents' }}>{c()}</div>;
|
||||
// return <div ref={setRoot}>{c()}</div>;
|
||||
};
|
||||
|
||||
export const selectable = (element: HTMLElement, options: Accessor<{ value: object, key?: string }>) => {
|
||||
|
|
@ -228,14 +230,11 @@ export const selectable = (element: HTMLElement, options: Accessor<{ value: obje
|
|||
return selection.map(n => n.dataset.selectionKey!);
|
||||
};
|
||||
|
||||
|
||||
createRenderEffect(() => {
|
||||
element.dataset.selected = isSelected() ? 'true' : undefined;
|
||||
});
|
||||
|
||||
const onPointerDown = (e: Event) => {
|
||||
// TODO :: find out if the cell clicked is editable and early exit after that
|
||||
|
||||
const [latest, setLatest] = internal.latest
|
||||
const [modifier] = internal.modifier
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mutated {
|
||||
:is(details, div):has(.mutated) > :is(summary, span:has(.mutated)) {
|
||||
color: var(--warn);
|
||||
|
||||
&::after {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { children, Component, createEffect, createMemo, createResource, createSignal, createUniqueId, For, onMount, ParentProps, Show } from "solid-js";
|
||||
import { filter, MutarionKind, splitAt } from "~/utilities";
|
||||
import { Accessor, children, Component, createEffect, createMemo, createResource, createSignal, createUniqueId, For, onMount, ParentProps, Setter, Show } from "solid-js";
|
||||
import { filter, MutarionKind, Mutation, splitAt } from "~/utilities";
|
||||
import { Sidebar } from "~/components/sidebar";
|
||||
import { emptyFolder, FolderEntry, walk as fileTreeWalk, Tree, FileEntry, Entry } from "~/components/filetree";
|
||||
import { Menu } from "~/features/menu";
|
||||
|
|
@ -50,26 +50,110 @@ const findFile = (folder: FolderEntry, id: string) => {
|
|||
return breadthFirstTraverse(folder).find((entry): entry is { path: string[] } & FileEntry => entry.kind === 'file' && entry.id === id);
|
||||
}
|
||||
|
||||
interface Entries extends Map<string, Record<string, { value: string, handle: FileSystemFileHandle, id: string }>> { }
|
||||
|
||||
interface ContentTabType {
|
||||
handle: FileSystemDirectoryHandle;
|
||||
readonly api: Accessor<GridApi | undefined>;
|
||||
readonly setApi: Setter<GridApi | undefined>;
|
||||
readonly entries: Accessor<Entries>;
|
||||
readonly setEntries: Setter<Entries>;
|
||||
}
|
||||
|
||||
export default function Edit(props: ParentProps) {
|
||||
const filesContext = useFiles();
|
||||
const [root, { refetch: getRoot, mutate: updateRoot }] = createResource(() => filesContext?.get('__root__'));
|
||||
const [tabs, { refetch: getTabs }] = createResource<FileSystemDirectoryHandle[]>(async () => (await filesContext?.list()) ?? [], { initialValue: [], ssrLoadFrom: 'initial' });
|
||||
const [tabs, { refetch: getTabs }] = createResource<ContentTabType[]>(async () => {
|
||||
const handles = (await filesContext?.list()) ?? [];
|
||||
|
||||
return await Promise.all(handles.map(handle => {
|
||||
const [api, setApi] = createSignal<GridApi>();
|
||||
const [entries, setEntries] = createSignal<Entries>(new Map());
|
||||
const files = handle.entries()
|
||||
|
||||
return ({ handle, api, setApi, entries, setEntries });
|
||||
}));
|
||||
}, { initialValue: [], ssrLoadFrom: 'initial' });
|
||||
const [active, setActive] = createSignal<string>();
|
||||
const [contents, setContents] = createSignal<Map<string, Map<string, string>>>(new Map());
|
||||
const [tree, setFiles] = createSignal<FolderEntry>(emptyFolder);
|
||||
const [entries, setEntries] = createSignal<Map<string, Record<string, { id: string, value: string, handle: FileSystemFileHandle }>>>(new Map);
|
||||
const [api, setApi] = createSignal<GridApi>();
|
||||
|
||||
const mutatedFiles = createMemo(() => {
|
||||
const mutations = api()?.mutations() ?? [];
|
||||
const files = entries();
|
||||
const tab = createMemo(() => {
|
||||
const name = active();
|
||||
return tabs().find(t => t.handle.name === name);
|
||||
});
|
||||
const api = createMemo(() => tab()?.api());
|
||||
|
||||
return new Set(mutations
|
||||
.map(mutation => {
|
||||
const [key, lang] = splitAt(mutation.key, mutation.key.lastIndexOf('.'));
|
||||
const mutations = createMemo<(Mutation & { file?: { value: string, handle: FileSystemFileHandle, id: string } })[]>(() => tabs().flatMap(tab => {
|
||||
const entries = tab.entries();
|
||||
const mutations = tab.api()?.mutations() ?? [];
|
||||
|
||||
return files.get(key)?.[lang]?.id;
|
||||
})
|
||||
.filter(file => file !== undefined)
|
||||
return mutations.map(m => {
|
||||
const [key, lang] = splitAt(m.key, m.key.lastIndexOf('.'));
|
||||
|
||||
return { ...m, key, file: entries.get(key)?.[lang] };
|
||||
});
|
||||
}));
|
||||
|
||||
const mutatedFiles = createMemo(() =>
|
||||
new Set((mutations()).map(({ file }) => file).filter(file => file !== undefined))
|
||||
);
|
||||
|
||||
const mutatedData = createMemo(() => {
|
||||
const muts = mutations();
|
||||
const files = contents();
|
||||
const entries = mutatedFiles().values();
|
||||
|
||||
if (muts.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const groupedByFileId = Object.groupBy(muts, m => m.file?.id ?? 'undefined');
|
||||
|
||||
return entries.map(({ id, handle }) => {
|
||||
const existing = new Map(files.get(id)!);
|
||||
const mutations = groupedByFileId[id]!;
|
||||
|
||||
for (const mutation of mutations) {
|
||||
switch (mutation.kind) {
|
||||
case MutarionKind.Delete: {
|
||||
existing.delete(mutation.key);
|
||||
break;
|
||||
}
|
||||
|
||||
case MutarionKind.Update:
|
||||
case MutarionKind.Create: {
|
||||
existing.set(mutation.key, mutation.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return [
|
||||
handle,
|
||||
existing.entries().reduce((aggregate, [key, value]) => {
|
||||
let obj = aggregate;
|
||||
const [k, lastPart] = splitAt(key, key.lastIndexOf('.'));
|
||||
|
||||
for (const part of k.split('.')) {
|
||||
if (!Object.hasOwn(obj, part)) {
|
||||
obj[part] = {};
|
||||
}
|
||||
|
||||
obj = obj[part];
|
||||
}
|
||||
|
||||
obj[lastPart] = value;
|
||||
|
||||
return aggregate;
|
||||
}, {} as Record<string, any>)
|
||||
] as const;
|
||||
}).toArray();
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
console.log(mutatedData());
|
||||
});
|
||||
|
||||
// Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
|
||||
|
|
@ -78,12 +162,18 @@ export default function Edit(props: ParentProps) {
|
|||
getTabs();
|
||||
});
|
||||
|
||||
createEffect(async () => {
|
||||
createEffect(() => {
|
||||
const directory = root();
|
||||
|
||||
if (root.state === 'ready' && directory?.kind === 'directory') {
|
||||
|
||||
(async () => {
|
||||
const contents = await Array.fromAsync(walk(directory));
|
||||
const languages = new Set(contents.map(c => c.lang));
|
||||
|
||||
console.log(contents);
|
||||
|
||||
setContents(new Map(contents.map(({ id, entries }) => [id, entries] as const)))
|
||||
|
||||
const template = contents.map(({ lang, handle }) => [lang, { handle, value: '' }]);
|
||||
|
||||
const merged = contents.reduce((aggregate, { id, handle, path, lang, entries }) => {
|
||||
|
|
@ -100,8 +190,9 @@ export default function Edit(props: ParentProps) {
|
|||
return aggregate;
|
||||
}, new Map<string, Record<string, { id: string, value: string, handle: FileSystemFileHandle }>>());
|
||||
|
||||
setFiles({ name: directory.name, id: '', kind: 'folder', entries: await Array.fromAsync(fileTreeWalk(directory)) });
|
||||
setFiles({ name: directory.name, id: '', kind: 'folder', handle: directory, entries: await Array.fromAsync(fileTreeWalk(directory)) });
|
||||
setEntries(merged);
|
||||
})();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -131,63 +222,51 @@ export default function Edit(props: ParentProps) {
|
|||
updateRoot(directory);
|
||||
}),
|
||||
save: createCommand('save', async () => {
|
||||
const mutations = api()?.mutations() ?? [];
|
||||
const results = await Promise.allSettled(mutatedData().map(async ([handle, data]) => {
|
||||
const stream = await handle.createWritable({ keepExistingData: false });
|
||||
|
||||
if (mutations.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rows = api()?.rows() ?? {};
|
||||
const _entries = entries();
|
||||
|
||||
// Cases we can encounter:
|
||||
// | | file extsis | no existing file |
|
||||
// |---------|---------------------------|----------------------!
|
||||
// | created | insert new key into file | create new file |
|
||||
// | updated | update value | create new file (*1) |
|
||||
// | deleted | remove key from file (*3) | no-op/skip (*2)(*3) |
|
||||
//
|
||||
// 1) This can happen if the key already exists in another language (so when adding a new language for example).
|
||||
// 2) The same as with 1, when you delete a key, and there are not files for each language, then this is a valid case.
|
||||
// 3) When a file has 0 keys, we can remove it.
|
||||
|
||||
const fileMutations = await Promise.all(mutations.map(async (mutation) => {
|
||||
const [k, lang] = splitAt(mutation.key, mutation.key.lastIndexOf('.'));
|
||||
const entry = _entries.get(k);
|
||||
const localEntry = entry?.[lang];
|
||||
|
||||
if (!localEntry) {
|
||||
throw new Error('invalid edge case???');
|
||||
}
|
||||
|
||||
const createNewFile = async () => {
|
||||
const [, alternativeLocalEntry] = Object.entries(entry).find(([l, e]) => l !== lang && e.id !== undefined) ?? [];
|
||||
const { directory, path } = alternativeLocalEntry ? findFile(tree(), alternativeLocalEntry.id) ?? {} : {};
|
||||
|
||||
const handle = await window.showSaveFilePicker({
|
||||
suggestedName: `${lang}.json`,
|
||||
startIn: directory,
|
||||
excludeAcceptAllOption: true,
|
||||
types: [
|
||||
{ accept: { 'application/json': ['.json'] }, description: 'JSON' },
|
||||
]
|
||||
});
|
||||
|
||||
// TODO :: patch the tree with this new entry
|
||||
// console.log(localEntry, tree());
|
||||
|
||||
return { handle, path };
|
||||
};
|
||||
|
||||
const { handle, path } = findFile(tree(), localEntry.id) ?? (mutation.kind !== MutarionKind.Delete ? await createNewFile() : {});
|
||||
const id = await handle?.getUniqueId();
|
||||
const key = path ? k.slice(path.join('.').length + 1) : k;
|
||||
const value = rows[k][lang];
|
||||
|
||||
return { action: mutation.kind, key, id, value, handle };
|
||||
stream.write(JSON.stringify(data, null, 4));
|
||||
}));
|
||||
|
||||
console.log(rows, entries(), Object.groupBy(fileMutations, m => m.id ?? 'undefined'))
|
||||
console.log(results);
|
||||
|
||||
// const fileMutations = await Promise.all(mutations.map(async (mutation) => {
|
||||
// const [k, lang] = splitAt(mutation.key, mutation.key.lastIndexOf('.'));
|
||||
// const entry = _entries.get(k);
|
||||
// const localEntry = entry?.[lang];
|
||||
|
||||
// if (!localEntry) {
|
||||
// throw new Error('invalid edge case???');
|
||||
// }
|
||||
|
||||
// const createNewFile = async () => {
|
||||
// const [, alternativeLocalEntry] = Object.entries(entry).find(([l, e]) => l !== lang && e.id !== undefined) ?? [];
|
||||
// const { directory, path } = alternativeLocalEntry ? findFile(tree(), alternativeLocalEntry.id) ?? {} : {};
|
||||
|
||||
// const handle = await window.showSaveFilePicker({
|
||||
// suggestedName: `${lang}.json`,
|
||||
// startIn: directory,
|
||||
// excludeAcceptAllOption: true,
|
||||
// types: [
|
||||
// { accept: { 'application/json': ['.json'] }, description: 'JSON' },
|
||||
// ]
|
||||
// });
|
||||
|
||||
// // TODO :: patch the tree with this new entry
|
||||
// // console.log(localEntry, tree());
|
||||
|
||||
// return { handle, path };
|
||||
// };
|
||||
|
||||
// const { handle, path } = findFile(tree(), localEntry.id) ?? (mutation.kind !== MutarionKind.Delete ? await createNewFile() : {});
|
||||
// const id = await handle?.getUniqueId();
|
||||
// const key = path ? k.slice(path.join('.').length + 1) : k;
|
||||
// const value = rows[k][lang];
|
||||
|
||||
// return { action: mutation.kind, key, id, value, handle };
|
||||
// }));
|
||||
|
||||
// console.log(rows, entries(), Object.groupBy(fileMutations, m => m.id ?? 'undefined'))
|
||||
}, { key: 's', modifier: Modifier.Control }),
|
||||
saveAs: createCommand('save as', (handle?: FileSystemFileHandle) => {
|
||||
console.log('save as ...', handle);
|
||||
|
|
@ -209,6 +288,9 @@ export default function Edit(props: ParentProps) {
|
|||
clearSelection: createCommand('clear selection', () => {
|
||||
api()?.clear();
|
||||
}),
|
||||
delete: createCommand('delete selected items', () => {
|
||||
console.log(api()?.selection())
|
||||
}, { key: 'delete', modifier: Modifier.None }),
|
||||
} as const;
|
||||
|
||||
return <div class={css.root}>
|
||||
|
|
@ -226,7 +308,15 @@ export default function Edit(props: ParentProps) {
|
|||
<Menu.Item command={commands.save} />
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item command={noop.withLabel('edit')} />
|
||||
<Menu.Item label="edit">
|
||||
<Menu.Item command={noop.withLabel('insert new key')} />
|
||||
|
||||
<Menu.Item command={noop.withLabel('insert new language')} />
|
||||
|
||||
<Menu.Separator />
|
||||
|
||||
<Menu.Item command={commands.delete} />
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item label="selection">
|
||||
<Menu.Item command={commands.selectAll} />
|
||||
|
|
@ -247,31 +337,41 @@ export default function Edit(props: ParentProps) {
|
|||
}}>{folder().name}</span>;
|
||||
},
|
||||
file => {
|
||||
const mutated = createMemo(() => mutatedFiles().has(file().id));
|
||||
const mutated = createMemo(() => mutatedFiles().values().find(({ id }) => id === file().id) !== undefined);
|
||||
|
||||
return <Context.Handle classList={{ [css.mutated]: mutated() }}>{file().name}</Context.Handle>;
|
||||
return <Context.Handle classList={{ [css.mutated]: mutated() }} onDblClick={() => {
|
||||
const folder = file().directory;
|
||||
filesContext?.set(folder.name, folder);
|
||||
getTabs();
|
||||
}}>{file().name}</Context.Handle>;
|
||||
},
|
||||
] as const}</Tree>
|
||||
</Show>
|
||||
</Sidebar>
|
||||
|
||||
<Tabs>
|
||||
<Tabs active={setActive}>
|
||||
<For each={tabs()}>{
|
||||
directory => <Tab id={createUniqueId()} label={directory.name}>{'some text in front'}<Kaas directory={directory} /></Tab>
|
||||
({ handle, setApi, setEntries }) => <Tab id={handle.name} label={handle.name}><Content directory={handle} api={setApi} entries={setEntries} /></Tab>
|
||||
}</For>
|
||||
</Tabs>
|
||||
</Context.Root>
|
||||
</div>
|
||||
}
|
||||
|
||||
const Kaas: Component<{ directory: FileSystemDirectoryHandle }> = (props) => {
|
||||
const filesContext = useFiles();
|
||||
const [root, { mutate, refetch }] = createResource(() => filesContext?.get('root'));
|
||||
const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<GridApi | undefined>, entries?: Setter<Entries> }> = (props) => {
|
||||
const [entries, setEntries] = createSignal<Entries>(new Map());
|
||||
const [columns, setColumns] = createSignal<string[]>([]);
|
||||
const [rows, setRows] = createSignal<Map<string, Record<string, string>>>(new Map);
|
||||
const [entries, setEntries] = createSignal<Map<string, Record<string, { id: string, value: string, handle: FileSystemFileHandle }>>>(new Map);
|
||||
const [api, setApi] = createSignal<GridApi>();
|
||||
|
||||
createEffect(() => {
|
||||
props.entries?.(entries());
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
props.api?.(api());
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
const directory = props.directory;
|
||||
|
||||
|
|
@ -307,13 +407,10 @@ const Kaas: Component<{ directory: FileSystemDirectoryHandle }> = (props) => {
|
|||
}, new Map<string, Record<string, { id: string, value: string, handle: FileSystemFileHandle }>>());
|
||||
|
||||
setColumns(['key', ...languages]);
|
||||
setEntries(merged);
|
||||
setRows(new Map(merged.entries().map(([key, langs]) => [key, Object.fromEntries(Object.entries(langs).map(([lang, { value }]) => [lang, value]))] as const)));
|
||||
})();
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
// console.log(columns(), rows());
|
||||
});
|
||||
|
||||
return <Grid columns={columns()} rows={rows()} api={setApi} />;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue