mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
Merge pull request #97 from learnhouse/swve/eng-71-trail-remake
Redesign + Fix Trail remaining issues
This commit is contained in:
Badr B
GitHub
commit
23884ca356
11 changed files with 218 additions and 156 deletions
|
|
@ -56,7 +56,7 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.course.name}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<ActivityIndicators current_activity={activityid} orgslug={orgslug} course={course} />
|
||||
<ActivityIndicators course_id={courseid} current_activity={activityid} orgslug={orgslug} course={course} />
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col -space-y-1">
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ const CourseClient = (props: any) => {
|
|||
router.refresh();
|
||||
}
|
||||
|
||||
console.log(course);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -54,7 +53,7 @@ const CourseClient = (props: any) => {
|
|||
|
||||
</div>
|
||||
|
||||
<ActivityIndicators orgslug={orgslug} course={course} />
|
||||
<ActivityIndicators course_id={props.course.course.course_id} orgslug={orgslug} course={course} />
|
||||
|
||||
<div className="flex flex-row pt-10 flex-wrap">
|
||||
<div className="course_metadata_left grow space-y-2">
|
||||
|
|
|
|||
|
|
@ -1,104 +1,33 @@
|
|||
"use client";
|
||||
import PageLoading from "@components/Objects/Loaders/PageLoading";
|
||||
import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle";
|
||||
import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
|
||||
import { getAPIUrl, getBackendUrl } from "@services/config/config";
|
||||
import { swrFetcher } from "@services/utils/ts/requests";
|
||||
import React from "react";
|
||||
import { styled } from "styled-components";
|
||||
import useSWR from "swr";
|
||||
import { Metadata } from "next";
|
||||
import { getOrganizationContextInfo } from "@services/organizations/orgs";
|
||||
import Trail from "./trail";
|
||||
|
||||
function Trail(params: any) {
|
||||
let orgslug = params.params.orgslug;
|
||||
const { data: trail, error: error } = useSWR(`${getAPIUrl()}trail/org_slug/${orgslug}/trail`, swrFetcher);
|
||||
|
||||
|
||||
return (
|
||||
<GeneralWrapperStyled>
|
||||
<TypeOfContentTitle title="Trail" type="tra" />
|
||||
{!trail ? (
|
||||
<PageLoading></PageLoading>
|
||||
) : (
|
||||
<div>
|
||||
{trail.courses.map((course: any) => (
|
||||
<TrailBox key={trail.trail_id}>
|
||||
<TrailMetadata>
|
||||
<TrailThumbnail>
|
||||
<img src={`${getBackendUrl()}content/uploads/img/${course.course_object.thumbnail}`}></img>
|
||||
</TrailThumbnail>
|
||||
<TrailInfo>
|
||||
<h2>Course</h2>
|
||||
<h3>{course.course_object.name}</h3>
|
||||
</TrailInfo>
|
||||
</TrailMetadata>
|
||||
<TrailProgress progress={course.progress} />
|
||||
</TrailBox>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</GeneralWrapperStyled>
|
||||
);
|
||||
type MetadataProps = {
|
||||
params: { orgslug: string };
|
||||
searchParams: { [key: string]: string | string[] | undefined };
|
||||
};
|
||||
|
||||
export async function generateMetadata(
|
||||
{ params }: MetadataProps,
|
||||
): Promise<Metadata> {
|
||||
|
||||
// Get Org context information
|
||||
const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });
|
||||
return {
|
||||
title: "Trail — " + org.name,
|
||||
description: 'Check your progress using trail and easily navigate through your courses.',
|
||||
};
|
||||
}
|
||||
|
||||
export default Trail;
|
||||
const TrailPage = async (params: any) => {
|
||||
let orgslug = params.params.orgslug;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Trail orgslug={orgslug} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const TrailMetadata = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
const TrailBox = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.206);
|
||||
background: #ffffff;
|
||||
`;
|
||||
|
||||
const TrailThumbnail = styled.div`
|
||||
padding-right: 30px;
|
||||
height: 100%;
|
||||
border-radius: 7px 0px 0px 7px;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
`;
|
||||
|
||||
const TrailInfo = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 0px 7px 7px 0px;
|
||||
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
color: #2b2b2b;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 23px;
|
||||
color: #2b2b2b;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const TrailProgress = styled.div`
|
||||
margin-top: 10px;
|
||||
border-radius: 20px;
|
||||
height: 10px;
|
||||
width: ${(props: any) => props.progress + "%"};
|
||||
background: #06a487;
|
||||
`;
|
||||
export default TrailPage;
|
||||
38
front/app/orgs/[orgslug]/(withmenu)/trail/trail.tsx
Normal file
38
front/app/orgs/[orgslug]/(withmenu)/trail/trail.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
"use client";
|
||||
import PageLoading from "@components/Objects/Loaders/PageLoading";
|
||||
import TrailCourseElement from "@components/Pages/Trail/TrailCourseElement";
|
||||
import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle";
|
||||
import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
|
||||
import { getAPIUrl } from "@services/config/config";
|
||||
import { removeCourse } from "@services/courses/activity";
|
||||
import { revalidateTags, swrFetcher } from "@services/utils/ts/requests";
|
||||
import React from "react";
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
function Trail(params: any) {
|
||||
let orgslug = params.orgslug;
|
||||
const { data: trail, error: error } = useSWR(`${getAPIUrl()}trail/org_slug/${orgslug}/trail`, swrFetcher);
|
||||
|
||||
|
||||
return (
|
||||
<GeneralWrapperStyled>
|
||||
<TypeOfContentTitle title="Trail" type="tra" />
|
||||
{!trail ? (
|
||||
<PageLoading></PageLoading>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{trail.courses.map((course: any) => (
|
||||
<TrailCourseElement key={trail.trail_id} orgslug={orgslug} course={course} />
|
||||
))}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</GeneralWrapperStyled>
|
||||
);
|
||||
}
|
||||
|
||||
export default Trail;
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -5,8 +5,8 @@ function PageLoading() {
|
|||
<div className="max-w-7xl mx-auto px-4 py-20">
|
||||
<div className="animate-pulse mx-auto flex space-x-4">
|
||||
<svg className="mx-auto" width="295" height="295" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.51" x="6.5" y="6.5" width="282" height="282" rx="78.5" stroke="#454545" stroke-opacity="0.46" stroke-width="13" stroke-dasharray="11 11" />
|
||||
<path d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z" fill="#454545" fill-opacity="0.13" />
|
||||
<rect opacity="0.51" x="6.5" y="6.5" width="282" height="282" rx="78.5" stroke="#454545" strokeOpacity="0.46" stroke-width="13" stroke-dasharray="11 11" />
|
||||
<path d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z" fill="#454545" fillOpacity="0.13" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
|
||||
'use client';
|
||||
import React from "react";
|
||||
import useSWR from "swr";
|
||||
import Link from "next/link";
|
||||
import { getBackendUrl, getUriWithOrg } from "@services/config/config";
|
||||
import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
|
||||
import { getOrganizationContextInfo } from "@services/organizations/orgs";
|
||||
import ClientComponentSkeleton from "@components/Utils/ClientComp";
|
||||
import { HeaderProfileBox } from "@components/Security/HeaderProfileBox";
|
||||
import { swrFetcher } from "@services/utils/ts/requests";
|
||||
import MenuLinks from "./MenuLinks";
|
||||
|
||||
export const Menu = async (props: any) => {
|
||||
const orgslug = props.orgslug;
|
||||
const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -32,11 +34,10 @@ export const Menu = async (props: any) => {
|
|||
</Link>
|
||||
</div>
|
||||
<div className="links flex grow">
|
||||
<ul className="flex space-x-4">
|
||||
<LinkItem link="/courses" type="courses" orgslug={orgslug}></LinkItem>
|
||||
<LinkItem link="/collections" type="collections" orgslug={orgslug}></LinkItem>
|
||||
<LinkItem link="/trail" type="trail" orgslug={orgslug}></LinkItem>
|
||||
</ul>
|
||||
<ClientComponentSkeleton>
|
||||
<MenuLinks orgslug={orgslug} />
|
||||
</ClientComponentSkeleton>
|
||||
|
||||
</div>
|
||||
<div className="profile flex">
|
||||
<ClientComponentSkeleton>
|
||||
|
|
@ -48,39 +49,7 @@ export const Menu = async (props: any) => {
|
|||
);
|
||||
};
|
||||
|
||||
const LinkItem = (props: any) => {
|
||||
const link = props.link;
|
||||
const orgslug = props.orgslug;
|
||||
return (
|
||||
<Link href={getUriWithOrg(orgslug, link)}>
|
||||
<li className="flex space-x-2 items-center text-[#909192] font-medium">
|
||||
{props.type == 'courses' &&
|
||||
<>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.9987 1.66663H6.66536C5.78131 1.66663 4.93346 2.01782 4.30834 2.64294C3.68322 3.26806 3.33203 4.1159 3.33203 4.99996V15C3.33203 15.884 3.68322 16.7319 4.30834 17.357C4.93346 17.9821 5.78131 18.3333 6.66536 18.3333H14.9987C15.4407 18.3333 15.8646 18.1577 16.1772 17.8451C16.4898 17.5326 16.6654 17.1087 16.6654 16.6666V3.33329C16.6654 2.89127 16.4898 2.46734 16.1772 2.15478C15.8646 1.84222 15.4407 1.66663 14.9987 1.66663ZM4.9987 4.99996C4.9987 4.55793 5.17429 4.13401 5.48685 3.82145C5.79941 3.50889 6.22334 3.33329 6.66536 3.33329H14.9987V11.6666H6.66536C6.0779 11.6691 5.50203 11.8303 4.9987 12.1333V4.99996ZM6.66536 16.6666C6.22334 16.6666 5.79941 16.491 5.48685 16.1785C5.17429 15.8659 4.9987 15.442 4.9987 15C4.9987 14.5579 5.17429 14.134 5.48685 13.8214C5.79941 13.5089 6.22334 13.3333 6.66536 13.3333H14.9987V16.6666H6.66536ZM8.33203 6.66663H11.6654C11.8864 6.66663 12.0983 6.57883 12.2546 6.42255C12.4109 6.26627 12.4987 6.05431 12.4987 5.83329C12.4987 5.61228 12.4109 5.40032 12.2546 5.24404C12.0983 5.08776 11.8864 4.99996 11.6654 4.99996H8.33203C8.11102 4.99996 7.89906 5.08776 7.74278 5.24404C7.5865 5.40032 7.4987 5.61228 7.4987 5.83329C7.4987 6.05431 7.5865 6.26627 7.74278 6.42255C7.89906 6.57883 8.11102 6.66663 8.33203 6.66663V6.66663Z" fill="#898A8B" />
|
||||
</svg>
|
||||
<span>Courses</span>
|
||||
</>}
|
||||
|
||||
{props.type == 'collections' &&
|
||||
<>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.0567 6.14171C17.0567 6.14171 17.0567 6.14171 17.0567 6.07504L17.0067 5.95004C16.9893 5.92352 16.9698 5.89844 16.9483 5.87504C16.926 5.83976 16.901 5.80632 16.8733 5.77504L16.7983 5.71671L16.665 5.65004L10.415 1.79171C10.2826 1.70893 10.1295 1.66504 9.97333 1.66504C9.81715 1.66504 9.66411 1.70893 9.53166 1.79171L3.33166 5.65004L3.25666 5.71671L3.18166 5.77504C3.15404 5.80632 3.12896 5.83976 3.10666 5.87504C3.08524 5.89844 3.06573 5.92352 3.04833 5.95004L2.99833 6.07504C2.99833 6.07504 2.99833 6.07504 2.99833 6.14171C2.99014 6.2137 2.99014 6.28639 2.99833 6.35838V13.6417C2.99805 13.7833 3.03386 13.9227 3.10239 14.0466C3.17092 14.1706 3.2699 14.275 3.39 14.35L9.64 18.2084C9.67846 18.2321 9.72076 18.2491 9.765 18.2584C9.765 18.2584 9.80666 18.2584 9.83166 18.2584C9.97265 18.3031 10.124 18.3031 10.265 18.2584C10.265 18.2584 10.3067 18.2584 10.3317 18.2584C10.3759 18.2491 10.4182 18.2321 10.4567 18.2084L16.665 14.35C16.7851 14.275 16.8841 14.1706 16.9526 14.0466C17.0211 13.9227 17.0569 13.7833 17.0567 13.6417V6.35838C17.0649 6.28639 17.0649 6.2137 17.0567 6.14171ZM9.165 16.0084L4.58166 13.175V7.85838L9.165 10.6834V16.0084ZM9.99833 9.24171L5.33166 6.35838L9.99833 3.48337L14.665 6.35838L9.99833 9.24171ZM15.415 13.175L10.8317 16.0084V10.6834L15.415 7.85838V13.175Z" fill="#898A8B" />
|
||||
</svg>
|
||||
<span>Collections</span>
|
||||
</>}
|
||||
|
||||
{props.type == 'trail' &&
|
||||
<>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.5751 7.95841C16.5059 7.82098 16.3999 7.70541 16.269 7.62451C16.1381 7.54361 15.9874 7.50054 15.8335 7.50008H11.6668V2.50008C11.6757 2.31731 11.6243 2.13669 11.5204 1.98608C11.4164 1.83547 11.2658 1.72325 11.0918 1.66674C10.9245 1.6117 10.744 1.61108 10.5763 1.66498C10.4087 1.71888 10.2624 1.82452 10.1585 1.96674L3.4918 11.1334C3.40827 11.2541 3.35811 11.3948 3.3464 11.5411C3.3347 11.6874 3.36186 11.8343 3.42513 11.9667C3.4834 12.1182 3.58462 12.2493 3.71637 12.3441C3.84812 12.4388 4.00467 12.493 4.1668 12.5001H8.33346V17.5001C8.33359 17.6758 8.38927 17.847 8.49254 17.9892C8.59581 18.1314 8.74139 18.2373 8.90846 18.2917C8.99219 18.3177 9.07915 18.3317 9.1668 18.3334C9.29828 18.3338 9.42799 18.303 9.5453 18.2436C9.66262 18.1842 9.76422 18.0979 9.8418 17.9917L16.5085 8.82508C16.5982 8.70074 16.652 8.55404 16.6637 8.40112C16.6755 8.24821 16.6448 8.09502 16.5751 7.95841ZM10.0001 14.9334V11.6667C10.0001 11.4457 9.91233 11.2338 9.75605 11.0775C9.59977 10.9212 9.38781 10.8334 9.1668 10.8334H5.83346L10.0001 5.06674V8.33341C10.0001 8.55442 10.0879 8.76638 10.2442 8.92267C10.4005 9.07895 10.6124 9.16674 10.8335 9.16674H14.1668L10.0001 14.9334Z" fill="#909192" />
|
||||
</svg>
|
||||
<span>Trail</span>
|
||||
</>}
|
||||
</li>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
const LearnHouseLogo = () => {
|
||||
|
|
@ -88,7 +57,7 @@ const LearnHouseLogo = () => {
|
|||
<svg width="133" height="80" viewBox="0 0 433 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="80" height="80" rx="24" fill="black" />
|
||||
<rect width="80" height="80" rx="24" fill="url(#paint0_angular_1555_220)" />
|
||||
<rect x="0.5" y="0.5" width="79" height="79" rx="23.5" stroke="white" stroke-opacity="0.12" />
|
||||
<rect x="0.5" y="0.5" width="79" height="79" rx="23.5" stroke="white" strokeOpacity="0.12" />
|
||||
<path d="M37.546 55.926V35.04L33.534 30.497L37.546 29.258V27.016L33.534 22.473L44.626 19.11V55.926L48.992 61H33.18L37.546 55.926Z" fill="white" />
|
||||
<path d="M113.98 54.98V30.2L109.22 24.81L113.98 23.34V20.68L109.22 15.29L122.38 11.3V54.98L127.56 61H108.8L113.98 54.98ZM157.704 41.19V41.26H135.234C136.004 50.29 140.834 54.07 146.294 54.07C151.054 54.07 155.254 51.69 156.304 48.75L157.354 49.17C154.834 55.54 149.864 61.98 141.534 61.98C132.364 61.98 127.184 53.79 127.184 45.39C127.184 36.36 132.784 26 144.194 26C152.524 26 157.634 31.6 157.704 41.05L157.774 41.19H157.704ZM148.674 39.16V38.53C148.674 31.04 145.664 28.1 142.584 28.1C137.264 28.1 135.094 34.47 135.094 38.67V39.16H148.674ZM178.717 61V55.12C176.057 57.71 171.157 61.7 166.537 61.7C161.707 61.7 158.137 59.32 158.137 53.65C158.137 46.51 166.607 42.87 178.717 38.6C178.717 33 178.577 28.66 172.837 28.66C167.237 28.66 163.877 32.58 160.307 37.9H159.817V26.7H188.657L187.117 32.72V56.45H187.187L192.367 61H178.717ZM178.717 53.23V40.56C167.727 44.97 167.377 47.98 167.377 51.34C167.377 54.7 169.687 56.17 172.627 56.17C174.797 56.17 176.967 55.05 178.717 53.23ZM221.429 39.09H220.869C217.789 31.74 213.659 29.29 210.439 29.29C205.609 29.29 205.609 32.79 205.609 39.93V54.98L212.119 61H192.029L197.209 54.98V32.09L192.449 26.7H221.429V39.09ZM261.467 61H242.707L247.747 54.98V39.44C247.747 34.05 246.977 30.62 241.587 30.62C238.997 30.62 236.337 31.74 234.097 34.75V54.98L239.137 61H220.377L225.697 54.98V36.08L220.937 30.69L234.097 26V32.37C236.897 28.03 241.447 25.86 245.647 25.86C252.787 25.86 256.147 30.48 256.147 37.06V54.98L261.467 61ZM274.343 11.3V32.23C277.143 27.89 281.693 25.72 285.893 25.72C293.033 25.72 296.393 30.34 296.393 36.92V54.98H296.463L301.643 61H282.883L287.993 55.05V39.3C287.993 33.91 287.223 30.48 281.833 30.48C279.243 30.48 276.583 31.6 274.343 34.61V54.98L279.523 61H260.763L265.943 54.98V21.38L261.183 15.99L274.343 11.3ZM335.945 42.31C335.945 51.34 329.855 61.84 316.835 61.84C306.895 61.84 301.645 53.79 301.645 45.39C301.645 36.36 307.735 25.86 320.755 25.86C330.695 25.86 335.945 33.91 335.945 42.31ZM316.975 28.52C311.165 28.52 310.535 34.82 310.535 39.02C310.535 49.94 314.525 59.18 320.685 59.18C325.865 59.18 327.195 52.32 327.195 48.68C327.195 37.76 323.135 28.52 316.975 28.52ZM349.01 26.63V48.12C349.01 53.51 349.78 56.94 355.17 56.94C357.55 56.94 360 55.75 361.82 53.65V32.72L356.64 26.63H370.22V55.26L374.98 61L361.82 61.42V55.82C359.3 59.32 356.08 61.7 351.11 61.7C343.97 61.7 340.61 57.08 340.61 50.5V32.72L335.36 26.63H349.01ZM374.617 47.77H375.177C376.997 53.79 382.527 59.04 388.267 59.04C391.137 59.04 393.517 57.64 393.517 54.49C393.517 46.23 374.967 50.29 374.967 36.43C374.967 31.25 379.517 26.7 386.657 26.7H394.357L396.947 25.23V36.85L396.527 36.78C394.007 32.23 389.807 28.87 385.327 28.94C382.387 29.01 380.707 30.83 380.707 33.56C380.707 40.77 399.887 37.62 399.887 50.43C399.887 58.55 391.697 61.7 386.167 61.7C382.667 61.7 377.907 61.21 375.247 60.09L374.617 47.77ZM430.416 41.19V41.26H407.946C408.716 50.29 413.546 54.07 419.006 54.07C423.766 54.07 427.966 51.69 429.016 48.75L430.066 49.17C427.546 55.54 422.576 61.98 414.246 61.98C405.076 61.98 399.896 53.79 399.896 45.39C399.896 36.36 405.496 26 416.906 26C425.236 26 430.346 31.6 430.416 41.05L430.486 41.19H430.416ZM421.386 39.16V38.53C421.386 31.04 418.376 28.1 415.296 28.1C409.976 28.1 407.806 34.47 407.806 38.67V39.16H421.386Z" fill="#121212" />
|
||||
<defs>
|
||||
|
|
|
|||
52
front/components/Objects/Menu/MenuLinks.tsx
Normal file
52
front/components/Objects/Menu/MenuLinks.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
|
||||
import { getUriWithOrg } from '@services/config/config';
|
||||
import Link from 'next/link';
|
||||
import React from 'react'
|
||||
|
||||
function MenuLinks(props: { orgslug: string }) {
|
||||
return (
|
||||
<div>
|
||||
<ul className="flex space-x-4">
|
||||
<LinkItem link="/courses" type="courses" orgslug={props.orgslug}></LinkItem>
|
||||
<LinkItem link="/collections" type="collections" orgslug={props.orgslug}></LinkItem>
|
||||
<AuthenticatedClientElement checkMethod='authentication'>
|
||||
<LinkItem link="/trail" type="trail" orgslug={props.orgslug}></LinkItem>
|
||||
</AuthenticatedClientElement>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const LinkItem = (props: any) => {
|
||||
const link = props.link;
|
||||
const orgslug = props.orgslug;
|
||||
return (
|
||||
<Link href={getUriWithOrg(orgslug, link)}>
|
||||
<li className="flex space-x-2 items-center text-[#909192] font-medium">
|
||||
{props.type == 'courses' &&
|
||||
<>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.9987 1.66663H6.66536C5.78131 1.66663 4.93346 2.01782 4.30834 2.64294C3.68322 3.26806 3.33203 4.1159 3.33203 4.99996V15C3.33203 15.884 3.68322 16.7319 4.30834 17.357C4.93346 17.9821 5.78131 18.3333 6.66536 18.3333H14.9987C15.4407 18.3333 15.8646 18.1577 16.1772 17.8451C16.4898 17.5326 16.6654 17.1087 16.6654 16.6666V3.33329C16.6654 2.89127 16.4898 2.46734 16.1772 2.15478C15.8646 1.84222 15.4407 1.66663 14.9987 1.66663ZM4.9987 4.99996C4.9987 4.55793 5.17429 4.13401 5.48685 3.82145C5.79941 3.50889 6.22334 3.33329 6.66536 3.33329H14.9987V11.6666H6.66536C6.0779 11.6691 5.50203 11.8303 4.9987 12.1333V4.99996ZM6.66536 16.6666C6.22334 16.6666 5.79941 16.491 5.48685 16.1785C5.17429 15.8659 4.9987 15.442 4.9987 15C4.9987 14.5579 5.17429 14.134 5.48685 13.8214C5.79941 13.5089 6.22334 13.3333 6.66536 13.3333H14.9987V16.6666H6.66536ZM8.33203 6.66663H11.6654C11.8864 6.66663 12.0983 6.57883 12.2546 6.42255C12.4109 6.26627 12.4987 6.05431 12.4987 5.83329C12.4987 5.61228 12.4109 5.40032 12.2546 5.24404C12.0983 5.08776 11.8864 4.99996 11.6654 4.99996H8.33203C8.11102 4.99996 7.89906 5.08776 7.74278 5.24404C7.5865 5.40032 7.4987 5.61228 7.4987 5.83329C7.4987 6.05431 7.5865 6.26627 7.74278 6.42255C7.89906 6.57883 8.11102 6.66663 8.33203 6.66663V6.66663Z" fill="#898A8B" />
|
||||
</svg>
|
||||
<span>Courses</span>
|
||||
</>}
|
||||
|
||||
{props.type == 'collections' &&
|
||||
<>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.0567 6.14171C17.0567 6.14171 17.0567 6.14171 17.0567 6.07504L17.0067 5.95004C16.9893 5.92352 16.9698 5.89844 16.9483 5.87504C16.926 5.83976 16.901 5.80632 16.8733 5.77504L16.7983 5.71671L16.665 5.65004L10.415 1.79171C10.2826 1.70893 10.1295 1.66504 9.97333 1.66504C9.81715 1.66504 9.66411 1.70893 9.53166 1.79171L3.33166 5.65004L3.25666 5.71671L3.18166 5.77504C3.15404 5.80632 3.12896 5.83976 3.10666 5.87504C3.08524 5.89844 3.06573 5.92352 3.04833 5.95004L2.99833 6.07504C2.99833 6.07504 2.99833 6.07504 2.99833 6.14171C2.99014 6.2137 2.99014 6.28639 2.99833 6.35838V13.6417C2.99805 13.7833 3.03386 13.9227 3.10239 14.0466C3.17092 14.1706 3.2699 14.275 3.39 14.35L9.64 18.2084C9.67846 18.2321 9.72076 18.2491 9.765 18.2584C9.765 18.2584 9.80666 18.2584 9.83166 18.2584C9.97265 18.3031 10.124 18.3031 10.265 18.2584C10.265 18.2584 10.3067 18.2584 10.3317 18.2584C10.3759 18.2491 10.4182 18.2321 10.4567 18.2084L16.665 14.35C16.7851 14.275 16.8841 14.1706 16.9526 14.0466C17.0211 13.9227 17.0569 13.7833 17.0567 13.6417V6.35838C17.0649 6.28639 17.0649 6.2137 17.0567 6.14171ZM9.165 16.0084L4.58166 13.175V7.85838L9.165 10.6834V16.0084ZM9.99833 9.24171L5.33166 6.35838L9.99833 3.48337L14.665 6.35838L9.99833 9.24171ZM15.415 13.175L10.8317 16.0084V10.6834L15.415 7.85838V13.175Z" fill="#898A8B" />
|
||||
</svg>
|
||||
<span>Collections</span>
|
||||
</>}
|
||||
|
||||
{props.type == 'trail' &&
|
||||
<>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.5751 7.95841C16.5059 7.82098 16.3999 7.70541 16.269 7.62451C16.1381 7.54361 15.9874 7.50054 15.8335 7.50008H11.6668V2.50008C11.6757 2.31731 11.6243 2.13669 11.5204 1.98608C11.4164 1.83547 11.2658 1.72325 11.0918 1.66674C10.9245 1.6117 10.744 1.61108 10.5763 1.66498C10.4087 1.71888 10.2624 1.82452 10.1585 1.96674L3.4918 11.1334C3.40827 11.2541 3.35811 11.3948 3.3464 11.5411C3.3347 11.6874 3.36186 11.8343 3.42513 11.9667C3.4834 12.1182 3.58462 12.2493 3.71637 12.3441C3.84812 12.4388 4.00467 12.493 4.1668 12.5001H8.33346V17.5001C8.33359 17.6758 8.38927 17.847 8.49254 17.9892C8.59581 18.1314 8.74139 18.2373 8.90846 18.2917C8.99219 18.3177 9.07915 18.3317 9.1668 18.3334C9.29828 18.3338 9.42799 18.303 9.5453 18.2436C9.66262 18.1842 9.76422 18.0979 9.8418 17.9917L16.5085 8.82508C16.5982 8.70074 16.652 8.55404 16.6637 8.40112C16.6755 8.24821 16.6448 8.09502 16.5751 7.95841ZM10.0001 14.9334V11.6667C10.0001 11.4457 9.91233 11.2338 9.75605 11.0775C9.59977 10.9212 9.38781 10.8334 9.1668 10.8334H5.83346L10.0001 5.06674V8.33341C10.0001 8.55442 10.0879 8.76638 10.2442 8.92267C10.4005 9.07895 10.6124 9.16674 10.8335 9.16674H14.1668L10.0001 14.9334Z" fill="#909192" />
|
||||
</svg>
|
||||
<span>Trail</span>
|
||||
</>}
|
||||
</li>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
export default MenuLinks
|
||||
|
|
@ -7,13 +7,14 @@ import React from 'react'
|
|||
interface Props {
|
||||
course: any
|
||||
orgslug: string
|
||||
course_id: string
|
||||
current_activity?: any
|
||||
}
|
||||
|
||||
function ActivityIndicators(props: Props) {
|
||||
const course = props.course
|
||||
const orgslug = props.orgslug
|
||||
const courseid = course.course.course_id.replace("course_", "")
|
||||
const courseid = props.course_id.replace("course_", "")
|
||||
|
||||
const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
|
||||
const black_activity_style = 'bg-black hover:bg-gray-700'
|
||||
|
|
|
|||
60
front/components/Pages/Trail/TrailCourseElement.tsx
Normal file
60
front/components/Pages/Trail/TrailCourseElement.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
'use client';
|
||||
import { getAPIUrl, getBackendUrl, getUriWithOrg } from '@services/config/config';
|
||||
import { removeCourse } from '@services/courses/activity';
|
||||
import { revalidateTags } from '@services/utils/ts/requests';
|
||||
import Link from 'next/link';
|
||||
import { mutate } from 'swr';
|
||||
|
||||
interface TrailCourseElementProps {
|
||||
course: any
|
||||
orgslug: string
|
||||
}
|
||||
|
||||
function TrailCourseElement(props: TrailCourseElementProps) {
|
||||
const courseid = props.course.course_id.replace("course_", "")
|
||||
const course = props.course
|
||||
|
||||
async function quitCourse(course_id: string) {
|
||||
// Close activity
|
||||
let activity = await removeCourse(course_id, props.orgslug);
|
||||
// Mutate course
|
||||
revalidateTags(['courses']);
|
||||
|
||||
// Mutate
|
||||
mutate(`${getAPIUrl()}trail/org_slug/${props.orgslug}/trail`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='trailcoursebox flex p-3 bg-white rounded-xl' style={{ boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}>
|
||||
|
||||
<Link href={getUriWithOrg(props.orgslug, "/course/" + courseid)}>
|
||||
<div className="course_tumbnail inset-0 ring-1 ring-inset ring-black/10 rounded-lg relative h-[50px] w-[72px] bg-cover bg-center" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${props.course.course_object.thumbnail})`, boxShadow: '0px 4px 7px 0px rgba(0, 0, 0, 0.03)' }}></div>
|
||||
</Link>
|
||||
<div className="course_meta pl-5 flex-grow space-y-1">
|
||||
<div className="course_top">
|
||||
<div className="course_info flex">
|
||||
<div className="course_basic flex flex-col flex-end -space-y-2">
|
||||
<p className='p-0 font-bold text-sm text-gray-700'>Course</p>
|
||||
<div className="course_progress flex items-center space-x-2">
|
||||
<h2 className='font-bold text-xl'>{course.course_object.name}</h2>
|
||||
<div className='bg-slate-300 rounded-full w-[10px] h-[5px]'></div>
|
||||
<h2>{course.progress}%</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="course_actions flex-grow flex flex-row-reverse">
|
||||
<button onClick={() => quitCourse(course.course_id)} className="bg-red-200 text-red-700 hover:bg-red-300 rounded-full text-xs h-5 px-2 font-bold">Quit Course</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="course_progress indicator w-full">
|
||||
<div className="w-full bg-gray-200 rounded-full h-1.5 ">
|
||||
<div className={`bg-teal-600 h-1.5 rounded-full`} style={{ width: `${course.progress}%` }} ></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TrailCourseElement
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import os
|
||||
from uuid import uuid4
|
||||
from fastapi import HTTPException, status
|
||||
|
||||
|
||||
async def upload_org_logo(logo_file):
|
||||
|
|
@ -15,7 +16,10 @@ async def upload_org_logo(logo_file):
|
|||
f.close()
|
||||
|
||||
except Exception:
|
||||
return {"message": "There was an error uploading the file"}
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
|
||||
detail="There was an error uploading the file",
|
||||
)
|
||||
finally:
|
||||
logo_file.file.close()
|
||||
|
||||
|
|
|
|||
|
|
@ -105,9 +105,21 @@ async def get_user_trail_with_orgslug(request: Request, user: PublicUser, org_sl
|
|||
org = await orgs.find_one({"slug": org_slug})
|
||||
|
||||
trail = await trails.find_one({"user_id": user.user_id, "org_id": org["org_id"]})
|
||||
|
||||
if not trail:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND, detail="Trail not found")
|
||||
return Trail(masked=False, courses=[])
|
||||
|
||||
# Check if these courses still exist in the database
|
||||
for course in trail["courses"]:
|
||||
|
||||
course_id = course["course_id"]
|
||||
course_object = await courses_mongo.find_one({"course_id": course_id}, {"_id": 0})
|
||||
if not course_object:
|
||||
trail["courses"].remove(course)
|
||||
continue
|
||||
|
||||
course["course_object"] = course_object
|
||||
|
||||
for courses in trail["courses"]:
|
||||
course_id = courses["course_id"]
|
||||
|
||||
|
|
@ -143,8 +155,7 @@ async def add_activity_to_trail(request: Request, user: PublicUser, course_id:
|
|||
trail = await trails.find_one({"user_id": user.user_id, "courses.course_id": courseid , "org_id": org_id})
|
||||
|
||||
if not trail:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND, detail="Trail not found")
|
||||
return Trail(masked=False, courses=[])
|
||||
|
||||
# if a trail has course_id in the courses array, then add the activity_id to the activities_marked_complete array
|
||||
for element in trail["courses"]:
|
||||
|
|
@ -163,7 +174,7 @@ async def add_activity_to_trail(request: Request, user: PublicUser, course_id:
|
|||
# modify trail object
|
||||
await trails.replace_one({"trail_id": trail["trail_id"]}, trail)
|
||||
|
||||
return Trail(**trail)
|
||||
return Trail(**trail.dict())
|
||||
|
||||
|
||||
async def add_course_to_trail(request: Request, user: PublicUser, orgslug: str, course_id: str) -> Trail:
|
||||
|
|
@ -173,19 +184,18 @@ async def add_course_to_trail(request: Request, user: PublicUser, orgslug: str,
|
|||
|
||||
org = await orgs.find_one({"slug": orgslug})
|
||||
|
||||
org = PublicOrganization(**org)
|
||||
|
||||
|
||||
org = PublicOrganization(**org)
|
||||
|
||||
trail = await trails.find_one(
|
||||
{"user_id": user.user_id, "org_id": org["org_id"]})
|
||||
|
||||
|
||||
|
||||
|
||||
if not trail:
|
||||
trail_to_insert = TrailInDB(trail_id=f"trail_{uuid4()}", user_id=user.user_id, org_id=org["org_id"], courses=[])
|
||||
trail_to_insert = await trails.insert_one(trail_to_insert.dict())
|
||||
|
||||
trail = await trails.find_one({"_id": trail_to_insert.inserted_id})
|
||||
|
||||
# check if course is already present in the trail
|
||||
for element in trail["courses"]:
|
||||
if element["course_id"] == course_id:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue