styling update + acls

back/models/starred-module.json

@@ -31,7 +31,7 @@
             "model": "Module",
             "foreignKey": "moduleFk"
         }
-    },
+	},
 	"acls": [
 		{
 			"accessType": "READ",
@@ -40,4 +40,4 @@
 			"permission": "ALLOW"
 		}
 	]
-}
+}

db/changes/10290-invoiceIn/00-ACL.sql

@@ -1,4 +1,4 @@
 INSERT INTO `salix`.`ACL` (`model`, `property`, `accessType`, `permission`, `principalType`, `principalId`) 
     VALUES 
-        ('module', '*', '*', 'ALLOW', 'ROLE', 'employee'),
-        ('starredModule', '*', '*', 'ALLOW', 'ROLE', 'employee');
+        ('Module', '*', '*', 'ALLOW', 'ROLE', 'employee'),
+        ('StarredModule', '*', '*', 'ALLOW', 'ROLE', 'employee');

front/salix/components/home/home.html

@@ -1,7 +1,15 @@
 <div>
-    <div class="top-border">
+    <div
+        ng-if="$ctrl.starredCount > 0"
+        class="top-border">
         <span translate>Favorites</span>
     </div>
+    <div
+        ng-if="!$ctrl.starredCount"
+        class="starred-info">
+        <span translate class="empty">You can set modules as favorites by clicking their icon</span>
+        <vn-icon icon="push_pin"></vn-icon>
+    </div>
     <div class="modules">
         <a
             ng-repeat="mod in ::$ctrl.modules"
@@ -10,9 +18,10 @@
             translate-attr="{title: mod.name}"
             class="vn-shadow">
             <div
+                vn-tooltip="Remove from favorites"
                 class="pin"
                 ng-click="$ctrl.toggleStarredModule(mod, $event)">
-                <vn-icon icon="push_pin"></vn-icon>
+                <vn-icon icon="remove_circle"></vn-icon>
             </div>
             <div>
                 <vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
@@ -28,7 +37,9 @@
     </div>
 </div>
 <div>
-    <div class="top-border">
+    <div
+        class="top-border"
+        ng-if="$ctrl.regularCount > 0 && $ctrl.starredCount > 0">
     </div>
     <div class="modules">
         <a
@@ -37,7 +48,8 @@
             ui-sref="{{::mod.route.state}}" 
             translate-attr="{title: mod.name}"
             class="vn-shadow">
-            <div 
+            <div
+                vn-tooltip="Add to favorites"
                 class="pin"
                 ng-click="$ctrl.toggleStarredModule(mod, $event)">
                 <vn-icon icon="push_pin"></vn-icon>

front/salix/components/home/home.js

@@ -18,6 +18,17 @@ export default class Controller extends Component {
         this.getStarredModules();
     }
 
+    countModules() {
+        this.starredCount = 0;
+        this.regularCount = 0;
+        this.modules.forEach(module => {
+            if (module.starred) this.starredCount ++;
+            else this.regularCount ++;
+        });
+        console.log('this.starredCount', this.starredCount);
+        console.log('this.reg', this.regularCount);
+    }
+
     getStarredModules() {
         this.$http.get('starredModules/getStarredModules')
             .then(res => {
@@ -27,6 +38,7 @@ export default class Controller extends Component {
                     const module = this.modules.find(mod => mod.name === starredModule.moduleFk);
                     module.starred = true;
                 }
+                this.countModules();
             });
     }
 
@@ -43,6 +55,8 @@ export default class Controller extends Component {
                 module.starred = true;
             else
                 module.starred = false;
+
+            this.countModules();
         });
     }
 

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

@@ -1 +1,4 @@
-Favorites: Favoritos
+Favorites: Favoritos
+You can set modules as favorites by clicking their icon: Puedes establecer módulos como favoritos haciendo clic en el icono
+Add to favorites: Añadir a favoritos.
+Remove from favorites: Quitar de favoritos.

front/salix/components/home/style.scss

@@ -11,6 +11,23 @@ vn-home {
             margin-bottom: 15px;
         }
 
+        & .starred-info{
+                display: block;
+                text-align: center;
+                box-sizing: border-box;
+                color: $color-font-secondary;
+                font-size: 1.375rem;
+            & > .empty {
+                text-align: center;
+                box-sizing: border-box;
+                color: $color-font-secondary;
+                font-size: 1em;
+            }
+            & > vn-icon {
+                font-size: 1.2rem;
+            }
+        }
+
         & > .top-border {
             margin: 0 auto;
             flex-direction: row;
@@ -57,7 +74,7 @@ vn-home {
                     width: 20px;
                     vn-icon {
                         margin: auto;
-                        font-size: 1rem;
+                        font-size: 1.5rem;
                     }
                 }
                 &:hover .pin {