preparing editing of stock items

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/stock/Index.svelte

@@ -41,31 +41,41 @@
 </script>
 
 <h2>{t('Stock')}</h2>
+<div class="grid3">
+    <div class="locations">
+        {#if top_level}
+        {#each top_level as realm,idx}
+        <h3>{realm.name}</h3>
+        {#if realm.locations}
+        <Locations locations={realm.locations} bind:selected={location} />
+        {/if}
+        {/each}
+        {/if}
+    </div>
+    <div class="items">
+        {#await items}
+        <span>loading…</span>
+        {:then data}
+        {#if location}
+        <h3>{location.name}</h3>
+        {/if}
+        <ItemList items={data?.sort((a,b) => a.code.localeCompare(b.code))} bind:selected={item} />
+        {/await}
+    </div>
+    <div class="properties">
+        <ItemProps {item} />
+    </div>
+</div>
 <table>
     <tbody>
         <tr>
             <td class="locations">
-                {#if top_level}
-                {#each top_level as realm,idx}
-                <h3>{realm.name}</h3>
-                {#if realm.locations}
-                <Locations locations={realm.locations} bind:selected={location} />
-                {/if}
-                {/each}
-                {/if}
             </td>
             <td class="items">
-                {#await items}
+
-                <span>loading…</span>
-                {:then data}
-                {#if location}
-                <h3>{location.name}</h3>
-                {/if}
-                <ItemList items={data.sort((a,b) => a.code.localeCompare(b.code))} bind:selected={item} />
-                {/await}
             </td>
             <td class="properties">
-                <ItemProps {item} />
+
             </td>
         </tr>
     </tbody>

frontend/src/routes/stock/ItemProps.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { t} from '../../translations.svelte';
     let { item } = $props();
 </script>
 
@@ -17,6 +18,20 @@
             </td>
         </tr>
         {/each}
+        <tr>
+            <td>
+                <select>
+                    <option>this is an existing property</option>
+                    <option>B</option>
+                    <option>C</option>
+                </select><br/>
+                <input type="text" placeholder="new prop"/>
+            </td>
+            <td>
+                <input type="text" />
+                <button>{t('save')}</button>
+            </td>
+        </tr>
     </tbody>
 </table>
 {/if}

web/src/main/resources/web/css/default.css

@@ -377,6 +377,11 @@ a.wikilink{
     padding-right: 5px;
 }
 
+.grid3{
+    display: flex;
+    flex-flow: wrap;
+  }
+
 @media screen and (max-width: 600px) {
     .grid2{
         display: grid;