Show Finnish and English/Swedish result texts side by side

UniversityOfHelsinkiCS · Mar 27, 2023 · 074efaf · 074efaf
1 parent 3b151a6
commit 074efaf
Showing 1 changed file with 35 additions and 10 deletions.
diff --git a/src/client/components/Admin/EditResults/EditResults.tsx b/src/client/components/Admin/EditResults/EditResults.tsx
@@ -16,7 +16,7 @@ import useEditResultMutation from '../../../hooks/useEditResultMutation'
 import { getDimensions } from '../../../util/dimensions'
 import { DimensionSelect, QuestionSelect, LanguageSelect } from './Select'
 
-const EditResult = ({
+const ResultItem = ({
   dimensionId,
   language,
   options,
@@ -28,7 +28,6 @@ const EditResult = ({
   result: Result
 }) => {
   const { t } = useTranslation()
-
   const mutation = useEditResultMutation(result.id)
 
   const { isSelected, optionLabel, data } = result
@@ -59,7 +58,7 @@ const EditResult = ({
   }
 
   return (
-    <Box mb={5}>
+    <Box m={1} width="50%">
       <Typography mb={1} variant="h5">
         {optionData.label[language]}
       </Typography>
@@ -75,12 +74,38 @@ const EditResult = ({
         value={value}
         onChange={(event) => setValue(event.target.value)}
       />
-
       <Button onClick={handleSave}>{t('admin:save')}</Button>
     </Box>
   )
 }
 
+const EditResult = ({
+  dimensionId,
+  language,
+  options,
+  result,
+}: {
+  dimensionId: string
+  language: keyof Locales
+  options: ChoiceType
+  result: Result
+}) => (
+  <Box mb={5} display="flex">
+    <ResultItem
+      dimensionId={dimensionId}
+      language={'fi' as keyof Locales}
+      options={options}
+      result={result}
+    />
+    <ResultItem
+      dimensionId={dimensionId}
+      language={language}
+      options={options}
+      result={result}
+    />
+  </Box>
+)
+
 const EditResults = () => {
   const [dimensionId, setDimensionId] = useState('allDimensions')
   const handleDimensionChange = (event: SelectChangeEvent) => {
@@ -115,11 +140,7 @@ const EditResults = () => {
 
   return (
     <Box my={5} mx={10}>
-      <Box mb={3} display="flex">
-        <LanguageSelect
-          selectedLanguage={selectedLanguage}
-          handleChange={handleLanguageChange}
-        />
+      <Box mb={3} width="90vw" display="flex">
         <DimensionSelect
           dimensionId={dimensionId}
           dimensions={dimensions}
@@ -130,8 +151,12 @@ const EditResults = () => {
           questions={survey.Questions}
           handleChange={handleQuestionChange}
         />
+        <LanguageSelect
+          selectedLanguage={selectedLanguage}
+          handleChange={handleLanguageChange}
+        />
       </Box>
-      <Box flexWrap="wrap">
+      <Box width="100%" flexWrap="wrap">
         {filteredResults.map((result) => (
           <EditResult
             key={result.id}