rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: redesign trail + add quit course button

Browse source
This commit is contained in:
swve 2023-06-25 17:30:04 +02:00
parent 6b0df500ef
commit bfd3f07837
8 changed files with 133 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

2
front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx
View file

@ -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">

3
front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx
View file

@ -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">

125
front/app/orgs/[orgslug]/(withmenu)/trail/page.tsx
View file

@ -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
View 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;