@testdracul/media-frontend 2.0.0 → 2.0.3

package/src/mixins/readableBytesMixin.ts

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

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

@@ -1,108 +0,0 @@
-<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

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

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

@@ -1,133 +0,0 @@
-<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

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

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

@@ -1,61 +0,0 @@
-<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

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

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

@@ -1,150 +0,0 @@
-<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

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

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

@@ -1,184 +0,0 @@
-<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>