@testdracul/media-frontend 2.0.0

package/src/components/FileUploadExpiration/FileUploadExpiration.vue

@@ -0,0 +1,274 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" sm="6" md="6">
+        <date-time-input
+            v-model="expirationDate"
+            :label="$t('media.file.expirationDate')"
+            prepend-inner-icon="mdi-calendar-clock"
+            color="secondary"
+            hide-details
+            :rules="fileExpirationTimeRules"/>
+      </v-col>
+
+      <v-col cols="12" sm="6" md="6">
+        <v-select
+          prepend-inner-icon="mdi-eye"
+          v-model="isPublic"
+          :items="[{title: 'Público', value: true}, {title: 'Privado', value: false}]"
+          :label="$t('media.file.visibility')"
+        ></v-select>
+      </v-col>
+
+
+      <v-col cols="12" sm="12" md="12" >
+          <v-combobox
+              prepend-inner-icon="mdi-tag-multiple"
+              v-model="tags"
+              :label="$t('media.file.tags')"
+              multiple
+              chips
+              color="secondary"
+              item-color="secondary"
+          ></v-combobox>
+      </v-col>
+
+      <v-col cols="12" sm="12" md="12" >
+        <v-text-field
+            prepend-inner-icon="mdi-text-box"
+            name="filename"
+            v-model="description"
+            :label="$t('media.file.description')"
+            :placeholder="$t('media.file.description')"
+            color="secondary"
+        ></v-text-field>
+      </v-col>
+    </v-row>
+
+    <v-container class="mb-0 pb-0">
+      <input type="file"
+        style="display: none"
+        ref="fileInput"
+        :accept="accept"
+        @change="onFilePicked"
+        :disabled="disableUploadButton"
+      />
+
+      <v-menu
+          v-model="showErrorMessage"
+          :min-width="200"
+          :close-on-content-click="false"
+          :close-on-click="false"
+          offset-x
+      >
+        <template v-slot:activator="{ props }">
+          <v-btn @click="pickFile()"
+                fab
+                :color="getState.color"
+                :loading="loading"
+                :size="xLarge ? 'x-large' : undefined"
+                v-bind="props"
+          >
+            <v-avatar v-if="isImage">
+              <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>
+        </template>
+
+        <v-card :style="{width: '280px'}" elevation="0">
+          <v-card-text class="pb-0 pa-0">
+            <v-alert class="mb-0" border="start" type="error" variant="outlined">
+              {{ errorMessage }}
+            </v-alert>
+          </v-card-text>
+          <v-card-actions class="justify-center">
+            <v-btn text color="primary" @click="resetUpload" class="ml-2">OK</v-btn>
+          </v-card-actions>
+        </v-card>
+
+      </v-menu>
+
+      <p class="mb-0 mt-5">{{(file) == null ? $t('media.file.chooseFile') : file.name}}</p>
+    </v-container>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import uploadProvider from "../../providers/UploadProvider";
+import UserStorageProvider from "../../providers/UserStorageProvider"
+import { DateTimeInput } from '@testdracul/dayjs-frontend';
+import dayjs from 'dayjs'
+
+const { t } = useI18n()
+
+const props = defineProps({
+    autoSubmit: {type: Boolean, default: false},
+    accept: {type: String, default: '*'},
+    xLarge: {type: Boolean, default: false},
+})
+
+const emit = defineEmits(['filePicked', 'fileUploaded'])
+
+const INITIAL = 'initial'
+const SELECTED = 'selected'
+const UPLOADED = 'uploaded'
+const ERROR = 'error'
+
+const dialog = ref(false)
+const dialogTitle = ref(null)
+const title = 'media.file.creating'
+const errorMessage = ref(null)
+const showErrorMessage = ref(null)
+const inputErrors = ref({})
+const file = ref(null)
+const type = ref(null)
+const uploadedFile = ref(null)
+const state = ref(INITIAL)
+const maxFileSize = ref(0)
+const expirationDate = ref(null)
+const fileExpirationTime = ref(null)
+
+const disableUploadButton = ref(false)
+
+const loading = ref(false)
+const isPublic = ref(false)
+const description = ref(null)
+const tags = ref([])
+const fileInput = ref(null)
+
+const states = {
+    initial: { color: 'blue-grey', icon: 'mdi-cloud-upload' },
+    selected: { color: 'cyan-darken-3', icon: 'mdi-publish' },
+    loading: { color: 'amber-darken-3', icon: '' },
+    uploaded: { color: 'green-darken-3', icon: 'mdi-magnify-plus' },
+    error: { color: 'red-darken-3', icon: 'mdi-alert' },
+}
+
+const getState = computed(() => {
+    if (loading.value) return states.loading
+    return states[state.value]
+})
+
+const isImage = computed(() => !!(uploadedFile.value && uploadedFile.value.type === 'image'))
+const isAudio = computed(() => !!(uploadedFile.value && uploadedFile.value.type === 'audio'))
+const isVideo = computed(() => !!(uploadedFile.value && uploadedFile.value.type === 'video'))
+const getSrc = computed(() => (uploadedFile.value && uploadedFile.value.url) ? uploadedFile.value.url : null)
+
+const getDifferenceInDays = computed(() => {
+    if (expirationDate.value) {
+        const today = dayjs();
+        const expDate = dayjs(expirationDate.value);
+        if (!expDate.isValid()) return null;
+        return expDate.diff(today, 'day');
+    }
+    return null;
+})
+
+const fileExpirationTimeRules = computed(() => [
+    () => {
+        disableUploadButton.value = true;
+        if (getDifferenceInDays.value === null) {
+            disableUploadButton.value = false;
+            return true;
+        }
+        
+        if (getDifferenceInDays.value < 0) {
+            return t("media.userStorage.fileExpirationTimeOlderThanToday")
+        } else if (fileExpirationTime.value && (getDifferenceInDays.value >= fileExpirationTime.value)) {
+            return `${t("media.userStorage.fileExpirationLimitExceeded")} ${fileExpirationTime.value} ${t("media.file.days")}`
+        }
+        disableUploadButton.value = false;
+        return true
+    }
+])
+
+const pickFile = () => {
+    if (state.value === INITIAL) {
+        fileInput.value.click()
+    } else if (state.value === SELECTED) {
+        upload()
+    } else if (state.value === UPLOADED || state.value === ERROR) {
+        dialog.value = true
+    }
+}
+
+const onFilePicked = (e) => {
+    file.value = e.target.files[0]
+    state.value = SELECTED
+    const fileSize = e.target.files[0].size ? e.target.files[0].size / (1024 * 1024) : null;
+    emit('filePicked', fileSize);
+    if (props.autoSubmit) {
+        upload(fileSize)
+    }
+}
+
+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))
+}
+
+const upload = async (fileSize) => {
+    if (file.value && state.value !== UPLOADED && fileSize <= maxFileSize.value) {
+        loading.value = true;
+        
+        // Aseguramos que la fecha tenga una hora por defecto si no se seleccionó (ej. fin del día)
+        let finalExpiration = expirationDate.value;
+        if (finalExpiration) {
+            const d = dayjs(finalExpiration);
+            if (d.hour() === 0 && d.minute() === 0) {
+                finalExpiration = d.hour(23).minute(59).toISOString();
+            }
+        }
+
+        await uploadProvider.uploadFile(file.value, finalExpiration, isPublic.value, description.value, tags.value).then(result => {
+            uploadedFile.value = result.data.fileUpload;
+            setState(UPLOADED);
+        }).catch((err) => {
+            console.error("ERROR", err)
+            setState(ERROR);
+            setErrorMessage(err.message);
+            showErrorMessage.value = true;
+        }).finally(() => loading.value = false);
+        emit('fileUploaded', uploadedFile.value);
+        return uploadedFile.value;
+    } else {
+        setErrorFileExceeded();
+    }
+}
+
+const resetUpload = () => {
+    showErrorMessage.value = false;
+    setState(INITIAL);
+}
+
+const setErrorFileExceeded = () => {
+    setState(ERROR);
+    setErrorMessage(`${t("media.file.fileSizeExceeded")} ${maxFileSize.value} Mb`);
+    showErrorMessage.value = true;
+}
+
+const setState = (newState) => {
+    state.value = newState;
+}
+
+const setErrorMessage = (msg) => {
+    errorMessage.value = msg;
+}
+
+onMounted(() => {
+    findUserStorage();
+})
+</script>
+
+<style scoped>
+
+</style>

package/src/components/FileUploadExpiration/index.ts

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

package/src/components/FileUploadExpress/FileUploadExpress.vue

@@ -0,0 +1,208 @@
+<template>
+  <div>
+
+    <input type="file"
+           style="display: none"
+           ref="fileInput"
+           :accept="accept"
+           @change="onFilePicked"
+    />
+
+    <v-menu
+        v-model="showErrorMessage"
+        :min-width="200"
+        :close-on-content-click="false"
+        :close-on-click="false"
+        offset-x
+    >
+      <template v-slot:activator="{ props }">
+        <v-btn @click="pickFile()"
+               fab
+               :color="getState.color"
+               :loading="loading"
+               :size="xLarge ? 'x-large' : undefined"
+               v-bind="props"
+        >
+          <v-avatar v-if="isImage">
+            <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>
+      </template>
+
+      <v-card :style="{width: '280px'}" elevation="0">
+        <v-card-text class="pb-0 pa-0">
+          <v-alert class="mb-0" border="start" type="error" variant="outlined">
+            {{ errorMessage }}
+          </v-alert>
+        </v-card-text>
+        <v-card-actions class="justify-center">
+          <v-btn text color="primary" @click="resetUpload" class="ml-2">OK</v-btn>
+        </v-card-actions>
+      </v-card>
+
+    </v-menu>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import uploadProvider from "../../providers/UploadProvider";
+import UserStorageProvider from "../../providers/UserStorageProvider"
+
+const { t } = useI18n()
+
+const props = defineProps({
+    autoSubmit: {type: Boolean, default: false},
+    accept: {type: String, default: '*'},
+    xLarge: {type: Boolean, default: false},
+})
+
+const emit = defineEmits(['fileUploaded'])
+
+const INITIAL = 'initial'
+const SELECTED = 'selected'
+const UPLOADED = 'uploaded'
+const ERROR = 'error'
+
+const dialog = ref(false)
+const dialogTitle = ref(null)
+const title = 'media.file.creating'
+const showErrorMessage = ref(false)
+const errorMessage = ref('')
+const inputErrors = ref({})
+const file = ref(null)
+const type = ref(null)
+const uploadedFile = ref(null)
+const state = ref(INITIAL)
+const maxFileSize = ref(0)
+const loading = ref(false)
+const fileInput = ref(null)
+
+const states = {
+    initial: {
+        color: 'blue-grey',
+        icon: 'mdi-cloud-upload'
+    },
+    selected: {
+        color: 'cyan-darken-3',
+        icon: 'mdi-publish'
+    },
+    loading: {
+        color: 'amber-darken-3',
+        icon: ''
+    },
+    uploaded: {
+        color: 'green-darken-3',
+        icon: 'mdi-check'
+    },
+    error: {
+        color: 'red-darken-3',
+        icon: 'mdi-alert'
+    }
+}
+
+const getState = computed(() => {
+    if (loading.value) return states.loading
+    return states[state.value]
+})
+
+const isImage = computed(() => {
+    return (uploadedFile.value && uploadedFile.value.type === 'image') ? true : false
+})
+
+const isAudio = computed(() => {
+    return (uploadedFile.value && uploadedFile.value.type === 'audio') ? true : false
+})
+
+const isVideo = computed(() => {
+    return (uploadedFile.value && uploadedFile.value.type === 'video') ? true : false
+})
+
+const getSrc = computed(() => {
+    if (uploadedFile.value && uploadedFile.value.url) {
+        return uploadedFile.value.url
+    }
+    return null
+})
+
+const pickFile = () => {
+    if (state.value === INITIAL) {
+        fileInput.value.click()
+    } else if (state.value === SELECTED) {
+        upload()
+    } else if (state.value === UPLOADED || state.value === ERROR) {
+        dialog.value = true
+    }
+}
+
+const onFilePicked = (e) => {
+    file.value = e.target.files[0]
+    state.value = SELECTED
+    const fileSize = e.target.files[0].size ? e.target.files[0].size / (1024 * 1024) : null;
+    if (props.autoSubmit) {
+        upload(fileSize)
+    }
+}
+
+const findUserStorage = () => {
+    return UserStorageProvider.findUserStorageByUser().then((res) => {
+        if (res.data.userStorageFindByUser && res.data.userStorageFindByUser.maxFileSize) {
+            maxFileSize.value = res.data.userStorageFindByUser.maxFileSize;
+        }
+    }).catch(
+        err => console.error(err)
+    )
+}
+
+const upload = (fileSize) => {
+    if (file.value && state.value != UPLOADED && fileSize <= maxFileSize.value) {
+        loading.value = true
+        uploadProvider.uploadFile(file.value)
+            .then(result => {
+                setState(UPLOADED);
+                uploadedFile.value = result.data.fileUpload
+                emit('fileUploaded', result.data.fileUpload)
+            })
+            .catch(err => {
+                console.log("ERROR", err)
+                setState(ERROR);
+                setErrorMessage(err.message)
+                showErrorMessage.value = true
+            })
+            .finally(() => loading.value = false)
+    } else {
+        setErrorFileExceeded()
+    }
+}
+
+const resetUpload = () => {
+    showErrorMessage.value = false;
+    setState(INITIAL);
+}
+
+const setErrorFileExceeded = () => {
+    setState(ERROR);
+    setErrorMessage(`${t("media.file.fileSizeExceeded")} ${maxFileSize.value} Mb`);
+    showErrorMessage.value = true;
+}
+
+const setState = (newState) => {
+    state.value = newState;
+}
+
+const setErrorMessage = (msg) => {
+    errorMessage.value = msg;
+}
+
+onMounted(() => {
+    findUserStorage();
+})
+</script>
+
+<style scoped>
+
+</style>

package/src/components/FileUploadExpress/index.ts

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