This commit is contained in:
2023-07-30 02:15:19 +08:00
parent 58b939f72e
commit 277a919436
28 changed files with 807 additions and 99 deletions

View File

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

View File

@@ -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>

View File

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

View File

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