🎨 styling enabled product being sold

app/Resources/views/logged/angular/categ-options.html.twig

@@ -0,0 +1,26 @@
+{% verbatim %}
+
+<div id="choice-categories" class="choice-categories well" ng-if="categories.length">
+    <h2>
+        <i class="fa-eye fa"></i>
+        Visibilité des
+        {{ categories.length - categoriesVisibleCount() }} /
+        {{ categories.length }} catégories
+    </h2>
+
+    <div ng-repeat="c in categories">
+        <div class="btn btn-block"
+                ng-class="{'btn-success': !c.hidden}"
+                ng-click="c.hidden = !c.hidden">
+            {{ c.name }}
+
+            <span ng-if="c.hidden">(caché)</span>
+        </div>
+    </div>
+
+</div>
+<div class="well" ng-if="!categories.length">
+    <i class="fa fa-info"></i>
+    Aucune catégorie enregistrée
+</div>
+{% endverbatim %}

app/Resources/views/logged/angular/current.html.twig

@@ -3,12 +3,10 @@
     <hr>
     <form>
 
-        </div>
         <div class="new-display">
-
+        <div class="row">
-<div class="row">
         <div class="col-xs-12 col-sm-6">
-        <button class="btn btn-warning btn-remove-all" ng-click="removeAll()" ng-disable="!CurrentSellingTotal()">
+        <button class="btn btn-warning btn-remove-all marged-v" ng-click="removeAll()" ng-disable="!CurrentSellingTotal()">
                    <i class="fa fa-trash"></i> enlever tout
             </button>
             </div>
@@ -17,27 +15,33 @@
 
             <div ng-repeat="group in activeSellingFiltered track by $index">
                 <div class="row">
-                    <div class="col-xs-4">
+                <div class="col-xs-2">
-                        <div class="input-group">
-                            <input type="text" ng-model="group.name">
-                        </div>
-                    </div>
-                    <div class="col-xs-4 text-right">
-                      <strong>
-                            {{group.unitPrice}}
-                       € </strong>
-                      <span class="badge badge-default" ng-if="group.count">
-                         <i class="fa fa-times"></i> {{group.count}}
-                      </span>
-                    </div>
-                    <div class="col-xs-4 text-right">
-                        <strong>
-                        {{group.totalPrice}}
-                        € </strong>
                     <span class="btn btn-warning remove-item"
                                 ng-click="removeGroupeProducts(group.groupId)">
                         <i class="fa fa-trash"></i>
                     </span>
+                </div>
+                    <div class="col-xs-10">
+                            <input class="group-name" type="text" ng-model="group.name">
+                    </div>
+                     </div>
+                     <div class="row">
+                    <div class="col-xs-7 col-xs-offset-2 ">
+                    <span ng-if="group.count > 1">
+
+                      <strong>
+                            {{group.unitPrice}}
+                       € </strong>
+</span>
+                      <span class="badge badge-default" ng-if="group.count">
+                         <i class="fa fa-times"></i> {{group.count}}
+                      </span>
+                    </div>
+                    <div class="col-xs-3 text-right">
+                        <strong>
+                        {{group.totalPrice}}
+                        € </strong>
+
                     </div>
                 </div>
             </div>
@@ -48,8 +52,10 @@
                         {% include 'logged/angular/totals.html.twig' %}
                         {% include 'logged/angular/validate-button.html.twig' %}
                         {% include 'logged/angular/pause-selling.html.twig' %}
-                        {% verbatim %}
+
 
 </form>
+
+</div>
+
 </div>
-{% endverbatim %}

app/Resources/views/logged/angular/listing-products.html.twig

@@ -10,9 +10,9 @@
             <div class="product-listing" >
                 <span ng-repeat="p in c.products track by p.id"
                         class="product-box"
-                        ng-class="{ 'btn-primary' : activeItemsSold.indexOf(p.id) !==-1}"
+
                         >
-                    <button class="product-button text-left"  ng-click="addProduct( p )">
+                    <button class="product-button text-left" ng-class="{ 'active' : p.enabled}" ng-click="addProduct( p )">
                         <img class="product-image" src="{{p.image}}" alt="image" ng-if="p.image.length">
                         <span class="product-name">
                          {{ p.name }}

app/Resources/views/logged/angular/loaded-caisse.html.twig

@@ -5,13 +5,13 @@
     <!--caisse IHM-->
     <div id="load_ok">
 
-        <div id="listing-products" class="listing-products col-xs-12 col-sm-12">
+        <div id="listing-products" class="listing-products col-xs-12 col-md-8">
             {% include 'logged/angular/messages.html.twig' %}
             {% include 'logged/angular/listing-products.html.twig' %}
 
         </div>
-        <div id="sellings" class="sellings col-xs-12 col-sm-12">
+        <div id="sellings" class="sellings col-xs-12 col-md-4">
-            <div class="well" ng-class="{'bg-success text-success': sellingOk }">
+            <div class="list-sell" ng-class="{'bg-success text-success': sellingOk }">
 
                 {% include 'logged/angular/validate-button.html.twig' %}
                 {% if app.user.products |length %}
@@ -25,4 +25,8 @@
     <div id="other_time">
         {% include 'logged/angular/recent.html.twig' %}
     </div>
+    <div class="col-xs-12 col-md-4 col-md-offset-8">
+        {% include 'logged/angular/categ-options.html.twig' %}
+
+    </div>
 </div>

app/Resources/views/logged/angular/totals.html.twig

@@ -1,10 +1,10 @@
 {% verbatim %}
-<div class="text-right">
+<div class="">
     <div class="row clickable" >
-        <div class="col-xs-12 col-sm-6">
+        <div class="col-xs-12 col-sm-6 text-right">
             <h3 ng-click="setRightAmountPaid()">Total: </h3>
         </div>
-        <div class="col-xs-12 col-sm-6">
+        <div class="col-xs-12 col-sm-6 text-right">
             <h3 ng-click="setRightAmountPaid()">
                 <strong>
                     {{ CurrentSellingTotal() }}
@@ -13,13 +13,16 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-12 col-sm-6">
+      <div class="col-xs-12">
+
+        <div >
             Le client paie:
         </div>
-        <div class="col-xs-12 col-sm-6">
+        <div >
             <input class="text-right" type="number" id="paid_amount" ng-model="paidAmount">
         </div>
       </div>
+    </div>
     <div class="alert alert-success" ng-if="paidAmount && CurrentSellingTotal() - paidAmount <=0">
         <h3>Rendu: {{ -1*(CurrentSellingTotal() - paidAmount) }} €</h3>
     </div>

app/Resources/views/logged/caisse-main.html.twig

@@ -14,28 +14,5 @@
     {% endverbatim %}
     {% include 'logged/angular/loaded-caisse.html.twig' %}
  {% verbatim %}
-<div id="choice-categories" class="choice-categories well" ng-if="categories.length">
-    <h2>
-        <i class="fa-eye fa"></i>
-        Visibilité des
-        {{categories.length - categoriesVisibleCount() }} /
-        {{ categories.length }} catégories
-    </h2>
 
-    <div ng-repeat="c in categories"
-    >
-        <div class="btn btn-block"
-             ng-class="{'btn-success': !c.hidden}"
-             ng-click="c.hidden = !c.hidden">
-              {{ c.name }}
-
-            <span ng-if="c.hidden">(caché)</span>
-        </div>
-    </div>
-
-</div>
-<div class="well" ng-if="!categories.length">
-<i class="fa fa-info"></i>
-Aucune catégorie enregistrée
-</div>
 {% endverbatim %}

assets/css/pages/_dashboard.scss

@@ -14,9 +14,11 @@
 
   .listing-products {
 
+    button.active{
+      background: yellowgreen;
+    }
     .btn, button {
       font-size: 1.6rem;
-      background: white;
       padding: 1.5rem;
       -webkit-border-radius: 1rem;
       -moz-border-radius: 1rem;
@@ -69,6 +71,12 @@
   //vertical-align: top;
   white-space: nowrap;
   //float: left;
+  h2{
+    font-weight: bold;
+    &:first-letter{
+      text-transform: capitalize;
+    }
+  }
 }
 
 .category-listing {

assets/css/pages/responsive.scss

@@ -27,6 +27,11 @@
   #caisse-now {
     .product-box {
       width: 100%;
+      &.active{
+        .product-button{
+          background: greenyellow;
+        }
+      }
     }
 
     .product-button {

assets/js/parts/caisseCtrl.js

@@ -1 +0,0 @@
-console.log('hi from caisse ctrl')

assets/js/parts/main.js

@@ -8,7 +8,6 @@ require('bootstrap-sass');
 // require('bootstrap-sass/javascripts/bootstrap/popover');
 
 require('./globalActions');
-require('./caisseCtrl');
 require('./dashboard');
 var PrevisionnelCtrl = require('./previsionnel');
 
@@ -86,6 +85,7 @@ angular
               }
           });
           $scope.activeSellingFiltered = soldObjectsIdsCount;
+          $scope.setRightAmountPaid();
       }
 
       /**
@@ -137,6 +137,7 @@ angular
        */
       $scope.addProduct = function (product) {
           product.stockCount--;
+          product.enabled = true;
           $scope.activeSelling.push(product);
           $scope.activeItemsSold.push(product.id);
           $scope.regenActiveSellingIds();
@@ -167,7 +168,12 @@ angular
           $scope.refreshDeduplicateSellings();
       }
       $scope.removeAll = function () {
+$scope.categories.forEach(category => {
+    category.products.forEach(product => {
+    product.enabled = false
 
+    })
+});
           $scope.activeSelling = [];
           $scope.regenActiveSellingIds();
           $scope.refreshDeduplicateSellings();