chore: fix filters

Real-Dev-Squad · Jan 26, 2025 · ce9946c · ce9946c
1 parent f42e780
commit ce9946c
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 44 deletions.
diff --git a/constants.js b/constants.js
@@ -1,4 +1,4 @@
-const API_BASE_URL = window.API_BASE_URL || 'https://api.realdevsquad.com';
+const API_BASE_URL = 'http://localhost:3000';
 const REPO_SYNC_API_URL =
   'https://staging-sync.staging-realdevsquad-com.workers.dev';
 const USER_MANAGEMENT_LINK = 'user-management-link';

diff --git a/feed/index.html b/feed/index.html
@@ -21,12 +21,24 @@
     <nav id="tasksNav"></nav>
     <h1 id="pageTitle">Activity Feed</h1>
     <div class="filters">
-      <input type="text" id="assignee-search" placeholder="Username" />
-      <input type="date" id="start-date" />
-      <input type="date" id="end-date" />
-      <button id="apply-filter">Apply Filter</button>
-      <button id="clear-filter">Clear Filters</button>
+      <div class="filter-row">
+        <div class="input-wrapper">
+          <input type="text" id="assignee-search" placeholder="Username" />
+          <span id="clear-username" class="clear-icon">×</span>
+        </div>
+      </div>
+      <div class="filter-row">
+        <div class="filter-start-date">
+          <label for="start-date">Start Date</label>
+          <input type="date" id="start-date" />
+        </div>
+        <div class="filter-end-date">
+          <label for="end-date">End Date</label>
+          <input type="date" id="end-date" />
+        </div>
+      </div>
     </div>
+
     <ul id="ACITIVITY_FEED_CONTAINER"></ul>
     <nav class="tabs-container">
       <ul class="tabs"></ul>

diff --git a/feed/script.js b/feed/script.js
@@ -21,7 +21,7 @@ const tabsData = [
 
 async function renderFeed() {
   changeFilter();
-  await populateActivityFeed({ category });
+  await populateActivityFeed({ category: currentCategory, ...activeFilters });
   addIntersectionObserver();
 }
 
@@ -297,19 +297,45 @@ function formatTaskRequestsLog(data) {
   );
 }
 
+function addEmptyPageMessage(container) {
+  const emptyMessage = document.createElement('p');
+  emptyMessage.classList.add('empty-message');
+  emptyMessage.textContent = 'No logs to show!';
+  container.appendChild(emptyMessage);
+}
+
 async function populateActivityFeed(query = {}, newLink) {
+  console.log('Populating logs with filters:', activeFilters);
+
   activityFeedPage++;
   const currentVersion = activityFeedPage;
+
+  // Combine active filters with the provided query
+  const combinedQuery = { ...query, ...activeFilters };
+
+  console.log({ combinedQuery });
+
   try {
     isDataLoading = true;
     addLoader(container);
-    const activityFeedData = await getActivityFeedData(query, newLink);
+
+    const activityFeedData = await getActivityFeedData(combinedQuery, newLink);
+
+    activityFeedContainer.innerHTML = '';
+
     if (activityFeedData) {
       nextLink = activityFeedData.next;
       const allActivityFeedData = activityFeedData.data;
+
       if (currentVersion !== activityFeedPage) {
         return;
       }
+
+      if (allActivityFeedData.length === 0) {
+        addEmptyPageMessage(activityFeedContainer);
+        return;
+      }
+
       for (const data of allActivityFeedData) {
         const renderedItem = renderActivityItem(data);
         activityFeedContainer.appendChild(renderedItem);
@@ -319,6 +345,7 @@ async function populateActivityFeed(query = {}, newLink) {
     showMessage(activityFeedContainer, error);
   } finally {
     if (currentVersion !== activityFeedPage) return;
+
     removeLoader('loader');
     isDataLoading = false;
   }
@@ -369,15 +396,6 @@ async function getActivityFeedData(query = {}, nextLink) {
   }
 }
 
-let activeFilters = {
-  username: null,
-  startDate: null,
-  endDate: null,
-};
-
-document.getElementById('apply-filter').addEventListener('click', applyFilter);
-document.getElementById('clear-filter').addEventListener('click', clearFilters);
-
 let currentCategory = CATEGORY.ALL;
 
 function handleTabClick(tab) {
@@ -389,28 +407,46 @@ function handleTabClick(tab) {
   populateActivityFeed({ category: currentCategory });
 }
 
+let activeFilters = {
+  username: null,
+  startDate: null,
+  endDate: null,
+};
+
+document
+  .getElementById('assignee-search')
+  .addEventListener('input', applyFilter);
+document
+  .getElementById('clear-username')
+  .addEventListener('click', clearUsernameFilter);
+document.getElementById('start-date').addEventListener('change', applyFilter);
+document.getElementById('end-date').addEventListener('change', applyFilter);
+
 function applyFilter() {
   const username = document.getElementById('assignee-search').value.trim();
   const startDate = document.getElementById('start-date').value;
   const endDate = document.getElementById('end-date').value;
+
+  if (startDate && endDate && new Date(startDate) > new Date(endDate)) {
+    alert('Start Date cannot be later than End Date!');
+    return;
+  }
+
   activeFilters.username = username || null;
   activeFilters.startDate = startDate
     ? new Date(startDate).toISOString()
     : null;
   activeFilters.endDate = endDate ? new Date(endDate).toISOString() : null;
 
-  refreshFeed();
+  console.log('Active filters:', activeFilters);
+  populateActivityFeed({ category: currentCategory, ...activeFilters });
 }
 
-function clearFilters() {
+function clearUsernameFilter() {
   document.getElementById('assignee-search').value = '';
-  document.getElementById('start-date').value = '';
-  document.getElementById('end-date').value = '';
-
-  activeFilters = {};
-
-  console.log('Cleared filters, activeFilters:', activeFilters);
-  refreshFeed();
+  activeFilters.username = null;
+  console.log('Username filter cleared. Active filters:', activeFilters);
+  populateActivityFeed();
 }
 
 // main entry

diff --git a/feed/style.css b/feed/style.css
@@ -1,5 +1,26 @@
+:root {
+  --background-color: #dbe9f9;
+  --blue-color: #007bff;
+  --white-color: #ffffff;
+  --gray-color: #aaa;
+  --light-gray-color: #e0e0e0;
+  --dark-gray-color: #080707;
+  --pink-color: rgb(198, 78, 170);
+  --light-pink-color: rgb(180, 70, 150);
+  --dark-pink-color: rgb(165, 65, 135);
+  --teal-color: rgb(98, 178, 170);
+  --light-teal-color: rgb(88, 160, 150);
+  --red-color: rgb(255, 102, 102);
+  --light-red-color: rgb(235, 85, 85);
+  --tab-background-color: #f6faff;
+  --tab-border-color: #ddd;
+  --activity-item-background: #ffffff;
+  --activity-item-border: #ddd;
+  --primary-color: #1d1283;
+}
+
 body {
-  background: #dbe9f9;
+  background: var(--background-color);
 }
 
 .header {
@@ -16,7 +37,7 @@ body {
 }
 
 .activity-feed {
-  border: 1px solid #ddd;
+  border: 1px solid var(--activity-item-border);
   padding: 1rem;
   margin-bottom: 1rem;
 }
@@ -28,17 +49,17 @@ body {
 
 .activity-item {
   margin-bottom: 0.5rem;
-  display: flex; /* Allow for inline elements with spacing */
+  display: flex;
   border: 1.5px;
   border-radius: 5px;
   padding: 0 10px;
-  background: white;
+  background: var(--activity-item-background);
   width: 100%;
   flex-direction: column;
 }
 
 .activity-item a {
-  color: #007bff;
+  color: var(--blue-color);
   text-decoration: none;
 }
 
@@ -48,12 +69,13 @@ body {
 
 .activity-item time {
   font-size: 0.8rem;
-  color: #aaa;
+  color: var(--gray-color);
 }
+
 .tabs-container {
-  margin: 0 auto; /* Center the tabs container horizontally */
-  max-width: 800px; /* Set a maximum width */
-  padding: 15px; /* Add some padding around the tabs */
+  margin: 0 auto;
+  max-width: 800px;
+  padding: 15px;
 }
 
 .tabs {
@@ -62,12 +84,12 @@ body {
   list-style: none;
   padding: 0;
   margin: 0;
-  background: #f6faff;
-  border-bottom: 2px solid #ddd;
+  background: var(--tab-background-color);
+  border-bottom: 2px solid var(--tab-border-color);
 }
 
 .tabs li {
-  padding: 15px 25px; /* Adjust padding for desired spacing */
+  padding: 15px 25px;
   font-weight: bold;
   cursor: pointer;
   text-align: center;
@@ -76,20 +98,20 @@ body {
 }
 
 .tabs li:hover {
-  background-color: #e0e0e0;
+  background-color: var(--light-gray-color);
 }
 
 .tabs li.active {
-  border-bottom: 4px solid rgb(198, 78, 170);
+  border-bottom: 4px solid var(--pink-color);
   font-weight: bold;
-  color: #080707;
-  background-color: #ffffff;
+  color: var(--dark-gray-color);
+  background-color: var(--white-color);
 }
 
 .timestamp {
   text-align: right;
   font-size: 10px;
-  color: gray;
+  color: var(--gray-color);
 }
 
 .img_icon {
@@ -103,7 +125,6 @@ body {
   gap: 10px;
 }
 
-/* Loader Container */
 .loader-text {
   text-align: center;
   font-size: 1.5rem;
@@ -124,3 +145,58 @@ body {
   font-weight: 800;
   font-size: 2em;
 }
+
+.filters {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  max-width: 50rem;
+}
+
+.filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content: space-between;
+}
+
+.input-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 15rem;
+}
+
+#assignee-search {
+  width: 100%;
+  padding: 8px 35px 8px 10px;
+  border: 1px solid var(--input-border);
+  border-radius: 5px;
+  font-size: 1rem;
+  background: var(--light-gray-color);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: border-color 0.2s ease-in-out;
+}
+
+.clear-icon {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: var(--input-border);
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.clear-icon:hover {
+  color: var(--primary-color);
+}
+
+.filters input[type='date'] {
+  padding: 8px 10px;
+  border: 1px solid var(--input-border);
+  border-radius: 5px;
+  font-size: 1rem;
+  background: var(--light-gray-color);
+  max-width: 15rem;
+}