feat: move community supabase request to api layer (#612)
* feat: move community supabase request to api layer * chore: pr review checkpoint * chore: PR fixes * feat: implement role-based authorization middleware and align the community features with the developer guide. - Added role-based authorization middleware for organization and course membership checks, including `orgMemberMiddleware`, `orgTeamMemberMiddleware`, and `courseMemberMiddleware`. - Introduced route-specific middleware for comment and question authorization, ensuring only authors or team members can modify content. - Updated community routes to utilize the new middleware for enhanced security and access control. - Refactored community services to streamline upvote functionality and improve error handling. - Enhanced UI components for community interactions, including new comment and question pages, and improved state management for user actions. - Updated documentation to reflect new middleware usage and best practices for authorization in the API layer. * feat: enhance course and organization routes with middleware for improved access control - Added `courseMemberMiddleware` to course download and clone routes to enforce membership checks. - Updated lesson route to include `courseMemberMiddleware` for PDF downloads. - Integrated `orgMemberMiddleware` into organization routes for team and audience access, ensuring only authorized members can retrieve data. - Refactored lesson and organization routes for consistency and clarity in middleware usage. * chore: streamline dashboard and API development scripts in package.json - Consolidated dashboard and API development commands to include all relevant filters in a single line for improved clarity and ease of use. - Removed redundant full command variants to simplify the script section. --------- Co-authored-by: Rotimi Best <best@classroomio.com>
This commit is contained in:
Adeyemi Adetunji
co-authored by
Rotimi Best
Rotimi Best
parent
9fb6c7cbaa
commit
bc9e3b41ae
@@ -17,6 +17,7 @@ import { dashAnalyticsRouter } from '@api/routes/dash';
|
||||
import { mediaRouter } from '@api/routes/media';
|
||||
import { onboardingRouter } from '@api/routes/onboarding';
|
||||
import { organizationRouter } from '@api/routes/organization';
|
||||
import { communityRouter } from '@api/routes/community';
|
||||
|
||||
// Create Hono app with chaining for RPC support
|
||||
export const app = new Hono()
|
||||
@@ -77,6 +78,7 @@ export const app = new Hono()
|
||||
.route('/media', mediaRouter)
|
||||
.route('/organization', organizationRouter)
|
||||
.route('/dash', dashAnalyticsRouter)
|
||||
.route('/community', communityRouter)
|
||||
|
||||
// Error handling
|
||||
.onError((err, c) => {
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Context, Next } from 'hono';
|
||||
|
||||
import { ErrorCodes } from '@api/utils/errors';
|
||||
import { isUserCourseMember } from '@cio/db/queries/group';
|
||||
|
||||
/**
|
||||
* Middleware to check if the authenticated user is a member of a course's group
|
||||
* Requires authMiddleware to be applied first
|
||||
* Extracts courseId from request params, query, or body
|
||||
*/
|
||||
export const courseMemberMiddleware = async (c: Context, next: Next) => {
|
||||
try {
|
||||
const user = c.get('user');
|
||||
if (!user) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Unauthorized',
|
||||
code: 'UNAUTHORIZED'
|
||||
},
|
||||
401
|
||||
);
|
||||
}
|
||||
|
||||
// Try to get courseId from params or query
|
||||
// Note: Body parsing should happen after validation middleware
|
||||
const courseId = c.req.param('courseId') || c.req.query('courseId');
|
||||
|
||||
if (!courseId) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Course ID is required',
|
||||
code: 'COURSE_ID_REQUIRED'
|
||||
},
|
||||
400
|
||||
);
|
||||
}
|
||||
|
||||
const isMember = await isUserCourseMember(courseId, user.id);
|
||||
if (!isMember) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'You must be a member of this course to perform this action',
|
||||
code: ErrorCodes.ORG_TEAM_NOT_AUTHORIZED
|
||||
},
|
||||
403
|
||||
);
|
||||
}
|
||||
|
||||
await next();
|
||||
} catch (error) {
|
||||
console.error('Error in courseMemberMiddleware:', error);
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Failed to verify course membership',
|
||||
code: 'COURSE_MEMBER_CHECK_FAILED'
|
||||
},
|
||||
500
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Context, Next } from 'hono';
|
||||
|
||||
import { ErrorCodes } from '@api/utils/errors';
|
||||
import { isUserOrgMember } from '@cio/db/queries/organization';
|
||||
|
||||
/**
|
||||
* Middleware to check if the authenticated user is a member of the organization
|
||||
* Requires authMiddleware to be applied first
|
||||
* Expects orgId in the 'cio-org-id' header
|
||||
*/
|
||||
export const orgMemberMiddleware = async (c: Context, next: Next) => {
|
||||
try {
|
||||
const user = c.get('user');
|
||||
if (!user) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Unauthorized',
|
||||
code: 'UNAUTHORIZED'
|
||||
},
|
||||
401
|
||||
);
|
||||
}
|
||||
|
||||
const orgId = c.req.header('cio-org-id');
|
||||
|
||||
if (!orgId) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Organization ID is required',
|
||||
code: 'ORG_ID_REQUIRED'
|
||||
},
|
||||
400
|
||||
);
|
||||
}
|
||||
|
||||
const isMember = await isUserOrgMember(orgId, user.id);
|
||||
if (!isMember) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'UNAUTHORIZED',
|
||||
code: 'UNAUTHORIZED'
|
||||
},
|
||||
403
|
||||
);
|
||||
}
|
||||
|
||||
await next();
|
||||
} catch (error) {
|
||||
console.error('Error in orgMemberMiddleware:', error);
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'INTERNAL_ERROR',
|
||||
code: 'INTERNAL_ERROR'
|
||||
},
|
||||
500
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Context, Next } from 'hono';
|
||||
|
||||
import { ErrorCodes } from '@api/utils/errors';
|
||||
import { isUserOrgTeamMember } from '@cio/db/queries/organization';
|
||||
|
||||
/**
|
||||
* Middleware to check if the authenticated user is a team member (ADMIN or TUTOR) of the organization
|
||||
* Requires authMiddleware to be applied first
|
||||
* Expects orgId in the 'cio-org-id' header
|
||||
*/
|
||||
export const orgTeamMemberMiddleware = async (c: Context, next: Next) => {
|
||||
try {
|
||||
const user = c.get('user');
|
||||
if (!user) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Unauthorized',
|
||||
code: 'UNAUTHORIZED'
|
||||
},
|
||||
401
|
||||
);
|
||||
}
|
||||
|
||||
const orgId = c.req.header('cio-org-id');
|
||||
|
||||
if (!orgId) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Organization ID is required',
|
||||
code: 'ORG_ID_REQUIRED'
|
||||
},
|
||||
400
|
||||
);
|
||||
}
|
||||
|
||||
const isTeamMember = await isUserOrgTeamMember(orgId, user.id);
|
||||
if (!isTeamMember) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Only organization team members (admins or tutors) can perform this action',
|
||||
code: ErrorCodes.ORG_TEAM_NOT_AUTHORIZED
|
||||
},
|
||||
403
|
||||
);
|
||||
}
|
||||
|
||||
await next();
|
||||
} catch (error) {
|
||||
console.error('Error in orgTeamMemberMiddleware:', error);
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Failed to verify organization team member status',
|
||||
code: 'ORG_TEAM_MEMBER_CHECK_FAILED'
|
||||
},
|
||||
500
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,175 @@
|
||||
import {
|
||||
ZCommunityComment,
|
||||
ZCommunityCommentDelete,
|
||||
ZCommunityQuestion,
|
||||
ZCommunityQuestionUpdate,
|
||||
ZCommunityQuestions,
|
||||
ZGetCommunity,
|
||||
ZGetCommunityCommentQuestionId,
|
||||
ZNewCommunityQuestion,
|
||||
ZUpvotePost,
|
||||
ZUpvotePostParam
|
||||
} from '@cio/utils/validation/community';
|
||||
import {
|
||||
createComment,
|
||||
createQuestion,
|
||||
deleteComment,
|
||||
deleteCommentsByQuestionId,
|
||||
deleteQuestion,
|
||||
editQuestion,
|
||||
fetchCommunityQuestion,
|
||||
fetchCommunityQuestions,
|
||||
upvote
|
||||
} from '@api/services/community';
|
||||
|
||||
import { Hono } from '@api/utils/hono';
|
||||
import { authMiddleware } from '@api/middlewares/auth';
|
||||
import { commentAuthorOrTeamMiddleware } from './middlewares/comment-author-or-team';
|
||||
import { handleError } from '@api/utils/errors';
|
||||
import { orgMemberMiddleware } from '@api/middlewares/org-member';
|
||||
import { orgTeamMemberMiddleware } from '@api/middlewares/org-team-member';
|
||||
import { questionAuthorOrTeamMiddleware } from './middlewares/question-author-or-team';
|
||||
import { zValidator } from '@hono/zod-validator';
|
||||
|
||||
export const communityRouter = new Hono()
|
||||
.get('/', authMiddleware, orgMemberMiddleware, zValidator('query', ZCommunityQuestions), async (c) => {
|
||||
try {
|
||||
const { orgId } = c.req.valid('query');
|
||||
|
||||
const result = await fetchCommunityQuestions(orgId);
|
||||
|
||||
return c.json({ success: true, data: result }, 200);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to load community posts');
|
||||
}
|
||||
})
|
||||
.get('/:slug', authMiddleware, orgMemberMiddleware, zValidator('param', ZCommunityQuestion), async (c) => {
|
||||
try {
|
||||
const { slug } = c.req.valid('param');
|
||||
|
||||
const result = await fetchCommunityQuestion({ slug });
|
||||
|
||||
return c.json({ success: true, data: result }, 200);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to load community post');
|
||||
}
|
||||
})
|
||||
.post('/', authMiddleware, orgMemberMiddleware, zValidator('json', ZNewCommunityQuestion), async (c) => {
|
||||
try {
|
||||
const { title, body, courseId, organizationId, authorProfileId, votes, slug } = c.req.valid('json');
|
||||
|
||||
const result = await createQuestion({
|
||||
title,
|
||||
body,
|
||||
courseId,
|
||||
organizationId,
|
||||
authorProfileId,
|
||||
votes,
|
||||
slug
|
||||
});
|
||||
|
||||
return c.json({ success: true, data: result }, 201);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to create community post');
|
||||
}
|
||||
})
|
||||
.put(
|
||||
'/:id',
|
||||
authMiddleware,
|
||||
questionAuthorOrTeamMiddleware,
|
||||
zValidator('param', ZGetCommunity),
|
||||
zValidator('json', ZCommunityQuestionUpdate),
|
||||
async (c) => {
|
||||
try {
|
||||
const { id } = c.req.valid('param');
|
||||
const { title, body, courseId } = c.req.valid('json');
|
||||
|
||||
const result = await editQuestion({ id, title, body, courseId });
|
||||
|
||||
return c.json({ success: true, data: result }, 200);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to update community post');
|
||||
}
|
||||
}
|
||||
)
|
||||
.delete('/:id', authMiddleware, questionAuthorOrTeamMiddleware, zValidator('param', ZGetCommunity), async (c) => {
|
||||
try {
|
||||
const { id } = c.req.valid('param');
|
||||
|
||||
const result = await deleteQuestion({ id });
|
||||
|
||||
return c.json({ success: true, data: result }, 200);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to delete community post');
|
||||
}
|
||||
})
|
||||
|
||||
.post(
|
||||
'/:id/comment',
|
||||
authMiddleware,
|
||||
orgMemberMiddleware,
|
||||
zValidator('param', ZGetCommunity),
|
||||
zValidator('json', ZCommunityComment),
|
||||
async (c) => {
|
||||
try {
|
||||
const { id } = c.req.valid('param');
|
||||
console.log('question id', id);
|
||||
const { body, authorProfileId, votes } = c.req.valid('json');
|
||||
|
||||
const result = await createComment({
|
||||
body,
|
||||
questionId: id,
|
||||
authorProfileId,
|
||||
votes
|
||||
});
|
||||
|
||||
return c.json({ success: true, data: result }, 201);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to submit comment');
|
||||
}
|
||||
}
|
||||
)
|
||||
.post(
|
||||
'/:id/upvote',
|
||||
authMiddleware,
|
||||
orgMemberMiddleware,
|
||||
zValidator('param', ZUpvotePostParam),
|
||||
zValidator('json', ZUpvotePost),
|
||||
async (c) => {
|
||||
try {
|
||||
const { id } = c.req.valid('param');
|
||||
const { isQuestion } = c.req.valid('json');
|
||||
|
||||
const result = await upvote({
|
||||
id,
|
||||
isQuestion
|
||||
});
|
||||
|
||||
return c.json({ success: true, data: result }, 200);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to upvote post');
|
||||
}
|
||||
}
|
||||
)
|
||||
.delete(
|
||||
'/:id/comment',
|
||||
authMiddleware,
|
||||
commentAuthorOrTeamMiddleware,
|
||||
zValidator('param', ZCommunityCommentDelete),
|
||||
async (c) => {
|
||||
const { id } = c.req.valid('param');
|
||||
const result = await deleteComment({ id });
|
||||
return c.json({ success: true, data: result }, 200);
|
||||
}
|
||||
)
|
||||
.delete(
|
||||
'/:questionId/comments',
|
||||
authMiddleware,
|
||||
orgTeamMemberMiddleware,
|
||||
zValidator('param', ZGetCommunityCommentQuestionId),
|
||||
async (c) => {
|
||||
const { questionId } = c.req.valid('param');
|
||||
const result = await deleteCommentsByQuestionId({ questionId });
|
||||
return c.json({ success: true, data: result }, 200);
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
export * from './community';
|
||||
@@ -0,0 +1,81 @@
|
||||
import { Context, Next } from 'hono';
|
||||
|
||||
import { ErrorCodes } from '@api/utils/errors';
|
||||
import { getCommentAuthorAndCourse } from '@cio/db/queries/community';
|
||||
import { isUserCourseTeamMember } from '@cio/db/queries/group';
|
||||
|
||||
/**
|
||||
* Middleware to check if user is comment author OR tutor/admin in course
|
||||
* Requires authMiddleware to be applied first
|
||||
* Expects comment ID in route params as 'id'
|
||||
*/
|
||||
export const commentAuthorOrTeamMiddleware = async (c: Context, next: Next) => {
|
||||
try {
|
||||
const user = c.get('user');
|
||||
if (!user) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Unauthorized',
|
||||
code: 'UNAUTHORIZED'
|
||||
},
|
||||
401
|
||||
);
|
||||
}
|
||||
|
||||
const commentId = c.req.param('id');
|
||||
if (!commentId) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Comment ID is required',
|
||||
code: 'COMMENT_ID_REQUIRED'
|
||||
},
|
||||
400
|
||||
);
|
||||
}
|
||||
|
||||
const comment = await getCommentAuthorAndCourse(commentId);
|
||||
if (!comment) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Comment not found',
|
||||
code: ErrorCodes.COMMUNITY_QUESTION_NOT_FOUND
|
||||
},
|
||||
404
|
||||
);
|
||||
}
|
||||
|
||||
const isAuthor = comment.authorId === user.id;
|
||||
if (isAuthor) {
|
||||
await next();
|
||||
return;
|
||||
}
|
||||
|
||||
const isTeamMember = await isUserCourseTeamMember(comment.courseId, user.id);
|
||||
|
||||
if (!isTeamMember) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Only the author or course team members can perform this action',
|
||||
code: ErrorCodes.ORG_TEAM_NOT_AUTHORIZED
|
||||
},
|
||||
403
|
||||
);
|
||||
}
|
||||
|
||||
await next();
|
||||
} catch (error) {
|
||||
console.error('Error in commentAuthorOrTeamMiddleware:', error);
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Failed to verify comment authorization',
|
||||
code: 'COMMENT_AUTH_CHECK_FAILED'
|
||||
},
|
||||
500
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,76 @@
|
||||
import { Context, Next } from 'hono';
|
||||
|
||||
import { ErrorCodes } from '@api/utils/errors';
|
||||
import { getQuestionAuthorAndCourse } from '@cio/db/queries/community';
|
||||
import { isUserCourseTeamMember } from '@cio/db/queries/group';
|
||||
|
||||
/**
|
||||
* Middleware to check if user is question author OR tutor/admin in course
|
||||
* Requires authMiddleware to be applied first
|
||||
* Expects question ID in route params as 'id'
|
||||
*/
|
||||
export const questionAuthorOrTeamMiddleware = async (c: Context, next: Next) => {
|
||||
try {
|
||||
const user = c.get('user');
|
||||
if (!user) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Unauthorized',
|
||||
code: 'UNAUTHORIZED'
|
||||
},
|
||||
401
|
||||
);
|
||||
}
|
||||
|
||||
const questionId = c.req.param('id');
|
||||
if (!questionId) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Question ID is required',
|
||||
code: 'QUESTION_ID_REQUIRED'
|
||||
},
|
||||
400
|
||||
);
|
||||
}
|
||||
|
||||
const question = await getQuestionAuthorAndCourse(questionId);
|
||||
if (!question) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Question not found',
|
||||
code: ErrorCodes.COMMUNITY_QUESTION_NOT_FOUND
|
||||
},
|
||||
404
|
||||
);
|
||||
}
|
||||
|
||||
const isAuthor = question.authorId === user.id;
|
||||
const isTeamMember = await isUserCourseTeamMember(question.courseId, user.id);
|
||||
|
||||
if (!isAuthor && !isTeamMember) {
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Only the author or course team members can perform this action',
|
||||
code: ErrorCodes.ORG_TEAM_NOT_AUTHORIZED
|
||||
},
|
||||
403
|
||||
);
|
||||
}
|
||||
|
||||
await next();
|
||||
} catch (error) {
|
||||
console.error('Error in questionAuthorOrTeamMiddleware:', error);
|
||||
return c.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Failed to verify question authorization',
|
||||
code: 'QUESTION_AUTH_CHECK_FAILED'
|
||||
},
|
||||
500
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -9,17 +9,21 @@ import {
|
||||
import { Hono } from '@api/utils/hono';
|
||||
import { authMiddleware } from '@api/middlewares/auth';
|
||||
import { cloneCourse } from '@api/services/course/clone';
|
||||
import { courseMemberMiddleware } from '@api/middlewares/course-member';
|
||||
import { generateCertificate } from '@api/utils/certificate';
|
||||
import { generateCoursePdf } from '@api/utils/course';
|
||||
import { handleError } from '@api/utils/errors';
|
||||
import { katexRouter } from '@api/routes/course/katex';
|
||||
import { lessonRouter } from '@api/routes/course/lesson';
|
||||
import { orgMemberMiddleware } from '@api/middlewares/org-member';
|
||||
import { presignRouter } from '@api/routes/course/presign';
|
||||
import { zValidator } from '@hono/zod-validator';
|
||||
|
||||
export const courseRouter = new Hono()
|
||||
.post(
|
||||
'/:courseId/download/certificate',
|
||||
authMiddleware,
|
||||
courseMemberMiddleware,
|
||||
zValidator('param', ZCourseDownloadParam),
|
||||
zValidator('json', ZCertificateDownload),
|
||||
async (c) => {
|
||||
@@ -42,6 +46,8 @@ export const courseRouter = new Hono()
|
||||
)
|
||||
.post(
|
||||
'/:courseId/download/content',
|
||||
authMiddleware,
|
||||
courseMemberMiddleware,
|
||||
zValidator('param', ZCourseDownloadParam),
|
||||
zValidator('json', ZCourseDownloadContent),
|
||||
async (c) => {
|
||||
@@ -64,6 +70,7 @@ export const courseRouter = new Hono()
|
||||
.post(
|
||||
'/:courseId/clone',
|
||||
authMiddleware,
|
||||
orgMemberMiddleware,
|
||||
zValidator('param', ZCourseCloneParam),
|
||||
zValidator('json', ZCourseClone),
|
||||
async (c) => {
|
||||
@@ -90,5 +97,5 @@ export const courseRouter = new Hono()
|
||||
}
|
||||
)
|
||||
.route('/katex', katexRouter)
|
||||
.route('/lesson', lessonRouter)
|
||||
.route('/:courseId/lesson', lessonRouter)
|
||||
.route('/presign', presignRouter);
|
||||
|
||||
@@ -1,20 +1,26 @@
|
||||
import { Hono } from '@api/utils/hono';
|
||||
import { ZLessonDownloadContent } from '@cio/utils/validation/course';
|
||||
import { courseMemberMiddleware } from '@api/middlewares/course-member';
|
||||
import { generateLessonPdf } from '@api/utils/lesson';
|
||||
import { zValidator } from '@hono/zod-validator';
|
||||
|
||||
export const lessonRouter = new Hono().post('/download/pdf', zValidator('json', ZLessonDownloadContent), async (c) => {
|
||||
const validatedData = c.req.valid('json');
|
||||
export const lessonRouter = new Hono().post(
|
||||
'/download/pdf',
|
||||
courseMemberMiddleware,
|
||||
zValidator('json', ZLessonDownloadContent),
|
||||
async (c) => {
|
||||
const validatedData = c.req.valid('json');
|
||||
|
||||
const pdfBuffer = await generateLessonPdf(validatedData);
|
||||
const pdfBuffer = await generateLessonPdf(validatedData);
|
||||
|
||||
c.header('Content-Type', 'application/pdf');
|
||||
return c.body(
|
||||
new ReadableStream({
|
||||
start(controller) {
|
||||
controller.enqueue(pdfBuffer);
|
||||
controller.close();
|
||||
}
|
||||
})
|
||||
);
|
||||
});
|
||||
c.header('Content-Type', 'application/pdf');
|
||||
return c.body(
|
||||
new ReadableStream({
|
||||
start(controller) {
|
||||
controller.enqueue(pdfBuffer);
|
||||
controller.close();
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
@@ -3,11 +3,13 @@ import { ZDashStats } from '@cio/utils/validation/dash';
|
||||
import { authMiddleware } from '@api/middlewares/auth';
|
||||
import { getOrganisationAnalytics } from '@api/services/dash';
|
||||
import { handleError } from '@api/utils/errors';
|
||||
import { orgMemberMiddleware } from '@api/middlewares/org-member';
|
||||
import { zValidator } from '@hono/zod-validator';
|
||||
|
||||
export const dashAnalyticsRouter = new Hono().get(
|
||||
'/stats',
|
||||
authMiddleware,
|
||||
orgMemberMiddleware,
|
||||
zValidator('query', ZDashStats),
|
||||
async (c) => {
|
||||
try {
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { Hono } from '@api/utils/hono';
|
||||
import { ZDeliverEmail } from '@cio/utils/validation/mail';
|
||||
import { apiKeyMiddleware } from '@api/middlewares/api-key';
|
||||
import { deliverEmail } from '@cio/email';
|
||||
import { handleError } from '@api/utils/errors';
|
||||
import { zValidator } from '@hono/zod-validator';
|
||||
|
||||
export const mailRouter = new Hono().post('/', zValidator('json', ZDeliverEmail), async (c) => {
|
||||
export const mailRouter = new Hono().post('/', apiKeyMiddleware, zValidator('json', ZDeliverEmail), async (c) => {
|
||||
const validatedData = c.req.valid('json');
|
||||
|
||||
try {
|
||||
|
||||
@@ -34,6 +34,7 @@ import { authMiddleware } from '@api/middlewares/auth';
|
||||
import { authOrApiKeyMiddleware } from '@api/middlewares/auth-or-api-key';
|
||||
import { handleError } from '@api/utils/errors';
|
||||
import { orgAdminMiddleware } from '@api/middlewares/org-admin';
|
||||
import { orgMemberMiddleware } from '@api/middlewares/org-member';
|
||||
import { zValidator } from '@hono/zod-validator';
|
||||
|
||||
export const organizationRouter = new Hono()
|
||||
@@ -66,7 +67,7 @@ export const organizationRouter = new Hono()
|
||||
* Gets organization team members (non-students)
|
||||
* Requires authentication
|
||||
*/
|
||||
.get('/:orgId/team', authMiddleware, zValidator('param', ZGetOrganizationTeam), async (c) => {
|
||||
.get('/:orgId/team', authMiddleware, orgMemberMiddleware, zValidator('param', ZGetOrganizationTeam), async (c) => {
|
||||
try {
|
||||
const { orgId } = c.req.valid('param');
|
||||
const team = await getOrgTeam(orgId);
|
||||
@@ -144,22 +145,28 @@ export const organizationRouter = new Hono()
|
||||
* Gets organization audience (students)
|
||||
* Requires authentication
|
||||
*/
|
||||
.get('/:orgId/audience', authMiddleware, zValidator('param', ZGetOrganizationAudience), async (c) => {
|
||||
try {
|
||||
const { orgId } = c.req.valid('param');
|
||||
const audience = await getOrgAudience(orgId);
|
||||
.get(
|
||||
'/:orgId/audience',
|
||||
authMiddleware,
|
||||
orgMemberMiddleware,
|
||||
zValidator('param', ZGetOrganizationAudience),
|
||||
async (c) => {
|
||||
try {
|
||||
const { orgId } = c.req.valid('param');
|
||||
const audience = await getOrgAudience(orgId);
|
||||
|
||||
return c.json(
|
||||
{
|
||||
success: true,
|
||||
data: audience
|
||||
},
|
||||
200
|
||||
);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to fetch organization audience');
|
||||
return c.json(
|
||||
{
|
||||
success: true,
|
||||
data: audience
|
||||
},
|
||||
200
|
||||
);
|
||||
} catch (error) {
|
||||
return handleError(c, error, 'Failed to fetch organization audience');
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
/**
|
||||
* GET /organization/courses
|
||||
* Gets courses by organization siteName
|
||||
@@ -305,6 +312,7 @@ export const organizationRouter = new Hono()
|
||||
.put(
|
||||
'/:orgId',
|
||||
authMiddleware,
|
||||
orgAdminMiddleware,
|
||||
zValidator('param', ZUpdateOrganizationParam),
|
||||
zValidator('json', ZUpdateOrganization),
|
||||
async (c) => {
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
import { AppError, ErrorCodes } from '@api/utils/errors';
|
||||
import type { TCommunityAnswer, TCommunityQuestion, TCourse } from '@db/types';
|
||||
import {
|
||||
createCommunityQuestion,
|
||||
deleteCommentById,
|
||||
deleteCommentByQuestionId,
|
||||
deleteQuestionByQuestionId,
|
||||
editCommunityQuestion,
|
||||
getCommunityQuestion,
|
||||
getCommunityQuestions,
|
||||
submitComment,
|
||||
upvoteAnswer,
|
||||
upvoteQuestion
|
||||
} from '@cio/db/queries/community';
|
||||
|
||||
import { getCoursesByOrgId } from './organization';
|
||||
|
||||
export async function fetchCommunityQuestions(orgId: string): Promise<Partial<TCommunityQuestion>[]> {
|
||||
let discussions: Partial<TCommunityQuestion>[] = [];
|
||||
|
||||
let courses: TCourse[];
|
||||
|
||||
if (orgId) {
|
||||
courses = await getCoursesByOrgId(orgId);
|
||||
} else {
|
||||
throw new AppError(
|
||||
'Organization not found for the given site name',
|
||||
ErrorCodes.COMMUNITY_QUESTIONS_FETCH_FAILED,
|
||||
404
|
||||
);
|
||||
}
|
||||
|
||||
try {
|
||||
const courseIds = courses.map((course) => course.id);
|
||||
discussions = await getCommunityQuestions(courseIds);
|
||||
|
||||
return discussions;
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch community questions:', error);
|
||||
throw new AppError('Failed to fetch community questions', ErrorCodes.COMMUNITY_QUESTIONS_FETCH_FAILED, 500);
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchCommunityQuestion({ slug }: Partial<TCommunityQuestion>) {
|
||||
try {
|
||||
const result = await getCommunityQuestion(slug);
|
||||
|
||||
if (!result) {
|
||||
throw new AppError('Community question not found', ErrorCodes.COMMUNITY_QUESTION_NOT_FOUND, 404);
|
||||
}
|
||||
|
||||
return {
|
||||
id: result.id,
|
||||
title: result.title,
|
||||
body: result.body,
|
||||
votes: result.votes,
|
||||
createdAt: result.createdAt,
|
||||
courseId: result.courseId,
|
||||
courseTitle: result.course.title,
|
||||
slug: result.slug,
|
||||
authorId: result.author.id,
|
||||
authorFullname: result.author.fullname,
|
||||
authorAvatarUrl: result.author.avatarUrl,
|
||||
organizationId: result.organizationId,
|
||||
comments: result.comments
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch community question:', error);
|
||||
if (error instanceof AppError) throw error;
|
||||
throw new AppError('Failed to fetch community question', ErrorCodes.COMMUNITY_QUESTION_NOT_FOUND, 500);
|
||||
}
|
||||
}
|
||||
|
||||
export async function createQuestion({
|
||||
title,
|
||||
body,
|
||||
courseId,
|
||||
organizationId,
|
||||
authorProfileId,
|
||||
votes,
|
||||
slug
|
||||
}: Partial<TCommunityQuestion>) {
|
||||
try {
|
||||
const result = await createCommunityQuestion({
|
||||
title,
|
||||
body,
|
||||
courseId,
|
||||
organizationId,
|
||||
authorProfileId,
|
||||
votes,
|
||||
slug
|
||||
});
|
||||
|
||||
if (!result) {
|
||||
throw new AppError('Failed to create community question', ErrorCodes.ADD_COMMUNITY_QUESTION_FAILED, 404);
|
||||
}
|
||||
|
||||
return {
|
||||
id: result.id,
|
||||
title: result.title,
|
||||
body: result.body,
|
||||
votes: result.votes,
|
||||
createdAt: result.createdAt,
|
||||
courseId: result.courseId,
|
||||
courseTitle: result.title,
|
||||
slug: result.slug,
|
||||
authorId: result.authorId
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Failed to add community question:', error);
|
||||
if (error instanceof AppError) throw error;
|
||||
throw new AppError('Failed to add community question', ErrorCodes.ADD_COMMUNITY_QUESTION_FAILED, 500);
|
||||
}
|
||||
}
|
||||
|
||||
export async function editQuestion({ id, title, body, courseId }: Partial<TCommunityQuestion>) {
|
||||
try {
|
||||
const result = await editCommunityQuestion({ id, title, body, courseId: courseId });
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Failed to update community question:', error);
|
||||
if (error instanceof AppError) throw error;
|
||||
throw new AppError('Failed to update community question', ErrorCodes.UPDATE_COMMUNITY_QUESTION_FAILED, 500);
|
||||
}
|
||||
}
|
||||
|
||||
export async function createComment({ body, questionId, authorProfileId, votes }: Partial<TCommunityAnswer>) {
|
||||
try {
|
||||
const result = await submitComment({ body, questionId, authorProfileId, votes });
|
||||
|
||||
if (!result) {
|
||||
throw new AppError('Comment submission failed', ErrorCodes.COMMENT_SUBMISSION_FAILED, 404);
|
||||
}
|
||||
|
||||
return {
|
||||
id: result.id,
|
||||
body: result.body,
|
||||
votes: result.votes,
|
||||
createdAt: result.createdAt,
|
||||
authorId: result.authorProfileId
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Failed to submit comment:', error);
|
||||
if (error instanceof AppError) throw error;
|
||||
throw new AppError('Failed to submit comment', ErrorCodes.COMMENT_SUBMISSION_FAILED, 500);
|
||||
}
|
||||
}
|
||||
|
||||
export async function upvote({ id, isQuestion }: { id: string | number; isQuestion: boolean }) {
|
||||
try {
|
||||
let result;
|
||||
|
||||
if (isQuestion) {
|
||||
result = await upvoteQuestion({ id: Number(id) });
|
||||
} else {
|
||||
result = await upvoteAnswer({ id: String(id) });
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Failed to upvote:', error);
|
||||
if (error instanceof AppError) throw error;
|
||||
throw new AppError('Failed to upvote', ErrorCodes.UPVOTE_FAILED, 500);
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteQuestion({ id }: Partial<TCommunityQuestion>) {
|
||||
try {
|
||||
// Delete all comments first, then delete the question
|
||||
await deleteCommentByQuestionId(id);
|
||||
const result = await deleteQuestionByQuestionId(id);
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Failed to delete question:', error);
|
||||
if (error instanceof AppError) throw error;
|
||||
throw new AppError('Failed to delete question', ErrorCodes.DELETE_QUESTION_FAILED, 500);
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteComment({ id }: Partial<TCommunityAnswer>) {
|
||||
try {
|
||||
const result = await deleteCommentById(id);
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Failed to delete comment:', error);
|
||||
if (error instanceof AppError) throw error;
|
||||
throw new AppError('Failed to delete comment', ErrorCodes.DELETE_COMMENT_FAILED, 500);
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteCommentsByQuestionId({ questionId }: Partial<TCommunityAnswer>) {
|
||||
try {
|
||||
const result = await deleteCommentByQuestionId(questionId);
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Failed to delete comment:', error);
|
||||
if (error instanceof AppError) throw error;
|
||||
throw new AppError('Failed to delete comment', ErrorCodes.DELETE_COMMENT_FAILED, 500);
|
||||
}
|
||||
}
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
updateOrganizationPlan
|
||||
} from '@cio/db/queries/organization';
|
||||
import {
|
||||
getCoursesById,
|
||||
getCoursesBySiteName,
|
||||
getCoursesBySiteNameForSetup,
|
||||
getExercisesBySiteName,
|
||||
@@ -128,6 +129,23 @@ export async function getCoursesByOrgSiteName(siteName: string) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets courses by organization orgId
|
||||
* @param orgId - The organization orgId
|
||||
* @returns Array of courses
|
||||
*/
|
||||
export async function getCoursesByOrgId(orgId: string) {
|
||||
try {
|
||||
return getCoursesById(orgId);
|
||||
} catch (error) {
|
||||
throw new AppError(
|
||||
error instanceof Error ? error.message : 'Failed to fetch courses',
|
||||
ErrorCodes.COURSES_FETCH_FAILED,
|
||||
500
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets setup data for an organization
|
||||
* @param siteName - The organization site name
|
||||
|
||||
@@ -32,6 +32,16 @@ export const ErrorCodes = {
|
||||
ORG_ANALYTICS_FETCH_FAILED: 'ORG_ANALYTICS_FETCH_FAILED',
|
||||
NO_ORG_ID_PROVIDED: 'NO_ORG_ID_PROVIDED',
|
||||
|
||||
// Community errors
|
||||
UPDATE_COMMUNITY_QUESTION_FAILED: 'UPDATE_COMMUNITY_QUESTION_FAILED',
|
||||
ADD_COMMUNITY_QUESTION_FAILED: 'ADD_COMMUNITY_QUESTION_FAILED',
|
||||
COMMUNITY_QUESTIONS_FETCH_FAILED: 'COMMUNITY_QUESTIONS_FETCH_FAILED',
|
||||
COMMUNITY_QUESTION_NOT_FOUND: 'COMMUNITY_QUESTION_NOT_FOUND',
|
||||
COMMENT_SUBMISSION_FAILED: 'COMMENT_SUBMISSION_FAILED',
|
||||
UPVOTE_FAILED: 'UPVOTE_FAILED',
|
||||
DELETE_COMMENT_FAILED: 'DELETE_COMMENT_FAILED',
|
||||
DELETE_QUESTION_FAILED: 'DELETE_QUESTION_FAILED',
|
||||
|
||||
// Organization errors
|
||||
SITENAME_EXISTS: 'SITENAME_EXISTS',
|
||||
ORG_CREATE_FAILED: 'ORG_CREATE_FAILED',
|
||||
|
||||
@@ -0,0 +1,459 @@
|
||||
import { BaseApiWithErrors, classroomio } from '$lib/utils/services/api';
|
||||
import type {
|
||||
CommunityQuestionSuccess,
|
||||
CommunityQuestionsSuccess,
|
||||
CreateCommentResponse,
|
||||
CreateCommunityQuestionResponse,
|
||||
UpdateQuestionResponse,
|
||||
UpvotePostResponse
|
||||
} from '../utils/types';
|
||||
import { ZCommunityComment, ZCommunityQuestionUpdate, ZCreateCommunityQuestion } from '@cio/utils/validation/community';
|
||||
import { currentOrgPath, currentOrg as currentOrgStore } from '$lib/utils/store/org';
|
||||
|
||||
import type { Course } from '$lib/utils/types';
|
||||
import type { TCreateCommunityQuestion } from '@cio/utils/validation/community';
|
||||
import { courses as coursesStore } from '$features/course/utils/store';
|
||||
import { currentCommunityQuestion } from '../utils/store';
|
||||
import { fetchCourses } from '$lib/utils/services/courses';
|
||||
import generateSlug from '$lib/utils/functions/generateSlug';
|
||||
import { get } from 'svelte/store';
|
||||
import { goto } from '$app/navigation';
|
||||
import { mapZodErrorsToTranslations } from '$lib/utils/validation';
|
||||
import { profile as profileStore } from '$lib/utils/store/user';
|
||||
import { snackbar } from '$features/ui/snackbar/store';
|
||||
|
||||
/**
|
||||
* API class for Organization Community
|
||||
*/
|
||||
class CommunityApi extends BaseApiWithErrors {
|
||||
questions: CommunityQuestionsSuccess['data'] = $state([]);
|
||||
question: CommunityQuestionSuccess['data'] | null = $state(null);
|
||||
courses = $state<Course[]>([]);
|
||||
private coursesFetched = $state(false);
|
||||
isEditMode = $state(false);
|
||||
isEditing = $state(false);
|
||||
isCommenting = $state(false);
|
||||
editContent = $state<{
|
||||
title: string;
|
||||
body: string;
|
||||
courseId: string;
|
||||
}>({
|
||||
title: '',
|
||||
body: '',
|
||||
courseId: ''
|
||||
});
|
||||
comment = $state('');
|
||||
deleteCommentState = $state<{
|
||||
shouldDelete: boolean;
|
||||
commentId: string;
|
||||
}>({
|
||||
shouldDelete: false,
|
||||
commentId: ''
|
||||
});
|
||||
answer = $state<{
|
||||
id: number;
|
||||
body: string;
|
||||
votes: number;
|
||||
createdAt: string;
|
||||
authorId: number;
|
||||
}>({
|
||||
body: '',
|
||||
votes: 0,
|
||||
createdAt: '',
|
||||
authorId: 0,
|
||||
id: 0
|
||||
});
|
||||
|
||||
/**
|
||||
* Fetches community questions for an organization
|
||||
* Handles API call, success/error handling, and navigation
|
||||
* @param orgId Organization ID
|
||||
* @param isLMS Whether this is in LMS context (affects navigation path)
|
||||
*/
|
||||
async fetchCommunityQuestions({ orgId, isLMS = false }: { orgId: string; isLMS?: boolean }) {
|
||||
await this.execute<typeof classroomio.community.$get>({
|
||||
requestFn: () => classroomio.community.$get({ query: { orgId } }),
|
||||
logContext: 'fetching community questions',
|
||||
onSuccess: (response) => {
|
||||
this.questions = response.data;
|
||||
},
|
||||
onError: (result) => {
|
||||
console.error('Error loading community questions:', result);
|
||||
const basePath = isLMS ? '/lms' : get(currentOrgPath);
|
||||
goto(basePath);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches a single community question by slug
|
||||
* Handles API call, success/error handling, navigation, and store updates
|
||||
* @param slug Question slug
|
||||
* @param isLMS Whether this is in LMS context (affects navigation path and store updates)
|
||||
*/
|
||||
async fetchCommunityQuestion({ slug, isLMS = false }: { slug: string; isLMS?: boolean }) {
|
||||
await this.execute<(typeof classroomio.community)[':slug']['$get']>({
|
||||
requestFn: () => classroomio.community[':slug'].$get({ param: { slug } }),
|
||||
logContext: 'fetching community question',
|
||||
onSuccess: (response) => {
|
||||
if (response.data) {
|
||||
this.question = response.data;
|
||||
|
||||
currentCommunityQuestion.set({ title: response.data.title });
|
||||
}
|
||||
},
|
||||
onError: (result) => {
|
||||
console.error(`[${isLMS ? 'LMS' : 'ORG'}] Error loading community`, result);
|
||||
const basePath = isLMS ? '/lms' : get(currentOrgPath);
|
||||
goto(basePath);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a new community question
|
||||
* Handles validation, API call, success/error handling, and navigation
|
||||
* @param fields User-provided fields (title, body, courseId)
|
||||
* @param isLMS Whether this is in LMS context (affects navigation path)
|
||||
*/
|
||||
async createQuestion(fields: TCreateCommunityQuestion, isLMS: boolean = false) {
|
||||
const result = ZCreateCommunityQuestion.safeParse(fields);
|
||||
if (!result.success) {
|
||||
this.errors = mapZodErrorsToTranslations(result.error, 'community');
|
||||
return;
|
||||
}
|
||||
|
||||
const slug = generateSlug(fields.title);
|
||||
const currentOrg = get(currentOrgStore);
|
||||
const profile = get(profileStore);
|
||||
|
||||
if (!currentOrg?.id || !profile?.id) {
|
||||
snackbar.error('snackbar.community.error.missing_context');
|
||||
return;
|
||||
}
|
||||
|
||||
await this.execute<CreateCommunityQuestionResponse>({
|
||||
requestFn: () =>
|
||||
classroomio.community.$post({
|
||||
json: {
|
||||
title: result.data.title,
|
||||
body: result.data.body,
|
||||
courseId: result.data.courseId || '',
|
||||
organizationId: currentOrg.id,
|
||||
authorProfileId: profile.id,
|
||||
votes: 0,
|
||||
slug
|
||||
}
|
||||
}),
|
||||
logContext: 'creating community question',
|
||||
onSuccess: (response) => {
|
||||
const questionData = Array.isArray(response.data) ? response.data[0] : response.data;
|
||||
const questionSlug = questionData?.slug || slug;
|
||||
|
||||
// Show success message
|
||||
snackbar.success('snackbar.community.success.question_submitted');
|
||||
|
||||
// Navigate to the question based on context
|
||||
const basePath = isLMS ? '/lms' : get(currentOrgPath);
|
||||
goto(`${basePath}/community/${questionSlug}`);
|
||||
|
||||
// Mark as successful
|
||||
this.success = true;
|
||||
this.errors = {};
|
||||
},
|
||||
onError: (result) => {
|
||||
console.error('Error creating question:', result);
|
||||
snackbar.error('snackbar.community.error.try_again');
|
||||
if (typeof result !== 'string' && 'error' in result) {
|
||||
this.handleValidationError(result);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a comment for a community question
|
||||
* Handles validation, API call, and success/error handling
|
||||
* Uses this.comment state for the comment body
|
||||
* @param questionId Question ID
|
||||
* @param isLMS Whether this is in LMS context (affects store updates)
|
||||
* @param onSuccess Optional callback to execute on successful comment creation
|
||||
*/
|
||||
async createComment(questionId: number, isLMS: boolean = false, onSuccess?: () => void) {
|
||||
const profile = get(profileStore);
|
||||
if (!profile?.id) {
|
||||
snackbar.error('snackbar.community.error.missing_context');
|
||||
return;
|
||||
}
|
||||
|
||||
const result = ZCommunityComment.safeParse({
|
||||
body: this.comment,
|
||||
authorProfileId: profile.id,
|
||||
votes: 0
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
this.errors = mapZodErrorsToTranslations(result.error, 'community');
|
||||
return;
|
||||
}
|
||||
|
||||
this.isCommenting = true;
|
||||
await this.execute<CreateCommentResponse>({
|
||||
requestFn: () =>
|
||||
classroomio.community[':id'].comment.$post({
|
||||
param: { id: String(questionId) },
|
||||
// @ts-expect-error - the json type is not inferred correctly
|
||||
json: {
|
||||
body: result.data.body,
|
||||
authorProfileId: result.data.authorProfileId,
|
||||
votes: result.data.votes
|
||||
}
|
||||
}),
|
||||
logContext: 'submitting comment',
|
||||
onSuccess: (response) => {
|
||||
if (response.data) {
|
||||
this.answer = response.data;
|
||||
|
||||
// Show success message
|
||||
snackbar.success('snackbar.community.success.comment_submitted');
|
||||
|
||||
// Refetch the question to get updated comments with proper structure
|
||||
if (this.question && this.question.slug) {
|
||||
this.fetchCommunityQuestion({ slug: this.question.slug, isLMS });
|
||||
}
|
||||
|
||||
// Call the onSuccess callback if provided
|
||||
onSuccess?.();
|
||||
}
|
||||
|
||||
// Mark as successful
|
||||
this.success = true;
|
||||
this.errors = {};
|
||||
this.isCommenting = false;
|
||||
},
|
||||
onError: (result) => {
|
||||
console.error('Error creating comment:', result);
|
||||
snackbar.error('snackbar.community.error.comment_failed');
|
||||
if (typeof result !== 'string' && 'error' in result) {
|
||||
this.handleValidationError(result);
|
||||
}
|
||||
this.isCommenting = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Upvotes a post (question or comment)
|
||||
* Handles API call and updates local state with returned vote count
|
||||
* @param id Post ID
|
||||
* @param isQuestion Boolean indicating if it's a question
|
||||
*/
|
||||
async upvotePost({ id, isQuestion }: { id: number | string; isQuestion: boolean }) {
|
||||
await this.execute<UpvotePostResponse>({
|
||||
requestFn: () =>
|
||||
classroomio.community[':id'].upvote.$post({
|
||||
param: { id: id.toString() },
|
||||
// @ts-expect-error - the json type is not inferred correctly
|
||||
json: { isQuestion }
|
||||
}),
|
||||
logContext: 'upvoting post',
|
||||
onSuccess: (response) => {
|
||||
// Update local question state with the vote count returned from backend
|
||||
if (this.question && response.data) {
|
||||
const newVoteCount = response.data.votes;
|
||||
if (isQuestion && String(this.question.id) === String(id)) {
|
||||
this.question.votes = newVoteCount;
|
||||
} else if (!isQuestion) {
|
||||
// Update comment votes
|
||||
this.question.comments = this.question.comments.map((comment) => {
|
||||
if (String(comment.id) === String(id)) {
|
||||
return { ...comment, votes: newVoteCount };
|
||||
}
|
||||
return comment;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
onError: (result) => {
|
||||
console.error('Error upvoting post:', result);
|
||||
snackbar.error('snackbar.community.error.try_again');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates a community question
|
||||
* Handles validation, API call, and success/error handling
|
||||
* @param questionId Question ID
|
||||
* @param fields User-provided fields (title, body, courseId)
|
||||
*/
|
||||
async updateQuestion(questionId: number, fields: { title: string; body: string; courseId?: string }) {
|
||||
const result = ZCommunityQuestionUpdate.safeParse({
|
||||
title: fields.title,
|
||||
body: fields.body,
|
||||
courseId: fields.courseId || ''
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
this.errors = mapZodErrorsToTranslations(result.error, 'community');
|
||||
return;
|
||||
}
|
||||
|
||||
this.isEditing = true;
|
||||
await this.execute<UpdateQuestionResponse>({
|
||||
requestFn: () =>
|
||||
classroomio.community[':id'].$put({
|
||||
param: { id: String(questionId) },
|
||||
// @ts-expect-error - the json type is not inferred correctly
|
||||
json: {
|
||||
title: result.data.title,
|
||||
body: result.data.body,
|
||||
courseId: result.data.courseId
|
||||
}
|
||||
}),
|
||||
logContext: 'updating community question',
|
||||
onSuccess: () => {
|
||||
if (this.question) {
|
||||
this.question = { ...this.question, ...result.data };
|
||||
}
|
||||
|
||||
console.log('this.question', this.question);
|
||||
|
||||
// Show success message
|
||||
snackbar.success('snackbar.community.success.question_updated');
|
||||
|
||||
// Exit edit mode on successful update
|
||||
this.exitEditMode();
|
||||
|
||||
// Mark as successful
|
||||
this.success = true;
|
||||
this.errors = {};
|
||||
this.isEditing = false;
|
||||
},
|
||||
onError: (result) => {
|
||||
console.error('Error updating question:', result);
|
||||
snackbar.error('snackbar.community.error.update_failed');
|
||||
if (typeof result !== 'string' && 'error' in result) {
|
||||
this.handleValidationError(result);
|
||||
}
|
||||
this.isEditing = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Enters edit mode and initializes edit content with question data
|
||||
* @param question Question data to populate edit form
|
||||
*/
|
||||
enterEditMode(question: { title: string; body: string; courseId?: string }) {
|
||||
this.isEditMode = true;
|
||||
this.editContent = {
|
||||
title: question.title,
|
||||
body: question.body,
|
||||
courseId: question.courseId || ''
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Exits edit mode and resets edit content
|
||||
*/
|
||||
exitEditMode() {
|
||||
this.isEditMode = false;
|
||||
this.editContent = {
|
||||
title: '',
|
||||
body: '',
|
||||
courseId: ''
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a question by its ID (including all comments)
|
||||
* Handles API call, success/error handling, and navigation
|
||||
* @param questionId Question ID
|
||||
* @param isLMS Whether this is in LMS context (affects navigation path)
|
||||
*/
|
||||
async deleteQuestion(questionId: string, isLMS: boolean = false) {
|
||||
await this.execute<(typeof classroomio.community)[':id']['$delete']>({
|
||||
requestFn: () => classroomio.community[':id'].$delete({ param: { id: questionId } }),
|
||||
logContext: 'deleting community question',
|
||||
onSuccess: () => {
|
||||
// Show success message
|
||||
snackbar.success('snackbar.community.success.success_delete');
|
||||
|
||||
// Navigate back to community page based on context
|
||||
const basePath = isLMS ? '/lms' : get(currentOrgPath);
|
||||
goto(`${basePath}/community`);
|
||||
|
||||
// Mark as successful
|
||||
this.success = true;
|
||||
},
|
||||
onError: (result) => {
|
||||
console.error('Error deleting question:', result);
|
||||
snackbar.error('snackbar.community.error.delete_failed');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes a comment by its ID
|
||||
* Handles API call and success/error handling
|
||||
* Resets deleteComment state on success
|
||||
* @param commentId Comment ID
|
||||
*/
|
||||
async deleteComment(commentId: string) {
|
||||
await this.execute<(typeof classroomio.community)[':id']['comment']['$delete']>({
|
||||
requestFn: () =>
|
||||
classroomio.community[':id'].comment.$delete({
|
||||
param: { id: commentId }
|
||||
}),
|
||||
logContext: 'deleting community comment',
|
||||
onSuccess: () => {
|
||||
// Remove comment from local state
|
||||
if (this.question) {
|
||||
this.question.comments = this.question.comments.filter((comment) => String(comment.id) !== commentId);
|
||||
}
|
||||
|
||||
// Reset delete comment state
|
||||
this.deleteCommentState.shouldDelete = false;
|
||||
this.deleteCommentState.commentId = '';
|
||||
|
||||
// Show success message
|
||||
snackbar.success('snackbar.community.success.success_delete');
|
||||
|
||||
// Mark as successful
|
||||
this.success = true;
|
||||
},
|
||||
onError: (result) => {
|
||||
console.error('Error deleting comment:', result);
|
||||
snackbar.error('snackbar.community.error.delete_failed');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches courses for the organization
|
||||
* Checks store first, then fetches if needed
|
||||
* @param userId User ID
|
||||
* @param orgId Organization ID
|
||||
*/
|
||||
async fetchCoursesForOrg(userId: string | null, orgId: string) {
|
||||
if (this.coursesFetched) return;
|
||||
|
||||
// Check store first
|
||||
const courses = get(coursesStore);
|
||||
if (courses.length) {
|
||||
this.courses = [...courses];
|
||||
this.coursesFetched = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch from API
|
||||
const coursesResults = await fetchCourses(userId, orgId);
|
||||
if (coursesResults) {
|
||||
this.courses = coursesResults.allCourses || [];
|
||||
this.coursesFetched = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const communityApi = new CommunityApi();
|
||||
@@ -0,0 +1,70 @@
|
||||
<script lang="ts">
|
||||
import * as Avatar from '@cio/ui/base/avatar';
|
||||
import TrashIcon from '@lucide/svelte/icons/trash';
|
||||
import { calDateDiff } from '$lib/utils/functions/date';
|
||||
import { IconButton } from '@cio/ui/custom/icon-button';
|
||||
import { shortenName } from '$lib/utils/functions/string';
|
||||
import { Vote } from '$features/ui';
|
||||
import { CircleCheckIcon } from '$features/ui/icons';
|
||||
|
||||
interface CommentAuthor {
|
||||
id: number | string | null;
|
||||
fullname?: string | null;
|
||||
avatarUrl?: string | null;
|
||||
}
|
||||
|
||||
interface CommentItem {
|
||||
id: string;
|
||||
votes?: number | null;
|
||||
body: string | null;
|
||||
createdAt?: string | null;
|
||||
author?: CommentAuthor | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
comment: CommentItem;
|
||||
isVoted?: boolean | null;
|
||||
isValidAnswer?: boolean;
|
||||
isAuthorOrAdmin: boolean;
|
||||
upVote: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
let { comment, isVoted, isValidAnswer = false, isAuthorOrAdmin, upVote, onDelete }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="flex items-start px-1">
|
||||
<Vote value={comment.votes ?? 0} {upVote} disabled={isVoted ?? false} />
|
||||
<div class="border-gray w-full rounded-lg border">
|
||||
<header class="flex items-center justify-between p-2 leading-none">
|
||||
<div class="flex items-center text-black">
|
||||
<Avatar.Root class="size-7">
|
||||
<Avatar.Image
|
||||
src={comment.author?.avatarUrl ? comment.author.avatarUrl : '/logo-192.png'}
|
||||
alt={comment.author?.fullname ? comment.author.fullname : 'User'}
|
||||
/>
|
||||
<Avatar.Fallback>{shortenName(comment.author?.fullname) || 'U'}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
|
||||
<p class="ml-2 text-sm dark:text-white">{comment.author?.fullname}</p>
|
||||
|
||||
<p class="ui:text-muted-foreground ml-2 text-sm">
|
||||
{comment.createdAt ? calDateDiff(comment.createdAt) : ''}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if isValidAnswer}
|
||||
<CircleCheckIcon size={16} />
|
||||
{/if}
|
||||
|
||||
{#if isAuthorOrAdmin}
|
||||
<IconButton onclick={onDelete}>
|
||||
<TrashIcon size={16} />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</header>
|
||||
<article class="prose prose-sm sm:prose p-2">
|
||||
{@html comment.body}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,3 +1,4 @@
|
||||
export { default as CommunityListLoader } from './community-list-loader.svelte';
|
||||
export { default as CommunityDeleteModal } from './delete-modal.svelte';
|
||||
export { default as AskCommunityButton } from './ask-community-button.svelte';
|
||||
export { default as CommunityCommentItem } from './community-comment-item.svelte';
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
<script lang="ts">
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { InputField } from '@cio/ui/custom/input-field';
|
||||
import { TextEditor } from '$features/ui';
|
||||
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { communityApi } from '$features/community/api/community.svelte';
|
||||
|
||||
interface Props {
|
||||
isLMS?: boolean;
|
||||
}
|
||||
|
||||
let { isLMS = false }: Props = $props();
|
||||
|
||||
let fields = $state({
|
||||
title: '',
|
||||
body: '',
|
||||
courseId: ''
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if ($profile.id && $currentOrg.id) {
|
||||
communityApi.fetchCoursesForOrg($profile.id, $currentOrg.id);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="mb-3 flex justify-between gap-x-5">
|
||||
<InputField
|
||||
bind:value={fields.title}
|
||||
placeholder={$t('community.ask.title')}
|
||||
errorMessage={communityApi.errors.title}
|
||||
className="w-[75%]"
|
||||
/>
|
||||
<div class="w-[25%]">
|
||||
<Select.Root type="single" bind:value={fields.courseId}>
|
||||
<Select.Trigger class="h-full w-full">
|
||||
<p>
|
||||
{fields.courseId
|
||||
? communityApi.courses.find((course) => course.id === fields.courseId)?.title
|
||||
: $t('community.ask.select_course')}
|
||||
</p>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each communityApi.courses as course}
|
||||
{#if course.id}
|
||||
<Select.Item value={course.id}>{course.title}</Select.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
{#if communityApi.errors.courseId}
|
||||
<p class="mt-1 text-sm text-red-500">
|
||||
{communityApi.errors.courseId}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<TextEditor placeholder="Give an answer" content={fields.body} onChange={(content) => (fields.body = content)} />
|
||||
|
||||
{#if communityApi.errors.body}
|
||||
<p class="mt-2 text-sm text-red-500">{communityApi.errors.body}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex justify-end">
|
||||
<Button
|
||||
variant="default"
|
||||
onclick={() => communityApi.createQuestion(fields, isLMS)}
|
||||
disabled={communityApi.isLoading}
|
||||
>
|
||||
{$t('community.ask.publish')}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -0,0 +1,272 @@
|
||||
<script lang="ts">
|
||||
import pluralize from 'pluralize';
|
||||
import * as Page from '@cio/ui/base/page';
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
import * as Avatar from '@cio/ui/base/avatar';
|
||||
import { Skeleton } from '@cio/ui/base/skeleton';
|
||||
import TrashIcon from '@lucide/svelte/icons/trash';
|
||||
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { calDateDiff } from '$lib/utils/functions/date';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { currentOrg, isOrgAdmin } from '$lib/utils/store/org';
|
||||
import { communityApi } from '$features/community/api/community.svelte';
|
||||
import type { TiptapEditor } from '@cio/ui/custom/editor';
|
||||
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { Vote } from '$features/ui';
|
||||
import { IconButton } from '@cio/ui/custom/icon-button';
|
||||
import { InputField } from '@cio/ui/custom/input-field';
|
||||
import { shortenName } from '$lib/utils/functions/string';
|
||||
import { TextEditor } from '$features/ui';
|
||||
import { CommunityDeleteModal, CommunityCommentItem } from '$features/community/components';
|
||||
|
||||
interface Props {
|
||||
slug: string;
|
||||
isLMS?: boolean;
|
||||
}
|
||||
|
||||
let { slug, isLMS = false }: Props = $props();
|
||||
|
||||
let commentEditor: TiptapEditor | undefined = $state();
|
||||
let isValidAnswer = false; // V2 allow admin mark an answer as accepted
|
||||
let voted: {
|
||||
question: boolean;
|
||||
comment: {
|
||||
[key: string]: boolean;
|
||||
};
|
||||
} = $state({ question: false, comment: {} });
|
||||
let deleteQuestionState = $state({
|
||||
shouldDelete: false,
|
||||
questionId: ''
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if ($profile.id && $currentOrg.id) {
|
||||
communityApi.fetchCoursesForOrg($profile.id, $currentOrg.id);
|
||||
|
||||
communityApi.fetchCommunityQuestion({ slug, isLMS });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{communityApi.question?.title || $t('community.ask.question')}</title>
|
||||
</svelte:head>
|
||||
|
||||
<CommunityDeleteModal
|
||||
bind:open={communityApi.deleteCommentState.shouldDelete}
|
||||
isDeleting={communityApi.isLoading}
|
||||
onCancel={() => {
|
||||
communityApi.deleteCommentState.shouldDelete = false;
|
||||
communityApi.deleteCommentState.commentId = '';
|
||||
}}
|
||||
onDelete={() => {
|
||||
communityApi.deleteComment(communityApi.deleteCommentState.commentId);
|
||||
}}
|
||||
/>
|
||||
|
||||
<CommunityDeleteModal
|
||||
bind:open={deleteQuestionState.shouldDelete}
|
||||
isDeleting={communityApi.isLoading}
|
||||
isQuestion={true}
|
||||
onCancel={() => {
|
||||
deleteQuestionState.shouldDelete = false;
|
||||
deleteQuestionState.questionId = '';
|
||||
}}
|
||||
onDelete={() => {
|
||||
if (communityApi.question) {
|
||||
communityApi.deleteQuestion(String(communityApi.question.id), isLMS);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{#if !communityApi.question}
|
||||
<div class="mb-3 space-y-2 px-5 py-10">
|
||||
<Skeleton class="h-4 w-[25%]" />
|
||||
<Skeleton class="h-4 w-full" />
|
||||
<Skeleton class="h-80 w-full" />
|
||||
</div>
|
||||
{:else}
|
||||
<Page.Root class="mx-auto max-w-3xl md:mx-10 lg:mb-20">
|
||||
<Page.Header>
|
||||
<Page.HeaderContent>
|
||||
{#if communityApi.isEditMode}
|
||||
<div class="flex w-full items-center gap-2">
|
||||
<InputField
|
||||
bind:value={communityApi.editContent.title}
|
||||
className="flex-1"
|
||||
errorMessage={communityApi.errors.title}
|
||||
isDisabled={communityApi.isEditing}
|
||||
/>
|
||||
|
||||
<Select.Root type="single" bind:value={communityApi.editContent.courseId} disabled={communityApi.isEditing}>
|
||||
<Select.Trigger class="w-30! h-full truncate" disabled={communityApi.isEditing}>
|
||||
<span class="truncate">
|
||||
{communityApi.editContent.courseId
|
||||
? communityApi.courses.find((course) => course.id === communityApi.editContent.courseId)?.title
|
||||
: $t('community.ask.select_course')}
|
||||
</span>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each communityApi.courses as course}
|
||||
{#if course.id}
|
||||
<Select.Item value={course.id}>{course.title}</Select.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center gap-2">
|
||||
<Vote
|
||||
value={communityApi.question.votes}
|
||||
upVote={() => {
|
||||
if (voted.question || !communityApi.question) return;
|
||||
voted.question = true;
|
||||
communityApi.upvotePost({
|
||||
id: Number(communityApi.question.id),
|
||||
isQuestion: true
|
||||
});
|
||||
}}
|
||||
disabled={voted.question}
|
||||
/>
|
||||
<Page.Title>{communityApi.question.title}</Page.Title>
|
||||
</div>
|
||||
{/if}
|
||||
</Page.HeaderContent>
|
||||
{#if communityApi.question.authorId === $profile.id}
|
||||
<Page.Action>
|
||||
<Button
|
||||
variant="outline"
|
||||
loading={communityApi.isEditing}
|
||||
onclick={() => {
|
||||
if (!communityApi.question) return;
|
||||
|
||||
if (communityApi.isEditMode) {
|
||||
communityApi.updateQuestion(Number(communityApi.question.id), communityApi.editContent);
|
||||
} else {
|
||||
communityApi.enterEditMode(communityApi.question);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{communityApi.isEditMode ? $t('community.ask.save') : $t('community.ask.edit')}
|
||||
</Button>
|
||||
|
||||
{#if communityApi.isEditMode}
|
||||
<Button variant="ghost" disabled={communityApi.isEditing} onclick={() => communityApi.exitEditMode()}>
|
||||
{$t('community.ask.cancel')}
|
||||
</Button>
|
||||
{/if}
|
||||
</Page.Action>
|
||||
{/if}
|
||||
</Page.Header>
|
||||
|
||||
<Page.Body>
|
||||
{#snippet child()}
|
||||
<div class="my-1 rounded-md border px-1">
|
||||
<div class="flex items-center justify-between p-2 leading-none">
|
||||
<div class="flex items-center text-black no-underline hover:underline">
|
||||
<Avatar.Root class="h-7 w-7">
|
||||
<Avatar.Image
|
||||
src={communityApi.question?.authorAvatarUrl
|
||||
? communityApi.question?.authorAvatarUrl
|
||||
: '/logo-192.png'}
|
||||
alt={communityApi.question?.authorFullname ? communityApi.question?.authorFullname : 'User'}
|
||||
/>
|
||||
<Avatar.Fallback>{shortenName(communityApi.question?.authorFullname) || 'U'}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<p class="ml-2 text-sm dark:text-white">{communityApi.question?.authorFullname}</p>
|
||||
<p class="ml-2 text-sm text-gray-500 dark:text-white">
|
||||
{communityApi.question?.createdAt ? calDateDiff(communityApi.question.createdAt) : ''}
|
||||
</p>
|
||||
</div>
|
||||
{#if communityApi.question?.authorId === $profile.id || $isOrgAdmin}
|
||||
<IconButton
|
||||
onclick={() => {
|
||||
if (!communityApi.question) return;
|
||||
|
||||
deleteQuestionState.shouldDelete = true;
|
||||
deleteQuestionState.questionId = String(communityApi.question.id);
|
||||
}}
|
||||
>
|
||||
<TrashIcon size={16} />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</div>
|
||||
{#if communityApi.isEditMode}
|
||||
<div class="my-2">
|
||||
<TextEditor
|
||||
placeholder="Give an answer"
|
||||
content={communityApi.editContent.body}
|
||||
onChange={(content) => (communityApi.editContent.body = content)}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<section class="prose prose-sm sm:prose p-2">
|
||||
{@html communityApi.question?.body}
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="my-8">
|
||||
{pluralize($t('community.answers'), communityApi.question?.comments.length ?? 0, true)}
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
{#each communityApi.question?.comments as commentItem}
|
||||
<CommunityCommentItem
|
||||
comment={commentItem}
|
||||
isVoted={!!voted.comment[commentItem.id]}
|
||||
{isValidAnswer}
|
||||
isAuthorOrAdmin={commentItem.author?.id === $profile.id || $isOrgAdmin === true}
|
||||
upVote={() => {
|
||||
if (voted.comment[commentItem.id]) return;
|
||||
|
||||
voted.comment[commentItem.id] = true;
|
||||
|
||||
communityApi.upvotePost({
|
||||
id: commentItem.id,
|
||||
isQuestion: false
|
||||
});
|
||||
}}
|
||||
onDelete={() => {
|
||||
console.log('deleting commentItem', commentItem);
|
||||
communityApi.deleteCommentState.shouldDelete = true;
|
||||
communityApi.deleteCommentState.commentId = commentItem.id;
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="mt-4">
|
||||
<TextEditor
|
||||
placeholder="Give an answer"
|
||||
class="h-48!"
|
||||
bind:content={communityApi.comment}
|
||||
onReady={(editor) => (commentEditor = editor)}
|
||||
/>
|
||||
|
||||
<div class="mt-2 flex justify-end">
|
||||
<Button
|
||||
onclick={() => {
|
||||
console.log('comment', communityApi.comment);
|
||||
console.log('question', communityApi.question);
|
||||
if (communityApi.question) {
|
||||
communityApi.createComment(Number(communityApi.question.id), isLMS, () => {
|
||||
commentEditor?.commands?.clearContent?.();
|
||||
});
|
||||
}
|
||||
}}
|
||||
loading={communityApi.isCommenting}
|
||||
>
|
||||
{$t('community.ask.comment')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Page.Body>
|
||||
</Page.Root>
|
||||
{/if}
|
||||
@@ -1,26 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import * as Page from '@cio/ui/base/page';
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
import { Empty } from '@cio/ui/custom/empty';
|
||||
import * as Item from '@cio/ui/base/item';
|
||||
import { Search } from '@cio/ui/custom/search';
|
||||
import MessageSquareMoreIcon from '@lucide/svelte/icons/message-square-more';
|
||||
import MessageCirclePlusIcon from '@lucide/svelte/icons/message-circle-plus';
|
||||
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { courses } from '$features/course/utils/store';
|
||||
import { communityApi } from '../api/community.svelte';
|
||||
import { calDateDiff } from '$lib/utils/functions/date';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { fetchCourses } from '$lib/utils/services/courses';
|
||||
import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
|
||||
import MessageSquareMoreIcon from '@lucide/svelte/icons/message-square-more';
|
||||
|
||||
import { CommunityListLoader } from '../components';
|
||||
import { Vote } from '$features/ui';
|
||||
import { Empty } from '@cio/ui/custom/empty';
|
||||
import * as Page from '@cio/ui/base/page';
|
||||
import * as Item from '@cio/ui/base/item';
|
||||
|
||||
import { AskCommunityButton } from '../components';
|
||||
import { CommunityListLoader } from '../components';
|
||||
import { Vote } from '$features/ui';
|
||||
import type { CommunityQuestionData } from '../utils/types';
|
||||
|
||||
interface Props {
|
||||
isLMS?: boolean;
|
||||
@@ -28,70 +25,17 @@
|
||||
|
||||
let { isLMS = false }: Props = $props();
|
||||
|
||||
let isLoading = $state(false);
|
||||
let discussions = $state([]);
|
||||
let searchValue = $state('');
|
||||
let allCourses: any[] = $state([]);
|
||||
let selectedId = $state('');
|
||||
|
||||
function fetchCommunityQuestions(orgId?: string, profileId?: string) {
|
||||
if (!orgId || !profileId) return;
|
||||
|
||||
untrack(async () => {
|
||||
isLoading = true;
|
||||
|
||||
if ($courses.length) {
|
||||
allCourses = [...$courses];
|
||||
} else {
|
||||
const courseResult = (await fetchCourses(profileId, orgId)) || { allCourses: [] };
|
||||
allCourses = courseResult.allCourses;
|
||||
}
|
||||
|
||||
const courseIds = allCourses.map((course) => course.id);
|
||||
const courseIdsFilter = `(${courseIds.join(',')})`;
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('community_question')
|
||||
.select(
|
||||
`
|
||||
organization_id,
|
||||
course_id,
|
||||
title,
|
||||
votes,
|
||||
created_at,
|
||||
slug,
|
||||
comments:community_answer(count),
|
||||
author:profile(
|
||||
fullname
|
||||
),
|
||||
course!inner (
|
||||
title
|
||||
)
|
||||
`
|
||||
)
|
||||
.filter('course_id', 'in', courseIdsFilter)
|
||||
.order('created_at', { ascending: false });
|
||||
console.log('data', data);
|
||||
console.log('error', error);
|
||||
|
||||
isLoading = false;
|
||||
|
||||
if (error) {
|
||||
console.error('Error loading community', error);
|
||||
return goto(isLMS ? '/lms' : $currentOrgPath);
|
||||
}
|
||||
|
||||
discussions =
|
||||
data?.map((discussion) => ({
|
||||
title: discussion.title,
|
||||
courseId: discussion.course_id,
|
||||
courseTitle: discussion.course?.title,
|
||||
slug: discussion.slug,
|
||||
author: discussion?.author?.fullname,
|
||||
comments: discussion.comments?.[0]?.count || 0,
|
||||
votes: discussion.votes,
|
||||
createdAt: calDateDiff(discussion.created_at)
|
||||
})) || [];
|
||||
// Fetch courses - API class handles this
|
||||
await communityApi.fetchCoursesForOrg(profileId, orgId);
|
||||
// Call API - API class handles loading, errors, navigation
|
||||
await communityApi.fetchCommunityQuestions({ orgId, isLMS });
|
||||
});
|
||||
}
|
||||
|
||||
@@ -99,11 +43,11 @@
|
||||
fetchCommunityQuestions($currentOrg.id, $profile.id);
|
||||
});
|
||||
|
||||
let filteredDiscussions = $derived(
|
||||
discussions.filter(
|
||||
(discussion) =>
|
||||
discussion.title.toLowerCase().includes(searchValue.toLowerCase()) &&
|
||||
(!selectedId || discussion.courseId === selectedId)
|
||||
let filteredQuestions = $derived(
|
||||
communityApi.questions.filter(
|
||||
(question: CommunityQuestionData[number]) =>
|
||||
question.title.toLowerCase().includes(searchValue.toLowerCase()) &&
|
||||
(!selectedId || question.courseId === selectedId)
|
||||
)
|
||||
);
|
||||
</script>
|
||||
@@ -114,46 +58,50 @@
|
||||
<Select.Root type="single" bind:value={selectedId}>
|
||||
<Select.Trigger class="w-full bg-gray-100 dark:bg-neutral-800">
|
||||
<p class="truncate">
|
||||
{selectedId ? allCourses.find((course) => course.id === selectedId)?.title : $t('community.all')}
|
||||
{selectedId
|
||||
? communityApi.courses.find((course) => course.id === selectedId)?.title || $t('community.all')
|
||||
: $t('community.all')}
|
||||
</p>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Item value="">{$t('community.all')}</Select.Item>
|
||||
{#each allCourses as course}
|
||||
<Select.Item value={course.id}>{course.title}</Select.Item>
|
||||
{#each communityApi.courses as course}
|
||||
{#if course.id}
|
||||
<Select.Item value={course.id}>{course.title}</Select.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</Page.BodyHeader>
|
||||
|
||||
{#if isLoading}
|
||||
{#if communityApi.isLoading}
|
||||
<CommunityListLoader />
|
||||
<CommunityListLoader />
|
||||
<CommunityListLoader />
|
||||
<CommunityListLoader />
|
||||
{:else}
|
||||
{#each filteredDiscussions as discussion}
|
||||
{#each filteredQuestions as question}
|
||||
<Item.Root variant="outline">
|
||||
{#snippet child({ props })}
|
||||
<a href="{isLMS ? '/lms' : $currentOrgPath}/community/{discussion.slug}" {...props}>
|
||||
<Vote value={discussion.votes} />
|
||||
<a href="{isLMS ? '/lms' : $currentOrgPath}/community/{question.slug}" {...props}>
|
||||
<Vote value={question.votes} />
|
||||
<Item.Content class="gap-y-0.5">
|
||||
<Item.Title class="mt-0">
|
||||
{discussion.title}
|
||||
{question.title}
|
||||
</Item.Title>
|
||||
<Item.Description>
|
||||
{discussion.author} asked {discussion.createdAt}
|
||||
{question.authorFullname} asked {calDateDiff(question.createdAt)}
|
||||
</Item.Description>
|
||||
<a class="m-0" href="/courses/{discussion.courseId}" onclick={(e) => e.stopPropagation()}>
|
||||
<a class="m-0" href="/courses/{question.courseId}" onclick={(e) => e.stopPropagation()}>
|
||||
<span class="text-muted-foreground p-0 text-xs">
|
||||
#{discussion.courseTitle}
|
||||
#{question.courseTitle}
|
||||
</span>
|
||||
</a>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<div class="flex items-center">
|
||||
<MessageCirclePlusIcon size={16} />
|
||||
<span class="ml-1">{discussion.comments}</span>
|
||||
<span class="ml-1">{question.comments}</span>
|
||||
</div>
|
||||
</Item.Actions>
|
||||
</a>
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
export { default as CommunityPage } from './community.svelte';
|
||||
export { default as AskCommunityPage } from './ask-community.svelte';
|
||||
export { default as CommunityQuestionPage } from './community-question.svelte';
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import { classroomio, type InferResponseType } from '$lib/utils/services/api';
|
||||
|
||||
export type GetCommunityQuestionsResponse = typeof classroomio.community.$get;
|
||||
export type CommunityQuestionsResponse = InferResponseType<GetCommunityQuestionsResponse> | null;
|
||||
export type CommunityQuestionsSuccess = Extract<InferResponseType<GetCommunityQuestionsResponse>, { success: true }>;
|
||||
export type CommunityQuestionData = CommunityQuestionsSuccess['data'];
|
||||
|
||||
export type GetCommunityQuestionResponse = (typeof classroomio.community)[':slug']['$get'];
|
||||
export type CommunityQuestionResponse = InferResponseType<GetCommunityQuestionResponse> | null;
|
||||
export type CommunityQuestionSuccess = Extract<InferResponseType<GetCommunityQuestionResponse>, { success: true }>;
|
||||
|
||||
export type CreateCommentResponse = typeof classroomio.community.$post;
|
||||
export type CreateCommentSuccess = Extract<InferResponseType<CreateCommentResponse>, { success: true }>;
|
||||
export type CreateCommentData = CreateCommentSuccess['data'];
|
||||
|
||||
export type UpvotePostResponse = (typeof classroomio.community)[':id']['upvote']['$post'];
|
||||
export type UpvotePostSuccess = Extract<InferResponseType<UpvotePostResponse>, { success: true }>;
|
||||
export type UpvotePostData = UpvotePostSuccess['data'];
|
||||
|
||||
export type CreateCommunityQuestionResponse = typeof classroomio.community.$post;
|
||||
export type CreateCommunityQuestionSuccess = Extract<
|
||||
InferResponseType<CreateCommunityQuestionResponse>,
|
||||
{ success: true }
|
||||
>;
|
||||
export type UpdateQuestionResponse = (typeof classroomio.community)[':id']['$put'];
|
||||
export type UpdateQuestionSuccess = Extract<InferResponseType<UpdateQuestionResponse>, { success: true }>;
|
||||
export type UpdateQuestionData = UpdateQuestionSuccess['data'];
|
||||
@@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
let {
|
||||
content,
|
||||
content = $bindable(''),
|
||||
showToolBar = true,
|
||||
editable = true,
|
||||
enablePersistence = false,
|
||||
@@ -43,7 +43,7 @@
|
||||
</script>
|
||||
|
||||
<Editor
|
||||
content={content || ''}
|
||||
bind:content
|
||||
{showToolBar}
|
||||
{editable}
|
||||
{enablePersistence}
|
||||
@@ -56,4 +56,3 @@
|
||||
onEditorReady={onReady}
|
||||
{onEditorDestroy}
|
||||
/>
|
||||
|
||||
|
||||
@@ -1538,6 +1538,7 @@
|
||||
},
|
||||
|
||||
"success": {
|
||||
"question_updated": "Question Updated!",
|
||||
"comment_submitted": "Comment Submitted!",
|
||||
"success_delete": "Deleted successfully",
|
||||
"question_submitted": "Question Submitted!"
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>ClassroomIO - The Coure Platform That’s Actually Easy To Use</title>
|
||||
<title>ClassroomIO - The Course Platform That’s Actually Easy To Use</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if !isLoadingApp && appInitApi.error}
|
||||
|
||||
@@ -1,553 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import pluralize from 'pluralize';
|
||||
import { goto } from '$app/navigation';
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
import { Skeleton } from '@cio/ui/base/skeleton';
|
||||
import TrashIcon from '@lucide/svelte/icons/trash';
|
||||
|
||||
import type { Course } from '$lib/utils/types';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { courses } from '$features/course/utils/store';
|
||||
import { calDateDiff } from '$lib/utils/functions/date';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { snackbar } from '$features/ui/snackbar/store';
|
||||
import { fetchCourses } from '$lib/utils/services/courses';
|
||||
import { currentOrg, isOrgAdmin } from '$lib/utils/store/org';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { askCommunityValidation, commentInCommunityValidation } from '$lib/utils/functions/validator';
|
||||
|
||||
import { Vote } from '$features/ui';
|
||||
import { IconButton } from '@cio/ui/custom/icon-button';
|
||||
import * as Avatar from '@cio/ui/base/avatar';
|
||||
import { InputField } from '@cio/ui/custom/input-field';
|
||||
import { shortenName } from '$lib/utils/functions/string';
|
||||
import { TextEditor } from '$features/ui';
|
||||
import { CircleCheckIcon } from '$features/ui/icons';
|
||||
import { CommunityDeleteModal } from '$features/community/components';
|
||||
import { currentCommunityQuestion } from '$features/community/utils/store';
|
||||
import * as Page from '@cio/ui/base/page';
|
||||
|
||||
interface Comment {
|
||||
id: string;
|
||||
authorId: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
votes: number;
|
||||
comment: string;
|
||||
createdAt: string;
|
||||
}
|
||||
interface Question {
|
||||
id: string;
|
||||
title: string;
|
||||
votes: number;
|
||||
author: {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
};
|
||||
body: string;
|
||||
createdAt: string;
|
||||
comments: Comment[];
|
||||
totalComments: number;
|
||||
courseId: string;
|
||||
}
|
||||
<script>
|
||||
import { CommunityQuestionPage } from '$features/community/pages';
|
||||
|
||||
let { data } = $props();
|
||||
const { slug } = data;
|
||||
|
||||
let question: Question | undefined = $state();
|
||||
let comment = $state('');
|
||||
let errors: {
|
||||
title?: string;
|
||||
courseId?: string;
|
||||
} = $state({});
|
||||
let isValidAnswer = false; // V2 allow admin mark an answer as accepted
|
||||
let voted: {
|
||||
question: boolean;
|
||||
comment: {
|
||||
[key: string]: boolean;
|
||||
};
|
||||
} = $state({ question: false, comment: {} });
|
||||
let isEditMode = $state(false);
|
||||
let deleteComment = $state({
|
||||
shouldDelete: false,
|
||||
commentId: '',
|
||||
isDeleting: false
|
||||
});
|
||||
let deleteQuestion = $state({
|
||||
shouldDelete: false,
|
||||
questionId: '',
|
||||
isDeleting: false
|
||||
});
|
||||
let editContent = $state({
|
||||
title: '',
|
||||
body: '',
|
||||
courseId: ''
|
||||
});
|
||||
|
||||
let editorInstance = $state(false);
|
||||
let fetchedCourses: Course[] = $state([]);
|
||||
|
||||
function mapResToQuestion(data): Question {
|
||||
return {
|
||||
id: data.id,
|
||||
title: data.title,
|
||||
votes: data.votes,
|
||||
author: {
|
||||
id: data?.author?.id || '',
|
||||
name: data?.author?.fullname || '',
|
||||
avatar: data?.author?.avatar_url || ''
|
||||
},
|
||||
body: data.body,
|
||||
createdAt: calDateDiff(data.created_at),
|
||||
comments: data.comments.map((c) => ({
|
||||
id: c.id,
|
||||
authorId: c.author?.id || '',
|
||||
name: c.author?.fullname || '',
|
||||
avatar: c.author?.avatar_url || '',
|
||||
votes: c.votes,
|
||||
comment: c.body,
|
||||
createdAt: calDateDiff(c.created_at)
|
||||
})),
|
||||
totalComments: 0,
|
||||
courseId: data.course_id
|
||||
};
|
||||
}
|
||||
|
||||
async function getCourses(userId: string | null, orgId: string) {
|
||||
if ($courses.length) {
|
||||
fetchedCourses = [...$courses];
|
||||
return;
|
||||
}
|
||||
|
||||
const coursesResults = await fetchCourses(userId, orgId);
|
||||
fetchedCourses = coursesResults?.allCourses || [];
|
||||
}
|
||||
|
||||
async function fetchCommunityQuestion(slug: string) {
|
||||
if (!slug) return;
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('community_question')
|
||||
.select(
|
||||
`
|
||||
id,
|
||||
title,
|
||||
body,
|
||||
votes,
|
||||
created_at,
|
||||
course_id,
|
||||
slug,
|
||||
comments:community_answer(
|
||||
id,
|
||||
body,
|
||||
votes,
|
||||
created_at,
|
||||
author:profile(id, fullname, avatar_url)
|
||||
),
|
||||
author:profile(id, fullname, avatar_url),
|
||||
course!inner (
|
||||
title
|
||||
)
|
||||
`
|
||||
)
|
||||
.eq('slug', slug)
|
||||
.single();
|
||||
|
||||
if (error) {
|
||||
console.error('[LMS] Error loading community', error);
|
||||
return goto(`/lms`);
|
||||
}
|
||||
|
||||
untrack(() => {
|
||||
question = mapResToQuestion(data);
|
||||
question.totalComments = question.comments.length;
|
||||
// Update store for breadcrumb
|
||||
currentCommunityQuestion.set({ title: question.title });
|
||||
});
|
||||
}
|
||||
|
||||
async function submitComment() {
|
||||
if (!question) return;
|
||||
|
||||
errors = commentInCommunityValidation({ comment });
|
||||
console.log('submitComment errors', errors);
|
||||
|
||||
if (Object.keys(errors).length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('community_answer')
|
||||
.insert({
|
||||
id: undefined,
|
||||
body: comment,
|
||||
question_id: question.id,
|
||||
author_profile_id: $profile.id,
|
||||
votes: 0
|
||||
})
|
||||
.select();
|
||||
|
||||
if (error) {
|
||||
console.error('Error: commenting', error);
|
||||
snackbar.error('snackbar.community.error.try_again');
|
||||
} else {
|
||||
console.log('Success: commenting', data);
|
||||
|
||||
snackbar.success('snackbar.community.success.comment_submitted');
|
||||
|
||||
// Add to comment
|
||||
const _c = data?.[0];
|
||||
question.comments = [
|
||||
...question.comments,
|
||||
{
|
||||
id: _c.id,
|
||||
authorId: $profile.id || '',
|
||||
name: $profile?.fullname || '',
|
||||
avatar: $profile?.avatarUrl || '',
|
||||
votes: 0,
|
||||
comment: _c.body,
|
||||
createdAt: calDateDiff(_c.created_at)
|
||||
}
|
||||
];
|
||||
|
||||
// Reset input
|
||||
comment = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function upvoteQuestion(type: string, commentId?: string) {
|
||||
if (!question) return;
|
||||
|
||||
const isQuestion = type === 'question';
|
||||
|
||||
if (isQuestion && voted.question) return;
|
||||
if (!isQuestion && commentId && voted.comment[commentId]) return;
|
||||
|
||||
const table = isQuestion ? 'community_question' : 'community_answer';
|
||||
const matchId = isQuestion ? question.id : commentId;
|
||||
let votes = 0;
|
||||
|
||||
if (isQuestion) {
|
||||
question.votes = question.votes + 1;
|
||||
votes = question.votes;
|
||||
} else {
|
||||
question.comments = question.comments.map((c) => {
|
||||
if (c.id === commentId) {
|
||||
c.votes = c.votes + 1;
|
||||
votes = c.votes;
|
||||
}
|
||||
return c;
|
||||
});
|
||||
}
|
||||
const { error } = await supabase.from(table).update({ votes }).match({ id: matchId });
|
||||
if (error) {
|
||||
console.error('Error: upvoteQuestion', error);
|
||||
snackbar.error('snackbar.community.error.try_again');
|
||||
} else {
|
||||
if (isQuestion) {
|
||||
voted.question = true;
|
||||
} else if (commentId) {
|
||||
voted.comment[commentId] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleQuestionEdit() {
|
||||
if (!question) return;
|
||||
|
||||
if (isEditMode) {
|
||||
errors = askCommunityValidation(editContent);
|
||||
console.log('handleQuestionEdit errors', errors);
|
||||
|
||||
if (Object.keys(errors).length) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
isEditMode = !isEditMode;
|
||||
editorInstance = !editorInstance;
|
||||
|
||||
if (!isEditMode) {
|
||||
errors = askCommunityValidation(editContent);
|
||||
console.log('handleQuestionEdit errors', errors);
|
||||
|
||||
if (Object.keys(errors).length) {
|
||||
return;
|
||||
}
|
||||
const { error } = await supabase
|
||||
.from('community_question')
|
||||
.update({
|
||||
title: editContent.title,
|
||||
body: editContent.body,
|
||||
course_id: editContent.courseId
|
||||
})
|
||||
.match({ id: question.id });
|
||||
if (error) {
|
||||
console.error('Error: handleQuestionEdit', error);
|
||||
snackbar.error('snackbar.community.error.try_again');
|
||||
} else {
|
||||
question.title = editContent.title;
|
||||
question.body = editContent.body;
|
||||
question.courseId = editContent.courseId;
|
||||
|
||||
editContent.title = '';
|
||||
editContent.body = '';
|
||||
editContent.courseId = '';
|
||||
}
|
||||
} else {
|
||||
editContent.title = question.title;
|
||||
editContent.body = question.body;
|
||||
editContent.courseId = question.courseId;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(isQuestion: boolean) {
|
||||
if (!question) return;
|
||||
|
||||
if (!isQuestion) {
|
||||
deleteComment.isDeleting = true;
|
||||
|
||||
const { error } = await supabase.from('community_answer').delete().match({ id: deleteComment.commentId });
|
||||
|
||||
deleteComment.isDeleting = false;
|
||||
|
||||
if (error) {
|
||||
snackbar.error('snackbar.community.error.deleting_comments');
|
||||
console.log('Error deleting comments', error);
|
||||
return;
|
||||
}
|
||||
snackbar.success('snackbar.community.success.success_delete');
|
||||
|
||||
question.comments = question.comments.filter((c) => c.id !== deleteComment.commentId);
|
||||
deleteComment.shouldDelete = false;
|
||||
deleteComment.commentId = '';
|
||||
|
||||
// Handle only delete comment
|
||||
return;
|
||||
}
|
||||
deleteQuestion.isDeleting = true;
|
||||
|
||||
const { error: commentDeleteError } = await supabase
|
||||
.from('community_answer')
|
||||
.delete()
|
||||
.match({ question_id: deleteQuestion.questionId });
|
||||
|
||||
if (commentDeleteError) {
|
||||
snackbar.error('snackbar.community.error.deleting_comments');
|
||||
console.log('Error deleting comments', commentDeleteError);
|
||||
|
||||
deleteQuestion.isDeleting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const { error: questionDeleteError } = await supabase
|
||||
.from('community_question')
|
||||
.delete()
|
||||
.match({ id: deleteQuestion.questionId });
|
||||
|
||||
if (questionDeleteError) {
|
||||
snackbar.error('snackbar.community.error.deleting_question');
|
||||
console.log('Error deleting question', questionDeleteError);
|
||||
return;
|
||||
}
|
||||
|
||||
snackbar.success('snackbar.community.success.success_delete');
|
||||
goto(`/lms/community`);
|
||||
deleteQuestion.isDeleting = false;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
fetchCommunityQuestion(slug);
|
||||
});
|
||||
$effect(() => {
|
||||
if ($profile.id && $currentOrg.id) {
|
||||
getCourses($profile.id, $currentOrg.id);
|
||||
}
|
||||
});
|
||||
|
||||
// Clear store when component unmounts
|
||||
$effect(() => {
|
||||
return () => {
|
||||
currentCommunityQuestion.set({ title: null });
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{question?.title || 'Question'}</title>
|
||||
<title>Question - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<CommunityDeleteModal
|
||||
bind:open={deleteQuestion.shouldDelete}
|
||||
isDeleting={deleteQuestion.isDeleting}
|
||||
onCancel={() => {
|
||||
deleteQuestion.shouldDelete = false;
|
||||
deleteQuestion.questionId = '';
|
||||
}}
|
||||
onDelete={() => handleDelete(true)}
|
||||
isQuestion={true}
|
||||
/>
|
||||
|
||||
{#if !question}
|
||||
<div class="mb-3 px-5 py-10">
|
||||
<Skeleton class="h-4 w-[25%]" />
|
||||
<Skeleton class="mb-2 h-4 w-full" />
|
||||
<Skeleton class="h-80 w-full" />
|
||||
</div>
|
||||
{:else}
|
||||
{@const currentQuestion = question}
|
||||
<Page.Root class="mx-auto max-w-3xl md:mx-10 lg:mb-20">
|
||||
<Page.Header>
|
||||
<Page.HeaderContent>
|
||||
{#if isEditMode}
|
||||
<div class="flex w-full items-center gap-2">
|
||||
<InputField bind:value={editContent.title} className="flex-1" errorMessage={errors.title} />
|
||||
<Select.Root type="single" bind:value={editContent.courseId}>
|
||||
<Select.Trigger class="h-full w-[25%]">
|
||||
<p>
|
||||
{editContent.courseId
|
||||
? fetchedCourses.find((course) => course.id === editContent.courseId)?.title
|
||||
: $t('community.ask.select_course')}
|
||||
</p>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each fetchedCourses as course}
|
||||
{#if course.id}
|
||||
<Select.Item value={course.id}>{course.title}</Select.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center gap-2">
|
||||
<Vote value={currentQuestion.votes} upVote={() => upvoteQuestion('question')} disabled={voted.question} />
|
||||
<Page.Title>{currentQuestion.title}</Page.Title>
|
||||
</div>
|
||||
{/if}
|
||||
</Page.HeaderContent>
|
||||
{#if currentQuestion.author.id === $profile.id}
|
||||
<Page.Action>
|
||||
<Button variant="outline" onclick={handleQuestionEdit}>
|
||||
{isEditMode ? $t('community.ask.save') : $t('community.ask.edit')}
|
||||
</Button>
|
||||
{#if isEditMode}
|
||||
<Button variant="ghost" onclick={() => (isEditMode = !isEditMode)}>
|
||||
{$t('community.ask.cancel')}
|
||||
</Button>
|
||||
{/if}
|
||||
</Page.Action>
|
||||
{/if}
|
||||
</Page.Header>
|
||||
<Page.Body>
|
||||
{#snippet child()}
|
||||
<div class="border-gray my-1 rounded-lg border px-1">
|
||||
<header class="flex items-center justify-between p-2 leading-none">
|
||||
<div class="flex items-center text-black no-underline hover:underline">
|
||||
<Avatar.Root class="h-7 w-7">
|
||||
<Avatar.Image
|
||||
src={currentQuestion.author.avatar ? currentQuestion.author.avatar : '/logo-192.png'}
|
||||
alt={currentQuestion.author.name ? currentQuestion.author.name : 'User'}
|
||||
/>
|
||||
<Avatar.Fallback>{shortenName(currentQuestion.author.name) || 'U'}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<p class="ml-2 text-sm dark:text-white">{currentQuestion.author.name}</p>
|
||||
<p class="ml-2 text-sm text-gray-500 dark:text-white">
|
||||
{currentQuestion.createdAt}
|
||||
</p>
|
||||
</div>
|
||||
{#if currentQuestion.author.id === $profile.id || $isOrgAdmin}
|
||||
<IconButton
|
||||
onclick={() => {
|
||||
deleteQuestion.shouldDelete = true;
|
||||
deleteQuestion.questionId = currentQuestion.id;
|
||||
}}
|
||||
>
|
||||
<TrashIcon size={16} />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</header>
|
||||
{#if isEditMode && editorInstance}
|
||||
<div class="my-2">
|
||||
<TextEditor
|
||||
placeholder="Give an answer"
|
||||
content={editContent.body}
|
||||
onChange={(content) => (editContent.body = content)}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<section class="prose prose-sm sm:prose p-2">
|
||||
{@html currentQuestion.body}
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="my-8">
|
||||
{pluralize($t('community.answers'), currentQuestion.totalComments, true)}
|
||||
</div>
|
||||
|
||||
{#each currentQuestion.comments as comment}
|
||||
<div class="my-5 flex items-start px-1">
|
||||
<Vote
|
||||
value={comment.votes}
|
||||
upVote={() => upvoteQuestion('comment', comment.id)}
|
||||
disabled={voted.comment[comment.id]}
|
||||
/>
|
||||
<div class="border-gray w-full rounded-lg border">
|
||||
<header class="flex items-center justify-between p-2 leading-none">
|
||||
<div class="flex items-center text-black">
|
||||
<Avatar.Root class="h-7 w-7">
|
||||
<Avatar.Image
|
||||
src={comment.avatar ? comment.avatar : '/logo-192.png'}
|
||||
alt={comment.name ? comment.name : 'User'}
|
||||
/>
|
||||
<Avatar.Fallback>{shortenName(comment.name) || 'U'}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<p class="ml-2 text-sm dark:text-white">{comment.name}</p>
|
||||
<p class="ml-2 text-sm text-gray-500 dark:text-white">
|
||||
{comment.createdAt}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if isValidAnswer}
|
||||
<CircleCheckIcon size={16} />
|
||||
{/if}
|
||||
|
||||
{#if comment.authorId === $profile.id || $isOrgAdmin}
|
||||
<IconButton
|
||||
onclick={() => {
|
||||
deleteComment.shouldDelete = true;
|
||||
deleteComment.commentId = comment.id;
|
||||
}}
|
||||
>
|
||||
<TrashIcon size={16} />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</header>
|
||||
<article class="prose prose-sm sm:prose p-2">
|
||||
{@html comment.comment}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="mt-4">
|
||||
{#if !editorInstance}
|
||||
<TextEditor placeholder="Give an answer" content={comment} onChange={(content) => (comment = content)} />
|
||||
{/if}
|
||||
|
||||
<div class="mt-2 flex justify-end">
|
||||
<Button onclick={submitComment}>
|
||||
{$t('community.ask.comment')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Page.Body>
|
||||
</Page.Root>
|
||||
{/if}
|
||||
<CommunityQuestionPage slug={data.slug} isLMS={true} />
|
||||
|
||||
@@ -1,152 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
|
||||
import type { Course } from '$lib/utils/types';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
<script>
|
||||
import { AskCommunityPage } from '$features/community/pages';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { courses } from '$features/course/utils/store';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { snackbar } from '$features/ui/snackbar/store';
|
||||
import { fetchCourses } from '$lib/utils/services/courses';
|
||||
import generateSlug from '$lib/utils/functions/generateSlug';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { askCommunityValidation } from '$lib/utils/functions/validator';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
|
||||
import { InputField } from '@cio/ui/custom/input-field';
|
||||
import { TextEditor } from '$features/ui';
|
||||
import * as Page from '@cio/ui/base/page';
|
||||
|
||||
let errors: {
|
||||
title?: string;
|
||||
courseId?: string;
|
||||
body?: string;
|
||||
} = $state({});
|
||||
let fields = $state({
|
||||
title: '',
|
||||
body: '',
|
||||
courseId: ''
|
||||
});
|
||||
|
||||
let hasFetched = $state(false);
|
||||
let fetchedCourses: Course[] = $state([]);
|
||||
|
||||
async function getCourses(userId: string | null, orgId: string) {
|
||||
if (hasFetched) return;
|
||||
|
||||
if ($courses.length) {
|
||||
fetchedCourses = [...$courses];
|
||||
hasFetched = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const coursesResults = await fetchCourses(userId, orgId);
|
||||
if (!coursesResults) return;
|
||||
|
||||
fetchedCourses = coursesResults.allCourses;
|
||||
hasFetched = true;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
errors = askCommunityValidation(fields);
|
||||
console.log('handleSave errors', errors);
|
||||
|
||||
if (Object.keys(errors).length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data: question, error } = await supabase
|
||||
.from('community_question')
|
||||
.insert({
|
||||
title: fields.title,
|
||||
body: fields.body,
|
||||
organization_id: $currentOrg.id,
|
||||
author_profile_id: $profile.id,
|
||||
votes: 0,
|
||||
slug: generateSlug(fields.title),
|
||||
course_id: fields.courseId
|
||||
})
|
||||
.select();
|
||||
|
||||
if (error) {
|
||||
console.error('Error: asking question', error);
|
||||
snackbar.error('snackbar.community.error.try_again');
|
||||
} else {
|
||||
const slug = question[0]?.slug;
|
||||
|
||||
console.log('Success: asking question', question, slug);
|
||||
snackbar.success('snackbar.community.success.question_submitted');
|
||||
goto(`/lms/community/${slug}`);
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if ($profile.id && $currentOrg.id) {
|
||||
getCourses($profile.id, $currentOrg.id);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Ask the Community - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<Page.Root>
|
||||
<Page.Root class="w-full">
|
||||
<Page.Header>
|
||||
<Page.HeaderContent>
|
||||
<Page.Title>{$t('community.ask.ask_the')}</Page.Title>
|
||||
</Page.HeaderContent>
|
||||
<Page.Action>
|
||||
<Button variant="default" onclick={handleSave}>
|
||||
{$t('community.ask.publish')}
|
||||
</Button>
|
||||
</Page.Action>
|
||||
</Page.Header>
|
||||
<Page.Body>
|
||||
{#snippet child()}
|
||||
<div class="mb-3 flex justify-between gap-x-5">
|
||||
<InputField
|
||||
bind:value={fields.title}
|
||||
placeholder={$t('community.ask.title')}
|
||||
errorMessage={errors.title}
|
||||
className="w-[75%]"
|
||||
/>
|
||||
<div class="w-[25%]">
|
||||
<Select.Root type="single" bind:value={fields.courseId}>
|
||||
<Select.Trigger class="h-full w-full">
|
||||
<p>
|
||||
{fields.courseId
|
||||
? fetchedCourses.find((course) => course.id === fields.courseId)?.title
|
||||
: $t('community.ask.select_course')}
|
||||
</p>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each fetchedCourses as course}
|
||||
{#if course.id}
|
||||
<Select.Item value={course.id}>{course.title}</Select.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
{#if errors.courseId}
|
||||
<p class="mt-1 text-sm text-red-500">
|
||||
{errors.courseId}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<TextEditor
|
||||
placeholder="Give an answer"
|
||||
content={fields.body}
|
||||
onChange={(content) => (fields.body = content)}
|
||||
/>
|
||||
|
||||
{#if errors.body}
|
||||
<p class="mt-2 text-sm text-red-500">{errors.body}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<AskCommunityPage isLMS={true} />
|
||||
{/snippet}
|
||||
</Page.Body>
|
||||
</Page.Root>
|
||||
|
||||
@@ -1,546 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import pluralize from 'pluralize';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Skeleton } from '@cio/ui/base/skeleton';
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
import TrashIcon from '@lucide/svelte/icons/trash';
|
||||
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { courses } from '$features/course/utils/store';
|
||||
import { calDateDiff } from '$lib/utils/functions/date';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { snackbar } from '$features/ui/snackbar/store';
|
||||
import { fetchCourses } from '$lib/utils/services/courses';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { currentOrg, currentOrgPath, isOrgAdmin } from '$lib/utils/store/org';
|
||||
import { askCommunityValidation, commentInCommunityValidation } from '$lib/utils/functions/validator';
|
||||
|
||||
import type { Course } from '$lib/utils/types';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { Vote } from '$features/ui';
|
||||
import { IconButton } from '@cio/ui/custom/icon-button';
|
||||
import * as Avatar from '@cio/ui/base/avatar';
|
||||
import { InputField } from '@cio/ui/custom/input-field';
|
||||
import { shortenName } from '$lib/utils/functions/string';
|
||||
import { TextEditor } from '$features/ui';
|
||||
import { CommunityDeleteModal } from '$features/community/components';
|
||||
import { CircleCheckIcon } from '$features/ui/icons';
|
||||
import * as Page from '@cio/ui/base/page';
|
||||
|
||||
interface Comment {
|
||||
id: string;
|
||||
authorId: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
votes: number;
|
||||
comment: string;
|
||||
createdAt: string;
|
||||
}
|
||||
interface Question {
|
||||
id: string;
|
||||
title: string;
|
||||
votes: number;
|
||||
author: {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
};
|
||||
body: string;
|
||||
createdAt: string;
|
||||
comments: Comment[];
|
||||
totalComments: number;
|
||||
courseId: string;
|
||||
}
|
||||
<script>
|
||||
import { CommunityQuestionPage } from '$features/community/pages';
|
||||
|
||||
let { data } = $props();
|
||||
const { slug } = data;
|
||||
|
||||
let question: Question | undefined = $state();
|
||||
let comment = $state('');
|
||||
let errors: {
|
||||
title?: string;
|
||||
} = $state({});
|
||||
let isValidAnswer = false; // V2 allow admin mark an answer as accepted
|
||||
let voted: {
|
||||
question: boolean;
|
||||
comment: {
|
||||
[key: string]: boolean;
|
||||
};
|
||||
} = $state({ question: false, comment: {} });
|
||||
let isEditMode = $state(false);
|
||||
let deleteComment = $state({
|
||||
shouldDelete: false,
|
||||
commentId: '',
|
||||
isDeleting: false
|
||||
});
|
||||
let deleteQuestion = $state({
|
||||
shouldDelete: false,
|
||||
questionId: '',
|
||||
isDeleting: false
|
||||
});
|
||||
let editContent = $state({
|
||||
title: '',
|
||||
body: '',
|
||||
courseId: ''
|
||||
});
|
||||
|
||||
let editorInstance = $state(false);
|
||||
let fetchedCourses: Course[] = $state([]);
|
||||
|
||||
function mapResToQuestion(data): Question {
|
||||
return {
|
||||
id: data.id,
|
||||
title: data.title,
|
||||
votes: data.votes,
|
||||
author: {
|
||||
id: data?.author?.id || '',
|
||||
name: data?.author?.fullname || '',
|
||||
avatar: data?.author?.avatar_url || ''
|
||||
},
|
||||
body: data.body,
|
||||
createdAt: calDateDiff(data.created_at),
|
||||
comments: data.comments.map((c) => ({
|
||||
id: c.id,
|
||||
authorId: c.author?.id || '',
|
||||
name: c.author?.fullname || '',
|
||||
avatar: c.author?.avatar_url || '',
|
||||
votes: c.votes,
|
||||
comment: c.body,
|
||||
createdAt: calDateDiff(c.created_at)
|
||||
})),
|
||||
totalComments: 0,
|
||||
courseId: data.course_id
|
||||
};
|
||||
}
|
||||
|
||||
let hasFetched = $state(false);
|
||||
function getCourses(userId: string | null, orgId: string) {
|
||||
if (hasFetched) return;
|
||||
|
||||
untrack(async () => {
|
||||
if ($courses.length) {
|
||||
fetchedCourses = [...$courses];
|
||||
hasFetched = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const coursesResults = await fetchCourses(userId, orgId);
|
||||
fetchedCourses = coursesResults?.allCourses || [];
|
||||
|
||||
hasFetched = true;
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchCommunityQuestion(slug: string) {
|
||||
if (!slug) return;
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('community_question')
|
||||
.select(
|
||||
`
|
||||
id,
|
||||
title,
|
||||
body,
|
||||
votes,
|
||||
created_at,
|
||||
course_id,
|
||||
slug,
|
||||
comments:community_answer(
|
||||
id,
|
||||
body,
|
||||
votes,
|
||||
created_at,
|
||||
author:profile(id, fullname, avatar_url)
|
||||
),
|
||||
author:profile(id, fullname, avatar_url),
|
||||
course!inner (
|
||||
title
|
||||
)
|
||||
`
|
||||
)
|
||||
.eq('slug', slug)
|
||||
.single();
|
||||
|
||||
if (error) {
|
||||
console.error('[ORG] Error loading community', error);
|
||||
return goto(`${$currentOrgPath}`);
|
||||
}
|
||||
|
||||
untrack(() => {
|
||||
question = mapResToQuestion(data);
|
||||
question.totalComments = question.comments.length;
|
||||
});
|
||||
}
|
||||
|
||||
async function submitComment() {
|
||||
errors = commentInCommunityValidation({ comment });
|
||||
console.log('submitComment errors', errors);
|
||||
|
||||
if (Object.keys(errors).length || !question) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('community_answer')
|
||||
.insert({
|
||||
id: undefined,
|
||||
body: comment,
|
||||
question_id: question.id,
|
||||
author_profile_id: $profile.id,
|
||||
votes: 0
|
||||
})
|
||||
.select();
|
||||
|
||||
if (error) {
|
||||
console.error('Error: commenting', error);
|
||||
snackbar.error('snackbar.community.error.try_again');
|
||||
} else {
|
||||
console.log('Success: commenting', data);
|
||||
|
||||
snackbar.success('snackbar.community.success.comment_submitted');
|
||||
|
||||
// Add to comment
|
||||
const _c = data?.[0];
|
||||
question.comments = [
|
||||
...question.comments,
|
||||
{
|
||||
id: _c.id,
|
||||
authorId: $profile.id || '',
|
||||
name: $profile?.fullname || '',
|
||||
avatar: $profile?.avatarUrl || '',
|
||||
votes: 0,
|
||||
comment: _c.body,
|
||||
createdAt: calDateDiff(_c.created_at)
|
||||
}
|
||||
];
|
||||
|
||||
// Reset input
|
||||
comment = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function upvoteQuestion(type: string, commentId?: string) {
|
||||
if (!question) return;
|
||||
|
||||
const isQuestion = type === 'question';
|
||||
|
||||
if (isQuestion && voted.question) return;
|
||||
if (!isQuestion && commentId && voted.comment[commentId]) return;
|
||||
|
||||
const table = isQuestion ? 'community_question' : 'community_answer';
|
||||
const matchId = isQuestion ? question.id : commentId;
|
||||
let votes = 0;
|
||||
|
||||
if (isQuestion) {
|
||||
question.votes = question.votes + 1;
|
||||
votes = question.votes;
|
||||
} else {
|
||||
question.comments = question.comments.map((c) => {
|
||||
if (c.id === commentId) {
|
||||
c.votes = c.votes + 1;
|
||||
votes = c.votes;
|
||||
}
|
||||
return c;
|
||||
});
|
||||
}
|
||||
const { error } = await supabase.from(table).update({ votes }).match({ id: matchId });
|
||||
if (error) {
|
||||
console.error('Error: upvoteQuestion', error);
|
||||
snackbar.error('snackbar.community.error.try_again');
|
||||
} else {
|
||||
if (isQuestion) {
|
||||
voted.question = true;
|
||||
} else if (commentId) {
|
||||
voted.comment[commentId] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleQuestionEdit() {
|
||||
if (!question) return;
|
||||
|
||||
if (isEditMode) {
|
||||
errors = askCommunityValidation(editContent);
|
||||
console.log('handleQuestionEdit errors', errors);
|
||||
|
||||
if (Object.keys(errors).length) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
isEditMode = !isEditMode;
|
||||
editorInstance = !editorInstance;
|
||||
|
||||
if (!isEditMode) {
|
||||
errors = askCommunityValidation(editContent);
|
||||
console.log('handleQuestionEdit errors', errors);
|
||||
|
||||
if (Object.keys(errors).length) {
|
||||
return;
|
||||
}
|
||||
const { error } = await supabase
|
||||
.from('community_question')
|
||||
.update({
|
||||
title: editContent.title,
|
||||
body: editContent.body,
|
||||
course_id: editContent.courseId
|
||||
})
|
||||
.match({ id: question.id });
|
||||
if (error) {
|
||||
console.error('Error: handleQuestionEdit', error);
|
||||
snackbar.error('snackbar.community.error.try_again');
|
||||
} else {
|
||||
question.title = editContent.title;
|
||||
question.body = editContent.body;
|
||||
question.courseId = editContent.courseId;
|
||||
|
||||
editContent.title = '';
|
||||
editContent.body = '';
|
||||
editContent.courseId = '';
|
||||
}
|
||||
} else {
|
||||
editContent.title = question.title;
|
||||
editContent.body = question.body;
|
||||
editContent.courseId = question.courseId;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(isQuestion: boolean) {
|
||||
if (!question) return;
|
||||
|
||||
if (!isQuestion) {
|
||||
deleteComment.isDeleting = true;
|
||||
|
||||
const { error } = await supabase.from('community_answer').delete().match({ id: deleteComment.commentId });
|
||||
|
||||
deleteComment.isDeleting = false;
|
||||
|
||||
if (error) {
|
||||
snackbar.error('snackbar.community.error.deleting_comments');
|
||||
console.log('Error deleting comments', error);
|
||||
return;
|
||||
}
|
||||
snackbar.success('snackbar.community.success.success_delete');
|
||||
|
||||
question.comments = question.comments.filter((c) => c.id !== deleteComment.commentId);
|
||||
deleteComment.shouldDelete = false;
|
||||
deleteComment.commentId = '';
|
||||
|
||||
// Handle only delete comment
|
||||
return;
|
||||
}
|
||||
deleteQuestion.isDeleting = true;
|
||||
|
||||
const { error: commentDeleteError } = await supabase
|
||||
.from('community_answer')
|
||||
.delete()
|
||||
.match({ question_id: deleteQuestion.questionId });
|
||||
|
||||
if (commentDeleteError) {
|
||||
snackbar.error('snackbar.community.error.deleting_comments');
|
||||
console.log('Error deleting comments', commentDeleteError);
|
||||
|
||||
deleteQuestion.isDeleting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const { error: questionDeleteError } = await supabase
|
||||
.from('community_question')
|
||||
.delete()
|
||||
.match({ id: deleteQuestion.questionId });
|
||||
|
||||
if (questionDeleteError) {
|
||||
snackbar.error('snackbar.community.error.deleting_question');
|
||||
console.log('Error deleting question', questionDeleteError);
|
||||
return;
|
||||
}
|
||||
|
||||
snackbar.success('snackbar.community.success.success_delete');
|
||||
goto(`${$currentOrgPath}/community`);
|
||||
deleteQuestion.isDeleting = false;
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
fetchCommunityQuestion(slug);
|
||||
});
|
||||
$effect(() => {
|
||||
if ($profile.id && $currentOrg.id) {
|
||||
getCourses($profile.id, $currentOrg.id);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{question?.title || $t('community.ask.question')}</title>
|
||||
<title>Question - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<CommunityDeleteModal
|
||||
bind:open={deleteComment.shouldDelete}
|
||||
isDeleting={deleteComment.isDeleting}
|
||||
onCancel={() => {
|
||||
deleteComment.shouldDelete = false;
|
||||
deleteComment.commentId = '';
|
||||
}}
|
||||
onDelete={() => handleDelete(false)}
|
||||
/>
|
||||
|
||||
{#if !question}
|
||||
<div class="mb-3 px-5 py-10">
|
||||
<Skeleton class="h-4 w-[25%]" />
|
||||
<Skeleton class="mb-2 h-4 w-full" />
|
||||
<Skeleton class="h-80 w-full" />
|
||||
</div>
|
||||
{:else}
|
||||
<Page.Root class="mx-auto max-w-3xl md:mx-10 lg:mb-20">
|
||||
<Page.Header>
|
||||
<Page.HeaderContent>
|
||||
{#if isEditMode}
|
||||
<div class="flex w-full items-center gap-2">
|
||||
<InputField bind:value={editContent.title} className="flex-1" errorMessage={errors.title} />
|
||||
<Select.Root type="single" bind:value={editContent.courseId}>
|
||||
<Select.Trigger class="h-full w-[25%]">
|
||||
<p>
|
||||
{editContent.courseId
|
||||
? fetchedCourses.find((course) => course.id === editContent.courseId)?.title
|
||||
: $t('community.ask.select_course')}
|
||||
</p>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each fetchedCourses as course}
|
||||
<Select.Item value={course.id || ''}>{course.title}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center gap-2">
|
||||
<Vote value={question.votes} upVote={() => upvoteQuestion('question')} disabled={voted.question} />
|
||||
<Page.Title>{question.title}</Page.Title>
|
||||
</div>
|
||||
{/if}
|
||||
</Page.HeaderContent>
|
||||
{#if question.author.id === $profile.id}
|
||||
<Page.Action>
|
||||
<Button variant="outline" onclick={handleQuestionEdit}>
|
||||
{isEditMode ? $t('community.ask.save') : $t('community.ask.edit')}
|
||||
</Button>
|
||||
{#if isEditMode}
|
||||
<Button variant="ghost" onclick={() => (isEditMode = !isEditMode)}>
|
||||
{$t('community.ask.cancel')}
|
||||
</Button>
|
||||
{/if}
|
||||
</Page.Action>
|
||||
{/if}
|
||||
</Page.Header>
|
||||
<Page.Body>
|
||||
{#snippet child()}
|
||||
<div class="border-gray my-1 rounded-lg border px-1">
|
||||
<header class="flex items-center justify-between p-2 leading-none">
|
||||
<div class="flex items-center text-black no-underline hover:underline">
|
||||
<Avatar.Root class="h-7 w-7">
|
||||
<Avatar.Image
|
||||
src={question.author.avatar ? question.author.avatar : '/logo-192.png'}
|
||||
alt={question.author.name ? question.author.name : 'User'}
|
||||
/>
|
||||
<Avatar.Fallback>{shortenName(question.author.name) || 'U'}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<p class="ml-2 text-sm dark:text-white">{question.author.name}</p>
|
||||
<p class="ml-2 text-sm text-gray-500 dark:text-white">
|
||||
{question.createdAt}
|
||||
</p>
|
||||
</div>
|
||||
{#if question.author.id === $profile.id || $isOrgAdmin}
|
||||
<IconButton
|
||||
onclick={() => {
|
||||
if (!question) return;
|
||||
|
||||
deleteQuestion.shouldDelete = true;
|
||||
deleteQuestion.questionId = question.id;
|
||||
}}
|
||||
>
|
||||
<TrashIcon size={16} />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</header>
|
||||
{#if isEditMode && editorInstance}
|
||||
<div class="my-2">
|
||||
<TextEditor
|
||||
placeholder="Give an answer"
|
||||
content={editContent.body}
|
||||
onChange={(content) => (editContent.body = content)}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<section class="prose prose-sm sm:prose p-2">
|
||||
{@html question.body}
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="my-8">
|
||||
{pluralize($t('community.answers'), question.totalComments, true)}
|
||||
</div>
|
||||
|
||||
{#each question.comments as comment}
|
||||
<div class="my-5 flex items-start px-1">
|
||||
<Vote
|
||||
value={comment.votes}
|
||||
upVote={() => upvoteQuestion('comment', comment.id)}
|
||||
disabled={voted.comment[comment.id]}
|
||||
/>
|
||||
<div class="border-gray w-full rounded-lg border">
|
||||
<header class="flex items-center justify-between p-2 leading-none">
|
||||
<div class="flex items-center text-black">
|
||||
<Avatar.Root class="h-7 w-7">
|
||||
<Avatar.Image
|
||||
src={comment.avatar ? comment.avatar : '/logo-192.png'}
|
||||
alt={comment.name ? comment.name : 'User'}
|
||||
/>
|
||||
<Avatar.Fallback>{shortenName(comment.name) || 'U'}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<p class="ml-2 text-sm dark:text-white">{comment.name}</p>
|
||||
<p class="ml-2 text-sm text-gray-500 dark:text-white">
|
||||
{comment.createdAt}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if isValidAnswer}
|
||||
<CircleCheckIcon size={16} />
|
||||
{/if}
|
||||
|
||||
{#if comment.authorId === $profile.id || $isOrgAdmin}
|
||||
<IconButton
|
||||
onclick={() => {
|
||||
deleteComment.shouldDelete = true;
|
||||
deleteComment.commentId = comment.id;
|
||||
}}
|
||||
>
|
||||
<TrashIcon size={16} />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</header>
|
||||
<article class="prose prose-sm sm:prose p-2">
|
||||
{@html comment.comment}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="mt-4">
|
||||
{#if !editorInstance}
|
||||
<TextEditor placeholder="Give an answer" content={comment} onChange={(content) => (comment = content)} />
|
||||
{/if}
|
||||
|
||||
<div class="mt-2 flex justify-end">
|
||||
<Button onclick={submitComment}>
|
||||
{$t('community.ask.comment')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Page.Body>
|
||||
</Page.Root>
|
||||
{/if}
|
||||
<CommunityQuestionPage slug={data.slug} isLMS={false} />
|
||||
|
||||
@@ -1,152 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
|
||||
import type { Course } from '$lib/utils/types';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
<script>
|
||||
import { AskCommunityPage } from '$features/community/pages';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { courses } from '$features/course/utils/store';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { snackbar } from '$features/ui/snackbar/store';
|
||||
import { fetchCourses } from '$lib/utils/services/courses';
|
||||
import generateSlug from '$lib/utils/functions/generateSlug';
|
||||
import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
|
||||
import { askCommunityValidation } from '$lib/utils/functions/validator';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
|
||||
import { InputField } from '@cio/ui/custom/input-field';
|
||||
import { TextEditor } from '$features/ui';
|
||||
import * as Page from '@cio/ui/base/page';
|
||||
|
||||
let errors: {
|
||||
title?: string;
|
||||
courseId?: string;
|
||||
body?: string;
|
||||
} = $state({});
|
||||
let fields = $state({
|
||||
title: '',
|
||||
body: '',
|
||||
courseId: ''
|
||||
});
|
||||
|
||||
let hasFetched = $state(false);
|
||||
let fetchedCourses: Course[] = $state([]);
|
||||
|
||||
async function getCourses(userId: string | null, orgId: string) {
|
||||
if (hasFetched) return;
|
||||
|
||||
if ($courses.length) {
|
||||
fetchedCourses = [...$courses];
|
||||
hasFetched = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const coursesResults = await fetchCourses(userId, orgId);
|
||||
if (!coursesResults) return;
|
||||
|
||||
fetchedCourses = coursesResults.allCourses;
|
||||
hasFetched = true;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
errors = askCommunityValidation(fields);
|
||||
console.log('handleSave errors', errors);
|
||||
|
||||
if (Object.keys(errors).length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data: question, error } = await supabase
|
||||
.from('community_question')
|
||||
.insert({
|
||||
title: fields.title,
|
||||
body: fields.body,
|
||||
organization_id: $currentOrg.id,
|
||||
author_profile_id: $profile.id,
|
||||
votes: 0,
|
||||
slug: generateSlug(fields.title),
|
||||
course_id: fields.courseId
|
||||
})
|
||||
.select();
|
||||
|
||||
if (error) {
|
||||
console.error('Error: asking question', error);
|
||||
snackbar.error('snackbar.community.error.try_again');
|
||||
} else {
|
||||
const slug = question[0]?.slug;
|
||||
|
||||
console.log('Success: asking question', question, slug);
|
||||
snackbar.success('snackbar.community.success.question_submitted');
|
||||
goto(`${$currentOrgPath}/community/${slug}`);
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if ($profile.id && $currentOrg.id) {
|
||||
getCourses($profile.id, $currentOrg.id);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Ask the Community - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<Page.Root>
|
||||
<Page.Root class="w-full">
|
||||
<Page.Header>
|
||||
<Page.HeaderContent>
|
||||
<Page.Title>{$t('community.ask.ask_the')}</Page.Title>
|
||||
</Page.HeaderContent>
|
||||
<Page.Action>
|
||||
<Button variant="default" onclick={handleSave}>
|
||||
{$t('community.ask.publish')}
|
||||
</Button>
|
||||
</Page.Action>
|
||||
</Page.Header>
|
||||
<Page.Body>
|
||||
{#snippet child()}
|
||||
<div class="mb-3 flex justify-between gap-x-5">
|
||||
<InputField
|
||||
bind:value={fields.title}
|
||||
placeholder={$t('community.ask.title')}
|
||||
errorMessage={errors.title}
|
||||
className="w-[75%]"
|
||||
/>
|
||||
<div class="w-[25%]">
|
||||
<Select.Root type="single" bind:value={fields.courseId}>
|
||||
<Select.Trigger class="h-full w-full">
|
||||
<p>
|
||||
{fields.courseId
|
||||
? fetchedCourses.find((course) => course.id === fields.courseId)?.title
|
||||
: $t('community.ask.select_course')}
|
||||
</p>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each fetchedCourses as course}
|
||||
{#if course.id}
|
||||
<Select.Item value={course.id}>{course.title}</Select.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
{#if errors.courseId}
|
||||
<p class="mt-1 text-sm text-red-500">
|
||||
{errors.courseId}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<TextEditor
|
||||
placeholder="Give an answer"
|
||||
content={fields.body}
|
||||
onChange={(content) => (fields.body = content)}
|
||||
/>
|
||||
|
||||
{#if errors.body}
|
||||
<p class="mt-2 text-sm text-red-500">{errors.body}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<AskCommunityPage isLMS={false} />
|
||||
{/snippet}
|
||||
</Page.Body>
|
||||
</Page.Root>
|
||||
|
||||
Reference in New Issue
Block a user