From 9f396a167a0316c190acf0f1e2f56d29d8f8ec88 Mon Sep 17 00:00:00 2001
From: Eric van der Vlist <vdv@dyomedea.com>
Date: Mon, 27 Feb 2023 19:28:18 +0100
Subject: [PATCH] Starting to implement subscriptions.

---
 src/components/user/User.tsx | 199 +++++++++++++++++------------------
 1 file changed, 97 insertions(+), 102 deletions(-)

diff --git a/src/components/user/User.tsx b/src/components/user/User.tsx
index 1f62bad..89e90a6 100644
--- a/src/components/user/User.tsx
+++ b/src/components/user/User.tsx
@@ -1,5 +1,5 @@
 import { createForm } from '@felte/solid';
-import { Component, Index, Match, onMount, Switch } from 'solid-js';
+import { Component, Index, Match, onMount, Show, Switch } from 'solid-js';
 import { TextField, Button } from '@kobalte/core';
 import reporter from '@felte/reporter-tippy';
 import './style.css';
@@ -130,7 +130,8 @@ const User: Component<Props> = (props) => {
   }
 
   function addSubscription(index?: number) {
-    return () => addField(`subscriptions`, { user: '', direction: '' }, index);
+    return () =>
+      addField(`subscriptions`, { username: '', direction: '' }, index);
   }
 
   console.log({
@@ -141,106 +142,100 @@ const User: Component<Props> = (props) => {
   });
 
   return (
-    <form use:form>
-      <TextField.Root>
-        <TextField.Label>Mail address</TextField.Label>
-        <TextField.Input
-          type='mail'
-          name='mail'
-          required={true}
-          placeholder='Email address'
-        />
-        <TextField.ErrorMessage>
-          Please provide a valid URL
-        </TextField.ErrorMessage>
-      </TextField.Root>
-      <TextField.Root>
-        <TextField.Label>Database</TextField.Label>
-        <TextField.Input
-          type='url'
-          name='database'
-          required={true}
-          placeholder='Database URL'
-          readOnly={true}
-        />
-      </TextField.Root>
-      <TextField.Root>
-        <TextField.Label>User name</TextField.Label>
-        <TextField.Input
-          type='text'
-          name='username'
-          required={true}
-          placeholder='user name'
-          readOnly={!isNew()}
-        />
-      </TextField.Root>
-      <TextField.Root>
-        <TextField.Label>Password</TextField.Label>
-        <TextField.Input
-          type='text'
-          name='password'
-          required={true}
-          placeholder='Password'
-          autocomplete='off'
-        />
-      </TextField.Root>
-      <table>
-        <thead>
-          <tr>
-            <th>
-              <button type='button' onClick={addSubscription()}>
-                +
-              </button>
-            </th>
-            <th>User</th>
-            <th>Direction</th>
-          </tr>
-        </thead>
-        <tbody>
-          <Index each={subscriptions()}>
-            {(_, index) => (
-              <tr>
-                <td>
-                  <button type='button' onClick={removeSubscription(index)}>
-                    -
-                  </button>
-                </td>
-                <td>
-                  <TextField.Root>
-                    <TextField.Input
-                      type='text'
-                      name={`subscriptions.${index}.user`}
-                      required={true}
-                      placeholder='user'
-                    />
-                  </TextField.Root>
-                </td>
-                <td>
-                  <TextField.Root>
-                    <TextField.Input
-                      type='text'
-                      name={`subscriptions.${index}.direction`}
-                      required={true}
-                      placeholder='direction'
-                    />
-                  </TextField.Root>
-                </td>
-              </tr>
-            )}
-          </Index>
-        </tbody>
-      </table>
-      <Switch>
-        <Match when={!isNew()}>
-          <Button.Root type='submit'>Save</Button.Root>
-          <Button.Root onclick={deleteHandler}>Delete</Button.Root>
-        </Match>
-        <Match when={isNew()}>
-          <Button.Root type='submit'>Create</Button.Root>
-        </Match>
-      </Switch>
-      <Button.Root onclick={cancelHandler}>Cancel</Button.Root>
-    </form>
+    <>
+      <Show when={!isNew()}>
+        <h2>{userId(data('username'), data('database'))}</h2>
+      </Show>
+      <form use:form>
+        <TextField.Root>
+          <TextField.Label>Mail address</TextField.Label>
+          <TextField.Input
+            type='mail'
+            name='mail'
+            required={true}
+            placeholder='Email address'
+          />
+          <TextField.ErrorMessage>
+            Please provide a valid URL
+          </TextField.ErrorMessage>
+        </TextField.Root>
+        <TextField.Root>
+          <TextField.Label>Database</TextField.Label>
+          <TextField.Input
+            type='url'
+            name='database'
+            required={true}
+            placeholder='Database URL'
+            readOnly={true}
+          />
+        </TextField.Root>
+        <TextField.Root>
+          <TextField.Label>User name</TextField.Label>
+          <TextField.Input
+            type='text'
+            name='username'
+            required={true}
+            placeholder='user name'
+            readOnly={!isNew()}
+          />
+        </TextField.Root>
+        <TextField.Root>
+          <TextField.Label>Password</TextField.Label>
+          <TextField.Input
+            type='text'
+            name='password'
+            required={true}
+            placeholder='Password'
+            autocomplete='off'
+          />
+        </TextField.Root>
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <button type='button' onClick={addSubscription()}>
+                  +
+                </button>
+              </th>
+              <th>User name</th>
+            </tr>
+          </thead>
+          <tbody>
+            <Index each={subscriptions()}>
+              {(_, index) => (
+                <tr>
+                  <td>
+                    <button type='button' onClick={removeSubscription(index)}>
+                      -
+                    </button>
+                  </td>
+                  <td>
+                    <TextField.Root>
+                      <TextField.Input
+                        type='text'
+                        name={`subscriptions.${index}.username`}
+                        required={true}
+                        placeholder='user name'
+                      />
+                    </TextField.Root>
+                  </td>
+                </tr>
+              )}
+            </Index>
+          </tbody>
+        </table>
+        <Switch>
+          <Match when={!isNew()}>
+            <Button.Root type='submit'>Save</Button.Root>
+            <Button.Root onclick={deleteHandler}>Delete</Button.Root>
+          </Match>
+          <Match when={isNew()}>
+            <Button.Root type='submit'>Create</Button.Root>
+          </Match>
+        </Switch>
+        <Button.Root onclick={cancelHandler}>Cancel</Button.Root>
+      </form>
+    </>
   );
 };