diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx index de2fb637..dc6a218f 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx @@ -56,7 +56,7 @@ function ActivityClient(props: ActivityClientProps) {

{course.course.name}

- +
diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx index fc323f5c..b8227993 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx @@ -34,7 +34,6 @@ const CourseClient = (props: any) => { router.refresh(); } - console.log(course); return ( <> @@ -54,7 +53,7 @@ const CourseClient = (props: any) => {
- +
diff --git a/front/app/orgs/[orgslug]/(withmenu)/trail/page.tsx b/front/app/orgs/[orgslug]/(withmenu)/trail/page.tsx index b32c1463..2eea9a82 100644 --- a/front/app/orgs/[orgslug]/(withmenu)/trail/page.tsx +++ b/front/app/orgs/[orgslug]/(withmenu)/trail/page.tsx @@ -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 ( - - - {!trail ? ( - - ) : ( -
- {trail.courses.map((course: any) => ( - - - - - - -

Course

-

{course.course_object.name}

- - - - - ))} -
- )} - - ); +type MetadataProps = { + params: { orgslug: string }; + searchParams: { [key: string]: string | string[] | undefined }; +}; + +export async function generateMetadata( + { params }: MetadataProps, +): Promise { + + // 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 ( +
+ +
+ ); +}; - -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; \ No newline at end of file diff --git a/front/app/orgs/[orgslug]/(withmenu)/trail/trail.tsx b/front/app/orgs/[orgslug]/(withmenu)/trail/trail.tsx new file mode 100644 index 00000000..38015cce --- /dev/null +++ b/front/app/orgs/[orgslug]/(withmenu)/trail/trail.tsx @@ -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 ( + + + {!trail ? ( + + ) : ( +
+ {trail.courses.map((course: any) => ( + + ))} + +
+ )} + + ); +} + +export default Trail; + + + + diff --git a/front/components/Objects/Loaders/PageLoading.tsx b/front/components/Objects/Loaders/PageLoading.tsx index 52fa3a61..809b2b80 100644 --- a/front/components/Objects/Loaders/PageLoading.tsx +++ b/front/components/Objects/Loaders/PageLoading.tsx @@ -5,8 +5,8 @@ function PageLoading() {
- - + +
diff --git a/front/components/Objects/Menu/Menu.tsx b/front/components/Objects/Menu/Menu.tsx index 4baf3e1d..78478a8d 100644 --- a/front/components/Objects/Menu/Menu.tsx +++ b/front/components/Objects/Menu/Menu.tsx @@ -9,7 +9,7 @@ import { HeaderProfileBox } from "@components/Security/HeaderProfileBox"; export const Menu = async (props: any) => { const orgslug = props.orgslug; const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] }); - + return ( <> @@ -88,7 +88,7 @@ const LearnHouseLogo = () => { - + diff --git a/front/components/Pages/Courses/ActivityIndicators.tsx b/front/components/Pages/Courses/ActivityIndicators.tsx index 5749afda..92e8188a 100644 --- a/front/components/Pages/Courses/ActivityIndicators.tsx +++ b/front/components/Pages/Courses/ActivityIndicators.tsx @@ -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' diff --git a/front/components/Pages/Trail/TrailCourseElement.tsx b/front/components/Pages/Trail/TrailCourseElement.tsx new file mode 100644 index 00000000..dd32c5c8 --- /dev/null +++ b/front/components/Pages/Trail/TrailCourseElement.tsx @@ -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 ( +
+ + +
+ +
+
+
+
+

Course

+
+

{course.course_object.name}

+
+

{course.progress}%

+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ ) +} + +export default TrailCourseElement \ No newline at end of file