import { useNotifications } from "@gnu-taler/web-util/browser";
import { Dialog, Transition } from "@headlessui/react";
import { UserIcon, XCircleIcon } from "@heroicons/react/20/solid";
import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { InformationCircleIcon } from "@heroicons/react/24/solid";
import { ComponentChildren, Fragment, VNode, h } from "preact";
import { useState } from "preact/hooks";
import logo from "./assets/logo-2021.svg";
import { Pages } from "./pages.js";
import { Router, useCurrentLocation } from "./route.js";
function classNames(...classes: string[]) {
return classes.filter(Boolean).join(" ");
}
/**
* mapping route to view
* not found (error page)
* nested, index element, relative routes
* link interception
* form POST interception, call action
* fromData => Object.fromEntries
* segments in the URL
* navigationState: idle, submitting, loading
* form GET interception: does a navigateTo
* form GET Sync:
* 1.- back after submit: useEffect to sync URL to form
* 2.- refresh after submit: input default value
* useSubmit for form submission onChange, history replace
*
* post form without redirect
*
*
* @param param0
* @returns
*/
const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
const versionText = VERSION
? GIT_HASH
? `v${VERSION} (${GIT_HASH.substring(0, 8)})`
: VERSION
: "";
/**
* TO BE FIXED:
*
* 1.- when the form change to other form and both form share the same structure
* the same input component may be rendered in the same place,
* since input are uncontrolled the are not re-rendered and since they are
* uncontrolled it will keep the value of the previous form.
* One solutions could be to remove the form when unloading and when the new
* form load it will start without previous vdom, preventing the cache
* to create this behavior.
* Other solutions could be using IDs in the fields that are constructed
* with the ID of the form, so two fields of different form will need to re-render
* cleaning up the state of the previous form.
*
* 2.- currently the design prop and the behavior prop of the flexible form
* are two side of the same coin. From the design point of view, it is important
* to design the form in a list-of-field manner and there may be additional
* content that is not directly mapped to the form structure (object)
* So maybe we want to change the current shape so the computation of the state
* of the form is in a field level, but this computation required the field value and
* the whole form values and state (since one field may be disabled/hidden) because
* of the value of other field.
*
* 3.- given the previous requirement, maybe the name of the field of the form could be
* a function (P: F -> V) where F is the form (or parent object) and V is the type of the
* property. That will help with the typing of the forms props
*
* 4.- tooltip are not placed correctly: the arrow should point the question mark
* and the text area should be bigger
*
* 5.- date field should have the calendar icon clickable so the user can select date without
* writing text with the correct format
*/
function LeftMenu() {
const currentLocation = useCurrentLocation(pageList);
return (
);
}
export function Dashboard({
children,
}: {
children?: ComponentChildren;
}): VNode {
const [sidebarOpen, setSidebarOpen] = useState(false);
return (