display comments with associated question

bcgov · Nov 23, 2023 · 1be6e78 · 1be6e78
1 parent 9e93cb2
commit 1be6e78
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 17 deletions.
diff --git a/met-api/src/met_api/models/comment.py b/met-api/src/met_api/models/comment.py
@@ -112,7 +112,7 @@ def get_accepted_comments_by_survey_id_paginated(
         if search_text:
             query = query.filter(Comment.text.ilike('%' + search_text + '%'))
 
-        query = query.order_by(Comment.id.desc())
+        query = query.order_by(Comment.id.asc())
 
         no_pagination_options = not pagination_options or not pagination_options.page or not pagination_options.size
         if no_pagination_options:

diff --git a/met-api/src/met_api/services/comment_service.py b/met-api/src/met_api/services/comment_service.py
@@ -82,7 +82,7 @@ def get_comments_paginated(cls, survey_id, pagination_options: PaginationOptions
         """Get comments paginated."""
         include_unpublished = CommentService.can_view_unapproved_comments(survey_id)
 
-        comment_schema = CommentSchema(many=True, only=('text', 'submission_date'))
+        comment_schema = CommentSchema(many=True, only=('text', 'submission_date', 'label', 'submission_id'))
         items, total = Comment.get_accepted_comments_by_survey_id_paginated(
             survey_id, pagination_options, search_text, include_unpublished)
         return {

diff --git a/met-web/src/components/engagement/dashboard/comment/CommentTable.tsx b/met-web/src/components/engagement/dashboard/comment/CommentTable.tsx
@@ -1,22 +1,61 @@
 import React, { useContext } from 'react';
 import MetTable from 'components/common/Table';
-import { Comment } from 'models/comment';
 import { HeadCell } from 'components/common/Table/types';
-import { Skeleton, Typography } from '@mui/material';
-import { CommentViewContext } from './CommentViewContext';
+import { MetLabel, MetParagraph } from 'components/common';
+import { Skeleton } from '@mui/material';
+import { CommentViewContext, TransformedComment } from './CommentViewContext';
+
+export interface CommentType {
+    label: string;
+    submission_date: string;
+    submission_id: number;
+    text: string;
+}
 
 const CommentTable = () => {
     const { isCommentsListLoading, comments, paginationOptions, pageInfo, handleChangePagination, tableLoading } =
         useContext(CommentViewContext);
 
-    const headCells: HeadCell<Comment>[] = [
+    const transformedArray: TransformedComment[] = comments.reduce((acc: TransformedComment[], comment) => {
+        const existingSubmission = acc.find((submission) => submission.submission_id === comment.submission_id);
+
+        if (existingSubmission) {
+            existingSubmission.comments.push({ label: comment.label, text: comment.text });
+        } else {
+            acc.push({
+                submission_id: comment.submission_id,
+                submission_date: comment.submission_date,
+                comments: [{ label: comment.label, text: comment.text }],
+            });
+        }
+
+        return acc;
+    }, []);
+
+    // Sort transformedArray in descending order based on submission_id
+    transformedArray.sort((a, b) => b.submission_id - a.submission_id);
+
+    const headCells: HeadCell<TransformedComment>[] = [
         {
-            key: 'text',
+            key: 'comments',
             numeric: false,
             disablePadding: false,
-            label: 'Content',
-            allowSort: true,
-            renderCell: (row: Comment) => row.text,
+            label: 'Comment',
+            allowSort: false,
+            customStyle: { width: '80%' },
+            align: 'left',
+            renderCell: (row: TransformedComment) => (
+                <>
+                    {row.comments.map((comment) => (
+                        <div style={{ paddingTop: '10px' }} key={comment.label}>
+                            <MetLabel>{comment.label}:</MetLabel>
+                            <div style={{ paddingTop: '5px' }}>
+                                <MetParagraph>{comment.text}</MetParagraph>
+                            </div>
+                        </div>
+                    ))}
+                </>
+            ),
         },
         {
             key: 'submission_date',
@@ -26,7 +65,7 @@ const CommentTable = () => {
             allowSort: false,
             customStyle: { width: '20%' },
             align: 'right',
-            renderCell: (row: Comment) => <Typography variant="subtitle2">{row.submission_date}</Typography>,
+            renderCell: (row: TransformedComment) => <MetParagraph>{row.submission_date}</MetParagraph>,
         },
     ];
 
@@ -38,7 +77,7 @@ const CommentTable = () => {
         <>
             <MetTable
                 headCells={headCells}
-                rows={comments}
+                rows={transformedArray}
                 hideHeader={true}
                 handleChangePagination={handleChangePagination}
                 paginationOptions={paginationOptions}

diff --git a/met-web/src/components/engagement/dashboard/comment/CommentViewContext.tsx b/met-web/src/components/engagement/dashboard/comment/CommentViewContext.tsx
@@ -11,14 +11,20 @@ import { Comment } from 'models/comment';
 import { createDefaultPageInfo, PageInfo, PaginationOptions } from 'components/common/Table/types';
 import { getEngagementIdBySlug } from 'services/engagementSlugService';
 
+export interface TransformedComment {
+    submission_id: number;
+    submission_date: string;
+    comments: { label: string; text: string }[];
+}
+
 export interface EngagementCommentContextProps {
     engagement: Engagement | null;
     comments: Comment[];
     isEngagementLoading: boolean;
     isCommentsListLoading: boolean;
-    paginationOptions: PaginationOptions<Comment>;
+    paginationOptions: PaginationOptions<TransformedComment>;
     pageInfo: PageInfo;
-    handleChangePagination: (_paginationOptions: PaginationOptions<Comment>) => void;
+    handleChangePagination: (_paginationOptions: PaginationOptions<TransformedComment>) => void;
     tableLoading: boolean;
 }
 
@@ -34,7 +40,7 @@ export const CommentViewContext = createContext<EngagementCommentContextProps>({
     comments: [],
     paginationOptions: { page: 0, size: 10 },
     pageInfo: { total: 0 },
-    handleChangePagination: (_paginationOptions: PaginationOptions<Comment>) => {
+    handleChangePagination: (_paginationOptions: PaginationOptions<TransformedComment>) => {
         throw new Error('Unimplemented');
     },
     tableLoading: false,
@@ -52,7 +58,7 @@ export const CommentViewProvider = ({ children }: { children: JSX.Element | JSX.
     const [isEngagementLoading, setEngagementLoading] = useState(true);
     const [isCommentsListLoading, setIsCommentsListLoading] = useState(true);
     const [comments, setComments] = useState<Comment[]>([]);
-    const [paginationOptions, setPaginationOptions] = useState<PaginationOptions<Comment>>({
+    const [paginationOptions, setPaginationOptions] = useState<PaginationOptions<TransformedComment>>({
         page: 1,
         size: 10,
     });
@@ -140,7 +146,7 @@ export const CommentViewProvider = ({ children }: { children: JSX.Element | JSX.
         }
     };
 
-    const handleChangePagination = (paginationOptions: PaginationOptions<Comment>) => {
+    const handleChangePagination = (paginationOptions: PaginationOptions<TransformedComment>) => {
         setPaginationOptions(paginationOptions);
     };