mvc-tsx - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

examples/TodoMVC/app/AppModel.ts

@@ -5,3 +5,3 @@ import { Model } from "mvc-tsx";
 export class AppModel extends Model {
-    filterStatus: TodoStatus | null = null;
+    statusFilter: "all" | "active" | "completed" = "all";
     todos: TodoModel[] = [];
@@ -45,2 +45,30 @@ activeTodosCount: number = 0;
 
+    setStatusFilter(newStatusFilter: this["statusFilter"]) {
+        const app: AppModel = this;
+
+        app.set({
+            statusFilter: newStatusFilter
+        });
+    }
+
+    getFilteredTodos() {
+        const app: AppModel = this;
+        const filteredTodos = app.todos.filter(todo =>
+            this.filterTodo(todo)
+        );
+
+        return filteredTodos;
+    }
+
+    private filterTodo(todo: TodoModel) {
+        if ( this.statusFilter === "active" ) {
+            return todo.isActive();
+        }
+        if ( this.statusFilter === "completed" ) {
+            return todo.isCompleted();
+        }
+        
+        return true;
+    }
+
     setAllTodosStatus(newStatus: TodoStatus) {
@@ -47,0 +75,0 @@ const app: AppModel = this;

examples/TodoMVC/bundle.js

@@ -126,3 +126,3 @@ /******/ (function(modules) { // webpackBootstrap
         super(...arguments);
-        this.filterStatus = null;
+        this.statusFilter = "all";
         this.todos = [];
@@ -155,2 +155,22 @@ this.activeTodosCount = 0;
     }
+    setStatusFilter(newStatusFilter) {
+        const app = this;
+        app.set({
+            statusFilter: newStatusFilter
+        });
+    }
+    getFilteredTodos() {
+        const app = this;
+        const filteredTodos = app.todos.filter(todo => this.filterTodo(todo));
+        return filteredTodos;
+    }
+    filterTodo(todo) {
+        if (this.statusFilter === "active") {
+            return todo.isActive();
+        }
+        if (this.statusFilter === "completed") {
+            return todo.isCompleted();
+        }
+        return true;
+    }
     setAllTodosStatus(newStatus) {
@@ -224,2 +244,3 @@ const app = this;
 const ClearCompletedController_1 = __webpack_require__("./examples/TodoMVC/app/controllers/ClearCompletedController.ts");
+const RouterController_1 = __webpack_require__("./examples/TodoMVC/app/controllers/RouterController.ts");
 __webpack_require__("./examples/TodoMVC/app/App.css");
@@ -234,3 +255,4 @@ class AppView extends mvc_tsx_1.View {
             ActiveCountController_1.ActiveCountController,
-            ClearCompletedController_1.ClearCompletedController
+            ClearCompletedController_1.ClearCompletedController,
+            RouterController_1.RouterController
         ];
@@ -249,7 +271,7 @@ }
                     react_1.default.createElement("li", null,
-                        react_1.default.createElement("a", { className: "selected", href: "#/" }, "All")),
+                        react_1.default.createElement("a", { className: app.statusFilter === "all" ? "selected" : "", href: "#/" }, "All")),
                     react_1.default.createElement("li", null,
-                        react_1.default.createElement("a", { href: "#/active" }, "Active")),
+                        react_1.default.createElement("a", { className: app.statusFilter === "active" ? "selected" : "", href: "#/active" }, "Active")),
                     react_1.default.createElement("li", null,
-                        react_1.default.createElement("a", { href: "#/completed" }, "Completed"))),
+                        react_1.default.createElement("a", { className: app.statusFilter === "completed" ? "selected" : "", href: "#/completed" }, "Completed"))),
                 app.hasCompletedTodo() ? (react_1.default.createElement("span", { className: "todo-clear" },
@@ -265,3 +287,3 @@ react_1.default.createElement("button", { className: "clear-completed ClearCompleted" }, "Clear completed"))) : null));
                 react_1.default.createElement("label", { htmlFor: "toggle-all" }, "Mark all as complete"),
-                react_1.default.createElement("ul", { className: "todo-list" }, app.todos.map(item => react_1.default.createElement(TodoView_1.TodoView, { model: item, key: item.id })))),
+                react_1.default.createElement("ul", { className: "todo-list" }, app.getFilteredTodos().map(item => react_1.default.createElement(TodoView_1.TodoView, { model: item, key: item.id })))),
             footer));
@@ -558,2 +580,38 @@ }
 
+/***/ "./examples/TodoMVC/app/controllers/RouterController.ts":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouterController = void 0;
+const mvc_tsx_1 = __webpack_require__("mvc-tsx");
+class RouterController extends mvc_tsx_1.Controller {
+    constructor(app) {
+        super(app);
+        this.onChangeHash = this.onChangeHash.bind(this);
+        window.addEventListener("load", this.onChangeHash);
+        window.addEventListener("hashchange", this.onChangeHash);
+    }
+    onChangeHash() {
+        const app = this.model;
+        const statusFilter = getStatusFilterFromLocationHash();
+        app.setStatusFilter(statusFilter);
+    }
+}
+exports.RouterController = RouterController;
+function getStatusFilterFromLocationHash() {
+    const hash = location.hash;
+    if (hash === "#/completed") {
+        return "completed";
+    }
+    if (hash === "#/active") {
+        return "active";
+    }
+    return "all";
+}
+
+
+/***/ }),
+
 /***/ "./examples/TodoMVC/app/controllers/ToggleAllTodosStatusController.ts":
@@ -560,0 +618,0 @@ /***/ (function(module, exports, __webpack_require__) {

package.json

 {
   "name": "mvc-tsx",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "MVC based on React",
@@ -5,0 +5,0 @@ "main": "bundle/mvc-and-deps.min.js",

README.md

@@ -83,2 +83,3 @@ # MVC-TSX  (alpha version)
 [counter](https://github.com/eprincev-egor/mvc-tsx/tree/master/examples/counter)  
-[cart](https://github.com/eprincev-egor/mvc-tsx/tree/master/examples/cart)  
+[cart](https://github.com/eprincev-egor/mvc-tsx/tree/master/examples/cart)  
+[TodoMVC](https://github.com/eprincev-egor/mvc-tsx/tree/master/examples/TodoMVC)  

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5481284

increased by0.14%

Number of package files

97

increased by1.04%

Lines of code

56222

increased by0.2%

Number of lines in readme file

85

increased by2.41%

No dependency changes