Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changes in the UI of groups page #667

Open
wants to merge 11 commits into
base: develop
Choose a base branch
from
Open

Changes in the UI of groups page #667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
821b9b5
Revamped the UI of groups page
Jan 3, 2024
ad941e9
Fix github signin rendering
Jan 3, 2024
238a2a3
Merge branch 'develop' into feat/group/ui
skv93-coder Jan 3, 2024
bba69e0
Remove extra class
Jan 3, 2024
764143d
Removed the style in html
Jan 3, 2024
584cecd
Changed the class name
Jan 3, 2024
bc914e1
removed extra class
Jan 3, 2024
004ee1c
Removed extra class
Jan 3, 2024
b9ada46
Removed redundant code
Jan 3, 2024
fb9f422
Merge branch 'develop' into feat/group/ui
skv93-coder Jan 8, 2024
58dc41c
Merge branch 'develop' into feat/group/ui
skv93-coder Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 83 additions & 24 deletions groups/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,50 +6,109 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/images/index.ico" type="image/x-icon" />
<title>Discord Groups | Real Dev Squad</title>
<link rel="stylesheet" href="/style.css" />
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/groups/style.css" />
<script src="/constants.js"></script>
<script type="module" src="/groups/script.js" defer></script>
</head>

<body>
<nav id="tasksNav">
<div class="logo">
<a href="/index.html">
<img src="/images/[email protected]" alt="logo" />
</a>
</div>
<div class="nav-links">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="links">
<a href="https://welcome.realdevsquad.com/">Welcome</a>
<a href="https://www.realdevsquad.com/events">Events</a>
<a href="https://members.realdevsquad.com/">Members</a>
<a href="https://status.realdevsquad.com/tasks">Status</a>
</div>
</div>
<div class="sign-in-btn">
<button id="github_auth">
Sign In <span>With GitHub</span>
<img src="/images/github.png" class="user-avatar" />
</button>
</div>
<div class="user-info">
<span id="user-name"></span>
<span>
<img id="user-img" src="" alt="" />
</span>
</div>
<div id="dropdown"></div>
</nav>
<h3 class="not-verified-tag hidden">
Cannot use RDS Discord features as you are not verified
</h3>
<div class="container">
<div class="backdrop hidden">
<div class="loader"></div>
</div>
<nav class="groups-tab">
<div class="manage-groups-tab active-tab tab">Manage Groups</div>
<div class="create-groups-tab tab">Create Groups</div>
</nav>
<div class="manage-groups">
<aside class="groups">
<div class="groups-search">
<input
type="text"
class="groups-search-input"
id="search-groups"
placeholder="Search for groups"
/>
</div>
<ul class="groups-list"></ul>
</aside>
<main>
<div class="dropdown hidden" id="dropdown_container">
<button class="task_filter-button" id="sortby_text">Sort by</button>
<div class="sub_menu">
<a
><button
type="button"
tabindex="0"
class="
Header_link Header_link__vertical
Header_active
manage-groups-tab
"
>
Manage Groups
</button></a
>
<a
><button
type="button"
tabindex="0"
class="Header_link create-groups-tab"
>
Create Groups
</button></a
>
</div>
<div class="groups_container manage-groups">
<div class="search_container">
<div class="filter_container hidden" id="dropdown_container">
<div id="sortby_text">Sort by</div>
<div id="dropdown_main" class="dropdown-content">
<a data-list="1">Popular within dev</a>
<a data-list="2">Recently created</a>
<a data-list="3">Recently used</a>
</div>
</div>
<button class="btn btn-add-role" disabled>
Add me to this group
</button>
<h2 id="no-results-message">No results found.</h2>
</main>
<input
class="groups-search-input groups-search-input"
id="search-groups"
data-testid="search-input"
type="text"
placeholder="Search for groups"
spellcheck="false"
/>
</div>

<div>
<main class="groups">
<ul class="groups-list"></ul>
</main>
<div>
<h2 id="no-results-message">No results found.</h2>
</div>
</div>
<button class="btn btn-add-role" disabled>Add me to this group</button>
</div>

<div class="toaster-container">
<div id="toaster" class="toaster-message hidden"></div>
</div>
Expand Down
48 changes: 36 additions & 12 deletions groups/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,35 @@ import {
getUserGroupRoles,
getSearchValueFromURL,
} from './utils.js';
const groupTabs = document.querySelector('.groups-tab');
const tabs = document.querySelectorAll('.groups-tab div');
const tabs = document.querySelectorAll('.Header_link');
const sections = document.querySelectorAll('.manage-groups, .create-group');
const loader = document.querySelector('.backdrop');
const userIsNotVerifiedText = document.querySelector('.not-verified-tag');
const params = new URLSearchParams(window.location.search);
const searchValue = getSearchValueFromURL();
const isDev = params.get(DEV_FEATURE_FLAG) === 'true';
const dropdownContainer = document.getElementById('dropdown_container');
const githubAuth = document.getElementById('github_auth');
function goToAuthPage() {
const authUrl = `https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97&}&state=${window.location.href}`;

window.open(authUrl, '_self');
}

const hamburgerDiv = document.querySelector('.hamburger');
const navLinks = document.querySelector('.links');
let toggle = true;

hamburgerDiv.addEventListener('click', function () {
if (toggle) {
navLinks.classList.add('active');
toggle = false;
} else {
navLinks.classList.remove('active');
toggle = true;
}
});
githubAuth.addEventListener('click', goToAuthPage);
//Dropdown
const dropdownMain = document.getElementById('dropdown_main');
const dropdownTxt = document.getElementById('sortby_text');
Expand All @@ -45,6 +64,7 @@ if (searchValue) {
}
//User Data
const userSelfData = await getUserSelf();

let UserGroupData = await getUserGroupRoles();

/**
Expand Down Expand Up @@ -77,9 +97,13 @@ const createAuthorDetailsDOM = (firstName, lastName, imageUrl) => {
* GET SELF DATA
*/
const IsUserVerified = !!userSelfData.discordId;
const IsUserArchived = userSelfData.roles.archived;
if (!IsUserVerified || IsUserArchived) {
userIsNotVerifiedText.classList.remove('hidden');
const IsUserArchived = userSelfData?.roles?.archived;
if (userSelfData.statusCode !== 401) {
const signInButton = document.querySelector('.sign-in-btn');
signInButton.style.display = 'none';
if (!IsUserVerified || IsUserArchived) {
userIsNotVerifiedText.classList.remove('hidden');
}
}
const memberAddRoleBody = {
userid: userSelfData?.discordId,
Expand All @@ -102,7 +126,6 @@ const renderGroups = () => {
const formattedRoleName = removeGroupKeywordFromDiscordRoleName(
item.rolename,
);

//If searchValue present, filter out the list
if (searchValue) {
group.style.display = formattedRoleName
Expand Down Expand Up @@ -190,19 +213,20 @@ tabs?.forEach((tab, index) => {
sections.forEach((section) => {
section.classList.add('hidden');
});
tabs.forEach((t) => {
if (t.classList.contains('Header_active')) {
t.classList.remove('Header_active');
} else {
t.classList.add('Header_active');
}
});
sections[index].classList.remove('hidden');
});
});

/**
* FOR CHANGING TABS
*/
groupTabs.addEventListener('click', (e) => {
tabs.forEach((tab) => {
tab.classList?.remove('active-tab');
});
if (e.target.nodeName !== 'NAV') e.target?.classList?.add('active-tab');
});
function isRoleIdInData(data, targetRoleId) {
// Use the some() method to check if any element in data.groups has a matching roleId
return data.groups.some((group) => group.roleId === targetRoleId);
Expand Down
Loading
Loading