docs: configurando deploy via ssh para angular
This commit is contained in:
30
src/app/admin/admin.module.ts
Normal file
30
src/app/admin/admin.module.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { AuthGuard } from '../guards/auth.guard';
|
||||
import { KendoModule } from '../shared/kendo.module';
|
||||
import { LottieModule } from 'ngx-lottie';
|
||||
import player from 'lottie-web';
|
||||
import { PermissionUserComponent } from './permission-user/permission-user.component';
|
||||
import { ComponentModule } from '../components/component.module'; // Importando o módulo correto
|
||||
|
||||
export function playerFactory() {
|
||||
return player;
|
||||
}
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: 'permission-user', component: PermissionUserComponent, canActivate: [AuthGuard] },
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild(routes),
|
||||
KendoModule,
|
||||
LottieModule.forRoot({ player: playerFactory }),
|
||||
ComponentModule, // Importa o módulo que contém HeaderAdminComponent
|
||||
],
|
||||
declarations: [PermissionUserComponent], // Apenas componentes exclusivos deste módulo
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
export class AdminModule {}
|
||||
63
src/app/admin/permission-user/permission-user.component.html
Normal file
63
src/app/admin/permission-user/permission-user.component.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<app-header-admin></app-header-admin>
|
||||
|
||||
<div class="d-flex flex-column wrapper">
|
||||
<main class="flex-fill main-dashboard">
|
||||
<div class="container">
|
||||
<div class="title-page">
|
||||
<span>Selecione o usuário</span>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-8">
|
||||
<kendo-combobox (selectionChange)="getPermissionUser()" (valueChange)="setUserSelected($event)"
|
||||
[valueNormalizer]="valueNormalizer" [data]="users" [kendoDropDownFilter]="filterSettings" textField="name"
|
||||
valueField="userId" placeholder="Selecione o usuário..." (input)="forceUppercase($event)">
|
||||
</kendo-combobox>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-2">
|
||||
<button kendoButton class="btn-form" [disabled]="!userSelected" [icon]="isLoading ? 'loading' : ''"
|
||||
(click)="getPermissionUser()">Pesquisar Permissões</button>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-2">
|
||||
<button *ngIf="permissions.length > 0" kendoButton class="btn-form" [disabled]="!userSelected"
|
||||
(click)="savePermissions()">Salvar
|
||||
Permissões</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div *ngIf="userSelected && permissions.length; else noUserSelected">
|
||||
<kendo-treeview
|
||||
[nodes]="permissions"
|
||||
[children]="children"
|
||||
[hasChildren]="hasChildren"
|
||||
textField="text"
|
||||
kendoTreeViewCheckable
|
||||
[(checkedKeys)]="checkedKeys">
|
||||
</kendo-treeview>
|
||||
</div>
|
||||
<ng-template #noUserSelected>
|
||||
<div class="noData">
|
||||
<ng-lottie *ngIf="lottieOptions" [options]="lottieOptions" [styles]="lottieStyles"></ng-lottie>
|
||||
<p class="text-muted" *ngIf="!isLoading">
|
||||
{{ infoMessage }}
|
||||
</p>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container-fluid home-footer">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-12">
|
||||
<span class="text-center text-footer">
|
||||
© 2022 App Soluti Soluções em aplicativos moveis
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
363
src/app/admin/permission-user/permission-user.component.scss
Normal file
363
src/app/admin/permission-user/permission-user.component.scss
Normal file
@@ -0,0 +1,363 @@
|
||||
.wrapper {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
background-image: url("../../../assets/img/logo.svg");
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 80px !important;
|
||||
overflow: hidden;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.header-productlist {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 32px 64px;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
top: 0px;
|
||||
margin: 0px;
|
||||
|
||||
/*background: #2d2e83;*/
|
||||
background: #131d52;
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: static;
|
||||
height: 48px;
|
||||
|
||||
background: #1d1e67;
|
||||
border-radius: 5px;
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 1;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.name-user {
|
||||
position: static;
|
||||
width: 100%;
|
||||
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 19px;
|
||||
/* identical to box height */
|
||||
|
||||
color: #ffffff;
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
margin: 0px 0px;
|
||||
}
|
||||
|
||||
.last-access {
|
||||
position: static;
|
||||
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
|
||||
color: #848484;
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 1;
|
||||
flex-grow: 0;
|
||||
margin: 0px 0px;
|
||||
}
|
||||
|
||||
.img-config {
|
||||
position: static;
|
||||
background: #ffffff;
|
||||
flex: none;
|
||||
order: 2;
|
||||
flex-grow: 0;
|
||||
margin: 0px 16px;
|
||||
}
|
||||
|
||||
.center {
|
||||
// modificado
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.img-user {
|
||||
position: static;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
left: 8px;
|
||||
top: 6px;
|
||||
|
||||
background: url("../../../assets/img/img_user.svg");
|
||||
border-radius: 2px;
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
margin: 0px 16px;
|
||||
}
|
||||
|
||||
.home-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
/*background: #2d2e83;*/
|
||||
background: #131d52;
|
||||
}
|
||||
|
||||
.text-footer {
|
||||
position: static;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
/* identical to box height */
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.main-dashboard {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.new-order {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
position: static;
|
||||
background: #ff9521;
|
||||
border-radius: 5px;
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 1;
|
||||
flex-grow: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.text-button {
|
||||
position: static;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
/* identical to box height */
|
||||
|
||||
text-align: center;
|
||||
|
||||
color: #ffffff;
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.button-flat {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
position: static;
|
||||
background: #ffffff;
|
||||
border: 1px solid #ef7d00;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 1;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.side-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
|
||||
position: static;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
background: #ffffff;
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 0;
|
||||
align-self: stretch;
|
||||
flex-grow: 0;
|
||||
margin: 0px 0px;
|
||||
}
|
||||
|
||||
.text-button-flat {
|
||||
position: static;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
/* identical to box height */
|
||||
|
||||
text-align: center;
|
||||
|
||||
color: #ef7d00;
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.button-flat-blue {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
background: #ffffff;
|
||||
border: 1px solid #2d2e83;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 1;
|
||||
align-self: stretch;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.text-button-flat-blue {
|
||||
position: static;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
/* identical to box height */
|
||||
|
||||
text-align: center;
|
||||
|
||||
color: #2d2e83;
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.noData {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-muted{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* Responsividade */
|
||||
|
||||
/* Smartphones */
|
||||
@media (max-width: 575.98px) {
|
||||
.btnSbtn-formearch {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-page{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.noData {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.noData p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablets */
|
||||
@media (max-width: 991.98px) {
|
||||
.btn-form {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-page{
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktops */
|
||||
@media (min-width: 992px) {
|
||||
.btn-form {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.title-page{
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
192
src/app/admin/permission-user/permission-user.component.ts
Normal file
192
src/app/admin/permission-user/permission-user.component.ts
Normal file
@@ -0,0 +1,192 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { DropDownFilterSettings } from '@progress/kendo-angular-dropdowns';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { catchError, map } from 'rxjs/operators';
|
||||
import { AuthService } from 'src/app/auth/services/auth.service';
|
||||
import { UserService } from 'src/app/services/user.service';
|
||||
import { process } from '@progress/kendo-data-query';
|
||||
import { AnimationOptions } from 'ngx-lottie';
|
||||
|
||||
@Component({
|
||||
selector: 'app-permission-user',
|
||||
templateUrl: './permission-user.component.html',
|
||||
styleUrls: ['./permission-user.component.scss']
|
||||
})
|
||||
|
||||
export class PermissionUserComponent implements OnInit {
|
||||
|
||||
/* Header */
|
||||
public userName: string;
|
||||
public storeName: string;
|
||||
users: any[] = [];
|
||||
public checkedKeys: any[] = [];
|
||||
public data: any[] = [];
|
||||
public userSelected: any;
|
||||
public children = (dataItem: any): Observable<any[]> => of(dataItem.items);
|
||||
public hasChildren = (dataItem: any): boolean => !!dataItem.items;
|
||||
public permissions: any[] = [];
|
||||
public isUserLoading = false;
|
||||
public loadingIcon = '';
|
||||
public isLoading = false;
|
||||
public infoMessage = 'Por favor, selecione um usuário para carregar as permissões.';
|
||||
|
||||
public lottieOptions: AnimationOptions = {
|
||||
path: 'assets/animations/no-data.json',
|
||||
};
|
||||
|
||||
public lottieStyles = {
|
||||
width: '300px',
|
||||
height: '300px',
|
||||
};
|
||||
|
||||
constructor(private readonly authService: AuthService,
|
||||
private readonly userService: UserService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.userName = this.authService.getUserName();
|
||||
this.storeName = this.authService.getStoreName();
|
||||
this.userService.getUsers()
|
||||
.pipe(
|
||||
map((users) => {
|
||||
this.users = users;
|
||||
}))
|
||||
.subscribe();
|
||||
|
||||
if (!this.userSelected) {
|
||||
this.infoMessage = 'Nenhum usuário está selecionado.';
|
||||
}
|
||||
this.loadUsers();
|
||||
}
|
||||
|
||||
loadUsers() {
|
||||
this.isUserLoading = true;
|
||||
this.userService.getUsers()
|
||||
.pipe(
|
||||
map((users) => {
|
||||
this.users = users;
|
||||
this.isUserLoading = false;
|
||||
}),
|
||||
catchError((error) => {
|
||||
console.error('Erro ao carregar usuários:', error);
|
||||
this.isUserLoading = false;
|
||||
return of([]);
|
||||
})
|
||||
)
|
||||
.subscribe();
|
||||
}
|
||||
|
||||
logout() {
|
||||
this.authService.logout();
|
||||
}
|
||||
|
||||
public filterSettings: DropDownFilterSettings = {
|
||||
caseSensitive: false,
|
||||
operator: "contains",
|
||||
};
|
||||
|
||||
public valueNormalizer = (text: Observable<string>) =>
|
||||
text.pipe(
|
||||
map((content: string) => {
|
||||
return {
|
||||
value: this.permissions[this.permissions.length - 1]?.value + 1 || 1,
|
||||
text: content,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
forceUppercase(event: Event): void {
|
||||
const inputElement = event.target as HTMLInputElement;
|
||||
if (inputElement && inputElement.value) {
|
||||
inputElement.value = inputElement.value.toUpperCase();
|
||||
}
|
||||
}
|
||||
|
||||
setUserSelected(user: any) {
|
||||
console.log(user);
|
||||
this.userSelected = user;
|
||||
|
||||
if (!user) {
|
||||
this.permissions = [];
|
||||
this.checkedKeys = [];
|
||||
this.infoMessage = 'Por favor, selecione um usuário válido.';
|
||||
} else {
|
||||
this.checkedKeys = [];
|
||||
this.infoMessage = '';
|
||||
}
|
||||
}
|
||||
|
||||
getPermissionUser() {
|
||||
if (!this.userSelected) {
|
||||
console.warn('Nenhum usuário selecionado. Não é possível buscar permissões.');
|
||||
this.lottieOptions = { path: 'assets/animations/no-data.json' };
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoading = true;
|
||||
this.lottieOptions = { path: 'assets/animations/loading.json' };
|
||||
|
||||
this.userService.getPermissionUser(this.userSelected.userId)
|
||||
.pipe(
|
||||
map((permissions) => {
|
||||
this.permissions = permissions;
|
||||
this.loadPermissions(this.permissions);
|
||||
|
||||
// If permissions are found, stop the loading animation
|
||||
this.isLoading = false;
|
||||
this.lottieOptions = permissions.length > 0
|
||||
? { path: 'assets/animations/no-data.json' }
|
||||
: { path: 'assets/animations/no-data.json' };
|
||||
}),
|
||||
catchError((error) => {
|
||||
console.error('Erro ao carregar permissões do usuário:', error);
|
||||
this.isLoading = false; // Stop loading state
|
||||
this.lottieOptions = { path: 'assets/animations/no-data.json' }; // Error or no data animation
|
||||
return of([]); // Default return value in case of error
|
||||
})
|
||||
)
|
||||
.subscribe();
|
||||
}
|
||||
|
||||
savePermissions() {
|
||||
const permissionsId: number[] = [];
|
||||
const atividades: any[] = [];
|
||||
const actions: any[] = [];
|
||||
for (const key of this.checkedKeys) {
|
||||
const ids = key.split("_");
|
||||
if (ids.length > 2) {
|
||||
const module = this.permissions[ids[0]];
|
||||
const atividade = module.items[ids[1]];
|
||||
const action = atividade.items[ids[2]];
|
||||
if (action != undefined) {
|
||||
actions.push(action);
|
||||
}
|
||||
} else {
|
||||
const module = this.permissions[ids[0]];
|
||||
const atividade = module.items[ids[1]];
|
||||
if (atividade != undefined) {
|
||||
atividades.push(atividade);
|
||||
}
|
||||
}
|
||||
}
|
||||
const updatePermissions = { atividades: atividades, actions: actions };
|
||||
const userId = this.userSelected.userId;
|
||||
|
||||
this.userService.updatePermissionUser(userId, updatePermissions);
|
||||
}
|
||||
|
||||
loadPermissions(data: any) {
|
||||
this.checkedKeys = [];
|
||||
data.filter(permission => permission.allow == 'S')
|
||||
.forEach(permissionModule => {
|
||||
let indice_modulo = -1;
|
||||
let indice_atividade = -1;
|
||||
permissionModule.items
|
||||
.filter(permissionAtividade => permissionAtividade.allow == 'S')
|
||||
.forEach(permissionAtividade => {
|
||||
indice_modulo++;
|
||||
indice_atividade++;
|
||||
this.checkedKeys.push(`${indice_modulo}_${indice_atividade}`);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user