@testdracul/media-frontend 2.0.0

package/src/mixins/readableBytesMixin.ts

@@ -0,0 +1,9 @@
+import redeableBytes from '../helpers/redeableBytes'
+
+export default {
+    computed: {
+        redeableBytes(){
+            return (bytes) => redeableBytes(bytes)
+        }
+    }
+}

package/src/pages/FileManagementPage/FileCreate/FileCreate.vue

@@ -0,0 +1,108 @@
+<template>
+
+  <crud-show v-if="uploadedFile"  :open="open" :title="title" @close="$emit('close')">
+    <file-view v-if="uploadedFile" :file="uploadedFile"/>
+  </crud-show>
+
+  <crud-create
+      v-else
+      :open="open"
+      :loading="loading"
+      :title="title"
+      :error-message="errorMessage"
+      @close="$emit('close')"
+      @create="onCreate"
+      :fullscreen="false"
+  >
+
+    <div class="text-center">
+
+      <file-form
+          v-model="form"
+          :input-errors="inputErrors"
+          ref="formRef"
+          @fileSelected="onFileSelected"
+          @save="onCreate"
+          creating
+      />
+
+    </div>
+
+  </crud-create>
+
+
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {CrudCreate, CrudShow, ClientError} from "@testdracul/common-frontend";
+import FileView from "../../../components/FileView/FileView";
+import FileForm from "../FileForm";
+import uploadProvider from "../../../providers/UploadProvider";
+
+const props = defineProps({
+    open: {type: Boolean, default: true},
+})
+
+const emit = defineEmits(['close', 'itemCreated'])
+
+const { t } = useI18n()
+
+const title = ref('media.file.creating')
+const errorMessage = ref('')
+const inputErrors = ref({})
+const loading = ref(false)
+const form = ref({
+    file: null,
+    expirationDate: null,
+    isPublic: false,
+    description: '',
+    tags: [],
+    groups: [],
+    users: []
+})
+const uploadedFile = ref(null)
+const formRef = ref(null)
+
+const onFileSelected = (file) => {
+    form.value.file = file
+}
+
+const onCreate = async () => {
+    if (form.value.file) {
+        loading.value = true;
+        errorMessage.value = '';
+
+        await uploadProvider.uploadFile(
+            form.value.file,
+            form.value.expirationDate,
+            form.value.isPublic,
+            form.value.description,
+            form.value.tags,
+            form.value.groups,
+            form.value.users)
+            .then(result => {
+                uploadedFile.value = result.data.fileUpload
+                emit('itemCreated')
+            })
+            .catch((error) => {
+                const expirationDateError = error.message.includes('Expiration date must be older than current date') ? true : false;
+                if(expirationDateError) {
+                    errorMessage.value = t("media.file.wrongExpirationDate")
+                } else {
+                    let clientError = new ClientError(error)
+                    inputErrors.value = clientError.inputErrors
+                    errorMessage.value = clientError.i18nMessage
+                }
+            })
+            .finally(() => loading.value = false)
+    } else {
+        errorMessage.value = t("media.file.noFile")
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

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

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

package/src/pages/FileManagementPage/FileCrud/FileCrud.vue

@@ -0,0 +1,133 @@
+<template>
+  <crud-layout
+    :title="title"
+    :subtitle="subtitle"
+    :add-button="topAddButton && hasPermission('FILE_CREATE')"
+    @add="create"
+    >
+
+    <template v-slot:list>
+      <file-list
+        ref="listRef"
+        @update="update"
+        @delete="remove"
+        @show="show"
+        @item-updated="onItemUpdated"
+      />
+    </template>
+
+    <add-button
+        v-if="!topAddButton && hasPermission('FILE_CREATE')"
+        @click="create"
+    />
+
+    <file-create v-if="creating"
+      :open="creating"
+      @item-created="onItemCreated"
+      @close="creating=false"
+    />
+
+    <file-update v-if="updating"
+      :open="updating"
+      :item="itemToEdit"
+      @item-updated="onItemUpdated"
+      @close="updating=false"
+    />
+
+    <file-show v-if="showing"
+      :open="showing"
+      :item="itemToShow"
+      @close="showing=false"
+    />
+
+    <file-delete v-if="deleting"
+      :open="deleting"
+      :item="itemToDelete"
+      @item-deleted="onItemDeleted"
+      @close="deleting=false"
+    />
+
+    <snackbar v-model="flash"/>
+
+  </crud-layout>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+import FileUpdate from "../FileUpdate";
+import FileDelete from "../FileDelete";
+import FileShow from "../FileShow";
+import FileList from "../FileList";
+
+import {CrudLayout, AddButton, Snackbar} from "@testdracul/common-frontend"
+import FileCreate from "../FileCreate/FileCreate";
+
+const props = defineProps({
+    topAddButton: Boolean
+})
+
+const emit = defineEmits([])
+
+const { t } = useI18n()
+const store = useStore()
+
+const title = ref('media.file.title')
+const subtitle = ref('media.file.subtitle')
+const flash = ref(null)
+const creating = ref(false)
+const updating = ref(false)
+const deleting = ref(false)
+const showing = ref(false)
+const itemToEdit = ref(null)
+const itemToDelete = ref(null)
+const itemToShow = ref(null)
+const timeoutSnackbar = ref(10000)
+const listRef = ref(null)
+
+const hasPermission = (permission) => store.getters.hasPermission(permission)
+const getRole = computed(() => store.getters.getRole)
+
+onBeforeMount(() => {
+    if(getRole.value === "visualizer"){
+        subtitle.value = 'media.file.visualizerSubtitle'
+    }
+})
+
+const onItemCreated = () => {
+    listRef.value?.fetch()
+    flash.value = t("common.created")
+}
+
+const onItemUpdated = () => {
+    listRef.value?.fetch()
+    flash.value = t("common.updated")
+}
+
+const onItemDeleted = () => {
+    listRef.value?.fetch()
+    flash.value = t("common.deleted")
+}
+
+const create = () => {
+    creating.value = true
+}
+
+const update = (item) => {
+    updating.value = true
+    itemToEdit.value = item
+}
+
+const show = (item) => {
+    showing.value = true
+    itemToShow.value = item
+}
+
+const remove = (item) => {
+    deleting.value = true
+    itemToDelete.value = item
+}
+</script>
+
+

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

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

package/src/pages/FileManagementPage/FileDelete/FileDelete.vue

@@ -0,0 +1,61 @@
+<template>
+      <crud-delete :open="open"
+                 :loading="loading"
+                 :title="title"
+                 :error-message="errorMessage"
+                 @delete="remove"
+                 @close="$emit('close')"
+    >
+
+        <v-card-text>
+          <file-show-data :item="item" />
+        </v-card-text>
+
+        <v-card-text>
+            <v-row justify="center">
+                <span class="title">{{areYouSure}}</span>
+            </v-row>
+        </v-card-text>
+
+    </crud-delete>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import FileProvider from "../../../providers/FileProvider";
+import FileShowData from "../FileShow/FileShowData";
+import {CrudDelete, ClientError} from '@testdracul/common-frontend'
+
+const props = defineProps({
+  open: {type: Boolean, default: true},
+  item: {type: Object, required: true}
+})
+
+const emit = defineEmits(['close', 'itemDeleted'])
+
+const { t } = useI18n()
+
+const modal = ref(false)
+const title = ref('media.file.deleting')
+const areYouSure = ref(t('common.areYouSureDeleteRecord'))
+const errorMessage = ref('')
+const loading = ref(false)
+
+const remove = () => {
+    loading.value = true
+    FileProvider.deleteFile(props.item.id).then(result => {
+                if (result.data.fileDelete.success) {
+                    emit('itemDeleted', result.data.fileDelete)
+                    emit('close')
+                } else {
+                    errorMessage.value = 'Error on Delete'
+                }
+            }).catch(error => {
+                let clientError = new ClientError(error)
+                errorMessage.value = clientError.showMessage
+    }).finally(() => loading.value = false)
+}
+</script>
+
+

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

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

package/src/pages/FileManagementPage/FileFilters/FileFilters.vue

@@ -0,0 +1,150 @@
+<template>
+  <filter-layout :title="'media.file.filters'" @clear="cleanFilters()" @apply="setFilters()" apply-button>
+    <v-col cols="12" sm="6" md="4">
+      <date-input
+          v-if="filters[0].field == 'dateFrom'"
+          v-model="filters[0].value"
+          :label="$t('media.file.from')"
+          prepend-inner-icon="mdi-calendar"
+          color="secondary"
+          hide-details
+          variant="underlined"
+          dense
+      />
+    </v-col>
+    <v-col cols="12" sm="6" md="4">
+      <date-input
+          v-model="filters[1].value"
+          :label="$t('media.file.until')"
+          prepend-inner-icon="mdi-calendar"
+          color="secondary"
+          hide-details
+          variant="underlined"
+          dense
+      />
+    </v-col>
+    <v-col cols="12" md="4" sm="6">
+      <v-text-field
+          v-model="filters[2].value"
+          :label="$t('media.file.filename')"
+          prepend-inner-icon="mdi-text"
+          color="secondary"
+          hide-details
+          variant="underlined"
+          density="compact"
+      />
+    </v-col>
+    <v-col cols="12" sm="6" md="3">
+      <v-select
+          v-model="filters[4].value"
+          :label="$t('media.file.type')"
+          :items="selectType"
+          prepend-inner-icon="mdi-file"
+          color="secondary"
+          variant="underlined"
+          density="compact"
+          hide-details
+      />
+    </v-col>
+    <v-col v-if="isUserAuthorized('FILE_SHOW_OWN')" cols="12" sm="6" md="3">
+      <v-select
+          prepend-inner-icon="mdi-eye"
+          v-model="filters[7].value"
+          :items="[{title: 'Público', value: 'true'}, {title: 'Privado', value: 'false'}]"
+          :label="$t('media.file.visibility')"
+          variant="underlined"
+          density="compact"
+          hide-details
+      ></v-select>
+    </v-col>
+    <v-col cols="12" sm="6" md="3">
+      <v-text-field
+          v-model="filters[5].value"
+          :label="$t('media.file.sizeGt') + ' (MB)'"
+          prepend-inner-icon="mdi-arrow-up-bold-circle-outline"
+          color="secondary"
+          variant="underlined"
+          density="compact"
+          hide-details
+      />
+    </v-col>
+    <v-col cols="12" sm="6" md="3">
+      <v-text-field
+          v-model="filters[6].value"
+          :label="$t('media.file.sizeLt') + ' (MB)'"
+          prepend-inner-icon="mdi-arrow-down-bold-circle-outline"
+          color="secondary"
+          variant="underlined"
+          density="compact"
+          hide-details
+      />
+    </v-col>
+    <v-col v-if="isUserAuthorized('FILE_SHOW_ALL')" cols="12" md="4" sm="6">
+      <user-autocomplete
+          v-model="filters[3].value"
+          label="media.file.createdBy"
+      >
+      </user-autocomplete>
+    </v-col>
+    <v-col v-if="isUserAuthorized('FILE_SHOW_ALL')" cols="12" md="4" sm="6">
+      <group-autocomplete
+          v-model="filters[8].value"
+          label="media.file.group"
+      >
+      </group-autocomplete>
+    </v-col>
+    <v-col v-if="isUserAuthorized('FILE_SHOW_ALL')" cols="12" md="4" sm="6">
+      <user-autocomplete
+          v-model="filters[9].value"
+          label="media.file.user"
+      >
+      </user-autocomplete>
+    </v-col>
+  </filter-layout>
+</template>
+
+<script setup>
+import {computed} from 'vue'
+import {useStore} from 'vuex'
+import {DateInput} from '@testdracul/dayjs-frontend';
+import {GroupAutocomplete, UserAutocomplete} from '@testdracul/user-frontend'
+import {FilterLayout} from '@testdracul/common-frontend'
+
+const props = defineProps({
+  modelValue: Array
+})
+
+const emit = defineEmits(['updateFilters', 'clearFilter', 'update:modelValue'])
+
+const store = useStore()
+
+const filters = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  }
+})
+
+const me = computed(() => store.getters.me)
+
+const selectType = [
+  {title: "text", value: "text"},
+  {title: "image", value: "image"},
+  {title: "application", value: "application"},
+  {title: "audio", value: "audio"}
+]
+
+const setFilters = () => {
+  emit("updateFilters", filters.value);
+}
+
+const cleanFilters = () => {
+  emit("clearFilter", filters.value);
+}
+
+const isUserAuthorized = (permission) => {
+  return store.getters.hasPermission(permission)
+}
+</script>

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

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

package/src/pages/FileManagementPage/FileForm/FileForm.vue

@@ -0,0 +1,184 @@
+<template>
+  <v-form ref="formRef" autocomplete="off" @submit.prevent="$emit('save')">
+    <v-row class="mt-2">
+
+      <v-col cols="12" md="6" sm="12">
+        <v-card variant="outlined" color="secondary" class="pa-2">
+          <date-time-input
+              v-model="form.expirationDate"
+              :label="$t('media.file.expirationDate')"
+              prepend-inner-icon="mdi-calendar-clock"
+              persistent-hint
+              color="secondary"
+              variant="filled"
+              density="comfortable"
+              :rules="fileExpirationTimeRules"
+          />
+          <div class="text-caption mt-1 px-2 text-grey-darken-1">
+            La fecha y hora en que el archivo será eliminado automáticamente.
+          </div>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6" sm="12">
+        <v-select
+            prepend-inner-icon="mdi-eye"
+            v-model="form.isPublic"
+            :items="[{title: 'Público', value: true}, {title: 'Privado', value: false}]"
+            :label="$t('media.file.visibility')"
+            variant="underlined"
+            density="compact"
+        ></v-select>
+      </v-col>
+
+
+      <v-col cols="12" sm="12" md="12">
+        <v-combobox
+            prepend-inner-icon="mdi-tag-multiple"
+            v-model="form.tags"
+            :label="$t('media.file.tags')"
+            chips
+            multiple
+            color="secondary"
+            variant="underlined"
+            density="compact"
+        ></v-combobox>
+      </v-col>
+
+      <v-col cols="12" sm="12">
+        <v-text-field
+            prepend-inner-icon="mdi-text-box"
+            name="filename"
+            v-model="form.description"
+            :label="$t('media.file.description')"
+            :placeholder="$t('media.file.description')"
+            color="secondary"
+            variant="underlined"
+            density="compact"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="12">
+        <group-autocomplete
+            v-model="form.groups"
+            multiple
+            label="media.file.groups"
+        ></group-autocomplete>
+      </v-col>
+
+      <v-col cols="12">
+        <user-autocomplete
+            v-model="form.users"
+            multiple
+            label="media.file.users"
+        ></user-autocomplete>
+      </v-col>
+
+      <v-col v-if="creating || updating" cols="12" align-self="center" class="text-center mt-4">
+        <v-divider class="mb-4"></v-divider>
+        <file-upload-button
+            :updating="updating"
+            @file-selected="onFileSelected"
+            :max-file-size="maxFileSize"
+            :loading="loading"
+            :old-file-extension="oldFileExtension"
+        ></file-upload-button>
+      </v-col>
+    </v-row>
+  </v-form>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { DateTimeInput } from '@testdracul/dayjs-frontend';
+import UserStorageProvider from "../../../providers/UserStorageProvider"
+import FileUploadButton from "../../../components/FileUploadButton";
+import { GroupAutocomplete, UserAutocomplete } from '@testdracul/user-frontend'
+import dayjs from 'dayjs'
+
+const props = defineProps({
+  modelValue: {type: Object, required: true},
+  creating: {type: Boolean, default: false},
+  updating: {type: Boolean, default: false},
+  loading: {type: Boolean, default: false},
+  oldFileExtension: {type: String},
+})
+
+const emit = defineEmits(['update:modelValue', 'fileSelected', 'save'])
+
+const { t } = useI18n()
+
+const maxFileSize = ref(null)
+const fileExpirationTime = ref(null)
+const formRef = ref(null)
+
+const form = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  }
+})
+
+// Lógica de validación robusta para el error de RangeError
+const differenceInDays = computed(() => {
+  if(form.value.expirationDate){
+    const today = dayjs();
+    const expirationDate = dayjs(form.value.expirationDate);
+    if (!expirationDate.isValid()) return null;
+    return expirationDate.diff(today, 'day');
+  }
+  return null
+})
+
+const fileExpirationTimeRules = computed(() => [
+  () => {
+    if (differenceInDays.value === null) return true;
+
+    if (differenceInDays.value < 0) {
+      return t("media.userStorage.fileExpirationTimeOlderThanToday")
+    } else if (fileExpirationTime.value && (differenceInDays.value !== null)) {
+      return (differenceInDays.value <= fileExpirationTime.value)
+          || `${t("media.userStorage.fileExpirationLimitExceeded")} ${fileExpirationTime.value} ${t("media.file.days")}`
+    } else {
+      return true
+    }
+  }
+])
+
+const validate = async () => {
+  if (formRef.value) {
+    const { valid } = await formRef.value.validate()
+    return valid
+  }
+  return false
+}
+
+const onFileSelected = (file) => {
+  emit('fileSelected', file)
+}
+
+const findUserStorage = () => {
+  return UserStorageProvider.findUserStorageByUser().then((res) => {
+    if (res.data.userStorageFindByUser && res.data.userStorageFindByUser.maxFileSize) {
+      maxFileSize.value = res.data.userStorageFindByUser.maxFileSize;
+      fileExpirationTime.value = res.data.userStorageFindByUser.fileExpirationTime;
+    }
+  }).catch(err => console.error(err))
+}
+
+onMounted(() => {
+  findUserStorage()
+})
+
+defineExpose({ validate })
+</script>
+
+<style scoped>
+/* Espaciado refinado para el formulario */
+.v-row {
+  margin-left: -8px;
+  margin-right: -8px;
+}
+</style>