Add translations language for archivos component

Frontend Angular 4/src/app/layout/archivos/archivos.component.html

@@ -2,7 +2,7 @@
 <div class="container-fluid">
     <div class="row">
         <div class="col-lg-5">
-            <label for="search">Nombre del archivo:</label>
+            <label for="search">{{ "i18n.msg.file.fileName" | translate }}:</label>
             <div class="input-group">
                 <input type="text" class="form-control" id="search" [(ngModel)]=filtroNombre>
                 <span class="input-group-addon fa fa-search">
@@ -15,7 +15,7 @@
     <div class="row" style="margin-top: 20px">
         <div class="col-lg-5">
             <ngb-tabset [destroyOnHide]=false>
-                <ngb-tab title="Mis archivos">
+                <ngb-tab title='{{ "i18n.msg.file.myFiles" | translate }}'>
                     <ng-template ngbTabContent>
 
                         <div class="card">
@@ -29,7 +29,16 @@
                                     <i class="fa fa-plus"></i> 
                                 </buton> -->
                                 <div class="btn-group pull-right" style="cursor: pointer;    margin-top: -42px; height: 30px;    width: 29px;">
-                                  <button ngbPopover="Nuevo"  triggers="mouseenter:mouseleave" data-placement="bottom" style="cursor: pointer;border-radius: 3px;" type="button" class="btn btn-sm btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                  <button
+                                    ngbPopover='{{ "i18n.action.new" | translate | titleCase }}'
+                                    triggers="mouseenter:mouseleave"
+                                    data-placement="bottom"
+                                    style="cursor: pointer;border-radius: 3px;"
+                                    type="button"
+                                    class="btn btn-sm btn-secondary"
+                                    data-toggle="dropdown"
+                                    aria-haspopup="true"
+                                    aria-expanded="false">
                                     <i class="fa fa-plus"></i> 
                                   </button>
                                   <div class="dropdown-menu">
@@ -40,7 +49,16 @@
                                 </div>
 
                                 <div class="btn-group pull-right" style="cursor: pointer;    margin-top: -42px; height: 30px;    width: 29px; margin-right: 36px;">
-                                  <button ngbPopover="Ordenar"  triggers="mouseenter:mouseleave" data-placement="bottom" style="cursor: pointer;border-radius: 3px;width: 36px;" type="button" class="btn btn-sm btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                  <button 
+                                    ngbPopover='{{ "i18n.action.order" | translate | titleCase }}'
+                                    triggers="mouseenter:mouseleave"
+                                    data-placement="bottom"
+                                    style="cursor: pointer;border-radius: 3px;width: 36px;"
+                                    type="button"
+                                    class="btn btn-sm btn-secondary"
+                                    data-toggle="dropdown"
+                                    aria-haspopup="true"
+                                    aria-expanded="false">
                                     <i class="fa fa-sort"></i> 
                                   </button>
                                   <div class="dropdown-menu">
@@ -71,7 +89,7 @@
 
                     </ng-template>
                 </ngb-tab>
-                <ngb-tab title="Compartidos">
+                <ngb-tab title='{{ "i18n.msg.file.shared" | translate }}'>
                     <ng-template ngbTabContent>
 
                         <div class="card" *ngIf="esAlumno">
@@ -98,13 +116,28 @@
         <div class="col-lg-7">
             <div class="card">
                 <div class="card-header">
-                    <button ngbPopover="Cargar/Editar" data-placement="bottom" triggers="mouseenter:mouseleave" class="btn btn-sm btn-secondary pull-left mr-2" (click)="cargarArchivo()">
+                    <button
+                        ngbPopover='{{ "i18n.action.load" | translate | titleCase }}/{{ "i18n.action.edit" | translate | titleCase }}'
+                        data-placement="bottom"
+                        triggers="mouseenter:mouseleave"
+                        class="btn btn-sm btn-secondary pull-left mr-2"
+                        (click)="cargarArchivo()">
                         <i class="fa fa-pencil"></i>
                     </button>
-                    <button ngbPopover="Eliminar" data-placement="bottom" triggers="mouseenter:mouseleave" class="btn btn-sm btn-secondary pull-left mr-2" (click)="mostrarEliminarDialogo()">  
+                    <button
+                        ngbPopover='{{ "i18n.action.delete" | translate | titleCase }}'
+                        data-placement="bottom"
+                        triggers="mouseenter:mouseleave"
+                        class="btn btn-sm btn-secondary pull-left mr-2"
+                        (click)="mostrarEliminarDialogo()">  
                         <i class="fa fa-remove"></i> 
                     </button>
-                    <button ngbPopover="Mover Archivo"data-placement="bottom" triggers="mouseenter:mouseleave" class="btn btn-sm btn-secondary pull-left mr-2" (click)="seleccionarDirectorioAMover()">  
+                    <button
+                        ngbPopover='{{ "i18n.action.move" | translate | titleCase }} {{ "i18n.object.file" | translate | titleCase }}'
+                        data-placement="bottom"
+                        triggers="mouseenter:mouseleave"
+                        class="btn btn-sm btn-secondary pull-left mr-2"
+                        (click)="seleccionarDirectorioAMover()">  
                         <i class="fa fa-cut"></i> 
                     </button>
 
@@ -116,20 +149,31 @@
                     
                     <div class="pull-left mr-2" *ngIf="esAlumno && (archivoSeleccionado?.estado == 'Entregado')">{{archivoSeleccionado.estado}} - </div>
 
-                    <button *ngIf="esAlumno && archivoSeleccionado?.estado == 'Corregido'" class="btn btn-sm btn-secondary pull-left mr-2" (click)="verCalificacion()">Ver calificacion</button>
+                    <button 
+                        *ngIf="esAlumno && archivoSeleccionado?.estado == 'Corregido'"
+                        class="btn btn-sm btn-secondary pull-left mr-2"
+                        (click)="verCalificacion()">
+                        {{ "i18n.msg.file.viewCalification" | translate }}
+                    </button>
 
-                    <button *ngIf="!esAlumno" class="btn btn-sm btn-secondary pull-left mr-2" (click)="compartirArchivo()">Compartir</button>
+                    <button *ngIf="!esAlumno" class="btn btn-sm btn-secondary pull-left mr-2" (click)="compartirArchivo()">
+                        {{ "i18n.action.share" | translate | titleCase }}
+                    </button>
 
                     <div class="pull-left" *ngIf="archivoSeleccionado">
-                        Nombre: {{archivoSeleccionado?.nombre}} - Creado: {{archivoSeleccionado?.fechaCreacion | date}}
+                        {{ "i18n.object.name" | translate | titleCase }}:
+                        {{archivoSeleccionado?.nombre}}
+                        &nbsp;-&nbsp;
+                        {{ "i18n.msg.file.created" | translate }}:
+                        {{archivoSeleccionado?.fechaCreacion | date}}
                     </div>
-                    <div class="pull-left" *ngIf="!archivoSeleccionado">Seleccione un archivo para previsualizarlo</div>
+                    <div class="pull-left" *ngIf="!archivoSeleccionado">{{ "i18n.msg.file.preview" | translate }}</div>
                     <div class="pull-right" *ngIf="archivoSeleccionado">
                         <label class="custom-control custom-checkbox" *ngIf="!esAlumno">
                           <input type="checkbox"  *ngIf="archivoSeleccionado.editable" (click)="setSoloLectura()" class="custom-control-input">
                           <input type="checkbox"  *ngIf="!archivoSeleccionado.editable" checked (click)="setSoloLectura()" class="custom-control-input">
                           <span class="custom-control-indicator"></span>
-                          <span class="custom-control-description">Solo lectura</span>
+                          <span class="custom-control-description">{{ "i18n.msg.file.readOnly" | translate }}</span>
                       </label>
                   </div>
               </div>
@@ -138,8 +182,13 @@
                     <i style="color: rgb(220,220,220); font-size: 10em; padding: 0.1em" class="fa fa-file-text"></i>    
                 </div>                    
             </div>
-            <codemirror class="codemirrorArchivo" *ngIf="archivoSeleccionado" [(ngModel)]="preview" [config]="configCodeMirror" [ngStyle]="{'font-size': configCodeMirror.fontSize+'px'}">
-                </codemirror>
+            <codemirror
+                class="codemirrorArchivo"
+                *ngIf="archivoSeleccionado"
+                [(ngModel)]="preview"
+                [config]="configCodeMirror"
+                [ngStyle]="{'font-size': configCodeMirror.fontSize+'px'}">
+            </codemirror>
         </div>
 
     </div>

Frontend Angular 4/src/app/layout/archivos/archivos.component.ts

@@ -14,6 +14,7 @@ import { ConfirmComponent } from '../../shared/modal/confirm.component';
 import { SeleccionarDirectorioMove } from './seleccionarDirectorio.component';
 import { CodemirrorComponent } from 'ng2-codemirror';
 import { NgbPopoverConfig, NgbPopover} from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
 
 import 'codemirror/mode/haskell/haskell';
 import 'codemirror/addon/display/panel';
@@ -49,7 +50,8 @@ export class ArchivosComponent {
 		private authService: AuthenticationService,
 		private haskellService: HaskellService,
 		private sessionService: SessionService,
-		private dialogService:DialogService
+		private dialogService:DialogService,
+		public translate: TranslateService
 		){
 		this.esAlumno = JSON.parse(sessionStorage.getItem("currentUser")).tipo ==="alumno";
 		this.directorioActual = {};

Frontend Angular 4/src/app/layout/archivos/archivos.module.ts

@@ -14,10 +14,22 @@ import { DialogService } from "ng2-bootstrap-modal";
 import { BootstrapModalModule } from 'ng2-bootstrap-modal';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { CodemirrorModule } from 'ng2-codemirror';
-import { NotificacionModule } from '../../notificacion/notificacion.module'; 
+import { NotificacionModule } from '../../notificacion/notificacion.module';
+import { I18nModule } from '../../shared/modules/translate/i18n.module';
+import { TitleCaseModule } from '../../shared/modules/titlecase.module';
 
 @NgModule({
-    imports: [CommonModule, ArchivosRoutingModule, FormsModule,BootstrapModalModule, NgbModule, CodemirrorModule,NotificacionModule],
+    imports: [
+        CommonModule,
+        ArchivosRoutingModule,
+        FormsModule,
+        BootstrapModalModule,
+        NgbModule,
+        CodemirrorModule,
+        NotificacionModule,
+        I18nModule,
+        TitleCaseModule
+    ],
     declarations: [ArchivosComponent, FilterPipe,NuevoArchivo, VerCalificacionComponent, ConfirmComponent, CompartirArchivoComponent,ConfirmarEliminar, SeleccionarDirectorioMove],
     entryComponents: [
         NuevoArchivo, 

Frontend Angular 4/src/app/layout/matefun/matefun.component.html

@@ -11,7 +11,7 @@
                     <form>
                         <input type="text" name="archivo" class="nomArchivoInp form-control form-control-sm" 
                         [disabled]="!archivo.editable || archivo.estado=='Corregido' || archivo.estado == 'Entregado'"
-                        *ngIf="archivo" [(ngModel)]="archivo.nombre" (keyup)="archivoModificado()" placeholder='{{ "i18n.msg.codemirror.fileName" | translate }}' />
+                        *ngIf="archivo" [(ngModel)]="archivo.nombre" (keyup)="archivoModificado()" placeholder='{{ "i18n.msg.file.fileName" | translate }}' />
 
                         <button
                             id="downloadFileButton"

Frontend Angular 4/src/assets/i18n/en.json

@@ -3,7 +3,7 @@
         "action" : {
             "login" : "login",
             "new" : "new",
-            "load" : "laod",
+            "load" : "load",
             "reload" : "reload",
             "restart" : "restart",
             "save" : "save",
@@ -12,11 +12,16 @@
             "center" : "center",
             "delete" : "delete",
             "download": "download",
-            "exit" : "exit"
+            "exit" : "exit",
+            "order": "order",
+            "edit": "edit",
+            "move": "move",
+            "share": "share"
         },
         "object" : {
             "settings" : "settings",
             "theme" : "theme",
+            "name" : "name",
             "user" : "user",
             "password" : "password",
             "guest" : "guest",
@@ -40,12 +45,20 @@
                 "fontSize" : "Font Size",
                 "functionWarnings": "Show warnings of use of functions",
                 "infixOperatorsWarnings" : "Show warnings of use of infix operators",
-                "fileName" : "File name",
                 "cursorPosition" : "Cursor position"
             },
             "figure" : {
                 "multiPlot" : "Multi graph",
                 "animationSpeed" : "Animation speed"
+            },
+            "file" : {
+                "fileName" : "File name",
+                "preview" : "Select a file to preview",
+                "myFiles" : "My files",
+                "shared" : "Shared",
+                "created": "Created",
+                "readOnly": "Read Only",
+                "viewCalification": "View Calification"
             }
         }
     }

Frontend Angular 4/src/assets/i18n/es.json

@@ -12,10 +12,15 @@
             "center" : "centrar",
             "delete" : "borrar",
             "download": "descargar",
-            "exit" : "salir"
+            "exit" : "salir",
+            "order": "ordenar",
+            "edit": "editar",
+            "move": "mover",
+            "share": "compartir"
         },
         "object" : {
             "settings" : "configuración",
+            "name" : "nombre",
             "user" : "usuario",
             "theme" : "tema",
             "password" : "contraseña",
@@ -40,12 +45,20 @@
                 "fontSize" : "Tamaño de fuente",
                 "functionWarnings": "Mostrar advertencias de uso de funciones",
                 "infixOperatorsWarnings" : "Mostrar advertencias de uso de operadores infijos",
-                "fileName" : "Nombre de archivo",
                 "cursorPosition" : "Posición del cursor"
             },
             "figure" : {
                 "multiPlot" : "Multi gráfica",
                 "animationSpeed" : "Velocidad de animación"
+            },
+            "file" : {
+                "fileName" : "Nombre de archivo",
+                "preview" : "Seleccione un archivo para previsualizarlo",
+                "myFiles" : "Mis archivos",
+                "shared" : "Compartidos",
+                "created": "Creado",
+                "readOnly": "Sólo lectura",
+                "viewCalification": "Ver Calificación"
             }
         }
     }