Se actualizan modales y editor CodeMirror

 - Ya no se usa más la dependencia ng2-bootstrap-modal para diseñar los modales.

 - Los modales fueron rediseñados completamente como Web Components usando el compilador StencilJS. Estos Web components funcionaran correctamente en las siguientes versiones de Angular, ya que no dependen de la versión de Angular para funcionar; más aún, dichos Web Components pueden funcionar en varios framework (React, Vue y Ember) y JavaScript, con minima configuración.
  La UI de los modales están en los Web Components y el compartamiento y comunicación con el Back-end están implementados del lado de Angular. La interacción entre los Web Components para consumir servicios del Back-end se realiza capturando los eventos que exponen los Web Components.

 - Ya no se usa más la dependencia ng2-codemirror para modelar el editor de texto.

 - El editor de texto ahora se modela con las dependencias codemirror y lt-codemirror, las cuales tienen una configuración prácticamente idéntica a la antigua dependencia ng2-codemirror.

Frontend Angular 4/angular.json

@@ -90,10 +90,10 @@
               "src/styles/console.css",
               "src/styles/hints.css",
               "node_modules/tippy.js/dist/tippy.css",
-              "node_modules/codemirror/lib/codemirror.css",
-              "node_modules/codemirror/addon/hint/show-hint.css",
-              "node_modules/codemirror/addon/dialog/dialog.css",
-              "node_modules/codemirror/addon/search/matchesonscrollbar.css"
+              "node_modules/lt-codemirror/lib/lt-codemirror.css",
+              "node_modules/lt-codemirror/addon/hint/show-hint.css",
+              "node_modules/lt-codemirror/addon/dialog/dialog.css",
+              "node_modules/lt-codemirror/addon/search/matchesonscrollbar.css"
             ],
             "assets": ["src/assets", "src/favicon.ico", "src/.htaccess"]
           }

Frontend Angular 4/browserslist

+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file

Frontend Angular 4/custom codemirror/jump-to-line.js

@@ -4,17 +4,20 @@
 // Defines jumpToLine command. Uses dialog.js if present.
 
 (function (mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
+  if (typeof exports == "object" && typeof module == "object")
+    // CommonJS
     mod(require("../../lib/codemirror"), require("../dialog/dialog"));
-  else if (typeof define == "function" && define.amd) // AMD
+  else if (typeof define == "function" && define.amd)
+    // AMD
     define(["../../lib/codemirror", "../dialog/dialog"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
+  // Plain browser env
+  else mod(CodeMirror);
 })(function (CodeMirror) {
   "use strict";
 
   function dialog(cm, text, shortText, deflt, f) {
-    if (cm.openDialog) cm.openDialog(text, f, {value: deflt, selectValueOnOpen: true});
+    if (cm.openDialog)
+      cm.openDialog(text, f, { value: deflt, selectValueOnOpen: true });
     else f(prompt(shortText, deflt));
   }
 
@@ -22,27 +25,33 @@
     'Ir a la línea: <input type="text" style="width: 10em" class="CodeMirror-search-field"/> <span style="color: #888" class="CodeMirror-search-hint"></span>';
 
   function interpretLine(cm, string) {
-    var num = Number(string)
-    if (/^[-+]/.test(string)) return cm.getCursor().line + num
-    else return num - 1
+    var num = Number(string);
+    if (/^[-+]/.test(string)) return cm.getCursor().line + num;
+    else return num - 1;
   }
 
   CodeMirror.commands.jumpToLine = function (cm) {
     var cur = cm.getCursor();
-    dialog(cm, jumpDialog, "Jump to line:", (cur.line + 1) + ":" + cur.ch, function(posStr) {
+    dialog(
+      cm,
+      jumpDialog,
+      "Jump to line:",
+      cur.line + 1 + ":" + cur.ch,
+      function (posStr) {
         if (!posStr) return;
 
         var match;
-      if (match = /^\s*([\+\-]?\d+)\s*\:\s*(\d+)\s*$/.exec(posStr)) {
-        cm.setCursor(interpretLine(cm, match[1]), Number(match[2]))
-      } else if (match = /^\s*([\+\-]?\d+(\.\d+)?)\%\s*/.exec(posStr)) {
-        var line = Math.round(cm.lineCount() * Number(match[1]) / 100);
+        if ((match = /^\s*([\+\-]?\d+)\s*\:\s*(\d+)\s*$/.exec(posStr))) {
+          cm.setCursor(interpretLine(cm, match[1]), Number(match[2]));
+        } else if ((match = /^\s*([\+\-]?\d+(\.\d+)?)\%\s*/.exec(posStr))) {
+          var line = Math.round((cm.lineCount() * Number(match[1])) / 100);
           if (/^[-+]/.test(match[1])) line = cur.line + line + 1;
           cm.setCursor(line - 1, cur.ch);
-      } else if (match = /^\s*\:?\s*([\+\-]?\d+)\s*/.exec(posStr)) {
+        } else if ((match = /^\s*\:?\s*([\+\-]?\d+)\s*/.exec(posStr))) {
           cm.setCursor(interpretLine(cm, match[1]), cur.ch);
         }
-    });
+      }
+    );
   };
 
   CodeMirror.keyMap["default"]["Alt-G"] = "jumpToLine";

Frontend Angular 4/custom codemirror/search.js

@@ -10,22 +10,32 @@
 // Ctrl-G.
 
 (function (mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"), require("./searchcursor"), require("../dialog/dialog"));
-  else if (typeof define == "function" && define.amd) // AMD
+  if (typeof exports == "object" && typeof module == "object")
+    // CommonJS
+    mod(
+      require("../../lib/codemirror"),
+      require("./searchcursor"),
+      require("../dialog/dialog")
+    );
+  else if (typeof define == "function" && define.amd)
+    // AMD
     define(["../../lib/codemirror", "./searchcursor", "../dialog/dialog"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
+  // Plain browser env
+  else mod(CodeMirror);
 })(function (CodeMirror) {
   "use strict";
 
   function searchOverlay(query, caseInsensitive) {
     if (typeof query == "string")
-      query = new RegExp(query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"), caseInsensitive ? "gi" : "g");
+      query = new RegExp(
+        query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"),
+        caseInsensitive ? "gi" : "g"
+      );
     else if (!query.global)
       query = new RegExp(query.source, query.ignoreCase ? "gi" : "g");
 
-    return {token: function(stream) {
+    return {
+      token: function (stream) {
         query.lastIndex = stream.pos;
         var match = query.exec(stream.string);
         if (match && match.index == stream.pos) {
@@ -36,7 +46,8 @@
         } else {
           stream.skipToEnd();
         }
-    }};
+      },
+    };
   }
 
   function SearchState() {
@@ -54,7 +65,10 @@
 
   function getSearchCursor(cm, query, pos) {
     // Heuristic: if the query string is all lowercase, do a case insensitive search.
-    return cm.getSearchCursor(query, pos, {caseFold: queryCaseInsensitive(query), multiline: true});
+    return cm.getSearchCursor(query, pos, {
+      caseFold: queryCaseInsensitive(query),
+      multiline: true,
+    });
   }
 
   function persistentDialog(cm, text, deflt, onEnter, onKeyDown) {
@@ -62,13 +76,16 @@
       value: deflt,
       selectValueOnOpen: true,
       closeOnEnter: false,
-      onClose: function() { clearSearch(cm); },
-      onKeyDown: onKeyDown
+      onClose: function () {
+        clearSearch(cm);
+      },
+      onKeyDown: onKeyDown,
     });
   }
 
   function dialog(cm, text, shortText, deflt, f) {
-    if (cm.openDialog) cm.openDialog(text, f, {value: deflt, selectValueOnOpen: true});
+    if (cm.openDialog)
+      cm.openDialog(text, f, { value: deflt, selectValueOnOpen: true });
     else f(prompt(shortText, deflt));
   }
 
@@ -79,22 +96,22 @@
 
   function parseString(string) {
     return string.replace(/\\(.)/g, function (_, ch) {
-      if (ch == "n") return "\n"
-      if (ch == "r") return "\r"
-      return ch
-    })
+      if (ch == "n") return "\n";
+      if (ch == "r") return "\r";
+      return ch;
+    });
   }
 
   function parseQuery(query) {
     var isRE = query.match(/^\/(.*)\/([a-z]*)$/);
     if (isRE) {
-      try { query = new RegExp(isRE[1], isRE[2].indexOf("i") == -1 ? "" : "i"); }
-      catch(e) {} // Not a regular expression after all, do a string search
+      try {
+        query = new RegExp(isRE[1], isRE[2].indexOf("i") == -1 ? "" : "i");
+      } catch (e) {} // Not a regular expression after all, do a string search
     } else {
-      query = parseString(query)
+      query = parseString(query);
     }
-    if (typeof query == "string" ? query == "" : query.test(""))
-      query = /x^/;
+    if (typeof query == "string" ? query == "" : query.test("")) query = /x^/;
     return query;
   }
 
@@ -105,11 +122,20 @@
     state.queryText = query;
     state.query = parseQuery(query);
     cm.removeOverlay(state.overlay, queryCaseInsensitive(state.query));
-    state.overlay = searchOverlay(state.query, queryCaseInsensitive(state.query));
+    state.overlay = searchOverlay(
+      state.query,
+      queryCaseInsensitive(state.query)
+    );
     cm.addOverlay(state.overlay);
     if (cm.showMatchesOnScrollbar) {
-      if (state.annotate) { state.annotate.clear(); state.annotate = null; }
-      state.annotate = cm.showMatchesOnScrollbar(state.query, queryCaseInsensitive(state.query));
+      if (state.annotate) {
+        state.annotate.clear();
+        state.annotate = null;
+      }
+      state.annotate = cm.showMatchesOnScrollbar(
+        state.query,
+        queryCaseInsensitive(state.query)
+      );
     }
   }
 
@@ -118,7 +144,7 @@
     if (state.query) return findNext(cm, rev);
     var q = cm.getSelection() || state.lastQuery;
     if (persistent && cm.openDialog) {
-      var hiding = null
+      var hiding = null;
       var searchNext = function (query, event) {
         CodeMirror.e_stop(event);
         if (!query) return;
@@ -126,21 +152,29 @@
           startSearch(cm, state, query);
           state.posFrom = state.posTo = cm.getCursor();
         }
-        if (hiding) hiding.style.opacity = 1
+        if (hiding) hiding.style.opacity = 1;
         findNext(cm, event.shiftKey, function (_, to) {
-          var dialog
-          if (to.line < 3 && document.querySelector &&
+          var dialog;
+          if (
+            to.line < 3 &&
+            document.querySelector &&
             (dialog = cm.display.wrapper.querySelector(".CodeMirror-dialog")) &&
-              dialog.getBoundingClientRect().bottom - 4 > cm.cursorCoords(to, "window").top)
-            (hiding = dialog).style.opacity = .4
-        })
+            dialog.getBoundingClientRect().bottom - 4 >
+              cm.cursorCoords(to, "window").top
+          )
+            (hiding = dialog).style.opacity = 0.4;
+        });
       };
       persistentDialog(cm, queryDialog, q, searchNext, function (event, query) {
-        var keyName = CodeMirror.keyName(event)
-        var cmd = CodeMirror.keyMap[cm.getOption("keyMap")][keyName]
-        if (!cmd) cmd = cm.getOption('extraKeys')[keyName]
-        if (cmd == "findNext" || cmd == "findPrev" ||
-          cmd == "findPersistentNext" || cmd == "findPersistentPrev") {
+        var keyName = CodeMirror.keyName(event);
+        var cmd = CodeMirror.keyMap[cm.getOption("keyMap")][keyName];
+        if (!cmd) cmd = cm.getOption("extraKeys")[keyName];
+        if (
+          cmd == "findNext" ||
+          cmd == "findPrev" ||
+          cmd == "findPersistentNext" ||
+          cmd == "findPersistentPrev"
+        ) {
           CodeMirror.e_stop(event);
           startSearch(cm, getSearchState(cm), query);
           cm.execCommand(cmd);
@@ -155,7 +189,8 @@
       }
     } else {
       dialog(cm, queryDialog, "Buscar por:", q, function (query) {
-        if (query && !state.query) cm.operation(function() {
+        if (query && !state.query)
+          cm.operation(function () {
             startSearch(cm, state, query);
             state.posFrom = state.posTo = cm.getCursor();
             findNext(cm, rev);
@@ -164,39 +199,63 @@
     }
   }
 
-  function findNext(cm, rev, callback) {cm.operation(function() {
+  function findNext(cm, rev, callback) {
+    cm.operation(function () {
       var state = getSearchState(cm);
-    var cursor = getSearchCursor(cm, state.query, rev ? state.posFrom : state.posTo);
+      var cursor = getSearchCursor(
+        cm,
+        state.query,
+        rev ? state.posFrom : state.posTo
+      );
       if (!cursor.find(rev)) {
-      cursor = getSearchCursor(cm, state.query, rev ? CodeMirror.Pos(cm.lastLine()) : CodeMirror.Pos(cm.firstLine(), 0));
+        cursor = getSearchCursor(
+          cm,
+          state.query,
+          rev
+            ? CodeMirror.Pos(cm.lastLine())
+            : CodeMirror.Pos(cm.firstLine(), 0)
+        );
         if (!cursor.find(rev)) return;
       }
       cm.setSelection(cursor.from(), cursor.to());
       cm.scrollIntoView({ from: cursor.from(), to: cursor.to() }, 20);
-    state.posFrom = cursor.from(); state.posTo = cursor.to();
-    if (callback) callback(cursor.from(), cursor.to())
-  });}
+      state.posFrom = cursor.from();
+      state.posTo = cursor.to();
+      if (callback) callback(cursor.from(), cursor.to());
+    });
+  }
 
-  function clearSearch(cm) {cm.operation(function() {
+  function clearSearch(cm) {
+    cm.operation(function () {
       var state = getSearchState(cm);
       state.lastQuery = state.query;
       if (!state.query) return;
       state.query = state.queryText = null;
       cm.removeOverlay(state.overlay);
-    if (state.annotate) { state.annotate.clear(); state.annotate = null; }
-  });}
+      if (state.annotate) {
+        state.annotate.clear();
+        state.annotate = null;
+      }
+    });
+  }
 
   var replaceQueryDialog =
     ' <input type="text" style="width: 10em" class="CodeMirror-search-field"/> <span style="color: #888" class="CodeMirror-search-hint"></span>';
-  var replacementQueryDialog = '<span class="CodeMirror-search-label">Con:</span> <input type="text" style="width: 10em" class="CodeMirror-search-field"/>';
-  var doReplaceConfirm = '<span class="CodeMirror-search-label">Reemplazar?</span> <button>Si</button> <button>No</button> <button>Todos</button> <button>Cancelar</button>';
+  var replacementQueryDialog =
+    '<span class="CodeMirror-search-label">Con:</span> <input type="text" style="width: 10em" class="CodeMirror-search-field"/>';
+  var doReplaceConfirm =
+    '<span class="CodeMirror-search-label">Reemplazar?</span> <button>Si</button> <button>No</button> <button>Todos</button> <button>Cancelar</button>';
 
   function replaceAll(cm, query, text) {
     cm.operation(function () {
       for (var cursor = getSearchCursor(cm, query); cursor.findNext(); ) {
         if (typeof query != "string") {
           var match = cm.getRange(cursor.from(), cursor.to()).match(query);
-          cursor.replace(text.replace(/\$(\d)/g, function(_, i) {return match[i];}));
+          cursor.replace(
+            text.replace(/\$(\d)/g, function (_, i) {
+              return match[i];
+            })
+          );
         } else cursor.replace(text);
       }
     });
@@ -205,48 +264,94 @@
   function replace(cm, all) {
     if (cm.getOption("readOnly")) return;
     var query = cm.getSelection() || getSearchState(cm).lastQuery;
-    var dialogText = '<span class="CodeMirror-search-label">' + (all ? 'Reemplazar todo:' : 'Reemplazar:') + '</span>';
-    dialog(cm, dialogText + replaceQueryDialog, dialogText, query, function(query) {
+    var dialogText =
+      '<span class="CodeMirror-search-label">' +
+      (all ? "Reemplazar todo:" : "Reemplazar:") +
+      "</span>";
+    dialog(
+      cm,
+      dialogText + replaceQueryDialog,
+      dialogText,
+      query,
+      function (query) {
         if (!query) return;
         query = parseQuery(query);
-      dialog(cm, replacementQueryDialog, "Reemplazar con:", "", function(text) {
-        text = parseString(text)
+        dialog(
+          cm,
+          replacementQueryDialog,
+          "Reemplazar con:",
+          "",
+          function (text) {
+            text = parseString(text);
             if (all) {
-          replaceAll(cm, query, text)
+              replaceAll(cm, query, text);
             } else {
               clearSearch(cm);
               var cursor = getSearchCursor(cm, query, cm.getCursor("from"));
               var advance = function () {
-            var start = cursor.from(), match;
+                var start = cursor.from(),
+                  match;
                 if (!(match = cursor.findNext())) {
                   cursor = getSearchCursor(cm, query);
-              if (!(match = cursor.findNext()) ||
-                  (start && cursor.from().line == start.line && cursor.from().ch == start.ch)) return;
+                  if (
+                    !(match = cursor.findNext()) ||
+                    (start &&
+                      cursor.from().line == start.line &&
+                      cursor.from().ch == start.ch)
+                  )
+                    return;
                 }
                 cm.setSelection(cursor.from(), cursor.to());
                 cm.scrollIntoView({ from: cursor.from(), to: cursor.to() });
-            confirmDialog(cm, doReplaceConfirm, "Reemplazar?",
-                          [function() {doReplace(match);}, advance,
-                           function() {replaceAll(cm, query, text)}]);
+                confirmDialog(cm, doReplaceConfirm, "Reemplazar?", [
+                  function () {
+                    doReplace(match);
+                  },
+                  advance,
+                  function () {
+                    replaceAll(cm, query, text);
+                  },
+                ]);
               };
               var doReplace = function (match) {
-            cursor.replace(typeof query == "string" ? text :
-                           text.replace(/\$(\d)/g, function(_, i) {return match[i];}));
+                cursor.replace(
+                  typeof query == "string"
+                    ? text
+                    : text.replace(/\$(\d)/g, function (_, i) {
+                        return match[i];
+                      })
+                );
                 advance();
               };
               advance();
             }
-      });
-    });
+          }
+        );
+      }
+    );
   }
 
-  CodeMirror.commands.find = function(cm) {clearSearch(cm); doSearch(cm);};
-  CodeMirror.commands.findPersistent = function(cm) {clearSearch(cm); doSearch(cm, false, true);};
-  CodeMirror.commands.findPersistentNext = function(cm) {doSearch(cm, false, true, true);};
-  CodeMirror.commands.findPersistentPrev = function(cm) {doSearch(cm, true, true, true);};
+  CodeMirror.commands.find = function (cm) {
+    clearSearch(cm);
+    doSearch(cm);
+  };
+  CodeMirror.commands.findPersistent = function (cm) {
+    clearSearch(cm);
+    doSearch(cm, false, true);
+  };
+  CodeMirror.commands.findPersistentNext = function (cm) {
+    doSearch(cm, false, true, true);
+  };
+  CodeMirror.commands.findPersistentPrev = function (cm) {
+    doSearch(cm, true, true, true);
+  };
   CodeMirror.commands.findNext = doSearch;
-  CodeMirror.commands.findPrev = function(cm) {doSearch(cm, true);};
+  CodeMirror.commands.findPrev = function (cm) {
+    doSearch(cm, true);
+  };
   CodeMirror.commands.clearSearch = clearSearch;
   CodeMirror.commands.replace = replace;
-  CodeMirror.commands.replaceAll = function(cm) {replace(cm, true);};
+  CodeMirror.commands.replaceAll = function (cm) {
+    replace(cm, true);
+  };
 });

Frontend Angular 4/package.json

@@ -22,6 +22,7 @@
     "@ng-bootstrap/ng-bootstrap": "^5.3.1",
     "@ngx-translate/core": "^12.0.0",
     "@ngx-translate/http-loader": "^4.0.0",
+    "codemirror": "^5.65.9",
     "core-js": "^2.4.1",
     "d3": "^4.12.2",
     "flag-icon-css": "^3.2.1",
@@ -31,10 +32,9 @@
     "ionicons": "^3.0.0",
     "jq-console": "^2.13.2",
     "jquery": "^3.2.1",
-    "matefun-components": "0.1.0",
+    "lt-codemirror": "^5.0.0",
+    "matefun-components": "^0.3.0",
     "mathjs": "1.6.0",
-    "ng2-bootstrap-modal": "^1.0.1",
-    "ng2-codemirror": "^1.1.1",
     "ng2-slider-component": "^1.0.9",
     "rxjs": "6.6.7",
     "tippy.js": "^1.2.0",

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

@@ -70,11 +70,11 @@
                     <i class="fa fa-plus"></i>
                   </button>
                   <div class="dropdown-menu">
-                    <a class="dropdown-item" (click)="mkFile()">
+                    <a class="dropdown-item" (click)="mkFile(true)">
                       {{ "i18n.object.file" | translate | titleCase }}
                     </a>
                     <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" (click)="mkdir()">
+                    <a class="dropdown-item" (click)="mkFile(false)">
                       {{ "i18n.object.folder" | translate | titleCase }}
                     </a>
                   </div>
@@ -133,22 +133,19 @@
                         | filter: 'nombre':filtroNombre
                     "
                     (click)="seleccionarArchivo(arch)"
-                    class="col-sm-3 col-4"
-                    style="text-align: center"
+                    class="col-sm-3 col-4 matefun-file-wrapper"
                   >
                     <i
                       *ngIf="arch.directorio"
-                      class="fa fa-folder"
-                      style="font-size: 3em; cursor: pointer; color: #f95e5e"
+                      class="fa fa-folder matefun-fa-folder"
                       aria-hidden="true"
                     ></i>
                     <i
                       *ngIf="!arch.directorio"
-                      class="fa fa-file-text"
-                      style="font-size: 3em; cursor: pointer; color: #ff8383"
+                      class="fa fa-file-text matefun-fa-file"
                       aria-hidden="true"
                     ></i>
-                    <p style="cursor: pointer">{{ arch.nombre }}</p>
+                    <p class="matefun-p">{{ arch.nombre }}</p>
                   </div>
                 </div>
               </div>
@@ -215,8 +212,7 @@
                         | filter: 'nombre':filtroNombre
                     "
                     (click)="seleccionarArchivo(arch)"
-                    class="col-sm-3 col-4"
-                    style="text-align: center"
+                    class="col-sm-3 col-4 matefun-file-wrapper"
                   >
                     <i
                       class="fa fa-file-text"
@@ -293,7 +289,7 @@
             "
             (click)="confirmarEntrega()"
           >
-            {{ "i18n.action.send" | translate }}
+            {{ "i18n.action.send" | translate | titleCase }}
           </button>
 
           <div
@@ -366,15 +362,118 @@
             ></i>
           </div>
         </div>
-        <codemirror
+        <lt-codemirror
           class="codemirrorArchivo"
           *ngIf="archivoSeleccionado"
           [(ngModel)]="preview"
           [config]="configCodeMirror"
           [ngStyle]="{ 'font-size': configCodeMirror.fontSize + 'px' }"
         >
-        </codemirror>
+        </lt-codemirror>
       </div>
     </div>
   </div>
 </div>
+<matefun-modal-nuevo-archivo
+  confirmLabel="{{ 'i18n.action.create' | translate | titleCase }}"
+  fileDescriptionLabel="{{ 'i18n.object.descr' | translate | titleCase }}:"
+  fileNameLabel="{{ 'i18n.object.name' | translate | titleCase }}:"
+  header="{{ 'i18n.action.new' | translate | titleCase }} 
+  {{
+    (modalTypeIsFile ? 'i18n.object.file' : 'i18n.object.folder')
+      | translate
+      | titleCase
+  }} "
+  [opened]="modalCreateFileOpened"
+  [typeOfFile]="modalTypeIsFile ? 'file' : 'directory'"
+  (close)="modalCreateFile = false"
+  (confirmFileCreation)="confirmFileCreation($event)"
+  *ngIf="modalCreateFile"
+>
+</matefun-modal-nuevo-archivo>
+
+<matefun-modal-seleccionar-directorio
+  confirmLabel="{{ 'i18n.action.move' | translate | titleCase }} {{
+    'i18n.object.here' | translate
+  }}"
+  [currentDirectory]="currentDirOfFileToMove"
+  [fileIdToMove]="archivoSeleccionado ? archivoSeleccionado.id : -1"
+  fileNameLabel="{{ 'i18n.object.name' | translate | titleCase }}"
+  header="{{ 'i18n.msg.file.move' | translate }}"
+  [initialPath]="currentPath"
+  navigateBackLabel="{{ 'i18n.action.goBack' | translate | titleCase }}"
+  [opened]="modalMoveFileOpened"
+  type-of-modal="move"
+  (close)="modalMoveFile = false"
+  (confirmFileCreation)="confirmFileMove($event)"
+  (navBack)="navigateBackModal($event)"
+  (navTo)="currentDirOfFileToMove = $event.detail"
+  *ngIf="modalMoveFile"
+>
+</matefun-modal-seleccionar-directorio>
+
+<matefun-modal-borrar-archivo
+  bodyDescription="{{ 'i18n.msg.file.delete' | translate: fileNameToRemove }}"
+  cancelLabel="{{ 'i18n.action.cancel' | translate | titleCase }}"
+  confirmLabel="{{ 'i18n.action.delete' | translate | titleCase }}"
+  header="{{ 'i18n.action.delete' | translate | titleCase }} 
+  {{
+    (modalTypeIsFile ? 'i18n.object.file' : 'i18n.object.folder')
+      | translate
+      | titleCase
+  }}"
+  [opened]="modalRemoveFileOpened"
+  [typeOfFile]="modalTypeIsFile ? 'file' : 'directory'"
+  (close)="modalRemoveFile = false"
+  (cancelAction)="modalRemoveFileOpened = false"
+  (removeFile)="confirmFileDeletion()"
+  *ngIf="modalRemoveFile"
+>
+</matefun-modal-borrar-archivo>
+
+<matefun-modal-compartir-archivo
+  confirmLabel="{{ 'i18n.action.share' | translate | titleCase }}"
+  [groups]="groupsToShareFile"
+  header="{{ 'i18n.msg.file.share' | translate: fileNameToShare }}"
+  [opened]="modalShareFileOpened"
+  (close)="modalShareFile = false"
+  (confirmFileShare)="confirmFileShare($event)"
+  *ngIf="modalShareFile"
+>
+</matefun-modal-compartir-archivo>
+
+<matefun-modal-enviar-archivo
+  bodyDescriptionTop="{{
+    'i18n.msg.file.toSend' | translate: { fileName: archivoSeleccionado.nombre }
+  }}"
+  bodyDescriptionBottom="{{ 'i18n.msg.file.toSendInfo' | translate }}"
+  cancelLabel="{{ 'i18n.action.cancel' | translate | titleCase }}"
+  confirmLabel="{{ 'i18n.action.confirm' | translate | titleCase }}"
+  header="{{ 'i18n.action.send' | translate | titleCase }} {{
+    'i18n.object.file' | translate | titleCase
+  }}"
+  [opened]="modalSendFileOpened"
+  (cancelAction)="modalSendFileOpened = false"
+  (close)="modalSendFile = false"
+  (confirmFileSend)="entregarArchivo()"
+  *ngIf="modalSendFile"
+>
+</matefun-modal-enviar-archivo>
+
+<matefun-modal-ver-calificacion
+  detail=" {{ archivoSeleccionado.evaluacion.descripcion }}"
+  detailLabel="{{ 'i18n.object.detail' | translate | titleCase }}: "
+  date=" {{ archivoSeleccionado.evaluacion.fecha | date }}"
+  dateLabel="{{ 'i18n.object.date' | translate | titleCase }}: "
+  confirmLabel="{{ 'i18n.action.close' | translate | titleCase }}"
+  header="{{ 'i18n.object.qualification' | translate | titleCase }} &quot;{{
+    archivoSeleccionado.nombre
+  }}&quot;:"
+  [opened]="modalSeeScoreOpened"
+  score=" {{ archivoSeleccionado.evaluacion.nota }}"
+  scoreLabel="{{ 'i18n.object.score' | translate | titleCase }} (0-100): "
+  (close)="modalSeeScore = false"
+  (confirmClose)="modalSeeScoreOpened = false"
+  *ngIf="modalSeeScore"
+>
+</matefun-modal-ver-calificacion>

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

@@ -4,16 +4,8 @@ import { ArchivosComponent } from "./archivos.component";
 import { CommonModule } from "@angular/common";
 import { ArchivosRoutingModule } from "./archivos-routing.module";
 import { FilterPipe } from "../../shared/pipes/filter.pipe";
-import { ConfirmComponent } from "../../shared/modal/confirm.component";
-import { NuevoArchivo } from "./nuevoArchivo.component";
-import { VerCalificacionComponent } from "./verCalificacion.component";
-import { CompartirArchivoComponent } from "./compartirArchivo.component";
-import { SeleccionarDirectorioMove } from "./seleccionarDirectorio.component";
-import { ConfirmarEliminar } from "./confirmarEliminar.component";
-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 { LtCodemirrorModule } from "lt-codemirror";
 import { NotificacionModule } from "../../notificacion/notificacion.module";
 import { I18nModule } from "../../shared/modules/translate/i18n.module";
 import { TitleCaseModule } from "../../shared/modules/titlecase.module";
@@ -23,31 +15,13 @@ import { TitleCaseModule } from "../../shared/modules/titlecase.module";
     CommonModule,
     ArchivosRoutingModule,
     FormsModule,
-    BootstrapModalModule,
     NgbModule,
-    CodemirrorModule,
+    LtCodemirrorModule,
     NotificacionModule,
     I18nModule,
     TitleCaseModule,
   ],
-  declarations: [
-    ArchivosComponent,
-    FilterPipe,
-    NuevoArchivo,
-    VerCalificacionComponent,
-    ConfirmComponent,
-    CompartirArchivoComponent,
-    ConfirmarEliminar,
-    SeleccionarDirectorioMove,
-  ],
-  entryComponents: [
-    NuevoArchivo,
-    VerCalificacionComponent,
-    ConfirmComponent,
-    CompartirArchivoComponent,
-    ConfirmarEliminar,
-    SeleccionarDirectorioMove,
-  ],
+  declarations: [ArchivosComponent, FilterPipe],
   exports: [ArchivosComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

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

-import { Component } from "@angular/core";
-import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
-import { Archivo } from "../../shared/objects/archivo";
-import { Grupo } from "../../shared/objects/grupo";
-import { TranslateService } from "@ngx-translate/core";
-
-export interface ConfirmModel {
-  archivo: Archivo;
-  grupos: any;
-  parent: any;
-  nombreArchivo: { fileName: string };
-}
-@Component({
-  selector: "confirm",
-  template: `<div class="modal-dialog" style="margin-top:100px;">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h6 class="modal-title pull-lefth">
-          {{ "i18n.msg.file.share" | translate: nombreArchivo }}
-        </h6>
-        <button
-          type="button"
-          class="close"
-          (click)="close()"
-          style="margin-rigth:8px;"
-        >
-          &times;
-        </button>
-      </div>
-      <div class="modal-body" style="height:350px;overflow-y: scroll;">
-        <div>
-          <div class="list-group">
-            <button
-              *ngFor="let g of grupos"
-              type="button"
-              (click)="seleccionarGrupo(g)"
-              style="cursor:pointer"
-              class="list-group-item list-group-item-action"
-              [ngClass]="{
-                active:
-                  grupo != undefined &&
-                  g.grado == grupo.grado &&
-                  g.grupo == grupo.grupo &&
-                  g.anio == grupo.anio &&
-                  g.liceoId == grupo.liceoId
-              }"
-            >
-              <i
-                class="fa fa-group"
-                style="margin-right:10px; font-size: 3em; cursor: pointer;"
-                aria-hidden="true"
-              ></i>
-              {{ g.grado + "°" + g.grupo + " - " + g.anio }}
-            </button>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary" (click)="compartir()">
-          {{ "i18n.action.share" | translate | titleCase }}
-        </button>
-      </div>
-    </div>
-  </div>`,
-})
-export class CompartirArchivoComponent
-  extends DialogComponent<ConfirmModel, boolean>
-  implements ConfirmModel
-{
-  archivo: Archivo;
-  grupos: any;
-  grupo: Grupo;
-  parent: any;
-  nombreArchivo: { fileName: string };
-  translateService: any;
-
-  constructor(
-    dialogService: DialogService,
-    public translate: TranslateService
-  ) {
-    super(dialogService);
-    this.translateService = translate;
-  }
-
-  seleccionarGrupo(grupo) {
-    this.grupo = grupo;
-  }
-
-  compartir() {
-    this.nombreArchivo = { fileName: this.archivo.nombre };
-    if (this.grupo) {
-      this.parent.haskellService
-        .compartirArchivoGrupo(this.grupo, this.archivo.id)
-        .subscribe(
-          (success) => {
-            this.parent.notifService.success(
-              this.translateService.get("i18n.msg.file.shared").value
-            );
-            this.close();
-          },
-          (error) => {
-            this.parent.notifService.error(error);
-          }
-        );
-    } else {
-      this.parent.notifService.error(
-        this.translateService.get("i18n.warning.group.select").value
-      );
-    }
-  }
-}

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

-import { Component } from "@angular/core";
-import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
-import { Archivo } from "../../shared/objects/archivo";
-
-export interface ConfirmModel {
-  nombreArchivo: { fileName: string };
-  esDirectorio: boolean;
-  parentContext: any;
-}
-@Component({
-  selector: "confirm",
-  template: `<div class="modal-dialog" style="margin-top:100px;">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h6 class="modal-title" *ngIf="!esDirectorio">
-          {{ "i18n.action.delete" | translate | titleCase }}
-          {{ "i18n.object.file" | translate | titleCase }}
-        </h6>
-        <h6 class="modal-title" *ngIf="esDirectorio">
-          {{ "i18n.action.delete" | translate | titleCase }}
-          {{ "i18n.object.folder" | translate | titleCase }}
-        </h6>
-        <button
-          type="button"
-          class="close"
-          (click)="close()"
-          style="margin-left:8px;"
-        >
-          &times;
-        </button>
-      </div>
-      <div class="modal-body">
-        <p *ngIf="!esDirectorio">
-          {{ "i18n.msg.file.delete" | translate: nombreArchivo }}
-        </p>
-        <p *ngIf="esDirectorio">
-          {{ "i18n.msg.file.delete" | translate: nombreArchivo }}
-        </p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" (click)="close()">
-          {{ "i18n.action.cancel" | translate | titleCase }}
-        </button>
-        <button
-          type="button"
-          class="btn btn-success"
-          (click)="confirmarEliminar()"
-        >
-          {{ "i18n.action.delete" | translate | titleCase }}
-        </button>
-      </div>
-    </div>
-  </div>`,
-})
-export class ConfirmarEliminar
-  extends DialogComponent<ConfirmModel, boolean>
-  implements ConfirmModel
-{
-  nombreArchivo: { fileName: string };
-  esDirectorio: boolean;
-  parentContext: any;
-
-  constructor(dialogService: DialogService) {
-    super(dialogService);
-  }
-  confirmarEliminar() {
-    var that = this.parentContext;
-    var directorio = this.parentContext.archivoSeleccionado.directorio;
-    this.parentContext.archivoSeleccionado.eliminado = true;
-    if (directorio) {
-      delete this.parentContext.archivoSeleccionado["archivos"];
-    }
-    this.parentContext.haskellService
-      .eliminarArchivo(this.parentContext.archivoSeleccionado.id)
-      .subscribe(
-        (archivo) => {
-          if (directorio) {
-            var idDirActual = that.directorioActual.padreId;
-          } else {
-            var idDirActual = that.directorioActual.id;
-          }
-          that.recargarArchivos(idDirActual);
-          that.archivoSeleccionado = null;
-        },
-        (error) => {
-          this.parentContext.notifService.error(error);
-        }
-      );
-    this.close();
-  }
-}

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

-import { Component } from "@angular/core";
-import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
-import { Archivo } from "../../shared/objects/archivo";
-import { TranslateService } from "@ngx-translate/core";
-
-export interface ConfirmModel {
-  nombre: string;
-  descripcion: string;
-  parentContext: any;
-  esDirectorio: boolean;
-}
-@Component({
-  selector: "confirm",
-  template: `<div class="modal-dialog" style="margin-top:100px;">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h6 class="modal-title" *ngIf="esDirectorio">
-          {{ "i18n.action.new" | translate | titleCase }}
-          {{ "i18n.object.folder" | translate | titleCase }}
-        </h6>
-        <h6 class="modal-title" *ngIf="!esDirectorio">
-          {{ "i18n.action.new" | translate | titleCase }}
-          {{ "i18n.object.file" | translate | titleCase }}
-        </h6>
-        <button
-          type="button"
-          class="close"
-          (click)="close()"
-          style="margin-left:8px;"
-        >
-          &times;
-        </button>
-      </div>
-
-      <div class="modal-body">
-        <form>
-          <div class="form-group">
-            <label for="recipient-name" class="form-control-label">
-              {{ "i18n.object.name" | translate | titleCase }}:
-            </label>
-            <input
-              type="text"
-              class="form-control"
-              id="recipient-name"
-              [(ngModel)]="nombre"
-              [ngModelOptions]="{ standalone: true }"
-            />
-          </div>
-          <div class="form-group" *ngIf="esDirectorio">
-            <label for="message-text" class="form-control-label">
-              {{ "i18n.object.descr" | translate | titleCase }}:
-            </label>
-            <textarea
-              class="form-control"
-              id="message-text"
-              [(ngModel)]="descripcion"
-              [ngModelOptions]="{ standalone: true }"
-            ></textarea>
-          </div>
-        </form>
-      </div>
-
-      <div class="modal-footer">
-        <button
-          [disabled]="this.nombre == ''"
-          type="button"
-          class="btn btn-success"
-          (click)="confirm()"
-        >
-          {{ "i18n.action.create" | translate | titleCase }}
-        </button>
-      </div>
-    </div>
-  </div>`,
-})
-export class NuevoArchivo
-  extends DialogComponent<ConfirmModel, boolean>
-  implements ConfirmModel
-{
-  nombre: string;
-  esDirectorio: boolean;
-  descripcion: string;
-  parentContext: any;
-  translateService: any;
-
-  constructor(
-    dialogService: DialogService,
-    public translate: TranslateService
-  ) {
-    super(dialogService);
-    this.translateService = translate;
-  }
-  confirm() {
-    var nombre = this.nombre;
-    var desc = this.descripcion;
-    var archivo: Archivo;
-    archivo = new Archivo();
-    archivo.cedulaCreador = this.parentContext.directorioActual.cedulaCreador;
-    if (this.esDirectorio) {
-      archivo.contenido = desc;
-    } else {
-      archivo.contenido = "";
-    }
-    archivo.directorio = this.esDirectorio;
-    archivo.editable = true;
-    archivo.fechaCreacion = new Date();
-    archivo.nombre = nombre;
-    archivo.padreId = this.parentContext.directorioActual.id;
-    var that = this.parentContext;
-    var regex = /^[A-Z]/;
-    if (regex.test(nombre)) {
-      this.parentContext.haskellService.crearArchivo(archivo).subscribe(
-        (archivo) => {
-          var id = that.directorioActual.id;
-          that.recargarArchivos(id);
-        },
-        (error) => {
-          this.parentContext.notifService.error(error.text());
-        }
-      );
-      this.close();
-    } else {
-      alert(this.translateService.get("i18n.warning.file.capitalLetter").value);
-    }
-  }
-}

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

-import { Component } from "@angular/core";
-import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
-import { Archivo } from "../../shared/objects/archivo";
-
-export interface ConfirmModel {
-  directorio: boolean;
-  archivos: any;
-  directorioActual: any;
-  parent: any;
-  nombre: string;
-}
-@Component({
-  selector: "confirm",
-  template: `<div class="modal-dialog" style="margin-top:100px;">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h6 class="modal-title pull-lefth">
-          {{ "i18n.msg.file.move" | translate }}
-        </h6>
-        <button
-          type="button"
-          class="close"
-          (click)="close()"
-          style="margin-rigth:8px;"
-        >
-          &times;
-        </button>
-      </div>
-      <div class="modal-body" style="height:350px;overflow-y: scroll;">
-        <div>
-          <div class="list-group">
-            <button
-              *ngFor="
-                let arch of directorioActual.archivos.filter(esDirectorio)
-              "
-              type="button"
-              (click)="navToDir(arch)"
-              style="cursor:pointer"
-              class="list-group-item list-group-item-action"
-            >
-              <i
-                *ngIf="arch.directorio"
-                class="fa fa-folder"
-                style="margin-right:10px; font-size: 3em; cursor: pointer;"
-                aria-hidden="true"
-              ></i>
-              <i
-                *ngIf="!arch.directorio"
-                class="fa fa-file-text"
-                style="margin-right:10px;font-size: 3em; cursor: pointer;"
-                aria-hidden="true"
-              ></i>
-              {{ arch.nombre }}
-            </button>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button
-          [disabled]="this.directorioActual.padreId == -1"
-          type="button"
-          class="btn btn-default"
-          (click)="navBack()"
-        >
-          {{ "i18n.action.goBack" | translate | titleCase }}
-        </button>
-        <button type="button" class="btn btn-primary" (click)="move()">
-          {{ "i18n.action.move" | translate | titleCase }}
-          {{ "i18n.object.here" | translate }}
-        </button>
-      </div>
-    </div>
-  </div>`,
-})
-export class SeleccionarDirectorioMove
-  extends DialogComponent<ConfirmModel, boolean>
-  implements ConfirmModel
-{
-  directorio: boolean;
-  archivos: any;
-  directorioActual: any;
-  parent: any;
-  nombre: string;
-
-  constructor(dialogService: DialogService) {
-    super(dialogService);
-  }
-
-  esDirectorio(archivo) {
-    return archivo.directorio;
-  }
-
-  move() {
-    // we set dialog result as true on click on confirm button,
-    // then we can get dialog result from caller code
-    var that = this;
-    if (this.nombre !== undefined && this.nombre !== "") {
-      this.parent.archivoSeleccionado.padreId = this.directorioActual.id;
-      if (this.parent.archivoSeleccionado.directorio) {
-        delete this.parent.archivoSeleccionado["archivos"];
-      }
-      this.parent.haskellService
-        .editarArchivo(
-          this.parent.archivoSeleccionado.id,
-          this.parent.archivoSeleccionado
-        )
-        .subscribe(
-          (archivo) => {
-            that.parent.recargarArchivos(this.directorioActual.id);
-            that.parent.archivoSeleccionado = null;
-          },
-          (error) => {
-            this.parent.notifService.error(error.text());
-          }
-        );
-    }
-    this.close();
-  }
-
-  navToDir(arch) {
-    if (arch.directorio) {
-      this.directorioActual = arch;
-    }
-  }
-
-  navBack() {
-    var idPadre = this.directorioActual.padreId;
-    var archivosList = this.parent.sessionService.getArchivosList();
-    var nuevoDirectorioActual = archivosList.filter(function (a) {
-      return a.id === idPadre;
-    })[0];
-    this.directorioActual = nuevoDirectorioActual;
-  }
-}

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

-import { Component } from "@angular/core";
-import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
-import { Archivo, Evaluacion } from "../../shared/objects/archivo";
-
-export interface ConfirmModel {
-  archivo: Archivo;
-}
-@Component({
-  selector: "confirm",
-  template: `<div class="modal-dialog" style="margin-top:100px;">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h6 class="modal-title pull-lefth">
-          {{ "i18n.object.qualification" | translate | titleCase }} &quot;{{
-            archivo.nombre
-          }}&quot;:
-        </h6>
-        <button
-          type="button"
-          class="close"
-          (click)="close()"
-          style="margin-rigth:8px;"
-        >
-          &times;
-        </button>
-      </div>
-      <div class="modal-body">
-        <div>
-          <label
-            ><b>{{ "i18n.object.date" | translate | titleCase }}: </b></label
-          >&nbsp; {{ archivo.evaluacion.fecha | date }}<br />
-          <label
-            ><b
-              >{{ "i18n.object.score" | translate | titleCase }} (0-100):
-            </b></label
-          >&nbsp; {{ archivo.evaluacion.nota }}<br />
-          <label
-            ><b>{{ "i18n.object.detail" | translate | titleCase }}: </b></label
-          >&nbsp; {{ archivo.evaluacion.descripcion }}
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary" (click)="close()">
-          {{ "i18n.action.close" | translate | titleCase }}
-        </button>
-      </div>
-    </div>
-  </div>`,
-})
-export class VerCalificacionComponent
-  extends DialogComponent<ConfirmModel, boolean>
-  implements ConfirmModel
-{
-  archivo: Archivo;
-
-  constructor(dialogService: DialogService) {
-    super(dialogService);
-  }
-}

Frontend Angular 4/src/app/layout/grupos/calificarEntrega.component.ts

-import { Component } from "@angular/core";
-import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
-import { Archivo, Evaluacion } from "../../shared/objects/archivo";
-import { TranslateService } from "@ngx-translate/core";
-
-export interface ConfirmModel {
-  cedula: string;
-  archivo: Archivo;
-  parentContext: any;
-}
-@Component({
-  selector: "confirm",
-  template: `<div class="modal-dialog" style="margin-top:100px;">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">{{ "i18n.msg.file.qualify" | translate }}</h5>
-        <button
-          type="button"
-          class="close"
-          (click)="close()"
-          style="margin-left:8px;"
-        >
-          &times;
-        </button>
-      </div>
-
-      <div class="modal-body">
-        <form>
-          <div class="form-group">
-            <label for="message-text" class="form-control-label"
-              >{{ "i18n.object.score" | translate | titleCase }} (0-100):</label
-            >
-            <input
-              type="number"
-              class="form-control"
-              [(ngModel)]="nota"
-              min="1"
-              max="100"
-              [ngModelOptions]="{ standalone: true }"
-            />
-          </div>
-          <div class="form-group">
-            <label for="message-text" class="form-control-label"
-              >{{ "i18n.object.detail" | translate | titleCase }}:</label
-            >
-            <textarea
-              class="form-control"
-              id="message-text"
-              [(ngModel)]="descripcion"
-              [ngModelOptions]="{ standalone: true }"
-            ></textarea>
-          </div>
-          <div class="form-group">
-            <label for="message-text" class="form-control-label"
-              >{{ "i18n.object.state" | translate | titleCase }}:</label
-            >
-            <select
-              name="estado"
-              id="estado"
-              class="form-control"
-              [(ngModel)]="estado"
-            >
-              <option *ngFor="let st of estados" [value]="st.value">
-                {{ st.label }}
-              </option>
-            </select>
-          </div>
-        </form>
-      </div>
-
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" (click)="cancel()">
-          {{ "i18n.action.cancel" | translate | titleCase }}
-        </button>
-        <button type="button" class="btn btn-success" (click)="confirm()">
-          {{ "i18n.action.qualify" | translate | titleCase }}
-        </button>
-      </div>
-    </div>
-  </div>`,
-})
-export class CalificarEntrega
-  extends DialogComponent<ConfirmModel, boolean>
-  implements ConfirmModel
-{
-  descripcion: string = "";
-  cedula: string;
-  archivo: Archivo;
-  nota: number = 0;
-  estado: string = "Corregido";
-  estados: any;
-  translateService: any;
-  parentContext: any;
-
-  constructor(
-    dialogService: DialogService,
-    public translate: TranslateService
-  ) {
-    super(dialogService);
-    this.translateService = translate;
-    this.estados = [
-      {
-        value: "Corregido",
-        label: this.translateService.get("i18n.msg.file.evaluated").value,
-      },
-      {
-        value: "Devuelto",
-        label: this.translateService.get("i18n.msg.file.returned").value,
-      },
-    ];
-  }
-
-  ngOnInit() {
-    if (this.archivo.evaluacion) {
-      this.descripcion = this.archivo.evaluacion.descripcion;
-      this.nota = this.archivo.evaluacion.nota;
-    }
-  }
-
-  confirm() {
-    var evaluacion = new Evaluacion();
-    evaluacion.cedulaDocente = this.cedula;
-    evaluacion.descripcion = this.descripcion;
-    evaluacion.nota = this.nota;
-    if (this.nota >= 0 && this.nota <= 100) {
-      this.parentContext.haskellService
-        .calificarArchivo(this.archivo.id, this.estado, evaluacion)
-        .subscribe(
-          (evaluacion) => {
-            this.parentContext.notifService.success(
-              this.translateService.get("i18n.msg.file.evaluated").value
-            );
-            this.archivo.evaluacion = evaluacion;
-            this.close();
-          },
-          (error) => {
-            this.parentContext.notifService.error(error);
-          }
-        );
-    } else {
-      this.parentContext.notifService.error(
-        this.translateService.get("i18n.warning.file.qualifyOutRange").value
-      );
-    }
-  }
-
-  cancel() {
-    this.close();
-  }
-}

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

@@ -30,15 +30,10 @@
             <div
               *ngFor="let grupo of grupos"
               (click)="seleccionarGrupo(grupo)"
-              class="col-sm-3 col-4"
-              style="text-align: center"
+              class="col-sm-3 col-4 matefun-group-wrapper"
             >
-              <i
-                class="fa fa-users"
-                style="font-size: 3em; cursor: pointer; color: #f95e5e"
-                aria-hidden="true"
-              ></i>
-              <p style="cursor: pointer">
+              <i class="fa fa-users matefun-fa-user" aria-hidden="true"></i>
+              <p>
                 {{ grupo.grado + "°" + grupo.grupo + " - " + grupo.anio }}
               </p>
             </div>
@@ -83,15 +78,13 @@
                   <div
                     *ngFor="let alumno of grupoSeleccionado.alumnos"
                     (click)="seleccionarAlumno(alumno)"
-                    class="col-sm-3"
-                    style="text-align: center"
+                    class="col-sm-3 matefun-group-wrapper"
                   >
                     <i
-                      class="fa fa-user"
-                      style="font-size: 3em; cursor: pointer; color: #f95e5e"
+                      class="fa fa-user matefun-fa-user"
                       aria-hidden="true"
                     ></i>
-                    <p style="cursor: pointer">
+                    <p>
                       {{ alumno.apellido + ", " + alumno.nombre }}
                     </p>
                   </div>
@@ -137,15 +130,13 @@
                   <div
                     *ngFor="let archivo of grupoSeleccionado.archivos"
                     (click)="seleccionarArchivo(archivo)"
-                    class="col-sm-3 col-4"
-                    style="text-align: center"
+                    class="col-sm-3 col-4 matefun-group-wrapper"
                   >
                     <i
-                      class="fa fa-file-text"
-                      style="font-size: 3em; cursor: pointer; color: #ff8383"
+                      class="fa fa-file-text matefun-fa-file"
                       aria-hidden="true"
                     ></i>
-                    <p style="cursor: pointer">{{ archivo.nombre }}</p>
+                    <p>{{ archivo.nombre }}</p>
                   </div>
                 </div>
               </div>
@@ -164,16 +155,14 @@
             <div
               *ngFor="let entrega of alumnoSeleccionado.archivos"
               (click)="seleccionarEntrega(entrega)"
-              class="col-sm-3 col-4"
-              style="text-align: center"
+              class="col-sm-3 col-4 matefun-file-wrapper"
             >
               <i
-                [ngStyle]=""
                 class="fa fa-file-text"
-                style="font-size: 3em; cursor: pointer"
+                style="font-size: 3em"
                 aria-hidden="true"
               ></i>
-              <p style="cursor: pointer">{{ entrega.nombre }}</p>
+              <p>{{ entrega.nombre }}</p>
             </div>
             <div
               *ngIf="alumnoSeleccionado.archivos.length == 0"
@@ -227,7 +216,7 @@
           <button
             *ngIf="tipoArchivo == 'entrega'"
             class="btn btn-sm btn-secondary pull-left mr-2"
-            (click)="calificarEntrega()"
+            (click)="mostrarModalCalificarEntrega()"
           >
             Calificar
           </button>
@@ -246,14 +235,32 @@
             {{ archivoSeleccionado?.fechaCreacion | date }}
           </div>
         </div>
-        <codemirror
+        <lt-codemirror
           class="codemirrorGrupos"
           [(ngModel)]="archivoSeleccionado.contenido"
           [config]="configCodeMirror"
           [ngStyle]="{ 'font-size': configCodeMirror.fontSize + 'px' }"
         >
-        </codemirror>
+        </lt-codemirror>
       </div>
     </div>
   </div>
 </div>
+
+<matefun-modal-calificar-entrega
+  cancelLabel="{{ 'i18n.action.cancel' | translate | titleCase }}"
+  confirmLabel="{{ 'i18n.action.qualify' | translate | titleCase }}"
+  [detail]="archivoSeleccionado.evaluacion?.descripcion"
+  detailLabel="{{ 'i18n.object.detail' | translate | titleCase }}:"
+  header="{{ 'i18n.msg.file.qualify' | translate }}"
+  [opened]="modalQualifyDeliveryOpened"
+  [posibleStatuses]="posibleStatusesQualifyDelivery"
+  [score]="archivoSeleccionado.evaluacion?.nota"
+  scoreLabel="{{ 'i18n.object.score' | translate | titleCase }} (0-100):"
+  statusLabel="{{ 'i18n.object.state' | translate | titleCase }}:"
+  (cancelAction)="modalQualifyDeliveryOpened = false"
+  (close)="modalQualifyDelivery = false"
+  (confirmFileQualify)="confirmFileQualify($event)"
+  *ngIf="modalQualifyDelivery"
+>
+</matefun-modal-calificar-entrega>

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

-import { NgModule } from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { GruposComponent } from "./grupos.component";
 import { CommonModule } from "@angular/common";
 import { GruposRoutingModule } from "./grupos-routing.module";
-import { DialogService } from "ng2-bootstrap-modal";
-import { NotificacionService } from "../../shared/services/notificacion.service";
-import { BootstrapModalModule } from "ng2-bootstrap-modal";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { CodemirrorModule } from "ng2-codemirror";
-import { CalificarEntrega } from "./calificarEntrega.component";
+import { LtCodemirrorModule } from "lt-codemirror";
 import { NotificacionModule } from "../../notificacion/notificacion.module";
 import { I18nModule } from "../../shared/modules/translate/i18n.module";
 import { TitleCaseModule } from "../../shared/modules/titlecase.module";
@@ -18,15 +14,14 @@ import { TitleCaseModule } from "../../shared/modules/titlecase.module";
     CommonModule,
     GruposRoutingModule,
     FormsModule,
-    BootstrapModalModule,
     NgbModule,
-    CodemirrorModule,
+    LtCodemirrorModule,
     NotificacionModule,
     I18nModule,
     TitleCaseModule,
   ],
-  declarations: [GruposComponent, CalificarEntrega],
+  declarations: [GruposComponent],
   exports: [GruposComponent],
-  entryComponents: [CalificarEntrega],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class GruposModule {}

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

@@ -8,7 +8,7 @@ import { LayoutComponent } from "./layout.component";
 import { HeaderComponent, SidebarComponent } from "../shared";
 import { AuthenticationService } from "../shared/services/authentication.service";
 import { HaskellService } from "../shared/services/haskell.service";
-import { CodemirrorModule } from "ng2-codemirror";
+import { LtCodemirrorModule } from "lt-codemirror";
 import { NotificacionModule } from "../notificacion/notificacion.module";
 import { I18nModule } from "../shared/modules/translate/i18n.module";
 import { TitleCaseModule } from "../shared/modules/titlecase.module";
@@ -20,7 +20,7 @@ import { TitleCaseModule } from "../shared/modules/titlecase.module";
     // NgbModule.forRoot(),
     NgbModule,
     LayoutRoutingModule,
-    CodemirrorModule,
+    LtCodemirrorModule,
     NotificacionModule,
     I18nModule,
     TitleCaseModule,