diff --git a/__tests__/discord-groups/discord-group.test.js b/__tests__/groups/group.test.js
similarity index 85%
rename from __tests__/discord-groups/discord-group.test.js
rename to __tests__/groups/group.test.js
index 41a00de6e..146542cc7 100644
--- a/__tests__/discord-groups/discord-group.test.js
+++ b/__tests__/groups/group.test.js
@@ -1,7 +1,7 @@
const puppeteer = require('puppeteer');
const { allUsersData } = require('../../mock-data/users');
const { API_BASE_URL } = require('../../constants');
-const { discordGroups } = require('../../mock-data/discord-groups');
+const { discordGroups } = require('../../mock-data/groups');
const BASE_URL = 'https://api.realdevsquad.com';
@@ -99,7 +99,7 @@ describe('Discord Groups Page', () => {
interceptedRequest.continue();
}
});
- await page.goto('http://localhost:8000/discord-groups');
+ await page.goto('http://localhost:8000/groups');
await page.waitForNetworkIdle();
});
@@ -133,7 +133,7 @@ describe('Discord Groups Page', () => {
'.group-role',
(list) => list.length,
);
- expect(groupListLength).toBe(1);
+ expect(groupListLength).toBe(3);
});
test('Should not display an error message if the role name contains "group"', async () => {
@@ -165,4 +165,28 @@ describe('Discord Groups Page', () => {
await createGroupBtn.click();
await expect(alertMessage).toContain("Roles cannot contain 'group'.");
});
+
+ test('Filter groups based on search input', async () => {
+ const searchInput = await page.$('#search-groups');
+ await searchInput.type('DSA');
+
+ const filteredGroupNames = await page.$$eval('.group-role', (elements) => {
+ return elements
+ .map((element) => element.querySelector('.group-name').textContent)
+ .filter((name) => name.includes('DSA'));
+ });
+
+ expect(filteredGroupNames).toEqual(
+ expect.arrayContaining(['group-DSA', 'group-DSA-Coding-Group']),
+ );
+ });
+
+ test('should update the URL when a group role is clicked', async () => {
+ await page.$$eval('.group-role', (elements) => {
+ elements[1].click();
+ });
+ const url = await page.url();
+ const searchParams = decodeURIComponent(url.split('?')[1]);
+ expect(searchParams).toMatch('group-DSA');
+ });
});
diff --git a/discord-groups/constants.js b/groups/constants.js
similarity index 100%
rename from discord-groups/constants.js
rename to groups/constants.js
diff --git a/discord-groups/index.html b/groups/index.html
similarity index 83%
rename from discord-groups/index.html
rename to groups/index.html
index 9ee857ab2..c5e254624 100644
--- a/discord-groups/index.html
+++ b/groups/index.html
@@ -7,9 +7,9 @@
Discord Groups | Real Dev Squad
-
+
-
+
@@ -23,6 +23,14 @@
diff --git a/discord-groups/script.js b/groups/script.js
similarity index 78%
rename from discord-groups/script.js
rename to groups/script.js
index 3f9f8ee66..e66be4ac3 100644
--- a/discord-groups/script.js
+++ b/groups/script.js
@@ -58,6 +58,9 @@ groupsData?.forEach((item) => {
group.appendChild(createdBy);
group.setAttribute('id', item.roleid);
group.classList.add('group-role');
+ if (window.location.search.slice(1) === item.rolename) {
+ group.classList.add('active-group');
+ }
groupRoles.appendChild(group);
});
@@ -87,13 +90,19 @@ groupTabs.addEventListener('click', (e) => {
/**
* FOR SELECTING A GROUP
*/
+const pathname = window.location.pathname;
const groupRolesList = document.querySelectorAll('.group-role');
groupRoles?.addEventListener('click', function (event) {
groupRolesList.forEach((groupItem) => {
+ window.history.pushState({}, '', pathname);
groupItem.classList?.remove('active-group');
});
const groupListItem = event.target?.closest('li');
if (groupListItem) {
+ const newURL = `${window.location.pathname}?${
+ groupListItem.querySelector('p').textContent
+ }`;
+ window.history.pushState({}, '', newURL);
groupListItem.classList.add('active-group');
memberAddRoleBody.roleid = groupListItem.id;
if (IsUserVerified) {
@@ -102,6 +111,35 @@ groupRoles?.addEventListener('click', function (event) {
}
});
+// const paragraphElement = null, paragraphContent = '';
+const searchInput = document.getElementById('search-groups');
+
+function debounce(func, delay) {
+ let timeoutId;
+ return function (...args) {
+ timeoutId = setTimeout(() => {
+ clearTimeout(timeoutId);
+ func.apply(this, args);
+ }, delay);
+ };
+}
+
+searchInput.addEventListener('keyup', () => {
+ loader.classList.remove('hidden');
+ debounce(() => {
+ const searchValue = searchInput.value.toUpperCase();
+ const groupRoles = document.querySelectorAll('.group-role');
+ groupRoles.forEach((groupRole) => {
+ const paragraphElement = groupRole.getElementsByTagName('p')[0];
+ const paragraphContent = paragraphElement.textContent;
+ const displayValue =
+ paragraphContent.toUpperCase().indexOf(searchValue) > -1 ? '' : 'none';
+ groupRole.style.display = displayValue;
+ loader.classList.add('hidden');
+ });
+ }, 1000)();
+});
+
/**
* TO ASSIGN YOURSELF A ROLE
*/
diff --git a/discord-groups/style.css b/groups/style.css
similarity index 69%
rename from discord-groups/style.css
rename to groups/style.css
index c7be08c2e..45b27f080 100644
--- a/discord-groups/style.css
+++ b/groups/style.css
@@ -3,12 +3,15 @@
padding: 0;
}
:root {
- --color-groups-tab-background: #1d1283;
- --color-active-tabs-color: #87d870;
- --color-active-groups-background: #337ad7b0;
- --color-buttons-background: #041187;
- --color-loader-border: #f3f3f3;
- --color-loader-border-top: #3498db;
+ --color-groups-tab-background: rgb(29, 18, 131);
+ --color-active-tabs-color: rgb(135, 216, 112);
+ --color-active-groups-background: rgba(51, 122, 215, 0.69);
+ --color-buttons-background: rgb(4, 17, 135);
+ --color-loader-border: rgb(243, 243, 243);
+ --color-loader-border-top: rgb(52, 152, 219);
+ --color-list-border: rgba(0, 0, 0, 0.2);
+ --color-white: rgb(255, 255, 255);
+ --color-not-verified: rgb(255, 0, 0);
}
.container {
font-family: 'Roboto', sans-serif;
@@ -34,7 +37,7 @@
.tab {
font-size: larger;
font-weight: bolder;
- color: #fff;
+ color: var(--color-white);
cursor: pointer;
margin: 1.6rem;
padding-bottom: 0.4rem;
@@ -63,27 +66,48 @@
display: flex;
align-items: center;
justify-content: center;
+ flex-direction: column;
+ gap: 10px;
}
.groups {
- overflow: scroll;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-.groups::-webkit-scrollbar {
- width: 6px;
- height: 6px;
+.groups-search {
+ margin: 10px;
+ height: 4rem;
+ width: 100%;
+ position: sticky;
+ top: 0;
+ background: var(--color-white);
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-.groups::-webkit-scrollbar-thumb {
- background: var(--color-buttons-background);
- border-radius: 1.2rem;
+.groups-search-input {
+ height: 2rem;
+ width: 90%;
+ padding-left: 2px;
}
.groups-list {
padding: 0.8rem;
list-style: none;
- height: 80vh;
+ height: 66vh;
+ overflow-y: scroll;
+}
+.groups-list::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+.groups-list::-webkit-scrollbar-thumb {
+ background: var(--color-buttons-background);
+ border-radius: 1.2rem;
}
.groups-list li {
padding: 0.8rem;
- border: 1px solid rgba(0, 0, 0, 0.2);
+ border: 1px solid var(--color-list-border);
margin-bottom: 0.6rem;
border-radius: 0.6rem;
}
@@ -130,7 +154,7 @@
.btn-add-role:not([disabled]),
.btn-create-group {
background: var(--color-buttons-background);
- color: #fff;
+ color: var(--color-white);
border: none;
}
@@ -169,7 +193,7 @@ NOT VERIFIED TEXT ABOVE
*/
.not-verified-tag {
- color: red;
+ color: var(--color-not-verified);
text-align: center;
}
@@ -177,10 +201,9 @@ NOT VERIFIED TEXT ABOVE
.manage-groups {
flex-direction: column-reverse;
padding: 1.2rem;
- gap: 1.2rem;
}
.groups-list {
- height: 60vh;
+ height: 54vh;
}
.group-name {
font-size: large;
diff --git a/discord-groups/utils.js b/groups/utils.js
similarity index 100%
rename from discord-groups/utils.js
rename to groups/utils.js
diff --git a/index.html b/index.html
index f8717f6de..8d879b288 100644
--- a/index.html
+++ b/index.html
@@ -79,9 +79,7 @@
Online Members
-
- Discord Groups
-
+ Discord Groups
Standup Updates
diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
index 2e254f1c9..2c0b3c6e6 100644
--- a/jest-puppeteer.config.js
+++ b/jest-puppeteer.config.js
@@ -3,6 +3,7 @@ const baseOptions = {
server: {
command: 'npm start',
port: 8000,
+ launchTimeout: 30000,
},
};
const ciPipelineOptions = {
diff --git a/mock-data/discord-groups/index.js b/mock-data/discord-groups/index.js
deleted file mode 100644
index 0e8fdcc8e..000000000
--- a/mock-data/discord-groups/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const discordGroups = {
- message: 'Roles fetched successfully!',
- groups: [
- {
- id: 'CqnEhbwtCqdcZdlrixLn',
- date: {
- _seconds: 1683238758,
- _nanoseconds: 183000000,
- },
- createdBy: 'V4rqL1aDecNGoa1IxiCu',
- rolename: 'group-first-daaa',
- roleid: '1103808103641780225',
- },
- ],
-};
-
-module.exports = { discordGroups };
diff --git a/mock-data/groups/index.js b/mock-data/groups/index.js
new file mode 100644
index 000000000..caae9c572
--- /dev/null
+++ b/mock-data/groups/index.js
@@ -0,0 +1,37 @@
+const discordGroups = {
+ message: 'Roles fetched successfully!',
+ groups: [
+ {
+ id: 'CqnEhbwtCqdcZdlrixLn',
+ date: {
+ _seconds: 1683238758,
+ _nanoseconds: 183000000,
+ },
+ createdBy: 'V4rqL1aDecNGoa1IxiCu',
+ rolename: 'group-first-daaa',
+ roleid: '1103808103641780225',
+ },
+ {
+ id: 'Mky71E6f6QWCY5MOBJFy',
+ date: {
+ _seconds: 1687619454,
+ _nanoseconds: 560000000,
+ },
+ createdBy: 'jbGcfZLGYjHwxQ1Zh8ZJ',
+ rolename: 'group-DSA',
+ roleid: '1122182070509244416',
+ },
+ {
+ id: '"mvWVuAxtSuhQtunjcywv"',
+ date: {
+ _seconds: 1684078062,
+ _nanoseconds: 434000000,
+ },
+ createdBy: 'k15z2SLFe1U2J3gshXUG',
+ rolename: 'group-DSA-Coding-Group',
+ roleid: '1107328395722899496',
+ },
+ ],
+};
+
+module.exports = { discordGroups };
diff --git a/users/script.js b/users/script.js
index b769f3d38..eccc1c485 100644
--- a/users/script.js
+++ b/users/script.js
@@ -396,6 +396,7 @@ function populateAvailability() {
{ name: 'Active', id: 'ACTIVE' },
{ name: 'Ooo (Out of Office)', id: 'OOO' },
{ name: 'Idle', id: 'IDLE' },
+ { name: 'Onboarding', id: 'ONBOARDING' },
];
for (let i = 0; i < availabilityArr.length; i++) {
const { name, id } = availabilityArr[i];