Add (v1)

resources/js/stores/postStore.js

@@ -10,6 +10,7 @@ export const usePostStore = defineStore("postStore", {
       defaultLocaleSlug: "my",
       countryLocales: [],
       localeCategories: [],
+      authors: [],
     },
   }),
   getters: {
@@ -22,8 +23,21 @@ export const usePostStore = defineStore("postStore", {
     localeCategories(state) {
       return state.data.localeCategories;
     },
+    authors(state) {
+      return state.data.authors;
+    },
   },
   actions: {
+    async fetchAuthors() {
+      try {
+        const response = await axios.get(route("api.admin.authors"));
+        console.log(response);
+        this.data.authors = response.data.authors;
+      } catch (error) {
+        // alert(error);
+        console.log(error);
+      }
+    },
     async fetchCountryLocales() {
       try {
         const response = await axios.get(route("api.admin.country-locales"));

resources/js/vue/NativeImageBlock.vue

@@ -9,7 +9,7 @@
         <div
           class="position-absolute w-100 h-100 d-flex justify-content-center text-center"
         >
-          <div v-if="isUploading" class="align-self-center">
+          <div v-if="isUploading || !isLoaded" class="align-self-center">
             <div class="spinner-border text-light" role="status">
               <span class="visually-hidden">Loading...</span>
             </div>
@@ -34,16 +34,18 @@
 
 <script>
 import axios from "axios";
+import route from "ziggy-js/src/js/index";
 
 export default {
   name: "NativeImageBlock",
   props: {
-    apiUrl: {
+    inputImage: {
       type: String,
-      default: "https://productalert.test/api/admin/image/upload",
+      default: null,
     },
   },
   data: () => ({
+    isLoaded: false,
     isUploading: false,
     imgSrc: null,
     placeholderSrc: "https://placekitten.com/g/2100/900",
@@ -91,7 +93,7 @@ export default {
       formData.append("file", file);
 
       axios
-        .post(this.apiUrl, formData, {
+        .post(route("api.admin.upload.cloud.image"), formData, {
           headers: {
             "Content-Type": "multipart/form-data",
           },
@@ -115,9 +117,23 @@ export default {
           this.isUploading = false;
         });
     },
+    setInputImage() {
+      if (this.inputImage != null && this.inputImage?.length > 0) {
+        this.imgSrc = this.inputImage;
+      }
+      this.isLoaded = true;
+    },
   },
   mounted() {
     this.isUploading = false;
+
+    setTimeout(
+      function () {
+        this.setInputImage();
+        this.isLoaded = true;
+      }.bind(this),
+      3000
+    );
   },
 };
 </script>

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
       );

resources/js/ziggy.js

@@ -1,4 +1,4 @@
-const Ziggy = {"url":"https:\/\/productalert.test","port":null,"defaults":{},"routes":{"debugbar.openhandler":{"uri":"_debugbar\/open","methods":["GET","HEAD"]},"debugbar.clockwork":{"uri":"_debugbar\/clockwork\/{id}","methods":["GET","HEAD"]},"debugbar.assets.css":{"uri":"_debugbar\/assets\/stylesheets","methods":["GET","HEAD"]},"debugbar.assets.js":{"uri":"_debugbar\/assets\/javascript","methods":["GET","HEAD"]},"debugbar.cache.delete":{"uri":"_debugbar\/cache\/{key}\/{tags?}","methods":["DELETE"]},"sanctum.csrf-cookie":{"uri":"sanctum\/csrf-cookie","methods":["GET","HEAD"]},"ignition.healthCheck":{"uri":"_ignition\/health-check","methods":["GET","HEAD"]},"ignition.executeSolution":{"uri":"_ignition\/execute-solution","methods":["POST"]},"ignition.updateConfig":{"uri":"_ignition\/update-config","methods":["POST"]},"api.auth.login.post":{"uri":"api\/login","methods":["POST"]},"api.auth.logout.post":{"uri":"api\/logout","methods":["POST"]},"api.admin.country-locales":{"uri":"api\/admin\/country-locales","methods":["GET","HEAD"]},"api.admin.categories":{"uri":"api\/admin\/categories\/{country_locale_slug}","methods":["GET","HEAD"]},"api.admin.upload.cloud.image":{"uri":"api\/admin\/image\/upload","methods":["GET","HEAD"]},"login":{"uri":"login","methods":["GET","HEAD"]},"logout":{"uri":"logout","methods":["POST"]},"register":{"uri":"register","methods":["GET","HEAD"]},"password.request":{"uri":"password\/reset","methods":["GET","HEAD"]},"password.email":{"uri":"password\/email","methods":["POST"]},"password.reset":{"uri":"password\/reset\/{token}","methods":["GET","HEAD"]},"password.update":{"uri":"password\/reset","methods":["POST"]},"password.confirm":{"uri":"password\/confirm","methods":["GET","HEAD"]},"dashboard":{"uri":"admin","methods":["GET","HEAD"]},"about":{"uri":"admin\/about","methods":["GET","HEAD"]},"users.index":{"uri":"admin\/users","methods":["GET","HEAD"]},"posts.manage":{"uri":"admin\/posts","methods":["GET","HEAD"]},"posts.manage.edit":{"uri":"admin\/posts\/edit\/{post_id}","methods":["GET","HEAD"]},"posts.manage.new":{"uri":"admin\/posts\/new","methods":["GET","HEAD"]},"profile.show":{"uri":"admin\/profile","methods":["GET","HEAD"]},"profile.update":{"uri":"admin\/profile","methods":["PUT"]},"home":{"uri":"\/","methods":["GET","HEAD"]},"home.country":{"uri":"{country}","methods":["GET","HEAD"]},"home.country.posts":{"uri":"{country}\/posts","methods":["GET","HEAD"]},"home.country.post":{"uri":"{country}\/posts\/{post_slug}","methods":["GET","HEAD"]},"home.country.category":{"uri":"{country}\/{category}","methods":["GET","HEAD"]}}};
+const Ziggy = {"url":"https:\/\/productalert.test","port":null,"defaults":{},"routes":{"debugbar.openhandler":{"uri":"_debugbar\/open","methods":["GET","HEAD"]},"debugbar.clockwork":{"uri":"_debugbar\/clockwork\/{id}","methods":["GET","HEAD"]},"debugbar.assets.css":{"uri":"_debugbar\/assets\/stylesheets","methods":["GET","HEAD"]},"debugbar.assets.js":{"uri":"_debugbar\/assets\/javascript","methods":["GET","HEAD"]},"debugbar.cache.delete":{"uri":"_debugbar\/cache\/{key}\/{tags?}","methods":["DELETE"]},"sanctum.csrf-cookie":{"uri":"sanctum\/csrf-cookie","methods":["GET","HEAD"]},"ignition.healthCheck":{"uri":"_ignition\/health-check","methods":["GET","HEAD"]},"ignition.executeSolution":{"uri":"_ignition\/execute-solution","methods":["POST"]},"ignition.updateConfig":{"uri":"_ignition\/update-config","methods":["POST"]},"api.auth.login.post":{"uri":"api\/login","methods":["POST"]},"api.auth.logout.post":{"uri":"api\/logout","methods":["POST"]},"api.admin.post.get":{"uri":"api\/admin\/post\/{id}","methods":["GET","HEAD"]},"api.admin.country-locales":{"uri":"api\/admin\/country-locales","methods":["GET","HEAD"]},"api.admin.categories":{"uri":"api\/admin\/categories\/{country_locale_slug}","methods":["GET","HEAD"]},"api.admin.authors":{"uri":"api\/admin\/authors","methods":["GET","HEAD"]},"api.admin.upload.cloud.image":{"uri":"api\/admin\/image\/upload","methods":["POST"]},"api.admin.post.upsert":{"uri":"api\/admin\/admin\/post\/upsert","methods":["POST"]},"login":{"uri":"login","methods":["GET","HEAD"]},"logout":{"uri":"logout","methods":["POST"]},"register":{"uri":"register","methods":["GET","HEAD"]},"password.request":{"uri":"password\/reset","methods":["GET","HEAD"]},"password.email":{"uri":"password\/email","methods":["POST"]},"password.reset":{"uri":"password\/reset\/{token}","methods":["GET","HEAD"]},"password.update":{"uri":"password\/reset","methods":["POST"]},"password.confirm":{"uri":"password\/confirm","methods":["GET","HEAD"]},"dashboard":{"uri":"admin","methods":["GET","HEAD"]},"about":{"uri":"admin\/about","methods":["GET","HEAD"]},"users.index":{"uri":"admin\/users","methods":["GET","HEAD"]},"posts.manage":{"uri":"admin\/posts","methods":["GET","HEAD"]},"posts.manage.edit":{"uri":"admin\/posts\/edit\/{post_id}","methods":["GET","HEAD"]},"posts.manage.new":{"uri":"admin\/posts\/new","methods":["GET","HEAD"]},"profile.show":{"uri":"admin\/profile","methods":["GET","HEAD"]},"profile.update":{"uri":"admin\/profile","methods":["PUT"]},"home":{"uri":"\/","methods":["GET","HEAD"]},"home.country":{"uri":"{country}","methods":["GET","HEAD"]},"home.country.posts":{"uri":"{country}\/posts","methods":["GET","HEAD"]},"home.country.post":{"uri":"{country}\/posts\/{post_slug}","methods":["GET","HEAD"]},"home.country.category":{"uri":"{country}\/{category}","methods":["GET","HEAD"]}}};
 
 if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') {
     Object.assign(Ziggy.routes, window.Ziggy.routes);

resources/views/admin/posts/manage.blade.php

@@ -29,9 +29,9 @@
                                 <th>
                                     Image
                                 </th>
+                                <th>Status</th>
                                 <th>Title</th>
-                                <th>{{ __('Created at') }}</th>
-                                <th>{{ __('Updated in') }}</th>
+                                <th>Datetime</th>
                                 <th>Actions</th>
                             </tr>
                         </thead>
@@ -42,12 +42,33 @@
                                     <td><img width="80" height="60" src="{{ $post->featured_image }}"
                                             class="img-fluid rounded-2" alt=""></td>
                                     <td>
+                                      @if($post->status === 'publish')
+                                          <span class="badge bg-success">{{ ucfirst($post->status) }}</span>
+                                      @elseif($post->status === 'future')
+                                          <span class="badge bg-primary">{{ ucfirst($post->status) }}</span>
+                                      @elseif($post->status === 'draft')
+                                          <span class="badge bg-secondary">{{ ucfirst($post->status) }}</span>
+                                      @elseif($post->status === 'private')
+                                          <span class="badge bg-info">{{ ucfirst($post->status) }}</span>
+                                      @elseif ($post->status == 'trash')
+                                          <span class="badge bg-danger">{{ ucfirst($post->status) }}</span>
+                                      @else
+                                        <span class="badge bg-secondary">{{ ucfirst($post->status) }}</span>
+                                      @endif
+                                    </td>
+                                    <td>
+                                        @if(!is_empty($post->post_category?->category?->country_locale_slug) && $post->status == 'publish')
                                         <a
-                                            href="{{ route('home.country.post', ['country' => $post->post_category->category->country_locale_slug, 'post_slug' => $post->slug]) }}">{{ $post->title }}</a>
+                                            href="{{ route('home.country.post', ['country' => $post->post_category?->category?->country_locale_slug, 'post_slug' => $post->slug]) }}">{{ $post->title }}</a>
+                                        @else
+                                          {{ $post->title }}
+                                        @endif
 
                                     </td>
-                                    <td>{{ $post->created_at }}</td>
-                                    <td>{{ $post->updated_at->diffForhumans() }}</td>
+                                    <td>
+                                      Created at {{ $post->created_at->timezone(session()->get('timezone'))->isoFormat('Do MMMM YYYY, h:mm A') }}<br>
+                                        Updated {{ $post->updated_at->diffForhumans() }}
+                                    </td>
                                     <td>
                                         <div><a href="{{ route('posts.manage.edit', ['post_id' => $post->id]) }}"
                                                 class="btn">Edit</a></div>

resources/views/admin/posts/upsert.blade.php

@@ -6,19 +6,22 @@
         <div class="page-header d-print-none">
             <h2 class="page-title text-center justify-content-center">
               <div class="align-self-center">
-                              @if (!is_null($post))
-                Edit Post
-              @else
-                New Post
-              @endif
-                
+                @if (!is_null($post))
+                  Edit Post
+                @else
+                  New Post
+                @endif
               </div>
             </h2>
         </div>
     </div>
     <div class="page-body">
         <div class="container-xl">
-          <post-editor></post-editor>
+          @if (!is_null($post))
+            <post-editor :post-id="{{ $post->id }}"></post-editor>
+          @else
+            <post-editor></post-editor>
+          @endif
         </div>
     </div>
 @endsection

resources/views/front/post.blade.php

@@ -31,10 +31,10 @@
                             <h2 class="h5">{{ $post->excerpt }}</h2>
                         </div>
                         <div class="mb-3">
-                            <img src="{{ $post->featured_image }}" alt="" class="img-fluid rounded-3">
+                            <img src="{{ $post->featured_image }}" alt="Photo of {{ $post->name }}" class="img-fluid rounded-3">
                         </div>
                         <div class="mb-3">
-                            {{ $post->html_body }}
+                            {!! $post->html_body !!}
                         </div>
 
                     </div>

resources/views/layouts/front/app.blade.php

@@ -5,8 +5,11 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <title>{{ config('app.name', 'Laravel') }}</title>
+{!! SEOMeta::generate() !!}
+{!! OpenGraph::generate() !!}
+{!! Twitter::generate() !!}
+{!! JsonLdMulti::generate() !!}
+<meta property="fb:app_id" content="{{ config('seotools.fb_app_id') }}" />
 
     @vite('resources/sass/front-app.scss')
 

resources/views/layouts/front/footer.blade.php

@@ -1,35 +1,34 @@
 <div class="container-fluid border-top">
     <footer class="py-5 container">
-        <div class="row">
+        <div class="row justify-content-center">
             <div class="col-6 col-md-2 mb-3">
                 <ul class="nav flex-column">
-
                     @foreach ($categories as $category)
+                      @if ($category->id % 2 == 0)
                         <li class="nav-item mb-2">
                             <a class="nav-link p-0 text-body-secondary"
                                 href="{{ route('home.country.category', ['country' => $category->country_locale_slug, 'category' => $category->slug]) }}">{{ $category->name }}</a>
                         </li>
-                    @endforeach
-
+                        @endif
+                      @endforeach
                 </ul>
             </div>
 
             <div class="col-6 col-md-2 mb-3">
                 <ul class="nav flex-column">
-                    <li class="nav-item mb-2">
-                        <a href="#" class="nav-link p-0 text-body-secondary">About Us</a>
-                    </li>
-                    <li class="nav-item mb-2">
-                        <a href="#" class="nav-link p-0 text-body-secondary">Contact Us</a>
-                    </li>
-                    <li class="nav-item mb-2">
-                        <a href="#" class="nav-link p-0 text-body-secondary">Advertise with us</a>
-                    </li>
+                    @foreach ($categories as $category)
+                      @if ($category->id % 2 == 1)
+                        <li class="nav-item mb-2">
+                            <a class="nav-link p-0 text-body-secondary"
+                                href="{{ route('home.country.category', ['country' => $category->country_locale_slug, 'category' => $category->slug]) }}">{{ $category->name }}</a>
+                        </li>
+                        @endif
+                      @endforeach
                 </ul>
             </div>
 
 
-            <div class="col-md-5 offset-md-1 mb-3">
+            <div class="col-md-5 mb-3">
 
 
                 @if ($country_locales->count() > 1)
@@ -52,15 +51,15 @@
                     </div>
                 @endif
 
-                <form>
+{{--                 <form>
                     <h5>Subscribe to our newsletter</h5>
                     <p>Monthly digest of what's new and exciting from us.</p>
                     <div class="d-flex flex-column flex-sm-row w-100 gap-2">
                         <label for="newsletter1" class="visually-hidden">Email address</label>
-                        <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
+                        <input id="newsletter1" type="disabled" class="form-control disabled" placeholder="Email address">
                         <button class="btn btn-primary" type="button">Subscribe</button>
                     </div>
-                </form>
+                </form> --}}
             </div>
         </div>