Iniciando US53 com download em JSON inicialmente

frontend/package.json

@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@iconify/react": "^4.1.1",
+    "@types/file-saver": "^2.0.7",
     "@types/react": "^18.2.17",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",

frontend/src/pages/ViewPlan.tsx

@@ -6,6 +6,7 @@ import { Link, useParams } from 'react-router-dom';
 import DrillService from '../service/drillService';
 import { toast, ToastContainer} from 'react-toastify';
 import { Icon } from '@iconify/react/dist/iconify.js';
+import { saveAs } from 'file-saver';
 
 const ViewPlan = () => {
   const { id } = useParams();
@@ -19,6 +20,7 @@ const ViewPlan = () => {
   const [goalsNotEdited, setGoalsNotEdited] = useState(true);
   const [observationsNotEdited, setObservationsNotEdited] = useState(true);
 
+
   const classPlan = new ClassPlanService();
 
   const [planUpdated, setplanUpdated] = useState({
@@ -38,21 +40,25 @@ const ViewPlan = () => {
   } else {
     userId = '';
   }
-
+  
   const [titleDrill, setTitleDrill] = useState('');
+  const [descriptionDrill, setDescriptionDrill] = useState('');
+  const [observationsDrill, setObservationsDrill] = useState('');
   const [visibleCreateDrill, setVisibleCreateDrill] = useState(false);
   const [visibleDeleteDrill, setVisibleDeleteDrill] = useState(false);
   const [deletedItem, setDeletedItem] = useState('');
   const [deletedItemTitle, setDeletedItemTitle] = useState('');
   const [drills, setDrills] = useState([]);
   const drill = new DrillService();
-
-  let data = {
+
+  const [drillUpdated, setDrillUpdated] = useState({
+    id: '',
     title: titleDrill,
-    description: '',
-    observations: '',
+    description: descriptionDrill,
+    observations: observationsDrill,
     classPlanId: id,
-  };
+  });
+
 
 
   async function loadData() {
@@ -62,6 +68,13 @@ const ViewPlan = () => {
     }
   }
 
+  async function loadDataDrill() {
+    if (id != null) {
+      const response = await drill.getById(id);
+      setDrillUpdated(response.data);
+    }
+  }
+
   const openNewItemPanel = () => {
     setVisibleCreateDrill(true);
     setTitleDrill('');
@@ -85,6 +98,12 @@ const ViewPlan = () => {
 
   const handleCreateDrill = async () => {
     try {
+      let data = {
+        title: titleDrill,
+        description: descriptionDrill,
+        observations: observationsDrill,
+        classPlanId: id,
+      };
       if (!titleDrill) toast.warning('Preencha o campo do título');
       else if (titleDrill.length < 5)
         toast.warning('O título deve ter no mínimo 5 caracteres');
@@ -133,6 +152,15 @@ const ViewPlan = () => {
     setObservations(planUpdated.observations);
   }, [planUpdated]);
 
+  useEffect(() => {
+    loadDataDrill();
+    setTitleDrill(titleDrill);
+    setDescriptionDrill(descriptionDrill);
+    setObservationsDrill(observationsDrill);
+  }, [titleDrill, descriptionDrill, observationsDrill]);
+
+
+
   const startEditingTitle = () => {
     setTitleAux(planUpdated.title);
     setTitleNotEdited(false);
@@ -214,6 +242,34 @@ const ViewPlan = () => {
     }
     return;
   };
+
+
+  const downloadPlan = () => {
+    // Combine as informações do plano de aula e dos drills em um objeto
+    const planData = {
+      plan: {
+        title: planUpdated.title,
+        goals: planUpdated.goals,
+        observations: planUpdated.observations,
+      },
+      drills: drills.map((drill) => ({
+        title: drillUpdated.title,
+        description: drillUpdated.description,
+        observations: drillUpdated.observations,
+
+      })),
+    };
+
+    // Converte o objeto para uma string JSON
+    const planJSON = JSON.stringify(planData, null, 2);
+
+    // Cria um Blob a partir da string JSON
+    const blob = new Blob([planJSON], { type: 'application/json' });
+
+    // Utiliza o FileSaver.js para iniciar o download
+    saveAs(blob, 'plano_de_aula_com_drills.json');
+  };
+
 
   return (
     <>
@@ -252,6 +308,11 @@ const ViewPlan = () => {
               onClick={startEditingTitle}
               className="clickableIcon"
             />{' '}
+            <button onClick={downloadPlan} className="downloadButton">
+              <Icon icon="bi:download" color="white" width="20" />
+              Baixar Plano de Aula
+            </button>
+
           </div>
         ) : (
           <div className="titleLayout" style={{ justifyContent: 'center' }}>

frontend/yarn.lock

@@ -328,6 +328,11 @@
   "resolved" "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz"
   "version" "1.0.1"
 
+"@types/file-saver@^2.0.7":
+  "integrity" "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A=="
+  "resolved" "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz"
+  "version" "2.0.7"
+
 "@types/json-schema@*", "@types/json-schema@^7.0.8":
   "integrity" "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
   "resolved" "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz"