462 lines
23 KiB
JavaScript
462 lines
23 KiB
JavaScript
import { defineComponent, ref, watch, resolveDirective, unref, withCtx, mergeProps, createVNode, toDisplayString, createBlock, createCommentVNode, openBlock, withDirectives, withModifiers, Fragment, renderList, createTextVNode, useSSRContext } from 'vue';
|
|
import { ssrRenderComponent, ssrRenderAttr, ssrInterpolate, ssrRenderAttrs, ssrGetDirectiveProps, ssrRenderList } from 'vue/server-renderer';
|
|
import { _ as _imports_0 } from './close_light-DbrEdRZI.mjs';
|
|
import { Camera } from '@capacitor/camera';
|
|
import { Capacitor } from '@capacitor/core';
|
|
import { u as useRouter, a as useConfigStore, t as reactiveProjectName, e as api$1 } from './server.mjs';
|
|
import { m as mediaFilesUrl, p as previewImg, o as original, q as loading, r as originalFile } from './handle-DbjkEnGN.mjs';
|
|
import { u as useProductStore } from './product-Cl3m1YR_.mjs';
|
|
import { i as img_gif } from './post_loading-BiySI7bp.mjs';
|
|
import { B as BasicIconOld } from './BasicIconOld-I4c2ShMu.mjs';
|
|
import { useRoute } from 'vue-router';
|
|
import { S as Spin } from './index-DqCYDGJX.mjs';
|
|
import { _ as __nuxt_component_1, a as __nuxt_component_2 } from './RadioButton--E7lmHK3.mjs';
|
|
|
|
const maxFiles = 10;
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "index",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const router = useRouter();
|
|
const config = useConfigStore();
|
|
const type = ref("");
|
|
const fileInput = ref(null);
|
|
const fileInputLimited = ref(null);
|
|
const imageSelected = ref(-2);
|
|
const route2 = useRoute();
|
|
function onBackPage() {
|
|
mediaFilesUrl.value = [];
|
|
original.value = {};
|
|
router.push({ name: "home" });
|
|
}
|
|
watch(mediaFilesUrl, (files2) => {
|
|
var _a, _b, _c;
|
|
if (((_a = mediaFilesUrl.value) == null ? void 0 : _a.length) === 0) previewImg.value = "";
|
|
else if (((_b = mediaFilesUrl.value) == null ? void 0 : _b.length) === 1) previewImg.value = mediaFilesUrl.value[0].url;
|
|
else if (files2) {
|
|
previewImg.value = (_c = files2[(files2 == null ? void 0 : files2.length) - 1]) == null ? void 0 : _c.url;
|
|
}
|
|
}, { deep: true });
|
|
watch(original, (file) => {
|
|
previewImg.value = file.url;
|
|
imageSelected.value = -1;
|
|
}, { deep: true });
|
|
function goNextPage() {
|
|
if (original.value.url) {
|
|
if (route2.name == "edit-product-id-inputProduct")
|
|
router.push({ name: "edit-product-id-infProduct" });
|
|
else
|
|
router.push({ name: "add-product-infProduct" });
|
|
} else {
|
|
console.log(useProductStore().originalFile);
|
|
api$1.warn(config.useString("addAtLeastOneMedia"));
|
|
}
|
|
}
|
|
function showPreview(index) {
|
|
imageSelected.value = index;
|
|
if (index === -1) {
|
|
previewImg.value = original.value.url;
|
|
} else {
|
|
previewImg.value = mediaFilesUrl.value[index].url;
|
|
}
|
|
}
|
|
const isVideo = (file) => file.includes(".mp4") || file.includes(".mov") || file.includes("video");
|
|
const editImage = async () => {
|
|
if (imageSelected.value == -1) {
|
|
await selectMainMedia();
|
|
} else {
|
|
await selectMedia();
|
|
}
|
|
};
|
|
const selectMedia = async () => {
|
|
console.log(imageSelected.value, "Media");
|
|
try {
|
|
if (Capacitor.isNativePlatform()) {
|
|
if (imageSelected.value == -2) {
|
|
const files2 = await Camera.pickImages({ limit: maxFiles - mediaFilesUrl.value.length });
|
|
files2.photos.forEach((file) => {
|
|
useProductStore().mediaFiles.push({ file, index: mediaFilesUrl.value.length });
|
|
mediaFilesUrl.value.push({ url: file.webPath, index: mediaFilesUrl.value.length });
|
|
});
|
|
imageSelected.value = mediaFilesUrl.value.length - 1;
|
|
} else {
|
|
const file = await Camera.pickImages({ limit: 1 });
|
|
if (file.photos.length > 0) {
|
|
mediaFilesUrl.value[imageSelected.value].url = file.photos[0].webPath;
|
|
useProductStore().mediaFiles[imageSelected.value].file = file.photos[0];
|
|
}
|
|
}
|
|
} else {
|
|
console.log(imageSelected.value, "MediaA");
|
|
if (imageSelected.value == -2) {
|
|
fileInput.value.click();
|
|
} else
|
|
fileInputLimited.value.click();
|
|
}
|
|
} catch (error) {
|
|
console.error("Error selecting media:", error);
|
|
}
|
|
};
|
|
const selectMainMedia = async () => {
|
|
try {
|
|
if (Capacitor.isNativePlatform()) {
|
|
const file = await Camera.pickImages({ limit: 1 });
|
|
if (file.photos.length > 0) {
|
|
original.value.url = file.photos[0].webPath;
|
|
useProductStore().originalFile = { file: file.photos[0], index: 0 };
|
|
}
|
|
} else {
|
|
console.log(imageSelected.value, "main");
|
|
await fileInputLimited.value.click();
|
|
console.log(imageSelected.value, "mainA");
|
|
fileInputLimited.value.onchange = (event) => {
|
|
const files2 = event.target.files;
|
|
console.log(files2, 8888);
|
|
if (files2.length > 0) {
|
|
original.value.url = URL.createObjectURL(files2[0]);
|
|
console.log(files2, 9999);
|
|
}
|
|
setTimeout(() => {
|
|
fileInputLimited.value.value = null;
|
|
}, 10);
|
|
};
|
|
}
|
|
console.log("dsacbnkjsdkmc,loskock,sdds", original.value);
|
|
} catch (error) {
|
|
console.error("Error selecting main media:", error);
|
|
}
|
|
};
|
|
const handleFileUpload = (event) => {
|
|
console.log(imageSelected.value, 4555);
|
|
const files2 = event.target.files;
|
|
if (files2.length == 0) {
|
|
return;
|
|
}
|
|
console.log(event, 45);
|
|
if (!original.value.url && files2.length > 0 || imageSelected.value == -1 && files2.length > 0) {
|
|
original.value.url = URL.createObjectURL(files2[0]);
|
|
useProductStore().originalFile = { file: files2[0], index: 0 };
|
|
console.log(original.value);
|
|
} else if (imageSelected.value == -2) {
|
|
Array.from(files2).forEach((file) => {
|
|
let mediaFilesUrllength = mediaFilesUrl.value.length;
|
|
if (mediaFilesUrl.value.length < maxFiles) {
|
|
mediaFilesUrl.value.push({ url: URL.createObjectURL(file), index: mediaFilesUrllength + 1 });
|
|
useProductStore().mediaFiles.push({ file, index: mediaFilesUrllength + 1 });
|
|
imageSelected.value = mediaFilesUrl.value.length - 1;
|
|
}
|
|
});
|
|
} else {
|
|
mediaFilesUrl.value[imageSelected.value].url = URL.createObjectURL(files2[0]);
|
|
useProductStore().mediaFiles.push({ file: files2[0], index: mediaFilesUrl.value[imageSelected.value].index });
|
|
imageSelected.value = mediaFilesUrl.value.length - 1;
|
|
}
|
|
fileInput.value.value = "";
|
|
fileInputLimited.value.value = "";
|
|
};
|
|
const handleDrop = (event) => {
|
|
event.preventDefault();
|
|
const files2 = event.dataTransfer.files;
|
|
Array.from(files2).forEach((file) => {
|
|
if (mediaFilesUrl.value.length < maxFiles) {
|
|
useProductStore().mediaFiles.push({ file, index: mediaFilesUrl.value.length });
|
|
mediaFilesUrl.value.push({ url: URL.createObjectURL(file), index: mediaFilesUrl.value.length });
|
|
}
|
|
});
|
|
};
|
|
const removeMedia = (index, mediaIndex) => {
|
|
const indexDelete = useProductStore().mediaFiles.findIndex((e) => e.index == mediaIndex);
|
|
mediaFilesUrl.value.splice(index, 1);
|
|
if (indexDelete >= 0)
|
|
useProductStore().mediaFiles.splice(indexDelete, 1);
|
|
};
|
|
const removeMainMedia = () => {
|
|
original.value.url = void 0;
|
|
originalFile.value = void 0;
|
|
};
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_a_spin = Spin;
|
|
const _component_a_radio_group = __nuxt_component_1;
|
|
const _component_a_radio_button = __nuxt_component_2;
|
|
const _directive_lazy = resolveDirective("lazy");
|
|
let _temp0, _temp1, _temp2;
|
|
_push(`<!--[-->`);
|
|
_push(ssrRenderComponent(_component_a_spin, { spinning: unref(loading) }, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
var _a2, _b2;
|
|
var _a, _b, _c, _d;
|
|
if (_push2) {
|
|
_push2(`<div class="w-full h-screen bg-black text-white"${_scopeId}><div class="flex w-full p-4 gap-8 justify-between items-center"${_scopeId}><div class="flex gap-8 items-center"${_scopeId}><img${ssrRenderAttr("src", _imports_0)}${ssrRenderAttr("alt", unref(reactiveProjectName))} class="w-4"${_scopeId}><div class="font-semibold text-lg"${_scopeId}>${ssrInterpolate(unref(route2).name == "inputProduct_edit" ? unref(config).useString("editProduct") : unref(config).useString("newProduct"))}</div></div><div class="text-primary text-sm"${_scopeId}>${ssrInterpolate(unref(config).useString("next"))}</div></div><div class="aspect-square flex items-center justify-center"${_scopeId}>`);
|
|
if (unref(previewImg)) {
|
|
_push2(`<div class="relative w-full"${_scopeId}><img${ssrRenderAttrs(_temp0 = mergeProps({
|
|
alt: unref(reactiveProjectName),
|
|
class: "w-full object-scale-down aspect-square"
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(previewImg), loading: unref(img_gif), error: unref(img_gif) })))}${_scopeId}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : (_a2 = _temp0.innerHTML) != null ? _a2 : ""}<div class="flex absolute shadow-black shadow-sm rounded-full bottom-2 mx-3"${_scopeId}><div class="flex bg-primary rounded-full py-1 gap-2 px-2"${_scopeId}>`);
|
|
_push2(ssrRenderComponent(BasicIconOld, { icon: "vuesax-linear:gallery-edit" }, null, _parent2, _scopeId));
|
|
_push2(`<span${_scopeId}>${ssrInterpolate(unref(config).useString("edit"))}</span></div></div></div>`);
|
|
} else if (((_a = unref(mediaFilesUrl)) == null ? void 0 : _a.length) === 0) {
|
|
_push2(`<p class="empty-state"${_scopeId}>${ssrInterpolate(unref(config).useString("tapPlusToAdd"))}</p>`);
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
_push2(`</div><div class="media-picker"${_scopeId}><div class="drop-area"${_scopeId}><div class="media-grid"${_scopeId}>`);
|
|
if (unref(original).url) {
|
|
_push2(`<div class="media-container border-1 border-solid border-primary"${_scopeId}><img${ssrRenderAttrs(_temp1 = mergeProps({ class: "media-preview" }, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(original).url, loading: unref(img_gif), error: unref(img_gif) })))}${_scopeId}>${"textContent" in _temp1 ? ssrInterpolate(_temp1.textContent) : (_b2 = _temp1.innerHTML) != null ? _b2 : ""}<button class="remove-btn"${_scopeId}>\u2716</button></div>`);
|
|
} else {
|
|
_push2(`<div class="add-media text-black"${_scopeId}><div${_scopeId}>${ssrInterpolate(unref(original).url)}</div><span${_scopeId}>+</span><div class="text-sm"${_scopeId}>${ssrInterpolate(unref(config).useString("mainImage"))}</div></div>`);
|
|
}
|
|
_push2(`<!--[-->`);
|
|
ssrRenderList(unref(mediaFilesUrl), (media, index) => {
|
|
var _a3;
|
|
_push2(`<div class="media-container"${_scopeId}>`);
|
|
if (isVideo(media.url)) {
|
|
_push2(`<video${ssrRenderAttr("src", media.url)} class="media-preview" controls${_scopeId}></video>`);
|
|
} else {
|
|
_push2(`<img${ssrRenderAttrs(_temp2 = mergeProps({
|
|
src: media.url,
|
|
class: "media-preview"
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: media.url, loading: unref(img_gif), error: unref(img_gif) })))}${_scopeId}>${"textContent" in _temp2 ? ssrInterpolate(_temp2.textContent) : (_a3 = _temp2.innerHTML) != null ? _a3 : ""}`);
|
|
}
|
|
_push2(`<button class="remove-btn"${_scopeId}>\u2716</button></div>`);
|
|
});
|
|
_push2(`<!--]-->`);
|
|
if (((_b = unref(mediaFilesUrl)) == null ? void 0 : _b.length) < maxFiles) {
|
|
_push2(`<div class="add-media text-black"${_scopeId}><span${_scopeId}>+</span><div class="text-sm"${_scopeId}>${ssrInterpolate(unref(config).useString("subImage"))}</div></div>`);
|
|
} else {
|
|
_push2(`<!---->`);
|
|
}
|
|
_push2(`</div></div><input type="file" accept="image/*,video/*" multiple hidden${_scopeId}><input type="file" accept="image/*,video/*" hidden${_scopeId}></div></div>`);
|
|
} else {
|
|
return [
|
|
createVNode("div", { class: "w-full h-screen bg-black text-white" }, [
|
|
createVNode("div", { class: "flex w-full p-4 gap-8 justify-between items-center" }, [
|
|
createVNode("div", { class: "flex gap-8 items-center" }, [
|
|
createVNode("img", {
|
|
src: _imports_0,
|
|
alt: unref(reactiveProjectName),
|
|
class: "w-4",
|
|
onClick: onBackPage
|
|
}, null, 8, ["alt"]),
|
|
createVNode("div", { class: "font-semibold text-lg" }, toDisplayString(unref(route2).name == "inputProduct_edit" ? unref(config).useString("editProduct") : unref(config).useString("newProduct")), 1)
|
|
]),
|
|
createVNode("div", {
|
|
class: "text-primary text-sm",
|
|
onClick: goNextPage
|
|
}, toDisplayString(unref(config).useString("next")), 1)
|
|
]),
|
|
createVNode("div", { class: "aspect-square flex items-center justify-center" }, [
|
|
unref(previewImg) ? (openBlock(), createBlock("div", {
|
|
key: 0,
|
|
class: "relative w-full"
|
|
}, [
|
|
withDirectives(createVNode("img", {
|
|
alt: unref(reactiveProjectName),
|
|
class: "w-full object-scale-down aspect-square"
|
|
}, null, 8, ["alt"]), [
|
|
[_directive_lazy, { src: unref(previewImg), loading: unref(img_gif), error: unref(img_gif) }]
|
|
]),
|
|
createVNode("div", { class: "flex absolute shadow-black shadow-sm rounded-full bottom-2 mx-3" }, [
|
|
createVNode("div", {
|
|
onClick: editImage,
|
|
class: "flex bg-primary rounded-full py-1 gap-2 px-2"
|
|
}, [
|
|
createVNode(BasicIconOld, { icon: "vuesax-linear:gallery-edit" }),
|
|
createVNode("span", null, toDisplayString(unref(config).useString("edit")), 1)
|
|
])
|
|
])
|
|
])) : ((_c = unref(mediaFilesUrl)) == null ? void 0 : _c.length) === 0 ? (openBlock(), createBlock("p", {
|
|
key: 1,
|
|
class: "empty-state"
|
|
}, toDisplayString(unref(config).useString("tapPlusToAdd")), 1)) : createCommentVNode("", true)
|
|
]),
|
|
createVNode("div", { class: "media-picker" }, [
|
|
createVNode("div", {
|
|
class: "drop-area",
|
|
onDragover: withModifiers(() => {
|
|
}, ["prevent"]),
|
|
onDrop: handleDrop
|
|
}, [
|
|
createVNode("div", { class: "media-grid" }, [
|
|
unref(original).url ? (openBlock(), createBlock("div", {
|
|
key: 0,
|
|
class: "media-container border-1 border-solid border-primary",
|
|
onClick: ($event) => showPreview(-1)
|
|
}, [
|
|
withDirectives(createVNode("img", { class: "media-preview" }, null, 512), [
|
|
[_directive_lazy, { src: unref(original).url, loading: unref(img_gif), error: unref(img_gif) }]
|
|
]),
|
|
createVNode("button", {
|
|
onClick: removeMainMedia,
|
|
class: "remove-btn"
|
|
}, "\u2716")
|
|
], 8, ["onClick"])) : (openBlock(), createBlock("div", {
|
|
key: 1,
|
|
class: "add-media text-black",
|
|
onClick: selectMainMedia
|
|
}, [
|
|
createVNode("div", null, toDisplayString(unref(original).url), 1),
|
|
createVNode("span", null, "+"),
|
|
createVNode("div", { class: "text-sm" }, toDisplayString(unref(config).useString("mainImage")), 1)
|
|
])),
|
|
(openBlock(true), createBlock(Fragment, null, renderList(unref(mediaFilesUrl), (media, index) => {
|
|
return openBlock(), createBlock("div", {
|
|
key: index,
|
|
class: "media-container",
|
|
onClick: ($event) => showPreview(index)
|
|
}, [
|
|
isVideo(media.url) ? (openBlock(), createBlock("video", {
|
|
key: 0,
|
|
src: media.url,
|
|
class: "media-preview",
|
|
controls: ""
|
|
}, null, 8, ["src"])) : withDirectives((openBlock(), createBlock("img", {
|
|
key: 1,
|
|
src: media.url,
|
|
class: "media-preview"
|
|
}, null, 8, ["src"])), [
|
|
[_directive_lazy, { src: media.url, loading: unref(img_gif), error: unref(img_gif) }]
|
|
]),
|
|
createVNode("button", {
|
|
onClick: ($event) => removeMedia(index, media.index),
|
|
class: "remove-btn"
|
|
}, "\u2716", 8, ["onClick"])
|
|
], 8, ["onClick"]);
|
|
}), 128)),
|
|
((_d = unref(mediaFilesUrl)) == null ? void 0 : _d.length) < maxFiles ? (openBlock(), createBlock("div", {
|
|
key: 2,
|
|
class: "add-media text-black",
|
|
onClick: () => {
|
|
imageSelected.value = -2;
|
|
selectMedia();
|
|
}
|
|
}, [
|
|
createVNode("span", null, "+"),
|
|
createVNode("div", { class: "text-sm" }, toDisplayString(unref(config).useString("subImage")), 1)
|
|
], 8, ["onClick"])) : createCommentVNode("", true)
|
|
])
|
|
], 40, ["onDragover"]),
|
|
createVNode("input", {
|
|
ref_key: "fileInput",
|
|
ref: fileInput,
|
|
type: "file",
|
|
accept: "image/*,video/*",
|
|
multiple: "",
|
|
hidden: "",
|
|
onChange: ($event) => handleFileUpload($event)
|
|
}, null, 40, ["onChange"]),
|
|
createVNode("input", {
|
|
ref_key: "fileInputLimited",
|
|
ref: fileInputLimited,
|
|
type: "file",
|
|
accept: "image/*,video/*",
|
|
hidden: "",
|
|
onChange: ($event) => handleFileUpload($event)
|
|
}, null, 40, ["onChange"])
|
|
])
|
|
])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`<div class="absolute bottom-5 right-5 addStyle">`);
|
|
_push(ssrRenderComponent(_component_a_radio_group, {
|
|
value: type.value,
|
|
"onUpdate:value": ($event) => type.value = $event,
|
|
"button-style": "solid"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(ssrRenderComponent(_component_a_radio_button, {
|
|
onClick: ($event) => unref(router).push({ name: "add-product-excel-inputProductExcel" }),
|
|
value: "productExcel"
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(unref(config).useString("productExcel"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("productExcel")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_component_a_radio_button, {
|
|
onClick: ($event) => unref(router).push({ name: "add-product-inputProduct" }),
|
|
value: "product"
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(unref(config).useString("product2"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("product2")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
_push2(ssrRenderComponent(_component_a_radio_button, {
|
|
onClick: ($event) => unref(router).push({ name: "add-story-inputStory" }),
|
|
value: "story"
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
_push3(`${ssrInterpolate(unref(config).useString("story2"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("story2")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent2, _scopeId));
|
|
} else {
|
|
return [
|
|
createVNode(_component_a_radio_button, {
|
|
onClick: ($event) => unref(router).push({ name: "add-product-excel-inputProductExcel" }),
|
|
value: "productExcel"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(config).useString("productExcel")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode(_component_a_radio_button, {
|
|
onClick: ($event) => unref(router).push({ name: "add-product-inputProduct" }),
|
|
value: "product"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(config).useString("product2")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"]),
|
|
createVNode(_component_a_radio_button, {
|
|
onClick: ($event) => unref(router).push({ name: "add-story-inputStory" }),
|
|
value: "story"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(config).useString("story2")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["onClick"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div><!--]-->`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/add/product/inputMedia/index.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as _ };
|
|
//# sourceMappingURL=index-DBuKVf2V.mjs.map
|