ntspi-app/resources/js/Pages/Dashboard/Components/ContentBuilder/blocks/FilesBlock.vue

<template>
  <div class="space-y-3">
    <div class="space-y-2">
      <div
        v-for="(file, index) in modelValue.file"
        :key="index"
        class="flex items-center gap-3 p-3 border border-layer-line rounded-lg"
      >
        <div class="flex-1 grid grid-cols-2 gap-2">
          <input
            :value="file.title"
            @input="updateFile(index, 'title', $event.target.value)"
            type="text"
            placeholder="Название файла"
            class="px-3 py-2 border border-layer-line rounded-lg bg-white text-foreground text-sm"
          />
          <div class="text-xs text-muted-foreground-1 flex items-center">
            <span>{{ file.expansion?.toUpperCase() || '—' }}</span>
            <span class="mx-1">•</span>
            <span>{{ file.size || '—' }}</span>
          </div>
        </div>
        <button
          type="button"
          @click="removeFile(index)"
          class="p-1.5 text-muted-foreground-1 hover:text-danger hover:bg-danger/10 rounded transition-all"
          title="Удалить"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Upload Progress -->
    <div v-if="uploading" class="flex items-center gap-2 p-3 bg-primary/5 border border-primary/20 rounded-lg">
      <svg class="animate-spin h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
      </svg>
      <span class="text-sm text-primary">Загрузка файлов...</span>
    </div>

    <input
      type="file"
      @change="handleFilesUpload"
      :disabled="uploading"
      accept=".pdf,.docx,.xlsx,.pptx,.zip"
      multiple
      class="w-full px-3 py-2 border border-layer-line rounded-lg bg-white text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
    />
    <p class="text-xs text-muted-foreground-1">
      PDF, DOCX, XLSX, PPTX, ZIP. Макс. 512MB
    </p>

    <button
      type="button"
      @click="addFile"
      class="text-sm text-primary hover:text-primary-hover transition-colors"
    >
      + Добавить файл
    </button>
  </div>
</template>

<script>
export default {
  name: 'FilesBlock',
  props: {
    modelValue: { type: Object, required: true }
  },
  emits: ['update:modelValue', 'update'],
  data() {
    return {
      uploading: false
    };
  },
  methods: {
    update(field, value) {
      this.$emit('update:modelValue', { ...this.modelValue, [field]: value });
      this.$emit('update');
    },
    updateFile(index, field, value) {
      const files = [...this.modelValue.file];
      files[index] = { ...files[index], [field]: value };
      this.update('file', files);
    },
    addFile() {
      this.update('file', [...this.modelValue.file, { title: '', path: '', expansion: '', size: '', time_added: Math.floor(Date.now() / 1000) }]);
    },
    removeFile(index) {
      this.update('file', this.modelValue.file.filter((_, i) => i !== index));
    },
    async handleFilesUpload(event) {
      const files = Array.from(event.target.files);
      if (files.length === 0) return;

      // Reset input to allow selecting same files again
      event.target.value = '';

      await this.uploadFilesToServer(files);
    },
    async uploadFilesToServer(files) {
      if (files.length === 0) return;

      this.uploading = true;

      try {
        const formData = new FormData();
        files.forEach(file => {
          formData.append('files[]', file);
        });

        const response = await fetch(route('dashboard.pages.upload-files'), {
          method: 'POST',
          headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
            'Accept': 'application/json',
          },
          body: formData,
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();

        if (result.success && result.files) {
          const newFiles = result.files.map(file => ({
            title: file.title,
            path: file.path,
            expansion: file.expansion,
            size: file.size,
            time_added: Math.floor(Date.now() / 1000)
          }));

          this.update('file', [...this.modelValue.file, ...newFiles]);
        } else {
          console.error('File upload failed:', result.error);
        }
      } catch (error) {
        console.error('File upload error:', error);
      } finally {
        this.uploading = false;
      }
    }
  }
}
</script>