feat: A new component: CategorySelection

danielschmitz · May 23, 2019 · c7b5814 · c7b5814
1 parent 9ebffa9
commit c7b5814
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 14 deletions.
diff --git a/src/components/CategorySelection.svelte b/src/components/CategorySelection.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { onMount } from "svelte";
+
+  let categories = [];
+  export let selected;
+
+  onMount(async () => {
+    categories = getCategories();
+  });
+
+  async function getCategories() {
+    const result = await fetch("https://northwind.now.sh/api/categories");
+    if (result.ok) return result.json();
+  }
+</script>
+
+<div class="select">
+  {#await categories}
+    <progress class="progress is-small is-primary" max="100">15%</progress>
+  {:then list}
+    <select bind:value={selected}>
+      {#each list as item}
+        <option value={item.id}>{item.name}</option>
+      {/each}
+    </select>
+  {:catch}
+    Error!
+  {/await}
+</div>
diff --git a/src/routes/products.svelte b/src/routes/products.svelte
@@ -1,5 +1,7 @@
 <script>
   import Card from "../components/Card.svelte";
+  import CategorySelection from "../components/CategorySelection.svelte"
+
   import { onMount } from "svelte";
   import http from "../http";
 
@@ -21,7 +23,9 @@
 
   async function getProducts() {
     // a simple use of "fetch"
-    const result = await fetch("https://northwind.now.sh/api/products/?_expand=category&_expand=supplier");
+    const result = await fetch(
+      "https://northwind.now.sh/api/products/?_expand=category&_expand=supplier"
+    );
 
     if (result.ok) return result.json();
 
@@ -37,8 +41,8 @@
 
   async function onDeleteClick(item) {
     product = item;
-    if (confirm(`Delete "${product.name}"?`)){
-      await http.delete(`/products/${product.id}`)
+    if (confirm(`Delete "${product.name}"?`)) {
+      await http.delete(`/products/${product.id}`);
       products = getProducts();
     }
   }
@@ -53,10 +57,10 @@
 
   function onNewClick() {
     product = {
-      name: '',
-      description: ''
-    }
-    openModal()
+      name: "",
+      description: ""
+    };
+    openModal();
   }
 
   async function save() {
@@ -125,7 +129,13 @@
     {/await}
 
   </div>
-    <a href="javascript:;" slot="footer" class="card-footer-item" on:click={onNewClick}>New</a>
+  <a
+    href="javascript:;"
+    slot="footer"
+    class="card-footer-item"
+    on:click={onNewClick}>
+    New
+  </a>
 </Card>
 
 <div class={modalClass}>
@@ -147,14 +157,46 @@
         </div>
       </div>
       <div class="field">
-        <label class="label">Description</label>
+        <label class="label">Category</label>
         <div class="control">
-          <input
-            class="input"
-            type="text"
-            placeholder=""
-            bind:value={product.description} />
+            <CategorySelection bind:selected={product.categoryId}/>
         </div>
+      </div>
+      <div class="columns is-desktop">
+        <div class="column field">
+          <label class="label">Quantity Per Unit</label>
+          <div class="control">
+            <input
+              class="input"
+              type="text"
+              placeholder=""
+              bind:value={product.quantityPerUnit} />
+          </div>
+        </div>
+        <div class="column field">
+          <label class="label">Unit Price</label>
+          <div class="control">
+            <input
+              class="input"
+              type="text"
+              placeholder=""
+              bind:value={product.unitPrice} />
+          </div>
+        </div>
+        <div class="column field">
+          <label class="label">Unit in Stock</label>
+          <div class="control">
+            <input
+              class="input"
+              type="text"
+              placeholder=""
+              bind:value={product.unitsInStock} />
+          </div>
+        </div>
+
+
+
+
       </div>
     </section>
     <footer class="modal-card-foot">