Implemented edition mode and success/errors modals

cmd/main.go

@@ -66,7 +66,7 @@ func initArticlesRoutes(r *gin.RouterGroup) {
 	articlesRouter.GET("/", articles.GetArticleHandler)
 	articlesRouter.GET("/:id", articles.GetArticleHandler)
 	articlesRouter.POST("/:id", articles.AddArticleHandler)
-	articlesRouter.PATCH("/:id", articles.EditArticleHandler)
+	articlesRouter.PUT("/:id", articles.EditArticleHandler)
 	articlesRouter.DELETE("/:id", articles.DeleteArticleHandler)
 }
 

web/admin-gui/src/components/ModalSuccessError.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+const emits = defineEmits(['close'])
+const props = defineProps<{
+    title?: string,
+    description: string,
+    type: 'error' | 'success'
+}>()
+
+</script>
+
+<template>
+    <div class="modal">
+        <header class="error-bg" v-if="type === 'error'">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+            </svg>
+            <h2>{{ props.title ?? 'Échec !' }}</h2>
+        </header>
+        <header class="success-bg" v-else>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <h2>{{ props.title ?? 'Succès !' }}</h2>
+        </header>
+        <main>
+            <p>{{ props.description }}</p>
+            <button class="button-primary" @click="$emit('close')">Fermer</button>
+        </main>
+    </div>
+</template>
+
+<style scoped>
+.modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    box-shadow: #0002 0 0 15px;
+    border-radius: var(--radius);
+    overflow: hidden;
+
+    max-width: 100%;
+    width: 500px;
+    transform: translate(-50%, -50%);
+}
+
+.success-bg {
+    background-color: var(--primary-light);
+}
+
+.error-bg {
+    background-color: var(--secondary-light);
+}
+
+header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
+    color: var(--neutral-dark);
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    background-color: white;
+}
+
+main p {
+    margin: 0;
+}
+
+main button {
+    align-self: flex-end;
+}
+
+svg {
+    width: 50px;
+    color: var(--neutral-dark);
+}
+</style>

web/admin-gui/src/utils/database.ts

@@ -11,25 +11,27 @@ export interface Article {
 	online: boolean
 }
 
-export async function getArticles(id: string) : Promise<Array<Article>> {
+export async function getArticles(id: string): Promise<Array<Article>> {
 	return await fetch(`${baseApiUrl}/articles/${id}`, {
 		credentials: 'include',
 		method: 'GET',
 	})
 		.then(result => result.json())
-		.catch(error => {
-			console.error(error)
-		})
 }
 
-export async function postArticle(article: Article) : Promise<object> {
+async function sendArticle(article: Article, method: 'POST' | 'PUT') {
 	return await fetch(`${baseApiUrl}/articles/${article.titleID}`, {
 		credentials: 'include',
-		method: 'POST',
- 		body: JSON.stringify(article)
+		method,
+		body: JSON.stringify(article)
 	})
 		.then(result => result.json())
-		.catch(error => {
-			console.error(error)
-		})
+}
+
+export async function postArticle(article: Article): Promise<object> {
+	return await sendArticle(article, 'POST')
+}
+
+export async function editArticle(article: Article): Promise<object> {
+	return await sendArticle(article, 'PUT')
 }

web/admin-gui/src/views/ArticlesEdit.vue

@@ -1,23 +1,48 @@
 <script setup lang="ts">
-import { getArticles, type Article } from '@/utils/database';
+import Modal from '@/components/ModalSuccessError.vue';
+import { editArticle, getArticles, type Article } from '@/utils/database';
 import Editor from '@tinymce/tinymce-vue';
 import { onMounted, ref, type Ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 const article: Ref<Article | void> = ref()
 const editorData: Ref<string> = ref('')
+const router = useRouter()
+
+const successModalShow = ref(false)
+const errorModalShow = ref(false)
+const errorModalDescription: Ref<string> = ref("Quelque chose s'est mal passé...")
 
 onMounted(async () => {
-	const articleFetch = await getArticles(useRoute().params.articleID as string)
-	article.value = articleFetch[0]
-	editorData.value = article.value.content.html
+	await getArticles(useRoute().params.articleID as string)
+		.then(articleFetch => {
+			article.value = articleFetch[0]
+			editorData.value = article.value.content.html
+		})
+		.catch(error => {
+			errorModalDescription.value = "Impossible de récupérer l'article. Vérifiez l'URL. Tentez-vous d'accéder au mode édition directement depuis un lien ?"
+			errorModalShow.value = true
+			console.error(error)
+		})
 })
 
 function abort() {
+	router.push('/articles')
 }
 
-function saveContent() {
-	console.log(editorData.value)
+async function saveContent() {
+	if (article.value == undefined) return;
+	article.value.content.html = editorData.value
+	await editArticle(article.value)
+		.then(() => {
+			successModalShow.value = true
+		})
+		.catch(error => {
+			errorModalDescription.value = `Impossible de sauvegarder l'article. (${error.toString()})`
+			errorModalShow.value = true
+			console.error(error)
+		})
+
 }
 </script>
 	
@@ -33,9 +58,14 @@ function saveContent() {
 		</div>
 		<aside class="buttons">
 			<button @click="saveContent()" class="button-primary">Enregistrer</button>
-			<button @click="abort()" class="button-secondary">Annuler</button>
+			<button @click="abort()" class="button-secondary">Retour</button>
 		</aside>
 	</div>
+	<Modal v-if="errorModalShow" :description="errorModalDescription" @close="errorModalShow = false" type="error">
+	</Modal>
+	<Modal v-if="successModalShow" description="Le contenu a bien été sauvegardé." @close="successModalShow = false"
+		type="success">
+	</Modal>
 </template>
 
 <style scoped>