@testdracul/media-frontend 2.0.0

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

@@ -0,0 +1,66 @@
+<template>
+    <v-col cols="12" sm="6">
+        <v-select
+                prepend-inner-icon="mdi-account-circle"
+                :items="items"
+                :item-title="'name'"
+                :item-value="'id'"
+                v-model="item"
+                :label="$t('media.file.createdBy')"
+                :loading="loading"
+                :error="hasInputErrors('createdBy')"
+                :error-messages="getInputErrors('createdBy')"
+                color="secondary"
+                item-color="secondary"
+                
+        ></v-select>
+    </v-col>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import {InputErrorsByProps, RequiredRule} from '@testdracul/common-frontend'
+import UserProvider from "../../../providers/UserProvider"
+
+const props = defineProps({
+    modelValue: { type: String }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const items = ref([])
+const loading = ref(false)
+const formRef = ref(null)
+
+const item = computed({
+    get() { return props.modelValue },
+    set(val) { emit('update:modelValue', val) }
+})
+
+const validate = async () => {
+    if (formRef.value) {
+        const { valid } = await formRef.value.validate()
+        return valid
+    }
+    return false
+}
+
+defineExpose({ validate })
+
+const fetch = () => {
+    loading.value = true
+    UserProvider.fetchUsers().then(r => {
+        items.value = r.data.userFetch
+    }).catch(err => console.error(err))
+    .finally(() => loading.value = false)
+}
+
+onMounted(() => {
+    fetch()
+})
+</script>
+
+<style scoped>
+
+</style>
+

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

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

package/src/pages/FileManagementPage/FileList/FileEditButton.vue

@@ -0,0 +1,410 @@
+<template>
+  <v-tooltip location="bottom">
+    <template v-slot:activator="{ props }">
+      <v-btn
+          icon="mdi-note-edit"
+          size="x-small"
+          color="primary"
+          variant="text"
+          class="mx-1"
+          v-bind="props"
+          @click="dialog = true"
+      />
+    </template>
+    <span>Editar archivo</span>
+  </v-tooltip>
+
+  <v-dialog v-model="dialog" max-width="80vw" persistent>
+    <v-card style="max-height: 80vh; display: flex; flex-direction: column">
+      <v-toolbar color="primary" theme="dark">
+        <v-toolbar-title class="mt-3">
+          Editar archivo
+          <div class="text-subtitle-2 mt-n2 pa-0 text-white-50">{{ file.filename }}</div>
+        </v-toolbar-title>
+      </v-toolbar>
+
+      <v-card-text class="flex-grow-1 overflow-y-auto pa-4" style="min-height: 0">
+        <div class="d-flex mb-2 justify-end">
+
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-btn
+                  size="small"
+                  icon="mdi-content-copy"
+                  variant="text"
+                  v-bind="props"
+                  @click="copyToClipboard"
+                  :disabled="!noteContent"
+              />
+            </template>
+            <span>Copiar</span>
+          </v-tooltip>
+
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-btn
+                  size="small"
+                  icon="mdi-backspace-outline"
+                  variant="text"
+                  class="ml-2"
+                  v-bind="props"
+                  @click="clearContent"
+                  :disabled="!noteContent"
+              />
+            </template>
+            <span>Limpiar</span>
+          </v-tooltip>
+
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-btn
+                  size="small"
+                  icon="mdi-undo"
+                  variant="text"
+                  class="ml-2"
+                  v-bind="props"
+                  @click="undoAction"
+                  :disabled="undoStack.length === 0"
+              />
+            </template>
+            <span>Deshacer</span>
+          </v-tooltip>
+
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-btn
+                  size="small"
+                  icon="mdi-redo"
+                  variant="text"
+                  class="ml-2"
+                  v-bind="props"
+                  @click="redoAction"
+                  :disabled="redoStack.length === 0"
+              />
+            </template>
+            <span>Rehacer</span>
+          </v-tooltip>
+
+          <v-spacer />
+
+          <v-tooltip location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-btn
+                  size="small"
+                  :icon="isFormatted ? 'mdi-format-letter-case' : 'mdi-format-align-left'"
+                  variant="text"
+                  v-bind="props"
+                  @click="toggleFormat"
+                  :disabled="!isJson"
+              />
+            </template>
+            <span>{{ isFormatted ? 'Minificar JSON' : 'Formatear JSON' }}</span>
+          </v-tooltip>
+        </div>
+
+        <div
+            ref="editor"
+            class="dracul-json-editor"
+            :class="{ 'json-editor-error': hasErrors }"
+            contenteditable="true"
+            spellcheck="false"
+            autocorrect="off"
+            autocomplete="off"
+            autocapitalize="off"
+            @input="onEdit"
+            @blur="onBlur"
+            style="background: #2e2e2e !important; color: #ccc !important; white-space: pre-wrap !important; word-break: break-all !important; font-family: 'Fira Code', 'Consolas', monospace !important; outline: none !important; min-height: 300px !important; padding: 12px !important; border-radius: 4px !important; font-size: 14px !important; line-height: 1.5 !important; border: 1px solid #444 !important;"
+        ></div>
+
+        <div v-if="hasErrors" class="error-message">
+          {{ errorMessages[0] }}
+        </div>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="dialog = false" :disabled="loading">
+          {{ t('common.cancel') }}
+        </v-btn>
+        <v-btn :disabled="hasErrors || loading" color="primary" variant="flat" @click="saveNote" :loading="loading">
+          {{ t('common.update') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+import FileProvider from "../../../providers/FileProvider"
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+
+// Props y Emits
+const props = defineProps({
+  file: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['file-updated', 'itemUpdated'])
+
+// Plugins
+const store = useStore()
+const { t } = useI18n()
+
+// Estado Reactivo
+const dialog = ref(false)
+const noteContent = ref('')
+const originalContent = ref('')
+const isFormatted = ref(false)
+const loading = ref(false)
+const errorMessages = ref([])
+const undoStack = ref([])
+const redoStack = ref([])
+
+// Referencia al div contenteditable
+const editor = ref(null)
+
+// Computados
+const hasErrors = computed(() => errorMessages.value.length > 0)
+const isJson = computed(() => {
+  if (!props.file?.extension) return false
+  const ext = props.file.extension.toLowerCase()
+  return (ext === '.json' || ext === 'json') && noteContent.value.trim() !== ''
+})
+
+// === MÉTODO MODIFICADO (Respetando tu nueva lógica) ===
+const loadFileText = async (retries = 3) => {
+  try {
+    const authToken = store.state.user.access_token
+    if (!props.file.url) throw new Error("File URL is missing")
+
+    const cacheBuster = `t=${Date.now()}`
+    const finalUrl = props.file.url.includes('?')
+        ? `${props.file.url}&${cacheBuster}`
+        : `${props.file.url}?${cacheBuster}`
+
+    const requestOptions = {
+      method: 'GET',
+      headers: {}
+    }
+
+    if (authToken) {
+      requestOptions.headers['Authorization'] = `Bearer ${authToken}`
+    }
+
+    let response = await fetch(finalUrl, requestOptions)
+
+    if (!response.ok && authToken) {
+      delete requestOptions.headers['Authorization']
+      response = await fetch(finalUrl, requestOptions)
+    }
+
+    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`)
+
+    noteContent.value = await response.text()
+    originalContent.value = noteContent.value
+    isFormatted.value = false
+    undoStack.value = []
+    redoStack.value = []
+
+    validateJson()
+    await nextTick()
+    setTimeout(() => renderEditor(), 150)
+  } catch (error) {
+    console.error(`Load attempt failed (${retries} retries left):`, error)
+    if (retries > 0) {
+      // Esperamos 1 segundo y reintentamos (el server puede estar reiniciandose)
+      setTimeout(() => loadFileText(retries - 1), 1000)
+    } else {
+      noteContent.value = ''
+      errorMessages.value = [`Error cargando el contenido: ${error.message}. Intenta de nuevo en unos segundos.`]
+    }
+  }
+}
+
+const validateJson = () => {
+  errorMessages.value = []
+  if (isJson.value) {
+    try {
+      JSON.parse(noteContent.value)
+    } catch {
+      errorMessages.value = ['Formato JSON inválido']
+    }
+  }
+}
+
+const toggleFormat = () => {
+  if (!isJson.value) return
+  try {
+    const obj = JSON.parse(noteContent.value)
+    pushUndo()
+    if (!isFormatted.value) {
+      noteContent.value = JSON.stringify(obj, null, 2)
+      isFormatted.value = true
+    } else {
+      noteContent.value = JSON.stringify(obj)
+      isFormatted.value = false
+    }
+    validateJson()
+    renderEditor()
+  } catch (e) {
+    console.error("Format error:", e)
+    errorMessages.value = ['No se pudo formatear: JSON inválido']
+  }
+}
+
+const onEdit = () => {
+  if (editor.value) {
+    const newContent = editor.value.innerText
+    if (newContent !== noteContent.value) {
+      // Guardamos el estado anterior para poder deshacer
+      undoStack.value.push(noteContent.value)
+      redoStack.value = []
+
+      noteContent.value = newContent
+      isFormatted.value = false
+      validateJson()
+    }
+  }
+}
+
+const onBlur = () => {
+  renderEditor()
+}
+
+const pushUndo = () => {
+  undoStack.value.push(noteContent.value)
+  redoStack.value = []
+}
+
+const undoAction = () => {
+  if (!undoStack.value.length) return
+  redoStack.value.push(noteContent.value)
+  noteContent.value = undoStack.value.pop()
+  validateJson()
+  renderEditor()
+}
+
+const redoAction = () => {
+  if (!redoStack.value.length) return
+  undoStack.value.push(noteContent.value)
+  noteContent.value = redoStack.value.pop()
+  validateJson()
+  renderEditor()
+}
+
+const copyToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(noteContent.value)
+  } catch (err) {
+    console.error('Fallo al copiar: ', err)
+  }
+}
+
+const clearContent = () => {
+  pushUndo()
+  noteContent.value = ''
+  validateJson()
+  renderEditor()
+}
+
+const renderEditor = () => {
+  if (!editor.value) return
+  const text = noteContent.value || ''
+
+  let html = text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+
+  if (isJson.value) {
+    html = html
+        .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"\s*?)(?=:)/g, '<span class="json-key" style="color: #c5a5c5 !important; font-weight: bold !important;">$1</span>')
+        .replace(/(:\s*)("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*")/g, '$1<span class="json-string" style="color: #8dc891 !important;">$2</span>')
+        .replace(/\b(true|false|null)\b/g, '<span class="json-boolean" style="color: #f99157 !important; font-weight: bold !important;">$1</span>')
+        .replace(/\b(-?\d+\.?\d*)\b(?![^<]*>)/g, '<span class="json-number" style="color: #f99157 !important;">$1</span>')
+  }
+
+  editor.value.innerHTML = html
+}
+
+const saveNote = async () => {
+  if (hasErrors.value) return
+  loading.value = true
+  errorMessages.value = []
+
+  try {
+    const mimeType = props.file.extension?.toLowerCase() === '.json' ? 'application/json' : 'text/plain'
+    const blob = new Blob([noteContent.value], { type: mimeType })
+    const filename = props.file.filename || 'file.txt'
+    const newFile = new File([blob], filename, { type: mimeType, lastModified: Date.now() })
+
+    const input = {
+      id: props.file.id,
+      description: props.file.description || '',
+      tags: props.file.tags || [],
+      expirationDate: props.file.expirationDate || null,
+      isPublic: props.file.isPublic || false,
+      groups: props.file.groups || [],
+      users: props.file.users || []
+    }
+
+    const result = await FileProvider.updateFile(input, newFile)
+
+    // Verificamos si hay errores de GraphQL en la respuesta
+    if (result?.errors && result.errors.length > 0) {
+      throw new Error(result.errors[0].message || 'Error en la respuesta del servidor')
+    }
+
+    if (result?.data?.fileUpdate) {
+      dialog.value = false
+      emit('file-updated', result.data.fileUpdate)
+
+      // Añadimos un pequeño delay antes de refrescar la lista para dar tiempo al backend
+      setTimeout(() => {
+        emit('itemUpdated')
+      }, 800)
+    } else {
+      throw new Error('La respuesta del servidor no fue exitosa')
+    }
+  } catch (error) {
+    console.error('Error guardando archivo:', error)
+    const msg = error.message.includes('fetch') ? 'Error de conexión con el servidor (posible reinicio)' : error.message
+    errorMessages.value = [msg]
+  } finally {
+    loading.value = false
+  }
+}
+
+// Watchers
+watch(dialog, async (open) => {
+  if (open) {
+    errorMessages.value = []
+    await loadFileText()
+  }
+})
+</script>
+
+<style>
+/* Estilos globales para asegurar que funcionen con innerHTML */
+.dracul-json-editor .json-key { color: #c5a5c5 !important; font-weight: bold !important; }
+.dracul-json-editor .json-string { color: #8dc891 !important; }
+.dracul-json-editor .json-number { color: #f99157 !important; }
+.dracul-json-editor .json-boolean { color: #f99157 !important; font-weight: bold !important; }
+
+.dracul-json-editor.json-editor-error {
+  border: 1px solid #ff5252 !important;
+}
+
+.error-message {
+  color: #ff5252 !important;
+  font-size: 0.875rem !important;
+  margin-top: 4px !important;
+  font-weight: bold !important;
+}
+</style>

package/src/pages/FileManagementPage/FileList/FileList.vue

@@ -0,0 +1,178 @@
+<template>
+  <v-row row wrap>
+
+    <file-filters
+        @updateFilters="setFilters"
+        @clearFilter="clearFilters"
+        v-model="filters"
+    />
+
+    <v-col cols="12">
+
+      <v-data-table-server
+          class="mt-3"
+          :headers="headers"
+          :items="items"
+          :search="search"
+          :items-length="totalItems"
+          :loading="loading"
+          v-model:page="pageNumber"
+          v-model:items-per-page="itemsPerPage"
+          v-model:sort-by="sortBy"
+          :items-per-page-options="[5, 10, 25, 50, 100]"
+          :items-per-page-text="t('common.itemsPerPageText')"
+          @update:options="fetch"
+          density="compact"
+          hover
+      >
+
+        <template v-slot:[`item.isPublic`]="{ item }">
+          <div v-if="item.isPublic">
+            <v-icon color="success">mdi-check-circle</v-icon>
+          </div>
+          <div v-else>
+            <v-icon color="error">mdi-close-circle</v-icon>
+          </div>
+        </template>
+
+        <template v-slot:no-data>
+          <div class="text-center">{{ t('common.noData') }}</div>
+        </template>
+
+        <template v-slot:[`item.size`]="{item}">
+          {{ item.size.toFixed(2) }} Mb
+        </template>
+
+        <template v-slot:[`item.type`]="{item}">
+          {{ t(`media.file.${item.type}`) }}
+        </template>
+
+        <template v-slot:[`item.createdAt`]="{item}">
+          {{ getDateTimeFormat(item.createdAt, true) }}
+        </template>
+
+        <template v-slot:[`item.lastAccess`]="{item}">
+          {{ getDateTimeFormat(item.lastAccess, true) }}
+        </template>
+
+        <template v-slot:[`item.action`]="{ item }">
+          <show-button @click="$emit('show', item)"/>
+
+          <edit-button
+            v-if="hasPermission('FILE_UPDATE_ALL') ||
+            (hasPermission('FILE_UPDATE_OWN') && item.createdBy.user?.id === me?.id)"
+            @click="$emit('update', item)"
+          />
+
+          <file-edit-button v-if="editTextButtonMustBeRender(item.extension) && (hasPermission('FILE_UPDATE_ALL') || (hasPermission('FILE_UPDATE_OWN') && item.createdBy.user?.id === me?.id))"
+            :file="item"
+            @itemUpdated="$emit('itemUpdated')"
+          />
+
+          <delete-button
+              v-if="hasPermission('FILE_DELETE_ALL') ||
+              (hasPermission('FILE_DELETE_OWN') && item.createdBy.user?.id === me?.id)"
+              @click="$emit('delete', item)"
+          />
+        </template>
+
+      </v-data-table-server>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+import {DeleteButton, EditButton, ShowButton} from "@testdracul/common-frontend"
+import {useDayjs} from "@testdracul/dayjs-frontend"
+import FileEditButton from "./FileEditButton.vue"
+
+// import redeableBytesMixin from "../../../mixins/readableBytesMixin";
+import FileProvider from "../../../providers/FileProvider";
+import FileFilters from "../FileFilters/FileFilters"
+
+const emit = defineEmits(['update', 'delete', 'show', 'itemUpdated'])
+
+const { t } = useI18n()
+const store = useStore()
+const { getDateTimeFormat } = useDayjs()
+
+const items = ref([])
+const totalItems = ref(0)
+const loading = ref(false)
+const sortBy = ref([])
+const itemsPerPage = ref(5)
+const pageNumber = ref(1)
+const search = ref('')
+const filters = ref([
+    { field: 'dateFrom', operator: '$gte', value: null },
+    { field: 'dateTo', operator: '$lte', value: null },
+    { field: 'filename', operator: '$regex', value: null },
+    { field: 'createdBy.user', operator: '$eq', value: null },
+    { field: 'type', operator: '$regex', value: null },
+    { field: 'minSize', operator: '$gte', value: null },
+    { field: 'maxSize', operator: '$lte', value: null },
+    { field: 'isPublic', operator: '$eq', value: null },
+    { field: 'groups', operator: '$eq', value: null },
+    { field: 'users', operator: '$eq', value: null }
+])
+
+const hasPermission = (permission) => store.getters.hasPermission(permission)
+const me = computed(() => store.getters.me)
+
+const headers = computed(() => [
+    { title: t('media.file.filename'), key: 'filename' },
+    { title: t('media.file.type'), key: 'type' },
+    { title: t('media.file.size'), key: 'size' },
+    { title: t('media.file.createdAt'), key: 'createdAt' },
+    { title: t('media.file.lastAccess'), key: 'lastAccess' },
+    { title: t('media.file.createdBy'), key: 'createdBy.username' },
+    { title: t('media.file.isPublic'), key: 'isPublic' },
+    { title: t('media.file.hits'), key: 'hits' },
+    { title: t('common.actions'), key: 'action', sortable: false },
+])
+
+const getOrderBy = computed(() => sortBy.value.length > 0 ? sortBy.value[0].key : null)
+const getOrderDesc = computed(() => sortBy.value.length > 0 ? sortBy.value[0].order === 'desc' : false)
+
+const fetch = () => {
+    loading.value = true
+    FileProvider.paginateFiles(
+        pageNumber.value,
+        itemsPerPage.value,
+        search.value,
+        filters.value,
+        getOrderBy.value,
+        getOrderDesc.value
+    ).then(r => {
+        items.value = r.data.filePaginate.items
+        totalItems.value = r.data.filePaginate.totalItems
+    }).catch(err => {
+        console.error(err)
+    }).finally(() => loading.value = false)
+}
+
+const setFilters = (fileFilters) => {
+    filters.value = fileFilters
+    fetch()
+}
+
+const clearFilters = () => {
+    filters.value.forEach(filter => {
+        filter.value = null
+    })
+    fetch()
+}
+
+const editTextButtonMustBeRender = (itemExtension) => {
+    return itemExtension === '.json' || itemExtension === '.md' || itemExtension === '.txt'
+}
+
+onBeforeMount(() => {
+    fetch()
+})
+
+defineExpose({ fetch })
+</script>

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

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

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

@@ -0,0 +1,23 @@
+<template>
+    <crud-show :title="title" :open="open"  @close="$emit('close')">
+        <v-card-text>
+            <file-view :file="item" />
+        </v-card-text>
+    </crud-show>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {CrudShow} from '@testdracul/common-frontend'
+import FileView from "../../../components/FileView/FileView";
+
+defineProps({
+    open: {type: Boolean, default: true},
+    item: {type: Object, required: true}
+})
+
+defineEmits(['close'])
+
+const title = ref('media.file.showing')
+</script>
+