feat/121-realtime-card-edit: individual cards can be edited on the fly

front-end/package.json

@@ -28,6 +28,6 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "typescript": "^5.2.2",
-    "vite": "^5.3.4"
+    "vite": "^5.3.6"
   }
 }

front-end/src/common/Toast.tsx

@@ -23,8 +23,10 @@ export const sendToast = (
   type: ToastType = TOAST_TYPE.ERROR,
   duration: number = DEFAULT_EVENT_DURATION.SECONDS_TOAST
 ) => {
-  if (type === TOAST_TYPE.WARN || type === TOAST_TYPE.ERROR)
+  if (type === TOAST_TYPE.ERROR)
     console.error(`Toast: ${type} - ${flattenMessage(message)}`);
+  else if (type === TOAST_TYPE.WARN)
+    console.log(`Toast: ${type} - ${flattenMessage(message)}`);
 
   const toast = document.createElement("div");
   toast.className = "toast " + type.trim().toLowerCase();

front-end/src/common/Types.ts

@@ -4,7 +4,8 @@ import { Dispatch, SetStateAction } from "react";
 
 export type CardsGenerationResponse = ApiResponse & {
   data: {
-    generated: number;
+    cardsLyrics: SongPartsCards;
+    cardBottomColor: string;
   };
 };
 
@@ -16,6 +17,10 @@ export type CardsGenerationRequest = {
   generateOutro: boolean;
   includeBackgroundImg: boolean;
 };
+export type SingleCardGenerationRequest = CardsGenerationRequest & {
+  cardsContents: string[];
+  cardFilename: string;
+};
 
 export type SongPartsCards = string[][];
 
@@ -97,6 +102,13 @@ export type Statistics = {
   lyricsFetches: number;
   cardsGenerated: number;
 };
+export type DisplayedStatistics = {
+  dateFirstOperation: string;
+  dateLastOperation: string;
+  artworkGenerations: string;
+  lyricsFetches: string;
+  cardsGenerated: string;
+};
 
 /**************** GENERIC ****************/
 

front-end/src/common/components/AutoResizeTextarea.tsx → front-end/src/components/AutoResizeTextarea.tsx

@@ -21,5 +21,5 @@ export const AutoResizeTextarea = forwardRef<HTMLTextAreaElement, AutoResizeText
       };
     }
   }, [value]);
-  return <textarea ref={combinedRef} value={value} {...props} />;
+  return <textarea ref={combinedRef} value={value} {...props} className="lyrics-textarea" />;
 });

front-end/src/components/CardsGallery.css

@@ -0,0 +1,68 @@
+.card-gallery {
+  .card-container {
+    text-align: center;
+    position: relative;
+
+    img, input {
+      cursor: pointer;
+    }
+  }
+
+  .gallery-card {
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: scale(1.02);
+    }
+  }
+
+  .modal-overlay {
+    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; /* full view */
+
+    background-color: rgba(0, 0, 0, 0.7); /* dimmed background around overlay */
+
+    z-index: 9999;
+  }
+
+  .modal-content {
+    position: relative;
+    width: 70%;
+    padding: 2rem;
+    background-color: lightgray;
+    border-radius: .4rem;
+    box-shadow: 0 .2rem 1rem rgba(0, 0, 0, 0.1);
+  }
+
+  .modal-actions {
+    button {
+      width: -webkit-fill-available;
+      padding: .5rem 1rem;
+      border: none;
+
+      color: #ffffff;
+      font-size: .8rem;
+
+      border-radius: .25rem;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+
+      background-color: #007bff;
+      &:hover { background-color: #0056b3; }
+      &:last-child {
+        background-color: #d9534f;
+        &:hover { background-color: #c9302c; }
+      }
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    #cards-generation_generate-single {
+      * { /* for spinner */
+        padding-left: 0 !important;
+      }
+    }
+  }
+
+}

front-end/src/components/CardsGallery.tsx

@@ -0,0 +1,193 @@
+import React, { FormEvent, useRef, useState } from "react";
+
+import { is2xxSuccessful, sendRequest } from "../common/Requests";
+import { hideSpinner, showSpinner } from "../common/Spinner";
+import { sendToast } from "../common/Toast";
+import { ApiResponse, ImageDownloadRequest, SingleCardGenerationRequest } from "../common/Types";
+
+import { API, BACKEND_URL, SPINNER_ID, TOAST, TOAST_TYPE } from "../constants/Common";
+
+import { AutoResizeTextarea } from "./AutoResizeTextarea";
+
+import "./CardsGallery.css";
+
+export interface CardData {
+  id: number;
+  lyrics: string;
+  src: string; // Img source path
+}
+
+type GenerationProps = {
+  cardMetaname: string;
+  bgImg: File | undefined;
+  colorPick: string;
+  includeCenterArtwork: boolean | undefined;
+  generateOutro: boolean;
+  includeBackgroundImg: boolean;
+
+  cardBottomColor: string;
+};
+
+type Props = {
+  id: string;
+  initialCards: CardData[];
+  handleDownloadCard: (e: FormEvent<HTMLFormElement> | undefined, body: ImageDownloadRequest) => void;
+  generationProps: GenerationProps;
+};
+
+const CardsGallery: React.FC<Props> = ({ id, initialCards, handleDownloadCard, generationProps }) => {
+  const [cards, setCards] = useState<CardData[]>(initialCards);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalSaving, setIsModalSaving] = useState(false);
+  const [currentCard, setCurrentCard] = useState<CardData | null>(null);
+  const [newLyrics, setNewLyrics] = useState("");
+
+  const closeModal = () => { setIsModalOpen(false); setIsModalSaving(false); };
+
+  const generateFormData = (body: SingleCardGenerationRequest, formData: FormData): void => {
+    if (body.bgImg) {
+      formData.append("enforceBackgroundImage", body.bgImg);
+      formData.append("includeCenterArtwork", (body.includeCenterArtwork ?? "").toString());
+    }
+    if (body.colorPick !== "")
+      formData.append("enforceBottomColor", body.colorPick);
+    formData.append("cardMetaname", body.cardMetaname);
+    formData.append("generateOutro", body.generateOutro.toString());
+    formData.append("includeBackgroundImg", body.includeBackgroundImg.toString());
+    formData.append("cardsContents", JSON.stringify(body.cardsContents));
+    formData.append("cardFilename", body.cardFilename);
+  };
+
+  const updateCard = (currentCard: CardData, cardFilename: string) => {
+    setCards((prevCards) =>
+      prevCards.map((img) => img.id === currentCard.id // update only the card that was edited
+        ? {
+          id: img.id,
+          lyrics: newLyrics,
+          src: `${cardFilename}?t=${Date.now()}` // busting cached image with the same name thanks to timestamp
+        } : img
+      )
+    );
+  };
+  const saveText = () => {
+    if (currentCard === null) {
+      sendToast(TOAST.CARD_EDIT_FAILED, TOAST_TYPE.ERROR);
+      return;
+    }
+
+    if (isModalSaving) {
+      sendToast(TOAST.CARD_EDIT_IN_PROGRESS, TOAST_TYPE.WARN);
+      return;
+    }
+
+    setIsModalSaving(true);
+    showSpinner(SPINNER_ID.CARDS_GENERATE_SINGLE);
+
+    const cardFilename = currentCard.src.split('?')[0] ?? "card";
+    const body: SingleCardGenerationRequest = {
+      ...generationProps,
+      cardsContents: newLyrics.split("\n"),
+      cardFilename: cardFilename,
+    }
+    const formData = new FormData();
+    generateFormData(body, formData);
+
+    sendRequest("POST", BACKEND_URL + API.CARDS_GENERATION.GENERATE_SINGLE_CARD, formData).then((response: ApiResponse) => {
+      if (!is2xxSuccessful(response.status)) {
+        console.error(response.message);
+        sendToast(response.message, TOAST_TYPE.ERROR);
+        return;
+      }
+
+      updateCard(currentCard, cardFilename);
+
+      const toastMsg = TOAST.CARD_EDITED + `: ${(currentCard.id < 10 ? "0" : "")}${currentCard.id}.png`;
+      sendToast(toastMsg, TOAST_TYPE.SUCCESS);
+    }).catch((error) => {
+      console.error("Failed to upload text:", error);
+      sendToast(TOAST.CARD_EDIT_FAILED, TOAST_TYPE.ERROR);
+    }).finally(() => {
+      hideSpinner(SPINNER_ID.CARDS_GENERATE_SINGLE);
+      setIsModalSaving(false);
+      closeModal();
+    });
+  };
+  const openModal = (card: CardData, cardFileName: string) => {
+    if (cardFileName === "00" || cardFileName === "outro") {
+      sendToast(TOAST.CARD_NOT_EDITABLE, TOAST_TYPE.WARN);
+      return;
+    }
+
+    setIsModalOpen(true);
+    setCurrentCard(card);
+    setNewLyrics(card.lyrics);
+  };
+
+  // used to prevent the modal from closing when click&dragging from inside it
+  const isMouseDownRef = useRef(false);
+  const clickedInsideModalRef = useRef(false);
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    isMouseDownRef.current = true;
+
+    const modalContent = document.querySelector('.modal-content');
+    clickedInsideModalRef.current = modalContent?.contains(e.target as Node) ?? false; // click inside modal?
+  };
+  const handleMouseUp = () => { isMouseDownRef.current = false; };
+  const handleOverlayClick = () => { !clickedInsideModalRef.current && closeModal() };
+
+  const renderCard = (card: CardData, nb: number): JSX.Element => {
+    const cardFileName = (card.src.split('/').pop() ?? "").split('?')[0] ?? "card";
+    const shortCardFileName = cardFileName.replace(".png", "");
+    const alt = "card" + "-" + nb.toString() + "_" + cardFileName;
+
+    return (
+      <div key={alt} className="card card-container">
+        <div onClick={() => openModal(card, shortCardFileName)}>
+          <img src={card.src} alt={card.lyrics} className="gallery-card" />
+        </div>
+        <form onSubmit={(e) => handleDownloadCard(e, {selectedImage: card.src})}>
+          <input type="submit" value={"Download " + shortCardFileName} className="button" />
+        </form>
+      </div>
+    );
+  };
+
+  return (
+    <div id={id} className="card-gallery flex-row" onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
+      { cards?.map((card, idx) =>
+        renderCard(card, idx))
+      }
+
+      { isModalOpen && currentCard && (
+        <div className="modal-overlay flexbox" onClick={handleOverlayClick}>
+          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+            <h3 className="mv-0">
+              {`Edit Lyrics of Card ${currentCard.id < 10 ? "0" : ""}${currentCard.id}`}
+            </h3>
+
+            <AutoResizeTextarea title={"card-edit"} disabled={isModalSaving}
+              value={newLyrics} onChange={(e) => setNewLyrics(e.target.value)}
+              style={{ width: "100%" }}
+            />
+
+            <div className="modal-actions flex-row g-1">
+              <button type="button" onClick={saveText} disabled={isModalSaving}>
+                {isModalSaving ? "Saving..." : "Save"}
+              </button>
+
+              <div id={SPINNER_ID.CARDS_GENERATE_SINGLE} />
+
+              <button type="button" onClick={closeModal} disabled={isModalSaving}>
+                {"Cancel"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CardsGallery;

front-end/src/common/components/ColorPicker.tsx → front-end/src/components/ColorPicker.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
-import { TOAST, TOAST_TYPE } from "../../constants/Common";
-import { sendToast } from "../Toast";
+import { sendToast } from "../common/Toast";
+import { TOAST, TOAST_TYPE } from "../constants/Common";
 
 type Props = {
   id: string;

front-end/src/constants/Common.tsx

@@ -48,6 +48,10 @@ export const TOAST: Record<string, string> = {
     UNAUTHORIZED_OUTRO: "The outro card cannot be generated\n"
       + "since the card creation was manual.",
     CARDS_GENERATED: "Cards generated successfully.",
+    CARD_NOT_EDITABLE: "The contents of this card cannot be edited.",
+    CARD_EDIT_IN_PROGRESS: "Card edit already in progress.",
+    CARD_EDIT_FAILED: "Failed to edit card.",
+    CARD_EDITED: "Card edited successfully", // no full stop on purpose
 };
 
 export const RESPONSE_STATUS: Record<string, ResponseStatus> = {
@@ -80,10 +84,11 @@ export const SPINNER_ID = {
 
   // Lyrics
     LYRICS_SEARCH: "lyrics_search",
-    LYRICS_SAVE: "lyrics_save",
+    LYRICS_CONVERT: "lyrics_convert",
 
   // Cards Generation
     CARDS_GENERATE: "cards-generation_generate",
+    CARDS_GENERATE_SINGLE: "cards-generation_generate-single",
 }
 
 /***************** CONFIG ****************/
@@ -132,6 +137,7 @@ export const API = {
   CARDS_GENERATION: {
     SAVE_CARDS_CONTENTS: PATHS.cardsGeneration + "/save-cards-contents",
     GENERATE_CARDS: PATHS.cardsGeneration + "/generate",
+    GENERATE_SINGLE_CARD: PATHS.cardsGeneration + "/generate-single",
   },
 };
 

front-end/src/pages/ArtworkGeneration/ArtworkGeneration.tsx

@@ -1,14 +1,14 @@
 import { FormEvent, JSX, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import FileUploader from "../../common/components/FileUploader";
-import ImgButton from "../../common/components/ImgButton";
 import { is2xxSuccessful, objectToQueryString, sendRequest } from "../../common/Requests";
 import { hideSpinner, showSpinner } from "../../common/Spinner";
 import { sendToast } from "../../common/Toast";
 import { ApiResponse, FileUploadRequest, ItunesRequest, ItunesResponse, ItunesResult, YoutubeRequest } from "../../common/Types";
 import useTitle from "../../common/UseTitle";
 import { isFileExtensionAccepted } from "../../common/utils/FileUtils";
+import FileUploader from "../../components/FileUploader";
+import ImgButton from "../../components/ImgButton";
 import { FILE_UPLOAD, ITUNES, YOUTUBE } from "../../constants/ArtworkGeneration";
 import { API, BACKEND_URL, ITUNES_URL, PATHS, SPINNER_ID, TITLE, TOAST, TOAST_TYPE } from "../../constants/Common";