Implementend first draft of article edition page

web/admin-gui/src/App.vue

@@ -4,14 +4,14 @@ import Navbar from './components/Navbar.vue';
 </script>
 
 <template>
-	<div class="container">
+	<div class="app-container">
 		<Navbar v-if="useRoute().name !== 'login'"></Navbar>
 		<RouterView />
 	</div>
 </template>
 
 <style scoped>
-.container {
+.app-container {
 	display: flex;
 	flex-direction: column;
 	height: 100vh;

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

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import Editor from '@tinymce/tinymce-vue';
-import { ref, type Ref } from 'vue';
-
-const emits = defineEmits(['dataSaved', 'abort'])
-const props = defineProps<{
-	data?: string
-}>()
-
-const defaultData = `<h1>Bienvenue</h1><p>Vous &ecirc;tes en mode <em>&eacute;dition</em> d'article.</p><p>Celui-ci semble encore neuf ! Supprimez ces lignes et laissez libre cours &agrave; votre imagination :)</p><p>Pour plus d'infos, rendez-vous sur la <a title="Attention, rickroll incoming" href="https:/www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">page d'aide</a>.</p>`
-const editorData: Ref<string> = ref(props.data ?? defaultData)
-
-function abort() {
-	emits('abort')
-}
-
-function saveContent() {
-	emits('dataSaved', editorData)
-}
-</script>
-
-<template>
-	<div class="container">
-		<div id="editor">
-			<Editor tinymce-script-src="src/assets/tinymce/tinymce.min.js"
-				:init="{ promotion: false, language: 'fr_FR', resize: false, height: '100%' }"
-				:plugins="['link', 'codesample']"
-				toolbar="undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | codesample link"
-				v-model="editorData">
-			</Editor>
-		</div>
-		<aside class="buttons">
-			<button @click="saveContent()" class="button-primary">Enregistrer</button>
-			<button @click="abort()" class="button-secondary">Annuler</button>
-		</aside>
-	</div>
-</template>
-
-<style scoped>
-.container {
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	height: 100%;
-}
-
-#editor {
-	padding-top: 16px;
-	width: 100%;
-	height: 100%;
-}
-
-.tox-tinymce {
-	border-radius: 0 !important;
-}
-
-.buttons {
-	position: relative;
-	z-index: 1;
-
-	display: flex;
-	flex-direction: column;
-	justify-content: right;
-	align-content: center;
-	gap: 16px;
-
-	width: fit-content;
-	padding: 32px 16px;
-
-	box-shadow: #0002 0 10px 10px;
-}
-</style>

web/admin-gui/src/router/index.ts

@@ -5,6 +5,7 @@ import Debug from '@/views/Debug.vue'
 import Login from '@/views/Login.vue'
 import Home from '@/views/Home.vue'
 import Articles from '@/views/Articles.vue'
+import Edition from '@/views/Edition.vue'
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -41,6 +42,14 @@ const router = createRouter({
 				title: 'GohCMS - Articles'
 			}
 		},
+		{
+			path: '/articles/edit/:articleID',
+			name: 'edition',
+			component: Edition,
+			meta: {
+				title: 'GohCMS - Edition'
+			}
+		},
 	]
 })
 

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import Editor from '@/components/Editor.vue';
 import { useAuthStore } from '@/stores/AuthStore';
 import { ref } from 'vue';
 
@@ -24,10 +23,7 @@ function ping() {
 </script>
 
 <template>
-	<div class="editor">
-		<Editor :show-default-data="true"></Editor>
-	</div>
-	<!-- <div class="inputs-group">
+	<div class="inputs-group">
 		<div>
 			<input type="text" placeholder="article ID" v-model="articleID">
 			<button class="button-primary" @click="getArticles(articleID)">get article</button>
@@ -35,7 +31,7 @@ function ping() {
 	</div>
 	<div class="buttons-group">
 		<button class="button-primary" @click="ping()">ping</button>
-	</div> -->
+	</div>
 </template>
 
 <style scoped>

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import Editor from '@tinymce/tinymce-vue';
+import { ref, type Ref } from 'vue';
+import { useRoute } from 'vue-router';
+import tinymceScriptSrc from '@/assets/tinymce/tinymce.min.js?url'
+
+const articleID = useRoute().params.articleID
+const defaultData = `<h1>Bienvenue</h1><p>Vous &ecirc;tes en mode <em>&eacute;dition</em> d'article.</p><p>Celui-ci semble encore neuf ! Supprimez ces lignes et laissez libre cours &agrave; votre imagination :)</p><p>Pour plus d'infos, rendez-vous sur la <a title="Attention, rickroll incoming" href="https:/www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">page d'aide</a>.</p>`
+const editorData: Ref<string> = ref(defaultData)
+
+console.log(articleID)
+
+function abort() {
+}
+
+function saveContent() {
+    console.log(editorData.value)
+}
+</script>
+
+<template>
+    <div class="container">
+        <div id="editor">
+            <Editor :tinymce-script-src="tinymceScriptSrc"
+                :init="{ promotion: false, language: 'fr_FR', resize: false, height: '100%' }"
+                :plugins="['link', 'codesample']"
+                toolbar="undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | codesample link"
+                v-model="editorData">
+            </Editor>
+        </div>
+        <aside class="buttons">
+            <button @click="saveContent()" class="button-primary">Enregistrer</button>
+            <button @click="abort()" class="button-secondary">Annuler</button>
+        </aside>
+    </div>
+</template>
+
+<style scoped>
+.container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+#editor {
+    padding-top: 16px;
+    width: 100%;
+    height: 100%;
+}
+
+.tox-tinymce {
+    border-radius: 0 !important;
+}
+
+.buttons {
+    position: relative;
+    z-index: 1;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: right;
+    align-content: center;
+    gap: 16px;
+
+    width: fit-content;
+    padding: 32px 16px;
+
+    box-shadow: #0002 0 0 10px;
+}
+</style>