95 lines
4.1 KiB
Vue
95 lines
4.1 KiB
Vue
<script setup>
|
|
import {ref} from "vue";
|
|
import {useMediumStore} from "../../store/Medium.js";
|
|
import {Inertia} from "@inertiajs/inertia";
|
|
const MediumStore = useMediumStore();
|
|
const hasCopyUrl = ref(false);
|
|
const props = defineProps({
|
|
medium : {
|
|
type:Object
|
|
},
|
|
action : {
|
|
type: Boolean,
|
|
default: () => false
|
|
}
|
|
});
|
|
|
|
|
|
const copyImageUrl = (id) => {
|
|
let testingCodeToCopy = document.getElementById(`mediumUrlCopy_${id}`);
|
|
testingCodeToCopy.setAttribute('type', 'value');
|
|
testingCodeToCopy.select();
|
|
document.execCommand('copy')
|
|
testingCodeToCopy.setAttribute('type', 'hidden');
|
|
hasCopyUrl.value = id;
|
|
window.getSelection().removeAllRanges();
|
|
}
|
|
|
|
const singleDelete = (id) => {
|
|
Inertia.delete(`/admin/medium/${id}`, {
|
|
onSuccess: () => {
|
|
MediumStore.mediums = MediumStore.mediums.filter(medium => medium.id !== id);
|
|
}
|
|
}, { replace: false });
|
|
}
|
|
|
|
const getImageUrl = (medium) => {
|
|
if (medium.disk === 'public') {
|
|
return medium.url;
|
|
}
|
|
|
|
if (medium.disk === 'private') {
|
|
return `/admin/medium/${medium.id}/serve`;
|
|
}
|
|
|
|
return medium.url;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-1 bg-white border-[1px] border-gray-100 shadow-all cursor-pointer rounded-2xl">
|
|
<input :id="`mediumUrlCopy_${medium.id}`" type="hidden" :value="getImageUrl(medium)"/>
|
|
<figure class="p-3 h-[10rem] content-center">
|
|
<img class="w-full h-full rounded-2xl object-contain" v-if="medium.mime_type == 'mp4' || medium.mime_type == 'mkv'" src="@/images/musicFolder.png">
|
|
<img class="w-full h-full rounded-2xl object-contain" v-else-if="medium.mime_type == 'mp3'" src="@/images/musicFolder.png">
|
|
<img class="w-full h-full rounded-2xl object-contain" v-else-if="medium.mime_type == 'application/zip' || medium.mime_type == 'application/rar'" src="@/images/zip.ico">
|
|
<img class="w-full h-full rounded-2xl object-contain" v-else-if="medium.mime_type == 'application/pdf'" src="@/images/pdf.webp">
|
|
<img class="w-full h-full rounded-2xl object-contain" v-else-if="medium.mime_type == 'application/txt'" src="@/images/txtFormat.png">
|
|
<img class="w-full h-full rounded-2xl object-contain" v-else-if="medium.mime_type == 'sql'" src="@/images/1769_-_SQL-512.png">
|
|
<img class="w-full h-full object-contain rounded-2xl" v-else :src="getImageUrl(medium)">
|
|
</figure>
|
|
<div class="px-4 text-xs grid grid-cols-1 gap-2 mb-4">
|
|
<div class="grid grid-cols-2a justify-between gap-2 items-center">
|
|
<span class="text-[.67rem]">نام فایل:</span>
|
|
<span class="text-xs font-light w-full truncate">{{medium.filename}}</span>
|
|
</div>
|
|
<div class="grid grid-cols-2a justify-between gap-2 items-center">
|
|
<span class="text-[.67rem]">سایز فایل:</span>
|
|
<span class="text-xs font-light w-full truncate"> {{medium.size}}kb </span>
|
|
</div>
|
|
<div class="grid grid-cols-2a justify-between gap-2 items-center">
|
|
<span class="text-[.67rem]">فرمت فایل:</span>
|
|
<span class="text-xs font-light w-full truncate">{{medium.mime_type}}</span>
|
|
</div>
|
|
<div v-if="action" class="grid grid-cols-1 justify-between gap-2 items-center" :class="{ '!grid-cols-2' : action}">
|
|
<Button type="button"
|
|
@click="singleDelete(medium.id)" severity="danger"
|
|
label="حذف"
|
|
outlined
|
|
class="!text-xs"
|
|
size="small"
|
|
:pt="{icon : '!mt-2 !text-xs'}"/>
|
|
<Button @click="copyImageUrl(medium.id)" type="button" class="!text-xs"
|
|
severity="secondary"
|
|
size="small"
|
|
:label="hasCopyUrl == medium.id ? '✓ کپی شد ' : 'کپی آدرس'"
|
|
:pt="{icon : '!mt-2 !text-xs'}"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="css">
|
|
|
|
</style>
|