@testdracul/media-frontend 2.0.0

package/src/pages/FileManagementPage/FileShow/FileShowData.vue

@@ -0,0 +1,35 @@
+<template>
+    <v-row>
+        <v-col cols="12" sm="6" md="4">
+            <v-list>
+                 <show-field :model-value="item.filename" :label="$t('media.file.filename')" icon="mdi-text-box"/>
+                 <show-field :model-value="item.absolutePath" :label="$t('media.file.absolutePath')" icon="mdi-folder"/>
+                 <show-field :model-value="item.createdAt" :label="$t('media.file.createdAt')" icon="mdi-calendar"/>
+            </v-list>
+        </v-col>
+
+        <v-col cols="12" sm="6" md="4">
+            <v-list>
+                 <show-field :model-value="item.extension" :label="$t('media.file.extension')" icon="mdi-file"/>
+                 <show-field :model-value="item.size.toString()" :label="$t('media.file.size')" icon="mdi-image-size-select-actual"/>
+                 <show-field :model-value="item.createdBy?.user?.name" :label="$t('media.file.createdBy')" icon="mdi-account-circle"/>
+            </v-list>
+        </v-col>
+
+        <v-col cols="12" sm="6" md="4">
+            <v-list>
+                 <show-field :model-value="item.relativePath" :label="$t('media.file.relativePath')" icon="mdi-folder-open"/>
+                 <show-field :model-value="item.url" :label="$t('media.file.url')" icon="mdi-link"/>
+            </v-list>
+        </v-col>
+
+    </v-row>
+</template>
+<script setup>
+import {ShowField} from '@testdracul/common-frontend'
+
+defineProps({
+    item: {type: Object, required: true}
+})
+</script>
+

package/src/pages/FileManagementPage/FileShow/index.ts

@@ -0,0 +1,3 @@
+import FileShow from './FileShow.vue'
+export {FileShow}
+export default FileShow

package/src/pages/FileManagementPage/FileUpdate/FileUpdate.vue

@@ -0,0 +1,107 @@
+<template>
+  <crud-update 
+    :open="open"
+    :loading="loading"
+    :title="title"
+    :error-message="errorMessage"
+    :disable-submit="!hasChanges"
+    @update="update"
+    @close="$emit('close')"
+  >
+
+    <v-card flat class="mb-3">
+      <v-card-text>
+        <file-form
+            updating
+            :old-file-extension="oldFileExtension"
+            ref="formRef"
+            v-model="form"
+            :input-errors="inputErrors"
+            @file-selected="handleFileSelected"
+            @save="update"
+        />
+      </v-card-text>
+    </v-card>
+
+  </crud-update>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue'
+import FileProvider from "../../../providers/FileProvider";
+import {CrudUpdate, ClientError} from '@testdracul/common-frontend'
+import FileForm from "../FileForm";
+
+const props = defineProps({
+    open: {type: Boolean, default: true},
+    item: {type: Object, required: true}
+})
+
+const emit = defineEmits(['close', 'itemUpdated'])
+
+const title = ref('media.file.editing')
+const errorMessage = ref('')
+const inputErrors = ref({})
+const loading = ref(false)
+const form = ref({
+    id: props.item.id,
+    description: props.item.description,
+    tags: props.item.tags,
+    expirationDate: props.item.expirationDate,
+    isPublic: props.item.isPublic ? props.item.isPublic : false,
+    groups: props.item.groups ? props.item.groups : [],
+    users: props.item.users ? props.item.users : []
+})
+const file = ref(null)
+const oldFileExtension = ref(props.item.extension)
+const initialForm = ref(null)
+const hasFileSelected = ref(false)
+const formRef = ref(null)
+
+const hasFormChanges = computed(() => {
+    return JSON.stringify(form.value) !== JSON.stringify(initialForm.value)
+})
+
+const hasChanges = computed(() => {
+    return hasFormChanges.value || hasFileSelected.value
+})
+
+onBeforeMount(() => {
+    initialForm.value = JSON.parse(JSON.stringify(form.value))
+})
+
+const update = () => {
+    if (formRef.value?.validate()) {
+        loading.value = true
+        FileProvider.updateFile(form.value, file.value).then(r => {
+            if (r) {
+                emit('itemUpdated', r.data.fileUpdate)
+                emit('close')
+            }
+        }).catch(error => {
+            let clientError = new ClientError(error)
+            inputErrors.value = clientError.inputErrors
+            errorMessage.value = clientError.i18nMessage
+        }).finally(() => loading.value = false)
+    }
+}
+
+const handleFileSelected = (fileParam) => {
+    if (fileParam) {
+        const newFileExtension = '.' + fileParam.name.split('.').pop()
+
+        if (newFileExtension == oldFileExtension.value) {
+            file.value = fileParam
+            hasFileSelected.value = true
+        }
+    } else {
+        file.value = null
+        hasFileSelected.value = false
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
+

package/src/pages/FileManagementPage/FileUpdate/index.ts

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

package/src/pages/FileManagementPage/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-row>
+    <v-col cols="12">
+      <file-crud :topAddButton="true"/>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import FileCrud from "./FileCrud";
+
+export default {
+  name: "File",
+  components: {FileCrud}
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/pages/MediaDocPage/MediaDocCard.vue

@@ -0,0 +1,35 @@
+<template>
+    <v-card class="fill-height hover-card" @click="$router.push({name: 'MediaDocPage'})">
+        <v-card-item>
+            <template v-slot:prepend>
+                <v-icon color="info" size="x-large">mdi-folder-information</v-icon>
+            </template>
+            <v-card-title>{{ $t('media.doc.title') }}</v-card-title>
+            <v-card-subtitle>{{ $t('media.doc.subtitle') }}</v-card-subtitle>
+        </v-card-item>
+        <v-card-text>
+            Manual de usuario para la carga, organización y gestión de archivos multimedia.
+        </v-card-text>
+        <v-card-actions>
+            <v-spacer />
+            <v-btn variant="text" color="info">Ver Manual</v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script>
+export default {
+    name: "MediaDocCard"
+}
+</script>
+
+<style scoped>
+.hover-card {
+    transition: transform 0.2s;
+    cursor: pointer;
+}
+.hover-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
+}
+</style>

package/src/pages/MediaDocPage/MediaDocPage.vue

@@ -0,0 +1,78 @@
+<template>
+    <doc-layout 
+        :title="$t('media.doc.title')" 
+        icon="mdi-folder-information"
+        color="info" 
+        swagger 
+        :swagger-label="$t('media.doc.swagger')"
+    >
+        <template v-slot:overview>
+            <p>
+                La Gestión de Medios es su centro de control para archivos y documentos. 
+                Aquí puede cargar imágenes, PDFs y otros archivos, organizarlos mediante etiquetas 
+                y controlar quién puede verlos. El sistema se encarga automáticamente de optimizar 
+                el espacio eliminando archivos temporales cuando ya no son necesarios.
+            </p>
+        </template>
+
+        <template v-slot:how-to-use>
+            <v-timeline side="end" align="start" density="compact">
+                <v-timeline-item dot-color="info" size="x-small">
+                    <div class="font-weight-bold">Subir Archivos</div>
+                    <div class="text-caption">Use el botón "Subir" en la gestión de archivos. Puede definir una fecha de expiración si el archivo es temporal.</div>
+                </v-timeline-item>
+                <v-timeline-item dot-color="info" size="x-small">
+                    <div class="font-weight-bold">Gestionar Almacenamiento</div>
+                    <div class="text-caption">Desde "Mi Almacenamiento" puede ver cuánto espacio está ocupando y sus límites permitidos.</div>
+                </v-timeline-item>
+                <v-timeline-item dot-color="info" size="x-small">
+                    <div class="font-weight-bold">Compartir y Previsualizar</div>
+                    <div class="text-caption">Haga clic en cualquier archivo para ver su contenido, obtener su enlace público o descargar una copia.</div>
+                </v-timeline-item>
+            </v-timeline>
+        </template>
+
+        <template v-slot:benefits>
+            <v-row no-gutters>
+                <v-col cols="12" sm="6">
+                    <v-list-item title="Organización Inteligente" subtitle="Etiquete sus archivos para encontrarlos rápidamente." />
+                </v-col>
+                <v-col cols="12" sm="6">
+                    <v-list-item title="Limpieza Automática" subtitle="Los archivos con fecha de expiración se borran solos al vencer." />
+                </v-col>
+                <v-col cols="12" sm="6">
+                    <v-list-item title="Seguridad de Datos" subtitle="Solo usted y los usuarios autorizados pueden acceder a sus archivos privados." />
+                </v-col>
+                <v-col cols="12" sm="6">
+                    <v-list-item title="Multi-dispositivo" subtitle="Acceda a sus documentos desde cualquier navegador o dispositivo." />
+                </v-col>
+            </v-row>
+        </template>
+
+        <template v-slot:faq>
+            <v-expansion-panels variant="accordion">
+                <v-expansion-panel
+                    title="¿Qué pasa cuando un archivo expira?"
+                    text="El sistema detecta automáticamente la fecha vencida y elimina el archivo físicamente para liberar espacio. Recibirá una notificación si el archivo era crítico."
+                />
+                <v-expansion-panel
+                    title="¿Hay un límite de tamaño?"
+                    text="Sí, cada usuario tiene una cuota máxima asignada por el administrador. Puede verificar su estado en la sección de Almacenamiento."
+                />
+                <v-expansion-panel
+                    title="¿Quién puede ver mis archivos públicos?"
+                    text="Cualquier persona que tenga el enlace directo, incluso si no ha iniciado sesión en el sistema."
+                />
+            </v-expansion-panels>
+        </template>
+    </doc-layout>
+</template>
+
+<script>
+import { DocLayout } from "@testdracul/common-frontend"
+
+export default {
+    name: "MediaDocPage",
+    components: { DocLayout }
+}
+</script>

package/src/pages/UserStoragePage/UserStorage.vue

@@ -0,0 +1,311 @@
+<template>
+  <crud-layout :title="t('media.userStorage.title')" :subtitle="t('media.userStorage.subtitle')">
+    <template v-slot:list>
+      <v-expansion-panels class="mb-4">
+        <v-expansion-panel elevation="2">
+          <v-expansion-panel-title>
+            <v-icon icon="mdi-filter-variant" class="mr-2"></v-icon>
+            {{ t('media.userStorage.filters') }}
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <v-row dense>
+              <v-col cols="12" sm="6" md="3">
+                <user-autocomplete
+                    v-model="filters.user"
+                    :label="t('media.userStorage.user')"
+                    filter
+                ></user-autocomplete>
+              </v-col>
+              <v-col cols="12" sm="6" md="3">
+                <v-select
+                    v-model="filters.visibility"
+                    :items="visibilityOptions"
+                    :label="t('media.userStorage.filesPrivacy')"
+                    variant="underlined"
+                    density="compact"
+                    clearable
+                    prepend-inner-icon="mdi-eye"
+                ></v-select>
+              </v-col>
+              <v-col cols="12" sm="6" md="3">
+                <v-text-field
+                    v-model="filters.capacityMin"
+                    type="number"
+                    :label="t('media.userStorage.capacityMin')"
+                    variant="underlined"
+                    density="compact"
+                    prepend-inner-icon="mdi-arrow-up-bold-circle-outline"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6" md="3">
+                <v-text-field
+                    v-model="filters.capacityMax"
+                    type="number"
+                    :label="t('media.userStorage.capacityMax')"
+                    variant="underlined"
+                    density="compact"
+                    prepend-inner-icon="mdi-arrow-down-bold-circle-outline"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6" md="3">
+                <v-text-field
+                    v-model="filters.maxFileSizeMin"
+                    type="number"
+                    :label="t('media.userStorage.maxFileSizeMin')"
+                    variant="underlined"
+                    density="compact"
+                    prepend-inner-icon="mdi-file-upload-outline"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6" md="3">
+                <v-text-field
+                    v-model="filters.maxFileSizeMax"
+                    type="number"
+                    :label="t('media.userStorage.maxFileSizeMax')"
+                    variant="underlined"
+                    density="compact"
+                    prepend-inner-icon="mdi-file-upload-outline"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6" md="3">
+                <v-text-field
+                    v-model="filters.percentageMin"
+                    type="number"
+                    :label="t('media.userStorage.percentageMin')"
+                    variant="underlined"
+                    density="compact"
+                    prepend-inner-icon="mdi-percent-outline"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6" md="3">
+                <v-text-field
+                    v-model="filters.percentageMax"
+                    type="number"
+                    :label="t('media.userStorage.percentageMax')"
+                    variant="underlined"
+                    density="compact"
+                    prepend-inner-icon="mdi-percent-outline"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6" md="3">
+                <v-text-field
+                    v-model="filters.fileExpirationTimeMin"
+                    type="number"
+                    :label="t('media.userStorage.fileExpirationTimeMin')"
+                    variant="underlined"
+                    density="compact"
+                    prepend-inner-icon="mdi-clock-outline"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6" md="3">
+                <v-text-field
+                    v-model="filters.fileExpirationTimeMax"
+                    type="number"
+                    :label="t('media.userStorage.fileExpirationTimeMax')"
+                    variant="underlined"
+                    density="compact"
+                    prepend-inner-icon="mdi-clock-outline"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row dense>
+              <v-col cols="12" class="text-right">
+                <v-btn size="small" variant="text" color="secondary" @click="clearFilters">
+                  {{ t("common.clearFilters") }}
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+
+      <loading v-if="loadingPermissions"></loading>
+      <v-data-table
+          v-else
+          :headers="headers"
+          :items="filteredUsersList"
+          class="elevation-0"
+          density="compact"
+          hover
+          :items-per-page-options="[5, 10, 25, 50, 100]"
+          :items-per-page-text="t('common.itemsPerPageText')"
+      >
+        <template v-slot:top>
+          <v-toolbar
+              flat
+              color="transparent"
+          >
+            <v-toolbar-title>{{ t("media.userStorage.title2") }}</v-toolbar-title>
+            <v-spacer></v-spacer>
+            
+            <user-storage-update v-if="!!userToUpdate"
+                                 :open="!!userToUpdate"
+                                 :user-storage-form="userToUpdate"
+                                 @close="userToUpdate=null"
+                                 @role-updated="onRoleUpdated"
+            />
+
+          </v-toolbar>
+        </template>
+        <template v-slot:[`item.fileExpirationTime`]="{ item }">
+          {{ item.fileExpirationTime }} {{ t("media.userStorage.days") }}
+        </template>
+        <template v-slot:[`item.maxFileSize`]="{ item }">
+          {{ item.maxFileSize.toFixed(2) }} MB
+        </template>
+        <template v-slot:[`item.capacity`]="{ item }">
+          {{ item.usedSpace.toFixed(2) }}/{{ item.capacity }} MB
+        </template>
+        <template v-slot:[`item.usedSpace`]="{ item }">
+          {{ percentageUsedFormatted(item) }}
+        </template>
+        <template v-slot:[`item.filesPrivacy`]="{ item }">
+          {{ t('media.userStorage.privacy.' + item.filesPrivacy) }}
+        </template>
+        <template v-slot:[`item.actions`]="{ item }">
+          <v-btn
+              variant="outlined"
+              size="small"
+              color="secondary"
+              @click="editItem(item)"
+          >{{ t("media.userStorage.edit") }}
+          </v-btn>
+        </template>
+      </v-data-table>
+      <v-snackbar
+          v-model="snackbar"
+          :timeout="timeout"
+          :color="snackbarColor"
+      >
+        {{ t("media.userStorage.updated") }}
+
+        <template v-slot:actions>
+          <v-btn
+              color="white"
+              variant="text"
+              @click="snackbar = false"
+          >
+            X
+          </v-btn>
+        </template>
+      </v-snackbar>
+    </template>
+  </crud-layout>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {CrudLayout, Loading} from "@testdracul/common-frontend"
+import {UserAutocomplete} from "@testdracul/user-frontend"
+import UserStorageUpdate from './UserStorageUpdate/UserStorageUpdate.vue';
+import userStorageProvider from '../../providers/UserStorageProvider'
+
+const { t } = useI18n()
+
+const initialFilters = {
+  user: null,
+  visibility: null,
+  capacityMin: null,
+  capacityMax: null,
+  maxFileSizeMin: null,
+  maxFileSizeMax: null,
+  percentageMin: null,
+  percentageMax: null,
+  fileExpirationTimeMin: null,
+  fileExpirationTimeMax: null
+}
+
+const filters = ref({...initialFilters})
+
+const usersList = ref([])
+const loadingPermissions = ref(true)
+const userToUpdate = ref(null)
+// const flashMessage = ref(null)
+const snackbar = ref(false)
+const snackbarColor = ref("")
+const timeout = ref(3000)
+
+const visibilityOptions = computed(() => [
+  { title: t('media.userStorage.privacy.public'), value: 'public' },
+  { title: t('media.userStorage.privacy.private'), value: 'private' }
+])
+
+const headers = computed(() => [
+    {
+      title: t("media.userStorage.user"),
+      align: 'start',
+      sortable: false,
+      key: 'user.name',
+    },
+    { title: t("media.userStorage.fileExpirationTime"), key: 'fileExpirationTime', align: 'center' },
+    { title: t("media.userStorage.maxFileSize"), key: 'maxFileSize', align: 'center' },
+    { title: t("media.userStorage.capacity"), key: 'capacity', align: 'center' },
+    { title: t("media.userStorage.percentage"), key: 'usedSpace', align: 'center' },
+    { title: t("media.userStorage.filesPrivacy"), key: 'filesPrivacy', align: 'center' },
+    { title: t("media.userStorage.actions"), key: 'actions', sortable: false, align: 'center' },
+])
+
+const percentageUsed = (item) => {
+    return item.capacity > 0 ? parseFloat(item.usedSpace * 100 / item.capacity) : 0
+}
+
+const percentageUsedFormatted = (item) => {
+    return item.capacity > 0 ? percentageUsed(item).toFixed(2) + "%" : "-"
+}
+
+const filteredUsersList = computed(() => {
+  return usersList.value.filter(u => {
+    const percentage = percentageUsed(u)
+
+    const matchesUser = !filters.value.user || u.user.id === filters.value.user
+    const matchesVisibility = !filters.value.visibility || u.filesPrivacy === filters.value.visibility
+    const matchesCapacityMin = !filters.value.capacityMin || u.capacity >= parseFloat(filters.value.capacityMin)
+    const matchesCapacityMax = !filters.value.capacityMax || u.capacity <= parseFloat(filters.value.capacityMax)
+    const matchesMaxFileSizeMin = !filters.value.maxFileSizeMin || u.maxFileSize >= parseFloat(filters.value.maxFileSizeMin)
+    const matchesMaxFileSizeMax = !filters.value.maxFileSizeMax || u.maxFileSize <= parseFloat(filters.value.maxFileSizeMax)
+    const matchesPercentageMin = !filters.value.percentageMin || percentage >= parseFloat(filters.value.percentageMin)
+    const matchesPercentageMax = !filters.value.percentageMax || percentage <= parseFloat(filters.value.percentageMax)
+    const matchesFileExpirationMin = !filters.value.fileExpirationTimeMin || u.fileExpirationTime >= parseInt(filters.value.fileExpirationTimeMin)
+    const matchesFileExpirationMax = !filters.value.fileExpirationTimeMax || u.fileExpirationTime <= parseInt(filters.value.fileExpirationTimeMax)
+
+    return matchesUser && matchesVisibility && matchesCapacityMin && matchesCapacityMax &&
+        matchesMaxFileSizeMin && matchesMaxFileSizeMax &&
+        matchesPercentageMin && matchesPercentageMax &&
+        matchesFileExpirationMin && matchesFileExpirationMax
+  })
+})
+
+const clearFilters = () => {
+  filters.value = {...initialFilters}
+}
+
+const load = () => {
+    usersList.value = []
+    loadingPermissions.value = true
+    userStorageProvider.fetchUserStorage()
+        .then(r => {
+            usersList.value = r.data.userStorageFetch
+        })
+        .catch(err => console.error(err))
+        .finally(() => loadingPermissions.value = false)
+}
+
+const onRoleUpdated = () => {
+    load()
+    snackbarColor.value = "success"
+    snackbar.value = true
+}
+
+const editItem = (user) => {
+    userToUpdate.value = user
+}
+
+onBeforeMount(() => {
+    load()
+})
+</script>
+
+<style scoped>
+
+</style>