Add (v1)

resources/js/vue/PostEditor.vue

@@ -31,12 +31,13 @@
         </div>
 
         <native-image-block
+          ref="imageBlock"
           class="mb-3"
           :input-image="post.featured_image"
           @saved="imageSaved"
         ></native-image-block>
 
-        <div class="card">
+        <div v-if="showEditorJs" class="card">
           <div class="card-body">
             <vue-editor-js
               v-on:saved="editorSaved"
@@ -62,8 +63,56 @@
               Post Status: {{ item }}
             </option>
           </select>
-          <button @click="checkAndSave" class="btn btn-primary">
-            Save as {{ post.status }}
+          <div class="fw-bold">Publish Date</div>
+          <div class="input-icon mb-2">
+            <span class="input-icon-addon"
+              ><!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path
+                  d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"
+                ></path>
+                <path d="M16 3v4"></path>
+                <path d="M8 3v4"></path>
+                <path d="M4 11h16"></path>
+                <path d="M11 15h1"></path>
+                <path d="M12 15v3"></path>
+              </svg>
+            </span>
+            <input
+              type="date"
+              v-model="post.publish_date"
+              class="form-control"
+              placeholder="Select a date"
+              id="datepicker-icon-prepend"
+            />
+          </div>
+          <button
+            @click="checkAndSave"
+            class="btn btn-primary"
+            style="height: 50px"
+          >
+            <div
+              v-if="isSaving"
+              class="spinner-border"
+              role="status"
+              :disabled="isSaving"
+              :class="isSaving ? 'disabled' : ''"
+            >
+              <span class="visually-hidden">Saving...</span>
+            </div>
+            <span v-else>Save as {{ post.status }}</span>
           </button>
         </div>
         <div class="card mb-2">
@@ -101,6 +150,36 @@
             </div>
           </div>
         </div>
+        <div class="card mb-2">
+          <div class="card-header fw-bold">Authors</div>
+          <div class="card-body">
+            <div class="py-1" v-for="item in authors" v-bind:key="item.id">
+              <label>
+                <input
+                  type="radio"
+                  :id="item.id"
+                  :value="item.id"
+                  v-model="post.author_id"
+                />
+                {{ item.name }}
+              </label>
+            </div>
+          </div>
+        </div>
+        <div class="card mb-2">
+          <div class="card-header fw-bold">Other Settings</div>
+          <div class="card-body">
+            <div class="form-check form-switch">
+              <input
+                v-model="post.featured"
+                class="form-check-input"
+                type="checkbox"
+                role="switch"
+              />
+              <label class="form-check-label">Feature this Post</label>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -116,16 +195,29 @@ import { mapActions, mapState } from "pinia";
 
 import { usePostStore } from "@/stores/postStore.js";
 
+import axios from "axios";
+import route from "ziggy-js/src/js/index";
+
 export default {
   components: { VueEditorJs, List, Header },
+  props: {
+    postId: {
+      type: Number, // The prop type is Number
+      default: null, // Default value if the prop is not provided
+    },
+  },
   data() {
     return {
+      isSaving: false,
+      showEditorJs: false,
       post: {
+        id: null,
         title: "",
         slug: "",
         excerpt: "",
         author_id: null,
         featured: false,
+        publish_date: null,
         featured_image: null,
         body: {
           time: 1591362820044,
@@ -179,6 +271,7 @@ export default {
       "countryLocales",
       "localeCategories",
       "defaultLocaleSlug",
+      "authors",
     ]),
     getPostFullUrl() {
       if (this.post.slug?.length > 0) {
@@ -200,6 +293,7 @@ export default {
     ...mapActions(usePostStore, [
       "fetchCountryLocales",
       "fetchLocaleCategories",
+      "fetchAuthors",
     ]),
     checkAndSave() {
       let errors = [];
@@ -208,6 +302,10 @@ export default {
         errors.push("post title");
       }
 
+      if (!(this.post.publish_date?.length > 0)) {
+        errors.push("publish date");
+      }
+
       if (!(this.post.slug?.length > 0)) {
         errors.push("post slug");
       }
@@ -241,7 +339,36 @@ export default {
         this.savePost();
       }
     },
-    savePost() {},
+    savePost() {
+      this.isSaving = true;
+
+      const formData = new FormData();
+
+      for (const [key, _item] of Object.entries(this.post)) {
+        if (key == "body") {
+          formData.append(key, JSON.stringify(_item));
+        } else {
+          formData.append(key, _item);
+        }
+      }
+
+      axios
+        .post(route("api.admin.post.upsert"), formData, {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        })
+        .then((response) => {
+          console.warn(response);
+        });
+
+      setTimeout(
+        function () {
+          this.isSaving = false;
+        }.bind(this),
+        1000
+      );
+    },
     onInitialized(editor) {},
     imageSaved(src) {
       this.post.featured_image = src;
@@ -278,6 +405,34 @@ export default {
       }
       return null;
     },
+    async fetchPostData(id) {
+      const response = await axios.get(route("api.admin.post.get", { id: id }));
+
+      if (response?.data?.post != null) {
+        let tmp = this.post;
+        let post = response.data.post;
+
+        tmp.id = post.id;
+        tmp.title = post.title;
+        tmp.slug = post.slug;
+        tmp.publish_date = post.publish_date;
+        tmp.excerpt = post.excerpt;
+        tmp.author_id = post.author_id;
+        tmp.featured = post.featured;
+        tmp.featured_image = post.featured_image;
+        tmp.body = post.body;
+        tmp.locale_slug = post.post_category.category.country_locale_slug;
+        tmp.locale_id = post.post_category.category.country_locale_id;
+        tmp.status = post.status;
+        tmp.categories = post.post_category.category.id;
+
+        this.post = tmp;
+
+        this.config.data = post.body;
+      }
+
+      console.log(response.data.post);
+    },
     slugify: function (title) {
       var slug = "";
       // Change to lower case
@@ -300,6 +455,25 @@ export default {
       setTimeout(
         function () {
           this.fetchLocaleCategories(this.post.locale_slug);
+          this.fetchAuthors();
+
+          if (this.postId != null) {
+            this.fetchPostData(this.postId).then(() => {
+              setTimeout(
+                function () {
+                  this.showEditorJs = true;
+                }.bind(this),
+                1000
+              );
+            });
+          } else {
+            setTimeout(
+              function () {
+                this.showEditorJs = true;
+              }.bind(this),
+              1000
+            );
+          }
         }.bind(this),
         100
       );