[EM-763][EVENTS] add image field to event creation and update (#5685)

* [EVENTS] add image field to event creation and update * [EVENTS] fix review feedbacks
parti-renaissance · May 6, 2021 · be45b99 · be45b99
1 parent 820deb8
commit be45b99
Show file tree

Hide file tree

Showing 33 changed files with 560 additions and 256 deletions.
diff --git a/front/app.js b/front/app.js
@@ -353,9 +353,9 @@ class App {
         });
     }
 
-    runImageCropper(inputFileElement, inputCroppedImageElement) {
+    runImageCropper(inputFileElement, inputCroppedImageElement, options = { a: 1, w: 500, h: 500 }) {
         System.import('services/utils/imageCropper').catch((error) => { throw error; }).then((module) => {
-            module.default(inputFileElement, inputCroppedImageElement);
+            module.default(inputFileElement, inputCroppedImageElement, options);
         });
     }
 

diff --git a/front/services/utils/imageCropper.js b/front/services/utils/imageCropper.js
@@ -8,44 +8,45 @@ let cropper;
 let fileElement;
 let croppedImageElement;
 
-export default (inputFileElement, inputCroppedImageElement) => {
-    fileElement = inputFileElement;
-    croppedImageElement = inputCroppedImageElement;
+function updatePreviewImages(src, circle = false) {
+    const previewContainer = dom('.image-uploader--preview');
 
-    const files = inputFileElement.files;
+    const containerElement = find(previewContainer, '.preview-image--container');
+    containerElement.style.backgroundImage = `url(${src})`;
 
-    if (!files || 1 > files.length) {
-        return;
+    if (false === circle) {
+        addClass(containerElement, 'preview-image--container-rectangle');
     }
+    show(previewContainer);
+    hide(dom('.image-uploader--label'));
+}
 
-    const file = files[0];
+async function handleCropAction(options) {
+    const canvas = cropper.getCroppedCanvas({
+        width: options.w,
+        height: options.h,
+    });
 
-    if (URL) {
-        displayCropperModal(URL.createObjectURL(file));
-    } else if (FileReader) {
-        const reader = new FileReader();
-        reader.onload = () => displayCropperModal(reader.result);
-        reader.readAsDataURL(file);
-    }
-};
+    const dataUrl = await canvas.toDataURL();
 
-function displayCropperModal(url) {
-    modal = render(
-        <Modal
-            key={url}
-            contentCallback={() => getModalContent(url)}
-            withClose={false}
-        />,
-        dom('#modal-wrapper')
-    );
+    updatePreviewImages(dataUrl, options.w === options.h);
 
-    cropper = new Cropper(dom('.image-cropper--container img'), {
-        aspectRatio: 1,
-        viewMode: 2,
-    });
+    croppedImageElement.value = dataUrl;
+    fileElement.value = '';
+
+    modal.hideModal();
 }
 
-function getModalContent(url) {
+function handleCancelAction() {
+    cropper.destroy();
+    cropper = null;
+
+    fileElement.value = '';
+
+    modal.hideModal();
+}
+
+function getModalContent(url, options) {
     return (
         <div>
             <div className={'image-cropper--container'}>
@@ -54,41 +55,46 @@ function getModalContent(url) {
 
             <div className="b__nudge--top-15 text--center">
                 <a className={'btn'} onClick={handleCancelAction}>Annuler</a>
-                <a className="btn btn--blue b__nudge--left-small" onClick={handleCropAction}>Valider</a>
+                <a className="btn btn--blue b__nudge--left-small" onClick={ () => handleCropAction(options) }>Valider</a>
             </div>
         </div>
     );
 }
 
-function handleCropAction() {
-    const canvas = cropper.getCroppedCanvas({
-        width: 500,
-        height: 500,
-    });
-
-    const dataUrl = canvas.toDataURL();
-
-    updatePreviewImages(dataUrl);
-
-    croppedImageElement.value = dataUrl;
-    fileElement.value = '';
+function displayCropperModal(url, options) {
+    modal = render(
+        <Modal
+            key={url}
+            contentCallback={() => getModalContent(url, options)}
+            withClose={false}
+        />,
+        dom('#modal-wrapper')
+    );
 
-    modal.hideModal();
+    cropper = new Cropper(dom('.image-cropper--container img'), {
+        aspectRatio: options.a,
+        viewMode: 2,
+    });
 }
 
-function handleCancelAction() {
-    cropper.destroy();
-    cropper = null;
 
-    fileElement.value = '';
+export default (inputFileElement, inputCroppedImageElement, options = {}) => {
+    fileElement = inputFileElement;
+    croppedImageElement = inputCroppedImageElement;
 
-    modal.hideModal();
-}
+    const files = inputFileElement.files;
 
-function updatePreviewImages(src) {
-    const previewContainer = dom('.image-uploader--preview');
+    if (!files || 1 > files.length) {
+        return;
+    }
 
-    find(previewContainer, '.preview-image--container').style.backgroundImage = `url(${src})`;
-    show(previewContainer);
-    hide(dom('.image-uploader--label'));
-}
+    const file = files[0];
+
+    if (URL) {
+        displayCropperModal(URL.createObjectURL(file), options);
+    } else if (FileReader) {
+        const reader = new FileReader();
+        reader.onload = () => displayCropperModal(reader.result, options);
+        reader.readAsDataURL(file);
+    }
+};
diff --git a/front/style/layout/_forms-em.scss b/front/style/layout/_forms-em.scss
@@ -272,7 +272,7 @@
             box-sizing: border-box;
             font-family: $font-roboto;
             position: relative;
-            height: 140px;
+            min-height: 140px;
             border: dashed 1px $lines-grey;
             width: 100%;
             display: flex;

diff --git a/front/style/voting-platform/_candidacy.scss b/front/style/voting-platform/_candidacy.scss
@@ -132,6 +132,12 @@
     color: $blue;
     font-style: italic;
     text-align: center;
+
+    &-rectangle {
+        width: 680px;
+        height: 368px;
+        border-radius: 0;
+    }
 }
 
 .candidate-gender {

diff --git a/src/Controller/EnMarche/CitizenActionManagerController.php b/src/Controller/EnMarche/CitizenActionManagerController.php
@@ -110,7 +110,13 @@ public function editAction(
         CitizenActionCommandHandler $handler
     ): Response {
         $command = CitizenActionCommand::createFromCitizenAction($action);
-        $form = $this->createForm(CitizenActionCommandType::class, $command)
+        $form = $this->createForm(
+            CitizenActionCommandType::class,
+            $command,
+            [
+                'image_path' => $action->getImagePath(),
+            ]
+        )
             ->handleRequest($request)
         ;
 
@@ -127,6 +133,7 @@ public function editAction(
         return $this->render('citizen_action_manager/edit.html.twig', [
             'citizen_project' => $project,
             'project_hosts' => $citizenProjectManager->getCitizenProjectAdministrators($project),
+            'event' => $action,
             'citizen_action_form' => $form->createView(),
         ]);
     }

diff --git a/src/Controller/EnMarche/CommitteeDesignation/CandidatureController.php b/src/Controller/EnMarche/CommitteeDesignation/CandidatureController.php
@@ -76,7 +76,7 @@ public function candidateAction(UserInterface $adherent, Committee $committee, R
         $isCreation = null === $candidacy->getId();
 
         $form = $this
-            ->createCandidacyForm($candidacy)
+            ->createCandidacyForm($candidacy, ['image_path' => $candidacy->getImagePath()])
             ->handleRequest($request)
         ;
 

diff --git a/src/Controller/EnMarche/CommitteeEventManagerController.php b/src/Controller/EnMarche/CommitteeEventManagerController.php
@@ -56,7 +56,13 @@ public function __construct(EventRegistrationRepository $eventRegistrationReposi
      */
     public function editAction(Request $request, CommitteeEvent $event, EventCommandHandler $handler): Response
     {
-        $form = $this->createForm(EventCommandType::class, $command = EventCommand::createFromEvent($event));
+        $form = $this->createForm(
+            EventCommandType::class,
+            $command = EventCommand::createFromEvent($event),
+            [
+                'image_path' => $event->getImagePath(),
+            ]
+        );
         $form->handleRequest($request);
 
         if ($form->isSubmitted() && $form->isValid()) {

diff --git a/src/Controller/EnMarche/EventManager/AbstractEventManagerController.php b/src/Controller/EnMarche/EventManager/AbstractEventManagerController.php
@@ -98,7 +98,13 @@ public function eventsCreateAction(
     public function editAction(Request $request, BaseEvent $event, EventCommandHandler $handler): Response
     {
         $form = $this
-            ->createForm(EventCommandType::class, $command = EventCommand::createFromEvent($event))
+            ->createForm(
+                EventCommandType::class,
+                $command = EventCommand::createFromEvent($event),
+                [
+                    'image_path' => $event->getImagePath(),
+                ]
+            )
             ->handleRequest($request)
         ;
 
@@ -113,6 +119,7 @@ public function editAction(Request $request, BaseEvent $event, EventCommandHandl
         }
 
         return $this->renderTemplate('event_manager/event_edit.html.twig', [
+            'event' => $event,
             'form' => $form->createView(),
         ]);
     }

diff --git a/src/Controller/EnMarche/InstitutionalEvents/AbstractInstitutionalEventsController.php b/src/Controller/EnMarche/InstitutionalEvents/AbstractInstitutionalEventsController.php
@@ -81,7 +81,10 @@ public function institutionalEventsEditAction(
             ->createForm(
                 InstitutionalEventCommandType::class,
                 $command = InstitutionalEventCommand::createFromInstitutionalEvent($institutionalEvent),
-                ['view' => InstitutionalEventCommandType::EDIT_VIEW]
+                [
+                    'view' => InstitutionalEventCommandType::EDIT_VIEW,
+                    'image_path' => $institutionalEvent->getImagePath(),
+                ]
             )
             ->handleRequest($request)
         ;
@@ -95,6 +98,7 @@ public function institutionalEventsEditAction(
         }
 
         return $this->renderTemplate('institutional_events/create.html.twig', [
+            'event' => $institutionalEvent,
             'form' => $form->createView(),
         ]);
     }

diff --git a/src/Controller/EnMarche/TerritorialCouncil/CandidatureController.php b/src/Controller/EnMarche/TerritorialCouncil/CandidatureController.php
@@ -69,7 +69,13 @@ public function editCandidatureAction(Request $request, UserInterface $adherent)
         }
 
         $form = $this
-            ->createForm(TerritorialCouncilCandidacyType::class, $candidacy)
+            ->createForm(
+                TerritorialCouncilCandidacyType::class,
+                $candidacy,
+                [
+                    'image_path' => $candidacy->getImagePath(),
+                ]
+            )
             ->handleRequest($request)
         ;
 
@@ -248,7 +254,7 @@ public function acceptInvitationAction(
         $acceptedBy->setIsPublicFaithStatement($invitedBy->isPublicFaithStatement());
 
         $form = $this
-            ->createForm(TerritorialCouncilCandidacyType::class, $acceptedBy)
+            ->createForm(TerritorialCouncilCandidacyType::class, $acceptedBy, ['image_path' => $acceptedBy->getImagePath()])
             ->handleRequest($request)
         ;
 

diff --git a/src/Entity/ImageOwnerInterface.php b/src/Entity/ImageOwnerInterface.php
@@ -17,4 +17,8 @@ public function getImage(): ?UploadedFile;
     public function setImage(?UploadedFile $image): void;
 
     public function getImagePath(): string;
+
+    public function isRemoveImage(): bool;
+
+    public function setRemoveImage(bool $value): void;
 }
diff --git a/src/Entity/ImageTrait.php b/src/Entity/ImageTrait.php
@@ -18,6 +18,8 @@ trait ImageTrait
      */
     protected $imageName;
 
+    private $removeImage = false;
+
     public function setImageName(?UploadedFile $image): void
     {
         $this->imageName = null === $image ? null :
@@ -58,4 +60,14 @@ public function getImagePath(): string
     {
         return $this->getImageName();
     }
+
+    public function isRemoveImage(): bool
+    {
+        return $this->removeImage;
+    }
+
+    public function setRemoveImage(bool $value): void
+    {
+        $this->removeImage = $value;
+    }
 }
diff --git a/src/Entity/VotingPlatform/Designation/BaseCandidacy.php b/src/Entity/VotingPlatform/Designation/BaseCandidacy.php
@@ -81,8 +81,6 @@ abstract class BaseCandidacy implements CandidacyInterface, AlgoliaIndexedEntity
      */
     protected $image;
 
-    private $removeImage = false;
-
     /**
      * @var CandidacyInvitationInterface[]|Collection
      */
@@ -156,16 +154,6 @@ public function getImagePath(): string
         ;
     }
 
-    public function isRemoveImage(): bool
-    {
-        return $this->removeImage;
-    }
-
-    public function setRemoveImage(bool $value): void
-    {
-        $this->removeImage = $value;
-    }
-
     public function getFirstName(): string
     {
         return $this->getAdherent()->getFirstName();

diff --git a/src/Entity/VotingPlatform/Designation/CandidacyInterface.php b/src/Entity/VotingPlatform/Designation/CandidacyInterface.php
@@ -29,10 +29,6 @@ public function getBiography(): ?string;
 
     public function setBiography(?string $biography): void;
 
-    public function isRemoveImage(): bool;
-
-    public function setRemoveImage(bool $value): void;
-
     public function getType(): string;
 
     public function getAdherent(): Adherent;