Commit a8c7006b authored by Elmer Mendoza's avatar Elmer Mendoza

commit inicial

parents
{
"directory": "bower_components"
}
.git
.gitignore
.dockerignore
*.md
docker
!docker/default.conf
!docker/entrypoint.sh
!docker/modules.admin.login-ldap.html
!docker/nginx.conf
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
{
"extends": "eslint:recommended",
"plugins": ["angular"],
"rules":{
"angular/di":[0]
},
"env": {
"browser": true,
"jasmine": true
},
"globals": {
"angular": true,
"module": true,
"inject": true
}
}
node_modules/
bower_components/
coverage/
.sass-cache/
.idea/
.tmp/
dist/
/src/app/index.constants.js
src/app/index.constants.js
/nbproject/private/
.jshintrc
oauth/config.js
runtime.env
{
"generator-gulp-angular": {
"version": "1.1.0",
"props": {
"angularVersion": "~1.5.3",
"angularModules": [
{
"key": "animate",
"module": "ngAnimate"
},
{
"key": "cookies",
"module": "ngCookies"
},
{
"key": "touch",
"module": "ngTouch"
},
{
"key": "sanitize",
"module": "ngSanitize"
},
{
"key": "messages",
"module": "ngMessages"
},
{
"key": "aria",
"module": "ngAria"
}
],
"jQuery": {
"key": "jquery2"
},
"resource": {
"key": "angular-resource",
"module": "ngResource"
},
"router": {
"key": "ui-router",
"module": "ui.router"
},
"ui": {
"key": "angular-material",
"module": "ngMaterial"
},
"cssPreprocessor": {
"key": "node-sass",
"extension": "scss"
},
"jsPreprocessor": {
"key": "noJsPrepro",
"extension": "js",
"srcExtension": "js"
},
"htmlPreprocessor": {
"key": "noHtmlPrepro",
"extension": "html"
},
"bootstrapComponents": {
"name": null,
"version": null,
"key": null,
"module": null
},
"foundationComponents": {
"name": null,
"version": null,
"key": null,
"module": null
},
"paths": {
"src": "src",
"dist": "dist",
"e2e": "e2e",
"tmp": ".tmp"
}
}
},
"generator-gulp-angular-subtask": {
"props": {
"language": "js",
"style": "scss",
"html": "html"
}
}
}
\ No newline at end of file
# Registro de cambios
.:: Plantillas Frontend ::.
==================================
.:: Plantillas Formly Frontend ::.
=================================================
A continuación se detalla la instalación de la aplicación frontend desde cero. El presente manual fue probado en un servidor con Debian 9.
Se debe realizar primeramente la instalación del proyecto del backend.
## A. INSTALACIÓN DE DEPENDENCIAS
Se requiere tener instaladas las siguientes dependencias: git, nvm, node (ver INSTALL.md del proyecto backend).
### 1. Activar nodejs
$ nvm use 6.9.x
### 2. Instalar las siguientes dependencias: gulp, bower
npm install -g gulp bower
### 3. Instalar generator-gulp-angular (para desarrollo)
npm install -g generator-gulp-angular
## B. INSTALACIÓN EN DESARROLLO
### 1. Clonar el proyecto
$ git clone <url-repositorio_proyecto_plantillas_frontend>
### 2. Instalar dependencias bower
Ingresar al directorio <proyecto_plantillas_frontend>
$ bower install
### 3. Instalar dependencias npm
$ npm install
### 4. Iniciar el proyecto
$ gulp serve
## C. INSTALACIÓN EN PRODUCCIÓN
### 1. Instalación de apache
$ sudo apt-get install apache2
### 2. Modificar la configuración de apache
$ sudo nano /etc/apache2/sites-enabled/000-default.conf
Cambiar la línea
DocumentRoot /var/www/html
Por
DocumentRoot /var/www/html/plantillas
Reiniciar apache
$ sudo /etc/init.d/apache2 restart
### 3. Clonar el proyecto
Moverse a la misma carpeta donde esta plantillas-formly-backend y ejecutar el siguiente comando (Nos pedirá usuario y contraseña de git)
$ git clone <url-repositorio_proyecto_plantillas_frontend>
### 4. Instalar dependencias npm
Ingresar a la carpeta _<proyecto_plantillas_frontend>_ y ejecutar el siguiente comando
$ npm install
### 5. Instalar dependencias bower
En este caso nos perdirá confirmaciones con opciones, se debe elegir siempre el número en que este la opción __app__
$ bower install
### 6. Modificar el archivo _index.constants.js_
$ nano src/app/index.constants.js
Asegurarse que las constantes authUrl, restUrl y backUrl deben apuntar al backend, por ejemplo:
.constant('timeAutoSave', 10) // tiempo de autoguardado de documentos en minutos
.constant('authUrl', 'https://<url_despliegue_proyecto_backend>/autenticar') // Auth
.constant('restUrl', 'https://<url_despliegue_proyecto_backend>/api/v1/') // Rest Api Backend
.constant('backUrl', 'https://<url_despliegue_proyecto_backend>/') // Backend
### 7. Generar el código minificado del proyecto (se creará la carpeta _dist_) y crear la carpeta _produccion_
$ gulp build
$ mkdir produccion
### 8. Renombrar la carpeta _dist_ a _plantillas_ y moverla dentro de _produccion_
$ mv dist plantillas
$ mv plantillas produccion/
### 9. Crear un enlace simbólico al proyecto compilado
$ sudo ln -s <ruta_real_del_directorio_del_proyecto_frontend>/produccion /var/www/html/plantillas
### 10. Actualizar el archivo index.html
Modificar _index.html_ del proyecto ejecutando los siguientes comandos:
```sh
sed -i -e 's/src=maps\//src=/g' dist/index.html
sed -i -e 's/.js.map/.js/g' dist/index.html
```
## D. Implementar seguridad en apache 2.4.10
Los siguientes cambios afectarán a todos los virtual hosts del servidor apache
### Eliminar información de servidor y modificar headers de respuesta
$ sudo nano /etc/apache2/apache2.conf
Añadir al final del archivo las líneas
#Eliminan información del servidor
#En paginas 404, 500 u otro que genera apache
ServerSignature Off
#En Headers de peticiones
ServerTokens Prod
#Modifican informacion de headers
<IfModule mod_headers.c>
Header set X-XSS-Protection "1; mode=block"
Header set X-Content-Type-Options "nosniff"
Header set X-Frame-Options sameorigin
Header unset "X-Powered-By"
</IfModule>
Habilitar el módulo headers
sudo a2enmod headers
Reiniciar el servicio de apache2
sudo /etc/init.d/apache2 restart
## Modalidad de autenticación.
La autenticación se puede configurar de tres formas diferentes:
a. Haciendo uso sólamente de la autenticación del sistema.
b. Haciendo uso del servicio de autenticación LDAP.
c. Haciendo uso del servicio de autenticación de Ciudadanía Digital.
Las tres opciones son excluyentes.
### a. Haciendo uso sólamente de la autenticación del sistema.
Para esto se puede dejar el código tal cual está. Sin embargo, se recomienda editar en el archivo ***/src/app/modules/admin/login/modules.admin.login.html***
la línea 12:
```sh
<img class="icon-circular-imagen ciudadania" src="assets/images/Ciudadania-Digital-Logo-v01-cuadrado.png" ng-click="login.iniciarSesion()">
```
y cambiarla por:
```sh
<img class="icon-circular-imagen ciudadania" src="assets/images/Ciudadania-Digital-Logo-v01-cuadrado.png">
```
### b. Haciendo uso del servicio de autenticación LDAP.
Para poder usar esta configuración, se recomienda editar en el archivo ***/src/app/modules/admin/login/modules.admin.login.html***
la línea 12:
```sh
<img class="icon-circular-imagen ciudadania" src="assets/images/Ciudadania-Digital-Logo-v01-cuadrado.png" ng-click="login.iniciarSesion()">
```
y cambiarla por:
```sh
<img class="icon-circular-imagen ciudadania" src="assets/images/Ciudadania-Digital-Logo-v01-cuadrado.png">
```
### c. Haciendo uso del servicio de autenticación de Ciudadanía Digital.
Para este caso, en el archivo ***/src/app/modules/admin/login/modules.admin.login.html*** , se debe eliminar las líneas 19 a la 33:
```sh
19 <!-- DEBE QUITARSE EL FORMULARIO SI SE DESEA TRABAJAR CON CIUDADANÍA -->
20 <form name="form" ng-submit="login.login()">
21 <md-input-container>
22 <label>Nombre de usuario</label>
23 <md-icon>person</md-icon><input ng-model="login.username" required>
24 </md-input-container>
25 <md-input-container>
26 <label>Contraseña</label>
27 <md-icon>lock</md-icon><input ng-model="login.password" type="password" required>
28 </md-input-container>
29 <md-button type="submit" class="md-raised md-primary" ng-disabled="form.$invalid">
30 Iniciar sesión
31 </md-button>
32 </form>
33 <!-- fin del FORMULARIO a borrar SI SE DESEA TRABAJAR CON CIUDADANÍA -->
```
This diff is collapsed.
This diff is collapsed.
## Sistema de documentos administrativos (Plantillas)
1. Objetivos del sistema
a. Objetivo Principal
El objetivo del sistema de documentos administrativos es tener una mejor administración de los documentos generados en la entidad, mediante el uso de tecnologías “open source” para la generación dinámica de documentos en base a plantillas configurables.
b. Objetivos Secundarios
- Desarrollo de un motor de plantillas que permita la configuración de documentos.
- Desarrollo de un módulo de asignación y control de CITE’s, basados por unidad y tipo de documento
- Desarrollo del módulo de historicos que permite obtener informacion sobre el flujo de un documento
- Desarrollo de los medios que permitan a un documento seguir los flujos establecidos.
- Desarrollo del módulo de presupuesto, para el control de las partidas presupuestarias
2. Tecnologías Utilizadas
Las Tecnologías utilizadas en el desarrollo de sistema son :
- NodeJS como entorno base de desarrollo para ambos casos.
BACKEND:
- ExpressJS como servidor de aplicaciones web.
- PostgreSQL como gestor de bases de datos.
- Sequelize como ORM(Object-Relational mapping).
- Passport JWT como mecanismos de autenticación.
- Babel compilador de ECMA6 a ECMA5
- MomentJS manejador de la generacion de datos tipo fecha,hora,segundos,etc.
- Uuid(v4) generador aleatorio de caracteres.
- helmet como herramienta de configuración de seguridad.
FRONTEND:
- Gulp como medio de automatización de tareas.
- Angular(v1.5) como entorno base
- Angular-Material como medio de desarrollo de la interfaz de usuario(maquetación)
- Angular-Formly como generador de componentes(Plantilla)
- html como herramienta de maquetación web
- css como herramienta de estilos
3. Autenticación
La autenticación se puede configurar:
- Haciendo uso del servicio de autenticación de Ciudadanía Digital.
- Haciendo uso del servicio de autenticación LDAP.
- Haciendo uso de la autenticación del sistema.
Las tres opciones son excluyentes entre ellas.
4. Firma digital
Para darle validez a toda la documentación generada en el sistema, la misma deberá ser firmada por los actores de cada documento. Para este efecto se usará FIRMATIC (Ver documentación en el repositorio)
5. Backend
Este proyecto depende directamente de un backend cuyo código se halla en este mismo repositorio (revise el proyecto_plantillas_backend)
6. Instalación del frontend
Para la instalación del proyecto frontend revise el archivo [INSTALL.md](INSTALL.md).
Es importante mencionar que para poder instalar el frontend, se debe tener instalado el proyecto backend primero.
7. Manual de usuario
El manual de usuario se encuentra en la carpeta ***docs*** del proyecto backend.
\ No newline at end of file
## DESARROLLO
Para realizar un control integral del presupuesto se desarrollo el "__Módulo de Presupuesto__" en el sistema de Plantillas el cual, esta disponible en los roles de “_Configurador de Plantillas_” y “_Usuario_” a continuación se describe las opciones disponibles:
1. ### ROL DE CONFIGURADOR DE PLANTILLAS
En el Menú de creación de Plantillas se habilitara un componente web llamado "__Caja chica__", que debe ser insertado en la plantilla el cual contiene las siguientes modalidades de funcionamiento:
- GESTIÓN DE PARTIDAS: Habilita al componente para registrar el presupuesto inicial de determinadas partidas presupuestarias y/o las modificaciones presupuestarias a las mismas.
- COMPROMETIDO: Habilita al componente para registrar presupuesto comprometido.
- PAGADO: Habilita al componente para pagar partidas comprometidas.
2. ### ROL DE USUARIO
Para los usuarios del sistema de plantillas, una vez ingresando al sistema se le mostrarán las 3 nuevas plantillas con una modalidad específica realizada por el configurador de Plantillas, a continuación se describen las modalidades:
#### GESTIÓN DE PARTIDAS PRESUPUESTARIAS
Seleccionando las opción de:
- INICIAR PARTIDAS: Debe llenar los datos de Partida (Número de la Partida Prespuestaria), Descripción (Nombre Referencial de la Partida) y Monto Inicial, en el cual tiene una validación para que no se pueda agregar la misma partida ya iniciada.
- MODIFICAR PARTIDAS: Debe agregar una Partida mediante el buscador de Partidas Presupuestarias, posteriormente llenar la Descripción y Monto. El Monto introducido es la afectación de adición (Valores Positivos) o resta (Valores Negativos) a la Partida Seleccionada, donde la validación condiciona a que la partida inicial o actual no tenga valor negativo después de una resta.
#### COMPROMETIENDO PRESUPUESTO
Con el buscador de partidas el usuario debe seleccionar las partidas a ser comprometidas en el documento, posteriormente puede agregar un _detalle_ y un _monto positivo_. El sistema automáticamente validará que no se pueda comprometer más allá del presupuesto actual de una partida.
Se puede crear comprometidos de dos tipos:
- SIMPLE: Opción por defecto, el valor comprometido se cerrará con un solo pago si queda saldo este será transferido al presupuesto de la partida actual.
- MÚLTIPLE: Con esta opción el valor comprometido se cerrará tras múltiples pagos, para ello seleccionar la opción _Pagado múltiple_,
#### PAGANDO PRESUPUESTO
El usuario con el buscador de Documentos por CITE, debe seleccionar un documentos donde comprometió presupuesto y el sistema agregará de manera inmediata las partidas comprometidas que no fueron pagadas o finalizadas de dicho documento, posteriormente en la columna _Pagado_ se introducirá
los montos a pagar.
En el caso de Pago Múltiple, un pago múltiple sera finalizado cuando se establezca un pago de valor 0.
#### REVERSIÓN DE PRESUPUESTO
Para realizar una reversión de un valor comprometido de pago simple o múltiple, se debe realizar un pago del valor comprometido con monto de valor 0.
\ No newline at end of file
.:: Plantillas Frontend ::.
=================================================
A continuación se detalla la actualización de la aplicación.
## ACTUALIZACIÓN DE LA APLICACIÓN
### Actualizar el proyecto
Ingresar al directorio '<nombre_proyecto_frontend>'
Ejecutar el siguiente comando:
$ git pull origin master
##### Nota. Revisar la configuraciones antes de compilar.
Después ejecutar:
$ gulp build
Verificar la creación de la carpeta dist
ls
### Actualizar el archivo index.html
Ejecutar los siguientes comandos:
```sh
sed -i -e 's/src=maps\//src=/g' dist/index.html
sed -i -e 's/.js.map/.js/g' dist/index.html
```
Renombrar la carpeta dist a plantillas:
$ mv dist plantillas
Eliminar la carpeta actual del proyecto y mover la carpeta plantillas a producción
rm -rf produccion/plantillas
mv plantillas produccion/
{
"name": "app",
"version": "0.0.1",
"dependencies": {
"angular-animate": "1.5.3",
"angular-sanitize": "1.5.3",
"angular-messages": "1.5.3",
"jquery": "3.0.0",
"angular-ui-router": "0.2.15",
"angular-material": "1.1.0",
"moment": "2.10.6",
"animate.css": "3.4.0",
"angular": "1.5.8",
"angular-material-data-table": "0.10.9",
"angular-formly-material": "0.14.1",
"satellizer": "0.14.0",
"angular-leaflet-directive": "0.10.0",
"angular-drag-and-drop-lists": "1.4.0",
"angular-file-upload": "2.3.4",
"angularjs-slider": "5.9.0",
"angular-timeline": "1.7.0",
"angular-base64-upload": "0.1.19",
"simple-hotkeys": "1.0.3",
"simple-uploader": "2.0.7",
"simple-module": "2.0.6",
"angular-bind-html-compile": "1.3.0",
"chart.js": "2.5.0",
"pdf.js-viewer": "1.6.211",
"ng-csv": "0.3.6",
"axios": "0.18.0"
},
"devDependencies": {
"angular-mocks": "1.5.8"
},
"resolutions": {
"angular-messages": "1.5.3",
"angular-animate": "1.5.3",
"angular-material": "1.1.0",
"jquery": "3.0.0",
"angular": "1.5.8"
}
}
{
"globals": {
"browser": false,
"element": false,
"by": false,
"$": false,
"$$": false
}
}
/**
* This file uses the Page Object pattern to define the main page for tests
* https://docs.google.com/presentation/d/1B6manhG0zEXkC-H-tPo2vwU06JhL8w9-XCF9oehXzAQ
*/
'use strict';
var MainPage = function() {
this.jumbEl = element(by.css('.jumbotron'));
this.h1El = this.jumbEl.element(by.css('h1'));
this.imgEl = this.jumbEl.element(by.css('img'));
this.thumbnailEls = element(by.css('body')).all(by.repeater('awesomeThing in main.awesomeThings'));
};
module.exports = new MainPage();
'use strict';
describe('The main view', function () {
var page;
beforeEach(function () {
browser.get('/index.html');
page = require('./main.po');
});
it('should include jumbotron with correct data', function() {
expect(page.h1El.getText()).toBe('\'Allo, \'Allo!');
expect(page.imgEl.getAttribute('src')).toMatch(/assets\/images\/yeoman.png$/);
expect(page.imgEl.getAttribute('alt')).toBe('I\'m Yeoman');
});