tracer/Spookie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

before suspend

Browse Source
This commit is contained in:
tracer
2022-05-23 16:25:55 +02:00
parent 8fab301419
commit aec0b4356a
24 changed files with 1291 additions and 1067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
assets/js/components/pages/PagesIndex.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<div class="box ma7 p-5">
<h2
v-if="page"
v-html="page.name"
/>
<div
v-if="page"
v-html="page.content"
/>
<router-link
:to="editTarget"
variant="outline"
>
<button>
<i class="fa fa-2x fa-fw fa-edit"/>
</button>
</router-link>
<hr>
</div>
</template>
<script setup>
import { reactive, watchEffect, computed } from 'vue'
import axios from 'axios'
//import h from 'highlightjs'
//import hi from 'highlightjs-line-numbers.js'
//hi.highlightAll()
//hi.initLineNumbersOnLoad()
const props = defineProps({
slug: {
type: String,
required: true
}
})
let page = reactive({ name: '', slug: '' })
const editTarget = computed(() => {
if (page) {
return `/pages/edit/${page.slug}`
}
return ''
})
const getPagesDetails = async (slug) => {
console.log('get page details')
await axios.get(`/api/pages?slug=${slug}`)
.then((response) => {
page = response.data['hydra:member']
console.log(page)
})
}
// watch fpr slug
watchEffect(() => getPagesDetails(props.slug))
</script>

100
assets/js/components/pages/edit.vue
View File

@@ -6,28 +6,57 @@
<tabs-group @tabActivated="tabActivated">
<tab-content title="Visual Editor">
<div class="editor mt-2">
<VueEditor
v-model="page.content"
:editor-options="editorOptions"
<QuillEditor
ref="editor"
theme="snow"
:content="JSON.parse(page.content)"
:options="editorOptions"
:disabled="isVueEditorDisabled"
/>
<button
class="btn btn-primary mt-3 mb-2"
@click="saveContent"
>
Save
</button>
</div>
</tab-content>
<tab-content title="Raw Content">
<tab-content title="Preview">
<div class="preview mt-2 no-overflow">
<QuillEditor
ref="preview"
theme="bubble"
class="no-overflow"
:content="JSON.parse(page.content)"
:options="editorOptions"
:disabled="true"
/>
</div>
<!--
<div>
<textarea
v-model="page.content"
class="p-fluid pages-editor-raw"
/>
</div>
-->
</tab-content>
<tab-content title="Delta">
<div class="editor mt-2">
<textarea
ref="delta"
v-model="page.content"
class="p-fluid pages-editor-raw"
/>
</div>
<button
class="btn btn-primary mt-3 mb-2"
@click="saveDelta"
>
Save
</button>
</tab-content>
</tabs-group>
<button
class="btn btn-primary mt-3 mb-2"
@click="saveContent"
>
Save
</button>
</div>
<div v-else>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"/>
@@ -39,20 +68,31 @@
import axios from 'axios'
// Basic Use - Covers most scenarios
// https://github.com/davidroyer/vue2-editor => docs apply for version 3, too
import { VueEditor } from 'vue3-editor'
import 'highlight.js/styles/tomorrow-night-blue.css'
import hljs from 'highlight.js'
import hljs from 'highlightjs'
import 'highlightjs/styles/dracula.css'
//import Quill from 'quill'
import { Quill, QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import '@vueup/vue-quill/dist/vue-quill.bubble.css'
import htmlEditButton from 'quill-html-edit-button'
import TabsGroup from '@/components/tabs/TabsGroup'
import TabContent from '@/components/tabs/TabContent'
Quill
// .register('modules/syntax', syntax, false)
.register('modules/htmlEditButton', htmlEditButton)
hljs.configure({
languages: ['javascript', 'php', 'swift']
})
export default {
name: 'PagesEdit',
components: {
VueEditor,
QuillEditor,
TabsGroup,
TabContent
},
@@ -62,12 +102,15 @@ export default {
isVueEditorDisabled: false,
editorOptions: {
modules: {
htmlEditButton: {
debug: true
},
syntax: {
highlight: (text) => hljs.highlightAuto(text).value
}
},
theme: 'snow'
}
}
},
theme: 'snow'
}),
beforeMount() {
const { slug } = this.$route.params
@@ -81,13 +124,24 @@ export default {
},
methods: {
saveContent() {
this.page.content = JSON.stringify(this.$refs.editor.getContents())
axios
.put(`/api/pages/${this.page.id}`, this.page)
.then(() => {
this.$router.push({
name: 'Pages',
params: { slug: this.page.slug }
})
//this.$router.push({
// name: 'Pages',
// params: { slug: this.page.slug }
//})
})
},
saveDelta() {
axios
.put(`/api/pages/${this.page.id}`, this.page)
.then(() => {
//this.$router.push({
// name: 'Pages',
// params: { slug: this.page.slug }
//})
})
},
tabActivated(name) {

69
assets/js/components/pages/index.vue
View File

@@ -1,69 +0,0 @@
<template>
<div class="box ma7 p-5">
<h2
v-if="page"
v-html="page.name"
/>
<div
v-if="page"
v-html="page.content"
/>
<router-link
:to="editTarget"
variant="outline"
>
<button>
<i class="fa fa-2x fa-fw fa-edit"/>
</button>
</router-link>
<hr>
</div>
</template>
<script>
import axios from 'axios'
//import h from 'highlightjs'
//import hi from 'highlightjs-line-numbers.js'
//hi.highlightAll()
//hi.initLineNumbersOnLoad()
export default {
name: 'PagesDisplay',
props: {
slug: {
type: String,
required: true
}
},
data: () => ({
page: null
}),
computed: {
editTarget() {
if (this.page) {
return `/pages/edit/${this.page.slug}`
}
return ''
}
},
beforeMount() {
this.getPagesDetails()
this.$watch(
() => this.slug,
() => {
this.getPagesDetails()
}
)
},
methods: {
async getPagesDetails() {
await axios.get(`/api/pages?slug=${this.slug}`)
.then((response) => {
[this.page] = response.data['hydra:member']
})
}
}
}
</script>