Skip to content

Commit

Permalink
unique column selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@samuelstroschein
samuelstroschein committed Oct 25, 2024
1 parent d9f2af2 commit 4876783
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 56 deletions.
176 changes: 123 additions & 53 deletions packages/lix-app-csv/src/layouts/OpenFileLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,143 @@
import { useNavigate } from "react-router-dom";
import { SlAlert } from "@shoelace-style/shoelace/dist/react";
import {
SlAlert,
SlButton,
SlDialog,
SlSelect,
SlOption,
} from "@shoelace-style/shoelace/dist/react";
import SubNavigation from "../components/SubNavigation.tsx";
import { useAtom } from "jotai";
import { activeFileAtom } from "../routes/editor/state.ts";
import {
activeFileAtom,
parsedCsvAtom,
uniqueColumnAtom,
} from "../routes/editor/state.ts";
import { useMemo, useState } from "react";
import { lixAtom } from "../state.ts";
import { saveLixToOpfs } from "../helper/saveLixToOpfs.ts";

export default function Layout(props: { children: React.ReactNode }) {
const [activeFile] = useAtom(activeFileAtom);
const [uniqueColumn] = useAtom(uniqueColumnAtom);
const [parsedCsv] = useAtom(parsedCsvAtom);
const navigate = useNavigate();
const [lix] = useAtom(lixAtom);
const [selectedUniqueColumn, setSelectedUniqueColumn] = useState<
string | null
>(null);

const uniqueColumnDialogOpen = useMemo(
() => (!uniqueColumn ? true : false),
[uniqueColumn]
);

const handleUniqueColumnDialogClose = async () => {
await lix.db
.updateTable("file")
.set("metadata", {
unique_column: selectedUniqueColumn,
})
.execute();
await saveLixToOpfs({ lix });
};

return (
<div className="w-full min-h-screen bg-zinc-50 relative">
<div className="w-full border-b border-zinc-200 bg-white relative z-90 -mb-[1px]">
<div className="w-full flex items-center justify-between px-3 min-h-[54px] gap-1 overflow-x-scroll">
<div className="flex items-center gap-1">
<div
className="flex justify-center items-center text-zinc-500 w-9 h-9 hover:bg-zinc-100 hover:text-zinc-950 rounded-lg cursor-pointer"
onClick={() => navigate("/")}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
<>
<SlDialog label="Select Unique Column" open={uniqueColumnDialogOpen}>
<div className="flex flex-col gap-4">
<p>
Please select the unique column. This column will be used to
identify and track changes in the table.
</p>
<SlSelect
className="h-40"
onSlChange={(event) =>
setSelectedUniqueColumn(
// @ts-expect-error - ts types don't know that value is a string
event?.target?.value?.replaceAll("___", " ")
)
}
>
{(parsedCsv.meta.fields ?? []).map((column) => (
// options can't have spaces
<SlOption key={column} value={column.replaceAll(" ", "___")}>
{column}
</SlOption>
))}
</SlSelect>
</div>
<SlButton
slot="footer"
variant="primary"
onClick={handleUniqueColumnDialogClose}
>
Confirm
</SlButton>
</SlDialog>

<div className="w-full min-h-screen bg-zinc-50 relative">
<div className="w-full border-b border-zinc-200 bg-white relative z-90 -mb-[1px]">
<div className="w-full flex items-center justify-between px-3 min-h-[54px] gap-1 overflow-x-scroll">
<div className="flex items-center gap-1">
<div
className="flex justify-center items-center text-zinc-500 w-9 h-9 hover:bg-zinc-100 hover:text-zinc-950 rounded-lg cursor-pointer"
onClick={() => navigate("/")}
>
<path
fill="currentColor"
d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.223a1 1 0 0 1 1.228 0l8 6.223a1 1 0 0 1 .386.79zm-2-1V9.978l-7-5.444l-7 5.444V19z"
/>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M21 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.49a1 1 0 0 1 .386-.79l8-6.223a1 1 0 0 1 1.228 0l8 6.223a1 1 0 0 1 .386.79zm-2-1V9.978l-7-5.444l-7 5.444V19z"
/>
</svg>
</div>

<p className="font-medium opacity-30">/</p>
<div className="flex justify-center items-center text-zinc-950 h-9 rounded-lg px-2">
{/* slice away the root slash */}
<h1 className="font-medium">{activeFile?.path.slice(1)}</h1>
<p className="font-medium opacity-30">/</p>
<div className="flex justify-center items-center text-zinc-950 h-9 rounded-lg px-2">
{/* slice away the root slash */}
<h1 className="font-medium">{activeFile?.path.slice(1)}</h1>
</div>
</div>
<div className="mr-1 flex items-center gap-1.5">
{/* <SlButton>Select unique column</SlButton> */}
</div>
</div>
<div className="mr-1 flex items-center gap-1.5">{/* */}</div>
</div>
<div className="w-full -mt-2 px-3">
<SubNavigation />
<div className="w-full -mt-2 px-3">
<SubNavigation />
</div>
</div>
</div>

{props.children}
{props.children}

<div className="absolute bottom-[24px] right-[24px] z-90">
<SlAlert
className="copied-link-alert"
variant="primary"
duration={3000}
closable
>
<svg
// @ts-expect-error - ts types don't know that svg's have a slot
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="20px"
height="20px"
viewBox="0 0 16 16"
<div className="absolute bottom-[24px] right-[24px] z-90">
<SlAlert
className="copied-link-alert"
variant="primary"
duration={3000}
closable
>
<g fill="currentColor">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z" />
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z" />
</g>
</svg>
Copied link to clipboard
</SlAlert>
<svg
// @ts-expect-error - ts types don't know that svg's have a slot
slot="icon"
xmlns="http://www.w3.org/2000/svg"
width="20px"
height="20px"
viewBox="0 0 16 16"
>
<g fill="currentColor">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z" />
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z" />
</g>
</svg>
Copied link to clipboard
</SlAlert>
</div>
</div>
</div>
</>
);
}
6 changes: 3 additions & 3 deletions packages/lix-app-csv/src/routes/editor/state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@ export const parsedCsvAtom = atom(async (get) => {
return parsed as Papa.ParseResult<Record<string, string>>;
});

export const uniqueColumnAtom = atom(async (get) => {
export const uniqueColumnAtom = atom<Promise<string | undefined>>(async (get) => {
const file = await get(activeFileAtom);
if (!file) return undefined;
return file.metadata?.unique_column;
return file.metadata?.unique_column as string | undefined;
});

/**
Expand All @@ -60,7 +60,7 @@ export const activeRowEntityIdAtom = atom(async (get) => {
const activeCell = get(activeCellAtom);
const parsedCsv = await get(parsedCsvAtom);
const uniqueColumn = await get(uniqueColumnAtom);
if (!activeCell) return null;
if (!activeCell || !uniqueColumn) return null;
const uniqueColumnValue = parsedCsv.data[activeCell.row][uniqueColumn];
return `${uniqueColumn}:${uniqueColumnValue}`;
});
Expand Down

0 comments on commit 4876783

Please sign in to comment.