From 2d0795dbcdc0a574bf536e8318d0f70f8a6bfc03 Mon Sep 17 00:00:00 2001
From: Alessandro Francia <a.francia@teamdev.it>
Date: Tue, 18 Sep 2018 15:07:51 +0200
Subject: [PATCH] block drop program running and finished

---
 Step/wwwroot/assets/styles/base/card.less     | 69 +++++++++++++++++++
 Step/wwwroot/assets/styles/style.css          | 69 +++++++++++++++++++
 .../cards/card-queue-production.vue           | 40 ++++++++---
 3 files changed, 169 insertions(+), 9 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index 510093ae..951ee55c 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -1059,6 +1059,75 @@
           width: 100%;
           display: flex;
           flex-flow: column;
+          .queue-header{
+              height: 64px;
+              width: 100%;
+            .tab-box {
+                height: 64px;
+                width: 100%;
+                background-color: @color-whitethree;
+                display: flex;
+                flex-direction: row;
+                border: none !important;
+                .tab {
+                  flex-grow: 0;
+                  flex-shrink: 0;
+                  float: left !important;
+                  width: 256px !important;
+                  height: 100% !important;
+                  margin: 0 !important;
+                  padding: 0;
+                  border: none !important;
+                  border-right: solid 1px @color-label-grey !important;
+                  background-color: @color-whitethree;
+                  font-size: 18px !important;
+                  line-height: 1 !important;
+                  color: @color-greyish-brown !important;
+                  position: relative;
+                  &.plus {
+                    border-right: none !important;
+                    .btn {
+                      float: left !important;
+                      margin: 0;
+                      width: 48px;
+                      height: 48px;
+                      position: absolute;
+                      top: calc(~"50% - 24px");
+                      margin-left: 20px;
+                      padding: 0;
+                      .fa {
+                        vertical-align: middle;
+                        font-size: 21px;
+                      }
+                    }
+                  }
+                }
+                .tab:last-child {
+                  border-right: none !important;
+                }
+                .active {
+                  background-color: @color-white;
+                  border-top: solid 2px @color-clear-blue !important;
+                }
+                .tab-box-scroll {
+                  width: 100%;
+                  overflow-y: hidden;
+                  overflow-x: auto;
+                  display: flex;
+                  flex-direction: row;
+                  flex-basis: auto;
+                  &::-webkit-scrollbar {
+                    width: 5px;
+                    height: 5px;
+                  }
+                  &::-webkit-scrollbar-thumb {
+                    border-radius: 5px;
+                    height: 1px;
+                    background-color: rgba(0, 0, 0, 0.3);
+                  }
+                }
+              }
+          }
           .queue-body{
               height: calc(~'100% - 63px');
               width: calc(~'100% - 16px');
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index da8aa0e8..c9a91355 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -6104,6 +6104,75 @@ footer .container button.big:before {
   display: flex;
   flex-flow: column;
 }
+.card-queue-production .card-queue-production-body .queue-header {
+  height: 64px;
+  width: 100%;
+}
+.card-queue-production .card-queue-production-body .queue-header .tab-box {
+  height: 64px;
+  width: 100%;
+  background-color: #e7e7e7;
+  display: flex;
+  flex-direction: row;
+  border: none !important;
+}
+.card-queue-production .card-queue-production-body .queue-header .tab-box .tab {
+  flex-grow: 0;
+  flex-shrink: 0;
+  float: left !important;
+  width: 256px !important;
+  height: 100% !important;
+  margin: 0 !important;
+  padding: 0;
+  border: none !important;
+  border-right: solid 1px #979797 !important;
+  background-color: #e7e7e7;
+  font-size: 18px !important;
+  line-height: 1 !important;
+  color: #4b4b4b !important;
+  position: relative;
+}
+.card-queue-production .card-queue-production-body .queue-header .tab-box .tab.plus {
+  border-right: none !important;
+}
+.card-queue-production .card-queue-production-body .queue-header .tab-box .tab.plus .btn {
+  float: left !important;
+  margin: 0;
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  top: calc(50% - 24px);
+  margin-left: 20px;
+  padding: 0;
+}
+.card-queue-production .card-queue-production-body .queue-header .tab-box .tab.plus .btn .fa {
+  vertical-align: middle;
+  font-size: 21px;
+}
+.card-queue-production .card-queue-production-body .queue-header .tab-box .tab:last-child {
+  border-right: none !important;
+}
+.card-queue-production .card-queue-production-body .queue-header .tab-box .active {
+  background-color: #fff;
+  border-top: solid 2px #1791ff !important;
+}
+.card-queue-production .card-queue-production-body .queue-header .tab-box .tab-box-scroll {
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  display: flex;
+  flex-direction: row;
+  flex-basis: auto;
+}
+.card-queue-production .card-queue-production-body .queue-header .tab-box .tab-box-scroll::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.card-queue-production .card-queue-production-body .queue-header .tab-box .tab-box-scroll::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  height: 1px;
+  background-color: rgba(0, 0, 0, 0.3);
+}
 .card-queue-production .card-queue-production-body .queue-body {
   height: calc(100% - 63px);
   width: calc(100% - 16px);
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue b/Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue
index a1763c03..5a832cee 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue
@@ -12,9 +12,21 @@
             </div>
         </div>
         <div class="card-queue-production-body">
-            <div class="queue-body scrollable">
+            <div class="queue-header">
+                <div class="tab-box">
+                    <div class="tab-box-scroll">
+                        <button class="tab" :class="{'active': selectedTab == 'Sinistra'}" @click="selectTab('Sinistra')">
+                            <span>Sinistra</span>
+                        </button>
+                        <button class="tab" :class="{'active': selectedTab == 'Destra'}" @click="selectTab('Destra')">
+                            <span>Destra</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="queue-body scrollable" v-if="selectedTab == 'Sinistra'">
                 <Container @drag-start="onDrag" @drag-end="onDragEnd" @drop="changePosition($event)" :get-child-payload="getPayloadForItemQueue">
-                    <Draggable v-for="pp in partPrograms" :key="pp.id" >
+                    <Draggable v-for="pp in partPrograms" :key="pp.id">
                         <div class="element-queue">
                             <label class="number">{{pp.id}}</label><card-element-queue @click="deleteItemQueue(selectedProcess, pp)" :selected-process="selectedProcess" :id-part-program="pp.id" :name="pp.partProgramName" :number="pp.reps" :remaining-reps="pp.remainingReps" :status="pp.status" :vertical-index="selectedPositionTop" @position="positionBoxReps"></card-element-queue>
                         </div>
@@ -43,7 +55,7 @@ import cardElementQueue from "./card-element-queue.vue";
 import {ModalHelper} from "src/modules/base-components";
 import modalAddElementQueue from "src/modules/base-components/modal-add-element-queue.vue"
 import { FileService } from '../../../services/fileService';
-import { Container, Draggable } from "vue-smooth-dnd";
+import { Container, Draggable, } from "vue-smooth-dnd";
 export default {
     components:{
         cardElementQueue, Container, Draggable
@@ -57,7 +69,8 @@ export default {
             draggingItem: null,
             draggingPosition: null,
             itemStatusRunning: null,
-            selectedPositionTop: 0
+            selectedPositionTop: 0,
+            selectedTab: "Sinistra"
         }
     },
     computed: {
@@ -105,17 +118,26 @@ export default {
             this.draggingPosition = null;
         },
         async changePosition(event){
-            this.draggingIn = false;
-            this.draggingItem = null;
-            this.partPrograms.splice(event.addedIndex, 0, this.partPrograms.splice(event.removedIndex,1)[0]);
-            var itemsPositions = {objectId: event.payload.id, newPosition: event.addedIndex};
-            await new FileService().moveItemsQueue(this.selectedProcess,itemsPositions,this.partPrograms);
+            debugger
+            if(event.payload.status != 1 && event.payload.status != 3){
+                this.draggingIn = false;
+                this.draggingItem = null;
+                this.partPrograms.splice(event.addedIndex, 0, this.partPrograms.splice(event.removedIndex,1)[0]);
+                var itemsPositions = {objectId: event.payload.id, newPosition: event.addedIndex};
+                await new FileService().moveItemsQueue(this.selectedProcess,itemsPositions,this.partPrograms);
+            }
+            else{
+                event = null;
+            }
         },
         getPayloadForItemQueue(index){
             return this.partPrograms[index];
         },
         positionBoxReps(arg1, arg2){
             this.selectedPositionTop = (arg1.offsetTop + 78);
+        },
+        selectTab(value){
+            this.selectedTab = value;
         }
 
     }