@testdracul/media-frontend 2.0.0

package/src/pages/UserStoragePage/UserStorageForm/UserStorageForm.vue

@@ -0,0 +1,172 @@
+<template>
+  <v-container>
+    <v-form ref="formRef" autocomplete="off" @submit.prevent="$emit('save')">
+      <v-row>
+        <v-col cols="12">
+          <span class="text-h5">{{ t('media.userStorage.cliente') }}: {{ form.name }}</span>
+        </v-col>
+        
+        <v-col cols="12" md="6">
+          <v-text-field
+              v-model="form.capacity"
+              type='number'
+              :label="t('media.userStorage.capacity')"
+              variant="underlined"
+              density="compact"
+              suffix="MB"
+              :rules="storageRules"
+              required
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12" md="6" class="d-flex align-center">
+          <span class="text-subtitle-1">{{ t('media.userStorage.usedPercentage') }} {{ percentageUsed(form) }}</span>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-text-field
+              v-model="form.maxFileSize"
+              type='number'
+              :label="t('media.userStorage.maxFileSize')"
+              variant="underlined"
+              density="compact"
+              suffix="MB"
+              :rules="maxFileSizeRules"
+              required
+              :hint="'Max '+fileSizeLimit+' Mb'"
+              persistent-hint
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12" md="6" class="d-flex align-center">
+          <span class="text-subtitle-1">{{ t('media.userStorage.fileSizeLimit') }}</span>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-text-field
+              v-model="form.fileExpirationTime"
+              type='number'
+              :label="t('media.userStorage.fileExpirationTime')"
+              variant="underlined"
+              density="compact"
+              :suffix="t('media.userStorage.days')"
+              :rules="fileExpirationTimeRules"
+              required
+              :hint="'Max '+fileExpirationLimit"
+              persistent-hint
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12" md="6" class="d-flex align-center">
+          <span class="text-subtitle-1">{{ t('media.userStorage.fileExpirationLimit') }}</span>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-select
+              v-model="form.filesPrivacy"
+              :items="privacyOptions"
+              item-title="title"
+              item-value="value"
+              :label="t('media.userStorage.filesPrivacy')"
+              variant="underlined"
+              density="compact"
+              required
+          ></v-select>
+        </v-col>
+        <v-col cols="12" md="6" class="d-flex align-center">
+          <span class="text-subtitle-1">{{ t('media.userStorage.filesPrivacyLabel') }}</span>
+        </v-col>
+
+        <v-col cols="12" md="6">
+            <v-switch color="success" :label="form.deleteByLastAccess ? t('media.userStorage.active') : t('media.userStorage.inactive')"
+                      v-model="form.deleteByLastAccess" hide-details inset density="compact"></v-switch>
+        </v-col>
+        <v-col cols="12" md="6" class="d-flex align-center">
+          <span class="text-subtitle-1">{{ t('media.userStorage.deleteByLastAccess') }}</span>
+        </v-col>
+
+        <v-col cols="12" md="6">
+            <v-switch color="success" :label="form.deleteByCreatedAt ? t('media.userStorage.active') : t('media.userStorage.inactive')"
+                      v-model="form.deleteByCreatedAt" hide-details inset density="compact"></v-switch>
+        </v-col>
+        <v-col cols="12" md="6" class="d-flex align-center">
+          <span class="text-subtitle-1">{{ t('media.userStorage.deleteByDateCreated') }}</span>
+        </v-col>
+      </v-row>
+    </v-form>
+  </v-container>
+</template>
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+    modelValue: { type: Object, required: true },
+    inputErrors: Object,
+    fileSizeLimit: Number,
+    fileExpirationLimit: Number
+})
+
+const emit = defineEmits(['update:modelValue', 'save'])
+
+const formRef = ref(null)
+
+const form = computed({
+    get() { return props.modelValue },
+    set(val) { emit('update:modelValue', val) }
+})
+
+// const error = computed({
+//     get() { return props.inputErrors },
+//     set(val) { emit('update:modelValue', val) }
+// })
+
+const privacyOptions = computed(() => [
+    { title: t('media.userStorage.privacy.public'), value: 'public' },
+    { title: t('media.userStorage.privacy.private'), value: 'private' },
+])
+
+const percentageUsed = (formData) => {
+    return formData.capacity > 0 ? parseFloat(formData.usedSpace * 100 / formData.capacity).toFixed(2) + "%" : "-"
+}
+
+const storageRules = computed(() => [
+    (v) =>
+        parseFloat(v) >= form.value.usedSpace || t("media.userStorage.insufficientCapacity"),
+])
+
+const maxFileSizeRules = computed(() => [
+    (v) => {
+        if (props.fileSizeLimit != 0) {
+            return parseFloat(v) <= props.fileSizeLimit && parseFloat(v) > 0 || t("media.userStorage.sizeLimitExceeded");
+        } else {
+            return true
+        }
+    }
+])
+
+const fileExpirationTimeRules = computed(() => [
+    (v) => {
+        if (props.fileExpirationLimit != 0) {
+            return parseInt(v) <= props.fileExpirationLimit && parseFloat(v) > 0 || t("media.userStorage.fileExpirationTimeExceeded")
+        } else {
+            return true
+        }
+    }
+])
+
+watch(() => form.value.deleteByCreatedAt, (newVal, oldVal) => {
+    if (oldVal == false && newVal == true && form.value.deleteByLastAccess) {
+        form.value.deleteByLastAccess = false
+    } else if (oldVal == true && newVal == false && form.value.deleteByLastAccess == false) {
+        form.value.deleteByLastAccess = true
+    }
+})
+
+watch(() => form.value.deleteByLastAccess, (newVal, oldVal) => {
+    if (oldVal == false && newVal == true && form.value.deleteByCreatedAt) {
+        form.value.deleteByCreatedAt = false
+    } else if (oldVal == true && newVal == false && form.value.deleteByCreatedAt == false) {
+        form.value.deleteByCreatedAt = true
+    }
+})
+</script>

package/src/pages/UserStoragePage/UserStorageUpdate/UserStorageUpdate.vue

@@ -0,0 +1,91 @@
+<template>
+  <crud-update :open="open"
+               :loading="loading"
+               :title="title"
+               :error-message="errorMessage"
+               @update="save"
+               @close="$emit('close')"
+  >
+    <v-alert v-if="formError" type="error">{{ formError }}</v-alert>
+    <user-storage-form ref="formRef" v-model="form"
+                       :file-size-limit="fileSizeLimitComputed"
+                       :file-expiration-limit="fileExpirationLimit"
+                       :input-errors="inputErrors"
+                       @save="save">
+
+    </user-storage-form>
+  </crud-update>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {CrudUpdate} from '@testdracul/common-frontend'
+import UserStorageForm from '../UserStorageForm/UserStorageForm.vue';
+import UserStorageProvider from '../../../providers/UserStorageProvider'
+
+const props = defineProps({
+    userStorageForm: Object,
+    open: {type: Boolean, default: true}
+})
+
+const emit = defineEmits(['close', 'roleUpdated'])
+
+const { t } = useI18n()
+
+const title = ref(t("media.userStorage.editTitle"))
+const errorMessage = ref("")
+const inputErrors = ref({})
+const loading = ref(false)
+const formError = ref(null)
+const form = ref({
+    id: props.userStorageForm.id,
+    name: props.userStorageForm.user.name,
+    capacity: props.userStorageForm.capacity,
+    usedSpace: props.userStorageForm.usedSpace,
+    maxFileSize: props.userStorageForm.maxFileSize,
+    fileExpirationTime: props.userStorageForm.fileExpirationTime,
+    deleteByLastAccess: props.userStorageForm.deleteByLastAccess,
+    deleteByCreatedAt: props.userStorageForm.deleteByCreatedAt,
+    filesPrivacy: props.userStorageForm.filesPrivacy,
+})
+const fileSizeLimit = ref(0)
+const fileExpirationLimit = ref(0)
+const formRef = ref(null)
+
+const fileSizeLimitComputed = computed(() => fileSizeLimit.value)
+
+const save = () => {
+    formError.value = null
+    if (isFormValid()) {
+        UserStorageProvider.updateUserStorage(form.value).then(
+            emit("roleUpdated"),
+            emit("close")
+        ).catch(err => console.error(err))
+    } else {
+        formError.value = "Valores Invalidos"
+        console.warn("Valores Invalidos")
+    }
+}
+
+const fetchMediaVariables = () => {
+    return UserStorageProvider.fetchMediaVariables().then((res) => {
+        fileSizeLimit.value = res.data.fetchMediaVariables.maxFileSize;
+        fileExpirationLimit.value = res.data.fetchMediaVariables.fileExpirationTime;
+    }).catch(err => console.error(err))
+}
+
+const isFormValid = () => {
+    form.value.capacity = parseFloat(form.value.capacity)
+    form.value.maxFileSize = parseFloat(form.value.maxFileSize)
+    form.value.fileExpirationTime = parseInt(form.value.fileExpirationTime)
+
+    return form.value.capacity >= 0 && form.value.maxFileSize > 0 && form.value.fileExpirationTime > 0 &&
+        form.value.capacity > form.value.usedSpace && fileSizeLimit.value >= form.value.maxFileSize &&
+        fileExpirationLimit.value >= form.value.fileExpirationTime;
+}
+
+onBeforeMount(() => {
+    fetchMediaVariables()
+})
+</script>

package/src/pages/UserStoragePage/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-container fluid>
+    <user-storage-crud></user-storage-crud>
+  </v-container>
+</template>
+
+<script setup>
+import UserStorageCrud from "./UserStorage.vue";
+</script>
+
+<style scoped>
+
+</style>
+

package/src/providers/FileMetricsProvider.ts

@@ -0,0 +1,47 @@
+import fileGlobalMetricsGql from './gql/fileGlobalMetrics.graphql'
+import fileUserMetricsGql from './gql/fileUserMetrics.graphql'
+import almacenamientoPorUsuarioGql from './gql/almacenamientoPorUsuario.graphql'
+import cantidadArchivosPorUsuarioGql from './gql/cantidadArchivosPorUsuario.graphql'
+
+class FileMetricsProvider {
+
+    constructor() {
+        this.gqlc = null
+    }
+
+    setGqlc(gqlc) {
+        this.gqlc = gqlc
+    }
+
+    fileGlobalMetrics() {
+        return this.gqlc.query({
+            query: fileGlobalMetricsGql,
+            fetchPolicy: 'network-only'
+        })
+    }
+
+    fileUserMetrics() {
+        return this.gqlc.query({
+            query: fileUserMetricsGql,
+            fetchPolicy: 'network-only'
+        })
+    }
+
+    almacenamientoPorUsuario() {
+        return this.gqlc.query({
+            query: almacenamientoPorUsuarioGql,
+            fetchPolicy: 'network-only'
+        })
+    }
+
+    cantidadArchivosPorUsuario() {
+        return this.gqlc.query({
+            query: cantidadArchivosPorUsuarioGql,
+            fetchPolicy: 'network-only'
+        })
+    }
+}
+
+const fileMetricsProvider = new FileMetricsProvider()
+
+export default fileMetricsProvider

package/src/providers/FileProvider.ts

@@ -0,0 +1,60 @@
+import fileFindGql from './gql/fileFind.graphql'
+import fileFetchGql from './gql/fileFetch.graphql'
+import filePaginateGql from './gql/filePaginate.graphql'
+import fileUpdateGql from './gql/fileUpdate.graphql'
+import fileDeleteGql from './gql/fileDelete.graphql'
+
+class FileProvider {
+    private gqlc: any;
+
+    constructor() {
+        this.gqlc = null
+    }
+
+    setGqlc(gqlc: any) {
+        this.gqlc = gqlc
+    }
+
+    findFile(id: string) {
+        return this.gqlc.query({
+            query: fileFindGql,
+            variables: { id: id }
+        })
+    }
+
+    fetchFiles() {
+        return this.gqlc.query({ query: fileFetchGql })
+    }
+
+    paginateFiles(pageNumber: number, itemsPerPage: number, search: string | null = null, filters: any = null, orderBy: string | null = null, orderDesc: boolean = false) {
+        return this.gqlc.query({
+            query: filePaginateGql,
+            variables: {
+                input: {
+                    pageNumber, itemsPerPage, search, filters, orderBy, orderDesc
+                }
+            },
+            fetchPolicy: "network-only"
+        })
+    }
+
+
+    updateFile(input: any, file: any) {
+        return this.gqlc.mutate({
+            mutation: fileUpdateGql,
+            variables: { input, file }
+        })
+    }
+
+    deleteFile(id: string) {
+        return this.gqlc.mutate({
+            mutation: fileDeleteGql,
+            variables: { id }
+        })
+    }
+
+}
+
+const fileProvider = new FileProvider()
+
+export default fileProvider

package/src/providers/UploadProvider.ts

@@ -0,0 +1,32 @@
+import fileUploadGql from './gql/fileUpload.graphql'
+import fileUploadAnonymousGql from './gql/fileUploadAnonymous.graphql'
+
+class UploadProvider {
+
+
+    constructor() {
+        this.gqlc = null
+    }
+
+    setGqlc(gqlc) {
+        this.gqlc = gqlc
+    }
+
+    uploadFile(file, expirationDate, isPublic, description, tags, groups, users) {
+        return this.gqlc.mutate({
+            mutation: fileUploadGql,
+            variables: { file: file, expirationDate: expirationDate, isPublic: isPublic, description: description, tags: tags, groups: groups, users: users }
+        })
+    }
+
+    uploadFileAnonymous(file) {
+        return this.gqlc.mutate({
+            mutation: fileUploadAnonymousGql,
+            variables: { file: file }
+        })
+    }
+}
+
+const uploadProvider = new UploadProvider()
+
+export default uploadProvider

package/src/providers/UserStorageProvider.ts

@@ -0,0 +1,47 @@
+import fetchMediaVariablesGql from './gql/fetchMediaVariables.graphql'
+import userStorageFetchGql from './gql/userStorageFetch.graphql'
+import userStorageFindByUserGql from './gql/userStorageFindByUser.graphql'
+import userStorageUpdateGql from './gql/userStorageUpdate.graphql'
+
+class UserStorageProvider {
+
+    constructor() {
+        this.gqlc = null
+    }
+
+    setGqlc(gqlc) {
+        this.gqlc = gqlc
+    }
+
+
+    fetchMediaVariables() {
+        return this.gqlc.query({
+            query: fetchMediaVariablesGql,
+            fetchPolicy: "network-only"
+        })
+    }
+
+    fetchUserStorage() {
+        return this.gqlc.query({
+            query: userStorageFetchGql,
+            fetchPolicy: "network-only"
+        })
+    }
+
+    findUserStorageByUser() {
+        return this.gqlc.query({
+            query: userStorageFindByUserGql,
+            fetchPolicy: "network-only"
+        })
+    }
+
+    updateUserStorage(form) {
+        return this.gqlc.mutate({
+            mutation: userStorageUpdateGql,
+            variables: form,
+            fetchPolicy: "no-cache"
+        })
+    }
+}
+
+export default new UserStorageProvider()

package/src/providers/gql/almacenamientoPorUsuario.graphql

@@ -0,0 +1,10 @@
+query almacenamientoPorUsuario{
+    almacenamientoPorUsuario{
+        labels
+        dataset{
+            label
+            data
+            backgroundColor
+        }
+    }
+}

package/src/providers/gql/cantidadArchivosPorUsuario.graphql

@@ -0,0 +1,10 @@
+query cantidadArchivosPorUsuario{
+    cantidadArchivosPorUsuario{
+        labels
+        dataset{
+            label
+            data
+            backgroundColor
+        }
+    }
+}

package/src/providers/gql/fetchMediaVariables.graphql

@@ -0,0 +1,6 @@
+query fetchMediaVariables {
+    fetchMediaVariables {
+        maxFileSize
+        fileExpirationTime
+    }
+}

package/src/providers/gql/fileCreate.graphql

@@ -0,0 +1,27 @@
+mutation fileCreate($filename:String!, $extension:String!, $relativePath:String!, $absolutePath:String!, $size:String!, $url:String!, $isPublic:Boolean!){
+    fileCreate(input: {filename: $filename, extension: $extension, relativePath: $relativePath, absolutePath: $absolutePath, size: $size, url: $url, isPublic: $isPublic }){
+        id
+        filename
+        mimetype
+        type
+        extension
+        relativePath
+        absolutePath
+        size
+        url
+        createdAt
+        createdBy{
+            user {
+                id
+                username
+            }
+            username
+        }
+        lastAccess
+        expirationDate
+        isPublic
+        hits
+        groups
+        users
+    }
+}

package/src/providers/gql/fileDelete.graphql

@@ -0,0 +1,7 @@
+mutation fileDelete($id: ID!){
+    fileDelete(id: $id){
+        id
+        success
+    }
+}
+

package/src/providers/gql/fileFetch.graphql

@@ -0,0 +1,29 @@
+query fileFetch{
+    fileFetch{
+        id
+        filename
+        description
+        tags
+        mimetype
+        type
+        extension
+        relativePath
+        absolutePath
+        size
+        url
+        createdAt
+        createdBy{
+            user {
+                id
+                username
+            }
+            username
+        }
+        lastAccess
+        expirationDate
+        isPublic
+        hits
+        groups
+        users
+    }
+}

package/src/providers/gql/fileFind.graphql

@@ -0,0 +1,29 @@
+query fileFind($id:ID!){
+    fileFind(id:$id){
+        id
+        filename
+        description
+        tags
+        mimetype
+        type
+        extension
+        relativePath
+        absolutePath
+        size
+        url
+        createdAt
+        createdBy{
+            user {
+                id
+                username
+            }
+            username
+        }
+        lastAccess
+        expirationDate
+        isPublic
+        hits
+        groups
+        users
+    }
+}

package/src/providers/gql/fileGlobalMetrics.graphql

@@ -0,0 +1,6 @@
+query fileGlobalMetrics{
+    fileGlobalMetrics{
+        count
+        weight
+    }
+}

package/src/providers/gql/filePaginate.graphql

@@ -0,0 +1,38 @@
+query filePaginate($input: FilterPaginateInput){
+    filePaginate(input: $input){
+        totalItems
+        page
+        items{
+            id
+            filename
+            description
+            tags
+            mimetype
+            type
+            extension
+            relativePath
+            absolutePath
+            size
+            url
+            createdAt
+            createdBy{
+                user {
+                    id
+                    username
+                }
+                username
+            }
+            lastAccess
+            expirationDate
+            isPublic
+            hits
+            groups
+            users
+            fileReplaces {
+                user
+                date
+                username
+            }
+        }
+    }
+}

package/src/providers/gql/fileUpdate.graphql

@@ -0,0 +1,29 @@
+mutation fileUpdate($input: FileUpdateInput!, $file: Upload){
+    fileUpdate(input: $input, file: $file){
+        id
+        filename
+        description
+        tags
+        mimetype
+        type
+        extension
+        relativePath
+        absolutePath
+        size
+        url
+        createdAt
+        createdBy{
+            user {
+                id
+                username
+            }
+            username
+        }
+        lastAccess
+        expirationDate
+        isPublic
+        hits
+        groups
+        users
+    }
+}