salix/modules/claim/front/photos/index.js

import ngModule from '../module';
import Section from 'salix/components/section';
import './style.scss';

class Controller extends Section {
    showWorkerDescriptor(event, workerFk) {
        event.preventDefault();
        event.stopImmediatePropagation();
        this.$.workerDescriptor.parent = event.target;
        this.$.workerDescriptor.workerFk = workerFk;
        this.$.workerDescriptor.show();
    }

    showDeleteConfirm(index) {
        this.dmsIndex = index;
        this.$.confirm.show();
    }

    deleteDms(response) {
        if (response === 'accept') {
            const dmsFk = this.photos[this.dmsIndex].dmsFk;
            const query = `claimDms/${dmsFk}/removeFile`;
            this.$http.post(query).then(() => {
                this.$.model.remove(this.dmsIndex);
                this.vnApp.showSuccess(this.$translate.instant('Photo deleted'));
            });
        }
    }

    onDrop($event) {
        const files = $event.dataTransfer.files;
        this.setDefaultParams().then(() => {
            this.dms.files = files;
            this.create();
        });
    }

    setDefaultParams() {
        const params = {filter: {
            where: {code: 'claim'}
        }};
        return this.$http.get('DmsTypes/findOne', {params}).then(res => {
            const dmsTypeId = res.data && res.data.id;
            const companyId = this.vnConfig.companyFk;
            const warehouseId = this.vnConfig.warehouseFk;
            this.dms = {
                hasFile: false,
                hasFileAttached: false,
                reference: this.claim.id,
                warehouseId: warehouseId,
                companyId: companyId,
                dmsTypeId: dmsTypeId,
                description: this.$translate.instant('FileDescription', {
                    claimId: this.claim.id,
                    clientId: this.claim.client.id,
                    clientName: this.claim.client.name
                }).toUpperCase()
            };
        });
    }

    openUploadDialog() {
        const element = document.createElement('input');
        element.setAttribute('type', 'file');
        element.setAttribute('multiple', true);
        element.click();

        element.addEventListener('change', () =>
            this.setDefaultParams().then(() => {
                this.dms.files = element.files;
                this.create();
            })
        );
    }

    create() {
        const query = `claims/${this.claim.id}/uploadFile`;
        const options = {
            method: 'POST',
            url: query,
            params: this.dms,
            headers: {'Content-Type': undefined},
            transformRequest: files => {
                const formData = new FormData();

                for (let i = 0; i < files.length; i++)
                    formData.append(files[i].name, files[i]);

                return formData;
            },
            data: this.dms.files
        };
        this.$http(options).then(() => {
            this.vnApp.showSuccess(this.$translate.instant('Photo uploaded!'));
            this.$.model.refresh();
        });
    }
}

ngModule.component('vnClaimPhotos', {
    template: require('./index.html'),
    controller: Controller,
    bindings: {
        claim: '<'
    }
});