vgapp 0.7.9 → 0.8.0

package/app/modules/vgfiles/js/loader.js

@@ -0,0 +1,389 @@
+import Ajax from "../../../utils/js/components/ajax";
+import { normalizeData } from "../../../utils/js/functions";
+
+class FileUploader {
+	constructor(options = {}) {
+		// Настройки
+		this.mode = options.mode || 'sequential';
+		this.maxParallel = options.maxParallel || 3;
+		this.maxConcurrent = options.maxConcurrent || 1; // для sequential
+		this.retryAttempts = options.retryAttempts || 3;
+		this.retryDelay = options.retryDelay || 1000;
+
+		// Состояние загрузок
+		this.uploads = new Map(); // id → uploadData
+		this.completed = [];
+		this.queue = []; // очередь для sequential
+		this.waitingPromises = []; // для parallel: промисы, ожидающие слот
+
+		// Состояние
+		this.activeCount = 0;
+		this.isPaused = false;
+
+		// Коллбэки
+		this.callbacks = {
+			progress: [],
+			complete: [],
+			error: [],
+			allComplete: []
+		};
+
+		this._checkAllCompleteBound = this.checkAllComplete.bind(this);
+	}
+
+	// === ОСНОВНЫЕ МЕТОДЫ ===
+
+	/**
+	 * Загрузка одного файла
+	 */
+	async uploadFile(file, url, options = {}) {
+		const id = this.generateId();
+		const uploadData = {
+			id,
+			file,
+			url,
+			options,
+			status: 'pending',
+			progress: 0,
+			attempts: 0,
+			result: null,
+			error: null,
+			startTime: null,
+			endTime: null,
+			controller: new AbortController(), // для отмены
+			signal: null // будет установлен при старте
+		};
+
+		this.uploads.set(id, uploadData);
+
+		if (this.mode === 'sequential') {
+			return this._addToSequentialQueue(uploadData);
+		} else {
+			return this._startParallelUpload(uploadData);
+		}
+	}
+
+	/**
+	 * Массовая загрузка файлов
+	 */
+	async uploadFiles(files, url, options = {}) {
+		const promises = files.map(file => this.uploadFile(file, url, options));
+		const results = await Promise.allSettled(promises);
+
+		return results.map(result => {
+			if (result.status === 'fulfilled') {
+				return { file: result.value.file?.name, success: true, result: result.value };
+			} else {
+				return { file: result.reason?.file?.name || 'unknown', success: false, error: result.reason };
+			}
+		});
+	}
+
+	// === РЕЖИМЫ ЗАГРУЗКИ ===
+
+	_addToSequentialQueue(uploadData) {
+		return new Promise((resolve, reject) => {
+			this.queue.push({ uploadData, resolve, reject });
+			this._processSequentialQueue();
+		});
+	}
+
+	async _processSequentialQueue() {
+		if (
+			this.isPaused ||
+			this.activeCount >= this.maxConcurrent ||
+			this.queue.length === 0
+		) {
+			return;
+		}
+
+		const { uploadData, resolve, reject } = this.queue[0]; // не удаляем, пока не начнём
+		this.activeCount++;
+
+		try {
+			const result = await this._executeUpload(uploadData);
+			resolve(result);
+		} catch (error) {
+			reject(error);
+		} finally {
+			this.queue.shift(); // удаляем только после завершения
+			this.activeCount--;
+			await this._processSequentialQueue();
+		}
+	}
+
+	async _startParallelUpload(uploadData) {
+		// Ждём свободный слот
+		if (this.activeCount >= this.maxParallel) {
+			await new Promise(resolve => this.waitingPromises.push(resolve));
+		}
+
+		this.activeCount++;
+		uploadData.startTime = Date.now();
+
+		try {
+			return await this._executeUpload(uploadData);
+		} finally {
+			this.activeCount--;
+			this._notifyWaiting(); // освободили слот
+		}
+	}
+
+	_notifyWaiting() {
+		if (this.waitingPromises.length > 0 && this.activeCount < this.maxParallel) {
+			const resolve = this.waitingPromises.shift();
+			resolve();
+		}
+	}
+
+	// === ВЫПОЛНЕНИЕ ЗАГРУЗКИ ===
+
+	async _executeUpload(uploadData, attempt = 1) {
+		uploadData.status = 'uploading';
+		uploadData.attempts = attempt;
+		uploadData.signal = uploadData.controller.signal;
+
+		try {
+			const result = await this._performUpload(uploadData);
+			this._completeUpload(uploadData, result);
+			return result;
+		} catch (error) {
+			if (uploadData.status === 'cancelled') return;
+
+			uploadData.error = error;
+
+			if (attempt < this.retryAttempts) {
+				uploadData.status = 'retrying';
+				this.notifyProgress(uploadData);
+				await this._delay(this.retryDelay * Math.pow(2, attempt)); // экспоненциальная задержка
+				return this._executeUpload(uploadData, attempt + 1);
+			} else {
+				uploadData.status = 'failed';
+				uploadData.endTime = Date.now();
+				this.notifyProgress(uploadData);
+				this.notifyError(uploadData, error);
+				this._checkAllCompleteBound();
+				throw error;
+			}
+		}
+	}
+
+	_performUpload(uploadData) {
+		return new Promise((resolve, reject) => {
+			const ajax = new Ajax();
+			const formData = new FormData();
+
+			formData.append('file', uploadData.file);
+			formData.append('_token', ajax._getCsrfToken() || '');
+
+			if (uploadData.options.additionalData) {
+				Object.entries(uploadData.options.additionalData).forEach(([key, value]) => {
+					formData.append(key, value);
+				});
+			}
+
+			// Передаём AbortController.signal
+			const config = {
+				onProgress: (percent, event) => {
+					uploadData.progress = percent;
+					this.notifyProgress(uploadData);
+				},
+				onSuccess: (data) => {
+					resolve(normalizeData(data));
+				},
+				onError: (err) => {
+					reject(normalizeData(err));
+				},
+				signal: uploadData.signal
+			};
+
+			// Предполагаем, что ajax.post поддерживает signal
+			const xhr = ajax.post(uploadData.url, formData, config);
+			uploadData.xhr = xhr; // для отмены
+		});
+	}
+
+	_completeUpload(uploadData, result) {
+		uploadData.status = 'completed';
+		uploadData.progress = 100;
+		uploadData.result = result;
+		uploadData.endTime = Date.now();
+
+		this.completed.push({ ...uploadData });
+		this.notifyComplete(uploadData);
+		this._checkAllCompleteBound();
+	}
+
+	// === УПРАВЛЕНИЕ ===
+
+	cancelUpload(id) {
+		const uploadData = this.uploads.get(id);
+		if (!uploadData || ['completed', 'failed', 'cancelled'].includes(uploadData.status)) {
+			return false;
+		}
+
+		// Отмена
+		uploadData.controller.abort();
+		if (uploadData.xhr && typeof uploadData.xhr.abort === 'function') {
+			uploadData.xhr.abort();
+		}
+
+		uploadData.status = 'cancelled';
+		uploadData.endTime = Date.now();
+		this.notifyProgress(uploadData);
+
+		// Удаление из очереди
+		const queueIndex = this.queue.findIndex(task => task.uploadData.id === id);
+		if (queueIndex > -1) {
+			this.queue.splice(queueIndex, 1);
+		}
+
+		return true;
+	}
+
+	setMode(mode, maxParallel = 3) {
+		this.mode = mode;
+		this.maxParallel = maxParallel;
+
+		if (mode === 'parallel') {
+			this.queue = [];
+			this._notifyWaiting(); // разблокировать ожидающие промисы
+		}
+	}
+
+	pause() {
+		this.isPaused = true;
+	}
+
+	resume() {
+		this.isPaused = false;
+		if (this.mode === 'sequential') {
+			this._processSequentialQueue();
+		} else {
+			this._notifyWaiting(); // может быть, кто-то ждёт
+		}
+	}
+
+	clear() {
+		this.uploads.forEach((_, id) => {
+			this.cancelUpload(id);
+		});
+
+		this.uploads.clear();
+		this.completed = [];
+		this.queue = [];
+		this.waitingPromises = [];
+		this.activeCount = 0;
+	}
+
+	// === СТАТИСТИКА И ВСПОМОГАТЕЛЬНЫЕ ===
+
+	getStats() {
+		const all = Array.from(this.uploads.values());
+		const totalSize = all.reduce((sum, u) => sum + (u.file?.size || 0), 0);
+
+		return {
+			total: all.length,
+			active: this.activeCount,
+			pending: all.filter(u => u.status === 'pending').length,
+			uploading: all.filter(u => u.status === 'uploading').length,
+			completed: all.filter(u => u.status === 'completed').length,
+			failed: all.filter(u => u.status === 'failed').length,
+			cancelled: all.filter(u => u.status === 'cancelled').length,
+			mode: this.mode,
+			isPaused: this.isPaused,
+			queueLength: this.queue.length,
+			totalSizeFormatted: (totalSize / (1024 * 1024)).toFixed(2) + ' MB'
+		};
+	}
+
+	printDebugStats() {
+		const stats = this.getStats();
+		console.group('--- Uploader Statistics ---');
+		console.table({
+			'Mode': stats.mode,
+			'Status': stats.isPaused ? 'Paused' : 'Running',
+			'Total Files': stats.total,
+			'Uploading': stats.uploading,
+			'Completed': stats.completed,
+			'Failed': stats.failed,
+			'Queue': stats.queueLength
+		});
+		console.log(`Total Size: ${stats.totalSizeFormatted}`);
+		console.groupEnd();
+	}
+
+	generateId() {
+		return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+	}
+
+	_delay(ms) {
+		return new Promise(resolve => setTimeout(resolve, ms));
+	}
+
+	checkAllComplete() {
+		const allDone = Array.from(this.uploads.values()).every(u =>
+			['completed', 'failed', 'cancelled'].includes(u.status)
+		);
+
+		if (allDone && this.uploads.size > 0) {
+			this.notifyAllComplete();
+		}
+	}
+
+	// === КОЛЛБЭКИ ===
+
+	onProgress(callback) { this.callbacks.progress.push(callback); }
+	onComplete(callback) { this.callbacks.complete.push(callback); }
+	onError(callback) { this.callbacks.error.push(callback); }
+	onAllComplete(callback) { this.callbacks.allComplete.push(callback); }
+
+	notifyProgress(uploadData) {
+		this.callbacks.progress.forEach(cb => this._safeCall(cb, { ...uploadData, stats: this.getStats() }));
+	}
+
+	notifyComplete(uploadData) {
+		this.callbacks.complete.forEach(cb => this._safeCall(cb, uploadData));
+	}
+
+	notifyError(uploadData, error) {
+		this.callbacks.error.forEach(cb => this._safeCall(cb, uploadData, error));
+	}
+
+	notifyAllComplete() {
+		this.callbacks.allComplete.forEach(cb => this._safeCall(cb, { completed: this.completed, stats: this.getStats() }));
+	}
+
+	isIdle() {
+		const hasActiveUploads = this.activeCount > 0;
+		const hasPendingInQueue = this.queue.length > 0;
+		const hasWaitingPromises = this.waitingPromises.length > 0;
+		const hasRunningUploads = Array.from(this.uploads.values()).some(u =>
+			['uploading', 'retrying', 'pending'].includes(u.status)
+		);
+
+		return !hasActiveUploads && !hasPendingInQueue && !hasWaitingPromises && !hasRunningUploads;
+	}
+
+	/**
+	 * Отписывает все обработчики событий
+	 * Предотвращает утечки памяти при повторной инициализации
+	 */
+	offAll() {
+		this.callbacks.progress = [];
+		this.callbacks.complete = [];
+		this.callbacks.error = [];
+		this.callbacks.allComplete = [];
+		return this;
+	}
+
+	_safeCall(callback, ...args) {
+		try {
+			callback(...args);
+		} catch (error) {
+			console.error('Callback error:', error);
+		}
+	}
+}
+
+export default FileUploader;

package/app/modules/vgfiles/js/render.js

@@ -0,0 +1,83 @@
+import { isElement, normalizeData } from "../../../utils/js/functions";
+import Params from "../../../utils/js/components/params";
+import Selectors from "../../../utils/js/dom/selectors";
+import { Classes, Manipulator } from "../../../utils/js/dom/manipulator";
+
+class VGFilesTemplateRender {
+	constructor(vgFilesInstance, element, params = {}) {
+		this.module = vgFilesInstance;
+		this.element = isElement(element);
+
+		if (!this.element) {
+			console.error('Invalid element provided:', element);
+			return;
+		}
+
+		this._params = new Params(params, element).get();
+		this._nodes = {
+			info: this.module._nodes.info,
+			drop: this.module._nodes.drop
+		};
+
+		this.bufferTemplate = '';
+		this.parsedFiles = [];
+	}
+
+	init() {
+		const $targetNode = this._nodes.info || this._nodes.drop;
+		if (!$targetNode) return false;
+
+		const area = this._nodes.info ? 'info' : 'drop';
+		return this._nativeRenderFiles(area, $targetNode);
+	}
+
+	_nativeRenderFiles(area, $node) {
+		const $list = Selectors.find(`.vg-files-${area}--list`, $node);
+		if (!$list) return false;
+
+		const $items = Array.from($list.children).filter(li => li.tagName === 'LI');
+		if ($items.length === 0) return false;
+
+		// Сохраняем шаблон только один раз
+		this._setTemplateInBuffer($items);
+
+		if (!this.bufferTemplate) return false;
+
+		// Парсим данные файлов
+		this.parsedFiles = $items
+			.map(li => {
+				const rawData = Manipulator.get(li, 'data-file');
+				if (!rawData) return null;
+
+				const dataFile = normalizeData(rawData);
+				const requiredKeys = ['id', 'name', 'size', 'type', 'src'];
+				const isValid = requiredKeys.every(key => dataFile.hasOwnProperty(key));
+
+				return isValid ? dataFile : null;
+			})
+			.filter(Boolean); // Убираем null
+
+		return true;
+	}
+
+	_setTemplateInBuffer($items) {
+		if (this.bufferTemplate || $items.length === 0) return;
+
+		const firstItem = $items[0];
+
+		// Если нет data-file — шаблон извлекается и элемент удаляется
+		if (!Manipulator.has(firstItem, 'data-file')) {
+			this.bufferTemplate = firstItem.outerHTML;
+			firstItem.remove();
+		} else {
+			this.bufferTemplate = firstItem.outerHTML;
+		}
+	}
+
+	dispose() {
+		this.bufferTemplate = '';
+		this.parsedFiles = [];
+	}
+}
+
+export default VGFilesTemplateRender;

package/app/modules/vgfiles/js/sortable.js

@@ -0,0 +1,155 @@
+import Selectors from "../../../utils/js/dom/selectors";
+import {isElement, normalizeData} from "../../../utils/js/functions";
+import Ajax from "../../../utils/js/components/ajax";
+import VGToast from "../../vgtoast";
+
+class VGFilesSortable {
+    constructor(vgFilesInstance, options = {}) {
+        this._vg = vgFilesInstance;
+        this._params = {
+            handle: '.file',
+            itemSelector: 'li.file',
+            route: null,
+            method: 'POST',
+            toast: true,
+            ...options
+        };
+
+        if (!options.itemSelector && options.handle) {
+            this._params.itemSelector = `li${options.handle}`;
+        }
+
+        if (!this._params.route) {
+            console.warn('VGFilesSortable: Не указан маршрут `route` для сохранения порядка.');
+        }
+        if (this._params.lists?.length) {
+            this._list = this._params.lists.map(l => Selectors.find('.' + l, this._vg._element)).find(s => s);
+        } else {
+            this._list = this._vg._nodes.list;
+        }
+
+        if (!isElement(this._list)) {
+            console.error('VGFilesSortable: Не найден контейнер списка файлов');
+            return;
+        }
+
+        this._draggedItem = null;
+
+        this._boundOnDragStart = this._onDragStart.bind(this);
+        this._boundOnDragEnd = this._onDragEnd.bind(this);
+        this._boundOnDragOver = this._onDragOver.bind(this);
+        this._boundOnDrop = this._onDrop.bind(this);
+
+        this._init();
+    }
+
+    _init() {
+        this._enableDraggableItems();
+
+        this._setupEvents();
+        this._vg._triggerCallback('onSortableInit');
+    }
+
+    _enableDraggableItems() {
+        const items = this._list.querySelectorAll(this._params.itemSelector);
+
+        items.forEach(li => {
+            li.setAttribute('draggable', 'true');
+
+            const img = li.querySelector('img');
+            if (img) img.setAttribute('draggable', 'false');
+        });
+    }
+
+    _setupEvents() {
+        this._list.addEventListener('dragstart', this._boundOnDragStart);
+        this._list.addEventListener('dragend', this._boundOnDragEnd);
+        this._list.addEventListener('dragover', this._boundOnDragOver);
+        this._list.addEventListener('drop', this._boundOnDrop);
+    }
+
+    _onDragStart(e) {
+        const handleEl = e.target.closest(this._params.handle);
+        if (!handleEl) return;
+
+        const item = e.target.closest(this._params.itemSelector) || e.target.closest('li');
+        if (!item) return;
+
+        this._draggedItem = item;
+
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', 'vgsortable');
+
+        item.classList.add('dragging');
+        requestAnimationFrame(() => item.classList.add('dragging-transparent'));
+    }
+
+    _onDragEnd(e) {
+        if (this._draggedItem) {
+            this._draggedItem.classList.remove('dragging', 'dragging-transparent');
+            this._draggedItem = null;
+            this._saveOrder();
+        }
+    }
+
+    _onDragOver(e) {
+        if (!this._draggedItem) return;
+
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+
+        const currentTarget =
+            e.target.closest(this._params.itemSelector) ||
+            e.target.closest('li');
+
+        if (!currentTarget || currentTarget === this._draggedItem) return;
+
+        const rect = currentTarget.getBoundingClientRect();
+        const midpoint = rect.height / 2;
+        const offsetFromTop = e.clientY - rect.top;
+
+        if (offsetFromTop < midpoint) {
+            this._list.insertBefore(this._draggedItem, currentTarget);
+        } else {
+            this._list.insertBefore(this._draggedItem, currentTarget.nextSibling);
+        }
+    }
+
+    _onDrop(e) {
+        if (!this._draggedItem) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+    }
+
+    _saveOrder() {
+        const ids = [... new Set(this._getUploadedIds())]
+
+        if (!ids.length || !this._params.route) return;
+
+        const xhr = new Ajax();
+        xhr.post(this._params.route, { ids }, {
+            onSuccess: (data) => VGToast.run(data.response.message),
+        });
+    }
+
+    _getUploadedIds() {
+        return Array.from(this._list.querySelectorAll('[data-id]'))
+            .map(el => {
+                const id = normalizeData(el.getAttribute('data-id'));
+                return id ? id : null;
+            }).filter(id => id !== null);
+    }
+
+    destroy() {
+        this._list.removeEventListener('dragstart', this._boundOnDragStart);
+        this._list.removeEventListener('dragend', this._boundOnDragEnd);
+        this._list.removeEventListener('dragover', this._boundOnDragOver);
+        this._list.removeEventListener('drop', this._boundOnDrop);
+
+        this._draggedItem = null;
+    }
+}
+
+export default VGFilesSortable