From fafc2a0ad5a799c7653771d1a78c92b766c1fdea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Tue, 14 Dec 2021 12:32:22 +0100
Subject: [PATCH] refactor: Eintrag-Feldset ist in eigenen Modul besser
 aufgehoben
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eine Erweiterung auf weitere Möglichkeiten lassen sich so besser umsetzen.
---
 ui/src/routes/WorkingHours.svelte           | 140 +++++++++-----------
 ui/src/routes/working-hours/NewByDay.svelte |  17 +++
 2 files changed, 80 insertions(+), 77 deletions(-)
 create mode 100644 ui/src/routes/working-hours/NewByDay.svelte

diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte
index 1820117..27c8b97 100644
--- a/ui/src/routes/WorkingHours.svelte
+++ b/ui/src/routes/WorkingHours.svelte
@@ -1,11 +1,13 @@
 <script>
     export let params;
-    let title = "Bearbeitung Einträge"
+    const TITLE = "Bearbeitung Einträge";
     import IconifyIcon from '@iconify/svelte';
     import wrenchIcon from '@iconify-icons/oi/wrench';
     import checkIcon from '@iconify-icons/oi/check';
     import xIcon from '@iconify-icons/oi/x';
     import documentIcon from '@iconify-icons/oi/document';
+    import {WorkingHoursRepository} from '../components/Repositories.svelte'
+    import NewByDay from "./working-hours/NewByDay.svelte";
     let activeRecord = null;
     params = {
         title: 'Einträge',
@@ -51,85 +53,69 @@
 </script>
 
 <svelte:head>
-    <title>{title}</title>
+    <title>{TITLE}</title>
 </svelte:head>
 
-{#if activeRecord === null}
-    <section id="list-records">
-        <header>
-            <h1>{title}</h1>
-        </header>
-        <article>
-            {#if params.isLoading === true}
-                <p>Loading...</p>
-            {:else}
-                <!--suppress HtmlUnknownTarget -->
-                <form action="/working-hours">
-                    <fieldset>
-                        <button on:click={Controller.newRecord} type="button">Neuer Eintrag
-                            <IconifyIcon icon={documentIcon}/>
-                        </button>
-                    </fieldset>
-                </form>
-                <table>
-                    <colgroup>
-                        <col />
-                        <col />
-                        <col />
-                    </colgroup>
-                    <thead>
-                    <tr>
-                        <th>Datum</th>
-                        <th>Arbeitsstunden</th>
-                        <th>Aktionen</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {#each params.records as record}
-                        <tr>
-                            <td>{record.workingDay}</td>
-                            <td>{record.workingTime}</td>
-                            <td>
-                                <button on:click={() => Controller.selectActiveRecord(record)} type="button">Bearbeiten
-                                    <IconifyIcon icon={wrenchIcon}/>
-                                </button>
-                            </td>
-                        </tr>
-                    {/each}
-                    </tbody>
-                </table>
-            {/if}
-        </article>
-    </section>
-{:else}
-    <section id="edit-record">
-        <header>
-            <h1>{title}</h1>
-        </header>
-        <article>
+<section id="list-records">
+    <header>
+        <h1>{TITLE}</h1>
+    </header>
+    {#if activeRecord === null}
+    <article>
+        {#if params.isLoading === true}
+            <p>Loading...</p>
+        {:else}
             <!--suppress HtmlUnknownTarget -->
-            <form action="/working-hours" name="editRecord">
-                <fieldset name="record-data">
-                    <div>
-                        <label for="workingDay">Arbeitstag</label>
-                        <input bind:value={activeRecord.workingDay} type="date"
-                               id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
-                    </div>
-                    <div>
-                        <label for="workingTime">Arbeitszeit</label>
-                        <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
-                               id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
-                    </div>
-                </fieldset>
-                <fieldset name="buttons">
-                    <button on:click={Controller.saveRecord} type="button">Übernehmen
-                        <IconifyIcon icon={checkIcon} color="green"/>
-                    </button>
-                    <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
-                        <IconifyIcon icon={xIcon}/>
+            <form action="/working-hours">
+                <fieldset>
+                    <button on:click={Controller.newRecord} type="button">Neuer Eintrag
+                        <IconifyIcon icon={documentIcon}/>
                     </button>
                 </fieldset>
             </form>
-        </article>
-    </section>
-{/if}
+            <table>
+                <colgroup>
+                    <col />
+                    <col />
+                    <col />
+                </colgroup>
+                <thead>
+                <tr>
+                    <th>Datum</th>
+                    <th>Arbeitsstunden</th>
+                    <th>Aktionen</th>
+                </tr>
+                </thead>
+                <tbody>
+                {#each params.records as record}
+                    <tr>
+                        <td>{record.workingDay}</td>
+                        <td>{record.workingTime}</td>
+                        <td>
+                            <button on:click={() => Controller.selectActiveRecord(record)} type="button">Bearbeiten
+                                <IconifyIcon icon={wrenchIcon}/>
+                            </button>
+                        </td>
+                    </tr>
+                {/each}
+                </tbody>
+            </table>
+        {/if}
+    </article>
+    {:else}
+    <article>
+        <!--suppress HtmlUnknownTarget -->
+        <form action="/working-hours" name="editRecord">
+            <NewByDay activeRecord="{activeRecord}"/>
+            <fieldset name="buttons">
+                <button on:click={Controller.saveRecord} type="button">Übernehmen
+                    <IconifyIcon icon={checkIcon} color="green"/>
+                </button>
+                <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
+                    <IconifyIcon icon={xIcon}/>
+                </button>
+            </fieldset>
+        </form>
+    </article>
+    {/if}
+</section>
diff --git a/ui/src/routes/working-hours/NewByDay.svelte b/ui/src/routes/working-hours/NewByDay.svelte
new file mode 100644
index 0000000..79e721e
--- /dev/null
+++ b/ui/src/routes/working-hours/NewByDay.svelte
@@ -0,0 +1,17 @@
+<script>
+    export let activeRecord
+</script>
+
+
+<fieldset name="record-data">
+    <div>
+        <label for="workingDay">Arbeitstag</label>
+        <input bind:value={activeRecord.workingDay} type="date"
+               id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
+    </div>
+    <div>
+        <label for="workingTime">Arbeitszeit</label>
+        <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
+               id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+    </div>
+</fieldset>
\ No newline at end of file