From fba1362c7f525f749276d79d5f9ae7c4d86ea864 Mon Sep 17 00:00:00 2001
From: Henri Remonen <henri@remonen.fi>
Date: Fri, 6 Oct 2023 13:25:20 +0300
Subject: [PATCH] feat: update the organisation surveys to cards

---
 .../pages/Organisation/OrganisationSurveys.js | 44 ++++++++++++++-----
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/client/pages/Organisation/OrganisationSurveys.js b/src/client/pages/Organisation/OrganisationSurveys.js
index 0e70c5422..46a152e6a 100644
--- a/src/client/pages/Organisation/OrganisationSurveys.js
+++ b/src/client/pages/Organisation/OrganisationSurveys.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Box, Button, Typography } from '@mui/material'
+import { Card, CardContent, Box, Button, Typography, ListItemText } from '@mui/material'
 
 import { Link, useParams } from 'react-router-dom'
 
@@ -14,7 +14,7 @@ import useInteractiveMutation from '../../hooks/useInteractiveMutation'
 import Title from '../../components/common/Title'
 import { LoadingProgress } from '../../components/common/LoadingProgress'
 
-import { formateDates } from './utils'
+import { getStartAndEndString } from '../../util/getDateRangeString'
 
 const styles = {
   realisationContainer: {
@@ -34,27 +34,49 @@ const styles = {
   },
 }
 
-const OrganisationSurvey = ({ organisationSurvey }) => {
-  const { i18n } = useTranslation()
+const OrganisationSurveyItem = ({ organisationSurvey }) => {
+  const { t, i18n } = useTranslation()
   const { language } = i18n
-  const organisationSurveyDates = formateDates(organisationSurvey.courseRealisation)
+
+  const { courseRealisation } = organisationSurvey
+  const viewPath = `/targets/${organisationSurvey.id}/feedback`
+
+  const [startDate, endDate] = getStartAndEndString(courseRealisation.startDate, courseRealisation.endDate)
+  const periodInfo = t('common:feedbackOpenPeriod', {
+    opensAt: startDate,
+    closesAt: endDate,
+  })
 
   return (
-    <Box key={organisationSurvey.id} sx={styles.realisationContainer}>
+    <Card sx={{ mb: 3 }}>
+      <CardContent>
+        <Typography variant="body1" fontWeight={600} component="h2">
+          {organisationSurvey.name[language] || organisationSurvey.name}
+        </Typography>
+
+        <ListItemText primary={periodInfo} />
+
+        <Button color="primary" variant="outlined" component={Link} to={viewPath}>
+          {t('userFeedbacks:viewFeedbackSummary')}
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+/* <Box key={organisationSurvey.id} sx={styles.realisationContainer}>
       <Link to={`/targets/${organisationSurvey.id}/feedback`} sx={styles.realisationTitle} replace>
         {organisationSurvey.name[language] || organisationSurvey.name}
       </Link>
       <Typography variant="body2" component="p" sx={styles.dates}>
         {organisationSurveyDates}
       </Typography>
-    </Box>
-  )
-}
+    </Box> */
 
 const OrganisationSurveys = () => {
-  const [showForm, setShowForm] = useState(false)
   const { t } = useTranslation()
   const { code } = useParams()
+  const [showForm, setShowForm] = useState(false)
   const { surveys, isLoading: isOrganisationSurveysLoading } = useOrganisationSurveys(code)
   const mutation = useCreateOrganisationSurveyMutation(code)
 
@@ -114,7 +136,7 @@ const OrganisationSurveys = () => {
         />
 
         {surveys.map(survey => (
-          <OrganisationSurvey key={survey.id} organisationSurvey={survey} />
+          <OrganisationSurveyItem key={survey.id} organisationSurvey={survey} />
         ))}
       </Box>
     </>