Skip to content

Instantly share code, notes, and snippets.

@BenevidesLecontes

BenevidesLecontes/cliente-novo.html

Created April 27, 2017 19:01
Show Gist options
  • Save BenevidesLecontes/76eef32a53b252ebafad8bab92e02613 to your computer and use it in GitHub Desktop.
Save BenevidesLecontes/76eef32a53b252ebafad8bab92e02613 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cliente-novo.html
<form class="form user-form clearfix" (ngSubmit)="addCE(formAddCE.value)" [formGroup]="formAddCE" novalidate
autocomplete="off">
<div
class="col-sm-14 col-lg-10 col-xs-14 col-sm-offset-1 col-md-12 col-lg-offset-3 col-md-offset-2 col-xs-offset-1 content-padding-global form-client-col">
<!-- Geral -->
<div class="row cad-geral">
<div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
<h3>Geral</h3>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-16">
<div class="form-group"
[ngClass]="{'showInputMsg':formAddCE.controls.cpf.errors && formAddCE.controls.cpf.errors.showWarning}">
<label for="cpf">CPF</label>
<input
type="tel"
class="form-control input-layout"
id="cpf"
#cpfEl
maxlength="14"
app-ui-cpf
[formControl]="formAddCE.get('cpf')"
[(ngModel)]="selectedClient.cpf"/>
<app-control-messages [cpfInput]="cpfElForValidation"
[element]="cpfEl"
[control]="formAddCE.controls.cpf"></app-control-messages>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-13 col-xs-16">
<div class="form-group"
[ngClass]="{'showInputMsg':formAddCE.controls.nome.errors && formAddCE.controls.nome.errors.showWarning}">
<label for="nome" class="label-invalid-required">Nome</label>
<input
type="text"
class="form-control input-layout"
id="nome"
#nomeEl
[(ngModel)]="selectedClient.nome"
[formControl]="formAddCE.get('nome')"
(blur)="makeNick(selectedClient.nome)"/>
<app-control-messages [element]="nomeEl"
[control]="formAddCE.controls.nome"></app-control-messages>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-8 col-xs-8">
<div class="form-group">
<label for="apelido">Apelido</label>
<input
type="text"
class="form-control input-layout"
id="apelido"
[formControl]="formAddCE.get('apelido')"
[(ngModel)]="selectedClient.apelido"/>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">
<div class="form-group">
<label for="nascimento">Nascimento</label>
<datetime id="nascimento"
#dataEl
(dateChange)="$event? touched = true: touched=false"
[timepicker]="false" placeholder="Digite ou selecione uma data"
[datepicker]="datepickerOpts" [(ngModel)]="selectedClient.nascimento"
[formControl]="formAddCE.get('nascimento')"></datetime>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
<div class="form-group">
<label class="label-invalid-required">Sexo</label>
<table>
<tr>
<td>
<div class="radio radio-darkblue">
<input id="sexo_m" type="radio" [formControl]="formAddCE.get('sexo')"
[(ngModel)]="selectedClient.sexo" name="sexo"
value="M">
<label class="fake-check" for="sexo_m">M</label>
</div>
</td>
<td>
<div class="radio radio-darkblue">
<input id="sexo_f" type="radio" [(ngModel)]="selectedClient.sexo"
[formControl]="formAddCE.get('sexo')" name="sexo"
value="F">
<label class="fake-check" for="sexo_f">F</label>
</div>
</td>
</tr>
</table>
</div>
</div>
</div><!-- Geral -->
<!-- Emails -->
<div class="row cad-emails">
<div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
<h3>Emails</h3>
<!-- Emails Repeat Start -->
<div class="row animHeight"
*ngFor="let item of formAddCE.controls.emails.controls; let i = index">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="form-group">
<label>
<a href tabindex="-1"
(click)="selectedClient.emailPreferencial=i; $event.preventDefault()"
[ngClass]="{'icon icon-estrela icon-check': selectedClient.emailPreferencial == i, 'icon icon-estrela-vazada icon-uncheck': selectedClient.emailPreferencial != i}">
</a>
</label>
</div>
</div>
<div formArrayName="emails">
<div [ngClass]="{'fadeItem':item.excluir}" class="col-lg-9 col-md-14 col-sm-14 col-xs-12">
<div class="form-group"
[ngClass]="{'showInputMsg':item.controls.email.errors && item.controls.email.errors.showWarning}">
<label for="emails_{{i}}">Email</label>
<input
type="text"
id="emails_{{i}}"
#emailEl
app-ui-mailgun
(didYoumean)="makHint.hint['emails'+i]=$event"
class="form-control input-layout"
[(ngModel)]="selectedClient.emails['emails'+i]"
[formControl]="item.controls.email"
autocapitalize="off"/>
<app-mailgun-hint [ctrl]="item.controls.email"
[index]="i" #makHint></app-mailgun-hint>
<app-control-messages [element]="emailEl"
[control]="item.controls.email"></app-control-messages>
</div>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="form-group">
<label class="edit-form-pop">
<template #popTemplate>
<ul class="action-links">
<li><a class="action" (click)="removeEmail(i)">{{(item.excluir) ? 'Cancelar excluir':'Excluir'}}</a>
</li>
</ul>
</template>
<a #pop="bs-popover" href (click)="$event.preventDefault()" class="icon icon-info-dots"
[popover]="popTemplate"
placement="left"
triggers="click"></a>
</label>
</div>
</div>
</div>
<!-- Emails Repeat End -->
<div class="row">
<div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
<div class="form-group">
<a href tabindex="-1" (click)="addEmail(); $event.preventDefault()"
class="icon-mais-bold add-item text-nowrap">Adicionar
email</a>
</div>
</div>
</div>
</div>
</div><!-- Emails -->
<!-- Telefones -->
<div class="row cad-telefones">
<div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
<h3>Telefones</h3>
<!-- Telefones Repeat Start -->
<div class="row animHeight" *ngFor="let item of formAddCE.controls.telefones.controls; let i = index">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="form-group">
<label>
<a href tabindex="-1"
(click)="selectedClient.telefonePreferencial=i; $event.preventDefault()"
[ngClass]="{'icon icon-estrela icon-check': selectedClient.telefonePreferencial == i, 'icon icon-estrela-vazada icon-uncheck': selectedClient.telefonePreferencial != i }">
</a>
</label>
</div>
</div>
<div formArrayName="telefones">
<div [ngClass]="{'fadeItem':item.excluir}" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group"
[ngClass]="{'showInputMsg':item.controls.ddd.errors && item.controls.ddd.errors.showWarning}">
<label for="ddd_{{i}}"
[ngClass]="{'label-invalid-required': isRequiredTel(item.controls)}">DDD</label>
<input
type="tel"
class="form-control input-layout"
id="ddd_{{i}}"
[required]="isRequiredTel(item.controls)"
[(ngModel)]="selectedClient.telefones['ddd'+i]"
maxlength="2"
#dddEl
[formControl]="item.controls.ddd"
(keyup)="dddKeyUp($event, 'telnumero_'+i, item.controls.ddd.value)"
ui-digits/>
<app-control-messages [element]="dddEl"
[control]="item.controls.ddd"></app-control-messages>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group"
[ngClass]="{'showInputMsg':item.controls.telefone.errors && item.controls.telefone.errors.showWarning}">
<label for="telnumero_{{i}}"
[ngClass]="{'label-invalid-required': isRequiredTel(item.controls)}">Telefone</label>
<input
#telEl
type="tel"
class="form-control input-layout"
id="telnumero_{{i}}"
[required]="isRequiredTel(item.controls)"
[(ngModel)]="selectedClient.telefones['numero'+i]"
maxlength="10"
(blur)="updateTelefoneValidity()"
[formControl]="item.controls.telefone"
(keydown)="selectedClient.telefones['tipo'+i] = autoCelClass(selectedClient.telefones['numero'+i])"
app-ui-phone/>
<app-control-messages [element]="telEl"
[telInput]="telElForValidation"
[ddd]="item.controls.ddd"
[control]="item.controls.telefone"></app-control-messages>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
<div class="form-group"
[ngClass]="{'showInputMsg':item.controls.tipo.errors && item.controls.tipo.errors.showWarning}">
<label
for="tipotel_{{i}}"
[ngClass]="{'label-invalid-required': isRequiredTel(item.controls)}">Tipo</label>
<ng-selectize id="tipotel_{{i}}" [config]="configTipo"
[options]="optionsTipoTel"
[placeholder]="'Escolha'"
#tipoTelEl
[formControl]="item.controls.tipo"
[required]="isRequiredTel(item.controls)"
[(ngModel)]="selectedClient.telefones['tipo'+i]"></ng-selectize>
<app-control-messages [element]="tipoTelEl"
[itemClass]="'ui-validation-message-combo-box'"
[control]="item.controls.tipo"></app-control-messages>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="form-group">
<label class="edit-form-pop">
<template #popTemplate>
<ul class="action-links">
<li><a class="action" (click)="removeTelefone(i)">Excluir</a>
</li>
</ul>
</template>
<a #pop="bs-popover" href (click)="$event.preventDefault()" class="icon icon-info-dots"
[popover]="popTemplate"
placement="left"
triggers="click"></a>
</label>
</div>
</div>
</div>
<!-- Telefones Repeat End -->
<div class="row">
<div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
<div class="form-group">
<a href tabindex="-1" (click)="addTelefone(); $event.preventDefault()"
class="icon-mais-bold add-item text-nowrap">Adicionar
Telefone</a>
</div>
</div>
</div>
</div>
</div><!-- Telefones -->
<!-- Endereços -->
<div class="row cad-telefones">
<div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
<h3>Endereços</h3>
<!-- Endereços Repeat Start -->
<div class="row animHeight" *ngFor="let item of formAddCE.controls.enderecos.controls; let i = index">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="form-group">
<label>
<a href tabindex="-1"
(click)="selectedClient.enderecoPreferencial=1; $event.preventDefault()"
[ngClass]="{'icon icon-estrela icon-check': selectedClient.enderecoPreferencial == i, 'icon icon-estrela-vazada icon-uncheck': selectedClient.enderecoPreferencial != i }">
</a>
</label>
</div>
</div>
<div [ngClass]="{'fadeItem':item.excluir}" class="col-lg-14 col-md-14 col-sm-14 col-xs-12">
<div class="row">
<!-- Tipo Endereço -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
<div class="form-group"
[ngClass]="{'showInputMsg':formAddCE.controls.enderecos.errors && formAddCE.controls.enderecos.errors.showWarning}">
<label for="tipoend_{{i}}"
[ngClass]="{'label-invalid-required':requiredAdress(item)}">Tipo</label>
<ng-selectize *ngIf="item.controls.tipo" id="tipoend_{{i}}" [config]="configTipo"
[options]="optionsTipoEndereco"
[formControl]="item.controls.tipo"
[required]="requiredAdress(item)"></ng-selectize>
</div>
</div>
<!-- Cep -->
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-7">
<div class="form-group"
[ngClass]="{'showInputMsg':formAddCE.controls.enderecos.errors && formAddCE.controls.enderecos.errors.showWarning}">
<label for="cep_{{i}}"
[ngClass]="{'label-invalid-required':requiredAdress(item)}">CEP</label>
<input
type="tel"
name="cep_{{i}}"
class="form-control input-layout"
id="cep_{{i}}"
maxlength="9"
[formControl]="item.controls.cep"
[(ngModel)]="selectedClient.enderecos['cep'+i]"
[required]="requiredAdress(item)"/>
</div>
</div>
<!-- Estado -->
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-3">
<div class="form-group"
[ngClass]="{'showInputMsg':formAddCE.controls.enderecos.errors && formAddCE.controls.enderecos.errors.showWarning}">
<label [ngClass]="{'label-invalid-required':requiredAdress(item)}"
for="{{ 'estado'+i }}">UF</label>
<input [formControl]="item.controls.uf"
[typeahead]="states"
[required]="requiredAdress(item)"
[(ngModel)]="selectedClient.enderecos['estado'+i]"
id="{{ 'estado'+i }}"
typeaheadMinLength="0"
class="form-control input-layout">
</div>
</div>
<!-- Cidade -->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-8">
<div class="form-group"
[ngClass]="{'showInputMsg':formAddCE.controls.enderecos.errors && formAddCE.controls.enderecos.errors.showWarning}">
<label for="cidade_{{i}}"
[ngClass]="{'label-invalid-required':requiredAdress(item)}">Cidade</label>
<input [typeahead]="cities"
id="cidade_{{i}}"
[formControl]="item.controls.cidade"
[required]="requiredAdress(item)"
[(ngModel)]="selectedClient.enderecos['cidade'+i]"
typeaheadMinLength="0"
class="form-control input-layout">
</div>
</div>
<!-- Bairro -->
<div class="col-lg-5 col-md-5 col-sm-3 col-xs-8">
<div class="form-group">
<label for="bairro[{{i}}]">Bairro</label>
<input [typeahead]="bairros"
id="bairro[{{i}}]"
[formControl]="item.controls.bairro"
[(ngModel)]="selectedClient.enderecos['bairro'+i]"
typeaheadMinLength="0"
class="form-control input-layout">
</div>
</div>
</div>
<div class="row">
<!-- Tipo Logradouro -->
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-5">
<div class="form-group">
<label for="tipoLogradouro_{{i}}">Tipo</label>
<input [typeahead]="tipoLogradouro"
id="tipoLogradouro_{{i}}"
[formControl]="item.controls.tipoLogradouro"
[(ngModel)]="selectedClient.enderecos['tipoLogradouro'+i]"
typeaheadMinLength="0"
class="form-control input-layout">
</div>
</div>
<!-- Logradouro -->
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-8">
<div class="form-group">
<label for="logradouro_{{i}}">Logradouro</label>
<input
type="text"
id="logradouro_{{i}}"
class="form-control input-layout"
[formControl]="item.controls.logradouro"
[(ngModel)]="selectedClient.enderecos['logradouro'+i]"
maxlength="1000"/>
</div>
</div>
<!-- Número -->
<div ui-fix-tel-inputs class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
<div class="form-group">
<label for="endnumero_{{i}}">Número</label>
<input
type="tel"
data-text="true"
class="form-control input-layout"
id="endnumero_{{i}}"
[formControl]="item.controls.numero"
[(ngModel)]="selectedClient.enderecos['endNumero'+i]"
maxlength="30">
</div>
</div>
<!-- Complemento -->
<div class="col-lg-4 col-md-4 col-sm-16 col-xs-16">
<div class="form-group">
<label for="complemento_{{i}}">Complemento</label>
<input
type="text"
class="form-control input-layout"
id="complemento_{{i}}"
[formControl]="item.controls.complemento"
[(ngModel)]="selectedClient.enderecos['complemento'+i]"
maxlength="30">
</div>
</div>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="form-group">
<label class="edit-form-pop">
<template #popTemplate>
<ul class="action-links">
<li><a class="action" (click)="removeEndereco(i)">Excluir</a>
</li>
</ul>
</template>
<a #pop="bs-popover" href (click)="$event.preventDefault()" class="icon icon-info-dots"
[popover]="popTemplate"
placement="left"
triggers="click"></a>
</label>
</div>
</div>
</div>
<!-- Endereços Repeat End -->
<div class="row">
<div class="col-lg-16 col-md-16 col-sm-16 col-xs-16">
<div class="form-group">
<a href tabindex="-1" (click)="addEndereco(); $event.preventDefault()"
class="icon-mais-bold add-item text-nowrap">Adicionar
Endereço</a>
</div>
</div>
</div>
</div>
</div><!-- Endereços -->
</div>
<div class="user-footer">
<div class="col-lg-16 col-md-16 col-sm-16 col-xs-16 text-right">
<div class="btn-user-row">
<button type="button" (click)="cadCancel()" class="btn btn-default btn-md">Cancelar</button>
<ui-set-touched
[btnText]="'clientes.clienteNovo.adicionar' | translate"
[canSend]="formAddCE.valid"
[form]="formAddCE"
[btnType]="'submit'"></ui-set-touched>
</div>
</div>
</div>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment