Create dedicated page for product and add ckeditor for description

Author: thecodeholic

backend/package-lock.json

@@ -8,6 +8,8 @@
  "preview": "vite preview"
  },
  "dependencies": {
+ "@ckeditor/ckeditor5-build-classic": "^39.0.1",
+ "@ckeditor/ckeditor5-vue": "^5.1.0",
  "axios": "^0.27.2",
  "chart.js": "^3.9.1",
  "vue": "^3.2.25",

backend/package.json

@@ -12,7 +12,7 @@
  :value="props.modelValue"
  :class="inputClasses"
  @change="onChange($event.target.value)">
- <option v-for="option of selectOptions" :value="option.key">{{option.text}}</option>
+ <option v-for="option of selectOptions" :value="option.key">{{ option.text }}</option>
  </select>
  </template>
  <template v-else-if="type === 'textarea'">
@@ -23,6 +23,15 @@
  :class="inputClasses"
  :placeholder="label"></textarea>
  </template>
+ <template v-else-if="type === 'richtext'">
+ <ckeditor :name="name"
+ :required="required"
+ :editor="editor"
+ :model-value="props.modelValue"
+ @input="onChange"
+ :class="inputClasses"
+ :config="props.editorConfig"></ckeditor>
+ </template>
  <template v-else-if="type === 'file'">
  <input :type="type"
  :name="name"
@@ -57,13 +66,16 @@
  {{ append }}
  </span>
  </div>
- <small v-if="errors && errors[0]" class="text-red-600">{{errors[0]}}</small>
+ <small v-if="errors && errors[0]" class="text-red-600">{{ errors[0] }}</small>
  </div>
 </template>
 
 <script setup>
 
 import {computed, ref} from "vue";
+import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
+
+const editor = ClassicEditor
 
 const props = defineProps({
  modelValue: [String, Number, File],
@@ -86,7 +98,14 @@ const props = defineProps({
  errors: {
  type: Array,
  required: false
- }
+ },
+ editorConfig: {
+ type: Object,
+ default: () => ({
+ // toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
+ })
+ },
+
 })
 
 const id = computed(() => {
@@ -121,5 +140,11 @@ function onChange(value) {
 </script>
 
 <style scoped>
+/deep/ .ck.ck-editor {
+ width: 100%;
+}
 
+/deep/ .ck-content {
+ min-height: 200px;
+}
 </style>

backend/src/components/core/CustomInput.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="flex flex-col items-center" :class="class">
+ <div class="spinner flex flex-col items-center" :class="class">
  <svg
  class="animate-spin -ml-1 h-8 w-8 text-gray-700"
  xmlns="http://www.w3.org/2000/svg"
@@ -40,5 +40,7 @@ const {text} = defineProps({
 </script>
 
 <style scoped>
-
+.spinner {
+ min-height: 140px;
+}
 </style>

backend/src/components/core/Spinner.vue

@@ -1,4 +1,6 @@
 import {createApp} from 'vue'
+import CKEditor from '@ckeditor/ckeditor5-vue';
+
 import store from './store'
 import router from './router'
 import './index.css';
@@ -11,6 +13,7 @@ const app = createApp(App);
 app
  .use(store)
  .use(router)
+ .use( CKEditor )
  .mount('#app')
 ;
 

backend/src/main.js

@@ -15,6 +15,7 @@ import store from "../store";
 import Report from "../views/Reports/Report.vue";
 import OrdersReport from "../views/Reports/OrdersReport.vue";
 import CustomersReport from "../views/Reports/CustomersReport.vue";
+import ProductForm from "../views/Products/ProductForm.vue";
 
 const routes = [
  {
@@ -40,6 +41,16 @@ const routes = [
  name: 'app.products',
  component: Products
  },
+ {
+ path: 'products/create',
+ name: 'app.products.create',
+ component: ProductForm
+ },
+ {
+ path: 'products/:id',
+ name: 'app.products.edit',
+ component: ProductForm
+ },
  {
  path: 'users',
  name: 'app.users',

backend/src/router/index.js

@@ -0,0 +1,108 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+ <div id="product-form">
+ <div class="flex items-center justify-between mb-3">
+ <h1 class="text-3xl font-semibold">{{ product.id ? `Update product: "${product.title}"` : 'Create new Product' }}</h1>
+ </div>
+ <Spinner v-if="loading"
+ class="p-5 z-[100] absolute left-0 top-0 bg-white right-0 bottom-0 flex items-center justify-center"/>
+ <form @submit.prevent="onSubmit">
+ <div class="bg-white px-4 pt-5 pb-4 z-50">
+ <CustomInput class="mb-2" v-model="product.title" label="Product Title"/>
+ <CustomInput type="file" class="mb-2" label="Product Image" @change="file => product.image = file"/>
+ <CustomInput type="richtext" class="mb-2" v-model="product.description" label="Description"/>
+ <CustomInput type="number" class="mb-2" v-model="product.price" label="Price" prepend="$"/>
+ <CustomInput type="checkbox" class="mb-2" v-model="product.published" label="Published"/>
+
+
+ </div>
+ <footer class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+ <button type="submit"
+ class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm
+ text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500">
+ Save
+ </button>
+ <button type="button"
+ @click="onSubmit($event, true)"
+ class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm
+ text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500">
+ Save and Close
+ </button>
+ <router-link :to="{name: 'app.products'}"
+ class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+ Cancel
+ </router-link>
+ </footer>
+ </form>
+ </div>
+</template>
+
+<script setup>
+import {computed, onMounted, ref} from 'vue'
+import CustomInput from "../../components/core/CustomInput.vue";
+import store from "../../store/index.js";
+import Spinner from "../../components/core/Spinner.vue";
+import {useRoute, useRouter} from "vue-router";
+
+const product = ref({
+ id: null,
+ title: null,
+ image: null,
+ description: '',
+ price: null,
+ published: null
+})
+
+const loading = ref(false)
+
+const router = useRouter();
+const route = useRoute();
+
+onMounted(() => {
+ if (route.params.id) {
+ loading.value = true
+ store.dispatch('getProduct', route.params.id)
+ .then(({data}) => {
+ loading.value = false
+ product.value = data
+ })
+ }
+})
+
+function onSubmit(event, close = false) {
+ loading.value = true
+ if (product.value.id) {
+ store.dispatch('updateProduct', product.value)
+ .then(response => {
+ loading.value = false;
+ if (response.status === 200) {
+ store.commit('showToast', 'Product was successfully updated')
+ store.dispatch('getProducts')
+ if (close) {
+ router.push({name: 'app.products'})
+ }
+ }
+ })
+ } else {
+ store.dispatch('createProduct', product.value)
+ .then(response => {
+ loading.value = false;
+ if (response.status === 201) {
+ store.commit('showToast', 'Product was successfully created')
+ store.dispatch('getProducts')
+ if (close) {
+ router.push({name: 'app.products'})
+ }
+ }
+ })
+ .catch(err => {
+ loading.value = false;
+ })
+ }
+}
+</script>
+<style>
+#product-form {
+ position: relative;
+}
+</style>

backend/src/views/Products/ProductForm.vue

@@ -1,14 +1,13 @@
 <template>
  <div class="flex items-center justify-between mb-3">
  <h1 class="text-3xl font-semibold">Products</h1>
- <button type="button"
- @click="showAddNewModal()"
+ <router-link :to="{name: 'app.products.create'}"
  class="py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
  >
  Add new Product
- </button>
+ </router-link>
  </div>
- <ProductsTable @clickEdit="editProduct"/>
+ <ProductsTable/>
  <ProductModal v-model="showProductModal" :product="productModel" @close="onModalClose"/>
 </template>
 

backend/src/views/Products/Products.vue

@@ -96,20 +96,20 @@
  >
  <div class="px-1 py-1">
  <MenuItem v-slot="{ active }">
- <button
+ <router-link
+ :to="{name: 'app.products.edit', params: {id: product.id}}"
  :class="[
  active ? 'bg-indigo-600 text-white' : 'text-gray-900',
  'group flex w-full items-center rounded-md px-2 py-2 text-sm',
  ]"
- @click="editProduct(product)"
  >
  <PencilIcon
  :active="active"
  class="mr-2 h-5 w-5 text-indigo-400"
  aria-hidden="true"
  />
  Edit
- </button>
+ </router-link>
  </MenuItem>
  <MenuItem v-slot="{ active }">
  <button
@@ -244,9 +244,6 @@ function deleteProduct(product) {
  })
 }
 
-function editProduct(p) {
- emit('clickEdit', p)
-}
 </script>
 
 <style scoped>