feat: CR view betterments

UniversityOfHelsinkiCS · Oct 24, 2023 · 94ffb3c · 94ffb3c
1 parent 6a7dbe2
commit 94ffb3c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/src/client/components/CalculatorPreview.tsx b/src/client/components/CalculatorPreview.tsx
@@ -37,8 +37,8 @@ const CalculatorPreview = ({
       </DataTable>
       <DataTable>
         <tbody>
-          <TableItem label={t('calculatorFields.workHourExceptions')} value={workHourExceptions} copy={copy} />
-          <TableItem label={t('calculatorFields.salaryExceptions')} value={salaryExceptions} copy={copy} />
+          <TableItem label={t('calculatorFields.workHourExceptions')} value={workHourExceptions} copy={false} />
+          <TableItem label={t('calculatorFields.salaryExceptions')} value={salaryExceptions} copy={false} />
         </tbody>
       </DataTable>
     </Box>

diff --git a/src/client/components/CustomTable.tsx b/src/client/components/CustomTable.tsx
@@ -12,12 +12,16 @@ export const TableItem = ({ label, value, extra, copy = true }: { label: string;
   const shownExtra = value ? extra : t('common.missing')
 
   return (
-    <tr onClick={copy ? () => value && copyToClipboard('' + value, t('common.copySuccess')) : undefined} style={{ cursor: value && copy ? 'copy' : 'inherit' }}>
-      <td>{label}</td>
+    <tr onClick={copy ? () => value && copyToClipboard('' + value, t('common.copySuccess', { content: value })) : undefined} style={{ cursor: value && copy ? 'copy' : 'inherit' }}>
+      <td style={{ width: '40%' }}>
+        <Typography level="body-xs" whiteSpace="break-spaces">
+          {label}
+        </Typography>
+      </td>
       <td>
-        <Box display="flex" gap="1rem" alignItems="end">
-          {value && value}
-          {shownExtra && <Typography level="body-sm">{shownExtra}</Typography>}
+        <Box display="flex" flexWrap="wrap" columnGap="1rem" alignItems="end">
+          {value && <Typography whiteSpace="break-spaces">{value}</Typography>}
+          {shownExtra && <Typography level="body-xs">{shownExtra}</Typography>}
         </Box>
       </td>
     </tr>
@@ -27,7 +31,6 @@ export const TableItem = ({ label, value, extra, copy = true }: { label: string;
 export const DataTable = ({ children, copy = false, hover = false }: { children: React.ReactNode; copy?: boolean; hover?: boolean }) => (
   <Sheet variant="outlined" sx={{ borderRadius: 'sm' }}>
     <Table
-      noWrap
       hoverRow={copy || hover}
       sx={{
         '--TableCell-headBackground': (theme) => theme.vars.palette.background.level2,

diff --git a/src/client/pages/ContractRequestView.tsx b/src/client/pages/ContractRequestView.tsx
@@ -40,7 +40,9 @@ const FormattedFormData = ({ formData }: { formData: ContractRequestFormParams }
     <DataTable copy>
       <thead style={{ height: '3rem' }}>
         <tr>
-          <th scope="col">{t('common.fieldName')}</th>
+          <th scope="col" style={{ width: '40%' }}>
+            {t('common.fieldName')}
+          </th>
           <th scope="col">{t('common.fieldValue')}</th>
         </tr>
       </thead>
@@ -56,7 +58,7 @@ const FormattedFormData = ({ formData }: { formData: ContractRequestFormParams }
         <TableItem label={t('formFields.courseEndDate')} value={formData.courseEndDate} />
         <TableItem label={t('formFields.contractStartDate')} value={formData.contractStartDate} extra={contractDisplay(formData.contractDuration)} />
         <TableItem label={t('formFields.contractEndDate')} value={formData.contractEndDate} extra={contractDisplay(formData.contractDuration)} />
-        <TableItem label={t('formFields.additionalInfos')} value={formData.additionalInfo} />
+        <TableItem label={t('formFields.additionalInfos')} value={formData.additionalInfo} copy={false} />
       </tbody>
     </DataTable>
   )

diff --git a/src/shared/locales/fi/translation.ts b/src/shared/locales/fi/translation.ts
@@ -3,7 +3,7 @@ const translations = {
     additionalInfo: 'Lisätietoa',
     hours: 'tuntia',
     missing: 'Puuttuu',
-    copySuccess: 'Kopioitu leikepöydälle',
+    copySuccess: 'Sisältö kopioitu leikepöydälle: {{content}}',
     sender: 'Lähettäjä',
     dateShort: 'Pvm',
     facultyShort: 'TDK',