From cd084a53e551f46420c199e68fc37868efae51a4 Mon Sep 17 00:00:00 2001
From: carlosjr <carlosjr@verdnatura.es>
Date: Mon, 1 Mar 2021 16:13:47 +0100
Subject: [PATCH] styling update + acls

---
 back/models/starred-module.json           |  4 ++--
 db/changes/10290-invoiceIn/00-ACL.sql     |  4 ++--
 front/salix/components/home/home.html     | 20 ++++++++++++++++----
 front/salix/components/home/home.js       | 14 ++++++++++++++
 front/salix/components/home/locale/es.yml |  5 ++++-
 front/salix/components/home/style.scss    | 19 ++++++++++++++++++-
 6 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/back/models/starred-module.json b/back/models/starred-module.json
index c819e57b3..bf7b8f742 100644
--- a/back/models/starred-module.json
+++ b/back/models/starred-module.json
@@ -31,7 +31,7 @@
             "model": "Module",
             "foreignKey": "moduleFk"
         }
-    },
+	},
 	"acls": [
 		{
 			"accessType": "READ",
@@ -40,4 +40,4 @@
 			"permission": "ALLOW"
 		}
 	]
-}
+}
\ No newline at end of file
diff --git a/db/changes/10290-invoiceIn/00-ACL.sql b/db/changes/10290-invoiceIn/00-ACL.sql
index d1f940c6d..93d4c46e3 100644
--- a/db/changes/10290-invoiceIn/00-ACL.sql
+++ b/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');
diff --git a/front/salix/components/home/home.html b/front/salix/components/home/home.html
index ab7efb9b0..ad07dd86c 100644
--- a/front/salix/components/home/home.html
+++ b/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>
diff --git a/front/salix/components/home/home.js b/front/salix/components/home/home.js
index c1ea9781b..8a317cb57 100644
--- a/front/salix/components/home/home.js
+++ b/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();
         });
     }
 
diff --git a/front/salix/components/home/locale/es.yml b/front/salix/components/home/locale/es.yml
index f4595aaef..aab63f17e 100644
--- a/front/salix/components/home/locale/es.yml
+++ b/front/salix/components/home/locale/es.yml
@@ -1 +1,4 @@
-Favorites: Favoritos
\ No newline at end of file
+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.
\ No newline at end of file
diff --git a/front/salix/components/home/style.scss b/front/salix/components/home/style.scss
index 5227da43d..c8ef6457f 100644
--- a/front/salix/components/home/style.scss
+++ b/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 {