starred modules front and backend 1st steps

back/methods/starred-module/getStarredModules.js

@@ -0,0 +1,17 @@
+module.exports = function(Self) {
+    Self.remoteMethodCtx('getStarredModules', {
+        description: 'returns the receved modules adding the starred property.',
+        returns: {
+            type: 'object',
+            root: true
+        },
+        http: {
+            path: `/getStarredModules`,
+            verb: 'get'
+        }
+    });
+
+    Self.getStarredModules = async ctx => {
+        console.log('ctx.req.accessToken.userId', ctx.req.accessToken.userId);
+    };
+};

back/methods/starred-module/specs/getStarredModules.spec.js

@@ -0,0 +1,6 @@
+const app = require('vn-loopback/server/server');
+
+describe('getStarredModule()', () => {
+    it(`should return the starred modules for a given user`, async() => {
+    });
+});

back/model-config.json

@@ -59,6 +59,9 @@
     "Language": {
         "dataSource": "vn"
     },
+    "Module": {
+        "dataSource": "vn"
+    },
     "Province": {
         "dataSource": "vn"
     },
@@ -71,6 +74,9 @@
     "SageWithholding": {
         "dataSource": "vn"
     },
+    "StarredModule": {
+        "dataSource": "vn"
+    },
     "TempContainer": {
         "dataSource": "tempStorage"
     },

back/models/module.json

@@ -0,0 +1,15 @@
+{
+	"name": "Module",
+	"base": "VnModel",
+	"options": {
+		"mysql": {
+			"table": "salix.module"
+		}
+	},
+	"properties": {
+		"code": {
+			"type": "string",
+			"id": true
+		}
+	}
+}

back/models/starred-module.json

@@ -0,0 +1,35 @@
+{
+	"name": "StarredModule",
+	"base": "VnModel",
+	"options": {
+		"mysql": {
+			"table": "vn.starredmodule"
+		}
+	},
+	"properties": {
+		"id": {
+			"type": "number",
+			"id": true
+		},
+		"workerFk": {
+			"type": "number",
+			"required": true
+		},
+		"moduleFk": {
+			"type": "string",
+			"required": true
+		}
+	},
+	"relations": {
+        "worker": {
+            "type": "belongsTo",
+            "model": "Worker",
+            "foreignKey": "workerFk"
+        },
+        "module": {
+            "type": "belongsTo",
+            "model": "Module",
+            "foreignKey": "moduleFk"
+        }
+    }
+}

db/changes/10281-valentineDay/00-module.sql

@@ -0,0 +1,4 @@
+CREATE TABLE `salix`.`module` (
+    `code` VARCHAR(45) COLLATE utf8_unicode_ci NOT NULL,
+    PRIMARY KEY (`code`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

db/changes/10281-valentineDay/01-starredModule.sql

@@ -0,0 +1,10 @@
+CREATE TABLE `vn`.`starredModule` (
+  `id` INT(11) unsigned NOT NULL AUTO_INCREMENT,
+  `workerFk` INT(10) NOT NULL,
+  `moduleFk` VARCHAR(45) COLLATE utf8_unicode_ci NOT NULL,
+  PRIMARY KEY (`id`),
+  KEY `starred_workerFk` (`workerFk`),
+  KEY `starred_moduleFk` (`moduleFk`),
+  CONSTRAINT `starred_workerFk` FOREIGN KEY (`workerFk`) REFERENCES `vn`.`worker` (`id`) ON UPDATE CASCADE,
+  CONSTRAINT `starred_moduleFk` FOREIGN KEY (`moduleFk`) REFERENCES `salix`.`module` (`code`) ON UPDATE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

db/dump/fixtures.sql

@@ -2175,3 +2175,19 @@ INSERT INTO `hedera`.`image`(`collectionFk`, `name`)
 INSERT INTO `hedera`.`imageCollectionSize`(`id`, `collectionFk`,`width`, `height`)
     VALUES
         (1, 4, 160, 160);
+
+INSERT INTO `salix`.`module`(`code`)
+    VALUES
+        ('Items'),
+        ('Oders'),
+        ('Clients'),
+        ('Entries'),
+        ('Travels'),
+        ('Invoices out'),
+        ('Suppliers'),
+        ('Claims'),
+        ('Routes'),
+        ('Tickets'),
+        ('Workers'),
+        ('Users'),
+        ('Zones');

front/salix/components/home/home.html

@@ -1,20 +1,51 @@
 <div>
+    <div class="top-border">
+        <span translate>Favorites</span>
+    </div>
     <div class="modules">
-    <a
+        <a
-        ng-repeat="mod in ::$ctrl.modules"
+            ng-repeat="mod in ::$ctrl.modules"
-        ui-sref="{{::mod.route.state}}" 
+            ui-sref="{{::mod.route.state}}" 
-        translate-attr="{title: mod.name}"
+            translate-attr="{title: mod.name}"
-        class="vn-shadow">
+            class="vn-shadow">
-        <div>
+            <div class="pin">
-            <vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
+                <vn-icon icon="push_pin"></vn-icon>
-        </div>
+            </div>
-        <h4 ng-bind-html="$ctrl.getModuleName(mod)"></h4>
+            <div>
-        <span
+                <vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
-            ng-show="::mod.keyBind"
+            </div>
-            vn-tooltip="Ctrl + Alt + {{::mod.keyBind}}">
+            <h4 ng-bind-html="$ctrl.getModuleName(mod)"></h4>
-            ({{::mod.keyBind}})
+            <span
-        </span>
+                ng-show="::mod.keyBind"
-        <span ng-show="::!mod.keyBind">&nbsp;</span>
+                vn-tooltip="Ctrl + Alt + {{::mod.keyBind}}">
-    </a>
+                ({{::mod.keyBind}})
+            </span>
+            <span ng-show="::!mod.keyBind">&nbsp;</span>
+        </a>
+    </div>
+</div>
+<div>
+    <div class="top-border">
+    </div>
+    <div class="modules">
+        <a
+            ng-repeat="mod in ::$ctrl.modules"
+            ui-sref="{{::mod.route.state}}" 
+            translate-attr="{title: mod.name}"
+            class="vn-shadow">
+            <div class="pin">
+                <vn-icon icon="push_pin"></vn-icon>
+            </div>
+            <div>
+                <vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
+            </div>
+            <h4 ng-bind-html="$ctrl.getModuleName(mod)"></h4>
+            <span
+                ng-show="::mod.keyBind"
+                vn-tooltip="Ctrl + Alt + {{::mod.keyBind}}">
+                ({{::mod.keyBind}})
+            </span>
+            <span ng-show="::!mod.keyBind">&nbsp;</span>
+        </a>
     </div>
 </div>

front/salix/components/home/home.js

@@ -9,6 +9,14 @@ export default class Controller extends Component {
         this.$sce = $sce;
     }
 
+    get modules() {
+        return this._modules;
+    }
+
+    set modules(value) {
+        this._modules = value;
+    }
+
     getModuleName(mod) {
         let getName = mod => {
             let name = this.$t(mod.name);

front/salix/components/home/locale/es.yml

@@ -0,0 +1 @@
+Favorites: Favoritos

front/salix/components/home/style.scss

@@ -10,28 +10,57 @@ vn-home {
             text-align: center;
             margin-bottom: 15px;
         }
-        & > .modules {
+
-            display: flex;
+        & > .top-border {
-            flex: 1;
+            margin: 0 auto;
             flex-direction: row;
-            justify-content: center;
+            float: center;
+            max-width: 690px;
+            border-bottom: 2px solid $color-font-secondary; 
+            line-height: 2px;
+                      
+            > span {
+                height: 10px;
+                margin-left: 30px;
+                background-color: $color-bg;
+                padding:0 11px;
+            }
+        }
+
+        & > .modules {
+            padding: 10px 0 10px 0;
+            display: flex;
             flex-wrap: wrap;
+            flex: 1;
             max-width: 704px;
             margin: 0 auto;
 
             & > a {
                 @extend %clickable-light;
-                overflow:hidden;
-                border-radius: 6px;
-                background-color: $color-button;
-                color: $color-font-dark;
                 display: flex;
                 flex-direction: column;
+                overflow:hidden;
+                justify-content: center;
+                border-radius: 6px;
                 height: 128px;
                 width: 128px;
                 margin: 8px;
                 padding: 16px;
-                justify-content: center;
+                background-color: $color-button;
+                color: $color-font-dark;
+
+                & .pin {
+                    opacity: 0;
+                    flex-direction: row;
+                    justify-content: left;
+                    height: 0px;
+                    vn-icon {
+                        font-size: 1rem;
+                    }
+                }
+                &:hover .pin {
+                    opacity: 1;
+                }
 
                 & > div {
                     height: 70px;
@@ -56,10 +85,6 @@ vn-home {
                     color: inherit;
                     margin: 0;
                     line-height: 24px;
-
-                   /*  & > .bind-letter {
-                        color: #FD0;
-                    } */
                 }
             }
         }