feat: clean up manager rating ui

dean-s-list · Jul 28, 2024 · c43689b · c43689b
1 parent a1b46e0
commit c43689b
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 72 deletions.
diff --git a/libs/api/rating/data-access/src/lib/api-manager-rating.service.ts b/libs/api/rating/data-access/src/lib/api-manager-rating.service.ts
@@ -1,4 +1,5 @@
 import { ApiCoreService } from '@deanslist-platform/api-core-data-access'
+import { ProjectStatus } from '@deanslist-platform/sdk'
 import { Injectable } from '@nestjs/common'
 import { ManagerCreateRatingInput } from './dto/manager-create-rating.input'
 import { ManagerUpdateRatingInput } from './dto/manager-update-rating.input'
@@ -8,7 +9,15 @@ export class ApiManagerRatingService {
   constructor(private readonly core: ApiCoreService) {}
 
   async createRating(userId: string, input: ManagerCreateRatingInput) {
-    await this.ensureCommentProjectManager(userId, input.commentId)
+    const comment = await this.ensureCommentProjectManager(userId, input.commentId)
+
+    if (!comment) {
+      throw new Error(`Comment not found`)
+    }
+
+    if (comment.review.project.status !== ProjectStatus.Closed) {
+      throw new Error('You can only rate closed projects')
+    }
 
     return this.core.data.rating.create({ data: { ...input, authorId: userId } })
   }

diff --git a/libs/web/comment/feature/src/lib/manager-comment-list.feature.tsx b/libs/web/comment/feature/src/lib/manager-comment-list.feature.tsx
@@ -3,7 +3,7 @@ import { ManagerCommentUiTimeline } from '@deanslist-platform/web-comment-ui'
 import { CoreUiDebugModal, CoreUiSearchField } from '@deanslist-platform/web-core-ui'
 import { useManagerRating } from '@deanslist-platform/web-rating-data-access'
 import { Group } from '@mantine/core'
-import { UiInfo, UiLoader, UiStack } from '@pubkey-ui/core'
+import { UiGroup, UiInfo, UiLoader, UiStack } from '@pubkey-ui/core'
 
 export function ManagerCommentListFeature({ projectId }: { projectId: string }) {
   const { items, query, setSearch } = useManagerFindManyComment({
@@ -14,10 +14,13 @@ export function ManagerCommentListFeature({ projectId }: { projectId: string })
 
   return (
     <UiStack>
-      <Group>
-        <CoreUiSearchField placeholder="Search comments" setSearch={setSearch} />
-        <CoreUiDebugModal data={items} />
-      </Group>
+      <UiGroup>
+        <div />
+        <Group>
+          <CoreUiSearchField size="sm" placeholder="Search comments" setSearch={setSearch} />
+          <CoreUiDebugModal data={items} />
+        </Group>
+      </UiGroup>
 
       {query.isLoading ? (
         <UiLoader />

diff --git a/libs/web/comment/ui/src/lib/comment-ui-comment.tsx b/libs/web/comment/ui/src/lib/comment-ui-comment.tsx
@@ -28,7 +28,7 @@ export function CommentUiComment({
             <UserUiAvatar size="sm" user={comment.author} />
             <Stack gap="xs">
               <Group gap="xs" align="center">
-                <UiAnchor display="flex" to={comment.author.profileUrl} underline="never">
+                <UiAnchor display="flex" to={to ? undefined : comment.author.profileUrl} underline="never">
                   <Text span fw={700}>
                     {comment.author.username}
                   </Text>

diff --git a/libs/web/comment/ui/src/lib/manager-comment-ui-timeline-item.tsx b/libs/web/comment/ui/src/lib/manager-comment-ui-timeline-item.tsx
@@ -1,10 +1,12 @@
 import { Comment, ManagerCreateRatingInput, ManagerUpdateRatingInput } from '@deanslist-platform/sdk'
-import { CoreUiDebugModal } from '@deanslist-platform/web-core-ui'
-import { Button, Collapse, Group, Rating as MantineRating } from '@mantine/core'
-import { useDisclosure } from '@mantine/hooks'
-import { UiGroup, UiStack } from '@pubkey-ui/core'
-import { IconMessage } from '@tabler/icons-react'
+import { CoreUiDivider } from '@deanslist-platform/web-core-ui'
+import { ActionIcon, Button, Group, Rating as MantineRating } from '@mantine/core'
+import { UiStack } from '@pubkey-ui/core'
+import { IconArrowsMaximize, IconArrowsMinimize, IconExternalLink } from '@tabler/icons-react'
+import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
 import { CommentUiComment } from './comment-ui-comment'
+import { CommentUiDetailsPopover } from './comment-ui-details-popover'
 import { ManagerCommentUiRating } from './manager-comment-ui-rating'
 
 export function ManagerCommentUiTimelineItem({
@@ -18,51 +20,55 @@ export function ManagerCommentUiTimelineItem({
   deleteRating: (ratingId: string) => Promise<boolean>
   updateRating: (ratingId: string, res: ManagerUpdateRatingInput) => Promise<boolean>
 }) {
-  const viewUrl = comment.review?.viewUrl ?? null
-  const [opened, { toggle }] = useDisclosure(false)
+  const [showReplies, setShowReplies] = useState(false)
 
   return (
-    <UiStack key={comment.id} gap="xs">
-      <CommentUiComment
-        comment={comment}
-        footer={
-          <UiStack>
+    <UiStack key={comment.id}>
+      <UiStack key={comment.id} gap="xs">
+        <CommentUiComment
+          comment={comment}
+          action={
+            <Group>
+              <MantineRating fractions={2} size="sm" readOnly value={comment.ratingAverage ?? 0} />
+              {comment?.review?.viewUrl ? (
+                <ActionIcon variant="light" size="sm" component={Link} to={comment.review.viewUrl}>
+                  <IconExternalLink size={16} />
+                </ActionIcon>
+              ) : null}
+            </Group>
+          }
+        />
+
+        <UiStack gap="xs">
+          <Group justify="flex-end" wrap="nowrap">
+            <CommentUiDetailsPopover comment={comment} />
+            <Button
+              size="xs"
+              radius="xl"
+              rightSection={showReplies ? <IconArrowsMinimize size={16} /> : <IconArrowsMaximize size={16} />}
+              disabled={comment.children?.length === 0}
+              variant="light"
+              onClick={() => setShowReplies(!showReplies)}
+            >
+              {showReplies ? 'Collapse' : 'Expand'} replies{' '}
+              {comment.children?.length ? `(${comment.children.length})` : ''}
+            </Button>
+          </Group>
+          {showReplies && comment.children?.length ? (
             <UiStack>
-              <ManagerCommentUiRating
-                comment={comment}
-                create={createRating}
-                delete={deleteRating}
-                update={updateRating}
-              />
-              <UiGroup>
-                <MantineRating fractions={2} size="sm" readOnly value={comment.ratingAverage ?? 0} />
-                <Group>
-                  <CoreUiDebugModal data={comment} />
-                  <Button variant="light" size="xs" onClick={toggle} leftSection={<IconMessage size={16} />}>
-                    {opened ? 'Hide' : 'Show'} {comment.children?.length ?? 0} replies
-                  </Button>
-                </Group>
-              </UiGroup>
-            </UiStack>
-            <UiGroup>
-              <div />
-            </UiGroup>
-            <Collapse in={opened} transitionDuration={300} transitionTimingFunction="linear">
-              {comment.children?.length ? (
-                <UiStack ml="xl" gap="xs">
-                  {comment.children.map((child) => (
-                    <CommentUiComment
-                      key={child.id}
-                      comment={child}
-                      to={viewUrl ? `${viewUrl}#comment=${comment.id}` : null}
-                    />
-                  ))}
+              {comment.children.map((child) => (
+                <UiStack key={child.id}>
+                  <UiStack ml="xl" pl="xl">
+                    <CoreUiDivider />
+                    <CommentUiComment key={child.id} comment={child} />
+                  </UiStack>
                 </UiStack>
-              ) : null}
-            </Collapse>
-          </UiStack>
-        }
-      />
+              ))}
+            </UiStack>
+          ) : null}
+        </UiStack>
+      </UiStack>
+      <ManagerCommentUiRating comment={comment} create={createRating} delete={deleteRating} update={updateRating} />
     </UiStack>
   )
 }
diff --git a/libs/web/comment/ui/src/lib/manager-comment-ui-timeline.tsx b/libs/web/comment/ui/src/lib/manager-comment-ui-timeline.tsx
@@ -1,5 +1,7 @@
 import { Comment, ManagerCreateRatingInput, ManagerUpdateRatingInput } from '@deanslist-platform/sdk'
+import { CoreUiDivider } from '@deanslist-platform/web-core-ui'
 import { UiStack } from '@pubkey-ui/core'
+import React from 'react'
 import { ManagerCommentUiTimelineItem } from './manager-comment-ui-timeline-item'
 
 export function ManagerCommentUiTimeline({
@@ -16,13 +18,16 @@ export function ManagerCommentUiTimeline({
   return (
     <UiStack>
       {comments.map((comment) => (
-        <ManagerCommentUiTimelineItem
-          key={comment.id}
-          comment={comment}
-          createRating={createRating}
-          deleteRating={deleteRating}
-          updateRating={updateRating}
-        />
+        <UiStack key={comment.id}>
+          <CoreUiDivider />
+          <ManagerCommentUiTimelineItem
+            key={comment.id}
+            comment={comment}
+            createRating={createRating}
+            deleteRating={deleteRating}
+            updateRating={updateRating}
+          />
+        </UiStack>
       ))}
     </UiStack>
   )

diff --git a/libs/web/comment/ui/src/lib/manager-rating-ui-form.tsx b/libs/web/comment/ui/src/lib/manager-rating-ui-form.tsx
@@ -1,4 +1,5 @@
 import { User } from '@deanslist-platform/sdk'
+import { cardGradient } from '@deanslist-platform/web-core-ui'
 import { UserUiAvatar } from '@deanslist-platform/web-user-ui'
 import { ActionIcon, Flex, Rating as MantineRating, Textarea } from '@mantine/core'
 import { useForm } from '@mantine/form'
@@ -32,15 +33,16 @@ export function ManagerRatingUiForm({
     >
       <Flex align="center" gap="xs">
         {author ? <UserUiAvatar user={author} to={author.profileUrl} size="sm" /> : <div />}
-        <MantineRating size="xs" readOnly={disabled} {...form.getInputProps('rating')} />
         <Textarea
+          styles={{ input: { border: 'none', ...cardGradient } }}
           disabled={disabled}
           style={{ width: '100%' }}
           size="xs"
           rows={1}
           placeholder="Write a comment about the rating."
           {...form.getInputProps('content')}
         />
+        <MantineRating size="xs" readOnly={disabled} {...form.getInputProps('rating')} />
         {disabled ? null : (
           <ActionIcon type="submit" disabled={!form.isDirty()}>
             <IconCheck size={16} stroke={1.5} />

diff --git a/libs/web/project/feature/src/lib/manager-project-detail-ratings-tab.tsx b/libs/web/project/feature/src/lib/manager-project-detail-ratings-tab.tsx
@@ -1,25 +1,16 @@
 import { ManagerCommentFeature } from '@deanslist-platform/web-comment-feature'
 import { useManagerFindOneProject } from '@deanslist-platform/web-project-data-access'
-import { ManagerProjectReviewFeature } from '@deanslist-platform/web-review-feature'
-import { SimpleGrid } from '@mantine/core'
 import { UiError, UiLoader } from '@pubkey-ui/core'
-import { useRoutes } from 'react-router-dom'
 
 export function ManagerProjectDetailRatingsTab({ projectId }: { projectId: string }) {
   const { item, query } = useManagerFindOneProject({ projectId })
 
-  const routes = useRoutes([{ path: '*', element: <ManagerProjectReviewFeature projectId={projectId} /> }])
   if (query.isLoading) {
     return <UiLoader />
   }
   if (!item) {
     return <UiError message="Project not found." />
   }
 
-  return (
-    <SimpleGrid cols={{ base: 1, lg: 2 }}>
-      <ManagerCommentFeature projectId={projectId} />
-      {routes}
-    </SimpleGrid>
-  )
+  return <ManagerCommentFeature projectId={projectId} />
 }
diff --git a/libs/web/project/feature/src/lib/manager-project-list-feature.tsx b/libs/web/project/feature/src/lib/manager-project-list-feature.tsx
@@ -36,7 +36,7 @@ export function ManagerProjectListFeature({ communityId }: { communityId?: strin
               if (!status) return
               setStatus(status as ProjectStatus)
             }}
-            data={getEnumOptions(ProjectStatus).filter((item) => item.value !== ProjectStatus.Draft)}
+            data={getEnumOptions(ProjectStatus)}
           />
           <CoreUiCustomSelect
             label="Order by"