¨4.0.1¨
This commit is contained in:
¨NW¨
68
Modules/Variation/Resources/assets/admin/js/create.js
Normal file
68
Modules/Variation/Resources/assets/admin/js/create.js
Normal file
@@ -0,0 +1,68 @@
|
||||
import Vue from "vue";
|
||||
import VariationMixin from "./mixins/VariationMixin";
|
||||
import { toaster } from "@admin/js/Toaster";
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
|
||||
mixins: [VariationMixin],
|
||||
|
||||
created() {
|
||||
this.setFormDefaultData();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.focusInitialField();
|
||||
},
|
||||
|
||||
methods: {
|
||||
setFormDefaultData() {
|
||||
this.form = {
|
||||
uid: this.uid(),
|
||||
type: "",
|
||||
values: [
|
||||
{
|
||||
uid: this.uid(),
|
||||
image: {
|
||||
id: null,
|
||||
path: null,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
focusInitialField() {
|
||||
this.$nextTick(() => {
|
||||
$("#name").trigger("focus");
|
||||
});
|
||||
},
|
||||
|
||||
submit() {
|
||||
this.formSubmitting = true;
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: route("admin.variations.store"),
|
||||
data: this.transformData(this.form),
|
||||
dataType: "json",
|
||||
success: (response) => {
|
||||
toaster(response.message, {
|
||||
type: "success",
|
||||
});
|
||||
|
||||
this.resetForm();
|
||||
this.errors.reset();
|
||||
},
|
||||
})
|
||||
.catch((error) => {
|
||||
this.errors.reset();
|
||||
this.errors.record(error.responseJSON.errors);
|
||||
this.scrollToFirstErrorField(this.$refs.form.elements);
|
||||
})
|
||||
.always(() => {
|
||||
this.formSubmitting = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
55
Modules/Variation/Resources/assets/admin/js/edit.js
Normal file
55
Modules/Variation/Resources/assets/admin/js/edit.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import Vue from "vue";
|
||||
import VariationMixin from "./mixins/VariationMixin";
|
||||
import { toaster } from "@admin/js/Toaster";
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
|
||||
mixins: [VariationMixin],
|
||||
|
||||
created() {
|
||||
this.form = this.prepareFormData(FleetCart.data["variation"]);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initColorPicker();
|
||||
},
|
||||
|
||||
methods: {
|
||||
prepareFormData(formData) {
|
||||
formData.uid = this.uid();
|
||||
|
||||
formData.values.forEach((value) => {
|
||||
value.uid = this.uid();
|
||||
});
|
||||
|
||||
return formData;
|
||||
},
|
||||
|
||||
submit() {
|
||||
this.formSubmitting = true;
|
||||
|
||||
$.ajax({
|
||||
type: "PUT",
|
||||
url: route("admin.variations.update", this.form.id),
|
||||
data: this.transformData(this.form),
|
||||
dataType: "json",
|
||||
success: (response) => {
|
||||
toaster(response.message, {
|
||||
type: "success",
|
||||
});
|
||||
|
||||
this.errors.reset();
|
||||
},
|
||||
})
|
||||
.catch((error) => {
|
||||
this.errors.reset();
|
||||
this.errors.record(error.responseJSON.errors);
|
||||
this.scrollToFirstErrorField(this.$refs.form.elements);
|
||||
})
|
||||
.always(() => {
|
||||
this.formSubmitting = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,242 @@
|
||||
import draggable from "vuedraggable";
|
||||
import Errors from "@admin/js/Errors";
|
||||
import Coloris from "@melloware/coloris";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
},
|
||||
|
||||
data: {
|
||||
formSubmitting: false,
|
||||
form: {},
|
||||
errors: new Errors(),
|
||||
},
|
||||
|
||||
computed: {
|
||||
isEmptyVariationType() {
|
||||
return this.form.type === "";
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.hideColorPicker();
|
||||
},
|
||||
|
||||
methods: {
|
||||
uid() {
|
||||
return Math.random().toString(36).slice(3);
|
||||
},
|
||||
|
||||
changeVariationType(value) {
|
||||
const values = this.form.values;
|
||||
|
||||
if (value !== "" && values.length === 1) {
|
||||
this.$nextTick(() => {
|
||||
$(`#values-${values[0].uid}-label`).trigger("focus");
|
||||
});
|
||||
}
|
||||
|
||||
if (value === "text") {
|
||||
values.forEach((value) => {
|
||||
this.errors.clear(`values.${value.uid}.color`);
|
||||
this.errors.clear(`values.${value.uid}.image`);
|
||||
});
|
||||
} else if (value === "color") {
|
||||
values.forEach((value) => {
|
||||
this.errors.clear(`values.${value.uid}.image`);
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initColorPicker();
|
||||
});
|
||||
} else if (value === "image") {
|
||||
values.forEach((value, index) => {
|
||||
if (!value.image) {
|
||||
this.$set(values[index], "image", {
|
||||
id: null,
|
||||
path: null,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
values.forEach((value) => {
|
||||
this.errors.clear(`values.${value.uid}.color`);
|
||||
});
|
||||
} else {
|
||||
this.clearValueErrors();
|
||||
}
|
||||
},
|
||||
|
||||
addRow() {
|
||||
const values = this.form.values;
|
||||
const uid = this.uid();
|
||||
|
||||
values.push({
|
||||
uid,
|
||||
image: {
|
||||
id: null,
|
||||
path: null,
|
||||
},
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
$(`#values-${uid}-label`).trigger("focus");
|
||||
|
||||
if (this.form.type === "color") {
|
||||
this.initColorPicker();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addRowOnPressEnter(event, index) {
|
||||
const values = this.form.values;
|
||||
|
||||
if (event.target.value === "") return;
|
||||
|
||||
if (values.length - 1 === index) {
|
||||
this.addRow();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (index < values.length - 1) {
|
||||
$(`#values-${values[index + 1].uid}-label`).trigger("focus");
|
||||
}
|
||||
},
|
||||
|
||||
deleteRow(index, uid) {
|
||||
const values = this.form.values;
|
||||
|
||||
values.splice(index, 1);
|
||||
|
||||
if (values.length === 0) {
|
||||
this.addRow();
|
||||
}
|
||||
|
||||
this.clearValueRowErrors(uid);
|
||||
this.updateColorThumbnails();
|
||||
},
|
||||
|
||||
updateColorThumbnails() {
|
||||
if (this.form.type !== "color") return;
|
||||
|
||||
const elements = document.querySelectorAll(".clr-field");
|
||||
|
||||
this.form.values.forEach((value, index) => {
|
||||
elements[index].style.color = value.color || "";
|
||||
});
|
||||
},
|
||||
|
||||
initColorPicker() {
|
||||
Coloris.init();
|
||||
|
||||
Coloris({
|
||||
el: ".color-picker",
|
||||
alpha: false,
|
||||
rtl: FleetCart.rtl,
|
||||
theme: "large",
|
||||
wrap: true,
|
||||
format: "hex",
|
||||
selectInput: true,
|
||||
swatches: [
|
||||
"#D01C1F",
|
||||
"#3AA845",
|
||||
"#118257",
|
||||
"#0A33AE",
|
||||
"#0D46A0",
|
||||
"#000000",
|
||||
"#5F4C3A",
|
||||
"#726E6E",
|
||||
"#F6D100",
|
||||
"#C0E506",
|
||||
"#FF540A",
|
||||
"#C5A996",
|
||||
"#4B80BE",
|
||||
"#A1C3DA",
|
||||
"#C8BFC2",
|
||||
"#A9A270",
|
||||
],
|
||||
});
|
||||
},
|
||||
|
||||
hideColorPicker() {
|
||||
$(document).on("click", "#clr-swatches button", (e) => {
|
||||
$(e.currentTarget)
|
||||
.parents("#clr-picker")
|
||||
.removeClass("clr-open");
|
||||
});
|
||||
},
|
||||
|
||||
chooseImage(index, uid) {
|
||||
let picker = new MediaPicker({ type: "image" });
|
||||
|
||||
picker.on("select", ({ id, path }) => {
|
||||
this.errors.clear(`values.${uid}.image`);
|
||||
|
||||
this.form.values[index].image = {
|
||||
id: +id,
|
||||
path,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
resetForm() {
|
||||
this.setFormDefaultData();
|
||||
this.focusInitialField();
|
||||
},
|
||||
|
||||
clearValueErrors() {
|
||||
Object.keys(this.errors.errors).forEach((key) => {
|
||||
if (key.startsWith("values")) {
|
||||
this.errors.clear(key);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
clearValueRowErrors(uid) {
|
||||
Object.keys(this.errors.errors).forEach((key) => {
|
||||
if (key.startsWith(`values.${uid}`)) {
|
||||
this.errors.clear(key);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
scrollToFirstErrorField(elements) {
|
||||
this.$nextTick(() => {
|
||||
[...elements]
|
||||
.find(
|
||||
(el) => el.name === Object.keys(this.errors.errors)[0]
|
||||
)
|
||||
.focus();
|
||||
});
|
||||
},
|
||||
|
||||
transformData(data) {
|
||||
const formData = JSON.parse(JSON.stringify(data));
|
||||
const PATHS = {
|
||||
text: ["id", "uid", "label"],
|
||||
color: ["id", "uid", "label", "color"],
|
||||
image: ["id", "uid", "label", "image"],
|
||||
};
|
||||
|
||||
if (formData.type === "") {
|
||||
formData.values = [];
|
||||
|
||||
return formData;
|
||||
}
|
||||
|
||||
formData.values = formData.values.reduce((accumulator, value) => {
|
||||
value = _.pick(value, PATHS[formData.type]);
|
||||
|
||||
if (formData.type === "image") {
|
||||
value.image = value.image.id;
|
||||
}
|
||||
|
||||
return { ...accumulator, [value.uid]: value };
|
||||
}, {});
|
||||
|
||||
return formData;
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user