feat: format with prettier

This commit is contained in:
swve 2024-02-09 21:22:15 +01:00
parent 03fb09c3d6
commit a147ad6610
164 changed files with 11257 additions and 8154 deletions

View file

@ -1,34 +1,50 @@
import React from "react";
import Link from "next/link";
import { Draggable } from "react-beautiful-dnd";
import { getAPIUrl, getUriWithOrg } from "@services/config/config";
import { Video, Sparkles, X, Pencil, MoreVertical, Eye, Save, File } from "lucide-react";
import { mutate } from "swr";
import { revalidateTags } from "@services/utils/ts/requests";
import { useRouter } from "next/navigation";
import ConfirmationModal from "@components/StyledElements/ConfirmationModal/ConfirmationModal";
import { deleteActivity, updateActivity } from "@services/courses/activities";
import React from 'react'
import Link from 'next/link'
import { Draggable } from 'react-beautiful-dnd'
import { getAPIUrl, getUriWithOrg } from '@services/config/config'
import {
Video,
Sparkles,
X,
Pencil,
MoreVertical,
Eye,
Save,
File,
} from 'lucide-react'
import { mutate } from 'swr'
import { revalidateTags } from '@services/utils/ts/requests'
import { useRouter } from 'next/navigation'
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import { deleteActivity, updateActivity } from '@services/courses/activities'
interface ModifiedActivityInterface {
activityId: string;
activityName: string;
activityId: string
activityName: string
}
function Activity(props: any) {
const router = useRouter();
const [modifiedActivity, setModifiedActivity] = React.useState<ModifiedActivityInterface | undefined>(undefined);
const [selectedActivity, setSelectedActivity] = React.useState<string | undefined>(undefined);
const router = useRouter()
const [modifiedActivity, setModifiedActivity] = React.useState<
ModifiedActivityInterface | undefined
>(undefined)
const [selectedActivity, setSelectedActivity] = React.useState<
string | undefined
>(undefined)
async function removeActivity() {
await deleteActivity(props.activity.id);
mutate(`${getAPIUrl()}chapters/meta/course_${props.courseid}`);
await revalidateTags(['courses'], props.orgslug);
router.refresh();
await deleteActivity(props.activity.id)
mutate(`${getAPIUrl()}chapters/meta/course_${props.courseid}`)
await revalidateTags(['courses'], props.orgslug)
router.refresh()
}
async function updateActivityName(activityId: string) {
if ((modifiedActivity?.activityId === activityId) && selectedActivity !== undefined) {
setSelectedActivity(undefined);
if (
modifiedActivity?.activityId === activityId &&
selectedActivity !== undefined
) {
setSelectedActivity(undefined)
let modifiedActivityCopy = {
name: modifiedActivity.activityName,
description: '',
@ -39,74 +55,153 @@ function Activity(props: any) {
await updateActivity(modifiedActivityCopy, activityId)
await mutate(`${getAPIUrl()}chapters/meta/course_${props.courseid}`)
await revalidateTags(['courses'], props.orgslug)
router.refresh();
router.refresh()
}
}
return (
<Draggable key={props.activity.uuid} draggableId={String(props.activity.uuid)} index={props.index}>
<Draggable
key={props.activity.uuid}
draggableId={String(props.activity.uuid)}
index={props.index}
>
{(provided) => (
<div
className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<div className="px-3 text-gray-300 space-x-1 w-28" >
{props.activity.type === "video" && <>
<div className="flex space-x-2 items-center"><Video size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">Video</div> </div></>}
{props.activity.type === "documentpdf" && <><div className="flex space-x-2 items-center"><div className="w-[30px]"><File size={16} /> </div><div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Document</div> </div></>}
{props.activity.type === "dynamic" && <><div className="flex space-x-2 items-center"><Sparkles size={16} /> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">Dynamic</div> </div></>}
className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear"
key={props.activity.id}
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<div className="px-3 text-gray-300 space-x-1 w-28">
{props.activity.type === 'video' && (
<>
<div className="flex space-x-2 items-center">
<Video size={16} />{' '}
<div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">
Video
</div>{' '}
</div>
</>
)}
{props.activity.type === 'documentpdf' && (
<>
<div className="flex space-x-2 items-center">
<div className="w-[30px]">
<File size={16} />{' '}
</div>
<div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">
Document
</div>{' '}
</div>
</>
)}
{props.activity.type === 'dynamic' && (
<>
<div className="flex space-x-2 items-center">
<Sparkles size={16} />{' '}
<div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">
Dynamic
</div>{' '}
</div>
</>
)}
</div>
<div className="grow items-center space-x-2 flex mx-auto justify-center">
{selectedActivity === props.activity.id ?
(<div className="chapter-modification-zone text-[7px] text-gray-600 shadow-inner bg-gray-200/60 py-1 px-4 rounded-lg space-x-3">
<input type="text" className="bg-transparent outline-none text-xs text-gray-500" placeholder="Activity name" value={modifiedActivity ? modifiedActivity?.activityName : props.activity.name} onChange={(e) => setModifiedActivity({ activityId: props.activity.id, activityName: e.target.value })} />
<button onClick={() => updateActivityName(props.activity.id)} className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900">
<Save size={11} onClick={() => updateActivityName(props.activity.id)} />
{selectedActivity === props.activity.id ? (
<div className="chapter-modification-zone text-[7px] text-gray-600 shadow-inner bg-gray-200/60 py-1 px-4 rounded-lg space-x-3">
<input
type="text"
className="bg-transparent outline-none text-xs text-gray-500"
placeholder="Activity name"
value={
modifiedActivity
? modifiedActivity?.activityName
: props.activity.name
}
onChange={(e) =>
setModifiedActivity({
activityId: props.activity.id,
activityName: e.target.value,
})
}
/>
<button
onClick={() => updateActivityName(props.activity.id)}
className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900"
>
<Save
size={11}
onClick={() => updateActivityName(props.activity.id)}
/>
</button>
</div>) : (<p className="first-letter:uppercase"> {props.activity.name} </p>)}
<Pencil onClick={() => setSelectedActivity(props.activity.id)}
size={12} className="text-neutral-400 hover:cursor-pointer" />
</div>
) : (
<p className="first-letter:uppercase"> {props.activity.name} </p>
)}
<Pencil
onClick={() => setSelectedActivity(props.activity.id)}
size={12}
className="text-neutral-400 hover:cursor-pointer"
/>
</div>
<div className="flex flex-row space-x-2">
{props.activity.type === "TYPE_DYNAMIC" && <>
<Link
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.uuid.replace("activity_", "")}/edit`}
className=" hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md items-center"
rel="noopener noreferrer">
<div className="text-sky-100 font-bold text-xs" >Edit </div>
</Link>
</>}
{props.activity.type === 'TYPE_DYNAMIC' && (
<>
<Link
href={
getUriWithOrg(props.orgslug, '') +
`/course/${
props.courseid
}/activity/${props.activity.uuid.replace(
'activity_',
''
)}/edit`
}
className=" hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md items-center"
rel="noopener noreferrer"
>
<div className="text-sky-100 font-bold text-xs">Edit </div>
</Link>
</>
)}
<Link
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.uuid.replace("activity_", "")}`}
href={
getUriWithOrg(props.orgslug, '') +
`/course/${
props.courseid
}/activity/${props.activity.uuid.replace('activity_', '')}`
}
className=" hover:cursor-pointer p-1 px-3 bg-gray-200 rounded-md"
rel="noopener noreferrer">
rel="noopener noreferrer"
>
<Eye strokeWidth={2} size={15} className="text-gray-600" />
</Link>
</div>
<div className="flex flex-row pr-3 space-x-1 items-center">
<MoreVertical size={15} className="text-gray-300" />
<ConfirmationModal
confirmationMessage="Are you sure you want to delete this activity ?"
confirmationButtonText="Delete Activity"
dialogTitle={"Delete " + props.activity.name + " ?"}
dialogTitle={'Delete ' + props.activity.name + ' ?'}
dialogTrigger={
<div
className=" hover:cursor-pointer p-1 px-5 bg-red-600 rounded-md"
rel="noopener noreferrer">
rel="noopener noreferrer"
>
<X size={15} className="text-rose-200 font-bold" />
</div>}
</div>
}
functionToExecute={() => removeActivity()}
status='warning'
></ConfirmationModal></div>
status="warning"
></ConfirmationModal>
</div>
</div>
)}
</Draggable>
);
)
}
export default Activity;
export default Activity

View file

@ -1,40 +1,48 @@
import React from "react";
import styled from "styled-components";
import { Droppable, Draggable } from "react-beautiful-dnd";
import Activity from "./Activity";
import { Hexagon, MoreVertical, Pencil, Save, Sparkles, X } from "lucide-react";
import ConfirmationModal from "@components/StyledElements/ConfirmationModal/ConfirmationModal";
import { useRouter } from "next/navigation";
import { updateChapter } from "@services/courses/chapters";
import { mutate } from "swr";
import { getAPIUrl } from "@services/config/config";
import { revalidateTags } from "@services/utils/ts/requests";
import React from 'react'
import styled from 'styled-components'
import { Droppable, Draggable } from 'react-beautiful-dnd'
import Activity from './Activity'
import { Hexagon, MoreVertical, Pencil, Save, Sparkles, X } from 'lucide-react'
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
import { useRouter } from 'next/navigation'
import { updateChapter } from '@services/courses/chapters'
import { mutate } from 'swr'
import { getAPIUrl } from '@services/config/config'
import { revalidateTags } from '@services/utils/ts/requests'
interface ModifiedChapterInterface {
chapterId: string;
chapterName: string;
chapterId: string
chapterName: string
}
function Chapter(props: any) {
const router = useRouter();
const [modifiedChapter, setModifiedChapter] = React.useState<ModifiedChapterInterface | undefined>(undefined);
const [selectedChapter, setSelectedChapter] = React.useState<string | undefined>(undefined);
const router = useRouter()
const [modifiedChapter, setModifiedChapter] = React.useState<
ModifiedChapterInterface | undefined
>(undefined)
const [selectedChapter, setSelectedChapter] = React.useState<
string | undefined
>(undefined)
async function updateChapterName(chapterId: string) {
if (modifiedChapter?.chapterId === chapterId) {
setSelectedChapter(undefined);
setSelectedChapter(undefined)
let modifiedChapterCopy = {
name: modifiedChapter.chapterName,
}
await updateChapter(chapterId, modifiedChapterCopy)
await mutate(`${getAPIUrl()}chapters/course/${props.course_uuid}/meta`)
await revalidateTags(['courses'], props.orgslug)
router.refresh();
router.refresh()
}
}
return (
<Draggable key={props.info.list.chapter.uuid} draggableId={String(props.info.list.chapter.uuid)} index={props.index}>
<Draggable
key={props.info.list.chapter.uuid}
draggableId={String(props.info.list.chapter.uuid)}
index={props.index}
>
{(provided, snapshot) => (
<ChapterWrapper
{...provided.dragHandleProps}
@ -47,63 +55,121 @@ function Chapter(props: any) {
<div className="flex pt-3 pr-3 font-bold text-md items-center space-x-2">
<div className="flex grow text-lg space-x-3 items-center rounded-md px-3 py-1">
<div className="bg-neutral-100 rounded-md p-2">
<Hexagon strokeWidth={3} size={16} className="text-neutral-600 " />
<Hexagon
strokeWidth={3}
size={16}
className="text-neutral-600 "
/>
</div>
<div className="flex space-x-2 items-center">
{selectedChapter === props.info.list.chapter.id ?
(<div className="chapter-modification-zone bg-neutral-100 py-1 px-4 rounded-lg space-x-3">
<input type="text" className="bg-transparent outline-none text-sm text-neutral-700" placeholder="Chapter name" value={modifiedChapter ? modifiedChapter?.chapterName : props.info.list.chapter.name} onChange={(e) => setModifiedChapter({ chapterId: props.info.list.chapter.id, chapterName: e.target.value })} />
<button onClick={() => updateChapterName(props.info.list.chapter.id)} className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900">
<Save size={15} onClick={() => updateChapterName(props.info.list.chapter.id)} />
{selectedChapter === props.info.list.chapter.id ? (
<div className="chapter-modification-zone bg-neutral-100 py-1 px-4 rounded-lg space-x-3">
<input
type="text"
className="bg-transparent outline-none text-sm text-neutral-700"
placeholder="Chapter name"
value={
modifiedChapter
? modifiedChapter?.chapterName
: props.info.list.chapter.name
}
onChange={(e) =>
setModifiedChapter({
chapterId: props.info.list.chapter.id,
chapterName: e.target.value,
})
}
/>
<button
onClick={() =>
updateChapterName(props.info.list.chapter.id)
}
className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900"
>
<Save
size={15}
onClick={() =>
updateChapterName(props.info.list.chapter.id)
}
/>
</button>
</div>) : (<p className="text-neutral-700 first-letter:uppercase">{props.info.list.chapter.name}</p>)}
<Pencil size={15} className="text-neutral-600 hover:cursor-pointer" onClick={() => setSelectedChapter(props.info.list.chapter.id)} />
</div>
) : (
<p className="text-neutral-700 first-letter:uppercase">
{props.info.list.chapter.name}
</p>
)}
<Pencil
size={15}
className="text-neutral-600 hover:cursor-pointer"
onClick={() => setSelectedChapter(props.info.list.chapter.id)}
/>
</div>
</div>
<MoreVertical size={15} className="text-gray-300" />
<ConfirmationModal
confirmationButtonText="Delete Chapter"
confirmationMessage="Are you sure you want to delete this chapter?"
dialogTitle={"Delete " + props.info.list.chapter.name + " ?"}
dialogTitle={'Delete ' + props.info.list.chapter.name + ' ?'}
dialogTrigger={
<div
className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md shadow flex space-x-1 items-center text-rose-100 text-sm"
rel="noopener noreferrer">
rel="noopener noreferrer"
>
<X size={15} className="text-rose-200 font-bold" />
<p>Delete Chapter</p>
</div>}
functionToExecute={() => props.deleteChapter(props.info.list.chapter.id)}
status='warning'
</div>
}
functionToExecute={() =>
props.deleteChapter(props.info.list.chapter.id)
}
status="warning"
></ConfirmationModal>
</div>
<Droppable key={props.info.list.chapter.id} droppableId={String(props.info.list.chapter.id)} type="activity">
<Droppable
key={props.info.list.chapter.id}
droppableId={String(props.info.list.chapter.id)}
type="activity"
>
{(provided) => (
<ActivitiesList {...provided.droppableProps} ref={provided.innerRef}>
<ActivitiesList
{...provided.droppableProps}
ref={provided.innerRef}
>
<div className="flex flex-col">
{props.info.list.activities.map((activity: any, index: any) => (
<Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
))}
{props.info.list.activities.map(
(activity: any, index: any) => (
<Activity
orgslug={props.orgslug}
courseid={props.courseid}
key={activity.id}
activity={activity}
index={index}
></Activity>
)
)}
{provided.placeholder}
<div onClick={() => {
props.openNewActivityModal(props.info.list.chapter.id);
}} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-white bg-black hover:cursor-pointer">
<div
onClick={() => {
props.openNewActivityModal(props.info.list.chapter.id)
}}
className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-white bg-black hover:cursor-pointer"
>
<Sparkles className="" size={17} />
<div className="text-sm mx-auto my-auto items-center font-bold">Add Activity + </div>
<div className="text-sm mx-auto my-auto items-center font-bold">
Add Activity +{' '}
</div>
</div>
</div>
</ActivitiesList>
)}
</Droppable>
</ChapterWrapper>
)}
</Draggable>
);
)
}
const ChapterWrapper = styled.div`
@ -115,14 +181,14 @@ const ChapterWrapper = styled.div`
border: 1px solid rgba(255, 255, 255, 0.19);
box-shadow: 0px 13px 33px -13px rgb(0 0 0 / 12%);
transition: all 0.2s ease;
h3{
h3 {
padding-left: 20px;
padding-right: 20px;
}
`;
`
const ActivitiesList = styled.div`
padding: 10px;
`;
`
export default Chapter;
export default Chapter

View file

@ -1,20 +1,30 @@
export const initialData = {
activities: {
"activity-1": { id: "activity-1", content: "First activity" },
"activity-2": { id: "activity-2", content: "Second activity" },
"activity-3": { id: "activity-3", content: "Third activity" },
"activity-4": { id: "activity-4", content: "Fourth activity" },
"activity-5": { id: "activity-5", content: "Fifth activity" },
'activity-1': { id: 'activity-1', content: 'First activity' },
'activity-2': { id: 'activity-2', content: 'Second activity' },
'activity-3': { id: 'activity-3', content: 'Third activity' },
'activity-4': { id: 'activity-4', content: 'Fourth activity' },
'activity-5': { id: 'activity-5', content: 'Fifth activity' },
},
chapters: {
"chapter-1": { id: "chapter-1", name: "Chapter 1", activityIds: ["activity-1", "activity-2", "activity-3"] },
"chapter-2": { id: "chapter-2", name: "Chapter 2", activityIds: ["activity-4"] },
"chapter-3": { id: "chapter-3", name: "Chapter 3", activityIds: ["activity-5"] },
'chapter-1': {
id: 'chapter-1',
name: 'Chapter 1',
activityIds: ['activity-1', 'activity-2', 'activity-3'],
},
'chapter-2': {
id: 'chapter-2',
name: 'Chapter 2',
activityIds: ['activity-4'],
},
'chapter-3': {
id: 'chapter-3',
name: 'Chapter 3',
activityIds: ['activity-5'],
},
},
chapterOrder: ["chapter-1", "chapter-2", "chapter-3"],
};
export const initialData2 = {
};
chapterOrder: ['chapter-1', 'chapter-2', 'chapter-3'],
}
export const initialData2 = {}