add order selector

src/routes/portfolio/+page.svelte

@@ -58,10 +58,15 @@
                 result = portfolio[0].stocks.sort((a, b) => a.code.localeCompare(b.code));
             }
 
+            if (orderBy === "name") {
+                result = portfolio[0].stocks.sort((a, b) => a.name.localeCompare(b.name));
+            }
+
             if (orderBy === "total") {
                 result = portfolio[0].stocks.sort((a, b) => a.total - b.total);
             }
 
+            result = portfolio[0].stocks;
             totalValue = portfolio[0].totalValue;
             totalAssets = portfolio[0].totalAssets;
             portfolioId = portfolio[0].id;
@@ -173,6 +178,11 @@
         searchStockResult = [];
         showModal = !showModal;
     }
+
+    function updateOrderBy(event) {
+        orderBy = event.target.value;
+        fetchPortfolio()
+    }
 </script>
 
 <svelte:head>
@@ -184,8 +194,16 @@
     <div in:fade>Loading...</div>
 {:else if result.length !== 0}
 
-    <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" on:click={closeOrOpenModal}>Add
-    </button>
+    <div class="button-container">
+        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal" on:click={closeOrOpenModal}>Add</button>
+
+        <!-- Dropdown for ordering the list -->
+        <select class="form-control order-select" on:change={updateOrderBy}>
+            <option value="code">Order by Code</option>
+            <option value="name">Order by Name</option>
+            <option value="total" selected>Order by Total</option>
+        </select>
+    </div>
 
     {#if showModal}
         <div class="modal-container">
@@ -445,46 +463,15 @@
         transition: transform 0.3s ease-in-out;
     }
 
-    /* Form input fields styling */
-    input[type="text"],
-    input[type="number"],
-    input[type="reset"],
-    input[type="submit"] {
-        font-size: 1rem;
-        padding: 10px;
-        margin: 2px;
-        border-radius: 8px;
-        border: 1px solid #ddd;
-        width: 100%;
-        transition: border-color 0.3s ease;
-    }
-
-    /* Button specific styles */
-    input[type="submit"] {
-        background-color: #3498db;
-        color: white;
-        cursor: pointer;
-        border: none;
-    }
-
-    input[type="submit"]:hover {
-        background-color: #2980b9;
-    }
-
-    input[type="reset"] {
-        background-color: #e74c3c;
-        color: white;
-        border: none;
+    /* Button container for Add and Dropdown */
+    .button-container {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 1rem;
     }
 
-    input[type="reset"]:hover {
-        background-color: #c0392b;
-    }
-
-    input[type="text"]:focus,
-    input[type="number"]:focus {
-        outline: none;
-        border-color: #2980b9;
+    .order-select {
+        width: 200px;
     }
 
     /* Results section styling */
@@ -533,5 +520,4 @@
             opacity: 1;
         }
     }
-
 </style>