Editar informacion doc.

Grasia · Mar 18, 2018 · dbe8925 · dbe8925
1 parent 6e551f1
commit dbe8925
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 59 deletions.
diff --git a/src/app/doc.service.ts b/src/app/doc.service.ts
@@ -6,13 +6,13 @@ import {Doc} from './doc'
 export class DocService {
 
     documentos: Doc[] = [
-    { id: 1, nombre: 'Documento 1', creador: 'jorge', participante: 'carlos', texto: 'La guerra comercial abierta por Donald Trump ya tiene su primera víctima. El poderoso consejero económico de la Casa Blanca, Gary Cohn, ha presentado este martes su dimisión por sus diferencias con el presidente en la batalla arancelaria. La caída de Cohn supone una derrota del sector moderado frente a halcones, pero sobre todo, representa la partida de uno de los más prestigiosos miembros del gabinete, el cerebro de la reforma fiscal y uno de los pocos altos cargos capaz de enmendarle la plana al mandatario, como hizo en agosto pasado cuando Trump, tras el crimen racista de Charlottesville, mantuvo la equidistancia.' , etapa: 'llamada' },
+    { id: 1, nombre: 'Documento 1', creador: 'jorge', participante: 'carlos', texto: 'La guerra comercial abierta por Donald Trump ya tiene su primera víctima. El poderoso consejero económico de la Casa Blanca, Gary Cohn, ha presentado este martes su dimisión por sus diferencias con el presidente en la batalla arancelaria. La caída de Cohn supone una derrota del sector moderado frente a halcones, pero sobre todo, representa la partida de uno de los más prestigiosos miembros del gabinete, el cerebro de la reforma fiscal y uno de los pocos altos cargos capaz de enmendarle la plana al mandatario, como hizo en agosto pasado cuando Trump, tras el crimen racista de Charlottesville, mantuvo la equidistancia.' , etapa: 'llamada', descripcion: 'Descipcion del documento 1', referencias: 'La grandiosa Wikipedia' },
 
-    { id: 2, nombre: 'Documento 2', creador: 'carlos', participante: 'jorge', texto: 'Procedente de Goldman Sachs, Cohn, de 56 años, era un tecnócrata que apostaba más por el pacto que por la batalla. Pragmático, de verbo fácil y reconocido por sus colegas financieros, estaba en los antípodas del consejero comercial, Peter Navarro, el desmesurado economista que ha logrado que Trump rompa amarras y prepare la subida unilateral de aranceles al acero (25%) y el aluminio (10%). Una medida que la Unión Europea ha respondido con la amenaza de represalias.', etapa: 'revision'},
+    { id: 2, nombre: 'Documento 2', creador: 'carlos', participante: 'jorge', texto: 'Procedente de Goldman Sachs, Cohn, de 56 años, era un tecnócrata que apostaba más por el pacto que por la batalla. Pragmático, de verbo fácil y reconocido por sus colegas financieros, estaba en los antípodas del consejero comercial, Peter Navarro, el desmesurado economista que ha logrado que Trump rompa amarras y prepare la subida unilateral de aranceles al acero (25%) y el aluminio (10%). Una medida que la Unión Europea ha respondido con la amenaza de represalias.', etapa: 'revision', descripcion: 'Descipcion del documento 2', referencias: 'La grandiosa Wikipedia'},
 
-    { id: 3, nombre: 'Documento 3', creador: 'carlos', participante: 'carlos', texto: 'Cohn trató por todos los medios frenar la conflagración. Al igual que con el Tratado de Libre Comercio de América del Norte (TLCAN), buscó que primase la negociación. Pero en esta ocasión falló. Ni siquiera su triunfo con la titánica reforma fiscal, el mayor éxito político hasta la fecha de la Casa Blanca, le valió para hacer valer su palabra. Trump, jaleado por Navarro y los epígonos de Steve Bannon que aún quedan en la Casa Blanca, volvió a sus raíces, alzó la bandera del América Primero y anunció que las guerras comerciales son “buenas y fáciles de ganar”.', etapa: 'cambios'},
+    { id: 3, nombre: 'Documento 3', creador: 'carlos', participante: 'carlos', texto: 'Cohn trató por todos los medios frenar la conflagración. Al igual que con el Tratado de Libre Comercio de América del Norte (TLCAN), buscó que primase la negociación. Pero en esta ocasión falló. Ni siquiera su triunfo con la titánica reforma fiscal, el mayor éxito político hasta la fecha de la Casa Blanca, le valió para hacer valer su palabra. Trump, jaleado por Navarro y los epígonos de Steve Bannon que aún quedan en la Casa Blanca, volvió a sus raíces, alzó la bandera del América Primero y anunció que las guerras comerciales son “buenas y fáciles de ganar”.', etapa: 'cambios', descripcion: 'Descipcion del documento 3', referencias: 'La grandiosa Wikipedia'},
 
-    { id: 4, nombre: 'Documento 4', creador: 'jorge', participante: 'jorge', texto: 'El golpe fue excesivo para el financiero de Wall Street. Su teórico subordinado, Peter Navarro, le había ganado la partida y había impuesto la línea dura en un tema altamente volátil y que marcará la estrategia económica el mandato. Estados Unidos, en contra de su criterio, se enfrentaba a cara de perro con sus socios y vecinos. Europa, Canadá, México iban a sufrir los embates. Y el siguiente en la lista era China. El gigante asiático, que hasta ahora se ha mantenido a salvo de las iras de Trump por su apoyo en el cerco a Corea Norte, entraba en rumbo de colisión.', etapa: 'analisis' }
+    { id: 4, nombre: 'Documento 4', creador: 'jorge', participante: 'jorge', texto: 'El golpe fue excesivo para el financiero de Wall Street. Su teórico subordinado, Peter Navarro, le había ganado la partida y había impuesto la línea dura en un tema altamente volátil y que marcará la estrategia económica el mandato. Estados Unidos, en contra de su criterio, se enfrentaba a cara de perro con sus socios y vecinos. Europa, Canadá, México iban a sufrir los embates. Y el siguiente en la lista era China. El gigante asiático, que hasta ahora se ha mantenido a salvo de las iras de Trump por su apoyo en el cerco a Corea Norte, entraba en rumbo de colisión.', etapa: 'analisis', descripcion: 'Descipcion del documento 4', referencias: 'La grandiosa Wikipedia' }
 
     ];
 
@@ -26,6 +26,12 @@ export class DocService {
 
     }
 
+    actualizar():void{
+
+        this.documentos[this.activo.id-1] = this.activo;
+
+    }
+
     getTexto():string{
 
         return this.activo.texto;
@@ -53,7 +59,7 @@ export class DocService {
 
     add(titulo:string, creador:string){
 
-        this.documentos[this.documentos.length] = {id:this.documentos.length+1, nombre:titulo, creador: creador,  participante:creador, texto:'', etapa: 'redaccion'}
+        this.documentos[this.documentos.length] = {id:this.documentos.length+1, nombre:titulo, creador: creador,  participante:creador, texto:'', etapa: 'redaccion', descripcion: "", referencias: ""}
 
         this.activo = this.documentos[this.documentos.length-1];
 

diff --git a/src/app/doc.ts b/src/app/doc.ts
@@ -5,4 +5,6 @@ export class Doc {
     participante: string;
     texto:string;
     etapa:string;
+    descripcion: string;
+    referencias: string;
 }
diff --git a/src/app/documento/documento.component.css b/src/app/documento/documento.component.css
@@ -1,20 +1,24 @@
 
 .top{
-
+
+
     display: inline-block;
     width: 100%;
 
+
 }
 
 .izq{
-    
-    display: inline-block;
+
+    margin-top: 10px;
     float: left;
     text-align: left
 }
 
 .der{
 
+
+
     float: right;
 
 
@@ -23,7 +27,7 @@
 .bot{
 
     text-align: left;
-    
+
 
 }
 
@@ -35,3 +39,20 @@
 
 }
 
+.example-form {
+
+    width: 250%;
+    float: left;
+  }
+
+  .example-full-width {
+
+    width: 100%;
+  }
+
+  .boton{
+
+      color:#60708B;
+
+
+  }
diff --git a/src/app/documento/documento.component.html b/src/app/documento/documento.component.html
@@ -1,57 +1,85 @@
-<div class = "top">
-    <div class = "izq">
-        <button (click)="documentos()" class='boton' mat-raised-button>Volver</button>
-        <h2> Titulo: {{getNombre()}} </h2>
-        <h3> Fase: {{etapa()}} </h3>
-    </div>
-
-
-    <div class = "der">
-
-        <button (click)="verDoc()" class='boton' mat-raised-button>Ver documento</button>
-
+
+    <div class = "top">
+        <div class = "izq">
+            <button (click)="documentos()" class='boton' mat-raised-button>Volver</button>
+            <h2> Titulo: {{getNombre()}} </h2>
+            <h3> Fase: {{etapa()}} </h3>
+        </div>
+
+
+        <div class = "der">
+
+            <button (click)="verDoc()" class='boton' mat-raised-button>Ver documento</button>
+
+        </div>
     </div>
-</div>
 
-<div class = "bot">
-
-    <mat-tab-group>
-        <mat-tab class="cosa" label="Información">
-            <br><br>
-            <div>
-                Nombre: {{getNombre()}}<br><br>
-                Descripcion: <br><br>
-                Referencias: <br><br>
-            </div>
-        </mat-tab>
-        <mat-tab label="Fases">
-            <br><br>
-            <div>
-                Fechas especificadas para las diferentes fases del documento.
-            </div>
-        </mat-tab>
-        <mat-tab label="Analisis">
-            <br><br>
-            <div>
-                Resumenes de votos, estadisticas etc
-            </div>
-        </mat-tab>
-        <mat-tab label = "Versiones">
-            <br><br>
-            <div>
-                Versiones del documento
-            </div>
-        </mat-tab>
-        <mat-tab label = "Admins">
-            <br><br>
-            <div>
-                Administradores del documento
-            </div>
-        </mat-tab>
-    </mat-tab-group>
+    <div class = "bot">
 
+        <mat-tab-group>
+            <mat-tab class="cosa" label="Información">
+
+                <div class="izq" *ngIf = "!isEditar()">
+
+                    Nombre: {{getNombre()}}<br><br> 
+                    Descripcion: {{getDes()}}<br><br>
+                    Referencias: {{getRefs()}}<br><br>
+                </div>
+                <div class = "izq" *ngIf = "isEditar()">
+
+                    <form class="example-form">
+                        <mat-form-field class="example-full-width">
+                            <input matInput placeholder="{{getNombre()}}" #nombre>
+                        </mat-form-field><br><br>
+
+                        <mat-form-field class="example-full-width">
+                            <textarea matInput placeholder="{{getDes()}}" matTextareaAutoresize matAutosizeMinRows= "2" matAutosizeMaxRows="5"  #des></textarea>
+                        </mat-form-field>
+                        <br><br>
 
-</div>
+                        <mat-form-field class="example-full-width">
+                            <input matInput placeholder="{{getRefs()}}" #ref>
+                        </mat-form-field>
+                        <br><br>
+                        <button (click)="change(nombre.value, des.value, ref.value)" class='boton' mat-raised-button>Guardar</button>
+
+                    </form>
+
+
+                </div>
+                <div class="der">
+                    <button (click)="edit()" *ngIf="!isEditar()" class='boton' mat-raised-button>Editar</button>
+                    <button (click)="noEdit()" *ngIf="isEditar()" class='boton' mat-raised-button>Cancelar</button>
+                </div>
+            </mat-tab>
+            <mat-tab label="Fases">
+                <br><br>
+                <div>
+                    Fechas especificadas para las diferentes fases del documento.
+                </div>
+            </mat-tab>
+            <mat-tab label="Analisis">
+                <br><br>
+                <div>
+                    Resumenes de votos, estadisticas etc
+                </div>
+            </mat-tab>
+            <mat-tab label = "Versiones">
+                <br><br>
+                <div>
+                    Versiones del documento
+                </div>
+            </mat-tab>
+            <mat-tab label = "Admins">
+                <br><br>
+                <div>
+                    Administradores del documento
+                </div>
+            </mat-tab>
+        </mat-tab-group>
+
+
+    </div>
 
 
 

diff --git a/src/app/documento/documento.component.ts b/src/app/documento/documento.component.ts
@@ -17,6 +17,7 @@ export class DocumentoComponent implements OnInit{
 
     @Input() doc: Doc;
     error: string;
+    editar: boolean;
 
     constructor(private route: ActivatedRoute,
                private docService: DocService,
@@ -25,16 +26,64 @@ export class DocumentoComponent implements OnInit{
                ){};
 
 
+    change(nombre, des, ref){
+
+        this.doc.nombre = nombre;
+        this.doc.descripcion = des;
+        this.doc.referencias = ref;
+        this.docService.activo = this.doc;
+        this.docService.actualizar();
+        this.editar = false;
+
+
+
+    }
+
     ngOnInit(){
 
         this.doc = this.docService.getDoc(+this.route.snapshot.paramMap.get('id'));
         this.docService.activarDoc(this.doc);
+        this.editar = false;
        /* const documento = +this.route.snapshot.paramMap.get('id');
         this.docService.getDoc(documento)
             .subscribe(doc => this.doc = doc);
         */
     }
 
+    edit(){
+
+        this.editar = true;
+
+    }
+
+    noEdit(){
+
+        this.editar = false;
+
+    }
+
+    isEditar(){
+
+        return this.editar;
+
+    }
+
+
+    getRefs(){
+
+        return this.doc.referencias;
+
+
+    }
+
+
+    getDes(){
+
+        return this.doc.descripcion;
+
+
+    }
+
     verDoc(){
 
         if(this.doc.etapa == 'analisis') this.router.navigate(['/'+this.doc.etapa], {replaceUrl: true});

diff --git a/src/styles.css b/src/styles.css
@@ -3,6 +3,8 @@
 body { 
   font-family: Roboto, Arial, sans-serif;
   margin: 0;
+  margin-left: 30px;
+  margin-right: 30px;
 }
 
 .basic-container {