Skip to content

Instantly share code, notes, and snippets.

@rvgarimrj

rvgarimrj/app.routing.ts

Created April 12, 2017 02:44
Show Gist options
  • Save rvgarimrj/81adf11423029b77dfb6830967c04443 to your computer and use it in GitHub Desktop.
Save rvgarimrj/81adf11423029b77dfb6830967c04443 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotfoundComponent } from './notfound/notfound.component';
import {HomeComponent} from "./home/home.component";
import { ProfileComponent } from './profile/profile.component';
import { UserEditComponent } from './users/user-edit/user-edit.component';
import { UserShowComponent } from './users/user-show/user-show.component';
import { Angular2TokenService } from 'angular2-token';
const routes: Routes = [
{ path: '', component: HomeComponent,pathMatch: 'full'},
{ path: 'home',component: HomeComponent },
{ path: 'perfil', component: ProfileComponent , canActivate: [Angular2TokenService]},
{path: '404', component: NotfoundComponent},
{path: '**', redirectTo: '/404'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Raw
company.rb
class Company < ApplicationRecord
enum type: [ :cpf, :cnpj ]
belongs_to :user
end
Raw
company.ts
export class Company {
id: number;
company_name: string;
short_name: string;
kind: string;
cpf_cnpj: string;
street: string;
number: string;
city: string;
zipcode: string;
state: string;
neighborhood: string;
phone: string;
constructor(companyInfo:any) {
this.id = companyInfo.id;
this.company_name = companyInfo.company_name;
this.short_name = companyInfo.short_name;
this.kind = companyInfo.type;
this.cpf_cnpj = companyInfo.cpf_cnpj;
this.street = companyInfo.street;
this.number = companyInfo.number;
this.city = companyInfo.city;
this.zipcode = companyInfo.zipcode;
this.state = companyInfo.state;
this.neighborhood = companyInfo.neighborhood;
this.phone = companyInfo.phone;
}
}
Raw
profile.component.html
<p>Form status: {{ editForm.status | json }}</p>
<form [formGroup]="editForm" (ngSubmit)="save()">
<div class="row">
<div class="col s12 ">
<div class="card blue-grey lighten-5 z-depth-4" style="margin-top: 5em">
<div class="card-content">
<div class="row ">
<h4>Dados da conta:</h4>
<ul class="collection grey-text text-darken-2">
<div class="col s12 profile-box">
<div *ngIf="user?.photo == null || user?.photo == ''">
<i class="fa fa-user-circle user-icon"></i>
</div>
<div *ngIf="user?.photo.url != null">
<div class="profile-picture" [ngStyle]="{'background-image': 'url(' + img + ')'}">
</div>
</div>
<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".jpeg,.png,.jpg">
</div>
</ul>
<div class="row">
<div class="col s4" >
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Nome</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="name" >
</div>
</li>
</ul>
</div>
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label data-error="Inválido" data-success="Válido" class="control-label" for="email">Email*</label>
<input id="email" type="email" class="form-control input-md" formControlName="email"
required
pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?">
</div>
</li>
</ul>
</div>
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Apelido</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="nickname" >
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<h4>Dados empresarias:</h4>
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Nome da empresa*</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="company_name" >
</div>
</li>
</ul>
</div>
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Nome abreviado*</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="short_name" >
</div>
</li>
</ul>
</div>
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label >Tipo:*</label>
<select class="browser-default form-control" formControlName="kind" >
<option value="cpf">Cpf</option>
<option value="cnpj">Cnpj</option>
</select>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Cpf / Cnpj*</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="cpf_cnpj" >
</div>
</li>
</ul>
</div>
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Telefone</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="phone" >
</div>
</li>
</ul>
</div>
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Cep</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="zipcode" >
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Endereço</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="street" >
</div>
</li>
</ul>
</div>
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Núm/Complemento</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="number" >
</div>
</li>
</ul>
</div>
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Bairro</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="neighborhood" >
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label class="control-label" for="textinput">Cidade</label>
<input id="textinput" type="text" class="form-control input-md" formControlName="city" >
</div>
</li>
</ul>
</div>
<div class="col s4">
<ul class="collection grey-text text-darken-2">
<li class="collection-item">
<div class="form-group">
<label >Estado:</label>
<select class="browser-default form-control" formControlName="state" >
<option value="Acre">Acre</option>
<option value="Alagoas">Alagoas</option>
<option value="Amapá">Amapá</option>
<option value="Amazonas">Amazonas</option>
<option value="Bahia">Bahia</option>
<option value="Ceará">Ceará</option>
<option value="Distrito Federal">Distrito Federal</option>
<option value="Espírito Santo">Espírito Santo</option>
<option value="Maranhão">Maranhão</option>
<option value="Mato Grosso">Mato Grosso</option>
<option value="Mato Grosso do Sul">Mato Grosso do Sul</option>
<option value="Minas Gerais">Minas Gerais</option>
<option value="Pernambuco">Pernambuco</option>
<option value="Piauí">Piauí</option>
<option value="Rio de Janeiro">Rio de Janeiro</option>
<option value="Rio Grande do Norte">Rio Grande do Norte</option>
<option value="Rio Grande do Sul">Rio Grande do Sul</option>
<option value="Rondônia">Rondônia</option>
<option value="Santa Catarina">Santa Catarina</option>
<option value="São Paulo">São Paulo</option>
<option value="Tocantins">Tocantins</option>
</select>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="card-action clearfix">
<button type="submit"
[disabled]="!(editForm.valid)"
class="waves-effect waves-light btn blue right">
Salvar
</button>
</div>
</div>
</div>
</div>
</form>
Raw
profile.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormControl, FormGroup} from '@angular/forms';
import {Router} from "@angular/router";
import {AuthService} from "../services/auth.service";
import {Angular2TokenService} from "angular2-token";
import { UsersService } from '../shared/users.service';
import { Company } from '../shared/company';
import {NotificationsService} from 'angular2-notifications';
import { User } from './../shared/user';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
private user: User;
public editForm: FormGroup;
public img: any;
constructor(public fb: FormBuilder,
private UsersService: UsersService,
private router: Router,
private NotificationsService: NotificationsService,
private authService: AuthService) {
this.editForm = this.fb.group({
name: [""],
email: ["", Validators.required],
nickname: [""],
company_name: ["", Validators.required],
short_name: ["", Validators.required],
kind: ["", Validators.required],
cpf_cnpj: ["", Validators.required],
street: [""],
number: [""],
city: [""],
zipcode: [""],
state: [""],
neighborhood: [""],
phone: [""],
photo: "",
});
}
// logOut(){
// this.authService.logOutUser().subscribe(() => this.router.navigate(['/']));
// }
ngOnInit() {
this.UsersService.show()
.subscribe(data => {
this.user = new User(data);
console.log(this.user);
if(this.user.photo != null && this.user.photo != ""){
this.img = this.user.photo.url;
}
this.editForm = this.fb.group({
name: [this.user.name],
email: [this.user.email, Validators.required],
nickname: [this.user.nickname],
company_name: [this.user.company.company_name,Validators.required],
short_name: [this.user.company.short_name,Validators.required],
kind: [this.user.company.kind,Validators.required],
cpf_cnpj: [this.user.company.cpf_cnpj,Validators.required],
phone: [this.user.company.phone],
street: [this.user.company.street],
number: [this.user.company.number],
city: [this.user.company.city],
zipcode: [this.user.company.zipcode],
state: [this.user.company.state],
neighborhood: [this.user.company.neighborhood],
photo: "",
});
}
);
}
readThis(inputValue: any) : void {
var file:File = inputValue.files[0];
var myReader:FileReader = new FileReader();
myReader.onloadend = (e) => {
// you can perform an action with readed data here
this.img = myReader.result;
};
myReader.readAsDataURL(file);
}
fileChange(event) {
this.readThis(event.target);
}
save(){
console.log(this.editForm.value)
// this.UsersService.update(this.editForm.value, this.img)
// .subscribe(res => {
// this.NotificationsService.success(
// 'Dados atualizados',
// 'Sucesso \\o/',
// {
// timeOut: 5000,
// showProgressBar: true,
// pauseOnHover: false,
// clickToClose: true,
// maxLength: 30,
// lastOnBottom: true
// }
// );
// this.router.navigate(['/perfil']);
// }, error => {
// console.log(error.jon());
// this.NotificationsService.error(
// 'Falha ao atualizar',
// 'Tente novamente',
// {
// timeOut: 5000,
// showProgressBar: true,
// pauseOnHover: false,
// clickToClose: true,
// maxLength: 30,
// lastOnBottom: true
// }
// );
// }
// );
}
}
Raw
router.rb
Rails.application.routes.draw do
namespace :api do
namespace :v1 do
mount_devise_token_auth_for 'User', at: 'auth'
put 'users', to: 'users#update'
get 'current_user', to: 'users#current_user'
resources :suppliers
resources :companies
end
end
end
Raw
show.json.jbuilder
json.extract! @user, :id, :name, :nickname, :email, :photo, :created_at, :updated_at
json.company do
json.extract! @user.company, :company_name, :short_name, :kind, :cpf_cnpj, :street, :number, :city, :zipcode, :state, :neighborhood, :phone if @user.company
end
Raw
user.rb
class User < ActiveRecord::Base
# Include default devise modules.
# :confirmable,
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable,
:omniauthable
include DeviseTokenAuth::Concerns::User
mount_base64_uploader :photo, PhotoUploader
has_one :company, dependent: :destroy
end
Raw
user.service.ts
import { Injectable } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';
import { Angular2TokenService, A2tUiModule} from 'angular2-token';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Rx';
import { environment } from '../../environments/environment';
@Injectable()
export class UsersService {
constructor(private http: Http, private _tokenService: Angular2TokenService) { }
// getWishlist(){
// return this._tokenService.get('users/wishlist', {}).map(res => res.json());
// }
show(){
return this._tokenService.get('current_user', {}).map(res => res.json());
}
update(params, photo){
console.log(params);
return this._tokenService.put('users/', {"user":
{"name": params.name,
"email": params.email,
"nickname": params.nickname,
photo: photo},
company: {"company_name": params.company_name,
"short_name": params.short_name,
"kind": params.kind,
"cpf_cnpj": params.cpf_cnpj,
"street": params.street,
"number": params.number,
"city": params.city,
"zipcode": params.zipcode,
"state": params.state,
"phone": params.phone,
"neighborhood": params.neighborhood
}
}).map(res => res.json());
}
}
Raw
user.ts
import { Injectable } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';
import { Angular2TokenService, A2tUiModule} from 'angular2-token';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Rx';
import { environment } from '../../environments/environment';
@Injectable()
export class UsersService {
constructor(private http: Http, private _tokenService: Angular2TokenService) { }
// getWishlist(){
// return this._tokenService.get('users/wishlist', {}).map(res => res.json());
// }
show(){
return this._tokenService.get('current_user', {}).map(res => res.json());
}
update(params, photo){
console.log(params);
return this._tokenService.put('users/', {"user":
{"name": params.name,
"email": params.email,
"nickname": params.nickname,
photo: photo},
company: {"company_name": params.company_name,
"short_name": params.short_name,
"kind": params.kind,
"cpf_cnpj": params.cpf_cnpj,
"street": params.street,
"number": params.number,
"city": params.city,
"zipcode": params.zipcode,
"state": params.state,
"phone": params.phone,
"neighborhood": params.neighborhood
}
}).map(res => res.json());
}
}
Raw
user_controller.rb
class Api::V1::UsersController < ApplicationController
before_action :authenticate_api_v1_user!
# before_action :set_user, only: [:update]
def update
@user = current_api_v1_user
begin
if params[:company]
if @user.company.present?
@user.company.update(company_params)
else
@user.update(company: Company.create(company_params))
end
end
@user.update(user_params)
render template: '/api/v1/users/show', status: 200
rescue Exception => errors
render json: errors, status: :unprocessable_entity
end
end
def current_user
@user = current_api_v1_user
render template: '/api/v1/users/show', status: 200
end
private
# Use callbacks to share common setup or constraints between actions.
# def set_user
# @user = User.find(params[:id])
# end
# Never trust parameters from the scary internet, only allow the white list through.
def user_params
params.require(:user).permit(:name, :nickname, :photo, :email)
end
def company_params
params.require(:company).permit(:company_name, :short_name, :kind, :cpf_cnpj, :street, :number, :city, :zipcode, :state, :neighborhood, :phone)
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment