@testdracul/media-frontend 2.0.0 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testdracul/media-frontend",
-  "version": "2.0.0",
+  "version": "2.0.3",
   "private": false,
   "type": "module",
   "main": "./dist/dracul-media-frontend.umd.js",
@@ -23,9 +23,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@testdracul/common-frontend": "^2.0.0",
-    "@testdracul/dayjs-frontend": "^2.0.0",
-    "@testdracul/user-frontend": "^2.0.0",
+    "@testdracul/common-frontend": "^2.0.3",
+    "@testdracul/dayjs-frontend": "^2.0.3",
+    "@testdracul/user-frontend": "^2.0.3",
     "buffer": "^6.0.3",
     "papaparse": "^5.4.1",
     "vue-pdf-embed": "^1.2.1",
@@ -52,5 +52,9 @@
     "vite-plugin-vuetify": "^2.0.0",
     "vue-tsc": "^2.0.19"
   },
-  "gitHead": "2c254c423944e56505732c505b18d7bbe75f5d3c"
+  "gitHead": "e50b2eb6f93260ad0efdf03729c6718e1c8b62de",
+  "files": [
+    "dist",
+    "lib"
+  ]
 }

package/.env.development

@@ -1,4 +0,0 @@
-NODE_ENV=development
-VUE_APP_APIHOST=http://localhost:7000
-VUE_APP_KEY=draculmedia
-VUE_APP_REGISTER=enable

package/.env.example

@@ -1,3 +0,0 @@
-NODE_ENV=production
-VUE_APP_KEY=draculmedia
-VUE_APP_REGISTER=enable

package/.eslintrc.json

@@ -1,25 +0,0 @@
-{
-  "root": true,
-  "env": {
-    "node": true
-  },
-  "extends": [
-    "plugin:vue/essential",
-    "eslint:recommended"
-  ],
-  "parserOptions": {
-    "parser": "babel-eslint"
-  },
-  "rules": {},
-  "overrides": [
-    {
-      "files": [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)"
-      ],
-      "env": {
-        "jest": true
-      }
-    }
-  ]
-}

package/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}

package/docs-en.md

@@ -1,45 +0,0 @@
-#Dracul module: media-frontend
-
-The dracul media module provides a file storage service and exposes Vue pages and components ready to integrate.
-
-## Interface
-This module provides the user interface for managing the file service. Includes pages, components, and providers.
-
-## Pages
-
-### File management page
-FileManagementPage allows you to manage files, being able to list files, upload files, edit tags and description, delete files and view the metadata, URL and preview of the files.
-
-** route **: / file management
-
-### Files control panel page
-
-FileDashboardPage allows you to view summary information about stored files
-
-** route **: / file-dashboard
-
-
-## Components
-
-### Upload file
-Exposes a modal that allows uploading a file
-
-### FileUploadExpress
-It exposes a button that allows to upload a file. The button shows a loading spinner while the file is uploaded, at the end it shows a different icon depending on the type of file.
-
-### FileView
-Show a preview of the file if possible (images, audios, video) otherwise it shows the download link. Metadata sample: file name, MIME type, size, URL
-
-## Suppliers
-
-### File metric provider
-
-FileMetricsProvider exposes querys graphql to the backend module to obtain metrics for the dashboard
-
-### File Provider
-
-FileProvider exposes querys and graphql mutations to get and edit files from storage.
-
-### Upload provider
-
-UploadProvider exposes a mutation to upload the files.

package/docs-es.md

@@ -1,45 +0,0 @@
-#Dracul modulo: media-frontend
-
-El modulo media de dracul brinda un servicio de almacenamiento de archivos y expone páginas y componentes Vue listo para integrar.
-
-## Frontend 
-Este modulo provee la interfaz de usuario que permite gestionar el servicio de archivos. Incluye páginas, componentes y providers.
-
-## Pages
-
-### File Management Page
-FileManagementPage permite gestionar archivos pudiendo listar archivos, subir archivos, editar tags y descripción, eliminar archivos y visualizar la metadata, URL y preview de los archivos.   
-
-**ruta**: /file-management
-
-### File Dashboard Page
-
-FileDashboardPage permite visualizar información sumarizada sobre los archivos almacenados 
-
-**ruta**: /file-dashboard
-
-
-## Components
-
-### FileUpload
-Expone un modal que permite subir un archivo
-
-### FileUploadExpress
-Expone un boton que permite subir un archivo. El boton muestra un spinner de loading mientras el archivo se sube, al finalizar muestra un icono diferente segun el tipo de archivo.
-
-### FileView
-Expone una preview del archivo si es posible (imagenes, audios, video) de lo contrario muestra el link de descarga. Muestra metadata: filename, mimetype, size, url 
-
-## Providers
-
-### File Metrics Provider
-
-FileMetricsProvider expone querys graphql al módulo backend para la obtención de métricas para el dashboard
-
-### File Provider
-
-FileProvider expone querys y mutations graphql para obtener y editar los archivos del storage.
-
-### Upload Provider
-
-UploadProvider expone una mutation para subir los archivos.

package/src/components/CsvWebViewer/CsvWebViewer.vue

@@ -1,81 +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 { useI18n } from 'vue-i18n'
-import { Snackbar } from "@testdracul/common-frontend";
-import Papa from 'papaparse';
-
-const { t } = useI18n()
-
-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 csv. Por favor intente nuevamente más tarde!")
-
-const pagination = computed(() => content.value.length > 10)
-
-const parseFileCsv = () => {
-    Papa.parse(props.url, {
-        download: true,
-        delimiter: "",
-        header: true,
-        skipEmptyLines: true,
-        complete: function(results) {
-            if(results.errors.length == 0) {
-                results.meta.fields.forEach(elem => {
-                    let width = elem.length * 6
-
-                    results.data.forEach(data => {
-                        if(width < (data[elem]?.length || 0) * 6) width = (data[elem]?.length || 0) * 6
-                    })
-
-                    const item = {title: elem, value: elem, width}
-                    headers.value.push(item)
-                })
-                content.value = results.data
-            } else {
-                snackbarColor.value = "error";
-                snackbarMessage.value = t("media.file.errorCsvMessage");
-                console.log("Error al parsear el archivo csv, error: ", results.errors[0]);
-            }
-        }
-    })
-}
-
-onMounted(() => {
-    parseFileCsv()
-})
-</script>
-
-<style>
-    .tableContainer{
-        max-height: 50vh;
-    }
-</style>

package/src/components/CsvWebViewer/index.ts

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

package/src/components/FileUpload/FileUpload.vue

@@ -1,94 +0,0 @@
-<template>
-    <v-card outlined>
-        <v-card-text>
-            <v-row>
-                <v-col cols="12" sm="12">
-                    <v-btn @click="pickFile"
-                           class="mx-3"
-                           fab
-                           :color="color"
-                           :loading="loading"
-                    >
-                        <v-icon>{{icon}}</v-icon>
-                    </v-btn>
-                    <input type="file"
-                           style="display: none"
-                           ref="fileInput"
-                           :accept="accept"
-                           @change="onFilePicked"
-                    />
-                </v-col>
-
-                <v-col v-if="file && file.name" cols="12" sm="12">
-                    {{file.name}}
-                </v-col>
-
-                <v-col v-if="!!errorMessage" cols="12">
-                    <v-alert type="error" variant="outlined">
-                        {{$t(errorMessage)}}
-                    </v-alert>
-
-                </v-col>
-
-            </v-row>
-        </v-card-text>
-    </v-card>
-
-</template>
-
-<script setup>
-    import { ref } from 'vue'
-    import uploadProvider from "../../providers/UploadProvider";
-    import {ClientError} from '@testdracul/common-frontend'
-
-    const props = defineProps({
-        autoSubmit: {type: Boolean, default: false}
-    })
-
-    const emit = defineEmits(['fileUploaded'])
-
-    const title = 'media.file.creating'
-    const errorMessage = ref('')
-    const inputErrors = ref({})
-    const file = ref(null)
-    const color = ref('blue-grey')
-    const icon = ref('cloud_upload')
-    const loading = ref(false)
-    const result = ref(null)
-    const accept = ref('*')
-    const fileInput = ref(null)
-
-    const pickFile = () => {
-        fileInput.value.click()
-    }
-
-    const onFilePicked = (e) => {
-        file.value = e.target.files[0]
-        color.value = "green"
-        icon.value = "publish"
-        if (props.autoSubmit) {
-            upload()
-        }
-    }
-
-    const upload = () => {
-        if (file.value) {
-            loading.value = true
-            uploadProvider.uploadFile(file.value).then(resultData => {
-                result.value = resultData
-                emit('fileUploaded')
-            }).catch(err => {
-                let clientError = new ClientError(err)
-                errorMessage.value = clientError.i18nMessage
-            }).finally(() => loading.value = false)
-        }
-    }
-
-    defineExpose({
-        upload
-    })
-</script>
-
-<style scoped>
-
-</style>

package/src/components/FileUpload/index.ts

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

package/src/components/FileUploadButton/FileUploadButton.vue

@@ -1,127 +0,0 @@
-<template>
-  <div class="d-flex flex-column align-center">
-    <input type="file"
-           style="display: none"
-           ref="fileInput"
-           :accept="accept"
-           @change="onFilePicked"
-    />
-    <v-btn @click="pickFile()"
-           icon
-           :color="getState.color"
-           :loading="loading"
-           :size="xLarge ? 'x-large' : 'large'"
-    >
-      <v-avatar v-if="isImage" size="inherit">
-        <v-img :src="getSrc" alt="image"/>
-      </v-avatar>
-
-      <v-icon v-else-if="isAudio">mdi-headset</v-icon>
-      <v-icon v-else-if="isVideo">mdi-videocam</v-icon>
-      <v-icon v-else>{{ getState.icon }}</v-icon>
-    </v-btn>
-
-    <p class="mb-0 mt-5 text-body-1">{{ !file ? $t('media.file.chooseFile') : file.name}}</p>
-
-
-    <v-alert v-if="invalidSize" class="mt-3" border="start" type="error" variant="tonal" density="compact">
-      {{ $t("media.file.fileSizeExceeded") }} {{maxFileSize}} Mb
-      <template v-slot:append>
-        <v-btn variant="text" color="error" @click="resetUpload" class="ml-2">OK</v-btn>
-      </template>
-    </v-alert>
-
-    <v-alert v-if="invalidExtension" class="mt-3" border="start" type="error" variant="tonal" density="compact">
-      El nuevo fichero debe tener la misma extension que el original
-      <template v-slot:append>
-        <v-btn variant="text" color="error" @click="resetUpload" class="ml-2">OK</v-btn>
-      </template>
-    </v-alert>
-
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-
-const props = defineProps({
-    accept: {type: String, default: '*'},
-    loading: {type: Boolean, default: false},
-    xLarge: {type: Boolean, default: false},
-    maxFileSize: {type: Number, default: 0},
-    errorMessage: {type: String},
-    uploadedFile: {type: Object},
-    updating: {type: Boolean, default: false},
-    oldFileExtension: {type: String},
-})
-
-const emit = defineEmits(['fileSelected'])
-
-const file = ref(null)
-const invalidSize = ref(false)
-const invalidExtension = ref(false)
-const fileInput = ref(null)
-
-const isSelected = computed(() => !!file.value)
-
-const getState = computed(() => {
-    if (props.loading) return states.loading
-    if (props.errorMessage) return states.error
-    if (props.uploadedFile) return states.uploaded
-    if (isSelected.value) return states.selected
-    return states.initial
-})
-
-const isImage = computed(() => (props.uploadedFile && props.uploadedFile.type === 'image'))
-const isAudio = computed(() => (props.uploadedFile && props.uploadedFile.type === 'audio'))
-const isVideo = computed(() => (props.uploadedFile && props.uploadedFile.type === 'video'))
-const getSrc = computed(() => (props.uploadedFile && props.uploadedFile.url) ? props.uploadedFile.url : null)
-
-const states = {
-    initial: { color: 'blue-grey', icon: 'mdi-cloud-upload' },
-    selected: { color: 'cyan-darken-3', icon: 'mdi-check-circle' },
-    loading: { color: 'amber-darken-3', icon: '' },
-    uploaded: { color: 'green-darken-3', icon: 'mdi-magnify-plus' },
-    error: { color: 'red-darken-3', icon: 'mdi-alert' }
-}
-
-const pickFile = () => {
-    fileInput.value.click()
-}
-
-const validateSize = () => {
-    const fileSize = (file.value && file.value.size) ? file.value.size / (1024 * 1024) : null;
-    if (fileSize > props.maxFileSize) {
-        invalidSize.value = true
-    }
-}
-
-const validateExtension = async () => {
-    const newFileExtension = '.' + file.value.name.split('.').pop()
-    if (props.oldFileExtension != newFileExtension) {
-        invalidExtension.value = true
-        file.value = null
-    } else {
-        invalidExtension.value = false
-    }
-}
-
-const onFilePicked = (e) => {
-    file.value = e.target.files[0]
-    if (file.value) {
-        validateSize()
-        if (props.updating) validateExtension()
-        emit('fileSelected', file.value)
-    }
-}
-
-const resetUpload = () => {
-    file.value = null
-    invalidSize.value = false
-    invalidExtension.value = false
-}
-</script>
-
-<style scoped>
-
-</style>

package/src/components/FileUploadButton/index.ts

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