diff options
Diffstat (limited to 'ui/src/components')
| -rw-r--r-- | ui/src/components/dotfiles/Vars.tsx | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/ui/src/components/dotfiles/Vars.tsx b/ui/src/components/dotfiles/Vars.tsx new file mode 100644 index 00000000..00317b23 --- /dev/null +++ b/ui/src/components/dotfiles/Vars.tsx @@ -0,0 +1,194 @@ +import { useEffect, useState } from "react"; + +import DataTable from "@/components/ui/data-table"; +import { Button } from "@/components/ui/button"; +import { MoreHorizontal } from "lucide-react"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +import { ColumnDef } from "@tanstack/react-table"; + +import { invoke } from "@tauri-apps/api/core"; +import Drawer from "@/components/Drawer"; + +import { Var } from "@/state/models"; +import { useStore } from "@/state/store"; + +function deleteVar(name: string, refreshVars: () => void) { + invoke("delete_var", { name: name }) + .then(() => { + refreshVars(); + }) + .catch(() => { + console.error("Failed to delete var"); + }); +} + +function AddVar({ onAdd: onAdd }: { onAdd?: () => void }) { + let [name, setName] = useState(""); + let [value, setValue] = useState(""); + let [exp, setExport] = useState(false); + + // simple form to add vars + return ( + <div className="p-4"> + <h2 className="text-xl font-semibold leading-6 text-gray-900">Add var</h2> + <p className="mt-2">Add a new var to your shell</p> + + <form + className="mt-4" + onSubmit={(e) => { + e.preventDefault(); + + invoke("set_var", { name: name, value: value, export: exp }) + .then(() => { + console.log("Added var"); + + if (onAdd) onAdd(); + }) + .catch(() => { + console.error("Failed to add var"); + }); + }} + > + <input + className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" + type="text" + value={name} + onChange={(e) => setName(e.target.value)} + placeholder="Var name" + /> + + <input + className="mt-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" + autoComplete="off" + autoCapitalize="off" + autoCorrect="off" + spellCheck="false" + type="text" + value={value} + onChange={(e) => setValue(e.target.value)} + placeholder="Var value" + /> + + <div> + <label> + <input + className="mt-4 bg-gray-50 mr-2 inline" + autoComplete="off" + autoCapitalize="off" + autoCorrect="off" + spellCheck="false" + type="checkbox" + value={exp} + onChange={(e) => setExport(e.target.checked)} + /> + Export the var and make it visible to subprocesses + </label> + </div> + + <input + type="submit" + className="block mt-4 rounded-md bg-green-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600" + value="Add var" + /> + </form> + </div> + ); +} + +export default function Vars() { + const vars = useStore((state) => state.vars); + const refreshVars = useStore((state) => state.refreshVars); + + let [varDrawerOpen, setVarDrawerOpen] = useState(false); + + const columns: ColumnDef<Var>[] = [ + { + accessorKey: "name", + header: "Name", + }, + { + accessorKey: "value", + header: "Value", + }, + { + id: "actions", + cell: ({ row }: any) => { + const shell_var = row.original; + + return ( + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button variant="ghost" className="h-8 w-8 p-0 float-right"> + <span className="sr-only">Open menu</span> + <MoreHorizontal className="h-4 w-4 text-right" /> + </Button> + </DropdownMenuTrigger> + <DropdownMenuContent align="end"> + <DropdownMenuLabel>Actions</DropdownMenuLabel> + <DropdownMenuItem + onClick={() => deleteVar(shell_var.name, refreshVars)} + > + Delete + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + ); + }, + }, + ]; + + useEffect(() => { + refreshVars(); + }, []); + + return ( + <div className="pt-10"> + <div className="sm:flex sm:items-center"> + <div className="sm:flex-auto"> + <h1 className="text-base font-semibold leading-6 text-gray-900"> + Vars + </h1> + <p className="mt-2 text-sm text-gray-700"> + Configure environment variables here + </p> + </div> + <div className="mt-4 sm:ml-16 sm:mt-0 flex-row"> + <Drawer + open={varDrawerOpen} + onOpenChange={setVarDrawerOpen} + width="30%" + trigger={ + <button + type="button" + className="block rounded-md bg-green-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600" + > + Add + </button> + } + > + <AddVar + onAdd={() => { + refreshVars(); + setVarDrawerOpen(false); + }} + /> + </Drawer> + </div> + </div> + <div className="mt-8 flow-root"> + <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> + <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> + <DataTable columns={columns} data={vars} /> + </div> + </div> + </div> + </div> + ); +} |