feat(ScenarioInfo): improve styling, add edit modal (#322)

* experimenting wiht the grid system

* re wrote everything in tailwind

* experimenting with some changes

* make search inline, made thumbnail 16:9

* added username for display

* code style changes

* made some requested visual changes

* added the desc and est time update system

* added the title editbale changes

* ran lint and prettier

* made some requested backend changes

* made some backend cahnges one how the items are being saved

* ran lint and prettier

Author: hazikchaudhry

backend/src/db/daos/scenarioDao.js

@@ -22,12 +22,23 @@ const addThumbs = async (scenarios) => {
   const scenarioData = await Promise.all(
     scenarios.map(async (scenario) => {
       if (!scenario.scenes || !scenario.scenes[0])
-        return { _id: scenario._id, name: scenario.name };
+        return {
+          _id: scenario._id,
+          name: scenario.name,
+          description: scenario.description,
+          estimatedTime: scenario.estimatedTime,
+        };
       const thumbnail = await Scene.findById(scenario.scenes[0], {
         components: 1,
         _id: 0,
       }).lean();
-      return { _id: scenario._id, name: scenario.name, thumbnail };
+      return {
+        _id: scenario._id,
+        name: scenario.name,
+        thumbnail,
+        description: scenario.description,
+        estimatedTime: scenario.estimatedTime,
+      };
     })
   );
   return scenarioData;
@@ -41,7 +52,7 @@ const addThumbs = async (scenarios) => {
 const retrieveScenarioList = async (uid) => {
   const scenarios = await Scenario.find(
     { uid },
-    { name: 1, scenes: { $slice: 1 } }
+    { name: 1, scenes: { $slice: 1 }, description: 1, estimatedTime: 1 }
   )
     .sort({ _id: 1 })
     .lean();
@@ -66,7 +77,7 @@ const retrieveScenario = async (scenarioId) => {
 const retrieveScenarios = async (scenarioIds) => {
   const scenarios = await Scenario.find(
     { _id: { $in: scenarioIds } },
-    { name: 1, scenes: { $slice: 1 } }
+    { name: 1, scenes: { $slice: 1 }, description: 1, estimatedTime: 1 }
   );
   return addThumbs(scenarios);
 };
@@ -84,23 +95,22 @@ const retrieveRoleList = async (scenarioId) => {
 /**
  * Updates the name of a scenario in the database
  * @param {String} scenarioId MongoDB ID of scenario
- * @param {{name: String}} updatedScenario updated scenario object
+ * @param {{name: String, description: String, estimatedTime: String}} updatedScenario updated scenario object
  * @returns updated database scenario object
  */
 const updateScenario = async (scenarioId, updatedScenario) => {
   const scenario = await Scenario.findById(scenarioId);
 
-  // define temperary variable to store old name incase new name is empty
-  const previousName = scenario.name;
-  scenario.name = updatedScenario.name;
+  if (updatedScenario.name?.trim()) {
+    scenario.name = updatedScenario.name;
+  }
+
+  if (updatedScenario.description !== undefined) {
+    scenario.description = updatedScenario.description;
+  }
 
-  // if new name is empty, set name to old name
-  if (
-    scenario.name === "" ||
-    scenario.name == null ||
-    scenario.name.trim() === ""
-  ) {
-    scenario.name = previousName;
+  if (updatedScenario.estimatedTime !== undefined) {
+    scenario.estimatedTime = updatedScenario.estimatedTime;
   }
 
   await scenario.save();

backend/src/db/models/scenario.js

@@ -28,6 +28,14 @@ const scenarioSchema = new Schema({
       type: Object,
     },
   ],
+  description: {
+    type: String,
+    default: "",
+  },
+  estimatedTime: {
+    type: String,
+    default: "",
+  },
 });
 
 // before removal of a scenario from the database, first remove all its scenes

backend/src/routes/api/scenario.js

@@ -65,9 +65,11 @@ router.get("/:scenarioId", async (req, res) => {
 
 // Update a scenario by a user
 router.put("/:scenarioId", async (req, res) => {
-  const { name, duration } = req.body;
+  const { name, duration, description, estimatedTime } = req.body;
   let scenario = await updateScenario(req.params.scenarioId, {
     name,
+    description,
+    estimatedTime,
   });
 
   scenario = await updateDurations(req.params.scenarioId, {
@@ -77,6 +79,15 @@ router.put("/:scenarioId", async (req, res) => {
   res.status(HTTP_OK).json(scenario);
 });
 
+router.patch("/:scenarioId", async (req, res) => {
+  const { name, description, estimatedTime } = req.body;
+
+  const updates = { name, description, estimatedTime };
+
+  const scenario = await updateScenario(req.params.scenarioId, updates);
+  res.status(HTTP_OK).json(scenario);
+});
+
 // Delete a scenario of a user
 router.delete("/:scenarioId", async (req, res) => {
   const deleted = await deleteScenario(req.params.scenarioId);