mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-18 20:09:25 +00:00
Merge remote-tracking branch 'origin/dev' into fix/make-left-menu-sticky
This commit is contained in:
Chris Holland
commit
9c41df22da
34 changed files with 3514 additions and 2599 deletions
3538
apps/api/poetry.lock
generated
3538
apps/api/poetry.lock
generated
File diff suppressed because it is too large
Load diff
|
|
@ -195,16 +195,16 @@ async def delete_chapter(
|
|||
# RBAC check
|
||||
await rbac_check(request, chapter.chapter_uuid, current_user, "delete", db_session)
|
||||
|
||||
db_session.delete(chapter)
|
||||
db_session.commit()
|
||||
|
||||
# Remove all linked activities
|
||||
statement = select(ChapterActivity).where(ChapterActivity.id == chapter.id)
|
||||
# Remove all linked chapter activities
|
||||
statement = select(ChapterActivity).where(ChapterActivity.chapter_id == chapter.id)
|
||||
chapter_activities = db_session.exec(statement).all()
|
||||
|
||||
for chapter_activity in chapter_activities:
|
||||
db_session.delete(chapter_activity)
|
||||
db_session.commit()
|
||||
|
||||
# Delete the chapter
|
||||
db_session.delete(chapter)
|
||||
db_session.commit()
|
||||
|
||||
return {"detail": "chapter deleted"}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@hocuspocus/server": "^2.11.3",
|
||||
"bun": "^1.0.36",
|
||||
"@hocuspocus/server": "^2.13.7",
|
||||
"bun": "^1.1.32",
|
||||
"typescript": "5.4.4",
|
||||
"y-protocols": "^1.0.6",
|
||||
"yjs": "^13.6.14"
|
||||
"yjs": "^13.6.20"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
143
apps/collaboration/pnpm-lock.yaml
generated
143
apps/collaboration/pnpm-lock.yaml
generated
|
|
@ -9,77 +9,78 @@ importers:
|
|||
.:
|
||||
dependencies:
|
||||
'@hocuspocus/server':
|
||||
specifier: ^2.11.3
|
||||
version: 2.11.3(y-protocols@1.0.6(yjs@13.6.14))(yjs@13.6.14)
|
||||
specifier: ^2.13.7
|
||||
version: 2.13.7(y-protocols@1.0.6(yjs@13.6.20))(yjs@13.6.20)
|
||||
bun:
|
||||
specifier: ^1.0.36
|
||||
version: 1.1.1
|
||||
specifier: ^1.1.32
|
||||
version: 1.1.32
|
||||
typescript:
|
||||
specifier: 5.4.4
|
||||
version: 5.4.4
|
||||
y-protocols:
|
||||
specifier: ^1.0.6
|
||||
version: 1.0.6(yjs@13.6.14)
|
||||
version: 1.0.6(yjs@13.6.20)
|
||||
yjs:
|
||||
specifier: ^13.6.14
|
||||
version: 13.6.14
|
||||
specifier: ^13.6.20
|
||||
version: 13.6.20
|
||||
|
||||
packages:
|
||||
|
||||
'@hocuspocus/common@2.11.3':
|
||||
resolution: {integrity: sha512-w3UZpW6ZVYIHPEFzZJV3yn1d3EZaXf2m2zU53pwj0AyTBmVD7kB9ZiD6twc9A7NNB1dkqD8c58PbD42+pnNiKQ==}
|
||||
'@hocuspocus/common@2.13.7':
|
||||
resolution: {integrity: sha512-ROqYfW15XlAGd+qb/FVyp0zUC9Rosv7kdcck9LRMdfW3jT66wK9pDDWL2ily4Qj/zhbLCFtjAUPB4UKln/GYNQ==}
|
||||
|
||||
'@hocuspocus/server@2.11.3':
|
||||
resolution: {integrity: sha512-1Vdy4RtJcpffs5I4Ey3M8ulu2f6AbpSDmK4YFG8k3O4EJT7HDSO3Ib5STiRBxlr2LncJeVa2ikwlvwQotsWqew==}
|
||||
'@hocuspocus/server@2.13.7':
|
||||
resolution: {integrity: sha512-D9juGX9NZoKT9/Ty/HGhaimHJe71DyKbYssC831oetYF33x3WSYV6GY82RhHo9xjKZE6r0Le7jgxgQb+u08slw==}
|
||||
peerDependencies:
|
||||
y-protocols: ^1.0.6
|
||||
yjs: ^13.6.8
|
||||
|
||||
'@oven/bun-darwin-aarch64@1.1.1':
|
||||
resolution: {integrity: sha512-RDs5ZMSkcurj4YqPtkcKGYUA46/LDcw7tQ0a4hBI/mtjpYySYmIIYkSeeotl9IJMNcG+ZsHpRc4b7ROFRYhxEw==}
|
||||
'@oven/bun-darwin-aarch64@1.1.32':
|
||||
resolution: {integrity: sha512-/5lu8RJB/iEoC9pzFOCZLCEmNsEI3DEEyxfItZpih/piNOFhCYmoMvm7mM0YXqSc7pfxYaKukEZEHGeIOiu/3Q==}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
|
||||
'@oven/bun-darwin-x64-baseline@1.1.1':
|
||||
resolution: {integrity: sha512-sJKZqgT9JSbxTPLULHdcYiKy+F4x2gq114FxDwEqn3YVZnBqSO0X9GCqWOa1CNqUaxGvJnNgn+HDkIQlnXVLiA==}
|
||||
'@oven/bun-darwin-x64-baseline@1.1.32':
|
||||
resolution: {integrity: sha512-XRP+APoLxrXznL7BEHipAdDu0Mn1RwD9PsaqFu1Be5Dbyi+2bYICuTiN1W9vfZNN3kK8eTyniT7kjwLSTcHbEg==}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@oven/bun-darwin-x64@1.1.1':
|
||||
resolution: {integrity: sha512-RiRbhu9htOML4+81AfHIvjgdVU3jsn+EiyvwuUv5j91vgGrZLkNXebGZXt2eGDDutGzHqvQJqW6sxQ+UNJQi7w==}
|
||||
'@oven/bun-darwin-x64@1.1.32':
|
||||
resolution: {integrity: sha512-Slk4QFHcqZ94mnNlzsCG/9m+gET0mpi13bfizRGv8QNRku8mQTs9brN5XvovYrP5t0rfaZDFMOoaOs6wk6rcDg==}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@oven/bun-linux-aarch64@1.1.1':
|
||||
resolution: {integrity: sha512-9twn92P90pAwyvC6PzcWv/3a2B2/01TzdCwslWNaI0LdQ3b+sJR4IvdXG1yQI3N2Ne/ticM7eww2eWma4I0LRQ==}
|
||||
'@oven/bun-linux-aarch64@1.1.32':
|
||||
resolution: {integrity: sha512-7QdyRCiLHb1MuwDH7iir5xD6gTKWlvMGxvcQhbY/U1djqG/gft4+PaJrSJQcVhqRb143mrMNXIhTgc84O6htMw==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@oven/bun-linux-x64-baseline@1.1.1':
|
||||
resolution: {integrity: sha512-2nXg32DLs0xaZH5GafJ16UqrDr4XGRXTeyZW3PNhplaFY0m3fRDXCqDsXmTvsQoGO/FEtMrEmJSWXbLa7u0B4A==}
|
||||
'@oven/bun-linux-x64-baseline@1.1.32':
|
||||
resolution: {integrity: sha512-zvXOAUTc6cOlUR26NEwh3isV+z2EW4QxFiWoxgvM7eIuZMnZjV22+H+dEzVKJzV58XgfPX//fEPi3Xjg4xXdMA==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@oven/bun-linux-x64@1.1.1':
|
||||
resolution: {integrity: sha512-2JPkRTCSXe5w9JvMucx7fgN77yQK+XZ+fY7WlEsZnAR4PjEGImZA12nGNbnxEHM3TmOEivy2PP00nAXeu9LViA==}
|
||||
'@oven/bun-linux-x64@1.1.32':
|
||||
resolution: {integrity: sha512-JgsQ1ZXKmovQNzf4YdA3WDZVrtEbMlbL43Yjcczovy6lDrhSZkTu1GjzMm5JQnuqNwBC4/eSIgVL27J1Pj6nlA==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@oven/bun-windows-x64-baseline@1.1.1':
|
||||
resolution: {integrity: sha512-3q/THmrP1yA8/YTJoS29Et5a+AxP2jGX96cYHlOZEjoTj/FBNFSuuPVvvFEpjrRkQ8Oz9iNE/C6ltna8WKSUxQ==}
|
||||
'@oven/bun-windows-x64-baseline@1.1.32':
|
||||
resolution: {integrity: sha512-0DgP99AcBfKz3OCS5qO2/8e5TgNhBq8ZiNbPJzQaF4QOpS/Rt+mvFcQUa8x5gTOUPHH9ciaMz0IEs2Qv42eoAw==}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@oven/bun-windows-x64@1.1.1':
|
||||
resolution: {integrity: sha512-oolhIph8Kah6K/7kPUjcqgc2N5lS6RD4yruwrG2QYhxcYWTh7m36Ngp709l8+trhLLaUyTnvr4MvuiKPl1cRjQ==}
|
||||
'@oven/bun-windows-x64@1.1.32':
|
||||
resolution: {integrity: sha512-grzRSH/9YIKWUHumygtG9Aen04wJv+v6lbmTvqsfcc/1/BJJFCLf+69EN3PINAIisih1hycxGa9eleVxjL0fqg==}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
async-lock@1.4.1:
|
||||
resolution: {integrity: sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ==}
|
||||
|
||||
bun@1.1.1:
|
||||
resolution: {integrity: sha512-gV90TkJgHvI50X9BoKQ3zVpPEY6YP0vqOww2uZmsOyckZSRlcFYWhXZwFj6PV8KCFINYs8VZ65m59U2RuFYfWw==}
|
||||
bun@1.1.32:
|
||||
resolution: {integrity: sha512-W+UO0ihRmDHscmTfQAoPPaFLqLaloyBdAIr2iX70v3Vgo+7ZiKeyj7Aa4YDWStxQQmlzD5JP3NG/5TSWAK+1WQ==}
|
||||
cpu: [arm64, x64]
|
||||
os: [darwin, linux, win32]
|
||||
hasBin: true
|
||||
|
||||
|
|
@ -90,8 +91,8 @@ packages:
|
|||
resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
lib0@0.2.93:
|
||||
resolution: {integrity: sha512-M5IKsiFJYulS+8Eal8f+zAqf5ckm1vffW0fFDxfgxJ+uiVopvDdd3PxJmz0GsVi3YNO7QCFSq0nAsiDmNhLj9Q==}
|
||||
lib0@0.2.98:
|
||||
resolution: {integrity: sha512-XteTiNO0qEXqqweWx+b21p/fBnNHUA1NwAtJNJek1oPrewEZs2uiT4gWivHKr9GqCjDPAhchz0UQO8NwU3bBNA==}
|
||||
engines: {node: '>=16'}
|
||||
hasBin: true
|
||||
|
||||
|
|
@ -100,12 +101,12 @@ packages:
|
|||
engines: {node: '>=14.17'}
|
||||
hasBin: true
|
||||
|
||||
uuid@9.0.1:
|
||||
resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
|
||||
uuid@10.0.0:
|
||||
resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
|
||||
hasBin: true
|
||||
|
||||
ws@8.16.0:
|
||||
resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
|
||||
ws@8.18.0:
|
||||
resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
peerDependencies:
|
||||
bufferutil: ^4.0.1
|
||||
|
|
@ -122,86 +123,86 @@ packages:
|
|||
peerDependencies:
|
||||
yjs: ^13.0.0
|
||||
|
||||
yjs@13.6.14:
|
||||
resolution: {integrity: sha512-D+7KcUr0j+vBCUSKXXEWfA+bG4UQBviAwP3gYBhkstkgwy5+8diOPMx0iqLIOxNo/HxaREUimZRxqHGAHCL2BQ==}
|
||||
yjs@13.6.20:
|
||||
resolution: {integrity: sha512-Z2YZI+SYqK7XdWlloI3lhMiKnCdFCVC4PchpdO+mCYwtiTwncjUbnRK9R1JmkNfdmHyDXuWN3ibJAt0wsqTbLQ==}
|
||||
engines: {node: '>=16.0.0', npm: '>=8.0.0'}
|
||||
|
||||
snapshots:
|
||||
|
||||
'@hocuspocus/common@2.11.3':
|
||||
'@hocuspocus/common@2.13.7':
|
||||
dependencies:
|
||||
lib0: 0.2.93
|
||||
lib0: 0.2.98
|
||||
|
||||
'@hocuspocus/server@2.11.3(y-protocols@1.0.6(yjs@13.6.14))(yjs@13.6.14)':
|
||||
'@hocuspocus/server@2.13.7(y-protocols@1.0.6(yjs@13.6.20))(yjs@13.6.20)':
|
||||
dependencies:
|
||||
'@hocuspocus/common': 2.11.3
|
||||
'@hocuspocus/common': 2.13.7
|
||||
async-lock: 1.4.1
|
||||
kleur: 4.1.5
|
||||
lib0: 0.2.93
|
||||
uuid: 9.0.1
|
||||
ws: 8.16.0
|
||||
y-protocols: 1.0.6(yjs@13.6.14)
|
||||
yjs: 13.6.14
|
||||
lib0: 0.2.98
|
||||
uuid: 10.0.0
|
||||
ws: 8.18.0
|
||||
y-protocols: 1.0.6(yjs@13.6.20)
|
||||
yjs: 13.6.20
|
||||
transitivePeerDependencies:
|
||||
- bufferutil
|
||||
- utf-8-validate
|
||||
|
||||
'@oven/bun-darwin-aarch64@1.1.1':
|
||||
'@oven/bun-darwin-aarch64@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-darwin-x64-baseline@1.1.1':
|
||||
'@oven/bun-darwin-x64-baseline@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-darwin-x64@1.1.1':
|
||||
'@oven/bun-darwin-x64@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-linux-aarch64@1.1.1':
|
||||
'@oven/bun-linux-aarch64@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-linux-x64-baseline@1.1.1':
|
||||
'@oven/bun-linux-x64-baseline@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-linux-x64@1.1.1':
|
||||
'@oven/bun-linux-x64@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-windows-x64-baseline@1.1.1':
|
||||
'@oven/bun-windows-x64-baseline@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-windows-x64@1.1.1':
|
||||
'@oven/bun-windows-x64@1.1.32':
|
||||
optional: true
|
||||
|
||||
async-lock@1.4.1: {}
|
||||
|
||||
bun@1.1.1:
|
||||
bun@1.1.32:
|
||||
optionalDependencies:
|
||||
'@oven/bun-darwin-aarch64': 1.1.1
|
||||
'@oven/bun-darwin-x64': 1.1.1
|
||||
'@oven/bun-darwin-x64-baseline': 1.1.1
|
||||
'@oven/bun-linux-aarch64': 1.1.1
|
||||
'@oven/bun-linux-x64': 1.1.1
|
||||
'@oven/bun-linux-x64-baseline': 1.1.1
|
||||
'@oven/bun-windows-x64': 1.1.1
|
||||
'@oven/bun-windows-x64-baseline': 1.1.1
|
||||
'@oven/bun-darwin-aarch64': 1.1.32
|
||||
'@oven/bun-darwin-x64': 1.1.32
|
||||
'@oven/bun-darwin-x64-baseline': 1.1.32
|
||||
'@oven/bun-linux-aarch64': 1.1.32
|
||||
'@oven/bun-linux-x64': 1.1.32
|
||||
'@oven/bun-linux-x64-baseline': 1.1.32
|
||||
'@oven/bun-windows-x64': 1.1.32
|
||||
'@oven/bun-windows-x64-baseline': 1.1.32
|
||||
|
||||
isomorphic.js@0.2.5: {}
|
||||
|
||||
kleur@4.1.5: {}
|
||||
|
||||
lib0@0.2.93:
|
||||
lib0@0.2.98:
|
||||
dependencies:
|
||||
isomorphic.js: 0.2.5
|
||||
|
||||
typescript@5.4.4: {}
|
||||
|
||||
uuid@9.0.1: {}
|
||||
uuid@10.0.0: {}
|
||||
|
||||
ws@8.16.0: {}
|
||||
ws@8.18.0: {}
|
||||
|
||||
y-protocols@1.0.6(yjs@13.6.14):
|
||||
y-protocols@1.0.6(yjs@13.6.20):
|
||||
dependencies:
|
||||
lib0: 0.2.93
|
||||
yjs: 13.6.14
|
||||
lib0: 0.2.98
|
||||
yjs: 13.6.20
|
||||
|
||||
yjs@13.6.14:
|
||||
yjs@13.6.20:
|
||||
dependencies:
|
||||
lib0: 0.2.93
|
||||
lib0: 0.2.98
|
||||
|
|
|
|||
|
|
@ -74,87 +74,84 @@ const CollectionsPage = async (params: any) => {
|
|||
|
||||
return (
|
||||
<GeneralWrapperStyled>
|
||||
<div className="flex justify-between">
|
||||
<TypeOfContentTitle title="Collections" type="col" />
|
||||
<AuthenticatedClientElement
|
||||
ressourceType="collections"
|
||||
action="create"
|
||||
checkMethod="roles"
|
||||
orgId={org_id}
|
||||
>
|
||||
<Link
|
||||
className="flex justify-center"
|
||||
href={getUriWithOrg(orgslug, '/collections/new')}
|
||||
<div className="flex flex-col space-y-4 mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<TypeOfContentTitle title="Collections" type="col" />
|
||||
<AuthenticatedClientElement
|
||||
ressourceType="collections"
|
||||
action="create"
|
||||
checkMethod="roles"
|
||||
orgId={org_id}
|
||||
>
|
||||
<NewCollectionButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="home_collections flex flex-wrap">
|
||||
{collections.map((collection: any) => (
|
||||
<div
|
||||
className="flex flex-col py-1 px-3"
|
||||
key={collection.collection_uuid}
|
||||
>
|
||||
<CollectionThumbnail
|
||||
collection={collection}
|
||||
orgslug={orgslug}
|
||||
org_id={org_id}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{collections.length == 0 && (
|
||||
<div className="flex mx-auto h-[400px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-5">
|
||||
<div className="mx-auto">
|
||||
<svg
|
||||
width="120"
|
||||
height="120"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
opacity="0.51"
|
||||
x="10"
|
||||
y="10"
|
||||
width="275"
|
||||
height="275"
|
||||
rx="75"
|
||||
stroke="#4B5564"
|
||||
strokeOpacity="0.15"
|
||||
strokeWidth="20"
|
||||
/>
|
||||
<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="#4B5564"
|
||||
fillOpacity="0.08"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-3xl font-bold text-gray-600">
|
||||
<Link href={getUriWithOrg(orgslug, '/collections/new')}>
|
||||
<NewCollectionButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{collections.map((collection: any) => (
|
||||
<div key={collection.collection_uuid} className="p-3">
|
||||
<CollectionThumbnail
|
||||
collection={collection}
|
||||
orgslug={orgslug}
|
||||
org_id={org_id}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{collections.length === 0 && (
|
||||
<div className="col-span-full flex justify-center items-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
<rect
|
||||
opacity="0.51"
|
||||
x="10"
|
||||
y="10"
|
||||
width="275"
|
||||
height="275"
|
||||
rx="75"
|
||||
stroke="#4B5564"
|
||||
strokeOpacity="0.15"
|
||||
strokeWidth="20"
|
||||
/>
|
||||
<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="#4B5564"
|
||||
fillOpacity="0.08"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
||||
No collections yet
|
||||
</h1>
|
||||
<p className="text-lg text-gray-400">
|
||||
<p className="text-md text-gray-400">
|
||||
<ContentPlaceHolderIfUserIsNotAdmin
|
||||
text="Create a collection to add content"
|
||||
/>
|
||||
</p>
|
||||
<div className="mt-4">
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
ressourceType="collections"
|
||||
action="create"
|
||||
orgId={org_id}
|
||||
>
|
||||
<Link href={getUriWithOrg(orgslug, '/collections/new')}>
|
||||
<NewCollectionButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
</div>
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
ressourceType="collections"
|
||||
action="create"
|
||||
orgId={org_id}
|
||||
>
|
||||
<Link href={getUriWithOrg(orgslug, '/collections/new')}>
|
||||
<NewCollectionButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import AssignmentSubmissionProvider, { useAssignmentSubmission } from '@compone
|
|||
import toast from 'react-hot-toast'
|
||||
import { mutate } from 'swr'
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
|
||||
interface ActivityClientProps {
|
||||
activityid: string
|
||||
|
|
@ -47,6 +48,7 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
const [bgColor, setBgColor] = React.useState('bg-white')
|
||||
const [assignment, setAssignment] = React.useState(null) as any;
|
||||
const [markStatusButtonActive, setMarkStatusButtonActive] = React.useState(false);
|
||||
|
||||
|
||||
function getChapterNameByActivityId(course: any, activity_id: any) {
|
||||
for (let i = 0; i < course.chapters.length; i++) {
|
||||
|
|
@ -223,7 +225,7 @@ export function MarkStatus(props: {
|
|||
}) {
|
||||
const router = useRouter()
|
||||
const session = useLHSession() as any;
|
||||
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
async function markActivityAsCompleteFront() {
|
||||
const trail = await markActivityAsComplete(
|
||||
props.orgslug,
|
||||
|
|
@ -263,7 +265,7 @@ export function MarkStatus(props: {
|
|||
<i>
|
||||
<Check size={17}></Check>
|
||||
</i>{' '}
|
||||
<i className="not-italic text-xs font-bold">Mark as complete</i>
|
||||
{!isMobile && <i className="not-italic text-xs font-bold">Mark as complete</i>}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import UserAvatar from '@components/Objects/UserAvatar'
|
|||
import CourseUpdates from '@components/Objects/CourseUpdates/CourseUpdates'
|
||||
import { CourseProvider } from '@components/Contexts/CourseContext'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
|
||||
const CourseClient = (props: any) => {
|
||||
const [user, setUser] = useState<any>({})
|
||||
|
|
@ -28,6 +29,7 @@ const CourseClient = (props: any) => {
|
|||
const course = props.course
|
||||
const org = useOrg() as any
|
||||
const router = useRouter()
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
|
||||
function getLearningTags() {
|
||||
// create array of learnings from a string object (comma separated)
|
||||
|
|
@ -72,21 +74,21 @@ const CourseClient = (props: any) => {
|
|||
<PageLoading></PageLoading>
|
||||
) : (
|
||||
<GeneralWrapperStyled>
|
||||
<div className="pb-3 flex justify-between items-center">
|
||||
<div className="pb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
|
||||
<div>
|
||||
<p className="text-md font-bold text-gray-400 pb-2">Course</p>
|
||||
<h1 className="text-3xl -mt-3 font-bold">{course.name}</h1>
|
||||
<h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<CourseProvider courseuuid={course.course_uuid}>
|
||||
<div className="mt-4 md:mt-0">
|
||||
{!isMobile && <CourseProvider courseuuid={course.course_uuid}>
|
||||
<CourseUpdates />
|
||||
</CourseProvider>
|
||||
</CourseProvider>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{props.course?.thumbnail_image && org ? (
|
||||
<div
|
||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[400px] bg-cover bg-center mb-4"
|
||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[200px] md:h-[400px] bg-cover bg-center mb-4"
|
||||
style={{
|
||||
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
|
|
@ -111,7 +113,7 @@ const CourseClient = (props: any) => {
|
|||
course={course}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row pt-10">
|
||||
<div className="flex flex-col md:flex-row pt-10">
|
||||
<div className="course_metadata_left grow space-y-2">
|
||||
<h2 className="py-3 text-2xl font-bold">Description</h2>
|
||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||
|
|
@ -141,7 +143,7 @@ const CourseClient = (props: any) => {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<h2 className="py-3 text-2xl font-bold">Course Lessons</h2>
|
||||
<h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
|
||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||
{course.chapters.map((chapter: any) => {
|
||||
return (
|
||||
|
|
@ -303,20 +305,20 @@ const CourseClient = (props: any) => {
|
|||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="course_metadata_right space-y-3 w-72 antialiased flex flex-col ml-10 h-fit p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||
<div className="course_metadata_right space-y-3 w-full md:w-72 antialiased flex flex-col md:ml-10 h-fit p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden mt-6 md:mt-0">
|
||||
{user && (
|
||||
<div className="flex flex-col mx-auto space-y-3 px-2 py-2 items-center">
|
||||
<div className="flex flex-row md:flex-col mx-auto space-y-0 md:space-y-3 space-x-4 md:space-x-0 px-2 py-2 items-center">
|
||||
<UserAvatar
|
||||
border="border-8"
|
||||
avatar_url={course.authors[0].avatar_image ? getUserAvatarMediaDirectory(course.authors[0].user_uuid, course.authors[0].avatar_image) : ''}
|
||||
predefined_avatar={course.authors[0].avatar_image ? undefined : 'empty'}
|
||||
width={100}
|
||||
width={isMobile ? 60 : 100}
|
||||
/>
|
||||
<div className="-space-y-2 ">
|
||||
<div className="md:-space-y-2">
|
||||
<div className="text-[12px] text-neutral-400 font-semibold">
|
||||
Author
|
||||
</div>
|
||||
<div className="text-xl font-bold text-neutral-800">
|
||||
<div className="text-lg md:text-xl font-bold text-neutral-800">
|
||||
{course.authors[0].first_name &&
|
||||
course.authors[0].last_name && (
|
||||
<div className="flex space-x-2 items-center">
|
||||
|
|
@ -344,14 +346,14 @@ const CourseClient = (props: any) => {
|
|||
|
||||
{isCourseStarted() ? (
|
||||
<button
|
||||
className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer"
|
||||
className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-full md:w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer"
|
||||
onClick={quitCourse}
|
||||
>
|
||||
Quit Course
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-black hover:bg-gray-900 hover:cursor-pointer"
|
||||
className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-full md:w-[200px] drop-shadow-md bg-black hover:bg-gray-900 hover:cursor-pointer"
|
||||
onClick={startCourseUI}
|
||||
>
|
||||
Start Course
|
||||
|
|
|
|||
|
|
@ -29,110 +29,102 @@ function Courses(props: CourseProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="w-full">
|
||||
<GeneralWrapperStyled>
|
||||
<div className="flex flex-wrap justify-between">
|
||||
<TypeOfContentTitle title="Courses" type="cou" />
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
action="create"
|
||||
ressourceType="courses"
|
||||
orgId={props.org_id}
|
||||
>
|
||||
<Modal
|
||||
isDialogOpen={newCourseModal}
|
||||
onOpenChange={setNewCourseModal}
|
||||
minHeight="md"
|
||||
dialogContent={
|
||||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
></CreateCourseModal>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
dialogTrigger={
|
||||
<button>
|
||||
<NewCourseButton />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-2 mb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<TypeOfContentTitle title="Courses" type="cou" />
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
action="create"
|
||||
ressourceType="courses"
|
||||
orgId={props.org_id}
|
||||
>
|
||||
<Modal
|
||||
isDialogOpen={newCourseModal}
|
||||
onOpenChange={setNewCourseModal}
|
||||
minHeight="md"
|
||||
dialogContent={
|
||||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
/>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
dialogTrigger={
|
||||
<button>
|
||||
<NewCourseButton />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap">
|
||||
{courses.map((course: any) => (
|
||||
<div className="px-3" key={course.course_uuid}>
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
{courses.length == 0 && (
|
||||
<div className="flex mx-auto h-[400px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-5">
|
||||
<div className="mx-auto">
|
||||
<svg
|
||||
width="120"
|
||||
height="120"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
opacity="0.51"
|
||||
x="10"
|
||||
y="10"
|
||||
width="275"
|
||||
height="275"
|
||||
rx="75"
|
||||
stroke="#4B5564"
|
||||
strokeOpacity="0.15"
|
||||
strokeWidth="20"
|
||||
/>
|
||||
<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="#4B5564"
|
||||
fillOpacity="0.08"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-3xl font-bold text-gray-600">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{courses.map((course: any) => (
|
||||
<div key={course.course_uuid} className="p-3">
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
{courses.length === 0 && (
|
||||
<div className="col-span-full flex justify-center items-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
{/* ... SVG content ... */}
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
||||
No courses yet
|
||||
</h1>
|
||||
{isUserAdmin ? (<p className="text-lg text-gray-400">
|
||||
Create a course to add content
|
||||
</p>) : (<p className="text-lg text-gray-400">
|
||||
No courses available yet
|
||||
</p>)}
|
||||
<p className="text-md text-gray-400">
|
||||
{isUserAdmin ? (
|
||||
"Create a course to add content"
|
||||
) : (
|
||||
"No courses available yet"
|
||||
)}
|
||||
</p>
|
||||
{isUserAdmin && (
|
||||
<div className="mt-4">
|
||||
<AuthenticatedClientElement
|
||||
action="create"
|
||||
ressourceType="courses"
|
||||
checkMethod="roles"
|
||||
orgId={props.org_id}
|
||||
>
|
||||
<Modal
|
||||
isDialogOpen={newCourseModal}
|
||||
onOpenChange={setNewCourseModal}
|
||||
minHeight="md"
|
||||
dialogContent={
|
||||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
/>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
dialogTrigger={
|
||||
<button>
|
||||
<NewCourseButton />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<AuthenticatedClientElement
|
||||
action="create"
|
||||
ressourceType="courses"
|
||||
checkMethod="roles"
|
||||
orgId={props.org_id}
|
||||
>
|
||||
<Modal
|
||||
isDialogOpen={newCourseModal}
|
||||
onOpenChange={setNewCourseModal}
|
||||
minHeight="md"
|
||||
dialogContent={
|
||||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
></CreateCourseModal>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
dialogTrigger={
|
||||
<button>
|
||||
<NewCourseButton />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -82,48 +82,44 @@ const OrgHomePage = async (params: any) => {
|
|||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="w-full">
|
||||
<GeneralWrapperStyled>
|
||||
{/* Collections */}
|
||||
<div className="flex items-center ">
|
||||
<div className="flex grow">
|
||||
<div className="flex flex-col space-y-4 mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<TypeOfContentTitle title="Collections" type="col" />
|
||||
</div>
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
ressourceType="collections"
|
||||
action="create"
|
||||
orgId={org_id}
|
||||
>
|
||||
<Link href={getUriWithOrg(orgslug, '/collections/new')}>
|
||||
<NewCollectionButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="home_collections flex flex-wrap">
|
||||
{collections.map((collection: any) => (
|
||||
<div
|
||||
className="flex flex-col py-3 px-3"
|
||||
key={collection.collection_id}
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
ressourceType="collections"
|
||||
action="create"
|
||||
orgId={org_id}
|
||||
>
|
||||
<CollectionThumbnail
|
||||
collection={collection}
|
||||
orgslug={orgslug}
|
||||
org_id={org.org_id}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{collections.length == 0 && (
|
||||
<div className="flex mx-auto h-[100px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-3">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="mx-auto">
|
||||
<Link href={getUriWithOrg(orgslug, '/collections/new')}>
|
||||
<NewCollectionButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{collections.map((collection: any) => (
|
||||
<div key={collection.collection_id} className="flex flex-col p-3">
|
||||
<CollectionThumbnail
|
||||
collection={collection}
|
||||
orgslug={orgslug}
|
||||
org_id={org.org_id}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{collections.length === 0 && (
|
||||
<div className="col-span-full flex justify-center items-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
<rect
|
||||
opacity="0.51"
|
||||
|
|
@ -143,53 +139,49 @@ const OrgHomePage = async (params: any) => {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-xl font-bold text-gray-600">
|
||||
No collections yet
|
||||
</h1>
|
||||
<p className="text-md text-gray-400">
|
||||
<ContentPlaceHolderIfUserIsNotAdmin
|
||||
text="Create collections to group courses together"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
||||
No collections yet
|
||||
</h1>
|
||||
<p className="text-md text-gray-400">
|
||||
<ContentPlaceHolderIfUserIsNotAdmin
|
||||
text="Create collections to group courses together"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Courses */}
|
||||
<div className="h-5"></div>
|
||||
<div className="flex items-center ">
|
||||
<div className="flex grow">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<TypeOfContentTitle title="Courses" type="cou" />
|
||||
<AuthenticatedClientElement
|
||||
ressourceType="courses"
|
||||
action="create"
|
||||
checkMethod="roles"
|
||||
orgId={org_id}
|
||||
>
|
||||
<Link href={getUriWithOrg(orgslug, '/courses?new=true')}>
|
||||
<NewCourseButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<AuthenticatedClientElement
|
||||
ressourceType="courses"
|
||||
action="create"
|
||||
checkMethod="roles"
|
||||
orgId={org_id}
|
||||
>
|
||||
<Link href={getUriWithOrg(orgslug, '/courses?new=true')}>
|
||||
<NewCourseButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="home_courses flex flex-wrap">
|
||||
{courses.map((course: any) => (
|
||||
<div className="py-3 px-3" key={course.course_uuid}>
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
{courses.length == 0 && (
|
||||
<div className="flex mx-auto h-[300px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-3">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="mx-auto">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{courses.map((course: any) => (
|
||||
<div key={course.course_uuid} className="p-3">
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
{courses.length === 0 && (
|
||||
<div className="col-span-full flex justify-center items-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4 ">
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
className="mx-auto"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -212,18 +204,16 @@ const OrgHomePage = async (params: any) => {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-xl font-bold text-gray-600">
|
||||
No courses yet
|
||||
</h1>
|
||||
<p className="text-md text-gray-400">
|
||||
<ContentPlaceHolderIfUserIsNotAdmin text='Create courses to add content' />
|
||||
</p>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-gray-600 mb-2">
|
||||
No courses yet
|
||||
</h1>
|
||||
<p className="text-md text-gray-400">
|
||||
<ContentPlaceHolderIfUserIsNotAdmin text='Create courses to add content' />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
'use client';
|
||||
import LeftMenu from '@components/Dashboard/UI/LeftMenu'
|
||||
import DashLeftMenu from '@components/Dashboard/UI/DashLeftMenu'
|
||||
import DashMobileMenu from '@components/Dashboard/UI/DashMobileMenu'
|
||||
import AdminAuthorization from '@components/Security/AdminAuthorization'
|
||||
import { SessionProvider } from 'next-auth/react'
|
||||
import React from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useMediaQuery } from 'usehooks-ts';
|
||||
|
||||
function ClientAdminLayout({
|
||||
children,
|
||||
|
|
@ -11,11 +13,17 @@ function ClientAdminLayout({
|
|||
children: React.ReactNode
|
||||
params: any
|
||||
}) {
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
|
||||
return (
|
||||
<SessionProvider>
|
||||
<AdminAuthorization authorizationMode="page">
|
||||
<div className="flex">
|
||||
<LeftMenu />
|
||||
<div className="flex flex-col md:flex-row">
|
||||
{isMobile ? (
|
||||
<DashMobileMenu />
|
||||
) : (
|
||||
<DashLeftMenu />
|
||||
)}
|
||||
<div className="flex w-full">{children}</div>
|
||||
</div>
|
||||
</AdminAuthorization>
|
||||
|
|
@ -23,4 +31,4 @@ function ClientAdminLayout({
|
|||
)
|
||||
}
|
||||
|
||||
export default ClientAdminLayout
|
||||
export default ClientAdminLayout
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use client';
|
||||
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
|
||||
import { BookOpen, BookX, EllipsisVertical, Eye, Layers2, UserRoundPen } from 'lucide-react'
|
||||
import { BookOpen, BookX, EllipsisVertical, Eye, Layers2, Monitor, UserRoundPen } from 'lucide-react'
|
||||
import React, { useEffect } from 'react'
|
||||
import { AssignmentProvider, useAssignments } from '@components/Contexts/Assignments/AssignmentContext';
|
||||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip';
|
||||
|
|
@ -15,12 +15,29 @@ import { updateActivity } from '@services/courses/activities';
|
|||
// Lazy Loading
|
||||
import dynamic from 'next/dynamic';
|
||||
import AssignmentEditorSubPage from './subpages/AssignmentEditorSubPage';
|
||||
import { useMediaQuery } from 'usehooks-ts';
|
||||
const AssignmentSubmissionsSubPage = dynamic(() => import('./subpages/AssignmentSubmissionsSubPage'))
|
||||
|
||||
function AssignmentEdit() {
|
||||
const params = useParams<{ assignmentuuid: string; }>()
|
||||
const searchParams = useSearchParams()
|
||||
const [selectedSubPage, setSelectedSubPage] = React.useState(searchParams.get('subpage') || 'editor')
|
||||
const isMobile = useMediaQuery('(max-width: 767px)')
|
||||
|
||||
if (isMobile) {
|
||||
// TODO: Work on a better mobile experience
|
||||
return (
|
||||
<div className="h-screen w-full bg-[#f8f8f8] flex items-center justify-center p-4">
|
||||
<div className="bg-white p-6 rounded-lg shadow-md text-center">
|
||||
<h2 className="text-xl font-bold mb-4">Desktop Only</h2>
|
||||
<Monitor className='mx-auto my-5' size={60} />
|
||||
<p>This page is only accessible from a desktop device.</p>
|
||||
<p>Please switch to a desktop to view and manage the assignment.</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex w-full flex-col'>
|
||||
<AssignmentProvider assignment_uuid={'assignment_' + params.assignmentuuid}>
|
||||
|
|
|
|||
|
|
@ -46,19 +46,19 @@ function AssignmentsHome() {
|
|||
|
||||
return (
|
||||
<div className='flex w-full'>
|
||||
<div className='pl-10 mr-10 tracking-tighter flex flex-col space-y-5 w-full'>
|
||||
<div className='pl-4 sm:pl-10 mr-4 sm:mr-10 tracking-tighter flex flex-col space-y-5 w-full'>
|
||||
<div className='flex flex-col space-y-2'>
|
||||
<BreadCrumbs type="assignments" />
|
||||
<h1 className="pt-3 flex font-bold text-4xl">Assignments</h1>
|
||||
</div>
|
||||
<div className='flex flex-col space-y-3 w-full'>
|
||||
{courseAssignments.map((assignments: any, index: number) => (
|
||||
<div key={index} className='flex flex-col space-y-2 bg-white nice-shadow p-4 rounded-xl w-full'>
|
||||
<div key={index} className='flex flex-col space-y-2 bg-white nice-shadow p-3 sm:p-4 rounded-xl w-full'>
|
||||
<div>
|
||||
<div className='flex space-x-2 items-center justify-between w-full'>
|
||||
<div className='flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 items-start sm:items-center justify-between w-full'>
|
||||
<div className='flex space-x-2 items-center'>
|
||||
<MiniThumbnail course={courses[index]} />
|
||||
<div className='flex flex-col font-bold text-lg '>
|
||||
<div className='flex flex-col font-bold text-lg'>
|
||||
<p className='bg-gray-200 text-gray-700 px-2 text-xs py-0.5 rounded-full w-fit'>Course</p>
|
||||
<p>{courses[index].name}</p>
|
||||
</div>
|
||||
|
|
@ -75,10 +75,9 @@ function AssignmentsHome() {
|
|||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
{assignments && assignments.map((assignment: any) => (
|
||||
<div key={assignment.assignment_uuid} className='flex mt-3 p-3 rounded flex-row space-x-2 w-full light-shadow justify-between bg-gray-50 items-center'>
|
||||
<div className='flex flex-row items-center space-x-2 '>
|
||||
<div key={assignment.assignment_uuid} className='flex mt-3 p-2 sm:p-3 rounded flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 w-full light-shadow justify-between bg-gray-50 items-start sm:items-center'>
|
||||
<div className='flex flex-col sm:flex-row items-start sm:items-center space-y-1 sm:space-y-0 sm:space-x-2'>
|
||||
<div className='flex text-xs font-bold bg-gray-200 text-gray-700 px-2 py-0.5 rounded-full h-fit'>
|
||||
<p>Assignment</p>
|
||||
</div>
|
||||
|
|
@ -86,7 +85,6 @@ function AssignmentsHome() {
|
|||
<div className='flex font-semibold text-gray-600 px-2 py-0.5 rounded outline outline-gray-200/70'>{assignment.description}</div>
|
||||
</div>
|
||||
<div className='flex space-x-2 font-bold text-sm items-center'>
|
||||
|
||||
<EllipsisVertical className='text-gray-500' size={17} />
|
||||
<Link
|
||||
href={{
|
||||
|
|
@ -103,7 +101,6 @@ function AssignmentsHome() {
|
|||
pathname: getUriWithOrg(org.slug, `/dash/assignments/${removeAssignmentPrefix(assignment.assignment_uuid)}`),
|
||||
query: { subpage: 'submissions' }
|
||||
}}
|
||||
|
||||
prefetch
|
||||
className='bg-white rounded-full flex space-x-2 nice-shadow items-center px-3 py-0.5'>
|
||||
<UserRoundPen size={15} />
|
||||
|
|
@ -124,10 +121,8 @@ function AssignmentsHome() {
|
|||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -172,4 +167,4 @@ const MiniThumbnail = (props: { course: any }) => {
|
|||
}
|
||||
|
||||
|
||||
export default AssignmentsHome
|
||||
export default AssignmentsHome
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
'use client'
|
||||
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
|
||||
import CreateCourseModal from '@components/Objects/Modals/Course/Create/CreateCourse'
|
||||
import CourseThumbnail from '@components/Objects/Thumbnails/CourseThumbnail'
|
||||
import CourseThumbnail, { removeCoursePrefix } from '@components/Objects/Thumbnails/CourseThumbnail'
|
||||
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
|
||||
import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton'
|
||||
import Modal from '@components/StyledElements/Modal/Modal'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import React from 'react'
|
||||
import useAdminStatus from '@components/Hooks/useAdminStatus'
|
||||
|
||||
type CourseProps = {
|
||||
orgslug: string
|
||||
|
|
@ -20,114 +21,106 @@ function CoursesHome(params: CourseProps) {
|
|||
const [newCourseModal, setNewCourseModal] = React.useState(isCreatingCourse)
|
||||
const orgslug = params.orgslug
|
||||
const courses = params.courses
|
||||
const isUserAdmin = useAdminStatus() as any
|
||||
|
||||
async function closeNewCourseModal() {
|
||||
setNewCourseModal(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full w-full bg-[#f8f8f8]">
|
||||
<div>
|
||||
<div className="pl-10 mr-10 tracking-tighter">
|
||||
<BreadCrumbs type="courses" />
|
||||
<div className="w-100 flex justify-between">
|
||||
<div className="pt-3 flex font-bold text-4xl">Courses</div>
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
action="create"
|
||||
ressourceType="courses"
|
||||
orgId={params.org_id}
|
||||
>
|
||||
<Modal
|
||||
isDialogOpen={newCourseModal}
|
||||
onOpenChange={setNewCourseModal}
|
||||
minHeight="md"
|
||||
dialogContent={
|
||||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
></CreateCourseModal>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
dialogTrigger={
|
||||
<button>
|
||||
<NewCourseButton />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="h-full w-full bg-[#f8f8f8] pl-10 pr-10">
|
||||
<div className="mb-6">
|
||||
<BreadCrumbs type="courses" />
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-4">
|
||||
<h1 className="text-3xl font-bold mb-4 sm:mb-0">Courses</h1>
|
||||
<AuthenticatedClientElement
|
||||
checkMethod="roles"
|
||||
action="create"
|
||||
ressourceType="courses"
|
||||
orgId={params.org_id}
|
||||
>
|
||||
<Modal
|
||||
isDialogOpen={newCourseModal}
|
||||
onOpenChange={setNewCourseModal}
|
||||
minHeight="md"
|
||||
dialogContent={
|
||||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
/>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
dialogTrigger={
|
||||
<button>
|
||||
<NewCourseButton />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap mx-8 mt-7">
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{courses.map((course: any) => (
|
||||
<div className="px-3" key={course.course_uuid}>
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
<div key={course.course_uuid}>
|
||||
<CourseThumbnail customLink={`/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/general`} course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
{courses.length == 0 && (
|
||||
<div className="flex mx-auto h-[400px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-5">
|
||||
<div className="mx-auto">
|
||||
{courses.length === 0 && (
|
||||
<div className="col-span-full flex justify-center items-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<svg
|
||||
width="120"
|
||||
height="120"
|
||||
viewBox="0 0 295 295"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
<rect
|
||||
opacity="0.51"
|
||||
x="10"
|
||||
y="10"
|
||||
width="275"
|
||||
height="275"
|
||||
rx="75"
|
||||
stroke="#4B5564"
|
||||
strokeOpacity="0.15"
|
||||
strokeWidth="20"
|
||||
/>
|
||||
<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="#4B5564"
|
||||
fillOpacity="0.08"
|
||||
/>
|
||||
{/* ... SVG content ... */}
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-3xl font-bold text-gray-600">
|
||||
No courses yet
|
||||
</h1>
|
||||
<p className="text-lg text-gray-400">
|
||||
Create a course to add content
|
||||
</p>
|
||||
</div>
|
||||
<AuthenticatedClientElement
|
||||
action="create"
|
||||
ressourceType="courses"
|
||||
checkMethod="roles"
|
||||
orgId={params.org_id}
|
||||
>
|
||||
<Modal
|
||||
isDialogOpen={newCourseModal}
|
||||
onOpenChange={setNewCourseModal}
|
||||
minHeight="md"
|
||||
dialogContent={
|
||||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
></CreateCourseModal>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
dialogTrigger={
|
||||
<button>
|
||||
<NewCourseButton />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</AuthenticatedClientElement>
|
||||
<h2 className="text-2xl font-bold text-gray-600 mb-2">
|
||||
No courses yet
|
||||
</h2>
|
||||
<p className="text-lg text-gray-400">
|
||||
{isUserAdmin ? (
|
||||
"Create a course to add content"
|
||||
) : (
|
||||
"No courses available yet"
|
||||
)}
|
||||
</p>
|
||||
{isUserAdmin && (
|
||||
<div className="mt-6">
|
||||
<AuthenticatedClientElement
|
||||
action="create"
|
||||
ressourceType="courses"
|
||||
checkMethod="roles"
|
||||
orgId={params.org_id}
|
||||
>
|
||||
<Modal
|
||||
isDialogOpen={newCourseModal}
|
||||
onOpenChange={setNewCourseModal}
|
||||
minHeight="md"
|
||||
dialogContent={
|
||||
<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
/>
|
||||
}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
dialogTrigger={
|
||||
<button>
|
||||
<NewCourseButton />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -7,84 +7,68 @@ import AdminAuthorization from '@components/Security/AdminAuthorization'
|
|||
|
||||
function DashboardHome() {
|
||||
return (
|
||||
<div className="flex items-center justify-center mx-auto min-h-screen flex-col space-x-3">
|
||||
<div className="mx-auto pb-10">
|
||||
<div className="flex items-center justify-center mx-auto min-h-screen flex-col p-4 sm:mb-0 mb-16">
|
||||
<div className="mx-auto pb-6 sm:pb-10">
|
||||
<Image
|
||||
alt="learnhouse logo"
|
||||
width={230}
|
||||
src={learnhousetextlogo}
|
||||
></Image>
|
||||
className="w-48 sm:w-auto"
|
||||
/>
|
||||
</div>
|
||||
<AdminAuthorization authorizationMode="component">
|
||||
<div className="flex space-x-10">
|
||||
<Link
|
||||
href={`/dash/courses`}
|
||||
className="flex bg-white shadow-lg p-[35px] w-[250px] rounded-lg items-center mx-auto hover:scale-105 transition-all ease-linear cursor-pointer"
|
||||
>
|
||||
<div className="flex flex-col mx-auto space-y-2">
|
||||
<BookCopy className="mx-auto text-gray-500" size={50}></BookCopy>
|
||||
<div className="text-center font-bold text-gray-500">Courses</div>
|
||||
<p className="text-center text-sm text-gray-400">
|
||||
Create and manage courses, chapters and ativities{' '}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/dash/org/settings/general`}
|
||||
className="flex bg-white shadow-lg p-[35px] w-[250px] rounded-lg items-center mx-auto hover:scale-105 transition-all ease-linear cursor-pointer"
|
||||
>
|
||||
<div className="flex flex-col mx-auto space-y-2">
|
||||
<School className="mx-auto text-gray-500" size={50}></School>
|
||||
<div className="text-center font-bold text-gray-500">
|
||||
Organization
|
||||
</div>
|
||||
<p className="text-center text-sm text-gray-400">
|
||||
Configure your Organization general settings{' '}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/dash/users/settings/users`}
|
||||
className="flex bg-white shadow-lg p-[35px] w-[250px] rounded-lg items-center mx-auto hover:scale-105 transition-all ease-linear cursor-pointer"
|
||||
>
|
||||
<div className="flex flex-col mx-auto space-y-2">
|
||||
<Users className="mx-auto text-gray-500" size={50}></Users>
|
||||
<div className="text-center font-bold text-gray-500">Users</div>
|
||||
<p className="text-center text-sm text-gray-400">
|
||||
Manage your Organization's users, roles{' '}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 lg:space-x-10">
|
||||
{/* Card components */}
|
||||
<DashboardCard
|
||||
href="/dash/courses"
|
||||
icon={<BookCopy className="mx-auto text-gray-500" size={50} />}
|
||||
title="Courses"
|
||||
description="Create and manage courses, chapters and activities"
|
||||
/>
|
||||
<DashboardCard
|
||||
href="/dash/org/settings/general"
|
||||
icon={<School className="mx-auto text-gray-500" size={50} />}
|
||||
title="Organization"
|
||||
description="Configure your Organization general settings"
|
||||
/>
|
||||
<DashboardCard
|
||||
href="/dash/users/settings/users"
|
||||
icon={<Users className="mx-auto text-gray-500" size={50} />}
|
||||
title="Users"
|
||||
description="Manage your Organization's users, roles"
|
||||
/>
|
||||
</div>
|
||||
</AdminAuthorization>
|
||||
<div className="flex flex-col space-y-10 ">
|
||||
<div className="flex flex-col space-y-6 sm:space-y-10 mt-6 sm:mt-10">
|
||||
<AdminAuthorization authorizationMode="component">
|
||||
<div className="h-1 w-[100px] bg-neutral-200 rounded-full mx-auto"></div>
|
||||
<div className="flex justify-center items-center">
|
||||
<Link
|
||||
href={'https://university.learnhouse.io/'}
|
||||
target='_blank'
|
||||
className="flex mt-[40px] bg-black space-x-2 items-center py-3 px-7 rounded-lg shadow-lg hover:scale-105 transition-all ease-linear cursor-pointer"
|
||||
className="flex mt-4 sm:mt-[40px] bg-black space-x-2 items-center py-3 px-7 rounded-lg shadow-lg hover:scale-105 transition-all ease-linear cursor-pointer"
|
||||
>
|
||||
<University className=" text-gray-100" size={20}></University>
|
||||
<div className=" text-sm font-bold text-gray-100">
|
||||
<University className="text-gray-100" size={20} />
|
||||
<div className="text-sm font-bold text-gray-100">
|
||||
LearnHouse University
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mx-auto mt-[40px] w-28 h-1 bg-neutral-200 rounded-full"></div>
|
||||
<div className="mx-auto mt-4 sm:mt-[40px] w-28 h-1 bg-neutral-200 rounded-full"></div>
|
||||
</AdminAuthorization>
|
||||
|
||||
<Link
|
||||
href={'/dash/user-account/settings/general'}
|
||||
className="flex bg-white shadow-lg p-[15px] items-center rounded-lg mx-auto hover:scale-105 transition-all ease-linear cursor-pointer"
|
||||
className="flex bg-white shadow-lg p-4 items-center rounded-lg mx-auto hover:scale-105 transition-all ease-linear cursor-pointer max-w-md"
|
||||
>
|
||||
<div className="flex flex-row mx-auto space-x-3 items-center">
|
||||
<Settings className=" text-gray-500" size={20}></Settings>
|
||||
<div className=" font-bold text-gray-500">Account Settings</div>
|
||||
<p className=" text-sm text-gray-400">
|
||||
Configure your personal settings, passwords, email
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row mx-auto space-y-2 sm:space-y-0 sm:space-x-3 items-center text-center sm:text-left">
|
||||
<Settings className="text-gray-500" size={20} />
|
||||
<div>
|
||||
<div className="font-bold text-gray-500">Account Settings</div>
|
||||
<p className="text-sm text-gray-400">
|
||||
Configure your personal settings, passwords, email
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -92,4 +76,20 @@ function DashboardHome() {
|
|||
)
|
||||
}
|
||||
|
||||
// New component for dashboard cards
|
||||
function DashboardCard({ href, icon, title, description }: { href: string, icon: React.ReactNode, title: string, description: string }) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className="flex bg-white shadow-lg p-6 w-full sm:w-[250px] rounded-lg items-center mx-auto hover:scale-105 transition-all ease-linear cursor-pointer"
|
||||
>
|
||||
<div className="flex flex-col mx-auto space-y-2">
|
||||
{icon}
|
||||
<div className="text-center font-bold text-gray-500">{title}</div>
|
||||
<p className="text-center text-sm text-gray-400">{description}</p>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashboardHome
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
import React, { useEffect } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
import { getUriWithOrg } from '@services/config/config'
|
||||
import { ScanEye, SquareUserRound, UserPlus, Users } from 'lucide-react'
|
||||
import { Monitor, ScanEye, SquareUserRound, UserPlus, Users } from 'lucide-react'
|
||||
import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
|
|
@ -22,6 +23,7 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
|
|||
const org = useOrg() as any
|
||||
const [H1Label, setH1Label] = React.useState('')
|
||||
const [H2Label, setH2Label] = React.useState('')
|
||||
const isMobile = useMediaQuery('(max-width: 767px)')
|
||||
|
||||
function handleLabels() {
|
||||
if (params.subpage == 'users') {
|
||||
|
|
@ -46,6 +48,20 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
|
|||
handleLabels()
|
||||
}, [session, org, params.subpage, params])
|
||||
|
||||
if (isMobile) {
|
||||
// TODO: Work on a better mobile experience
|
||||
return (
|
||||
<div className="h-screen w-full bg-[#f8f8f8] flex items-center justify-center p-4">
|
||||
<div className="bg-white p-6 rounded-lg shadow-md text-center">
|
||||
<h2 className="text-xl font-bold mb-4">Desktop Only</h2>
|
||||
<Monitor className='mx-auto my-5' size={60} />
|
||||
<p>This page is only accessible from a desktop device.</p>
|
||||
<p>Please switch to a desktop to view and manage user settings.</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen w-full bg-[#f8f8f8] grid grid-rows-[auto,1fr]">
|
||||
<div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
|
||||
|
|
|
|||
|
|
@ -50,14 +50,14 @@ function EditCourseAccess(props: EditCourseAccessProps) {
|
|||
{courseStructure && (
|
||||
<div>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-xl text-gray-800">Access to the course</h1>
|
||||
<h2 className="text-gray-500 text-sm">
|
||||
<div className="mx-4 sm:mx-10 bg-white rounded-xl shadow-sm px-4 py-4">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-3 sm:px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-lg sm:text-xl text-gray-800">Access to the course</h1>
|
||||
<h2 className="text-gray-500 text-xs sm:text-sm">
|
||||
Choose if you want your course to be publicly available on the internet or only accessible to signed in users
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex space-x-2 mx-auto mb-3">
|
||||
<div className="flex flex-col sm:flex-row sm:space-x-2 space-y-2 sm:space-y-0 mx-auto mb-3">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Change to Public"
|
||||
confirmationMessage="Are you sure you want this course to be publicly available on the internet?"
|
||||
|
|
@ -69,12 +69,12 @@ function EditCourseAccess(props: EditCourseAccessProps) {
|
|||
Active
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col space-y-1 justify-center items-center h-full">
|
||||
<Globe className="text-slate-400" size={40} />
|
||||
<div className="text-2xl text-slate-700 font-bold">
|
||||
<div className="flex flex-col space-y-1 justify-center items-center h-full p-2 sm:p-4">
|
||||
<Globe className="text-slate-400" size={32} />
|
||||
<div className="text-xl sm:text-2xl text-slate-700 font-bold">
|
||||
Public
|
||||
</div>
|
||||
<div className="text-gray-400 text-md tracking-tight w-[500px] leading-5 text-center">
|
||||
<div className="text-gray-400 text-sm sm:text-md tracking-tight w-full sm:w-[500px] leading-5 text-center">
|
||||
The Course is publicly available on the internet, it is indexed by search engines and can be accessed by anyone
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,12 +94,12 @@ function EditCourseAccess(props: EditCourseAccessProps) {
|
|||
Active
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col space-y-1 justify-center items-center h-full">
|
||||
<Users className="text-slate-400" size={40} />
|
||||
<div className="text-2xl text-slate-700 font-bold">
|
||||
<div className="flex flex-col space-y-1 justify-center items-center h-full p-2 sm:p-4">
|
||||
<Users className="text-slate-400" size={32} />
|
||||
<div className="text-xl sm:text-2xl text-slate-700 font-bold">
|
||||
Users Only
|
||||
</div>
|
||||
<div className="text-gray-400 text-md tracking-tight w-[500px] leading-5 text-center">
|
||||
<div className="text-gray-400 text-sm sm:text-md tracking-tight w-full sm:w-[500px] leading-5 text-center">
|
||||
The Course is only accessible to signed in users, additionally you can choose which UserGroups can access this course
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -139,42 +139,44 @@ function UserGroupsSection({ usergroups }: { usergroups: any[] }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-xl text-gray-800">UserGroups</h1>
|
||||
<h2 className="text-gray-500 text-sm">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-3 sm:px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-lg sm:text-xl text-gray-800">UserGroups</h1>
|
||||
<h2 className="text-gray-500 text-xs sm:text-sm">
|
||||
You can choose to give access to this course to specific groups of users only by linking it to a UserGroup
|
||||
</h2>
|
||||
</div>
|
||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||
<tr className="font-bolder text-sm">
|
||||
<th className="py-3 px-4">Name</th>
|
||||
<th className="py-3 px-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="mt-5 bg-white rounded-md">
|
||||
{usergroups?.map((usergroup: any) => (
|
||||
<tr key={usergroup.invite_code_uuid} className="border-b border-gray-100 text-sm">
|
||||
<td className="py-3 px-4">{usergroup.name}</td>
|
||||
<td className="py-3 px-4">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Link"
|
||||
confirmationMessage="Users from this UserGroup will no longer have access to this course"
|
||||
dialogTitle="Unlink UserGroup?"
|
||||
dialogTrigger={
|
||||
<button className="mr-2 flex space-x-2 hover:cursor-pointer p-1 px-3 bg-rose-700 rounded-md font-bold items-center text-sm text-rose-100">
|
||||
<X className="w-4 h-4" />
|
||||
<span>Delete link</span>
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => removeUserGroupLink(usergroup.id)}
|
||||
status="warning"
|
||||
/>
|
||||
</td>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||
<tr className="font-bolder text-sm">
|
||||
<th className="py-3 px-4">Name</th>
|
||||
<th className="py-3 px-4">Actions</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody className="mt-5 bg-white rounded-md">
|
||||
{usergroups?.map((usergroup: any) => (
|
||||
<tr key={usergroup.invite_code_uuid} className="border-b border-gray-100 text-sm">
|
||||
<td className="py-3 px-4">{usergroup.name}</td>
|
||||
<td className="py-3 px-4">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Link"
|
||||
confirmationMessage="Users from this UserGroup will no longer have access to this course"
|
||||
dialogTitle="Unlink UserGroup?"
|
||||
dialogTrigger={
|
||||
<button className="mr-2 flex space-x-2 hover:cursor-pointer p-1 px-3 bg-rose-700 rounded-md font-bold items-center text-sm text-rose-100">
|
||||
<X className="w-4 h-4" />
|
||||
<span>Delete link</span>
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => removeUserGroupLink(usergroup.id)}
|
||||
status="warning"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="flex flex-row-reverse mt-3 mr-2">
|
||||
<Modal
|
||||
isDialogOpen={userGroupModal}
|
||||
|
|
@ -185,8 +187,8 @@ function UserGroupsSection({ usergroups }: { usergroups: any[] }) {
|
|||
dialogTitle="Link Course to a UserGroup"
|
||||
dialogDescription="Choose a UserGroup to link this course to. Users from this UserGroup will have access to this course."
|
||||
dialogTrigger={
|
||||
<button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100">
|
||||
<SquareUserRound className="w-4 h-4" />
|
||||
<button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-xs sm:text-sm text-green-100">
|
||||
<SquareUserRound className="w-3 h-3 sm:w-4 sm:h-4" />
|
||||
<span>Link to a UserGroup</span>
|
||||
</button>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import { deleteAssignmentUsingActivityUUID, getAssignmentFromActivityUUID } from
|
|||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { useCourse } from '@components/Contexts/CourseContext'
|
||||
import toast from 'react-hot-toast'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
|
||||
type ActivitiyElementProps = {
|
||||
orgslug: string
|
||||
|
|
@ -50,6 +51,7 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
string | undefined
|
||||
>(undefined)
|
||||
const activityUUID = props.activity.activity_uuid
|
||||
const isMobile = useMediaQuery('(max-width: 767px)')
|
||||
|
||||
async function deleteActivityUI() {
|
||||
const toast_loading = toast.loading('Deleting activity...')
|
||||
|
|
@ -110,14 +112,14 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="flex flex-row py-2 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 items-center ring-1 ring-inset ring-gray-400/10 shadow-sm"
|
||||
className="flex flex-col sm:flex-row py-2 px-3 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 space-y-2 sm:space-y-0 sm:space-x-2 items-center ring-1 ring-inset ring-gray-400/10 nice-shadow"
|
||||
key={props.activity.id}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{/* Activity Type Icon */}
|
||||
<ActivityTypeIndicator activityType={props.activity.activity_type} />
|
||||
<ActivityTypeIndicator activityType={props.activity.activity_type} isMobile={isMobile} />
|
||||
|
||||
{/* Centered Activity Name */}
|
||||
<div className="grow items-center space-x-2 flex mx-auto justify-center">
|
||||
|
|
@ -143,13 +145,11 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
onClick={() => updateActivityName(props.activity.id)}
|
||||
className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900"
|
||||
>
|
||||
<Save
|
||||
size={12}
|
||||
/>
|
||||
<Save size={12} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="first-letter:uppercase"> {props.activity.name} </p>
|
||||
<p className="first-letter:uppercase text-center sm:text-left"> {props.activity.name} </p>
|
||||
)}
|
||||
<Pencil
|
||||
onClick={() => setSelectedActivity(props.activity.id)}
|
||||
|
|
@ -157,65 +157,60 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Edit and View Button */}
|
||||
<div className="flex basis-1/2 justify-end">
|
||||
<div className="flex flex-row space-x-2">
|
||||
<ActivityElementOptions activity={props.activity} />
|
||||
{/* Publishing */}
|
||||
<div
|
||||
className={`hover:cursor-pointer p-1 px-3 border shadow-lg rounded-md font-bold text-xs flex items-center space-x-1 ${!props.activity.published
|
||||
? 'bg-gradient-to-bl text-green-800 from-green-400/50 to-lime-200/80 border-green-600/10 shadow-green-900/10'
|
||||
: 'bg-gradient-to-bl text-gray-800 from-gray-400/50 to-gray-200/80 border-gray-600/10 shadow-gray-900/10'
|
||||
}`}
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => changePublicStatus()}
|
||||
>
|
||||
{!props.activity.published ? (
|
||||
<Globe strokeWidth={2} size={12} className="text-green-600" />
|
||||
) : (
|
||||
<Lock strokeWidth={2} size={12} className="text-gray-600" />
|
||||
)}
|
||||
<span>{!props.activity.published ? 'Publish' : 'Unpublish'}</span>
|
||||
</div>
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(props.orgslug, '') +
|
||||
`/course/${props.course_uuid.replace(
|
||||
'course_',
|
||||
''
|
||||
)}/activity/${props.activity.activity_uuid.replace(
|
||||
'activity_',
|
||||
''
|
||||
)}`
|
||||
}
|
||||
prefetch
|
||||
className=" hover:cursor-pointer p-1 px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-cyan-900/10 shadow-lg rounded-md font-bold text-xs flex items-center space-x-1"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Eye strokeWidth={2} size={12} className="text-sky-600" />
|
||||
<span>Preview</span>
|
||||
</Link>
|
||||
</div>
|
||||
{/* Edit, View, Publish, and Delete Buttons */}
|
||||
<div className="flex flex-wrap justify-center sm:justify-end gap-2 w-full sm:w-auto">
|
||||
<ActivityElementOptions activity={props.activity} isMobile={isMobile} />
|
||||
{/* Publishing */}
|
||||
<button
|
||||
className={`p-1 px-2 sm:px-3 border shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 ${
|
||||
!props.activity.published
|
||||
? 'bg-gradient-to-bl text-green-800 from-green-400/50 to-lime-200/80 border-green-600/10 hover:from-green-500/50 hover:to-lime-300/80'
|
||||
: 'bg-gradient-to-bl text-gray-800 from-gray-400/50 to-gray-200/80 border-gray-600/10 hover:from-gray-500/50 hover:to-gray-300/80'
|
||||
}`}
|
||||
onClick={() => changePublicStatus()}
|
||||
>
|
||||
{!props.activity.published ? (
|
||||
<Globe strokeWidth={2} size={12} className="text-green-600" />
|
||||
) : (
|
||||
<Lock strokeWidth={2} size={12} className="text-gray-600" />
|
||||
)}
|
||||
<span>{!props.activity.published ? 'Publish' : 'Unpublish'}</span>
|
||||
</button>
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(props.orgslug, '') +
|
||||
`/course/${props.course_uuid.replace(
|
||||
'course_',
|
||||
''
|
||||
)}/activity/${props.activity.activity_uuid.replace(
|
||||
'activity_',
|
||||
''
|
||||
)}`
|
||||
}
|
||||
prefetch
|
||||
className="p-1 px-2 sm:px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Eye strokeWidth={2} size={12} className="text-sky-600" />
|
||||
<span>Preview</span>
|
||||
</Link>
|
||||
{/* Delete Button */}
|
||||
<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 + ' ?'}
|
||||
dialogTrigger={
|
||||
<div
|
||||
className=" hover:cursor-pointer p-1 px-5 bg-red-600 rounded-md"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
</div>
|
||||
}
|
||||
functionToExecute={() => deleteActivityUI()}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
</div>
|
||||
<ConfirmationModal
|
||||
confirmationMessage="Are you sure you want to delete this activity ?"
|
||||
confirmationButtonText="Delete Activity"
|
||||
dialogTitle={'Delete ' + props.activity.name + ' ?'}
|
||||
dialogTrigger={
|
||||
<button
|
||||
className="p-1 px-2 sm:px-3 bg-red-600 rounded-md flex items-center space-x-1 shadow-md transition-colors duration-200 hover:bg-red-700"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
{!isMobile && <span className="text-rose-200 font-bold text-xs">Delete</span>}
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => deleteActivityUI()}
|
||||
status="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -242,11 +237,11 @@ const ACTIVITIES = {
|
|||
}
|
||||
}
|
||||
|
||||
const ActivityTypeIndicator = ({activityType} : { activityType: keyof typeof ACTIVITIES}) => {
|
||||
const ActivityTypeIndicator = ({activityType, isMobile} : { activityType: keyof typeof ACTIVITIES, isMobile: boolean}) => {
|
||||
const {displayName, Icon} = ACTIVITIES[activityType]
|
||||
|
||||
return (
|
||||
<div className="px-3 text-gray-300 space-x-1 w-28 flex">
|
||||
<div className={`px-3 text-gray-300 space-x-1 w-28 flex ${isMobile ? 'flex-col' : ''}`}>
|
||||
<div className="flex space-x-2 items-center">
|
||||
<Icon className="size-4" />{' '}
|
||||
<div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">
|
||||
|
|
@ -257,7 +252,7 @@ const ActivityTypeIndicator = ({activityType} : { activityType: keyof typeof ACT
|
|||
)
|
||||
}
|
||||
|
||||
const ActivityElementOptions = ({ activity }: any) => {
|
||||
const ActivityElementOptions = ({ activity, isMobile }: { activity: any; isMobile: boolean }) => {
|
||||
const [assignmentUUID, setAssignmentUUID] = useState('');
|
||||
const org = useOrg() as any;
|
||||
const course = useCourse() as any;
|
||||
|
|
@ -299,11 +294,11 @@ const ActivityElementOptions = ({ activity }: any) => {
|
|||
)}/edit`
|
||||
}
|
||||
prefetch
|
||||
className=" hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md items-center"
|
||||
target='_blank' // hotfix for an editor prosemirror bug
|
||||
className={`hover:cursor-pointer p-1 ${isMobile ? 'px-2' : 'px-3'} bg-sky-700 rounded-md items-center`}
|
||||
target='_blank'
|
||||
>
|
||||
<div className="text-sky-100 font-bold text-xs flex items-center space-x-1">
|
||||
<FilePenLine size={12} /> <span>Edit Page</span>
|
||||
<FilePenLine size={12} /> <span>Edit Page</span>
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
|
|
@ -316,10 +311,10 @@ const ActivityElementOptions = ({ activity }: any) => {
|
|||
`/dash/assignments/${assignmentUUID}`
|
||||
}
|
||||
prefetch
|
||||
className=" hover:cursor-pointer p-1 px-3 bg-teal-700 rounded-md items-center"
|
||||
className={`hover:cursor-pointer p-1 ${isMobile ? 'px-2' : 'px-3'} bg-teal-700 rounded-md items-center`}
|
||||
>
|
||||
<div className="text-sky-100 font-bold text-xs flex items-center space-x-1">
|
||||
<FilePenLine size={12} /> <span>Edit Assignment</span>
|
||||
<FilePenLine size={12} /> {!isMobile && <span>Edit Assignment</span>}
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
Pencil,
|
||||
Save,
|
||||
X,
|
||||
Trash2,
|
||||
} from 'lucide-react'
|
||||
import React from 'react'
|
||||
import { Draggable, Droppable } from 'react-beautiful-dnd'
|
||||
|
|
@ -71,27 +72,27 @@ function ChapterElement(props: ChapterElementProps) {
|
|||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 pt-6"
|
||||
className="mx-2 sm:mx-4 md:mx-6 lg:mx-10 bg-white rounded-xl nice-shadow px-3 sm:px-4 md:px-6 pt-4 sm:pt-6"
|
||||
key={props.chapter.chapter_uuid}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
<div className="flex font-bold text-md items-center space-x-2 pb-3">
|
||||
<div className="flex grow text-lg space-x-3 items-center rounded-md ">
|
||||
<div className="flex flex-wrap items-center justify-between pb-3">
|
||||
<div className="flex grow items-center space-x-2 mb-2 sm:mb-0">
|
||||
<div className="bg-neutral-100 rounded-md p-2">
|
||||
<Hexagon
|
||||
strokeWidth={3}
|
||||
size={16}
|
||||
className="text-neutral-600 "
|
||||
className="text-neutral-600"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
{selectedChapter === props.chapter.id ? (
|
||||
<div className="chapter-modification-zone bg-neutral-100 py-1 px-4 rounded-lg space-x-3">
|
||||
<div className="chapter-modification-zone bg-neutral-100 py-1 px-2 sm:px-4 rounded-lg flex items-center space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
className="bg-transparent outline-none text-sm text-neutral-700"
|
||||
className="bg-transparent outline-none text-sm text-neutral-700 w-full max-w-[150px] sm:max-w-none"
|
||||
placeholder="Chapter name"
|
||||
value={
|
||||
modifiedChapter
|
||||
|
|
@ -109,14 +110,11 @@ function ChapterElement(props: ChapterElementProps) {
|
|||
onClick={() => updateChapterName(props.chapter.id)}
|
||||
className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900"
|
||||
>
|
||||
<Save
|
||||
size={15}
|
||||
onClick={() => updateChapterName(props.chapter.id)}
|
||||
/>
|
||||
<Save size={15} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-neutral-700 first-letter:uppercase">
|
||||
<p className="text-neutral-700 first-letter:uppercase text-sm sm:text-base">
|
||||
{props.chapter.name}
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -127,23 +125,24 @@ function ChapterElement(props: ChapterElementProps) {
|
|||
/>
|
||||
</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.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"
|
||||
>
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
<p>Delete Chapter</p>
|
||||
</div>
|
||||
}
|
||||
functionToExecute={() => deleteChapterUI()}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
<div className="flex items-center space-x-2">
|
||||
<MoreVertical size={15} className="text-gray-300" />
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Chapter"
|
||||
confirmationMessage="Are you sure you want to delete this chapter?"
|
||||
dialogTitle={'Delete ' + props.chapter.name + ' ?'}
|
||||
dialogTrigger={
|
||||
<button
|
||||
className="hover:cursor-pointer p-1 px-2 sm:px-3 bg-red-600 rounded-md shadow flex items-center text-rose-100 text-sm"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Trash2 size={15} className="text-rose-200" />
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => deleteChapterUI()}
|
||||
status="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Droppable
|
||||
key={props.chapter.chapter_uuid}
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ function OrgEditGeneral() {
|
|||
useEffect(() => {}, [org])
|
||||
|
||||
return (
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5">
|
||||
<div className="sm:ml-10 sm:mr-10 ml-0 mr-0 mx-auto bg-white rounded-xl shadow-sm px-6 py-5 sm:mb-0 mb-16">
|
||||
<Toaster />
|
||||
<Formik
|
||||
enableReinitialize
|
||||
|
|
@ -107,8 +107,8 @@ function OrgEditGeneral() {
|
|||
>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<div className="flex space-x-8">
|
||||
<div className="max-w-md flex-grow">
|
||||
<div className="flex flex-col lg:flex-row lg:space-x-8">
|
||||
<div className="w-full lg:w-1/2 mb-8 lg:mb-0">
|
||||
<label className="block mb-2 font-bold" htmlFor="name">
|
||||
Name
|
||||
</label>
|
||||
|
|
@ -149,24 +149,24 @@ function OrgEditGeneral() {
|
|||
<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"
|
||||
className="w-full sm:w-auto 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>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col grow space-y-3">
|
||||
<Tabs defaultValue="logo" className="w-full ">
|
||||
<TabsList className="grid w-full grid-cols-2 mb-20">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<Tabs defaultValue="logo" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2 mb-6 sm:mb-10">
|
||||
<TabsTrigger value="logo">Logo</TabsTrigger>
|
||||
<TabsTrigger value="thumbnail">Thumbnail</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="logo">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20">
|
||||
<div className="flex flex-col justify-center items-center mt-10">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-4 sm:mx-10">
|
||||
<div className="flex flex-col justify-center items-center mt-6 sm:mt-10">
|
||||
<div
|
||||
className="w-[200px] h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
|
||||
className="w-[150px] sm:w-[200px] h-[75px] sm:h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
|
||||
style={{ backgroundImage: `url(${localLogo || getOrgLogoMediaDirectory(org?.org_uuid, org?.logo_image)})` }}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -189,16 +189,16 @@ function OrgEditGeneral() {
|
|||
</div>
|
||||
<div className="flex text-xs space-x-2 items-center text-gray-500 justify-center">
|
||||
<Info size={13} />
|
||||
<p>Accepts PNG , JPG</p>
|
||||
<p>Accepts PNG, JPG</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="thumbnail">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20">
|
||||
<div className="flex flex-col justify-center items-center mt-10">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-4 sm:mx-10">
|
||||
<div className="flex flex-col justify-center items-center mt-6 sm:mt-10">
|
||||
<div
|
||||
className="w-[200px] h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
|
||||
className="w-[150px] sm:w-[200px] h-[75px] sm:h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
|
||||
style={{ backgroundImage: `url(${localThumbnail || getOrgThumbnailMediaDirectory(org?.org_uuid, org?.thumbnail_image)})` }}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import AdminAuthorization from '@components/Security/AdminAuthorization'
|
|||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
|
||||
|
||||
function LeftMenu() {
|
||||
function DashLeftMenu() {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
const [loading, setLoading] = React.useState(true)
|
||||
|
|
@ -176,4 +176,4 @@ function LeftMenu() {
|
|||
)
|
||||
}
|
||||
|
||||
export default LeftMenu
|
||||
export default DashLeftMenu
|
||||
69
apps/web/components/Dashboard/UI/DashMobileMenu.tsx
Normal file
69
apps/web/components/Dashboard/UI/DashMobileMenu.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
'use client'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { signOut } from 'next-auth/react'
|
||||
import { Backpack, BookCopy, Home, LogOut, School, Settings, Users } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import AdminAuthorization from '@components/Security/AdminAuthorization'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
|
||||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
|
||||
|
||||
function DashMobileMenu() {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
|
||||
async function logOutUI() {
|
||||
const res = await signOut({ redirect: true, callbackUrl: getUriWithoutOrg('/login?orgslug=' + org.slug) })
|
||||
if (res) {
|
||||
getUriWithOrg(org.slug, '/')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-black/90 backdrop-blur-lg text-white shadow-xl">
|
||||
<div className="flex justify-around items-center h-16 px-2">
|
||||
<AdminAuthorization authorizationMode="component">
|
||||
<ToolTip content={'Home'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/`} className="flex flex-col items-center p-2">
|
||||
<Home size={20} />
|
||||
<span className="text-xs mt-1">Home</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Courses'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/courses`} className="flex flex-col items-center p-2">
|
||||
<BookCopy size={20} />
|
||||
<span className="text-xs mt-1">Courses</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Assignments'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/assignments`} className="flex flex-col items-center p-2">
|
||||
<Backpack size={20} />
|
||||
<span className="text-xs mt-1">Assignments</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Users'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/users/settings/users`} className="flex flex-col items-center p-2">
|
||||
<Users size={20} />
|
||||
<span className="text-xs mt-1">Users</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Organization'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/org/settings/general`} className="flex flex-col items-center p-2">
|
||||
<School size={20} />
|
||||
<span className="text-xs mt-1">Org</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</AdminAuthorization>
|
||||
<ToolTip content={session.data.user.username + "'s Settings"} slateBlack sideOffset={8} side="top">
|
||||
<Link href={'/dash/user-account/settings/general'} className="flex flex-col items-center p-2">
|
||||
<Settings size={20} />
|
||||
<span className="text-xs mt-1">Settings</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashMobileMenu
|
||||
|
|
@ -40,7 +40,7 @@ function UserEditGeneral() {
|
|||
useEffect(() => { }, [session, session.data])
|
||||
|
||||
return (
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5">
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5 sm:mb-0 mb-16">
|
||||
{session.data.user && (
|
||||
<Formik
|
||||
enableReinitialize
|
||||
|
|
@ -59,84 +59,53 @@ function UserEditGeneral() {
|
|||
}}
|
||||
>
|
||||
{({ isSubmitting }) => (
|
||||
<div className="flex space-x-8">
|
||||
<Form className="max-w-md">
|
||||
<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="username">
|
||||
Username
|
||||
</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="username"
|
||||
name="username"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="first_name">
|
||||
First Name
|
||||
</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="first_name"
|
||||
name="first_name"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="last_name">
|
||||
Last Name
|
||||
</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="last_name"
|
||||
name="last_name"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="bio">
|
||||
Bio
|
||||
</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="bio"
|
||||
name="bio"
|
||||
/>
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
<Form className="flex-1 min-w-0">
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ label: 'Email', name: 'email', type: 'email' },
|
||||
{ label: 'Username', name: 'username', type: 'text' },
|
||||
{ label: 'First Name', name: 'first_name', type: 'text' },
|
||||
{ label: 'Last Name', name: 'last_name', type: 'text' },
|
||||
{ label: 'Bio', name: 'bio', type: 'text' },
|
||||
].map((field) => (
|
||||
<div key={field.name}>
|
||||
<label className="block mb-2 font-bold" htmlFor={field.name}>
|
||||
{field.label}
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type={field.type}
|
||||
name={field.name}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<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"
|
||||
className="mt-6 px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</Form>
|
||||
<div className="flex flex-col grow justify-center align-middle space-y-3">
|
||||
<label className="flex mx-auto mb-2 font-bold ">Avatar</label>
|
||||
{error && (
|
||||
<div className="flex justify-center mx-auto bg-red-200 rounded-md text-red-950 space-x-1 px-4 items-center p-2 transition-all shadow-sm">
|
||||
<FileWarning size={16} className="mr-2" />
|
||||
<div className="text-sm font-semibold first-letter:uppercase">
|
||||
{error}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<label className="font-bold">Avatar</label>
|
||||
{error && (
|
||||
<div className="flex items-center bg-red-200 rounded-md text-red-950 px-4 py-2 text-sm">
|
||||
<FileWarning size={16} className="mr-2" />
|
||||
<span className="font-semibold first-letter:uppercase">{error}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="flex justify-center mx-auto bg-green-200 rounded-md text-green-950 space-x-1 px-4 items-center p-2 transition-all shadow-sm">
|
||||
<Check size={16} className="mr-2" />
|
||||
<div className="text-sm font-semibold first-letter:uppercase">
|
||||
{success}
|
||||
)}
|
||||
{success && (
|
||||
<div className="flex items-center bg-green-200 rounded-md text-green-950 px-4 py-2 text-sm">
|
||||
<Check size={16} className="mr-2" />
|
||||
<span className="font-semibold first-letter:uppercase">{success}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20">
|
||||
<div className="flex flex-col justify-center items-center mt-10">
|
||||
)}
|
||||
<div className="w-full max-w-xs bg-gray-50 rounded-xl outline outline-1 outline-gray-200 shadow p-6">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{localAvatar ? (
|
||||
<UserAvatar
|
||||
border="border-8"
|
||||
|
|
@ -146,42 +115,32 @@ function UserEditGeneral() {
|
|||
) : (
|
||||
<UserAvatar border="border-8" width={100} />
|
||||
)}
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center items-center">
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<div className="font-bold animate-pulse antialiased items-center bg-green-200 text-gray text-sm rounded-md px-4 py-2 mt-4 flex">
|
||||
{isLoading ? (
|
||||
<div className="font-bold animate-pulse antialiased bg-green-200 text-gray text-sm rounded-md px-4 py-2 flex items-center">
|
||||
<ArrowBigUpDash size={16} className="mr-2" />
|
||||
<span>Uploading</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center items-center">
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<button
|
||||
className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 py-2 mt-4 flex"
|
||||
onClick={() =>
|
||||
document.getElementById('fileInput')?.click()
|
||||
}
|
||||
>
|
||||
<UploadCloud size={16} className="mr-2" />
|
||||
<span>Change Avatar</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
<>
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<button
|
||||
className="font-bold antialiased text-gray text-sm rounded-md px-4 py-2 flex items-center"
|
||||
onClick={() => document.getElementById('fileInput')?.click()}
|
||||
>
|
||||
<UploadCloud size={16} className="mr-2" />
|
||||
<span>Change Avatar</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex text-xs space-x-2 items-center text-gray-500 justify-center">
|
||||
<Info size={13} />
|
||||
<div className="flex items-center text-xs text-gray-500">
|
||||
<Info size={13} className="mr-2" />
|
||||
<p>Recommended size 100x100</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,14 @@
|
|||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import AddUserGroup from '@components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup'
|
||||
import EditUserGroup from '@components/Objects/Modals/Dash/OrgUserGroups/EditUserGroup'
|
||||
import ManageUsers from '@components/Objects/Modals/Dash/OrgUserGroups/ManageUsers'
|
||||
import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import Modal from '@components/StyledElements/Modal/Modal'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
import { deleteUserGroup } from '@services/usergroups/usergroups'
|
||||
import { swrFetcher } from '@services/utils/ts/requests'
|
||||
import { SquareUserRound, Users, X } from 'lucide-react'
|
||||
import { Pencil, SquareUserRound, Users, X } from 'lucide-react'
|
||||
import React from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import useSWR, { mutate } from 'swr'
|
||||
|
|
@ -19,6 +20,7 @@ function OrgUserGroups() {
|
|||
const access_token = session?.data?.tokens?.access_token;
|
||||
const [userGroupManagementModal, setUserGroupManagementModal] = React.useState(false)
|
||||
const [createUserGroupModal, setCreateUserGroupModal] = React.useState(false)
|
||||
const [editUserGroupModal, setEditUserGroupModal] = React.useState(false)
|
||||
const [selectedUserGroup, setSelectedUserGroup] = React.useState(null) as any
|
||||
|
||||
const { data: usergroups } = useSWR(
|
||||
|
|
@ -96,8 +98,24 @@ function OrgUserGroups() {
|
|||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="py-3 px-4 ">
|
||||
|
||||
<td className="py-3 px-4 flex space-x-2">
|
||||
<Modal
|
||||
isDialogOpen={editUserGroupModal}
|
||||
dialogTrigger={
|
||||
<button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md font-bold items-center text-sm text-sky-100">
|
||||
<Pencil className="size-4" />
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
}
|
||||
minHeight='sm'
|
||||
minWidth='sm'
|
||||
onOpenChange={() => {
|
||||
setEditUserGroupModal(!editUserGroupModal)
|
||||
}}
|
||||
dialogContent={
|
||||
<EditUserGroup usergroup={usergroup} />
|
||||
}
|
||||
/>
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete UserGroup"
|
||||
confirmationMessage="Access to all resources will be removed for all users in this UserGroup. Are you sure you want to delete this UserGroup ?"
|
||||
|
|
@ -105,7 +123,7 @@ function OrgUserGroups() {
|
|||
dialogTrigger={
|
||||
<button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-rose-700 rounded-md font-bold items-center text-sm text-rose-100">
|
||||
<X className="w-4 h-4" />
|
||||
<span> Delete</span>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => {
|
||||
|
|
|
|||
|
|
@ -21,10 +21,14 @@ import WarningCallout from './Extensions/Callout/Warning/WarningCallout'
|
|||
import ImageBlock from './Extensions/Image/ImageBlock'
|
||||
import Youtube from '@tiptap/extension-youtube'
|
||||
import VideoBlock from './Extensions/Video/VideoBlock'
|
||||
import { Eye } from 'lucide-react'
|
||||
import { ComputerIcon, Eye, Monitor } from 'lucide-react'
|
||||
import MathEquationBlock from './Extensions/MathEquation/MathEquationBlock'
|
||||
import PDFBlock from './Extensions/PDF/PDFBlock'
|
||||
import QuizBlock from './Extensions/Quiz/QuizBlock'
|
||||
import Table from '@tiptap/extension-table'
|
||||
import TableCell from '@tiptap/extension-table-cell'
|
||||
import TableHeader from '@tiptap/extension-table-header'
|
||||
import TableRow from '@tiptap/extension-table-row'
|
||||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
|
||||
import Link from 'next/link'
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
||||
|
|
@ -51,6 +55,7 @@ import { getUriWithOrg } from '@services/config/config'
|
|||
import EmbedObjects from './Extensions/EmbedObjects/EmbedObjects'
|
||||
import Badges from './Extensions/Badges/Badges'
|
||||
import Buttons from './Extensions/Buttons/Buttons'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
|
||||
interface Editor {
|
||||
content: string
|
||||
|
|
@ -148,6 +153,12 @@ function Editor(props: Editor) {
|
|||
editable: true,
|
||||
activity: props.activity,
|
||||
}),
|
||||
Table.configure({
|
||||
resizable: true,
|
||||
}),
|
||||
TableRow,
|
||||
TableHeader,
|
||||
TableCell,
|
||||
|
||||
// Add Collaboration and CollaborationCursor only if isCollabEnabledOnThisOrg is true
|
||||
...(props.isCollabEnabledOnThisOrg ? [
|
||||
|
|
@ -170,6 +181,21 @@ function Editor(props: Editor) {
|
|||
content: props.isCollabEnabledOnThisOrg ? null : props.content,
|
||||
})
|
||||
|
||||
const isMobile = useMediaQuery('(max-width: 767px)')
|
||||
if (isMobile) {
|
||||
// TODO: Work on a better editor mobile experience
|
||||
return (
|
||||
<div className="h-screen w-full bg-[#f8f8f8] flex items-center justify-center p-4">
|
||||
<div className="bg-white p-6 rounded-lg shadow-md text-center">
|
||||
<h2 className="text-xl font-bold mb-4">Desktop Only</h2>
|
||||
<Monitor className='mx-auto my-5' size={60} />
|
||||
<p>The editor is only accessible from a desktop device.</p>
|
||||
<p>Please switch to a desktop to view.</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<CourseProvider courseuuid={props.course.course_uuid}>
|
||||
|
|
@ -535,6 +561,16 @@ export const EditorContentWrapper = styled.div`
|
|||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&.resize-cursor {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.tableWrapper {
|
||||
margin: 1.5rem 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
|
|
@ -554,6 +590,53 @@ export const EditorContentWrapper = styled.div`
|
|||
padding-left: 20px;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid rgba(139, 139, 139, 0.4);
|
||||
box-sizing: border-box;
|
||||
min-width: 1em;
|
||||
padding: 6px 8px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: rgba(217, 217, 217, 0.4);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.selectedCell:after {
|
||||
background: rgba(139, 139, 139, 0.2);
|
||||
content: "";
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.column-resize-handle {
|
||||
background-color: #8d78eb;
|
||||
bottom: -2px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export default Editor
|
||||
|
|
|
|||
|
|
@ -7,6 +7,11 @@ import {
|
|||
ArrowRightIcon,
|
||||
DividerVerticalIcon,
|
||||
ListBulletIcon,
|
||||
TableIcon,
|
||||
RowsIcon,
|
||||
ColumnsIcon,
|
||||
SectionIcon,
|
||||
ContainerIcon,
|
||||
} from '@radix-ui/react-icons'
|
||||
import {
|
||||
AlertCircle,
|
||||
|
|
@ -92,6 +97,34 @@ export const ToolbarButtons = ({ editor, props }: any) => {
|
|||
<option value="5">Heading 5</option>
|
||||
<option value="6">Heading 6</option>
|
||||
</ToolSelect>
|
||||
<DividerVerticalIcon
|
||||
style={{ marginTop: 'auto', marginBottom: 'auto', color: 'grey' }}
|
||||
/>
|
||||
<ToolBtn content={'Create table'}
|
||||
onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
|
||||
>
|
||||
<TableIcon/>
|
||||
</ToolBtn>
|
||||
<ToolBtn content={'Insert row'}
|
||||
onClick={() => editor.chain().focus().addRowAfter().run()}
|
||||
>
|
||||
<RowsIcon/>
|
||||
</ToolBtn>
|
||||
<ToolBtn content={'Insert column'}
|
||||
onClick={() => editor.chain().focus().addColumnAfter().run()}
|
||||
>
|
||||
<ColumnsIcon/>
|
||||
</ToolBtn>
|
||||
<ToolBtn content={'Remove column'}
|
||||
onClick={() => editor.chain().focus().deleteColumn().run()}
|
||||
>
|
||||
<ContainerIcon/>
|
||||
</ToolBtn>
|
||||
<ToolBtn content={'Remove row'}
|
||||
onClick={() => editor.chain().focus().deleteRow().run()}
|
||||
>
|
||||
<SectionIcon/>
|
||||
</ToolBtn>
|
||||
{/* TODO: fix this : toggling only works one-way */}
|
||||
<DividerVerticalIcon
|
||||
style={{ marginTop: 'auto', marginBottom: 'auto', color: 'grey' }}
|
||||
|
|
|
|||
|
|
@ -14,54 +14,73 @@ export const Menu = (props: any) => {
|
|||
const access_token = session?.data?.tokens?.access_token;
|
||||
const [feedbackModal, setFeedbackModal] = React.useState(false)
|
||||
const org = useOrg() as any;
|
||||
const [isMenuOpen, setIsMenuOpen] = React.useState(false)
|
||||
|
||||
function closeFeedbackModal() {
|
||||
setFeedbackModal(false)
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
setIsMenuOpen(!isMenuOpen)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="backdrop-blur-lg h-[60px] blur-3xl -z-10" style={{}}>
|
||||
|
||||
</div>
|
||||
<div className="backdrop-blur-lg bg-white/90 fixed flex top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 items-center space-x-5 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
|
||||
<div className="flex items-center space-x-5 w-full max-w-screen-2xl mx-auto px-16">
|
||||
<div className="logo flex ">
|
||||
<Link href={getUriWithOrg(orgslug, '/')}>
|
||||
<div className="flex w-auto h-9 rounded-md items-center m-auto py-1 justify-center">
|
||||
{org?.logo_image ? (
|
||||
<img
|
||||
src={`${getOrgLogoMediaDirectory(
|
||||
org.org_uuid,
|
||||
org?.logo_image
|
||||
)}`}
|
||||
alt="Learnhouse"
|
||||
style={{ width: 'auto', height: '100%' }}
|
||||
className="rounded-md"
|
||||
/>
|
||||
) : (
|
||||
<LearnHouseLogo></LearnHouseLogo>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="backdrop-blur-lg h-[60px] blur-3xl -z-10"></div>
|
||||
<div className="backdrop-blur-lg bg-white/90 fixed top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
|
||||
<div className="flex items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
|
||||
<div className="flex items-center space-x-5 md:w-auto w-full">
|
||||
<div className="logo flex md:w-auto w-full justify-center">
|
||||
<Link href={getUriWithOrg(orgslug, '/')}>
|
||||
<div className="flex w-auto h-9 rounded-md items-center m-auto py-1 justify-center">
|
||||
{org?.logo_image ? (
|
||||
<img
|
||||
src={`${getOrgLogoMediaDirectory(org.org_uuid, org?.logo_image)}`}
|
||||
alt="Learnhouse"
|
||||
style={{ width: 'auto', height: '100%' }}
|
||||
className="rounded-md"
|
||||
/>
|
||||
) : (
|
||||
<LearnHouseLogo />
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="hidden md:flex">
|
||||
<MenuLinks orgslug={orgslug} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="links flex grow">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="hidden md:flex">
|
||||
<HeaderProfileBox />
|
||||
</div>
|
||||
<button
|
||||
className="md:hidden text-gray-600 focus:outline-none"
|
||||
onClick={toggleMenu}
|
||||
>
|
||||
{isMenuOpen ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`fixed inset-x-0 z-40 bg-white/80 backdrop-blur-lg md:hidden shadow-lg transition-all duration-300 ease-in-out ${
|
||||
isMenuOpen ? 'top-[60px] opacity-100' : '-top-full opacity-0'
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col px-4 py-3 space-y-4 justify-center items-center">
|
||||
<div className='py-4'>
|
||||
<MenuLinks orgslug={orgslug} />
|
||||
</div>
|
||||
<div className="profile flex items-center">
|
||||
{/* <Modal
|
||||
isDialogOpen={feedbackModal}
|
||||
onOpenChange={setFeedbackModal}
|
||||
minHeight="sm"
|
||||
dialogContent={<FeedbackModal></FeedbackModal>}
|
||||
dialogTitle="Feedback"
|
||||
dialogDescription="An issue? A suggestion? a bug ? Let us know!"
|
||||
dialogTrigger={
|
||||
<div className="feedback cursor-pointer block items-center h-fit p-2 rounded-2xl bg-orange-800 hover:bg-orange-900 text-orange-300 shadow">
|
||||
<MessageSquareIcon size={12} />
|
||||
</div>
|
||||
}
|
||||
/> */}
|
||||
<div className="border-t border-gray-200">
|
||||
<HeaderProfileBox />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
'use client'
|
||||
import FormLayout, {
|
||||
FormField,
|
||||
FormLabelAndMessage,
|
||||
Input,
|
||||
} from '@components/StyledElements/Form/Form'
|
||||
import * as Form from '@radix-ui/react-form'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import React from 'react'
|
||||
import { updateUserGroup } from '@services/usergroups/usergroups'
|
||||
import { mutate } from 'swr'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { useFormik } from 'formik'
|
||||
import toast from 'react-hot-toast'
|
||||
|
||||
type EditUserGroupProps = {
|
||||
usergroup: {
|
||||
id: number,
|
||||
name: string,
|
||||
description: string,
|
||||
}
|
||||
}
|
||||
|
||||
const validate = (values: any) => {
|
||||
const errors: any = {}
|
||||
|
||||
if (!values.name) {
|
||||
errors.name = 'Name is Required'
|
||||
}
|
||||
|
||||
return errors
|
||||
}
|
||||
|
||||
function EditUserGroup(props: EditUserGroupProps) {
|
||||
const org = useOrg() as any;
|
||||
const session = useLHSession() as any
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
const [isSubmitting, setIsSubmitting] = React.useState(false)
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
name: props.usergroup.name,
|
||||
description: props.usergroup.description,
|
||||
},
|
||||
validate,
|
||||
onSubmit: async (values) => {
|
||||
setIsSubmitting(true)
|
||||
const res = await updateUserGroup(props.usergroup.id, access_token, values)
|
||||
|
||||
if (res.status == 200) {
|
||||
setIsSubmitting(false)
|
||||
toast.success(`UserGroup saved successfully`)
|
||||
mutate(`${getAPIUrl()}usergroups/org/${org.id}`)
|
||||
} else {
|
||||
toast.error(`Error saving UserGroup, please retry later.`)
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
console.log(formik.errors.name)
|
||||
|
||||
return (
|
||||
<FormLayout onSubmit={formik.handleSubmit}>
|
||||
<FormField name="name">
|
||||
<FormLabelAndMessage
|
||||
label="Name"
|
||||
message={formik.errors.name}
|
||||
/>
|
||||
<Form.Control asChild>
|
||||
<Input
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.name}
|
||||
type="name"
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
<FormField name="description">
|
||||
<FormLabelAndMessage
|
||||
label="Description"
|
||||
message={formik.errors.description}
|
||||
/>
|
||||
<Form.Control asChild>
|
||||
<Input
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.description}
|
||||
type="description"
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
<div className="flex py-4">
|
||||
<Form.Submit asChild>
|
||||
<button className="w-full bg-black text-white font-bold text-center p-2 rounded-md shadow-md hover:cursor-pointer">
|
||||
{isSubmitting ? 'Loading...' : 'Save UserGroup'}
|
||||
</button>
|
||||
</Form.Submit>
|
||||
</div>
|
||||
</FormLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditUserGroup
|
||||
|
|
@ -25,43 +25,42 @@ const removeCollectionPrefix = (collectionid: string) => {
|
|||
function CollectionThumbnail(props: PropsType) {
|
||||
const org = useOrg() as any
|
||||
return (
|
||||
<div className="">
|
||||
<div className="flex flex-row space-x-4 inset-0 ring-1 ring-inset my-auto ring-black/10 rounded-xl shadow-xl relative w-[300px] h-[80px] bg-cover items-center justify-center bg-indigo-600 font-bold text-zinc-50">
|
||||
<div className="flex -space-x-5">
|
||||
{props.collection.courses.slice(0, 2).map((course: any) => (
|
||||
<>
|
||||
<Link
|
||||
href={getUriWithOrg(
|
||||
props.orgslug,
|
||||
'/collection/' +
|
||||
removeCollectionPrefix(props.collection.collection_uuid)
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="inset-0 rounded-full shadow-2xl bg-cover w-12 h-8 justify-center ring-indigo-800 ring-4"
|
||||
style={{
|
||||
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course.course_uuid,
|
||||
course.thumbnail_image
|
||||
)})`,
|
||||
}}
|
||||
></div>
|
||||
</Link>
|
||||
</>
|
||||
))}
|
||||
<div className="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl">
|
||||
<div className="flex h-full w-full items-center justify-between bg-indigo-600 p-4">
|
||||
<div className="flex items-center space-x-5">
|
||||
<div className="flex -space-x-3">
|
||||
{props.collection.courses.slice(0, 3).map((course: any, index: number) => (
|
||||
<div
|
||||
key={course.course_uuid}
|
||||
className="relative h-12 w-12 overflow-hidden rounded-full border-2 border-white shadow-md transition-all duration-300 hover:z-10 hover:scale-110"
|
||||
style={{
|
||||
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course.course_uuid,
|
||||
course.thumbnail_image
|
||||
)})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
zIndex: 3 - index,
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<Link
|
||||
href={getUriWithOrg(
|
||||
props.orgslug,
|
||||
'/collection/' + removeCollectionPrefix(props.collection.collection_uuid)
|
||||
)}
|
||||
className="text-2xl font-bold text-white hover:underline"
|
||||
>
|
||||
{props.collection.name}
|
||||
</Link>
|
||||
<span className="mt-1 text-sm font-medium text-indigo-200">
|
||||
{props.collection.courses.length} course{props.collection.courses.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href={getUriWithOrg(
|
||||
props.orgslug,
|
||||
'/collection/' +
|
||||
removeCollectionPrefix(props.collection.collection_uuid)
|
||||
)}
|
||||
>
|
||||
<h1 className="font-bold text-md justify-center">
|
||||
{props.collection.name}
|
||||
</h1>
|
||||
</Link>
|
||||
<CollectionAdminEditsArea
|
||||
orgslug={props.orgslug}
|
||||
org_id={props.org_id}
|
||||
|
|
@ -91,18 +90,18 @@ const CollectionAdminEditsArea = (props: any) => {
|
|||
orgId={props.org_id}
|
||||
checkMethod="roles"
|
||||
>
|
||||
<div className="flex space-x-1 justify-center mx-auto z-20 ">
|
||||
<div className="z-20">
|
||||
<ConfirmationModal
|
||||
confirmationMessage="Are you sure you want to delete this collection?"
|
||||
confirmationButtonText="Delete Collection"
|
||||
dialogTitle={'Delete ' + props.collection.name + ' ?'}
|
||||
dialogTitle={'Delete ' + props.collection.name + '?'}
|
||||
dialogTrigger={
|
||||
<div
|
||||
className="hover:cursor-pointer p-1 px-2 bg-red-600 rounded-xl items-center justify-center flex shadow-xl"
|
||||
<button
|
||||
className="absolute right-2 top-2 rounded-full bg-red-500 p-2 text-white transition-colors duration-300 hover:bg-red-600"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<X size={10} className="text-rose-200 font-bold" />
|
||||
</div>
|
||||
<X size={18} />
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => deleteCollectionUI(props.collection_uuid)}
|
||||
status="warning"
|
||||
|
|
|
|||
|
|
@ -6,146 +6,125 @@ import { getUriWithOrg } from '@services/config/config'
|
|||
import { deleteCourseFromBackend } from '@services/courses/courses'
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media'
|
||||
import { revalidateTags } from '@services/utils/ts/requests'
|
||||
import { BookMinus, FilePenLine, Settings2, EllipsisVertical } from 'lucide-react'
|
||||
import { BookMinus, FilePenLine, Settings2, MoreVertical } from 'lucide-react'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import React, { useEffect } from 'react'
|
||||
import React from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
type Course = {
|
||||
course_uuid: string
|
||||
name: string
|
||||
description: string
|
||||
thumbnail_image: string
|
||||
org_id: string
|
||||
}
|
||||
|
||||
type PropsType = {
|
||||
course: any
|
||||
course: Course
|
||||
orgslug: string
|
||||
customLink?: string
|
||||
}
|
||||
|
||||
// function to remove "course_" from the course_uuid
|
||||
function removeCoursePrefix(course_uuid: string) {
|
||||
return course_uuid.replace('course_', '')
|
||||
}
|
||||
export const removeCoursePrefix = (course_uuid: string) => course_uuid.replace('course_', '')
|
||||
|
||||
function CourseThumbnail(props: PropsType) {
|
||||
const router = useRouter()
|
||||
function CourseThumbnail({ course, orgslug, customLink }: PropsType) {
|
||||
const router = useRouter()
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any;
|
||||
const session = useLHSession() as any
|
||||
|
||||
async function deleteCourses(course_uuid: any) {
|
||||
const toast_loading = toast.loading('Deleting course...')
|
||||
await deleteCourseFromBackend(course_uuid, session.data?.tokens?.access_token)
|
||||
toast.dismiss(toast_loading)
|
||||
toast.success('Course deleted successfully')
|
||||
await revalidateTags(['courses'], props.orgslug)
|
||||
|
||||
router.refresh()
|
||||
const deleteCourse = async () => {
|
||||
const toastId = toast.loading('Deleting course...')
|
||||
try {
|
||||
await deleteCourseFromBackend(course.course_uuid, session.data?.tokens?.access_token)
|
||||
await revalidateTags(['courses'], orgslug)
|
||||
toast.success('Course deleted successfully')
|
||||
router.refresh()
|
||||
} catch (error) {
|
||||
toast.error('Failed to delete course')
|
||||
} finally {
|
||||
toast.dismiss(toastId)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { }, [org])
|
||||
const thumbnailImage = course.thumbnail_image
|
||||
? getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)
|
||||
: '../empty_thumbnail.png'
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<AdminEditsArea
|
||||
course={props.course}
|
||||
orgSlug={props.orgslug}
|
||||
courseId={props.course.course_uuid}
|
||||
deleteCourses={deleteCourses}
|
||||
<AdminEditOptions
|
||||
course={course}
|
||||
orgSlug={orgslug}
|
||||
deleteCourse={deleteCourse}
|
||||
/>
|
||||
<Link
|
||||
href={getUriWithOrg(
|
||||
props.orgslug,
|
||||
'/course/' + removeCoursePrefix(props.course.course_uuid)
|
||||
)}
|
||||
>
|
||||
{props.course.thumbnail_image ? (
|
||||
<div
|
||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover"
|
||||
style={{
|
||||
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
|
||||
org?.org_uuid,
|
||||
props.course.course_uuid,
|
||||
props.course.thumbnail_image
|
||||
)})`,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-[249px] h-[131px] bg-cover"
|
||||
style={{
|
||||
backgroundImage: `url('../empty_thumbnail.png')`,
|
||||
backgroundSize: 'contain',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Link prefetch href={customLink ? customLink : getUriWithOrg(orgslug, `/course/${removeCoursePrefix(course.course_uuid)}`)}>
|
||||
<div
|
||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl w-full aspect-video bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${thumbnailImage})` }}
|
||||
/>
|
||||
</Link>
|
||||
<div className='flex flex-col w-[250px] pt-3 space-y-2'>
|
||||
<h2 className="font-bold text-gray-800 max-h-[80px] h-fit line-clamp-2 leading-tight text-lg capitalize">{props.course.name}</h2>
|
||||
<h3 className='text-sm text-gray-700 leading-normal line-clamp-3'>{props.course.description}</h3>
|
||||
<div className='flex flex-col w-full pt-3 space-y-2'>
|
||||
<h2 className="font-bold text-gray-800 line-clamp-2 leading-tight text-lg capitalize">{course.name}</h2>
|
||||
<p className='text-sm text-gray-700 leading-normal line-clamp-3'>{course.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const AdminEditsArea = (props: {
|
||||
const AdminEditOptions = ({ course, orgSlug, deleteCourse }: {
|
||||
course: Course
|
||||
orgSlug: string
|
||||
courseId: string
|
||||
course: any
|
||||
deleteCourses: any
|
||||
deleteCourse: () => Promise<void>
|
||||
}) => {
|
||||
return (
|
||||
<AuthenticatedClientElement
|
||||
action="update"
|
||||
ressourceType="courses"
|
||||
checkMethod="roles"
|
||||
orgId={props.course.org_id}
|
||||
orgId={course.org_id}
|
||||
>
|
||||
<div
|
||||
className="flex items-center space-x-2 absolute z-20 overflow-hidden rounded-xl pt-0 mx-auto justify-center transform w-full h-[60px] bg-gradient-to-t from-transparent from-10% to-gray-900/60">
|
||||
<Link
|
||||
href={getUriWithOrg(
|
||||
props.orgSlug,
|
||||
'/dash/courses/course/' +
|
||||
removeCoursePrefix(props.courseId) +
|
||||
'/content'
|
||||
)}
|
||||
prefetch
|
||||
>
|
||||
<div
|
||||
className="hover:cursor-pointer p-1 px-4 bg-blue-600 rounded-xl items-center flex shadow-2xl"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<FilePenLine size={14} className="text-blue-200 font-bold" />
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={getUriWithOrg(
|
||||
props.orgSlug,
|
||||
'/dash/courses/course/' +
|
||||
removeCoursePrefix(props.courseId) +
|
||||
'/general'
|
||||
)}
|
||||
prefetch
|
||||
>
|
||||
<div
|
||||
className=" hover:cursor-pointer p-1 px-4 bg-gray-800 rounded-xl items-center flex shadow-2xl"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Settings2 size={14} className="text-gray-200 font-bold" />
|
||||
</div>
|
||||
</Link>
|
||||
<EllipsisVertical size={14} className='text-gray-200 font-bold' />
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Course"
|
||||
confirmationMessage="Are you sure you want to delete this course?"
|
||||
dialogTitle={'Delete ' + props.course.name + ' ?'}
|
||||
dialogTrigger={
|
||||
<div
|
||||
className="hover:cursor-pointer p-1 px-4 bg-rose-600 h-fit rounded-xl items-center flex shadow-2xl"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<BookMinus size={14} className="text-rose-200 font-bold" />
|
||||
</div>
|
||||
}
|
||||
functionToExecute={() => props.deleteCourses(props.courseId)}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
<div className="absolute top-2 right-2 z-20">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="p-1 bg-white rounded-full hover:bg-gray-100 transition-colors shadow-md">
|
||||
<MoreVertical size={20} className="text-gray-700" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link prefetch href={getUriWithOrg(orgSlug, `/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/content`)}>
|
||||
<FilePenLine className="mr-2 h-4 w-4" /> Edit Content
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link prefetch href={getUriWithOrg(orgSlug, `/dash/courses/course/${removeCoursePrefix(course.course_uuid)}/general`)}>
|
||||
<Settings2 className="mr-2 h-4 w-4" /> Settings
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Course"
|
||||
confirmationMessage="Are you sure you want to delete this course?"
|
||||
dialogTitle={`Delete ${course.name}?`}
|
||||
dialogTrigger={
|
||||
<button className="w-full text-left flex items-center px-2 py-1 rounded-md text-sm bg-rose-500/10 hover:bg-rose-500/20 transition-colors text-red-600">
|
||||
<BookMinus className="mr-4 h-4 w-4" /> Delete Course
|
||||
</button>
|
||||
}
|
||||
functionToExecute={deleteCourse}
|
||||
status="warning"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</AuthenticatedClientElement>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
function GeneralWrapperStyled({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="max-w-screen-2xl mx-auto px-16 py-5 tracking-tight z-50">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-5 tracking-tight z-50">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GeneralWrapperStyled
|
||||
export default GeneralWrapperStyled
|
||||
205
apps/web/components/ui/dropdown-menu.tsx
Normal file
205
apps/web/components/ui/dropdown-menu.tsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import {
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
DotFilledIcon,
|
||||
} from "@radix-ui/react-icons"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto h-4 w-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<DotFilledIcon className="h-4 w-4 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
))
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"dev": "next dev --turbo",
|
||||
"dev-https": "next dev --experimental-https -p 443",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
"@radix-ui/colors": "^0.1.9",
|
||||
"@radix-ui/react-aspect-ratio": "^1.1.0",
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
||||
"@radix-ui/react-form": "^0.0.3",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-switch": "^1.1.1",
|
||||
|
|
@ -29,6 +30,10 @@
|
|||
"@tiptap/extension-code-block-lowlight": "^2.8.0",
|
||||
"@tiptap/extension-collaboration": "^2.8.0",
|
||||
"@tiptap/extension-collaboration-cursor": "^2.8.0",
|
||||
"@tiptap/extension-table": "^2.8.0",
|
||||
"@tiptap/extension-table-cell": "^2.8.0",
|
||||
"@tiptap/extension-table-header": "^2.8.0",
|
||||
"@tiptap/extension-table-row": "^2.8.0",
|
||||
"@tiptap/extension-youtube": "^2.8.0",
|
||||
"@tiptap/html": "^2.8.0",
|
||||
"@tiptap/pm": "^2.8.0",
|
||||
|
|
@ -69,6 +74,7 @@
|
|||
"tailwind-scrollbar": "^3.1.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"unsplash-js": "^7.0.19",
|
||||
"usehooks-ts": "^3.1.0",
|
||||
"uuid": "^9.0.1",
|
||||
"y-indexeddb": "^9.0.12",
|
||||
"y-prosemirror": "^1.2.12",
|
||||
|
|
|
|||
139
apps/web/pnpm-lock.yaml
generated
139
apps/web/pnpm-lock.yaml
generated
|
|
@ -26,6 +26,9 @@ importers:
|
|||
'@radix-ui/react-dialog':
|
||||
specifier: ^1.1.2
|
||||
version: 1.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-dropdown-menu':
|
||||
specifier: ^2.1.2
|
||||
version: 2.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-form':
|
||||
specifier: ^0.0.3
|
||||
version: 0.0.3(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -62,6 +65,18 @@ importers:
|
|||
'@tiptap/extension-collaboration-cursor':
|
||||
specifier: ^2.8.0
|
||||
version: 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(y-prosemirror@1.2.12(prosemirror-model@1.23.0)(prosemirror-state@1.4.3)(prosemirror-view@1.34.3)(y-protocols@1.0.6(yjs@13.6.19))(yjs@13.6.19))
|
||||
'@tiptap/extension-table':
|
||||
specifier: ^2.8.0
|
||||
version: 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)
|
||||
'@tiptap/extension-table-cell':
|
||||
specifier: ^2.8.0
|
||||
version: 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
|
||||
'@tiptap/extension-table-header':
|
||||
specifier: ^2.8.0
|
||||
version: 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
|
||||
'@tiptap/extension-table-row':
|
||||
specifier: ^2.8.0
|
||||
version: 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
|
||||
'@tiptap/extension-youtube':
|
||||
specifier: ^2.8.0
|
||||
version: 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
|
||||
|
|
@ -182,6 +197,9 @@ importers:
|
|||
unsplash-js:
|
||||
specifier: ^7.0.19
|
||||
version: 7.0.19
|
||||
usehooks-ts:
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0(react@18.3.1)
|
||||
uuid:
|
||||
specifier: ^9.0.1
|
||||
version: 9.0.1
|
||||
|
|
@ -963,6 +981,19 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-dropdown-menu@2.1.2':
|
||||
resolution: {integrity: sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-focus-guards@1.1.1':
|
||||
resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
|
||||
peerDependencies:
|
||||
|
|
@ -1034,6 +1065,19 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-menu@2.1.2':
|
||||
resolution: {integrity: sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-popper@1.2.0':
|
||||
resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
|
||||
peerDependencies:
|
||||
|
|
@ -1554,6 +1598,27 @@ packages:
|
|||
peerDependencies:
|
||||
'@tiptap/core': ^2.7.0
|
||||
|
||||
'@tiptap/extension-table-cell@2.8.0':
|
||||
resolution: {integrity: sha512-IZpxONWyOd474L8+k4bHrFNRhbsl9eRwbNs5O877JkVFItc2WUz1DIhbJzjmBRsqExtWQJuOsiqWFab1kpiwGQ==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.7.0
|
||||
|
||||
'@tiptap/extension-table-header@2.8.0':
|
||||
resolution: {integrity: sha512-B67A96yMQlG96IFzZBc7D5dnn7O29hcjuDLtjyZkKvU5D/RlFKPMmC9nVphCV3CnbkvEOZUdK9pNaOpen64naw==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.7.0
|
||||
|
||||
'@tiptap/extension-table-row@2.8.0':
|
||||
resolution: {integrity: sha512-Iezej6l7X+WqKzGLmCgAwmpL+QsfjFv1g8yVH5d0/3Pkcj3G9nDn+GSm4bZnbfYFyqInHG94PZ5PMReiALrJtA==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.7.0
|
||||
|
||||
'@tiptap/extension-table@2.8.0':
|
||||
resolution: {integrity: sha512-dm9CitjacXyJuE5SZfV2lUc3uOiP2sxo6fygIzMz7iuxHqQueyONWG+TBkK7HjqzXOiMPsvOf/25NazzIG8HMg==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.7.0
|
||||
'@tiptap/pm': ^2.7.0
|
||||
|
||||
'@tiptap/extension-text-style@2.8.0':
|
||||
resolution: {integrity: sha512-jJp0vcZ2Ty7RvIL0VU6dm1y+fTfXq1lN2GwtYzYM0ueFuESa+Qo8ticYOImyWZ3wGJGVrjn7OV9r0ReW0/NYkQ==}
|
||||
peerDependencies:
|
||||
|
|
@ -2866,6 +2931,9 @@ packages:
|
|||
lodash-es@4.17.21:
|
||||
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
|
||||
|
||||
lodash.debounce@4.0.8:
|
||||
resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
|
||||
|
||||
lodash.merge@4.6.2:
|
||||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||
|
||||
|
|
@ -3876,6 +3944,12 @@ packages:
|
|||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
|
||||
usehooks-ts@3.1.0:
|
||||
resolution: {integrity: sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==}
|
||||
engines: {node: '>=16.15.0'}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17 || ^18
|
||||
|
||||
util-deprecate@1.0.2:
|
||||
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||
|
||||
|
|
@ -4788,6 +4862,21 @@ snapshots:
|
|||
'@types/react': 18.2.74
|
||||
'@types/react-dom': 18.2.23
|
||||
|
||||
'@radix-ui/react-dropdown-menu@2.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.0
|
||||
'@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-context': 1.1.1(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-id': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-menu': 2.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.2.74
|
||||
'@types/react-dom': 18.2.23
|
||||
|
||||
'@radix-ui/react-focus-guards@1.1.1(@types/react@18.2.74)(react@18.3.1)':
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
|
|
@ -4849,6 +4938,32 @@ snapshots:
|
|||
'@types/react': 18.2.74
|
||||
'@types/react-dom': 18.2.23
|
||||
|
||||
'@radix-ui/react-menu@2.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.0
|
||||
'@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-context': 1.1.1(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-direction': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-id': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-popper': 1.2.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-portal': 1.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-slot': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.74)(react@18.3.1)
|
||||
aria-hidden: 1.2.4
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
react-remove-scroll: 2.6.0(@types/react@18.2.74)(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.2.74
|
||||
'@types/react-dom': 18.2.23
|
||||
|
||||
'@radix-ui/react-popper@1.2.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -5410,6 +5525,23 @@ snapshots:
|
|||
dependencies:
|
||||
'@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
|
||||
|
||||
'@tiptap/extension-table-cell@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
|
||||
|
||||
'@tiptap/extension-table-header@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
|
||||
|
||||
'@tiptap/extension-table-row@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
|
||||
|
||||
'@tiptap/extension-table@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
|
||||
'@tiptap/pm': 2.8.0
|
||||
|
||||
'@tiptap/extension-text-style@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
|
||||
dependencies:
|
||||
'@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
|
||||
|
|
@ -6979,6 +7111,8 @@ snapshots:
|
|||
|
||||
lodash-es@4.17.21: {}
|
||||
|
||||
lodash.debounce@4.0.8: {}
|
||||
|
||||
lodash.merge@4.6.2: {}
|
||||
|
||||
lodash@4.17.21: {}
|
||||
|
|
@ -8095,6 +8229,11 @@ snapshots:
|
|||
dependencies:
|
||||
react: 18.3.1
|
||||
|
||||
usehooks-ts@3.1.0(react@18.3.1):
|
||||
dependencies:
|
||||
lodash.debounce: 4.0.8
|
||||
react: 18.3.1
|
||||
|
||||
util-deprecate@1.0.2: {}
|
||||
|
||||
uuid@8.3.2: {}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,19 @@ export async function unLinkUserToUserGroup(
|
|||
return res
|
||||
}
|
||||
|
||||
export async function updateUserGroup(
|
||||
usergroup_id: number,
|
||||
access_token: string,
|
||||
data: any
|
||||
) {
|
||||
const result: any = await fetch(
|
||||
`${getAPIUrl()}usergroups/${usergroup_id}`,
|
||||
RequestBodyWithAuthHeader('PUT', data, null, access_token)
|
||||
)
|
||||
const res = await getResponseMetadata(result)
|
||||
return res
|
||||
}
|
||||
|
||||
export async function deleteUserGroup(
|
||||
usergroup_id: number,
|
||||
access_token: string
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue