update/sort assets

src/public/scripts/assetManager.js

@@ -150,6 +150,41 @@ function selectIcon(selectedIcon, assetId="") {
     `;
 }
 
+/**
+ * selectFilter to filter assets by type
+ * @param {button elemenbt} filter 
+ */
+function selectFilter(filter) {
+    const types = ["other", "saving", "stock"];
+
+    console.log(filter.value);
+
+    types.forEach((type) => {
+        if (filter.value == "all") {
+            document.querySelectorAll(`.${type}-asset`).forEach((preview) => {
+                preview.style.display = "block";
+            });
+        } else if (type != filter.value) {
+            document.querySelectorAll(`.${type}-asset`).forEach((preview) => {
+                preview.style.display = "none";
+            });
+        } else if (type == filter.value) {
+            document.querySelectorAll(`.${type}-asset`).forEach((preview) => {
+                preview.style.display = "block";
+            });
+        }
+    });
+
+    document.getElementById("dropdown-filters-button").innerHTML = `
+        <span class="inline-flex items-center">
+            ${filter.value.charAt(0).toUpperCase() + filter.value.slice(1)} Assets
+            <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+            </svg>
+        </span>
+    `;
+}
+
 /**
  * toggleYear shows or hides year input
  * @param {string} type of asset

src/views/assets.ejs

@@ -25,11 +25,45 @@
         </div>
 
         <div class="w-md my-6 max-w-md mx-auto px-4 flex flex-row justify-between">
-            <a href="/home" class="text-center w-sm py-2 mx-2 px-4 border 
+            <button 
-            border-transparent rounded-md shadow-sm text-sm font-medium 
+                id="dropdown-filters-button" 
-            text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
+                value=""
-                Back to Dashboard
+                data-dropdown-toggle="dropdown-filters" 
-            </a>
+                class="text-center w-sm py-2 py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 
+                hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer"
+                type="button"
+            >
+                <span class="inline-flex items-center">
+                    All Assets
+                    <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+                    </svg>
+                </span>
+            </button>
+            <div id="dropdown-filters" class="overflow-y-auto h-40 z-10 hidden divide-y divide-gray-100 rounded-lg shadow-sm w-32 bg-gray-700">
+                <ul id="dropdown-filters-ul" class="py-2 text-sm text-gray-200" aria-labelledby="dropdown-filters-button">
+                    <li>
+                        <button onclick="selectFilter(this)" type="button" value="all" class="inline-flex w-full px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 hover:text-white" role="menuitem">
+                            <span class="inline-flex items-center">All Assets</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button onclick="selectFilter(this)" type="button" value="other" class="inline-flex w-full px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 hover:text-white" role="menuitem">
+                            <span class="inline-flex items-center">Other Assets</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button onclick="selectFilter(this)" type="button" value="saving" class="inline-flex w-full px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 hover:text-white" role="menuitem">
+                            <span class="inline-flex items-center">Savings Assets</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button onclick="selectFilter(this)" type="button" value="stock" class="inline-flex w-full px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 hover:text-white" role="menuitem">
+                            <span class="inline-flex items-center">Stocks Assets</span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
             <button 
                 class="text-center w-sm py-2 py-2 mx-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 
                 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer"

src/views/partials/assetPreview.ejs

@@ -1,5 +1,5 @@
 <!-- Clickable asset list item -->
-<div class="mt-4 max-w-md mx-auto bg-white rounded-lg shadow-md">
+<div class="mt-4 max-w-md mx-auto bg-white rounded-lg shadow-md <%= asset.type %>-asset">
     <button 
         onclick="document.getElementById('<%= asset._id %>-modal').showModal()" 
         style="width: 100%; height: 100%;"