Source: directives/mensageria/editar-grupo/editar-grupo.js

/**
 * @ngdoc directives
 * @name EditarGrupo
 * @module s4c.directives.mensageria.editargrupo.EditarGrupo
 *
 * @description
 * `MensageriaEditarGrupo` 
 * Gerenciamento da edição dos grupos de conversas do módulo de mensageria 
 * 
 */
(function () {
    angular.module('s4c.components.collaboration')
        .directive('mensageriaEditarGrupo', MensageriaEditarGrupo);

    MensageriaEditarGrupo.$inject = [
        'MainService',
        'MensageriaService',
        'AuthService',
        '$q',
        '$filter',
        '$mdDialog',
        'MensageriaChatGrupo',
        'FileUploader',
        'CommService'
    ];

    function MensageriaEditarGrupo(MainService, MensageriaService, AuthService, $q, $filter, $mdDialog, MensageriaChatGrupo, FileUploader, CommService) {
        return {
            restrict: 'E',
            templateUrl: 'app/directives/mensageria/editar-grupo/editar-grupo.html',
            replace: true,
            scope: {
                isEditarActive: '=isEditarActive',
                grupo: '=grupo',
                deletarGrupo: '=deletarGrupo'
            },
            controller: function ($scope) {
                $scope.res = $scope.$root.res;

                var uploader = $scope.uploader = new FileUploader(),
                    uploadCallbackQueue = [];

                uploader.clearQueue();

                $scope.uploader.filters.push({
                    'name': 'enforceMaxFileSize',
                    'fn': function (item, evt) {
                        var megaByte = parseInt(item.size / 1000000) + "MB";
                        if (item.size <= 26214400) {
                            return item.size <= 26214400
                        } else {
                            $mdDialog
                                .show($mdDialog.alert()
                                    .title('Tamanho de arquivo ultrapassado')
                                    .content('O limite do tamanho de arquivos para upload é de 25MB. Seu arquivo possui ' + megaByte + ' - limite ultrapassado!')
                                    .ok('OK'))
                            return item.size <= 26214400
                        }
                    }
                });

                $scope.uploader.onCompleteItem = function (item, response) {
                    $scope.mensagem = response;
                };

                $scope.uploader.onAfterAddingFile = function (item, evt, arquivo) {
                    item.novoNome = item.file.name;
                    enviarArquivo();
                }

                function ext(filename) {
                    var index = _.lastIndexOf(filename, '.');
                    return filename.substring(index, filename.length);
                }

                $scope.uploader.onBeforeUploadItem = function (item) {
                    item.url = uploader.url;
                    var token = window.sessionStorage.getItem('s4cToken');
                    var tokenObj = JSON.parse(token);
                    item.headers = {
                        'Authorization': 'Bearer ' + tokenObj.access_token
                    };
                    item.file.name = item.novoNome + ext(item.file.name);
                };

                $scope.uploader.onProgressItem = function (fileItem, progress) {
                    console.info('onProgressItem', fileItem, progress);
                };

                $scope.uploader.onCompleteAll = function (result) {
                    _.each(uploadCallbackQueue, function (callback) {
                        callback();
                    });
                };


                $scope.mostrarImagem = function () {
                    $('#editar_grupo_img').each(function (index) {
                        if ($('#editar_grupo_img').eq(index).val() != "") {
                            $scope.readURL(this);
                        }
                    });
                }

                $scope.readURL = function (input) {
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $("#renderCropperEditGroup").empty();
                            var img = $('<img />',
                                {
                                    id: 'imageEdit',
                                    src: e.target.result,
                                    style: 'width: 100%'
                                }).appendTo($('#renderCropperEditGroup'));
                            var cropper = new Cropper(img[0], {
                                aspectRatio: 1,
                                crop: function (e) {
                                    document.getElementById('editGrupoX').value = e.detail.x;
                                    document.getElementById('editGrupoY').value = e.detail.y;
                                    document.getElementById('editGrupoWidth').value = e.detail.width;
                                    document.getElementById('editGrupoHeight').value = e.detail.height;
                                },
                                zoomable: true,
                                scalable: true,
                                movable: true,
                                background: false,
                                viewMode: 1
                            });
                        };
                        reader.readAsDataURL(input.files[0]);
                    }
                }

                function enviarArquivo() {
                    $scope.mostrarImagem();
                }

            },
            link: function ($scope, $elem, $attrs) {

                angular.extend($scope, {
                    desativar: desativar,
                    desativarTudo: desativarTudo,
                    buscarUsuarios: buscarUsuarios,
                    salvarGruposUsuarios: salvarGruposUsuarios,
                    selectCheckBox,
                    adicionarParticipanteGrupo: adicionarParticipanteGrupo,
                    usuarios: [],
                    nomeAntigo: null,
                    usuariosParticipantes: [],
                    usuariosParticipantesAntigos: [],
                    administrador: null,
                    checkboxSelected: false,
                    filters: {
                        texto: ''
                    }
                });

                $scope.$watch('grupo', function () {
                    if ($scope.grupo && $scope.grupo.id) {
                        _carregarDados();
                    }
                });
                $scope.abrirUpload = function () {
                    $("#editar_grupo_img").click();
                }

                function toBlob(grupo) {
                    var canvas = document.createElement('canvas');

                    var ctx = canvas.getContext('2d');
                    canvas.height = document.getElementById('editGrupoHeight').value;
                    canvas.width = document.getElementById('editGrupoWidth').value;
                    ctx.drawImage(document.getElementById('imageEdit'),
                        document.getElementById('editGrupoX').value,
                        document.getElementById('editGrupoY').value, canvas.width, canvas.height, 10, 10, canvas.width, canvas.height);

                    if (canvas.toBlob) {
                        canvas.toBlob(function (blob) {
                            var formData = new FormData();

                            var token = window.sessionStorage.getItem('s4cToken');
                            var tokenObj = JSON.parse(token);

                            formData.append('arquivo', blob, "avatar.png");
                            $.ajax('/grupo_usuario_mensageria/imagem/' + grupo.id, {
                                method: "POST",
                                data: formData,
                                processData: false,
                                contentType: false,
                                headers: {
                                    'Authorization': 'Bearer ' + tokenObj.access_token
                                },
                                success: function (data) {
                                    grupo.urlIcone = data.imgUrl;
                                    console.log('Upload success');
                                },
                                error: function (data) {
                                    console.log(data);
                                    console.log('Upload error');
                                }
                            });
                        });
                    }
                }

                /**
                 * @method usuarioRemovido
                 */
                MensageriaChatGrupo.on('usuarioRemovido', function (usuario) {
                    $scope.usuariosParticipantesAntigos.length = 0;
                    angular.forEach($scope.usuariosParticipantes, function (participante) {
                        if (participante.id == usuario.id) {
                            participante.isAdded = false;
                            var index = $scope.usuariosParticipantes.indexOf(participante);
                            $scope.usuariosParticipantes.splice(index, 1);
                            var usuarioLocal = _.find($scope.usuarios, function (user) { return user.id === participante.id; });
                            usuarioLocal.isAdded = false;
                            return;
                        } else {
                            participante.isAdded = true;
                            var usuarioLocal = _.find($scope.usuarios, function (user) { return user.id === participante.id; });
                            usuarioLocal.isAdded = true;
                            $scope.usuariosParticipantesAntigos.push(participante);
                        }
                    });
                });

                /**
                 * @method _carregarDados
                 */
                function _carregarDados() {

                    $q.all([

                        MensageriaService.findContatos(true),
                        MensageriaService.findUsuarioById(AuthService.user.info.id),
                        MensageriaService.findParticipantes($scope.grupo.id)

                    ]).then(function (results) {

                        $scope.nomeAntigo = angular.copy($scope.grupo.nome);
                        $scope.usuarios = angular.copy(results[0]);

                        var hasUser = false;

                        for (var i = 0; i < $scope.usuarios.length; i++) {
                            if ($scope.usuarios[i].id == results[1].id) {
                                hasUser = true;
                                break;
                            }
                        }

                        if (!hasUser) {
                            $scope.usuarios.push(results[1]);
                        }

                        $scope.usuarios = $filter('orderBy')($scope.usuarios, 'nome')

                        $scope.administrador = angular.copy(results[1]);
                        $scope.usuariosParticipantes = angular.copy(results[2]);
                        $scope.usuariosParticipantesAntigos = $scope.usuariosParticipantesAntigos.concat(results[2]);

                        angular.forEach($scope.usuariosParticipantes, function (participante) {
                            participante.isAdded = true;
                            var usuario = _.find($scope.usuarios, function (user) { return user.id === participante.id; });
                            usuario.isAdded = true;
                        });
                    });
                }

                /**
                 * @method salvarGruposUsuarios
                 */
                function salvarGruposUsuarios() {
                    $scope.usuariosParticipantesAntigos.length = 0;
                    var participantesIds = [];
                    angular.forEach($scope.usuariosParticipantes, function (participante) {
                        participantesIds.push(participante.id);
                        $scope.usuariosParticipantesAntigos.push(participante);
                    });

                    $scope.grupo.participantes = participantesIds;
                    $scope.grupo.createdAt = null;

                    MensageriaService.atualizarGrupoUsuarios($scope.grupo)
                        .then(function (result) {
                            if ($("#imageEdit").length > 0) {
                                toBlob($scope.grupo);
                            }
                            result.exibir = true;
                            desativar();
                        });
                }

                /**
                 * @method desativar
                 */
                function desativar() {
                    $scope.isEditarActive = false;
                    $scope.checkboxSelected = false;
                    $scope.filters.texto = '';
                }

                /**
                 * @method desativarTudo
                 */
                function desativarTudo() {

                    angular.forEach($scope.usuarios, function (usuario) {
                        usuario.isAdded = false;
                    })

                    $scope.grupo.nome = angular.copy($scope.nomeAntigo);

                    $scope.usuariosParticipantes.length = 0;
                    $scope.usuariosParticipantes = $scope.usuariosParticipantes.concat($scope.usuariosParticipantesAntigos);
                    angular.forEach($scope.usuariosParticipantes, function (participante) {
                        participante.isAdded = true;
                        var usuario = _.find($scope.usuarios, function (user) { return user.id === participante.id; });
                        usuario.isAdded = true;
                    });

                    $scope.isEditarActive = false;
                    $scope.checkboxSelected = false;
                    $scope.filters.texto = '';
                }

                $scope.lastText;
                $scope.usuariosFiltrados = $scope.usuarios;

                /**
                 * @method buscarUsuarios
                 * @param {*} texto 
                 */
                function buscarUsuarios(texto) {

                    if (!texto) {
                        return $scope.usuarios;
                    }

                    texto = $filter('latinize')(texto.toLowerCase());

                    if (texto != $scope.lastText) {
                        $scope.checkboxSelected = false;
                    }

                    $scope.lastText = texto;

                    var items = _.filter($scope.usuarios, function (usuario) {
                        return _.includes($filter('latinize')(usuario.nome.toLowerCase()), texto);
                    });

                    items = $filter('orderBy')(items, 'nome');
                    $scope.usuariosFiltrados = items;
                }

                /**
                 * @method adicionarParticipanteGrupo
                 * @param {*} participante 
                 */
                function adicionarParticipanteGrupo(participante) {

                    if (participante.id == $scope.administrador.id) {
                        return;
                    }

                    if (participante.isAdded) {

                        participante.isAdded = false;

                        var index = $scope.usuariosParticipantes.indexOf(participante);
                        $scope.usuariosParticipantes.splice(index, 1);
                        return;
                    }

                    participante.isAdded = true;
                    $scope.usuariosParticipantes.push(participante);

                    $scope.usuariosParticipantes = $filter('orderBy')($scope.usuariosParticipantes, 'nome');
                }

                /**
                 * @method selectCheckBox
                 */
                function selectCheckBox() {
                    if ($scope.checkboxSelected) {
                        $scope.checkboxSelected = false;
                        return;
                    }

                    $scope.checkboxSelected = true;
                }
            }
        }
    }
}());