fsylvain/RenewCMS
1
0
Fork 0
mirror of https://github.com/Floriansylvain/RenewCMS.git synced 2026-08-19 11:43:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Implementend first draft of article edition page

Browse Source
This commit is contained in:
Florian Sylvain
2023-01-01 04:28:19 +01:00
parent 91e9448b3b
commit 214168e5ed
5 changed files with 85 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin-gui/src/App.vue
+2 -2
View File
@@ -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
-72
View File
@@ -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
+9
View File
@@ -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
+2 -6
View File
@@ -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
+72
View File
@@ -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>