Merge 547af4b into e71423a

uzh-bf · Oct 2, 2024 · 359e6ad · 359e6ad
2 parents e71423a + 547af4b
commit 359e6ad
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 38 deletions.
diff --git a/apps/frontend-manage/src/components/sessions/Session.tsx b/apps/frontend-manage/src/components/sessions/Session.tsx
@@ -9,6 +9,7 @@ import {
   faPencil,
   faPlay,
   faTrash,
+  faUserGroup,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
@@ -21,8 +22,7 @@ import {
   SoftDeleteLiveSessionDocument,
   StartSessionDocument,
 } from '@klicker-uzh/graphql/dist/ops'
-import { Ellipsis } from '@klicker-uzh/markdown'
-import { Button, Collapsible, H3 } from '@uzh-bf/design-system'
+import { Button, Collapsible, H3, H4 } from '@uzh-bf/design-system'
 import dayjs from 'dayjs'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
@@ -319,40 +319,61 @@ function Session({ session }: SessionProps) {
             </div>
           }
         >
-          <div className="my-2 flex flex-row gap-2 overflow-y-scroll">
+          <div className="mb-6 mt-4 flex flex-row gap-4 overflow-x-auto overflow-y-hidden">
             {session.blocks?.map((block, index) => (
-              <div key={block.id} className="flex flex-col gap-1">
-                <div className="italic">
-                  {t('manage.sessions.blockXQuestions', {
-                    block: index + 1,
-                    questions: block.instances?.length,
-                  })}
-                </div>
-                {block.instances?.map((instance) => (
-                  <div
-                    key={instance.id}
-                    className="border-uzh-grey-100 w-60 rounded-md border border-solid text-sm"
-                  >
-                    <div className="bg-uzh-grey-40 flex flex-row justify-between px-1 py-0.5">
-                      <Ellipsis
-                        className={{ markdown: 'text-base font-bold' }}
-                        maxLength={20}
-                      >
-                        {instance.questionData!.name}
-                      </Ellipsis>
-
-                      <div className="italic">
-                        ({t(`shared.${instance.questionData!.type}.short`)})
-                      </div>
+              <div
+                key={block.id}
+                className="w-64 min-w-52 border-r border-black pr-4 last:border-r-0 last:pr-0"
+              >
+                <div className="flex flex-row justify-between">
+                  <H4>
+                    {t('shared.generic.blockN', {
+                      number: index + 1,
+                    })}
+                  </H4>
+                  {block.numOfParticipants ? (
+                    <div className="flex flex-row items-center">
+                      <div>{block.numOfParticipants}</div>
+                      <FontAwesomeIcon
+                        icon={faUserGroup}
+                        className="ml-1 w-4"
+                      />
                     </div>
-                    <Ellipsis
-                      maxLength={50}
-                      className={{ markdown: 'px-1 text-sm' }}
+                  ) : null}
+                </div>
+                <div>
+                  {block.instances?.map((instance) => (
+                    <Link
+                      href={`/questions/${instance.questionData!.questionId}`}
+                      className="text-sm hover:text-slate-700"
+                      key={instance.id}
+                      legacyBehavior
+                      passHref
                     >
-                      {instance.questionData!.content}
-                    </Ellipsis>
-                  </div>
-                ))}
+                      <a
+                        data-cy={`open-question-live-quiz-${instance.id}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <div className="hover:text-primary-100 flex flex-row items-center justify-between gap-1.5 border-b text-sm">
+                          <div>
+                            {instance.questionData?.name} (
+                            {t(`shared.${instance.questionData!.type}.short`)})
+                          </div>
+                          <FontAwesomeIcon
+                            icon={faArrowUpRightFromSquare}
+                            className="h-3 w-3"
+                          />
+                        </div>
+                      </a>
+                    </Link>
+                  ))}
+                </div>
+                <div className="float-right text-sm">
+                  {t('shared.generic.Nelements', {
+                    number: block.instances?.length,
+                  })}
+                </div>
               </div>
             ))}
           </div>

diff --git a/packages/graphql/src/graphql/ops/QGetUserSessions.graphql b/packages/graphql/src/graphql/ops/QGetUserSessions.graphql
@@ -19,10 +19,13 @@ query GetUserSessions {
     isModerationEnabled
     blocks {
       id
+      numOfParticipants
       instances {
         id
         questionData {
           id
+          questionId
+          elementId
           name
           type
           content

diff --git a/packages/graphql/src/ops.ts b/packages/graphql/src/ops.ts
diff --git a/packages/graphql/src/public/client.json b/packages/graphql/src/public/client.json
@@ -147,7 +147,7 @@
    "GetUserMediaFiles": "af5513e8c56c1805060f0e2854a4ada90c4484d09481f2ba2a59136cb731cd63",
    "GetUserQuestions": "f9331641afc625f609e2ece346ec6897d4bc997e755788867c06017b89fb4262",
    "GetUserRunningSessions": "ead3fc3a2dea6e39187b31df5fc85beeb2a51a824c4a305b061112a1730cdcc3",
-   "GetUserSessions": "917df48325aa30444e4e7097b5d9b9ae90f37550dcbe03cb921a44883ba9d1be",
+   "GetUserSessions": "788d8449fde1472539eddc707274a6400fb5085267e41677cb5350eea0fd758f",
    "GetUserTags": "cfc63cede68a95d79f5fe5a79c7f6275abae9c47b25fcfc665cc8d3e00bac3db",
    "GroupActivityDetails": "12eef1f0023e24aa29fe3a088aa89000984c03a73c58a71380e783a73a9262a5",
    "Participations": "76ac5a5c539e57e395109b5836a055573e43fb4b2e4ba6ab3b1374da8580d5c6",

diff --git a/packages/graphql/src/public/server.json b/packages/graphql/src/public/server.json
@@ -147,7 +147,7 @@
    "af5513e8c56c1805060f0e2854a4ada90c4484d09481f2ba2a59136cb731cd63": "query GetUserMediaFiles {\n  userMediaFiles {\n    id\n    name\n    type\n    href\n    __typename\n  }\n}",
    "f9331641afc625f609e2ece346ec6897d4bc997e755788867c06017b89fb4262": "query GetUserQuestions {\n  userQuestions {\n    id\n    name\n    status\n    type\n    content\n    pointsMultiplier\n    version\n    isArchived\n    isDeleted\n    createdAt\n    updatedAt\n    options\n    tags {\n      id\n      name\n      order\n      __typename\n    }\n    __typename\n  }\n}",
    "ead3fc3a2dea6e39187b31df5fc85beeb2a51a824c4a305b061112a1730cdcc3": "query GetUserRunningSessions {\n  userRunningSessions {\n    id\n    name\n    displayName\n    linkTo\n    course {\n      id\n      displayName\n      __typename\n    }\n    __typename\n  }\n}",
-   "917df48325aa30444e4e7097b5d9b9ae90f37550dcbe03cb921a44883ba9d1be": "query GetUserSessions {\n  userSessions {\n    id\n    name\n    displayName\n    namespace\n    pointsMultiplier\n    accessMode\n    status\n    createdAt\n    updatedAt\n    startedAt\n    finishedAt\n    numOfBlocks\n    numOfQuestions\n    isGamificationEnabled\n    isConfusionFeedbackEnabled\n    isLiveQAEnabled\n    isModerationEnabled\n    blocks {\n      id\n      instances {\n        id\n        questionData {\n          id\n          name\n          type\n          content\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    course {\n      id\n      name\n      displayName\n      __typename\n    }\n    __typename\n  }\n}",
+   "788d8449fde1472539eddc707274a6400fb5085267e41677cb5350eea0fd758f": "query GetUserSessions {\n  userSessions {\n    id\n    name\n    displayName\n    namespace\n    pointsMultiplier\n    accessMode\n    status\n    createdAt\n    updatedAt\n    startedAt\n    finishedAt\n    numOfBlocks\n    numOfQuestions\n    isGamificationEnabled\n    isConfusionFeedbackEnabled\n    isLiveQAEnabled\n    isModerationEnabled\n    blocks {\n      id\n      numOfParticipants\n      instances {\n        id\n        questionData {\n          id\n          questionId\n          elementId\n          name\n          type\n          content\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    course {\n      id\n      name\n      displayName\n      __typename\n    }\n    __typename\n  }\n}",
    "cfc63cede68a95d79f5fe5a79c7f6275abae9c47b25fcfc665cc8d3e00bac3db": "query GetUserTags {\n  userTags {\n    id\n    name\n    order\n    __typename\n  }\n}",
    "12eef1f0023e24aa29fe3a088aa89000984c03a73c58a71380e783a73a9262a5": "fragment ElementDataWithoutSolutions on ElementInstance {\n  elementData {\n    id\n    elementId\n    name\n    type\n    content\n    explanation\n    ... on ChoicesElementData {\n      options {\n        displayMode\n        choices {\n          ix\n          value\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    ... on NumericalElementData {\n      options {\n        accuracy\n        placeholder\n        unit\n        restrictions {\n          min\n          max\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    ... on FreeTextElementData {\n      options {\n        restrictions {\n          maxLength\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\nquery GroupActivityDetails($activityId: String!, $groupId: String!) {\n  groupActivityDetails(activityId: $activityId, groupId: $groupId) {\n    id\n    displayName\n    description\n    scheduledStartAt\n    scheduledEndAt\n    clues {\n      id\n      displayName\n      __typename\n    }\n    stacks {\n      id\n      type\n      displayName\n      description\n      order\n      elements {\n        id\n        type\n        elementType\n        ...ElementDataWithoutSolutions\n        __typename\n      }\n      __typename\n    }\n    course {\n      id\n      displayName\n      color\n      __typename\n    }\n    group {\n      id\n      name\n      participants {\n        id\n        username\n        avatar\n        isSelf\n        __typename\n      }\n      __typename\n    }\n    activityInstance {\n      id\n      clues {\n        id\n        displayName\n        type\n        unit\n        value\n        participant {\n          id\n          username\n          avatar\n          isSelf\n          __typename\n        }\n        __typename\n      }\n      decisions\n      decisionsSubmittedAt\n      results\n      resultsComputedAt\n      __typename\n    }\n    __typename\n  }\n}",
    "76ac5a5c539e57e395109b5836a055573e43fb4b2e4ba6ab3b1374da8580d5c6": "query Participations($endpoint: String) {\n  participations(endpoint: $endpoint) {\n    id\n    completedMicroLearnings\n    subscriptions {\n      id\n      endpoint\n      __typename\n    }\n    course {\n      id\n      displayName\n      startDate\n      endDate\n      description\n      isGamificationEnabled\n      microLearnings {\n        id\n        displayName\n        scheduledStartAt\n        scheduledEndAt\n        __typename\n      }\n      sessions {\n        id\n        displayName\n        linkTo\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}",

diff --git a/packages/graphql/src/services/sessions.ts b/packages/graphql/src/services/sessions.ts
@@ -1586,7 +1586,10 @@ export async function getUserSessions(ctx: ContextWithUser) {
 
   return user?.sessions.map((session) => ({
     ...session,
-    blocks: session.blocks,
+    blocks: session.blocks.map((block) => ({
+      ...block,
+      numOfParticipants: block.instances[0]?.participants,
+    })),
     course: session.course ? session.course : undefined,
     numOfBlocks: session._count?.blocks,
     numOfQuestions: session.blocks.reduce(

diff --git a/packages/i18n/messages/de.ts b/packages/i18n/messages/de.ts
@@ -195,6 +195,7 @@ export default {
       nonGamified: 'Nicht gamifiziert',
       blockN: 'Block {number}',
       elementN: 'Element {number}',
+      Nelements: '{number} Element(e)',
       stackN: 'Stack {number}',
       questionN: 'Frage {number}',
       clueN: 'Hinweis {number}',

diff --git a/packages/i18n/messages/en.ts b/packages/i18n/messages/en.ts
@@ -195,6 +195,7 @@ export default {
       nonGamified: 'Non-Gamified',
       blockN: 'Block {number}',
       elementN: 'Element {number}',
+      Nelements: '{number} element(s)',
       stackN: 'Stack {number}',
       questionN: 'Question {number}',
       clueN: 'Clue {number}',