feat(front): ✨ saving edited calendar + edit disabled calendar

Streaks-Habits · Jul 28, 2023 · fd212d4 · fd212d4
1 parent ab8d4a2
commit fd212d4
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 14 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: "3.9"
 services:
   db:
-    image : mongo:5.0.8
+    image : mongo:4.4.14
     container_name: mongodb
     restart: always
     ports:
@@ -18,7 +18,7 @@ services:
     environment:
       - TZ=Europe/Paris
       - MONGO_URI=mongodb://db:27017/streaks?retryWrites=true&w=majority
-      - JWT_SECRET=${JWT_SECRET}
+      - AUTH_JWT_SECRET=${AUTH_JWT_SECRET}
       - AUTH_COOKIE_EXPIRES=1814400 # three weeks
       - AUTH_COOKIE_SECRET=${AUTH_COOKIE_SECRET}
 

diff --git a/srcs/public/components/dashboard/calendar/disabled_calendar.js b/srcs/public/components/dashboard/calendar/disabled_calendar.js
@@ -10,9 +10,17 @@ export default {
 			calendar: this.calendarData,
 		};
 	},
+	methods: {
+		edit() {
+			this.$emit('editor:edit', this.calendar);
+		},
+	},
 	template: `
 		<div class="disabled_calendar">
 			<p class="name">{{ calendar.name }}</p>
+			<div class="controls">
+				<button @click="edit()"><svg class="edit"><use xlink:href="/public/icons/edit.svg#icon"></use></svg></button>
+			</div>
 		</div>
 	`,
 };
diff --git a/srcs/public/components/dashboard/calendar/editor.js b/srcs/public/components/dashboard/calendar/editor.js
@@ -19,6 +19,11 @@ export default {
 			calendar: this.propsCalendar,
 			action: this.propsAction,
 			daynames: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+			infoMessage: null,
+			successMessage: null,
+			errorMessage: null,
+			lastSaved: null,
+			saveTimeout: null,
 		};
 	},
 	created() {
@@ -43,21 +48,62 @@ export default {
 	watch: {
 		calendar: {
 			handler() {
-				console.log(this.calendar);
+				this.successMessage = null;
+				this.errorMessage = null;
+				this.infoMessage = 'Saving...';
+
+				if (this.saveTimeout) {
+					clearTimeout(this.saveTimeout);
+					this.saveTimeout = null;
+				}
+				this.saveTimeout = setTimeout(async () => {
+					this.saveTimeout = null;
+					await this.save();
+				}, 2000);
 			},
 			deep: true,
 		},
 	},
+	methods: {
+		async save() {
+			const res = await fetch('/api/v1/calendars/' + this.calendar._id, {
+				method: 'PUT',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({
+					name: this.calendar.name,
+					agenda: this.calendar.agenda,
+					notifications: this.calendar.notifications,
+					enabled: this.calendar.enabled,
+				}),
+			});
+
+			const data = await res.json();
+
+			this.infoMessage = null;
+			this.successMessage = null;
+			this.errorMessage = null;
+
+			if (res.ok) {
+				this.successMessage = 'Saved';
+			} else if (data.hasOwnProperty('message')) {
+				this.errorMessage = data.message;
+			} else {
+				this.errorMessage = 'Error while saving calendar';
+			}
+		},
+	},
 	template: `
 		<div class="calendar-editor">
 			<div class="calendar-editor-inner">
 				<div>
-				<button @click="$emit('editor:close')" class="close">
-					<svg><use xlink:href="/public/icons/close.svg#icon"></use></svg>
-				</button>
-				<h1 v-if="action === 'add'">Add a calendar</h1>
-				<h1 v-if="action === 'edit'">Edit <span>{{ calendar.name }}</span></h1>
-				<p class="calendar-id">{{ calendar._id }}</p>
+					<button @click="$emit('editor:close')" class="close">
+						<svg><use xlink:href="/public/icons/close.svg#icon"></use></svg>
+					</button>
+					<h1 v-if="action === 'add'">Add a calendar</h1>
+					<h1 v-if="action === 'edit'">Edit <span>{{ calendar.name }}</span></h1>
+					<p class="calendar-id">{{ calendar._id }}</p>
 				</div>
 				<form>
 					<div class="form-group">
@@ -97,6 +143,11 @@ export default {
 							<label for="enabled">Enabled</label>
 						</div>
 					</div>
+					<div class="info">
+						<p class="info-message" v-if="infoMessage">{{ infoMessage }}</p>
+						<p class="success-message" v-if="successMessage">{{ successMessage }}</p>
+						<p class="error-message" v-if="errorMessage">{{ errorMessage }}</p>
+					</div>
 				</form>
 			</div>
 		</div>

diff --git a/srcs/public/components/dashboard/dashboard.js b/srcs/public/components/dashboard/dashboard.js
@@ -129,6 +129,7 @@ export default {
 		closeEditor() {
 			this.calendars.editor.action = null;
 			this.calendars.editor.calendar = {};
+			this.updateCalendars();
 		},
 	},
 	template: `
@@ -148,7 +149,7 @@ export default {
 
 		<h1 v-if="calendars.disabled.length" class="disabled">Disabled Calendars</h1>
 		<div class="calendars disabled" v-if="calendars.disabled.length">
-			<DisabledCalendar v-for="calendar in calendars.disabled" :key="calendar._id" :calendarData="calendar" />
+			<DisabledCalendar v-for="calendar in calendars.disabled" :key="calendar._id" :calendarData="calendar" @editor:edit="editCalendar" />
 		</div>
 
 		<h1 v-if="progresses.disabled.length" class="disabled">Disabled Progresses</h1>

diff --git a/srcs/public/components/dashboard/ui/toggle.js b/srcs/public/components/dashboard/ui/toggle.js
@@ -10,7 +10,6 @@ export default {
 		},
 	},
 	data() {
-		console.log(this.id);
 		return {
 			enabled: this.toggle,
 			id: this.id,

diff --git a/srcs/styles/dashboard.scss b/srcs/styles/dashboard.scss
@@ -89,7 +89,7 @@ div.calendars {
 div.calendar {
 	display: inline-block;
 	// calendar size + padding + border
-	max-width: calc(16.75em + 44px);
+	max-width: 16.75em;
 
 	div.header {
 		display: flex;
@@ -399,7 +399,9 @@ div.calendar {
 
 div.disabled_calendar, div.disabled_progress {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
 	width: 16.75em;
 	box-sizing: border-box;
 	border: solid 2px $secondary_color_light;
@@ -409,6 +411,9 @@ div.disabled_calendar, div.disabled_progress {
 	p.name {
 		margin: 0;
 		color: $secondary_color_lighter;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 	}
 }
 

diff --git a/srcs/styles/editor.scss b/srcs/styles/editor.scss
@@ -14,7 +14,7 @@
 
 	.calendar-editor-inner {
 		max-width: 25rem;
-		margin: auto 25px;
+		margin: 5rem 25px 0 25px;
 		width: 100%;
 	}
 
@@ -120,4 +120,27 @@
 			}
 		}
 	}
+
+	div.info {
+		margin-top: 1rem;
+
+		p {
+			font-weight: bold;
+			padding: 10px;
+			border-radius: 5px;
+			display: inline-block;
+		}
+
+		p.success-message {
+			background: $ok_color;
+		}
+
+		p.error-message {
+			background: $error_color;
+		}
+
+		p.info-message {
+			background: $secondary_color_light;
+		}
+	}
 }