SDSDashboard and GLDashboard

SundarbansWebOps · Sep 20, 2024 · 4bc53d2 · 4bc53d2
1 parent 7c36541
commit 4bc53d2
Show file tree

Hide file tree

Showing 6 changed files with 682 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "autoprefixer": "^10.4.16",
     "axios": "^1.6.2",
     "core-js": "^3.8.3",
-    "marked": "^14.0.0",
+    "marked": "^14.1.2",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.3.6",
     "vue": "^3.2.13",

diff --git a/src/components/GLDashboard.vue b/src/components/GLDashboard.vue
@@ -0,0 +1,237 @@
+<template>
+    <div>
+      <!-- Dropdown to select search type (Name or Email) -->
+      <select v-model="searchType">
+        <option value="name">Name</option>
+        <option value="email">Email</option>
+      </select>
+
+      <!-- Search bar to filter table -->
+      <input
+        type="text"
+        v-model="searchQuery"
+        placeholder="Search by selected option"
+        @input="debouncedSearch"
+      />
+
+      <!-- Container to make the table vertically scrollable -->
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Mobile Number</th>
+              <th>Photo</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="user in filteredUsers" :key="user.email">
+              <td>{{ user.name }}</td>
+              <td>{{ user.email }}</td>
+              <td>{{ user.mobile }}</td>
+              <td><img :src="user.photo" alt="User Photo" width="50" /></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </template>
+
+  <script>
+  import _ from 'lodash'; // for debounce
+  
+  export default {
+    data() {
+      return {
+        searchQuery: "",     // The search input from the user
+        searchType: "name",  // Default search type is by name
+        users: [
+  {
+    "name": "Bob Johnson",
+    "email": "[email protected]",
+    "mobile": "456-789-1234",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Alice Smith",
+    "email": "[email protected]",
+    "mobile": "123-456-7890",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Charlie Brown",
+    "email": "[email protected]",
+    "mobile": "234-567-8901",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "David White",
+    "email": "[email protected]",
+    "mobile": "345-678-9012",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Emily Davis",
+    "email": "[email protected]",
+    "mobile": "456-789-0123",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Frank Miller",
+    "email": "[email protected]",
+    "mobile": "567-890-1234",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Grace Lee",
+    "email": "[email protected]",
+    "mobile": "678-901-2345",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Henry Wilson",
+    "email": "[email protected]",
+    "mobile": "789-012-3456",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Ivy Moore",
+    "email": "[email protected]",
+    "mobile": "890-123-4567",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Jack Taylor",
+    "email": "[email protected]",
+    "mobile": "901-234-5678",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Karen Clark",
+    "email": "[email protected]",
+    "mobile": "123-567-8901",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Larry Lewis",
+    "email": "[email protected]",
+    "mobile": "234-678-9012",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Megan Walker",
+    "email": "[email protected]",
+    "mobile": "345-789-0123",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Nathan Harris",
+    "email": "[email protected]",
+    "mobile": "456-890-1234",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Olivia Martin",
+    "email": "[email protected]",
+    "mobile": "567-901-2345",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Paul Robinson",
+    "email": "[email protected]",
+    "mobile": "678-012-3456",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Quincy Adams",
+    "email": "[email protected]",
+    "mobile": "789-123-4567",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Rachel King",
+    "email": "[email protected]",
+    "mobile": "890-234-5678",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Steve Cooper",
+    "email": "[email protected]",
+    "mobile": "901-345-6789",
+    "photo": "https://via.placeholder.com/50"
+  },
+  {
+    "name": "Tina Campbell",
+    "email": "[email protected]",
+    "mobile": "123-678-9012",
+    "photo": "https://via.placeholder.com/50"
+  }
+]
+
+      };
+    },
+    computed: {
+      filteredUsers() {
+        const query = this.searchQuery.toLowerCase();
+  
+        // Filter based on search type (Name or Email)
+        return this.users.filter(user => {
+          if (this.searchType === "name") {
+            return user.name.toLowerCase().includes(query);
+          } else if (this.searchType === "email") {
+            return user.email.toLowerCase().includes(query);
+          }
+        });
+      }
+    },
+    methods: {
+      handleSearch() {
+        // For now, it searches on the frontend.
+        // Later, replace this part with an API call to the backend.
+      },
+      debouncedSearch: _.debounce(function () {
+        this.handleSearch();
+      }, 300) // debounce with a delay of 300ms
+    }
+  };
+  </script>
+
+  <style>
+  /* Container for making the table vertically scrollable */
+  .table-container {
+    max-height: 300px; /* Set the height as needed */
+    overflow-y: auto;  /* Enable vertical scrolling */
+    border: 1px solid #ddd; /* Optional: for better visibility */
+    position: relative;
+  }
+  
+  /* Styling for the table */
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  th, td {
+    border: 1px solid #ddd;
+    padding: 8px;
+  }
+  
+  /* Fix the table header */
+  thead th {
+    position: sticky;
+    top: 0;
+    background-color: #f2f2f2;
+    z-index: 1;
+  }
+  
+  /* Optional: Make the header more visible when scrolling */
+  thead {
+    background-color: #f8f9fa; /* Slightly different color for visibility */
+  }
+  
+  /* Basic table and image styling */
+  img {
+    border-radius: 50%;
+  }
+  </style>
+