@testdracul/media-frontend 2.0.0 → 2.0.3

package/src/components/FileView/FileView.vue

@@ -1,336 +0,0 @@
-<template>
-  <v-container v-if="file" class="pt-0 mt-0 mainContainer">
-    <v-tabs v-model="activeTab" color="primary">
-      <v-tab value="previewTab">Previsualización</v-tab>
-      <v-tab value="metadataTab">Metadata</v-tab>
-      <v-tab value="privacyTab">Privacidad</v-tab>
-      <v-tab value="fileHistoryTab">Historial</v-tab>
-    </v-tabs>
-
-    <v-divider class="mb-4"></v-divider>
-
-    <v-window v-model="activeTab">
-      <v-window-item value="previewTab">
-        <div v-if="!isImage && !isAudio && !isVideo && !isPdf">
-          <csv-web-viewer v-if="isCsv && fileObjectUrl" :url="fileObjectUrl"></csv-web-viewer>
-          <xlsx-web-viewer v-if="isXlsx && fileObjectUrl" :url="fileObjectUrl"></xlsx-web-viewer>
-          <v-btn block v-if="hasPermission('FILE_DOWNLOAD')" @click="downloadFile" class="text-uppercase mb-2" color="success">
-            <v-icon icon="mdi-arrow-down-bold-circle"></v-icon>
-            {{ $t('media.file.download') }}
-          </v-btn>
-        </div>
-
-        <v-img v-if="isImage && fileObjectUrl" :src="fileObjectUrl" width="100%"></v-img>
-
-        <audio v-if="isAudio && fileObjectUrl" controls :src="fileObjectUrl" :type="file.mimetype" width="100%"></audio>
-
-        <video v-if="isVideo && fileObjectUrl" width="100%" controls :src="fileObjectUrl" :type="file.mimetype"></video>
-
-        <v-container fluid>
-          <v-alert v-if="hasFileLoadingError" type="error" density="compact">
-            Error al cargar el archivo (CORS o permisos).
-          </v-alert>
-          <pdf-web-viewer v-if="isPdf && fileObjectUrl" :url="fileObjectUrl" style="max-height: 50vh; overflow: auto;"></pdf-web-viewer>
-        </v-container>
-      </v-window-item>
-
-      <v-window-item value="metadataTab">
-        <v-list lines="two">
-          <v-row dense>
-            <v-col cols="12" md="6">
-              <show-field :model-value="file.id" :label="$t('media.file.id')" icon="mdi-badge"/>
-            </v-col>
-            <v-col cols="12" md="6">
-              <show-field :model-value="file.filename" :label="$t('media.file.filename')" icon="mdi-text-short"/>
-            </v-col>
-            <v-col cols="12">
-              <show-field :model-value="file.description" :label="$t('media.file.description')" icon="mdi-text-box"/>
-            </v-col>
-            <v-col cols="12" md="6">
-              <show-field :model-value="file.mimetype" :label="$t('media.file.mimetype')" icon="mdi-folder"/>
-            </v-col>
-            <v-col cols="12" md="6">
-              <show-field :model-value="getSizeInMegaBytes" :label="$t('media.file.size')" icon="mdi-weight"/>
-            </v-col>
-            <v-col cols="12" md="6">
-              <show-chip-field :chips="file.tags" :label="$t('media.file.tags')" icon="mdi-tag"/>
-            </v-col>
-            <v-col cols="12" md="6">
-              <show-field :model-value="hits" :label="$t('media.file.hits')" icon="mdi-eye"/>
-            </v-col>
-
-            <v-col cols="12">
-              <v-list-item v-if="hasPermission('FILE_DOWNLOAD')">
-                <template v-slot:prepend>
-                  <v-btn size="small" icon @click="copyToClipboard" class="mr-4">
-                    <v-icon color="black">mdi-content-copy</v-icon>
-                  </v-btn>
-                  <input type="hidden" id="url" :value="file.url">
-                </template>
-                <v-list-item-title>
-                  {{ file.url }} 
-                  <v-btn size="x-small" icon color="blue" variant="text" @click="openFileInNewTab" class="ml-2">
-                    <v-icon>mdi-launch</v-icon>
-                  </v-btn>
-                </v-list-item-title>
-                <v-list-item-subtitle>URL del archivo</v-list-item-subtitle>
-              </v-list-item>
-
-              <v-list-item v-else>
-                <template v-slot:prepend>
-                   <v-icon color="black" class="mr-5">mdi-book-open</v-icon>
-                </template>
-                <v-list-item-title v-if="isPdf">
-                  Abrir en nueva pestaña
-                  <v-btn size="x-small" icon color="blue" variant="text" @click="openFileInNewTab" class="ml-2">
-                    <v-icon>mdi-launch</v-icon>
-                  </v-btn>
-                </v-list-item-title>
-              </v-list-item>
-            </v-col>
-          </v-row>
-        </v-list>
-
-        <v-snackbar v-model="showClipboardSnackbar" :timeout="2000">
-          {{ clipboardSnackbarText }}
-          <template v-slot:actions>
-            <v-btn color="pink" variant="text" @click="showClipboardSnackbar = false">
-              <v-icon>mdi-close</v-icon>
-            </v-btn>
-          </template>
-        </v-snackbar>
-      </v-window-item>
-
-      <v-window-item value="privacyTab">
-        <v-list lines="two">
-          <show-field :model-value="isPublic" label="Privacidad del archivo" icon="mdi-cctv"/>
-          <v-divider class="my-2"></v-divider>
-          <groups-show v-if="hasPermission('SECURITY_GROUP_SHOW')" :fileIdGroups="file.groups"></groups-show>
-          <v-divider class="my-2"></v-divider>
-          <users-show v-if="hasPermission('SECURITY_USER_SHOW')" :fileIdUsers="file.users"></users-show>
-        </v-list>
-      </v-window-item>
-
-      <v-window-item value="fileHistoryTab">
-        <v-data-table
-            :headers="[{title: t('media.file.history.date'), key: 'date', sortable: true, align: 'center'}, {title: t('media.file.history.user'), key: 'username', sortable: true, align: 'center'}]"
-            :items="formattedFileReplaces"
-            :items-per-page="5"
-            :items-per-page-options="[5, 10, 25, 50]"
-            :items-per-page-text="t('common.itemsPerPageText')"
-            class="elevation-1"
-            density="compact"
-        ></v-data-table>
-      </v-window-item>
-    </v-window>
-  </v-container>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
-import { useStore } from 'vuex'
-import { useI18n } from 'vue-i18n'
-import { ShowField, ShowChipField } from '@testdracul/common-frontend'
-import { useDayjs } from '@testdracul/dayjs-frontend'
-import PdfWebViewer from '../PdfWebViewer'
-import GroupsShow from '../GroupsShow'
-import UsersShow from '../UsersShow'
-import CsvWebViewer from '../CsvWebViewer'
-import XlsxWebViewer from '../XlsxWebViewer'
-
-const props = defineProps({
-    file: { type: Object }
-})
-
-const { t } = useI18n()
-const store = useStore()
-const { getDateTimeFormat } = useDayjs()
-
-const showClipboardSnackbar = ref(false)
-const clipboardSnackbarText = ref('')
-const activeTab = ref(null)
-const fileObjectUrl = ref(null)
-const isFileLoading = ref(false)
-const hasFileLoadingError = ref(false)
-
-const formattedFileReplaces = computed(() => {
-    if (!props.file || !props.file.fileReplaces) return []
-    return props.file.fileReplaces.map(item => ({
-        ...item,
-        date: formatDate(item.date)
-    }))
-})
-
-const hasPermission = (permission) => {
-    return store.getters.hasPermission(permission)
-}
-
-const isImage = computed(() => {
-    return (props.file && props.file.type === 'image')
-})
-
-const isAudio = computed(() => {
-    return (props.file && props.file.type === 'audio')
-})
-
-const isVideo = computed(() => {
-    return (props.file && props.file.type === 'video')
-})
-
-const isPdf = computed(() => {
-    return (props.file && props.file.mimetype === 'application/pdf')
-})
-
-const isCsv = computed(() => {
-    return (props.file && props.file.extension === ".csv")
-})
-
-const isXlsx = computed(() => {
-    return (props.file && props.file.extension === ".xlsx")
-})
-
-const getSizeInMegaBytes = computed(() => {
-    return props.file.size.toFixed(5) + ' MB'
-})
-
-const hits = computed(() => {
-    return (props.file && String(props.file.hits))
-})
-
-const isPublic = computed(() => {
-    return props.file.isPublic ? 'Público' : 'Privado'
-})
-
-const formatDate = (date) => {
-    return getDateTimeFormat(date, true)
-}
-
-const fetchFileWithAuth = async (returnFullResponse = false) => {
-    const authToken = store.state.user.access_token
-    if (!authToken || !props.file.url) return null
-
-    const response = await fetch(props.file.url, {
-        method: 'GET',
-        headers: { 'Authorization': `Bearer ${authToken}` },
-        cache: 'no-store'
-    })
-
-    if (!response.ok) throw new Error(`Error fetching file: ${response.status} ${response.statusText}`)
-
-    const blobData = await response.blob()
-    const finalBlob = (blobData && blobData.type) ? blobData : new Blob([blobData], { type: (props.file.mimetype || 'application/octet-stream') })
-
-    if (returnFullResponse) return { response, blob: finalBlob }
-    return finalBlob
-}
-
-const loadFileAsBlob = async () => {
-    if (!props.file || !props.file.url) return
-
-    isFileLoading.value = true
-    hasFileLoadingError.value = false
-    revokeFileUrl()
-
-    try {
-        const blob = await fetchFileWithAuth()
-        if (!blob) {
-            hasFileLoadingError.value = true
-            return
-        }
-        fileObjectUrl.value = URL.createObjectURL(blob)
-    } catch (error) {
-        console.error("Error loading file as blob:", error)
-        hasFileLoadingError.value = true
-    } finally {
-        isFileLoading.value = false
-    }
-}
-
-const revokeFileUrl = () => {
-    if (fileObjectUrl.value) {
-        URL.revokeObjectURL(fileObjectUrl.value)
-        fileObjectUrl.value = null
-    }
-}
-
-const downloadFile = async () => {
-    try {
-        const { response, blob } = await fetchFileWithAuth(true)
-        if (!response) return
-
-        const contentDispositionHeader = response.headers.get('content-disposition') || ''
-        const filenameFromHeader = extractFilenameFromContentDisposition(contentDispositionHeader)
-        const filename = filenameFromHeader || props.file.filename || 'download'
-
-        const objectUrl = URL.createObjectURL(blob)
-        const downloadLink = document.createElement('a')
-        downloadLink.href = objectUrl
-        downloadLink.download = filename
-        document.body.appendChild(downloadLink)
-        downloadLink.click()
-        document.body.removeChild(downloadLink)
-        setTimeout(() => URL.revokeObjectURL(objectUrl), 150)
-    } catch (error) {
-        console.error("Error downloading file:", error)
-    }
-}
-
-const extractFilenameFromContentDisposition = (headerValue) => {
-    if (!headerValue) return null
-    const match = headerValue.match(/filename\*?=(?:UTF-8'')?["']?([^;"']+)/i)
-    if (!match) return null
-    try {
-        return decodeURIComponent(match[1].replace(/["']/g, ''))
-    } catch (e) {
-        return match[1].replace(/["']/g, '')
-    }
-}
-
-const openFileInNewTab = async () => {
-    if (fileObjectUrl.value) {
-        window.open(fileObjectUrl.value, '_blank')
-        return
-    }
-
-    try {
-        const blob = await fetchFileWithAuth()
-        if (blob) {
-            const objectUrl = URL.createObjectURL(blob)
-            window.open(objectUrl, '_blank')
-        }
-    } catch (error) {
-        console.error("Could not open file in new tab:", error)
-    }
-}
-
-const copyToClipboard = async () => {
-    const urlToCopy = props.file.url || ''
-    try {
-        await navigator.clipboard.writeText(urlToCopy)
-        clipboardSnackbarText.value = 'URL copiada al portapapeles'
-        showClipboardSnackbar.value = true
-    } catch (error) {
-        clipboardSnackbarText.value = 'Error al copiar la URL'
-        showClipboardSnackbar.value = true
-        console.error('Failed to copy to clipboard:', error)
-    }
-}
-
-watch(() => props.file?.url, (newUrl, oldUrl) => {
-    if (newUrl !== oldUrl) loadFileAsBlob()
-})
-
-onMounted(() => {
-    loadFileAsBlob()
-})
-
-onBeforeUnmount(() => {
-    revokeFileUrl()
-})
-</script>
-
-<style scoped>
-  .mainContainer {
-    max-height: 65vh;
-  }
-</style>

package/src/components/FileView/index.ts

@@ -1,4 +0,0 @@
-import FileView from "./FileView";
-
-export {FileView}
-export default FileView

package/src/components/GroupsShow/GroupsShow.vue

@@ -1,40 +0,0 @@
-<template>
-  <show-chip-field :chips="fileGroups" :label="$t('media.file.groups')" icon="mdi-account-group"/>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { groupProvider } from "@testdracul/user-frontend"
-import { ShowChipField } from '@testdracul/common-frontend'
-
-const props = defineProps({
-    fileIdGroups: { type: Array },
-})
-
-const fileGroups = ref([])
-const sharedWith = ref('')
-
-onMounted(() => {
-    groupProvider.groups().then((result) => {
-        if(!props.fileIdGroups) return;
-        fileGroups.value = result.data.groups.filter((group) => props.fileIdGroups.includes(group.id))
-
-        if(fileGroups.value.length > 1){
-            for (let groupsCounter = 0; groupsCounter < fileGroups.value.length; groupsCounter++) {
-                if (groupsCounter == 0){
-                    sharedWith.value += `${fileGroups.value[groupsCounter].name}`
-                }else{
-                    sharedWith.value += `, ${fileGroups.value[groupsCounter].name}`
-                }
-            }
-        }else if (fileGroups.value.length == 1){
-            sharedWith.value = fileGroups.value[0].name
-        }else{
-            sharedWith.value = '-'
-        }
-    })
-})
-</script>
-
-<style scoped>
-</style>

package/src/components/GroupsShow/index.ts

@@ -1,4 +0,0 @@
-import GroupsShow from "./GroupsShow"
-
-export { GroupsShow }
-export default GroupsShow

package/src/components/MediaField/MediaField.vue

@@ -1,62 +0,0 @@
-<template>
-  <v-row>
-    <v-col class="flex-grow-1 flex-shrink-0">
-      <v-text-field
-          :prepend-inner-icon="icon"
-          :name="fieldName"
-          v-model="field"
-          :label="$te(label) ? $t(label) : label"
-          :placeholder="label"
-          :error="hasInputErrors(fieldName)"
-          :error-messages="getInputErrors(fieldName)"
-          color="secondary"
-          :rules="isRequired ? required : []"
-          :readonly="readOnly"
-      ></v-text-field>
-    </v-col>
-    <v-col class="flex-shrink-0 flex-grow-0">
-      <file-upload-express :accept="accept"
-                           :auto-submit="true"
-                           @fileUploaded="imageUploaded"
-      />
-    </v-col>
-
-
-  </v-row>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import {InputErrorsByProps, RequiredRule} from "@testdracul/common-frontend";
-import FileUploadExpress from "../FileUploadExpress";
-
-const props = defineProps({
-    fieldName: {type: String, required: false, default: "file"},
-    modelValue: {type: String, required: true},
-    label: {type: String, required: false, default: "media.file.chooseFile"},
-    accept: {type: String, default: "*"},
-    icon: {type: String, required: false, default: "mdi-paperclip"},
-    isRequired: {type: Boolean, default: false},
-    readOnly: {type: Boolean,default: false},
-})
-
-const emit = defineEmits(['update:modelValue', 'fileUploaded'])
-
-const field = computed({
-    get() {
-        return props.modelValue
-    },
-    set(val) {
-        emit('update:modelValue', val)
-    }
-})
-
-const imageUploaded = (file) => {
-    emit('fileUploaded', file)
-    field.value = file.url
-}
-</script>
-
-<style scoped>
-
-</style>

package/src/components/MediaField/index.ts

@@ -1,4 +0,0 @@
-import MediaField from "./MediaField";
-
-export {MediaField}
-export default MediaField

package/src/components/PdfWebViewer/PdfWebViewer.vue

@@ -1,81 +0,0 @@
-<template>
-  <div id="app" class="pdfViewer">
-    <div class="app-header">
-      <template v-if="isLoading">
-        Loading...
-      </template>
-
-      <template v-else>
-
-        <span class="d-flex">
-          <v-spacer/>
-          <v-btn :disabled="page <= 1" @click="page--">❮</v-btn>
-          <v-spacer/>
-          {{ page }} / {{ totalPages }}
-          <v-spacer/>
-          <v-btn :disabled="page >= totalPages" @click="page++">❯</v-btn>
-          <v-spacer/>
-
-        </span>
-      </template>
-    </div>
-
-    <v-card height="100%" flat>
-      <v-spacer/>
-        <vue-pdf-embed
-          ref="pdfRef"
-          :source="pdfSource"
-          :page="page"
-          @rendered="handleDocumentRender"
-        />
-    </v-card>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useStore } from 'vuex'
-import { Buffer } from 'buffer'
-
-global.Buffer = global.Buffer || Buffer
-
-import VuePdfEmbed from 'vue-pdf-embed'
-
-const props = defineProps({
-    url: { type: String },
-    width: { type: String }
-})
-
-const store = useStore()
-
-const pdfSource = ref(props.url)
-const page = ref(1)
-const totalPages = ref(null)
-const isLoading = ref(true)
-const pdfRef = ref(null)
-
-const me = computed(() => store.getters.me)
-
-const handleDocumentRender = () => {
-    isLoading.value = false
-    totalPages.value = pdfRef.value.pageCount
-}
-
-const avoidPrint = () => {
-    if (!me.value?.role?.permissions.includes('FILE_SHOW_OWN')) {
-        window.onbeforeprint = () => {
-            let url = window.location.href
-            window.location.href = url
-            alert("No tiene permisos para imprimir")
-        }
-    }
-}
-
-watch(() => props.url, (newValue) => {
-    pdfSource.value = newValue
-})
-
-onMounted(() => {
-    avoidPrint()
-})
-</script>

package/src/components/PdfWebViewer/index.ts

@@ -1,4 +0,0 @@
-import PdfWebViewer from "./PdfWebViewer.vue"
-
-export {PdfWebViewer}
-export default PdfWebViewer

package/src/components/UsersShow/UsersShow.vue

@@ -1,39 +0,0 @@
-<template>
-  <show-chip-field :chips="fileUsers" :label="$t('media.file.users')" icon="mdi-account"/>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { userProvider } from "@testdracul/user-frontend"
-import { ShowChipField } from '@testdracul/common-frontend'
-
-const props = defineProps({
-    fileIdUsers: { type: Array },
-})
-
-const fileUsers = ref([])
-const sharedWith = ref('')
-
-onMounted(() => {
-    userProvider.users().then((result) => {
-        fileUsers.value = result.data.users.filter((user) => props.fileIdUsers.includes(user.id))
-
-        if(fileUsers.value.length > 1){
-            for (let userCounter = 0; userCounter < fileUsers.value.length; userCounter++) {
-                if (userCounter == 0){
-                    sharedWith.value += `${fileUsers.value[userCounter].name}`
-                }else{
-                    sharedWith.value += `, ${fileUsers.value[userCounter].name}`
-                }
-            }
-        }else if (fileUsers.value.length == 1){
-            sharedWith.value = fileUsers.value[0].name
-        }else{
-            sharedWith.value = '-'
-        }
-    })
-})
-</script>
-
-<style scoped>
-</style>

package/src/components/UsersShow/index.ts

@@ -1,4 +0,0 @@
-import UsersShow from "./UsersShow"
-
-export { UsersShow }
-export default UsersShow

package/src/components/XlsxWebViewer/XlsxWebViewer.vue

@@ -1,70 +0,0 @@
-<template>
-    <div>
-        <v-data-table class="mx-auto elevation-1" height="50vh" fixed-header :hide-default-footer="!pagination"
-            :items-per-page="10" :disable-pagination="!pagination" :headers="headers" :items="content"
-            :no-data-text="noDataText"></v-data-table>
-        <snackbar v-model="snackbarMessage" :color="snackbarColor" :timeout="snackbarTimeOut"
-            @update:modelValue="val => !val && (snackbarMessage = null)" />
-    </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { Snackbar } from "@testdracul/common-frontend";
-import * as XLSX from "xlsx"
-
-const props = defineProps({
-    url: { type: String }
-})
-
-const headers = ref([])
-const content = ref([])
-const snackbarColor = ref("")
-const snackbarMessage = ref("")
-const snackbarTimeOut = ref(3000)
-const noDataText = ref("No se pudo procesar la información del xlsx. Por favor intente nuevamente más tarde!")
-
-const pagination = computed(() => content.value.length > 10)
-
-const parseFileXlsx = async () => {
-    try {
-        const file = await fetch(props.url)
-        const fileArrayBuffer = await file.arrayBuffer()
-
-        const xlsxFile = XLSX.read(new Uint8Array(fileArrayBuffer, { type: 'array' }))
-        const jsonSheets = XLSX.utils.sheet_to_json(xlsxFile.Sheets[xlsxFile.SheetNames[0]])
-
-        if (jsonSheets.length < 0) {
-            noDataText.value = 'No existen datos en este registro'
-        } else {
-            jsonSheets.forEach((element, index) => {
-                if (index === 0) {
-                    Object.keys(element).forEach(key => {
-                        let width = key?.length * 6
-
-                        jsonSheets.forEach(data => {
-                            if (width < (data[key]?.length || 0) * 6) width = (data[key]?.length || 0) * 6
-                        })
-
-                        headers.value.push(
-                            {
-                                width,
-                                title: key,
-                                value: key,
-                                sortable: false
-                            }
-                        )
-                    })
-                }
-                content.value.push(element)
-            })
-        }
-    } catch (error) {
-        noDataText.value = `Error al parsear el archivo xlsx, error: ${error}`
-    }
-}
-
-onMounted(() => {
-    parseFileXlsx()
-})
-</script>

package/src/components/XlsxWebViewer/index.ts

@@ -1,4 +0,0 @@
-import XlsxWebViewer from "./XlsxWebViewer.vue"
-
-export {XlsxWebViewer}
-export default XlsxWebViewer

package/src/helpers/redeableBytes.ts

@@ -1,9 +0,0 @@
-const readableBytes = function (bytes) {
-    var i = Math.floor(Math.log(bytes) / Math.log(1024)),
-        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-    return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + sizes[i];
-}
-
-export {readableBytes}
-export default readableBytes