added module.duration_in_days to the syllabus information

src/js/component/day.js

@@ -141,20 +141,32 @@ const Day = ({ data, onMoveUp, onMoveDown, onDelete, onEditInstructions }) => {
 					<i className="fas fa-chevron-down" />
 				</div>
 			)}
-			<h3>
-				Module {_data.position}:{" "}
-				<div className={"pointer float-right"} onClick={() => onDelete(_data.id)}>
+			<div className="d-flex">
+				<div className={"pointer trash-day"} onClick={() => onDelete(_data.id)}>
 					<i className="fas fa-trash" />
 				</div>
+				<h3>Module {_data.position}: </h3>
 				<SmartInput
 					className="transparent"
-					style={{ width: "300px" }}
-					placeholder="Today's topic (very short)..."
+					style={{ width: "fit-content", maxWidth: "300px", minWidth: "100px" }}
+					placeholder="Type Today's topic (very short)..."
 					maxLength={25}
 					onChange={label => actions.days().update(_data.id, { ..._data, label })}
 					initialValue={_data.label}
 				/>
-			</h3>
+				<div className="pt-1">
+					Duration:
+					<SmartInput
+						className="border border-secondary"
+						type="number"
+						style={{ width: "40px" }}
+						maxLength={2}
+						onChange={v => actions.days().update(_data.id, { ..._data, duration_in_days: parseInt(v) })}
+						initialValue={_data.duration_in_days.toString()}
+					/>
+					Days
+				</div>
+			</div>
 			<div className="row no-gutters">
 				<div className="col-6 pl-1">
 					<SmartInput

src/js/component/modals/NewDayModal.js

@@ -22,17 +22,17 @@ const NewDayModal = ({ onConfirm, store, actions, index = null }) => {
 					{!newDay ? (
 						<>
 							<div className="modal-header">
-								<h5 className="modal-title">New Day</h5>
+								<h5 className="modal-title">New module</h5>
 							</div>
 							<div className="modal-body text-center">
-								<p>You can import a day from another syllabus o add a brand new day </p>
+								<p>You can import a module from another syllabus o add a brand new module </p>
 							</div>
 							<div className="modal-footer">
 								<button type="button" className="btn btn-secondary" data-dismiss="modal" onClick={() => onConfirm(false)}>
 									Close
 								</button>
 								<button type="button" className="btn btn-primary" onClick={() => setNewDay(true)}>
-									Import a day{" "}
+									Import a module{" "}
 								</button>
 								<button
 									type="button"
@@ -41,14 +41,14 @@ const NewDayModal = ({ onConfirm, store, actions, index = null }) => {
 										actions.days().add(index);
 										onConfirm(false);
 									}}>
-									Add a new day
+									Add a new module
 								</button>
 							</div>
 						</>
 					) : (
 						<>
 							<div className="modal-header">
-								<h5 className="modal-title">New Day</h5>
+								<h5 className="modal-title">New Module</h5>
 							</div>
 							<div className="modal-body p-0">
 								<div className="row">

src/js/component/smart-input.js

@@ -45,11 +45,11 @@ const SmartInput = ({ className, placeholder, onChange, initialValue, type, styl
 				}}
 			/>
 		);
-	else if (type === "text")
+	else if (["text", "number"].includes(type))
 		return (
 			<input
 				{...rest}
-				type="text"
+				type={type}
 				style={style}
 				className={className}
 				placeholder={placeholder}

src/js/context.js

@@ -232,6 +232,7 @@ const getState = ({ getStore, getActions, setStore }) => {
 								...d,
 								id: i + 1,
 								position: i + 1,
+								duration_in_days: d.duration_in_days || 1,
 								technologies: d.technologies || [],
 								lessons:
 									d.lessons !== undefined
@@ -371,6 +372,7 @@ const getState = ({ getStore, getActions, setStore }) => {
 					...store.info,
 					days: store.days.map(d => ({
 						...d,
+						duration_in_days: d.duration_in_days || 1,
 						projects: undefined,
 						project:
 							d.projects.length == 0

src/styles/index.scss

@@ -15,7 +15,11 @@ body {
 .pointer {
     cursor: pointer;
 }
-
+.trash-day{
+    position: absolute;
+    right: 10px;
+    top: 5px;
+}
 ul li {
     list-style: none;
 }