Skip to content

Commit

Permalink
fix: modify admin and resident side nav, helpful link card consistenc…
Browse files Browse the repository at this point in the history 
…y, and unfavoriting a helpful link per issues #658, #678, and #692 (#693)

* fix: add criteria to helpful link SQL query to use open_content_provoider_id per #692

* fix: update side navigation for administrator and resident per #658

* fix: modify helpful link card to be consistent with library card and add pager feature to helpful links page per #678
  • Loading branch information
@carddev81
carddev81 authored Jan 30, 2025
1 parent d320fca commit 51a1308
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 130 deletions.
3 changes: 2 additions & 1 deletion backend/src/database/helpful_links.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ func (db *DB) GetHelpfulLinks(page, perPage int, search, orderBy string, onlyVis

subQuery := db.Table("open_content_favorites f").
Select("1").
Where("f.content_id = helpful_links.id AND f.user_id = ?", userID)
Where(`f.content_id = helpful_links.id AND f.user_id = ?
AND f.open_content_provider_id = helpful_links.open_content_provider_id`, userID)
tx := db.Model(&models.HelpfulLink{}).Select("helpful_links.*, EXISTS(?) as is_favorited", subQuery)
var total int64

Expand Down
130 changes: 63 additions & 67 deletions frontend/src/Components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,11 @@ import {
RssIcon,
RectangleStackIcon,
CogIcon,
LightBulbIcon
LightBulbIcon,
RocketLaunchIcon,
ArrowTrendingUpIcon
} from '@heroicons/react/24/solid';
import {
getDashboardLink,
handleLogout,
hasFeature,
isAdministrator,
useAuth
} from '@/useAuth';
import { handleLogout, hasFeature, isAdministrator, useAuth } from '@/useAuth';
import Modal from '@/Components/Modal';
import ULIComponent from './ULIComponent';
import { Link } from 'react-router-dom';
Expand Down Expand Up @@ -52,12 +48,6 @@ export default function Navbar({
const confirmSeedModal = useRef<HTMLDialogElement | null>(null);
const [seedInProgress, setSeedInProgress] = useState<boolean>(false);

const dashboardTitleStudent = new Map([
['/trending-content', 'Trending Content'],
['/learning-path', 'Learning Path'],
['/program-tracker', 'Program Tracker']
]);

const handleSeedDemoData = async () => {
setSeedInProgress(true);
const resp = await API.post<null, object>(`auth/demo-seed`, {});
Expand Down Expand Up @@ -134,18 +124,29 @@ export default function Navbar({
Operational Insights
</Link>
</li>
{hasFeature(
user,
FeatureAccess.OpenContentAccess
) && (
<li>
<Link to="/knowledge-center-management/libraries">
<ULIComponent icon={BookOpenIcon} />
Knowledge Center
</Link>
</li>
)}
{hasFeature(user, FeatureAccess.ProviderAccess) && (
<>
<li>
<Link to="/course-catalog-admin">
<Link to="/learning-platforms">
<ULIComponent icon={CloudIcon} />
Course Catalog
Learning Platforms
</Link>
</li>
<li>
<Link to="/learning-platforms">
<Link to="/course-catalog-admin">
<ULIComponent icon={CloudIcon} />
Learning Platforms
Course Catalog
</Link>
</li>
</>
Expand All @@ -158,17 +159,6 @@ export default function Navbar({
</Link>
</li>
)}
{hasFeature(
user,
FeatureAccess.OpenContentAccess
) && (
<li>
<Link to="/knowledge-center-management/libraries">
<ULIComponent icon={BookOpenIcon} />
Knowledge Center
</Link>
</li>
)}
<li>
<Link to="/residents">
<ULIComponent icon={AcademicCapIcon} />
Expand All @@ -192,25 +182,54 @@ export default function Navbar({
</>
) : (
<>
<li>
<Link to={getDashboardLink(user)}>
<ULIComponent icon={HomeIcon} />
{dashboardTitleStudent.get(
getDashboardLink(user)
) ?? 'Home'}
</Link>
</li>
{hasFeature(user, FeatureAccess.ProviderAccess) && (
<>
{getDashboardLink(user) !==
'/learning-path' && (
{!hasFeature(
user,
FeatureAccess.OpenContentAccess
) &&
!hasFeature(
user,
FeatureAccess.ProviderAccess
) &&
!hasFeature(
user,
FeatureAccess.ProgramAccess
) && (
<>
<li>
<Link to="/learning-path">
<Link to="/home">
<ULIComponent icon={HomeIcon} />
My Learning
Home
</Link>
</li>
)}
</>
)}
{hasFeature(
user,
FeatureAccess.OpenContentAccess
) && (
<>
<li>
<Link to="/trending-content">
<ULIComponent icon={ArrowTrendingUpIcon} />
Trending Content
</Link>
</li>
<li>
<Link to="/knowledge-center/libraries">
<ULIComponent icon={BookOpenIcon} />
Knowledge Center
</Link>
</li>
</>
)}
{hasFeature(user, FeatureAccess.ProviderAccess) && (
<>
<li>
<Link to="/learning-path">
<ULIComponent icon={RocketLaunchIcon} />
Learning Path
</Link>
</li>
<li>
<Link to="/my-courses">
<ULIComponent
Expand All @@ -229,29 +248,6 @@ export default function Navbar({
</li>
</>
)}
{hasFeature(
user,
FeatureAccess.OpenContentAccess
) && (
<>
{user.feature_access.length > 1 && (
<li>
<Link to="/trending-content">
<ULIComponent
icon={BookOpenIcon}
/>
Trending Content
</Link>
</li>
)}
<li>
<Link to="/knowledge-center/libraries">
<ULIComponent icon={BookOpenIcon} />
Knowledge Center
</Link>
</li>
</>
)}
{hasFeature(user, FeatureAccess.ProgramAccess) && (
<li>
<Link to="/programs">
Expand Down
53 changes: 31 additions & 22 deletions frontend/src/Components/cards/HelpfulLinkCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,17 @@ export default function HelpfulLinkCard({

return (
<div
className="card p-4 space-y-2 relative"
className="card cursor-pointer"
onClick={() => {
void handleHelpfulLinkClick(link.id);
}}
>
<div className="flex p-4 gap-2 border-b-2">
<figure className="w-[48px] h-[48px] bg-cover">
<img src={link.thumbnail_url ?? ''} alt={link.title} />
</figure>
<h3 className="w-3/4 body my-auto mr-7">{link.title}</h3>
</div>
{AdminRoles.includes(role) ? (
showModal != undefined && (
<div className="flex flex-row gap-2 absolute top-4 right-4 z-100">
Expand All @@ -98,28 +104,31 @@ export default function HelpfulLinkCard({
</div>
)
) : (
<ULIComponent
iconClassName={`absolute right-1 w-6 h-6 cursor-pointer ${link.is_favorited ? 'text-primary-yellow' : ''}`}
icon={link.is_favorited ? StarIcon : StarIconOutline}
onClick={(e) => {
if (e) void handleToggleAction('favorite', e);
}}
/>
)}
<img
src={link.thumbnail_url}
alt={link.title}
className="h-16 mx-auto object-contain"
/>
<h3 className="body">{link.title}</h3>
<p className="body line-clamp-2 h-10">{link.description}</p>

{AdminRoles.includes(role) && (
<VisibleHiddenToggle
visible={visible}
changeVisibility={() => void handleToggleAction('toggle')}
/>
<div
className="absolute right-2 top-2 z-100"
onClick={(e) => void handleToggleAction('favorite', e)}
>
<ULIComponent
tooltipClassName="absolute right-2 top-2 z-100"
iconClassName={`w-6 h-6 cursor-pointer ${link.is_favorited ? 'text-primary-yellow' : ''}`}
icon={link.is_favorited ? StarIcon : StarIconOutline}
dataTip="Favorite Helpful Link"
/>
</div>
)}
<div className="p-4 space-y-2">
<p className="body-small h-[40px] leading-5 line-clamp-2">
{link.description}
</p>
{AdminRoles.includes(role) && (
<VisibleHiddenToggle
visible={visible}
changeVisibility={() =>
void handleToggleAction('toggle')
}
/>
)}
</div>
</div>
);
}
67 changes: 47 additions & 20 deletions frontend/src/Pages/HelpfulLinks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,41 +5,68 @@ import {
UserRole
} from '@/common';
import HelpfulLinkCard from '@/Components/cards/HelpfulLinkCard';
import Pagination from '@/Components/Pagination';
import { AxiosError } from 'axios';
import { useState } from 'react';
import useSWR from 'swr';

export default function HelpfulLinks() {
const [perPage, setPerPage] = useState(20);
const [pageQuery, setPageQuery] = useState<number>(1);
const {
data: helpfulLinks,
mutate: mutateHelpfulFavs,
isLoading,
error
} = useSWR<ServerResponseOne<HelpfulLinkAndSort>, AxiosError>(
`/api/helpful-links`
`/api/helpful-links?page=${pageQuery}&per_page=${perPage}`
);
function updateFavorites() {
void mutateHelpfulFavs();
}
const handleSetPerPage = (perPage: number) => {
setPerPage(perPage);
setPageQuery(1);
updateFavorites();
};
const helpfulLinksMeta = helpfulLinks?.data?.meta ?? {
total: 0,
per_page: 20,
page: 1,
current_page: 1,
last_page: 1
};
return (
<div className="grid grid-cols-4 gap-6">
{helpfulLinks?.data?.helpful_links.map((link: HelpfulLink) => (
<HelpfulLinkCard
key={link.id}
link={link}
mutate={updateFavorites}
role={UserRole.Student}
/>
))}
{error && (
<span className="text-error">
Failed to load helpful links.
</span>
)}
{!isLoading &&
!error &&
helpfulLinks?.data.helpful_links.length === 0 && (
<span className="text-error">No results</span>
<>
<div className="grid grid-cols-4 gap-6">
{helpfulLinks?.data?.helpful_links.map((link: HelpfulLink) => (
<HelpfulLinkCard
key={link.id}
link={link}
mutate={updateFavorites}
role={UserRole.Student}
/>
))}
{error && (
<span className="text-error">
Failed to load helpful links.
</span>
)}
</div>
{!isLoading &&
!error &&
helpfulLinks?.data.helpful_links.length === 0 && (
<span className="text-error">No results</span>
)}
</div>
{!isLoading && !error && helpfulLinksMeta && (
<div className="flex justify-center">
<Pagination
meta={helpfulLinksMeta}
setPage={setPageQuery}
setPerPage={handleSetPerPage}
/>
</div>
)}
</>
);
}
Loading

0 comments on commit 51a1308

Please sign in to comment.