use event.currentTarget

grucloud · Dec 20, 2023 · 9a7419c · 9a7419c
1 parent 86635c4
commit 9a7419c
Show file tree

Hide file tree

Showing 31 changed files with 76 additions and 131 deletions.
diff --git a/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-default-option.ts b/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-default-option.ts
@@ -34,9 +34,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-example-default.ts
@@ -33,9 +33,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-loading.ts b/bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-loading.ts
@@ -57,9 +57,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
   return () =>

diff --git a/bau-ui/examples/bau-storybook/src/pages/checkbox/checkbox-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/checkbox/checkbox-example-default.ts
@@ -20,9 +20,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/checkbox/checkbox-indeterminate.ts b/bau-ui/examples/bau-storybook/src/pages/checkbox/checkbox-indeterminate.ts
@@ -20,9 +20,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
   const onclickIndeterminate = (_event: any) => {

diff --git a/bau-ui/examples/bau-storybook/src/pages/checkbox/checkbox-uncontrolled.ts b/bau-ui/examples/bau-storybook/src/pages/checkbox/checkbox-uncontrolled.ts
@@ -14,9 +14,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/form/form-login.ts b/bau-ui/examples/bau-storybook/src/pages/form/form-login.ts
@@ -40,7 +40,7 @@ export default (context: Context) => {
     const onsubmit = async (event: any) => {
       event.preventDefault();
       const { username, password } = Object.fromEntries(
-        new FormData(event.target.closest("form"))
+        new FormData(event.currentTarget)
       );
       try {
         loadingState.val = true;

diff --git a/bau-ui/examples/bau-storybook/src/pages/form/form-simple.ts b/bau-ui/examples/bau-storybook/src/pages/form/form-simple.ts
@@ -15,9 +15,7 @@ export default (context: Context) => {
   return function SimpleForm({ onSubmitted = () => {} }: any) {
     const onsubmit = async (event: any) => {
       event.preventDefault();
-      const payload = Object.fromEntries(
-        new FormData(event.target.closest("form"))
-      );
+      const payload = Object.fromEntries(new FormData(event.currentTarget));
       alert(JSON.stringify(payload));
       onSubmitted(payload);
     };

diff --git a/bau-ui/examples/bau-storybook/src/pages/input/input-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/input/input-example-default.ts
@@ -1,26 +1,50 @@
-import input from "@grucloud/bau-ui/input";
 import { Context } from "@grucloud/bau-ui/context";
+import button from "@grucloud/bau-ui/button";
+import input from "@grucloud/bau-ui/input";
+import form from "@grucloud/bau-ui/form";
 
 export default (context: Context) => {
   const { bau } = context;
-  const { section, h3 } = bau.tags;
-
+  const { article, footer, label } = bau.tags;
   const Input = input(context);
 
+  const Form = form(context);
+  const ButtonSubmit = button(context, { variant: "solid", color: "primary" });
+
+  const onsubmit = (event: any) => {
+    event.preventDefault();
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
+    alert(JSON.stringify(payload));
+  };
+
   return () =>
-    section(
-      h3("Basic input"),
-      Input({
-        id: "my-input",
-        name: "my-input",
-        placeholder: "Enter Text",
-        // oninput: (event)=> {}
-      }),
-      h3("Disabled input"),
-      Input({
-        name: "my-input-disabled",
-        placeholder: "Enter Text",
-        disabled: true,
-      })
+    Form(
+      { onsubmit },
+      article(
+        label(
+          "Basic input",
+          Input({
+            name: "my-input",
+            placeholder: "Enter Text",
+          })
+        ),
+        label(
+          "Required input",
+          Input({
+            required: true,
+            name: "my-required-input",
+            placeholder: "Enter Text",
+          })
+        ),
+        label(
+          "Disabled input",
+          Input({
+            name: "my-input-disabled",
+            placeholder: "Enter Text",
+            disabled: true,
+          })
+        )
+      ),
+      footer(ButtonSubmit({ type: "submit" }, "Submit"))
     );
 };
diff --git a/bau-ui/examples/bau-storybook/src/pages/modal/modal-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/modal/modal-example-default.ts
@@ -24,7 +24,6 @@ export default (context: Context) => {
       Button(
         {
           variant: "solid",
-          color: "neutral",
           onclick: () => {
             const dialogEl = document.getElementById(
               "my-dialog"

diff --git a/bau-ui/examples/bau-storybook/src/pages/radioButtonGroup/radioButtonGroup-img.ts b/bau-ui/examples/bau-storybook/src/pages/radioButtonGroup/radioButtonGroup-img.ts
@@ -29,8 +29,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const formEl = event.target.closest("form");
-    const payload = Object.fromEntries(new FormData(formEl));
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/radioButtonGroup/radioButtonGroup-small.ts b/bau-ui/examples/bau-storybook/src/pages/radioButtonGroup/radioButtonGroup-small.ts
@@ -13,8 +13,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const formEl = event.target.closest("form");
-    const payload = Object.fromEntries(new FormData(formEl));
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/radioButtonGroup/radioButtonGroup-stateless.ts b/bau-ui/examples/bau-storybook/src/pages/radioButtonGroup/radioButtonGroup-stateless.ts
@@ -13,8 +13,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const formEl = event.target.closest("form");
-    const payload = Object.fromEntries(new FormData(formEl));
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/select/select-aws-region.ts b/bau-ui/examples/bau-storybook/src/pages/select/select-aws-region.ts
@@ -33,9 +33,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/select/select-default-option.ts b/bau-ui/examples/bau-storybook/src/pages/select/select-default-option.ts
@@ -36,9 +36,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/select/select-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/select/select-example-default.ts
@@ -34,9 +34,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/select/select-loading.ts b/bau-ui/examples/bau-storybook/src/pages/select/select-loading.ts
@@ -57,9 +57,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/selectNative/select-native-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/selectNative/select-native-example-default.ts
@@ -25,9 +25,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/switch/switch-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/switch/switch-example-default.ts
@@ -14,9 +14,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const payload = Object.fromEntries(
-      new FormData(event.target.closest("form"))
-    );
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 

diff --git a/bau-ui/examples/bau-storybook/src/pages/toggle/toggle-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/toggle/toggle-example-default.ts
@@ -16,7 +16,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const formEl = event.target.closest("form");
+    const formEl = event.currentTarget;
     const buttonName = formEl.querySelector("button[aria-pressed=true]")?.name;
     alert(buttonName);
   };

diff --git a/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-example-default.ts b/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-example-default.ts
@@ -32,7 +32,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const formEl = event.target.closest("form");
+    const formEl = event.currentTarget;
     const buttonName = formEl.querySelector("button[aria-pressed=true]")?.name;
     alert(buttonName);
   };

diff --git a/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-inclusive.ts b/bau-ui/examples/bau-storybook/src/pages/toggleGroup/toggleGroup-inclusive.ts
@@ -31,7 +31,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const formEl = event.target.closest("form");
+    const formEl = event.currentTarget;
     const buttonNames = [
       ...formEl.querySelectorAll("button[aria-pressed=true]"),
     ].map(({ name }: any) => name);

diff --git a/bau-ui/examples/bau-storybook/src/pages/treeView/treeView-check.ts b/bau-ui/examples/bau-storybook/src/pages/treeView/treeView-check.ts
@@ -17,8 +17,7 @@ export default (context: Context) => {
 
   const onsubmit = (event: any) => {
     event.preventDefault();
-    const formEl = event.target.closest("form");
-    const payload = Object.fromEntries(new FormData(formEl));
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
     alert(JSON.stringify(payload));
   };
 
@@ -87,7 +86,7 @@ export default (context: Context) => {
         },
       })(item);
 
-      const formEl = event.target.closest("form");
+      const formEl = event.currentTarget;
       const checkboxesChecked = formEl.querySelectorAll(
         'input[type="checkbox"][data-type="resources"]:checked'
       );

diff --git a/bau-ui/form/form.js b/bau-ui/form/form.js
@@ -17,7 +17,8 @@ export default function (context, options = {}) {
         font-size: 1.3rem;
       }
     }
-    & section {
+    & section,
+    article {
       display: inline-flex;
       flex-direction: column;
       gap: 0.5rem;

diff --git a/examples/gccd/src/components/git/gitConfig.ts b/examples/gccd/src/components/git/gitConfig.ts
@@ -39,9 +39,7 @@ export default function (context: Context) {
       console.assert(project_id);
       console.assert(onSubmitted);
       event.preventDefault();
-      const payload = Object.fromEntries(
-        new FormData(event.target.closest("form"))
-      );
+      const payload = Object.fromEntries(new FormData(event.currentTarget));
       await stores.project.patchQuery.run({ org_id, project_id }, payload);
       onSubmitted({ ...payload, org_id, project_id });
     };
@@ -62,7 +60,6 @@ export default function (context: Context) {
   `;
 
   const oninputRadio = (radioState: any) => (event: any) => {
-    //console.log("oninputRadio", event.target.id, event.target.name);
     const search = new URLSearchParams(window.location.search);
     search.delete(event.target.name);
     search.append(event.target.name, event.target.id);

diff --git a/examples/gccd/src/components/gitRepository/gitRepositoryBranchGitHub.ts b/examples/gccd/src/components/gitRepository/gitRepositoryBranchGitHub.ts
@@ -11,7 +11,7 @@ export default (context: Context) => {
   return function GitRepositoryBranchGitHub(props: any) {
     const { username, password } = props;
     const branchState = bau.state(props.branch);
-    if (username && !listRepoQuery.data.val.length) {
+    if (username && !listRepoQuery.completed.val) {
       listRepoQuery.run({ username, password });
     }
     const GitRepository = ({}: any) =>

diff --git a/examples/gccd/src/components/gitRepository/gitRepositoryBranchGitLab.ts b/examples/gccd/src/components/gitRepository/gitRepositoryBranchGitLab.ts
@@ -12,7 +12,9 @@ export default (context: Context) => {
     const { username, password } = props;
     const branchState = bau.state(props.branch);
 
-    listRepoQuery.run({ username, password });
+    if (username && !listRepoQuery.completed.val) {
+      listRepoQuery.run({ username, password });
+    }
 
     const GitRepository = ({}: any) =>
       label("Repository URL", () =>

diff --git a/examples/gccd/src/components/gitRepository/gitSetupGitHubApp.ts b/examples/gccd/src/components/gitRepository/gitSetupGitHubApp.ts
@@ -72,7 +72,7 @@ export default (context: Context) => {
     const access_token = getAccessToken({ window })(
       /github-access-token=(.[^;]*)/gi
     );
-    if (access_token) {
+    if (access_token && !authenticatedUserQuery.completed.val) {
       authenticatedUserQuery.run({ access_token });
     }
     const usernameState = bau.state("");

diff --git a/examples/gccd/src/components/gitRepository/gitSetupGitLabOAuth.ts b/examples/gccd/src/components/gitRepository/gitSetupGitLabOAuth.ts
@@ -58,7 +58,7 @@ export default (context: Context) => {
     const access_token = getAccessToken({ window })(
       /gitlab-access-token=(.[^;]*)/gi
     );
-    if (access_token) {
+    if (access_token && !authenticatedUserQuery.completed.val) {
       authenticatedUserQuery.run({ access_token });
     }
     const usernameState = bau.state("");

diff --git a/examples/gccd/src/components/workspace/workspaceCreateForm.ts b/examples/gccd/src/components/workspace/workspaceCreateForm.ts
@@ -23,9 +23,10 @@ export default function (context: Context) {
     ({ onSubmitted, org_id, project_id }: any) =>
     async (event: any) => {
       event.preventDefault();
-      const payload = Object.fromEntries(
-        new FormData(event.target.closest("form"))
-      );
+      console.assert(onSubmitted);
+      console.log(org_id);
+      console.log(project_id);
+      const payload = Object.fromEntries(new FormData(event.currentTarget));
       try {
         await stores.workspace.createQuery.run({ org_id, project_id }, payload);
         onSubmitted({ ...payload, org_id, project_id });