Fix Tooling-List UI

Step/wwwroot/assets/styles/base/card.less

@@ -116,13 +116,20 @@
   &.selected{
     background-color: rgba(23, 145, 255, 0.75);
     color: #fff;
+    .image{    
+        background-color: #FFF; 
+    }
   }
 
-  .image{
+  .image{    
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: 16px 14px 16px 16px;
+      margin-top: 8px;
+      margin-left: 14px;
+      width: 48px;
+      height: 48px;
+      background-color: #DDD; 
       img{
           width: 48px;
           height: 48px;
@@ -133,6 +140,7 @@
           text-align: left;
           width:145px;
           margin-top: 11px;
+          margin-left: 14px;
 
   }
 }

Step/wwwroot/assets/styles/base/tooling-equipment.less

@@ -173,9 +173,6 @@
 }
 
 .tooling-families-container, .tooling-shanks-container, .tooling-magpos-container{
-    & img:empty{
-        display: none;
-    }
 
     .text-body div + div{
         margin-top: 11px;

Step/wwwroot/assets/styles/style.css

@@ -2789,11 +2789,18 @@ footer .container button.big:before {
   background-color: rgba(23, 145, 255, 0.75);
   color: #fff;
 }
+.equipment.selected .image {
+  background-color: #FFF;
+}
 .equipment .image {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 16px 14px 16px 16px;
+  margin-top: 8px;
+  margin-left: 14px;
+  width: 48px;
+  height: 48px;
+  background-color: #DDD;
 }
 .equipment .image img {
   width: 48px;
@@ -2803,6 +2810,7 @@ footer .container button.big:before {
   text-align: left;
   width: 145px;
   margin-top: 11px;
+  margin-left: 14px;
 }
 .input-box {
   width: 100%;
@@ -5549,11 +5557,6 @@ footer .container button.big:before {
   font-size: 18px;
   font-weight: 600;
 }
-.tooling-families-container img:empty,
-.tooling-shanks-container img:empty,
-.tooling-magpos-container img:empty {
-  display: none;
-}
 .tooling-families-container .text-body div + div,
 .tooling-shanks-container .text-body div + div,
 .tooling-magpos-container .text-body div + div {

Step/wwwroot/src/components/tooling-equipment.ts

@@ -74,6 +74,17 @@ export default class toolingEquipment extends Vue {
     this.$router.push({ path: path});
   }
 
+  public getToolIcon = function (id) {
+    if(id == 9999)
+      return "../assets/images/list-undefined.PNG"
+    else if(id == 151 || id == 700 )
+        return "../assets/images/list-blade.PNG"
+    else
+      return "../assets/images/list-tool.PNG"
+  }
+
+  
+
   async save(item){
     item.name = "";
     toolingActions.updateToolsConfiguration(store,item);

Step/wwwroot/src/components/tooling-equipment.vue

@@ -21,7 +21,7 @@
                   </div>
                   <div class="list-vertical scrollable">
                       <equipment v-for="t in tools" :key="t.id" :code="t.id" :title="t.familyName" 
-                                 img-source="../assets/images/tool.PNG"
+                                 :img-source="getToolIcon(t.toolType)"
                                  :class="{selected: selectedTool == t}"
                                  @click="selectTool(t)"></equipment>
                   </div>

Step/wwwroot/src/components/tooling-magpos.vue

@@ -22,6 +22,7 @@
                   <div class="list-vertical scrollable">
                       <equipment v-for="(m,k) in magpos" :key="k" :code="'Magazzino' + ' ' + m.magazineId" :title="'Manina' + ' ' + m.id"
                                  :class="{selected: selectedTool == m}"
+                                 :img-source="'../assets/images/list-mag-pos.PNG'"
                                  @click="selectTool(m)"></equipment>
                   </div>
                   <div class="footer">

Step/wwwroot/src/components/tooling-shanks.vue

@@ -22,6 +22,7 @@
                   <div class="list-vertical scrollable">
                       <equipment v-for="s in shanks" :key="s.id" :title="'Codolo' + ' ' + s.id"
                                  v-if="s.id != ''"
+                                 :img-source="'../assets/images/shank.PNG'"
                                  :class="{selected: selectedTool == s}"
                                  @click="selectTool(s)"></equipment>
                   </div>

Step/wwwroot/src/modules/base-components/cards/equipment.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <div class="test-container"> -->
       <div class="equipment" @click="onClick">
-        <div class="image">
+        <div v-if="imgSource" class="image">
           <img :src="imgSource" alt="">
         </div>
         <div class="text-body">