forked from dedis/d-voting
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #33 from c4dt/add_voters
Adding voters to form
- Loading branch information
Showing
10 changed files
with
319 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 24 additions & 0 deletions
24
web/frontend/src/pages/form/components/ActionButtons/AddVotersButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { TrashIcon } from '@heroicons/react/outline'; | ||
| import { AuthContext } from 'index'; | ||
| import { useContext } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| const SUBJECT_ELECTION = 'election'; | ||
| const ACTION_CREATE = 'create'; | ||
|
|
||
| const AddVotersButton = ({ handleAddVoters }) => { | ||
| const authCtx = useContext(AuthContext); | ||
| const { t } = useTranslation(); | ||
|
|
||
| return ( | ||
| authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) && ( | ||
| <button onClick={handleAddVoters}> | ||
| <div className="whitespace-nowrap inline-flex items-center justify-center px-4 py-1 mr-2 border border-gray-300 text-sm rounded-full font-medium text-gray-700 hover:text-red-500"> | ||
| <TrashIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" /> | ||
| {t('addVoters')} | ||
| </div> | ||
| </button> | ||
| ) | ||
| ); | ||
| }; | ||
| export default AddVotersButton; |
190 changes: 190 additions & 0 deletions
190
web/frontend/src/pages/form/components/AddVotersModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,190 @@ | ||
| import { Dialog, Transition } from '@headlessui/react'; | ||
| import { CogIcon } from '@heroicons/react/outline'; | ||
| import { FC, Fragment, useRef, useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| type AddVotersModalSuccessProps = { | ||
| showModal: boolean; | ||
| setShowModal: (show: boolean) => void; | ||
| newVoters: string; | ||
| }; | ||
|
|
||
| export const AddVotersModalSuccess: FC<AddVotersModalSuccessProps> = ({ | ||
| showModal, | ||
| setShowModal, | ||
| newVoters, | ||
| }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| function closeModal() { | ||
| setShowModal(false); | ||
| } | ||
|
|
||
| return ( | ||
| <Transition.Root show={showModal} as={Fragment}> | ||
| <Dialog as="div" className="fixed z-10 inset-0 px-4 overflow-y-auto" onClose={closeModal}> | ||
| <div className="block items-end justify-center min-h-screen text-center"> | ||
| <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" /> | ||
|
|
||
| <Transition.Child | ||
| as={Fragment} | ||
| enter="ease-out duration-300" | ||
| enterFrom="opacity-0" | ||
| enterTo="opacity-100" | ||
| leave="ease-in duration-200" | ||
| leaveFrom="opacity-100" | ||
| leaveTo="opacity-0"> | ||
| <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" /> | ||
| </Transition.Child> | ||
|
|
||
| {/* This element is to trick the browser into centering the modal contents. */} | ||
| <span className="inline-block align-middle h-screen" aria-hidden="true"> | ||
| ​ | ||
| </span> | ||
| <Transition.Child | ||
| as={Fragment} | ||
| enter="ease-out duration-300" | ||
| enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" | ||
| enterTo="opacity-100 translate-y-0 sm:scale-100" | ||
| leave="ease-in duration-200" | ||
| leaveFrom="opacity-100 translate-y-0 sm:scale-100" | ||
| leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> | ||
| <div className=" inline-block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all my-8 align-middle max-w-lg w-full"> | ||
| <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | ||
| <div className="sm:flex sm:items-start"> | ||
| <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10"> | ||
| <CogIcon className="h-6 w-6 text-indigo-600" aria-hidden="true" /> | ||
| </div> | ||
| <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | ||
| <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900"> | ||
| {t('addVotersDialog')} | ||
| </Dialog.Title> | ||
| <div className="mt-2"> | ||
| <p className="text-sm text-gray-500">{t('votersAdded')}</p> | ||
| </div> | ||
| <pre>{newVoters}</pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | ||
| <button | ||
| type="button" | ||
| className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm" | ||
| onClick={closeModal}> | ||
| {t('confirm')} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </Transition.Child> | ||
| </div> | ||
| </Dialog> | ||
| </Transition.Root> | ||
| ); | ||
| }; | ||
| type AddVotersModalProps = { | ||
| showModal: boolean; | ||
| setShowModal: (show: boolean) => void; | ||
| setUserConfirmedAction: (voters: string) => void; | ||
| }; | ||
|
|
||
| export const AddVotersModal: FC<AddVotersModalProps> = ({ | ||
| showModal, | ||
| setShowModal, | ||
| setUserConfirmedAction, | ||
| }) => { | ||
| const { t } = useTranslation(); | ||
| const cancelButtonRef = useRef(null); | ||
| const [voters, setVoters] = useState(''); | ||
|
|
||
| const closeModal = () => { | ||
| setShowModal(false); | ||
| }; | ||
|
|
||
| const confirmChoice = () => { | ||
| setUserConfirmedAction(voters); | ||
| closeModal(); | ||
| }; | ||
|
|
||
| const votersBox = () => { | ||
| return ( | ||
| <div> | ||
| <textarea | ||
| autoFocus={true} | ||
| onChange={(e) => setVoters(e.target.value)} | ||
| name="Voters" | ||
| placeholder="SCIPERs" | ||
| className="m-3 px-1 w-100 text-lg border rounded-md" | ||
| rows={10} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <Transition.Root show={showModal} as={Fragment}> | ||
| <Dialog as="div" className="fixed z-10 inset-0 px-4 overflow-y-auto" onClose={closeModal}> | ||
| <div className="block items-end justify-center min-h-screen text-center"> | ||
| <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" /> | ||
|
|
||
| <Transition.Child | ||
| as={Fragment} | ||
| enter="ease-out duration-300" | ||
| enterFrom="opacity-0" | ||
| enterTo="opacity-100" | ||
| leave="ease-in duration-200" | ||
| leaveFrom="opacity-100" | ||
| leaveTo="opacity-0"> | ||
| <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" /> | ||
| </Transition.Child> | ||
|
|
||
| {/* This element is to trick the browser into centering the modal contents. */} | ||
| <span className="inline-block align-middle h-screen" aria-hidden="true"> | ||
| ​ | ||
| </span> | ||
| <Transition.Child | ||
| as={Fragment} | ||
| enter="ease-out duration-300" | ||
| enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" | ||
| enterTo="opacity-100 translate-y-0 sm:scale-100" | ||
| leave="ease-in duration-200" | ||
| leaveFrom="opacity-100 translate-y-0 sm:scale-100" | ||
| leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> | ||
| <div className=" inline-block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all my-8 align-middle max-w-lg w-full"> | ||
| <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | ||
| <div className="sm:flex sm:items-start"> | ||
| <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10"> | ||
| <CogIcon className="h-6 w-6 text-indigo-600" aria-hidden="true" /> | ||
| </div> | ||
| <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | ||
| <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900"> | ||
| {t('addVotersDialog')} | ||
| </Dialog.Title> | ||
| <div className="mt-2"> | ||
| <p className="text-sm text-gray-500">{t('inputAddVoters')}</p> | ||
| </div> | ||
| {votersBox()} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | ||
| <button | ||
| type="button" | ||
| className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm" | ||
| onClick={confirmChoice}> | ||
| {t('addVotersConfirm')} | ||
| </button> | ||
| <button | ||
| type="button" | ||
| className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" | ||
| onClick={closeModal} | ||
| ref={cancelButtonRef}> | ||
| {t('cancel')} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </Transition.Child> | ||
| </div> | ||
| </Dialog> | ||
| </Transition.Root> | ||
| ); | ||
| }; |
Oops, something went wrong.