before recipes:update

assets/js/components/pages/edit.vue

@@ -1,62 +1,77 @@
 <template>
-    <div v-if="!isLoading">
-        <div id="edit-wrapper">
-            <div class="editor mt-2">
-                <VueEditor v-model="page.content"></VueEditor>
-            </div>
-            <b-button @click="saveContent" class="mt-3 mb-2">Save</b-button>
-        </div>
-    </div>
-    <div v-else>
-        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
-        <span class="sr-only">Loading …</span></div>
+	<div
+		v-if="!isLoading"
+		class="box p-3"
+	>
+		<tab-wrapper>
+			<tab-content title="Visual Editor">
+				<div class="editor mt-2">
+					<!-- *** disbaled = true? -->
+					<VueEditor v-model="page.content"/>
+				</div>
+			</tab-content>
+			<tab-content title="Raw Content">
+				<div>
+					<textarea
+						v-model="page.content"
+						class="p-fluid"
+					/>
+				</div>
+			</tab-content>
+		</tab-wrapper>
+		<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"/>
+		<span class="sr-only">Loading …</span>
+	</div>
 </template>
 
 <script>
 
-import axios from "axios";
+import axios from 'axios'
 
 // Basic Use - Covers most scenarios
-import { VueEditor } from "vue2-editor";
-
-
+import { VueEditor } from 'vue3-editor'
+import TabWrapper from '@/components/tabs/TabWrapper'
+import TabContent from '@/components/tabs/TabContent'
 
 export default {
-    name: 'PagesEdit',
-    components: {
-        VueEditor
-    },
-    data: () => ({
-        page: null,
-        isLoading: true
-    }),
-    methods: {
-        saveContent() {
-            console.log(this.page)
-            axios
-                .put('/api/pages/' + this.page.id, this.page)
-                .then(response => {
-                    console.log("resp:" + response)
-                })
-        }
-    },
-    beforeMount() {
-        const slug = this.$route.params.slug
-        console.log("slug: " + slug)
+	name: 'PagesEdit',
+	components: {
+		VueEditor,
+		TabWrapper,
+		TabContent
+	},
+	data: () => ({
+		page: null,
+		isLoading: true
+	}),
+	beforeMount() {
+		const { slug } = this.$route.params
+		console.log(`slug: ${slug}`)
 
-        axios
-            .get('/api/pages?slug=' + slug)
-            .then(response => {
-                this.page = response.data['hydra:member'][0]
-                this.isLoading = false
-            })
-    },
+		axios
+			.get(`/api/pages?slug=${slug}`)
+			.then((response) => {
+				[this.page] = response.data['hydra:member']
+				this.isLoading = false
+			})
+	},
+	methods: {
+		saveContent() {
+			console.log(this.page)
+			axios
+				.put(`/api/pages/${this.page.id}`, this.page)
+				.then((response) => {
+					console.log(`resp:${response}`)
+				})
+		}
+	}
 }
 </script>
-
-<style>
-    .ql-container {
-        height: 800px !important;
-        overflow-y: scroll;
-    }
-</style>

assets/js/components/pages/index.vue

@@ -1,48 +1,64 @@
 <template>
-    <div>
+	<div class="box ma7 p-5">
+		<h2
+			v-if="page"
+			v-html="page.name"
+		/>
+		<div
+			v-if="page"
+			v-html="page.content"
+		/>
 
-
-        <h2 v-if="page" v-html="page.name"></h2>
-
-        <div v-if="page" v-html="page.content"></div>
-        <b-button :to="editTarget" variant="outline"><i class="fa fa-2x fa-fw fa-edit"></i></b-button>
-        <hr>
-    </div>
+		<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 axios from 'axios'
 
 export default {
-    name: "Pages",
-    data: () => ({
-        page: null
-    }),
-    watch: {
-        $route() {
-            console.log("watch called")
-            this.getPagesDetails()
-        }
-    },
-    beforeMount() {
-        this.getPagesDetails()
-    },
-    methods: {
-        getPagesDetails() {
-            const slug = this.$route.params.slug
-            console.log("slug: " + slug)
-
-            axios
-                .get('/api/pages?slug=' + slug)
-                .then(response => (this.page = response.data['hydra:member'][0]))
-        }
-    },
-    computed: {
-        editTarget() {
-            if (this.page) {
-                return "/pages/edit/" + this.page.slug
-            }
-        }
-    }
+	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>
+</script>