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

Merge pull request #85 from learnhouse/swve/eng-51-fix-input-styling-issues

Browse source 
Fix input styling issues
This commit is contained in:
Badr B 2023-05-14 19:22:46 +02:00 • committed by GitHub
commit d9a9b445dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 231 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

90
front/app/_orgs/[orgslug]/(withmenu)/collections/new/page.tsx
View file

@ -8,7 +8,7 @@ import { getAPIUrl, getUriWithOrg } from "@services/config/config";
import { swrFetcher } from "@services/utils/ts/requests"; import { swrFetcher } from "@services/utils/ts/requests";
import { getOrganizationContextInfo } from "@services/organizations/orgs"; import { getOrganizationContextInfo } from "@services/organizations/orgs";
function NewCollection(params : any) { function NewCollection(params: any) {
const orgslug = params.params.orgslug; const orgslug = params.params.orgslug;
const [name, setName] = React.useState(""); const [name, setName] = React.useState("");
const [org, setOrg] = React.useState({}) as any; const [org, setOrg] = React.useState({}) as any;
@ -50,38 +50,64 @@ function NewCollection(params : any) {
return ( return (
<> <>
<Title>Add new</Title> <div className="w-64 m-auto py-20">
<br /> <Title className="mb-4">Add new</Title>
<input type="text" placeholder="Name" value={name} onChange={handleNameChange} />
{!courses ? ( <input
<p>Loading...</p> type="text"
) : ( placeholder="Name"
<div> value={name}
{courses.map((course: any) => ( onChange={handleNameChange}
<div key={course.course_id}> className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
<input />
type="checkbox"
id={course.course_id} {!courses ? (
name={course.course_id} <p className="text-gray-500">Loading...</p>
value={course.course_id} ) : (
onChange={(e) => { <div>
if (e.target.checked) { {courses.map((course: any) => (
setSelectedCourses([...selectedCourses, e.target.value]); <div key={course.course_id} className="flex items-center mb-2">
} else { <input
setSelectedCourses(selectedCourses.filter((item: any) => item !== e.target.value)); type="checkbox"
} id={course.course_id}
}} name={course.course_id}
/> value={course.course_id}
<label htmlFor={course.course_id}>{course.name}</label> checked={selectedCourses.includes(course.course_id)}
</div> onChange={(e) => {
))} const courseId = e.target.value;
</div> setSelectedCourses((prevSelectedCourses: string[]) => {
)} if (e.target.checked) {
return [...prevSelectedCourses, courseId];
} else {
return prevSelectedCourses.filter((selectedCourse) => selectedCourse !== courseId);
}
});
}}
className="mr-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<label htmlFor={course.course_id} className="text-sm">{course.name}</label>
</div>
))}
</div>
)}
<input
type="text"
placeholder="Description"
value={description}
onChange={handleDescriptionChange}
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
onClick={handleSubmit}
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Submit
</button>
</div>
<br />
<input type="text" placeholder="Description" value={description} onChange={handleDescriptionChange} />
<br />
<button onClick={handleSubmit}>Submit</button>
</> </>
); );
} }

6
front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
View file

@ -96,10 +96,10 @@ function CourseEdit(params: any) {
}; };
// Submit YouTube Video Upload // Submit YouTube Video Upload
const submitExternalVideo = async (external_video_data : any, activity: any, chapterId: string) => { const submitExternalVideo = async (external_video_data: any, activity: any, chapterId: string) => {
console.log("submitExternalVideo", external_video_data); console.log("submitExternalVideo", external_video_data);
await updateChaptersMetadata(courseid, data); await updateChaptersMetadata(courseid, data);
await createExternalVideoActivity(external_video_data , activity, chapterId); await createExternalVideoActivity(external_video_data, activity, chapterId);
await getCourseChapters(); await getCourseChapters();
setNewActivityModal(false); setNewActivityModal(false);
}; };
@ -266,7 +266,7 @@ function CourseEdit(params: any) {
> >
Save Save
</button> </button>
</Title>- </Title>
<Modal <Modal
isDialogOpen={newActivityModal} isDialogOpen={newActivityModal}

40
front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx
View file

@ -45,8 +45,8 @@ const CourseIdPage = (params: any) => {
) : ( ) : (
<CoursePageLayout> <CoursePageLayout>
<br></br> <br></br>
<p>Course</p> <p className="text-lg font-bold">Course</p>
<h1> <h1 className="text-3xl font-bold flex items-center space-x-5">
{course.course.name}{" "} {course.course.name}{" "}
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/edit`} rel="noopener noreferrer"> <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/edit`} rel="noopener noreferrer">
<Pencil2Icon /> <Pencil2Icon />
@ -61,12 +61,12 @@ const CourseIdPage = (params: any) => {
<> <>
<ToolTip sideOffset={-18} slateBlack content={activity.name}> <ToolTip sideOffset={-18} slateBlack content={activity.name}>
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}> <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
<CourseIndicator <CourseIndicator
done={course.trail.activities_marked_complete && course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"} done={course.trail.activities_marked_complete && course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"}
/> />
</Link> </Link>
</ToolTip> </ToolTip>
</> </>
); );
})} })}
@ -81,38 +81,42 @@ const CourseIdPage = (params: any) => {
<CourseMetaWrapper> <CourseMetaWrapper>
<CourseMetaLeft> <CourseMetaLeft>
<h2>Description</h2> <h2 className="py-3 font-bold">Description</h2>
<BoxWrapper> <BoxWrapper>
<p>{course.course.description}</p> <p className="py-3">{course.course.description}</p>
</BoxWrapper> </BoxWrapper>
<h2>What you will learn</h2> <h2 className="py-3 font-bold">What you will learn</h2>
<BoxWrapper> <BoxWrapper>
<p>{course.course.learnings == ![] ? "no data" : course.course.learnings}</p> <p className="py-3">{course.course.learnings == ![] ? "no data" : course.course.learnings}</p>
</BoxWrapper> </BoxWrapper>
<h2>Course Lessons</h2> <h2 className="py-3 font-bold">Course Lessons</h2>
<BoxWrapper> <BoxWrapper>
{course.chapters.map((chapter: any) => { {course.chapters.map((chapter: any) => {
return ( return (
<> <div
<h3>{chapter.name}</h3> key={chapter}
{chapter.activities.map((activity: any) => { className="py-3"
>
<h3 className="text-lg">{chapter.name}</h3>
<div
className="py-3"
>{chapter.activities.map((activity: any) => {
return ( return (
<> <>
<p> <p className="flex text-md">
{activity.name} {activity.name}
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer"> <Link className="pl-3" href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
<EyeOpenIcon /> <EyeOpenIcon />
</Link>{" "} </Link>{" "}
</p> </p>
</> </>
); );
})} })}</div>
&nbsp;&nbsp;&nbsp;&nbsp; </div>
</>
); );
})} })}
</BoxWrapper> </BoxWrapper>

37
front/app/_orgs/[orgslug]/settings/account/passwords/page.tsx
View file

@ -21,7 +21,7 @@ function SettingsProfilePasswordsPage() {
{auth.isAuthenticated && ( {auth.isAuthenticated && (
<div> <div>
<h1>Account Password</h1> <h1 className='text-3xl font-bold'>Account Password</h1>
<br /><br /> <br /><br />
<Formik <Formik
@ -35,13 +35,34 @@ function SettingsProfilePasswordsPage() {
}} }}
> >
{({ isSubmitting }) => ( {({ isSubmitting }) => (
<Form> <Form className="max-w-md">
Old Password <Field type="password" name="old_password" /><br /> <label className="block mb-2 font-bold" htmlFor="old_password">
New password <Field type="password" name="new_password" /><br /> Old Password
<button type="submit" disabled={isSubmitting}> </label>
Submit <Field
</button> className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
</Form> type="password"
name="old_password"
/>
<label className="block mb-2 font-bold" htmlFor="new_password">
New Password
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="password"
name="new_password"
/>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Submit
</button>
</Form>
)} )}
</Formik> </Formik>
</div> </div>

42
front/app/_orgs/[orgslug]/settings/account/profile/page.tsx
View file

@ -12,7 +12,7 @@ function SettingsProfilePage() {
{auth.isAuthenticated && ( {auth.isAuthenticated && (
<div> <div>
<h1>Profile Settings</h1> <h1 className='text-3xl font-bold'>Profile Settings</h1>
<br /><br /> <br /><br />
<Formik <Formik
@ -27,14 +27,44 @@ function SettingsProfilePage() {
}} }}
> >
{({ isSubmitting }) => ( {({ isSubmitting }) => (
<Form> <Form className="max-w-md">
Full name <Field type="textarea" name="full_name" /><br /> <label className="block mb-2 font-bold" htmlFor="full_name">
Email <Field type="email" name="email" /><br /> Full Name
Bio <Field as="textarea" type="textarea" name="bio" /><br /> </label>
<button type="submit" disabled={isSubmitting}> <Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="textarea"
name="full_name"
/>
<label className="block mb-2 font-bold" htmlFor="email">
Email
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="email"
name="email"
/>
<label className="block mb-2 font-bold" htmlFor="bio">
Bio
</label>
<Field
as="textarea"
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="textarea"
name="bio"
/>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Submit Submit
</button> </button>
</Form> </Form>
)} )}
</Formik> </Formik>
</div> </div>

58
front/app/_orgs/[orgslug]/settings/organization/general/page.tsx
View file

@ -37,7 +37,7 @@ function SettingsOrganizationGeneral(params: any) {
return ( return (
<div> <div>
<h1>Oganization Settings</h1> <h1 className='text-3xl font-bold'>Oganization Settings</h1>
<br /><br /> <br /><br />
{error && <p>Failed to load</p>} {error && <p>Failed to load</p>}
{!org ? ( {!org ? (
@ -55,15 +55,53 @@ function SettingsOrganizationGeneral(params: any) {
}} }}
> >
{({ isSubmitting }) => ( {({ isSubmitting }) => (
<Form> <Form>
Name <Field type="text" name="name" /><br /> <label className="block mb-2 font-bold" htmlFor="name">
Description <Field type="text" name="description" /><br /> Name
Slug <Field disabled type="text" name="slug" /> <br /> </label>
Email <Field type="email" name="email" /><br /> <Field
<button type="submit" disabled={isSubmitting}> className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
Submit type="text"
</button> name="name"
</Form> />
<label className="block mb-2 font-bold" htmlFor="description">
Description
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text"
name="description"
/>
<label className="block mb-2 font-bold" htmlFor="slug">
Slug
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg bg-gray-200 cursor-not-allowed"
disabled
type="text"
name="slug"
/>
<label className="block mb-2 font-bold" htmlFor="email">
Email
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="email"
name="email"
/>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
>
Submit
</button>
</Form>
)} )}
</Formik> </Formik>
)} )}

31
front/app/organizations/page.tsx
View file

@ -9,38 +9,47 @@ import { getAPIUrl, getUriWithOrg } from "@services/config/config";
import AuthProvider from "@components/Security/AuthProvider"; import AuthProvider from "@components/Security/AuthProvider";
const Organizations = () => { const Organizations = () => {
const { data : organizations , error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher) const { data: organizations, error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher)
async function deleteOrganization(org_id: any) { async function deleteOrganization(org_id: any) {
const response = await deleteOrganizationFromBackend(org_id); const response = await deleteOrganizationFromBackend(org_id);
response && mutate(`${getAPIUrl()}orgs/user/page/1/limit/10`, organizations.filter((org: any) => org.org_id !== org_id)); response && mutate(`${getAPIUrl()}orgs/user/page/1/limit/10`, organizations.filter((org: any) => org.org_id !== org_id));
} }
return ( return (
<> <>
<AuthProvider/> <AuthProvider />
<Title> <Title>
Your Organizations{" "} Your Organizations{" "}
<Link href={"/organizations/new"}> <Link href="/organizations/new">
<button>+</button> <button className="bg-blue-500 text-white px-2 py-1 rounded-md hover:bg-blue-600 focus:outline-none">
+
</button>
</Link> </Link>
</Title> </Title>
<hr /> <hr />
{error && <p>Failed to load</p>}
{error && <p className="text-red-500">Failed to load</p>}
{!organizations ? ( {!organizations ? (
<p>Loading...</p> <p className="text-gray-500">Loading...</p>
) : ( ) : (
<div> <div>
{organizations.map((org: any) => ( {organizations.map((org: any) => (
<div key={org.org_id}> <div key={org.org_id} className="flex items-center justify-between mb-4">
<Link href={getUriWithOrg(org.slug,"/")}> <Link href={getUriWithOrg(org.slug, "/")}>
<h3>{org.name}</h3> <h3 className="text-blue-500 cursor-pointer hover:underline">{org.name}</h3>
</Link> </Link>
<button onClick={() => deleteOrganization(org.org_id)}>Delete</button> <button
onClick={() => deleteOrganization(org.org_id)}
className="px-3 py-1 text-white bg-red-500 rounded-md hover:bg-red-600 focus:outline-none"
>
Delete
</button>
</div> </div>
))} ))}
</div> </div>
)} )}
</> </>
); );
}; };

34
front/components/Pages/CourseEdit/Draggables/Activity.tsx
View file

@ -1,6 +1,6 @@
import Link from "next/link"; import Link from "next/link";
import React from "react"; import React from "react";
import { Draggable } from "react-beautiful-dnd"; import { Draggable } from "react-beautiful-dnd";
import { EyeOpenIcon, Pencil2Icon } from '@radix-ui/react-icons' import { EyeOpenIcon, Pencil2Icon } from '@radix-ui/react-icons'
import styled from "styled-components"; import styled from "styled-components";
import { getUriWithOrg } from "@services/config/config"; import { getUriWithOrg } from "@services/config/config";
@ -10,38 +10,24 @@ function Activity(props: any) {
return ( return (
<Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}> <Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
{(provided) => ( {(provided) => (
<ActivityWrapper key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> <div
className="flex flex-row items-center py-2 my-3 rounded-md justify-center bg-gray-50 hover:bg-gray-100 space-x-2" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<p>{props.activity.name} </p> <p>{props.activity.name} </p>
<Link <Link
href={getUriWithOrg(props.orgslug,"")+`/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`} href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}
rel="noopener noreferrer"> rel="noopener noreferrer"> <EyeOpenIcon />
&nbsp; <EyeOpenIcon/>
</Link> </Link>
<Link <Link
href={getUriWithOrg(props.orgslug,"") +`/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`} href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`}
rel="noopener noreferrer"> rel="noopener noreferrer">
&nbsp; <Pencil2Icon/> <Pencil2Icon />
</Link> </Link>
</ActivityWrapper> </div>
)} )}
</Draggable> </Draggable>
); );
} }
export const ActivityWrapper = styled.div`
padding: 2px;
padding-left: 17px;
list-style: none;
/* padding-left: 2px; */
background-color: #f4f4f4c5;
border-radius: 7px;
margin: 15px;
display: flex;
align-items: center;
&:hover {
background-color: #8c949c7b;
}
`;
export default Activity; export default Activity;

6
front/components/Pages/CourseEdit/Draggables/Chapter.tsx
View file

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import Activity, { ActivityWrapper } from "./Activity"; import Activity from "./Activity";
function Chapter(props: any) { function Chapter(props: any) {
return ( return (
@ -14,8 +14,8 @@ function Chapter(props: any) {
// isDragging={snapshot.isDragging} // isDragging={snapshot.isDragging}
key={props.info.list.chapter.id} key={props.info.list.chapter.id}
> >
<h3> <h3 className="pt-3 font-bold text-md">
{props.info.list.chapter.name}{" "} {props.info.list.chapter.name}
<button <button
onClick={() => { onClick={() => {
props.openNewActivityModal(props.info.list.chapter.id); props.openNewActivityModal(props.info.list.chapter.id);

3
front/next.config.js
View file

@ -9,8 +9,9 @@ const nextConfig = {
reactStrictMode: false, reactStrictMode: false,
experimental: { experimental: {
appDir : true, appDir : true,
swcFileReading: false,
}, },
swcMinify: true, swcMinify: false,
compiler: { compiler: {
styledComponents: true, styledComponents: true,
}, },