13/12/2017 Development / java script

Eu uso com muuuuuita frequencia essa parada, então, deixar registrado aqui pra eu poder usar com mais facilidade.

A primeira é essa porrinha aqui, pra pegar somente os números: "ABABABABAAB12121212-232323fdfdf".replace(/\D/g, '')

A outra é pra formatar moeda antes de salvar no banco de dados.

Ex: "R$ 15.404,00" (STRING) se eu salvar assim direto, depois fica ruim de formatar.

Entao é bom salvar assim => Number("R$ 15.404,00".replace(/[^0-9\.]+/g,""))

Espero que me ajude :-)

 

08/12/2017 Development / java script

this._$state.transitionTo('titulos', this._$stateParams, { reload: true, inherit: false, notify: true });

Espero que ajude!

04/12/2017 Development / css

div {

  font: 70px -apple-system;

  animation-name: 'doughnuts';

  animation-duration: 3s;

  animation-iteration-count: infinite;

  animation-direction: alternate;

}

 

@keyframes doughnuts {

from {

font-variation-settings: "wght" 1;

}

to {

font-variation-settings: "wght" 1.98;

}

}

02/12/2017 Development / java script

angular.module('myUtils', [])
.factory('$Utils', ['$rootScope', function($rootScope){

  this._$scope = $rootScope;

  var NormalizedCollection = (ref, childKey, keyValue, obj) => {
    ref.child(childKey).once('value').then(resp => {
        obj[keyValue] = resp.val();
        this._$scope.$apply();
    });
  };

  return {
    NormalizedCollection : NormalizedCollection
  };
}]);

angular.module('MyOtherApp', ['myUtils']);

export class MyController {
  constructor ($Utils) {}
}

02/12/2017 Development / java script

Firebase é bom pra caraaaaaaaleo, mas uma coisa que falta é ter JOIN mais facilmente entre as coleções.

Tem um projetinho chamado normalizeCollection de um carinha lá do time do angular firebase, mas só funciona pra versões 1.x alguma coisa do firebase, como eu estou usando a versão 3, eu me fudi!

Então eu fiz meu próprio normalize.

Eu tenho 4 bases que precisam ser juntadas.

Clientes, Pessoas, Credores, Titulos

Primeiro eu consulto todos os meus títulos, e cada título tem cliente, credor e operador(que é a base Pessoas)

Olha como ficou a primeira versão do script

var ref = firebase.database().ref();

var refPessoas = ref.child("pessoas");

var refClientes = ref.child("clientes");

var refCredores = ref.child("credores");

ref.child("titulos").orderByChild('codigoOperador').on('child_added', snapshot => {

var codigoOperador, codigoCliente, codigoCredor;

var obj = {};

obj = snapshot.val();

codigoOperador = obj.codigoOperador;

codigoCliente = obj.cnpjCliente || obj.cpfCliente;

codigoCredor = obj.cnpjCredor;

var NormalizedCollection = (ref, childKey, keyValue, obj) => {

ref.child(childKey).once('value').then(resp => {

obj[keyValue] = resp.val();

this._$scope.$apply();

});

};

NormalizedCollection(refPessoas, codigoOperador, 'Operador', obj);

NormalizedCollection(refClientes, codigoCliente, 'Cliente', obj);

NormalizedCollection(refCredores, codigoCredor, 'Credor', obj);

this.data.push(obj);

})

Acho que ficou uma bosta, mas funcionou ! Espero que sirva de ideia

28/11/2017 Development / css

Se você for pesquisar no google por override boostrap variables vai encontrar uma grande quantidade de pessoas que necessitam fazer essa mudança em seus projetos.

Aqui vai o pulo do gato oficial

Se você esta usando o generator do angular, provavelmente no arquivo index.scss tem essa linha comentada

/**

* If you want to override some bootstrap variables, you have to change values here.
* The list of variables are listed here bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

*/

aqui você faz o override

/**
* Do not remove the comments below. It's the markers used by wiredep to inject
* sass dependencies when defined in the bower.json of your dependencies
*/
// bower:scss
// endbower

O erro que o pessoal comete é querer mudar direto a variavel 

$brand-primary: #fff // Isso é errado, nao vai funcionar 

Oque tem que fazer é mudar através do MAPA

$gray-100: #f8f9fa;

$gray-600: #868e96;

$gray-800: #343a40;

$red: #dc3545;

$yellow: #ffc107;

$green: #006600; // This is the only variable I wanted to change

$cyan: #17a2b8;

$theme-colors: (

primary: $green,

secondary: $gray-600,

success: $green,

info: $cyan,

warning: $yellow,

danger: $red,

light: $gray-100,

dark: $gray-800

);

Agora funciona!

27/11/2017 Development / java script

Agora que eu comecei a migrar a Odete de ANGULAR5 pra REACT, comecei a traduzir o ngClass.

Exemplo usando ANGULAR

<div class="container-fluid how-works" [ngClass]="{'how-works-hidden' : data.length > 0}">

Exemplo usando REACT

es6 transpiler 

<div className={`container-fluid how-works ${this.state.data.length > 0 ? 'how-works-hidden' : ''}`}>

 

26/11/2017 Products / Portfolio

Um dos projetinhos que eu mais tenho me concentrado é o da Odete - https://odete.com.br

A odete é um projeto para contratar diaristas e fiz ele usando angular 1 e recentemente como prova de estudo, eu comecei a migrá-lo para angular 5.

Pelo fato deu estar familiarizado com angular, o upgrade foi relativamente simples e eu gostei bastante da nova versão do angular, minha produtividade aumentou bastante, fazer um app simples usando angular5 é bem tranquilo.

Bom, na hora que eu fui gerar o pacote de produção, vi que o vendor.js tinha ido pra casa dos 3megas, e isso me assustou bastante. Ai comecei a pesquisar e vi que o próprio CLI do angular, tem um generator próprio de build, que é o ng build -prod

Gerado a versão de produção certinha, fiquei pensando como seria se eu fizesse em REACT?

Blz, comecei a fazer a versão em REACT usando o create-app-react

A principio, mesmo tenho uma noção de REACT, eu sempre apanho na hora de criar um projetinho usando ele, por mais que seja mais simples. Talvez seja porque eu esteja com angular na veia.

Fazer as importações dos pacotes, tem sempre uma pegadinha.Sem falar na porra do className, que tem que alterar a porra toda.

Mas por fim, acaba-se programando menos, por incrivel que pareça e o REACT força você programar bem.

No final, REACT acabou superando o ANGULAR5. Mas eu ainda prefiro angular ;-)

25/11/2017 Development / java script

Isso acontece quando você tenta ler uma propriedade de um retorno de uma consulta. Exemplo

.subscribe(resp => { resp.nome }) // Aqui pode extourar um erro.

O ideial é criar uma interface e associar o retorno da requisicao, a essa interface. Exemplo

interface NotificacaoUsuario {

nome: string;
imagem: string;

}

service

getNewPedidoTelefone() {

return this.sockets.fromEvent('newPedidoTelefone').map((data: NotificacaoUsuario) => {

return data;

});

}

controller

this.service.getNewPedidoTelefone().subscribe(data => {

Notification.requestPermission(function(perm) {

const NotificationOptions: NotificationOptions = {

body: 'Pediram o telefone de: ' + data.nome,

tag: new Date().getTime().toString(),

icon : 'https://odete.com.br/uploads/' + data.imagem

};

const notification = new Notification('Pediram o Telefone', NotificationOptions);

});

});

23/11/2017 Development / angular

No projeto da Odete, eu estava implementando um esquema para abrir o modal quando o usuário clicasse no cadeado.

Esse cadeado fica dentro de um componente chamado perfil. E aqui eu posto a minha solução.

Na minha classe perfil, eu coloquei mais um component

@Component({

selector: 'app-modal-content',

moduleId: module.id,

templateUrl: './perfil.cadastroConfiavel.modal.html'

})

export class ModalContentComponent {

constructor(public bsModalRef: BsModalRef) {}

}

dentro da minha classe perfil, fiz o metodo que chama o modal

export class PerfilComponent implements OnInit {

 

@Input('model') model;

public modalRef: BsModalRef;

 

constructor(private service: ColaboradorService, private modalService: BsModalService) { }

openModal() {

this.modalRef = this.modalService.show(ModalContentComponent);

}

Aqui esta o pulo do gato. No app.module.ts tem que importar

import { PerfilComponent, ModalContentComponent } from './perfil/perfil.component';

e no ngModule

@NgModule({

declarations: [

PerfilComponent,

ModalContentComponent

],

entryComponents: [ ModalContentComponent ],

Thats Great!