Initial commit
This commit is contained in:
Viet An
363
app/components/media/ImageLayout.vue
Normal file
363
app/components/media/ImageLayout.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div class="columns mx-0 mb-0 pb-0">
|
||||
<div class="column is-6">
|
||||
<div class="tags are-medium">
|
||||
<a v-for="v in hashtag" @click="refreshShow(v)">
|
||||
<span :class="`tag ${v.file__hashtag===current? 'is-primary' : ''}`">
|
||||
{{ v.file__hashtag }}
|
||||
{{ `(${v.count})` }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="is-flex is-align-items-center is-justify-content-flex-end">
|
||||
<div class="buttons has-addons are-small my-0">
|
||||
<button
|
||||
v-for="layout in Object.values(layoutModes)"
|
||||
:key="layout"
|
||||
:class="[
|
||||
'button px-5',
|
||||
{ 'is-primary': layout === layoutMode },
|
||||
]"
|
||||
@click="layoutMode = layout"
|
||||
>
|
||||
<SvgIcon v-bind="{
|
||||
name: `${layout}.svg`,
|
||||
type: layout === layoutMode ? 'white' : 'primary',
|
||||
size: 20
|
||||
}" />
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="!dealer && $getEditRights('edit', { code: 'product', category: 'topmenu' })" class="ml-6 is-flex is-align-items-center">
|
||||
<div class="mr-5">
|
||||
<label class="checkbox mr-2">
|
||||
<input type="checkbox" v-model="convertToWebp" />
|
||||
<span class="ml-2">Convert to WebP</span>
|
||||
</label>
|
||||
<input v-if="convertToWebp"
|
||||
class="input is-small"
|
||||
type="number"
|
||||
v-model.number="webpQuality"
|
||||
min="1"
|
||||
max="100"
|
||||
style="width: 60px"
|
||||
placeholder="80"
|
||||
/>
|
||||
</div>
|
||||
<FileUpload
|
||||
position="right"
|
||||
type="image"
|
||||
:convert="convertToWebp"
|
||||
:quality="webpQuality"
|
||||
@files="onUploaded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<component
|
||||
:is="layoutMode === layoutModes.GRID ? 'div' : 'table'"
|
||||
:class="layoutMode === layoutModes.GRID ? 'columns is-multiline px-2 mt-0' : 'table is-fullwidth is-bordered'"
|
||||
>
|
||||
<template v-if="layoutMode === layoutModes.LIST">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<th>Mô tả</th>
|
||||
<th>Hashtag</th>
|
||||
<th>Người tải lên</th>
|
||||
<th>
|
||||
<span class="icon-text">
|
||||
<span class="mr-5">Chức năng</span>
|
||||
<a class="mr-3" @click="excel()">
|
||||
<SvgIcon v-bind="{ name: 'excel.png', type: 'black', size: 20 }"></SvgIcon>
|
||||
</a>
|
||||
<a v-if="$getEditRights()" @click="importData()">
|
||||
<SvgIcon v-bind="{ name: 'upload.svg', type: 'black', size: 20 }"></SvgIcon>
|
||||
</a>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<ImageCard
|
||||
v-for="(image, index) in imgshow"
|
||||
:key="image.id"
|
||||
v-bind="{ image, index, layoutMode, loadImages, deleteImage, viewImage }"
|
||||
/>
|
||||
</tbody>
|
||||
</template>
|
||||
<ImageCard
|
||||
v-else
|
||||
v-for="(image, index) in imgshow"
|
||||
:key="image.id"
|
||||
v-bind="{ image, index, layoutMode, loadImages, deleteImage, viewImage }"
|
||||
/>
|
||||
</component>
|
||||
<!-- Modal xem ảnh lớn -->
|
||||
<div v-if="typeof activeImageIndex === 'number'" class="modal is-active">
|
||||
<div class="modal-background" @click="closeViewImage"></div>
|
||||
<div
|
||||
class="modal-content"
|
||||
style="width: 90vw; height: 90vh; border-radius: 8px; overflow: hidden"
|
||||
>
|
||||
<div
|
||||
class="is-flex"
|
||||
style="height: 100%; transition: all 0.3s ease-out"
|
||||
:style="`transform: translateX(${-100 * activeImageIndex}%)`"
|
||||
>
|
||||
<div
|
||||
v-for="image in imgshow"
|
||||
:key="image.id"
|
||||
class="has-background-black"
|
||||
style="flex: 0 0 100%; display: flex; justify-content: center; align-items: center;"
|
||||
>
|
||||
<nuxt-img
|
||||
loading="lazy"
|
||||
:src="`${$getpath()}static/files/${image.file__file}`"
|
||||
:alt="image.file__name"
|
||||
style="object-fit: contain; height: 100%;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-arrows">
|
||||
<button
|
||||
@click="showPrevImage()"
|
||||
class="button is-rounded"
|
||||
style="left: 24px"
|
||||
>
|
||||
<SvgIcon v-bind="{ name: 'left1.svg', type: 'black', size: 20 }" />
|
||||
</button>
|
||||
<button
|
||||
@click="showNextImage()"
|
||||
class="button is-rounded"
|
||||
style="right: 24px"
|
||||
>
|
||||
<SvgIcon v-bind="{ name: 'right.svg', type: 'black', size: 20 }" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="gallery-count">
|
||||
{{ activeImageIndex + 1 }}
|
||||
/
|
||||
{{ imgshow.length }}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="closeViewImage"
|
||||
></button>
|
||||
</div>
|
||||
<Modal @dataevent="dataevent" @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { debounce } from 'es-toolkit';
|
||||
import { useNuxtApp } from "#app";
|
||||
import FileUpload from "@/components/media/FileUpload.vue";
|
||||
import ImageCard from '@/components/media/ImageCard.vue';
|
||||
|
||||
// pass only projectId for project images, pass both for product images
|
||||
const props = defineProps({
|
||||
productId: String,
|
||||
projectId: String,
|
||||
})
|
||||
|
||||
const { dealer } = useStore();
|
||||
const {
|
||||
$snackbar,
|
||||
$getdata,
|
||||
$insertapi,
|
||||
$deleteapi,
|
||||
$findapi,
|
||||
$getapi,
|
||||
$dayjs,
|
||||
$unique
|
||||
} = useNuxtApp();
|
||||
|
||||
const layoutModes = { GRID: 'grid', LIST: 'list' };
|
||||
const layoutMode = ref(layoutModes.GRID);
|
||||
|
||||
const convertToWebp = ref(false);
|
||||
const webpQuality = ref(80);
|
||||
|
||||
const project = await $getdata('project', { id: props.projectId }, undefined, true);
|
||||
const images = ref([]);
|
||||
const isForProduct = computed(() => props.productId !== undefined);
|
||||
const product = isForProduct.value ? await $getdata("product", { id: props.productId }, undefined, true) : undefined;
|
||||
const showmodal = ref()
|
||||
const imgshow = ref([])
|
||||
const hashtag = ref()
|
||||
const current = ref()
|
||||
|
||||
async function loadImages() {
|
||||
const values = "id,file__hashtag,file__code,file,create_time,file__code,file__type,file__doc_type,file__name,file__file,file__size,file__caption,file__user__fullname,";
|
||||
|
||||
const projectImages = await $getdata("projectfile", undefined, {
|
||||
filter: { project: project.id, file__type: 2 },
|
||||
values: values + 'project',
|
||||
sort: "-create_time"
|
||||
});
|
||||
|
||||
if (isForProduct.value) {
|
||||
const productImages = await $getdata("productfile", undefined, {
|
||||
filter: { product: props.productId, file__type: 2 },
|
||||
values: values + 'product',
|
||||
sort: "-create_time"
|
||||
});
|
||||
|
||||
const sameTemplateImages = projectImages.filter(img => img.file__name.startsWith(product.template_name));
|
||||
images.value = [...productImages, ...sameTemplateImages];
|
||||
}
|
||||
else {
|
||||
images.value = projectImages;
|
||||
}
|
||||
imgshow.value = [...images.value]
|
||||
hashtag.value = $unique(images.value.filter(v=>v.file__hashtag), ["file__hashtag"])
|
||||
hashtag.value.map(v=>v.count = images.value.filter(x=>x.file__hashtag===v.file__hashtag).length)
|
||||
}
|
||||
|
||||
const handleKeyDown = debounce((e) => {
|
||||
if (e.key === 'Escape') closeViewImage();
|
||||
if (e.key === 'ArrowLeft') showPrevImage();
|
||||
if (e.key === 'ArrowRight') showNextImage();
|
||||
}, 100);
|
||||
|
||||
onMounted(() => {
|
||||
loadImages();
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
})
|
||||
|
||||
async function attachFiles(files) {
|
||||
if (!project) return 0;
|
||||
|
||||
const payload = files.map((file) => ({
|
||||
file: file.id,
|
||||
project: isForProduct.value ? undefined : project.id,
|
||||
product: isForProduct.value ? product.id : undefined
|
||||
}));
|
||||
|
||||
const result = await $insertapi(isForProduct.value ? "productfile" : "projectfile", payload);
|
||||
if (result === "error") {
|
||||
throw new Error("Không thể liên kết tệp");
|
||||
}
|
||||
return payload.length;
|
||||
}
|
||||
|
||||
async function onUploaded(uploadedFiles) {
|
||||
if (!Array.isArray(uploadedFiles) || uploadedFiles.length === 0) return;
|
||||
|
||||
try {
|
||||
const attachedCount = await attachFiles(uploadedFiles);
|
||||
|
||||
if (attachedCount > 0) {
|
||||
loadImages();
|
||||
$snackbar(`Đã thêm ${attachedCount} ảnh thành công`, "Thành công", "Success");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error attaching images:", error);
|
||||
$snackbar("Không thể thêm ảnh, vui lòng thử lại", "Lỗi", "Error");
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteImage(image) {
|
||||
try {
|
||||
await $deleteapi(isForProduct.value ? "productfile" : "projectfile", image.id);
|
||||
await $deleteapi("file", image.file);
|
||||
loadImages();
|
||||
$snackbar("Đã xóa ảnh thành công", "Thành công", "Success");
|
||||
} catch (error) {
|
||||
console.error("Error deleting image:", error);
|
||||
$snackbar("Xóa ảnh không thành công", "Lỗi", "Error");
|
||||
}
|
||||
}
|
||||
|
||||
async function excel() {
|
||||
const found = $findapi('exportcsv')
|
||||
found.params = {}
|
||||
let fields = [{name: 'code', label: 'code'}, {name: 'name', label: 'name'}, {name: 'caption', label: 'caption'}, {name: 'hashtag', label: 'hashtag'}]
|
||||
found.params.fields = JSON.stringify(fields)
|
||||
found.url = 'exportcsv/File/'
|
||||
found.params.filter = {code__in: images.value.map(v=>v.file__code)}
|
||||
const rs = await $getapi([found])
|
||||
if(rs === 'error') return $snackbar('Đã xảy ra lỗi. Vui lòng thử lại.')
|
||||
const url = window.URL.createObjectURL(new Blob([rs[0].data]))
|
||||
const link = document.createElement('a')
|
||||
const fileName = `${$dayjs(new Date()).format('YYYYMMDDhhmmss')}-data.csv`
|
||||
link.href = url
|
||||
link.setAttribute('download', fileName)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
}
|
||||
|
||||
function importData() {
|
||||
showmodal.value = {"title":"Nhập bút toán theo lô","vbind":{"code":"file-import"},
|
||||
"width":"90%","height":"500px","component":"parameter/ImportData"}
|
||||
}
|
||||
|
||||
function refreshShow(tag) {
|
||||
if(current.value===tag.file__hashtag) {
|
||||
imgshow.value = [...images.value]
|
||||
current.value = null
|
||||
return
|
||||
}
|
||||
imgshow.value = images.value.filter(v=>v.file__hashtag===tag.file__hashtag)
|
||||
current.value = tag.file__hashtag
|
||||
}
|
||||
|
||||
// State cho xem ảnh lớns
|
||||
const activeImageIndex = ref(null);
|
||||
|
||||
function viewImage(index) {
|
||||
activeImageIndex.value = index;
|
||||
}
|
||||
|
||||
function showNextImage() {
|
||||
activeImageIndex.value = (activeImageIndex.value + 1) % imgshow.value.length;
|
||||
}
|
||||
|
||||
function showPrevImage() {
|
||||
activeImageIndex.value = (activeImageIndex.value - 1 + imgshow.value.length) % imgshow.value.length;
|
||||
}
|
||||
|
||||
function closeViewImage() {
|
||||
activeImageIndex.value = null;
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.gallery-arrows {
|
||||
> * {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
padding: 0.5rem;
|
||||
border: none;
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-count {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: fit-content;
|
||||
margin-inline: auto;
|
||||
|
||||
padding: 4px 12px;
|
||||
border-radius: 9999px;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user