Merge pull request #133 from dedis/front-preview-election

Preview election form & fix UI bugs

Author: cmsigrist

web/frontend/src/components/utils/useConfiguration.tsx

@@ -1,11 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Answers, Configuration } from 'types/configuration';
-import { emptyConfiguration, newAnswer } from 'types/getObjectType';
-import {
-  unmarshalConfig,
-  unmarshalConfigAndCreateAnswers,
-  unmarshalSubjectAndCreateAnswers,
-} from 'types/JSONparser';
+import { emptyConfiguration } from 'types/getObjectType';
+import { unmarshalConfig, unmarshalConfigAndCreateAnswers } from 'types/JSONparser';
 
 // Returns a Configuration and the initialized Answers
 const useConfiguration = (configObj: any) => {
@@ -40,23 +36,4 @@ const useConfigurationOnly = (configObj: any) => {
   return configuration;
 };
 
-// Custom hook to create answers from a Configuration.
-const useAnswers = (configuration: Configuration) => {
-  const [answers, setAnswers] = useState<Answers>(null);
-
-  useEffect(() => {
-    if (configuration !== null) {
-      const newAnswers: Answers = newAnswer();
-
-      for (const subjectObj of configuration.Scaffold) {
-        unmarshalSubjectAndCreateAnswers(subjectObj, newAnswers);
-      }
-
-      setAnswers(newAnswers);
-    }
-  }, [configuration]);
-
-  return { answers, setAnswers };
-};
-
-export { useConfiguration, useConfigurationOnly, useAnswers };
+export { useConfiguration, useConfigurationOnly };

web/frontend/src/language/en.json

@@ -69,6 +69,7 @@
     "combineShares": "Combine shares",
     "createElec": "Create election",
     "clearElec": "Clear election",
+    "elecName": "Election title",
     "confirmRemovesubject": "Do you really want to remove this subject?",
     "confirmRemovetext": "Do you really want to remove this text?",
     "confirmRemoverank": "Do you really want to remove this rank?",

web/frontend/src/pages/ballot/Show.tsx

@@ -137,7 +137,7 @@ const Ballot: FC = () => {
                 </h2>
                 <div className="mt-2 text-sm text-gray-500">{t('voteExplanation')}</div>
               </div>
-
+              <div className="border-t mt-3" />
               <BallotDisplay
                 configuration={configuration}
                 answers={answers}

web/frontend/src/pages/ballot/components/BallotDisplay.tsx

@@ -40,7 +40,7 @@ const BallotDisplay: FC<BallotDisplayProps> = ({
   const SubjectTree = (subject: types.Subject) => {
     return (
       <div key={subject.ID}>
-        <h3 className="text-xl pt-1 pb-1 sm:pt-2 sm:pb-2 border-t font-bold text-gray-600">
+        <h3 className="text-xl break-all pt-1 pb-1 sm:pt-2 sm:pb-2 border-t font-bold text-gray-600">
           {subject.Title}
         </h3>
         {subject.Order.map((id: ID) => (
@@ -61,7 +61,7 @@ const BallotDisplay: FC<BallotDisplayProps> = ({
   return (
     <DragDropContext onDragEnd={(dropRes) => handleOnDragEnd(dropRes, answers, setAnswers)}>
       <div className="w-full mb-0 sm:mb-4 mt-4 sm:mt-6">
-        <h3 className="py-6 border-t text-2xl text-center text-gray-700">
+        <h3 className="pb-6 break-all text-2xl text-center text-gray-700">
           {configuration.MainTitle}
         </h3>
         <div className="flex flex-col">

web/frontend/src/pages/ballot/components/Rank.tsx

@@ -78,7 +78,7 @@ const Rank: FC<RankProps> = ({ rank, answers }) => {
 
   return (
     <div className="mb-6">
-      <h3 className="text-lg text-gray-600">{rank.Title}</h3>
+      <h3 className="text-lg break-words text-gray-600">{rank.Title}</h3>
       <div className="mt-5 px-4 max-w-[300px] sm:pl-8 sm:max-w-md">
         <>
           <Droppable droppableId={String(rank.ID)}>

web/frontend/src/pages/ballot/components/Select.tsx

@@ -66,7 +66,7 @@ const Select: FC<SelectProps> = ({ select, answers, setAnswers }) => {
           checked={isChecked}
           onChange={(e) => handleChecks(e, choiceIndex)}
         />
-        <label htmlFor={choice} className="pl-2 text-gray-600 cursor-pointer">
+        <label htmlFor={choice} className="pl-2 break-words text-gray-600 cursor-pointer">
           {choice}
         </label>
       </div>
@@ -75,7 +75,7 @@ const Select: FC<SelectProps> = ({ select, answers, setAnswers }) => {
 
   return (
     <div>
-      <h3 className="text-lg text-gray-600">{select.Title}</h3>
+      <h3 className="text-lg break-words text-gray-600">{select.Title}</h3>
       {hintDisplay()}
       <div className="sm:pl-8 pl-6">
         {Array.from(answers.SelectAnswers.get(select.ID).entries()).map(

web/frontend/src/pages/ballot/components/Text.tsx

@@ -73,23 +73,23 @@ const Text: FC<TextProps> = ({ text, answers, setAnswers }) => {
     const newCount = new Array<number>();
     answers.TextAnswers.get(text.ID).map((answer) => newCount.push(answer.length));
     setCharCounts(newCount);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [answers]);
 
   const choiceDisplay = (choice: string, choiceIndex: number) => {
     const columns = text.MaxLength > 50 ? 50 : text.MaxLength;
     return (
-      <div className="flex mb-2 " key={choice}>
-        <label htmlFor={choice} className="text-gray-600 text-md">
-          {choice == '' ? '' : choice + ': '}
+      <div className="flex mb-2  md:flex-row flex-col" key={choice}>
+        <label htmlFor={choice} className="text-gray-600 mr-2 w-24 break-words text-md">
+          {choice + ': '}
         </label>
 
         <textarea
           id={choice}
-          className="mx-2 sm:text-md border rounded-md text-gray-600 "
+          className="mx-2 w-[50%] sm:text-md resize-none border rounded-md text-gray-600 "
           rows={charCounts[choiceIndex] > 0 ? Math.ceil(charCounts[choiceIndex] / columns) : 1}
           //rows={text.MaxLength > 0 ? Math.ceil(text.MaxLength / columns) : 1}
           cols={columns}
-          style={{ resize: 'none' }}
           onChange={(e) => handleTextInput(e, choiceIndex)}></textarea>
         <div className="self-end">{charCountDisplay(choiceIndex)}</div>
       </div>
@@ -98,7 +98,7 @@ const Text: FC<TextProps> = ({ text, answers, setAnswers }) => {
 
   return (
     <div>
-      <h3 className="text-lg text-gray-600">{text.Title}</h3>
+      <h3 className="text-lg break-words text-gray-600">{text.Title}</h3>
       {hintDisplay()}
       <div className="sm:pl-8 mt-2 pl-6">
         {text.Choices.map((choice, index) => choiceDisplay(choice, index))}

web/frontend/src/pages/election/Index.tsx

@@ -16,6 +16,7 @@ const ElectionIndex: FC = () => {
   const [statusToKeep, setStatusToKeep] = useState<Status>(null);
   const [elections, setElections] = useState<LightElectionInfo[]>(null);
   const [loading, setLoading] = useState(true);
+  const [pageIndex, setPageIndex] = useState(0);
 
   const request = {
     method: 'GET',
@@ -46,6 +47,7 @@ const ElectionIndex: FC = () => {
       (election) => election.Status === statusToKeep
     );
 
+    setPageIndex(0);
     setElections(filteredElections);
   }, [data, statusToKeep]);
 
@@ -68,7 +70,7 @@ const ElectionIndex: FC = () => {
           </div>
 
           <ElectionTableFilter setStatusToKeep={setStatusToKeep} />
-          <ElectionTable elections={elections} />
+          <ElectionTable pageIndex={pageIndex} setPageIndex={setPageIndex} elections={elections} />
         </div>
       ) : (
         <Loading />

web/frontend/src/pages/election/components/ElectionForm.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, useState } from 'react';
+import { FC, Fragment, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { newElection } from 'components/utils/Endpoints';
 
@@ -17,6 +17,8 @@ import RedirectToModal from 'components/modal/RedirectToModal';
 import { CheckIcon, PlusSmIcon } from '@heroicons/react/outline';
 import Tabs from './Tabs';
 import RemoveElementModal from './RemoveElementModal';
+import { useConfiguration } from 'components/utils/useConfiguration';
+import BallotDisplay from 'pages/ballot/components/BallotDisplay';
 
 // notifyParent must be used by the child to tell the parent if the subject's
 // schema changed.
@@ -40,8 +42,15 @@ const ElectionForm: FC<ElectionFormProps> = () => {
   const [subjectIdToRemove, setSubjectIdToRemove] = useState<ID>('');
   const [titleChanging, setTitleChanging] = useState<boolean>(true);
   const [navigateDestination, setNavigateDestination] = useState(null);
+  const [marshalledConf, setMarshalledConf] = useState<any>(marshalConfig(conf));
+  const { configuration: previewConf, answers, setAnswers } = useConfiguration(marshalledConf);
+
   const { MainTitle, Scaffold } = conf;
 
+  useEffect(() => {
+    setMarshalledConf(marshalConfig(conf));
+  }, [conf]);
+
   async function createHandler() {
     const data = {
       Configuration: marshalConfig(conf),
@@ -149,7 +158,9 @@ const ElectionForm: FC<ElectionFormProps> = () => {
               </>
             ) : (
               <>
-                <div className="mt-1 ml-3" onClick={() => setTitleChanging(true)}>
+                <div
+                  className="mt-1 ml-3 w-[90%] break-words"
+                  onClick={() => setTitleChanging(true)}>
                   {MainTitle}
                 </div>
                 <div className="ml-1">
@@ -214,7 +225,14 @@ const ElectionForm: FC<ElectionFormProps> = () => {
     return (
       <div className="w-screen px-4 md:px-0 mb-4 md:w-auto">
         <div className="border rounded-md">
-          <div className="h-[calc(100vh-265px)] ml-2">preview</div>
+          <div className="ml-2 w-[95%]">
+            <BallotDisplay
+              configuration={previewConf}
+              answers={answers}
+              setAnswers={setAnswers}
+              userErrors=""
+            />
+          </div>
         </div>
       </div>
     );

web/frontend/src/pages/election/components/ElectionRow.tsx

@@ -11,7 +11,7 @@ type ElectionRowProps = {
 const ElectionRow: FC<ElectionRowProps> = ({ election }) => {
   return (
     <tr className="bg-white border-b hover:bg-gray-50 ">
-      <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+      <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
         <Link
           className="election-link text-gray-700 hover:text-indigo-500"
           to={`/elections/${election.ElectionID}`}>

web/frontend/src/pages/election/components/ElectionTable.tsx

@@ -6,15 +6,16 @@ import ElectionRow from './ElectionRow';
 
 type ElectionTableProps = {
   elections: LightElectionInfo[];
+  setPageIndex: (index: number) => void;
+  pageIndex: number;
 };
 
 // Returns a table where each line corresponds to an election with
 // its name, status and a quickAction if available
 const ELECTION_PER_PAGE = 10;
 
-const ElectionTable: FC<ElectionTableProps> = ({ elections }) => {
+const ElectionTable: FC<ElectionTableProps> = ({ elections, pageIndex, setPageIndex }) => {
   const { t } = useTranslation();
-  const [pageIndex, setPageIndex] = useState(0);
   const [electionsToDisplay, setElectionsToDisplay] = useState<LightElectionInfo[]>([]);
 
   const partitionArray = (array: LightElectionInfo[], size: number) => {