From 170df80d0aeabaaea084b336a0ee27151fe7f004 Mon Sep 17 00:00:00 2001
From: Alessandro Francia <a.francia@teamdev.it>
Date: Wed, 12 Sep 2018 10:17:31 +0200
Subject: [PATCH] queue

---
 Step/wwwroot/assets/styles/base/card.less     |   6 +
 Step/wwwroot/assets/styles/base/modals.less   |   8 +-
 Step/wwwroot/assets/styles/style.css          | 258 ++++++++++++++----
 Step/wwwroot/src/@types/production.d.ts       |  10 +
 .../cards/card-element-queue.vue              |  12 +-
 .../cards/card-job-production.vue             |   1 +
 .../cards/card-production-cms.vue             |   2 +-
 .../cards/card-queue-production.vue           |  19 +-
 .../modal-add-element-queue.ts                | 231 ++++++++++++++++
 .../modal-add-element-queue.vue               | 123 +++++++++
 .../base-components/modal-load-program.ts     |   1 +
 Step/wwwroot/src/services/hub.ts              |   7 +
 Step/wwwroot/src/store/app.store.ts           |   3 +
 Step/wwwroot/src/store/production.store.ts    |  37 +++
 14 files changed, 648 insertions(+), 70 deletions(-)
 create mode 100644 Step/wwwroot/src/@types/production.d.ts
 create mode 100644 Step/wwwroot/src/modules/base-components/modal-add-element-queue.ts
 create mode 100644 Step/wwwroot/src/modules/base-components/modal-add-element-queue.vue
 create mode 100644 Step/wwwroot/src/store/production.store.ts

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index dbdf5d23..031b634e 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -841,6 +841,12 @@
       border-radius: 2px;
       background-color: @color-background-white;
       box-shadow: 0 1px 2px 0 @color-black-40;
+      &.border-green{
+        border: solid 2px @color-apple-green;
+      }
+      &.border-blue{
+        border: solid 2px @color-clear-blue;
+      }
       .card-element-queue-name{
           width: 100%;
           display: flex;
diff --git a/Step/wwwroot/assets/styles/base/modals.less b/Step/wwwroot/assets/styles/base/modals.less
index 66f6939d..de5b2987 100644
--- a/Step/wwwroot/assets/styles/base/modals.less
+++ b/Step/wwwroot/assets/styles/base/modals.less
@@ -798,7 +798,7 @@
   }
 }
 
-.@{modal}.modal-load-program {
+.@{modal}.modal-load-program, .@{modal}.modal-add-element-queue {
   width: @modal-load-program-width;
   height: @modal-load-program-height;
   top: calc(~"50%" - @modal-load-program-height / 2);
@@ -830,7 +830,7 @@
       color: #fff;
     }
   }
-  .modal-load-program-header {
+  .modal-load-program-header, .modal-add-element-queue-header {
     height: 80px;
     width: 100%;
     display: flex;
@@ -878,7 +878,7 @@
       }
     }
   }
-  .modal-load-program-body {
+  .modal-load-program-body, .modal-add-element-queue-body {
     height: 631px;
     width: 100%;
     display: flex;
@@ -1134,7 +1134,7 @@
       }
     }
   }
-  .modal-load-program-footer {
+  .modal-load-program-footer, .modal-add-element-queue-footer {
     height: 79px;
     width: 100%;
     display: flex;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index f4fa59c6..2a459f68 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -733,14 +733,16 @@
   width: 100%;
   border: none;
 }
-.modal.modal-load-program {
+.modal.modal-load-program,
+.modal.modal-add-element-queue {
   width: 1808px;
   height: 873px;
   top: calc(50% - 436.5px);
   left: calc(50% - 904px);
   background-color: #fff;
 }
-.modal.modal-load-program header {
+.modal.modal-load-program header,
+.modal.modal-add-element-queue header {
   display: flex;
   align-items: center;
   padding-left: 24px;
@@ -748,7 +750,8 @@
   font-size: 20px;
   color: #002680;
 }
-.modal.modal-load-program header button.close {
+.modal.modal-load-program header button.close,
+.modal.modal-add-element-queue header button.close {
   position: absolute;
   width: 28px;
   height: 28px;
@@ -761,17 +764,24 @@
   font-size: 16px;
   cursor: pointer;
 }
-.modal.modal-load-program header button.close:active {
+.modal.modal-load-program header button.close:active,
+.modal.modal-add-element-queue header button.close:active {
   background-color: #1791ff;
   color: #fff;
 }
-.modal.modal-load-program .modal-load-program-header {
+.modal.modal-load-program .modal-load-program-header,
+.modal.modal-add-element-queue .modal-load-program-header,
+.modal.modal-load-program .modal-add-element-queue-header,
+.modal.modal-add-element-queue .modal-add-element-queue-header {
   height: 80px;
   width: 100%;
   display: flex;
   flex-flow: column;
 }
-.modal.modal-load-program .modal-load-program-header .box-search {
+.modal.modal-load-program .modal-load-program-header .box-search,
+.modal.modal-add-element-queue .modal-load-program-header .box-search,
+.modal.modal-load-program .modal-add-element-queue-header .box-search,
+.modal.modal-add-element-queue .modal-add-element-queue-header .box-search {
   width: 100%;
   height: 80px;
   display: flex;
@@ -779,28 +789,46 @@
   align-items: center;
   background-color: #979797;
 }
-.modal.modal-load-program .modal-load-program-header .box-search .path {
+.modal.modal-load-program .modal-load-program-header .box-search .path,
+.modal.modal-add-element-queue .modal-load-program-header .box-search .path,
+.modal.modal-load-program .modal-add-element-queue-header .box-search .path,
+.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .path {
   display: flex;
   flex-flow: row;
   color: #fff;
   margin-left: 20px;
 }
-.modal.modal-load-program .modal-load-program-header .box-search .path .child {
+.modal.modal-load-program .modal-load-program-header .box-search .path .child,
+.modal.modal-add-element-queue .modal-load-program-header .box-search .path .child,
+.modal.modal-load-program .modal-add-element-queue-header .box-search .path .child,
+.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .path .child {
   display: flex;
   flex-flow: row;
 }
-.modal.modal-load-program .modal-load-program-header .box-search .path .child div + .fa.fa-chevron-right:first-child {
+.modal.modal-load-program .modal-load-program-header .box-search .path .child div + .fa.fa-chevron-right:first-child,
+.modal.modal-add-element-queue .modal-load-program-header .box-search .path .child div + .fa.fa-chevron-right:first-child,
+.modal.modal-load-program .modal-add-element-queue-header .box-search .path .child div + .fa.fa-chevron-right:first-child,
+.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .path .child div + .fa.fa-chevron-right:first-child {
   display: none;
 }
-.modal.modal-load-program .modal-load-program-header .box-search .path .child .fa {
+.modal.modal-load-program .modal-load-program-header .box-search .path .child .fa,
+.modal.modal-add-element-queue .modal-load-program-header .box-search .path .child .fa,
+.modal.modal-load-program .modal-add-element-queue-header .box-search .path .child .fa,
+.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .path .child .fa {
   margin: 0px 22px;
 }
-.modal.modal-load-program .modal-load-program-header .box-search .search {
+.modal.modal-load-program .modal-load-program-header .box-search .search,
+.modal.modal-add-element-queue .modal-load-program-header .box-search .search,
+.modal.modal-load-program .modal-add-element-queue-header .box-search .search,
+.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .search {
   display: flex;
   width: 100%;
   justify-content: flex-end;
 }
-.modal.modal-load-program .modal-load-program-header .box-search .search input {
+.modal.modal-load-program .modal-load-program-header .box-search .search input,
+.modal.modal-add-element-queue .modal-load-program-header .box-search .search input,
+.modal.modal-load-program .modal-add-element-queue-header .box-search .search input,
+.modal.modal-add-element-queue .modal-add-element-queue-header .box-search .search input {
   width: 688px;
   height: 48px;
   border-radius: 2px;
@@ -808,28 +836,43 @@
   border: solid 1px #dfdfdf;
   background-color: #f8f8f8;
 }
-.modal.modal-load-program .modal-load-program-body {
+.modal.modal-load-program .modal-load-program-body,
+.modal.modal-add-element-queue .modal-load-program-body,
+.modal.modal-load-program .modal-add-element-queue-body,
+.modal.modal-add-element-queue .modal-add-element-queue-body {
   height: 631px;
   width: 100%;
   display: flex;
   flex-flow: row;
 }
-.modal.modal-load-program .modal-load-program-body hr {
+.modal.modal-load-program .modal-load-program-body hr,
+.modal.modal-add-element-queue .modal-load-program-body hr,
+.modal.modal-load-program .modal-add-element-queue-body hr,
+.modal.modal-add-element-queue .modal-add-element-queue-body hr {
   width: 5%;
 }
-.modal.modal-load-program .modal-load-program-body .first-column {
+.modal.modal-load-program .modal-load-program-body .first-column,
+.modal.modal-add-element-queue .modal-load-program-body .first-column,
+.modal.modal-load-program .modal-add-element-queue-body .first-column,
+.modal.modal-add-element-queue .modal-add-element-queue-body .first-column {
   min-width: 215px;
   border-right: solid 2px #e7e7e7;
   display: flex;
   flex-flow: column;
   padding-top: 19px;
 }
-.modal.modal-load-program .modal-load-program-body .first-column .card-folder-path {
+.modal.modal-load-program .modal-load-program-body .first-column .card-folder-path,
+.modal.modal-add-element-queue .modal-load-program-body .first-column .card-folder-path,
+.modal.modal-load-program .modal-add-element-queue-body .first-column .card-folder-path,
+.modal.modal-add-element-queue .modal-add-element-queue-body .first-column .card-folder-path {
   width: 200px;
   display: flex;
   margin-top: 8px 0 8px 5px;
 }
-.modal.modal-load-program .modal-load-program-body .second-column {
+.modal.modal-load-program .modal-load-program-body .second-column,
+.modal.modal-add-element-queue .modal-load-program-body .second-column,
+.modal.modal-load-program .modal-add-element-queue-body .second-column,
+.modal.modal-add-element-queue .modal-add-element-queue-body .second-column {
   height: calc(100% - 19px);
   min-width: 445px;
   border-right: solid 2px #e7e7e7;
@@ -837,22 +880,34 @@
   flex-flow: column;
   padding-top: 19px;
 }
-.modal.modal-load-program .modal-load-program-body .second-column .content {
+.modal.modal-load-program .modal-load-program-body .second-column .content,
+.modal.modal-add-element-queue .modal-load-program-body .second-column .content,
+.modal.modal-load-program .modal-add-element-queue-body .second-column .content,
+.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .content {
   width: 94%;
   height: 100%;
 }
-.modal.modal-load-program .modal-load-program-body .second-column .content .card-folder-path {
+.modal.modal-load-program .modal-load-program-body .second-column .content .card-folder-path,
+.modal.modal-add-element-queue .modal-load-program-body .second-column .content .card-folder-path,
+.modal.modal-load-program .modal-add-element-queue-body .second-column .content .card-folder-path,
+.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .content .card-folder-path {
   width: 371px;
   display: flex;
   margin-top: 8px 0 8px 8px;
 }
-.modal.modal-load-program .modal-load-program-body .second-column .group-btn {
+.modal.modal-load-program .modal-load-program-body .second-column .group-btn,
+.modal.modal-add-element-queue .modal-load-program-body .second-column .group-btn,
+.modal.modal-load-program .modal-add-element-queue-body .second-column .group-btn,
+.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .group-btn {
   display: flex;
   flex-flow: row;
   justify-content: center;
   margin-bottom: 16px;
 }
-.modal.modal-load-program .modal-load-program-body .second-column .group-btn input {
+.modal.modal-load-program .modal-load-program-body .second-column .group-btn input,
+.modal.modal-add-element-queue .modal-load-program-body .second-column .group-btn input,
+.modal.modal-load-program .modal-add-element-queue-body .second-column .group-btn input,
+.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .group-btn input {
   width: 360px;
   height: 48px;
   padding: 0;
@@ -861,22 +916,34 @@
   border: none;
   border-bottom: 1px solid rgba(0, 0, 0, 0.4);
 }
-.modal.modal-load-program .modal-load-program-body .second-column .group-btn input[type="text"] {
+.modal.modal-load-program .modal-load-program-body .second-column .group-btn input[type="text"],
+.modal.modal-add-element-queue .modal-load-program-body .second-column .group-btn input[type="text"],
+.modal.modal-load-program .modal-add-element-queue-body .second-column .group-btn input[type="text"],
+.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .group-btn input[type="text"] {
   padding-left: 5px;
   outline: none ;
 }
-.modal.modal-load-program .modal-load-program-body .second-column .group-btn input:focus {
+.modal.modal-load-program .modal-load-program-body .second-column .group-btn input:focus,
+.modal.modal-add-element-queue .modal-load-program-body .second-column .group-btn input:focus,
+.modal.modal-load-program .modal-add-element-queue-body .second-column .group-btn input:focus,
+.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .group-btn input:focus {
   border-bottom: 1px solid #1791ff;
   box-shadow: none;
 }
-.modal.modal-load-program .modal-load-program-body .second-column .group-btn i {
+.modal.modal-load-program .modal-load-program-body .second-column .group-btn i,
+.modal.modal-add-element-queue .modal-load-program-body .second-column .group-btn i,
+.modal.modal-load-program .modal-add-element-queue-body .second-column .group-btn i,
+.modal.modal-add-element-queue .modal-add-element-queue-body .second-column .group-btn i {
   width: 44px;
   height: 44px;
   padding: 0;
   margin-top: 4px;
   color: #002680;
 }
-.modal.modal-load-program .modal-load-program-body .third-column {
+.modal.modal-load-program .modal-load-program-body .third-column,
+.modal.modal-add-element-queue .modal-load-program-body .third-column,
+.modal.modal-load-program .modal-add-element-queue-body .third-column,
+.modal.modal-add-element-queue .modal-add-element-queue-body .third-column {
   height: calc(100% - 19px);
   min-width: 447px;
   border-right: solid 2px #e7e7e7;
@@ -884,16 +951,25 @@
   flex-flow: column;
   padding-top: 19px;
 }
-.modal.modal-load-program .modal-load-program-body .third-column .content {
+.modal.modal-load-program .modal-load-program-body .third-column .content,
+.modal.modal-add-element-queue .modal-load-program-body .third-column .content,
+.modal.modal-load-program .modal-add-element-queue-body .third-column .content,
+.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .content {
   width: 94%;
   height: 100%;
 }
-.modal.modal-load-program .modal-load-program-body .third-column .content .card-folder-path {
+.modal.modal-load-program .modal-load-program-body .third-column .content .card-folder-path,
+.modal.modal-add-element-queue .modal-load-program-body .third-column .content .card-folder-path,
+.modal.modal-load-program .modal-add-element-queue-body .third-column .content .card-folder-path,
+.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .content .card-folder-path {
   width: 371px;
   display: flex;
   margin-top: 8px 0 8px 8px;
 }
-.modal.modal-load-program .modal-load-program-body .third-column .label-folder-empty {
+.modal.modal-load-program .modal-load-program-body .third-column .label-folder-empty,
+.modal.modal-add-element-queue .modal-load-program-body .third-column .label-folder-empty,
+.modal.modal-load-program .modal-add-element-queue-body .third-column .label-folder-empty,
+.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .label-folder-empty {
   display: flex;
   width: 100%;
   height: 100%;
@@ -902,13 +978,19 @@
   color: #4b4b4b;
   font-size: 20px;
 }
-.modal.modal-load-program .modal-load-program-body .third-column .group-btn {
+.modal.modal-load-program .modal-load-program-body .third-column .group-btn,
+.modal.modal-add-element-queue .modal-load-program-body .third-column .group-btn,
+.modal.modal-load-program .modal-add-element-queue-body .third-column .group-btn,
+.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .group-btn {
   display: flex;
   flex-flow: row;
   justify-content: center;
   margin-bottom: 16px;
 }
-.modal.modal-load-program .modal-load-program-body .third-column .group-btn input {
+.modal.modal-load-program .modal-load-program-body .third-column .group-btn input,
+.modal.modal-add-element-queue .modal-load-program-body .third-column .group-btn input,
+.modal.modal-load-program .modal-add-element-queue-body .third-column .group-btn input,
+.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .group-btn input {
   width: 360px;
   height: 48px;
   padding: 0;
@@ -917,22 +999,34 @@
   border: none;
   border-bottom: 1px solid rgba(0, 0, 0, 0.4);
 }
-.modal.modal-load-program .modal-load-program-body .third-column .group-btn input[type="text"] {
+.modal.modal-load-program .modal-load-program-body .third-column .group-btn input[type="text"],
+.modal.modal-add-element-queue .modal-load-program-body .third-column .group-btn input[type="text"],
+.modal.modal-load-program .modal-add-element-queue-body .third-column .group-btn input[type="text"],
+.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .group-btn input[type="text"] {
   padding-left: 5px;
   outline: none ;
 }
-.modal.modal-load-program .modal-load-program-body .third-column .group-btn input:focus {
+.modal.modal-load-program .modal-load-program-body .third-column .group-btn input:focus,
+.modal.modal-add-element-queue .modal-load-program-body .third-column .group-btn input:focus,
+.modal.modal-load-program .modal-add-element-queue-body .third-column .group-btn input:focus,
+.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .group-btn input:focus {
   border-bottom: 1px solid #1791ff;
   box-shadow: none;
 }
-.modal.modal-load-program .modal-load-program-body .third-column .group-btn i {
+.modal.modal-load-program .modal-load-program-body .third-column .group-btn i,
+.modal.modal-add-element-queue .modal-load-program-body .third-column .group-btn i,
+.modal.modal-load-program .modal-add-element-queue-body .third-column .group-btn i,
+.modal.modal-add-element-queue .modal-add-element-queue-body .third-column .group-btn i {
   width: 44px;
   height: 44px;
   padding: 0;
   margin-top: 4px;
   color: #002680;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item {
+.modal.modal-load-program .modal-load-program-body .selected-item,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item {
   width: 660px;
   height: 100%;
   display: flex;
@@ -940,30 +1034,45 @@
   justify-content: flex-end;
   padding: 0 16px 0 22px;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header {
   height: 78px;
   width: 100%;
   display: flex;
   flex-flow: row;
   align-items: center;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .subtitle,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .subtitle,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .subtitle {
   display: flex;
   flex-flow: row;
   font-size: 13px;
   line-height: 4px;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle .title {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle .title,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .subtitle .title,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .subtitle .title,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .subtitle .title {
   width: 110px;
   text-align: right;
   color: #002680;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle .text {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .subtitle .text,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .subtitle .text,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .subtitle .text,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .subtitle .text {
   margin-right: 40px;
   color: #4b4b4b;
   margin-left: 5px;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .selected-item-title {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .selected-item-title,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .selected-item-title,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .selected-item-title,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .selected-item-title {
   height: 100%;
   width: 100%;
   display: flex;
@@ -973,17 +1082,26 @@
   font-size: 26px;
   line-height: 55px;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .group-button {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .group-button,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .group-button,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .group-button,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .group-button {
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .group-button i {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-header .group-button i,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-header .group-button i,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-header .group-button i,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-header .group-button i {
   font-size: 24px;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body {
   width: 100%;
   height: calc(100% - 78px);
   position: relative;
@@ -991,20 +1109,29 @@
   display: flex;
   flex-flow: column;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image {
   display: flex;
   width: 100%;
   margin-top: 10px;
   height: 336px;
   align-items: center;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image img {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image img,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image img,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image img,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image img {
   display: block;
   margin: auto;
   max-height: 336px;
   box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4);
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image .noimage {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image .noimage,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-image .noimage,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image .noimage,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-image .noimage {
   display: block;
   margin: auto;
   height: 290px;
@@ -1016,7 +1143,10 @@
   box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.4);
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description {
   display: flex;
   width: 100%;
   margin-top: 10px;
@@ -1024,7 +1154,10 @@
   height: calc(100% - 380px);
   flex-flow: column;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row {
   height: 32px;
   min-height: 32px;
   display: flex;
@@ -1034,18 +1167,30 @@
   text-align: justify;
   overflow: hidden;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row label {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row label,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row label,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row label,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row label {
   font-size: 18px;
   margin-left: 5px;
   white-space: nowrap;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(odd) {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(odd),
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(odd),
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(odd),
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(odd) {
   background-color: rgba(23, 145, 255, 0.3);
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(even) {
+.modal.modal-load-program .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(even),
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(even),
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(even),
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .selected-item-body .selected-item-body-description .row:nth-child(even) {
   background-color: #f3f3f3;
 }
-.modal.modal-load-program .modal-load-program-body .selected-item .notselecteditem {
+.modal.modal-load-program .modal-load-program-body .selected-item .notselecteditem,
+.modal.modal-add-element-queue .modal-load-program-body .selected-item .notselecteditem,
+.modal.modal-load-program .modal-add-element-queue-body .selected-item .notselecteditem,
+.modal.modal-add-element-queue .modal-add-element-queue-body .selected-item .notselecteditem {
   position: absolute;
   right: 0;
   width: 695px;
@@ -1058,7 +1203,10 @@
   align-items: center;
   justify-content: center;
 }
-.modal.modal-load-program .modal-load-program-footer {
+.modal.modal-load-program .modal-load-program-footer,
+.modal.modal-add-element-queue .modal-load-program-footer,
+.modal.modal-load-program .modal-add-element-queue-footer,
+.modal.modal-add-element-queue .modal-add-element-queue-footer {
   height: 79px;
   width: 100%;
   display: flex;
@@ -5656,6 +5804,12 @@ footer .container button.big:before {
   background-color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
 }
+.card-element-queue.border-green {
+  border: solid 2px #7ed321;
+}
+.card-element-queue.border-blue {
+  border: solid 2px #1791ff;
+}
 .card-element-queue .card-element-queue-name {
   width: 100%;
   display: flex;
diff --git a/Step/wwwroot/src/@types/production.d.ts b/Step/wwwroot/src/@types/production.d.ts
new file mode 100644
index 00000000..50d7981f
--- /dev/null
+++ b/Step/wwwroot/src/@types/production.d.ts
@@ -0,0 +1,10 @@
+declare module server {
+    export interface PartProgramModel {
+        absolutePath: string,
+        id: number,
+        partProgramName: string,
+        remainingReps: number,
+        reps: number,
+        status: number
+    }
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-element-queue.vue b/Step/wwwroot/src/modules/base-components/cards/card-element-queue.vue
index c58ea2b5..5b7aaac4 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-element-queue.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-element-queue.vue
@@ -1,10 +1,15 @@
 <template>
 <!-- <div class="test-container"> -->
-    <div class="card-element-queue">
+    <div class="card-element-queue" :class="{'border-blue': status != 1, 'border-green': status == 1}">
         <div class="card-element-queue-name">
             <label>{{name}}</label>
         </div>
-        <div class="card-element-queue-right">
+        <div class="card-element-queue-right" v-if="status == 1">
+            <div class="square-number">
+                <label>x{{number}}</label>
+            </div>
+        </div>
+        <div class="card-element-queue-right" v-if="status != 1">
             <div class="square-number">
                 <label>x{{number}}</label>
             </div>
@@ -17,7 +22,8 @@
 export default {
     props:{
         name: {default: "Part program 01"},
-        number: { default: 2}
+        number: { default: 2},
+        status: { default: 0}
     }
 };
 </script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue b/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
index 968dfdf0..92a652c3 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
@@ -61,6 +61,7 @@ export default {
   },
   computed: {
     currentProgram: function() {
+      console.log(this.$store.state.process.currentProgram);
       return this.$store.state.process.currentProgram;
     },
     indexofActiveLine: function() {
diff --git a/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue b/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
index f28d45ee..e0d4983d 100644
--- a/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
@@ -35,7 +35,7 @@ export default {
     return {};
   },
   props: {
-    queue: { default: false }
+    queue: { default: true }
   },
   components: {
     cardQueueProduction,
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 861c5ae6..f2fd83e3 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
@@ -13,14 +13,8 @@
         </div>
         <div class="card-queue-production-body">
             <div class="queue-body scrollable">
-                <div class="element-queue">
-                    <label class="number">1</label><card-element-queue></card-element-queue>
-                </div>
-                <div class="element-queue">
-                    <label class="number">2</label><card-element-queue></card-element-queue>
-                </div>
-                <div class="element-queue">
-                    <label class="number">3</label><card-element-queue></card-element-queue>
+                <div v-for="(pp, key) in partPrograms" :key="key" class="element-queue">
+                    <label class="number">{{key}}</label><card-element-queue :name="pp.partProgramName" :number="pp.reps" :status="pp.status"></card-element-queue>
                 </div>
             </div>
             <div class="queue-footer">
@@ -39,14 +33,19 @@
 <script>
 import cardElementQueue from "./card-element-queue.vue";
 import {ModalHelper} from "src/modules/base-components";
-import modalLoadProgram from "src/modules/base-components/modal-load-program.vue"
+import modalAddElementQueue from "src/modules/base-components/modal-add-element-queue.vue"
 export default {
     components:{
         cardElementQueue
     },
+    computed: {
+        partPrograms: function(){
+            return this.$store.state.production.partProgram;
+        }
+    },
     methods:{
         openModal(){
-            ModalHelper.ShowModal(modalLoadProgram);
+            ModalHelper.ShowModal(modalAddElementQueue);
         }
     }
 }
diff --git a/Step/wwwroot/src/modules/base-components/modal-add-element-queue.ts b/Step/wwwroot/src/modules/base-components/modal-add-element-queue.ts
new file mode 100644
index 00000000..9a10d808
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/modal-add-element-queue.ts
@@ -0,0 +1,231 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import Modal from "src/modules/base-components/modal.vue";
+import { ModalHelper } from "src/modules/base-components/ModalHelper";
+import { Factory, MessageService,awaiter } from "../../_base";
+// import { MaintenanceService } from "../services/maintenanceService";
+// import { store } from "src/store";
+// import { maintenanceActions } from "../store/maintenance.store";
+import moment from "moment";
+import cardFolderPath from "./cards/card-folder-path.vue";
+import cardElementQueue from "./cards/card-element-queue.vue";
+import * as iziToast from "izitoast";
+import { fileService } from "../../services/fileService";
+
+declare var cmsClient: any;
+
+
+
+
+interface PathInfo {
+  Name: string;
+  AbsolutePath: string;
+  Path: string;
+  IsDirectory: boolean;
+}
+
+interface FileInfo {
+  Name: string;
+  AbsolutePath: string;
+  CreationDate: string;
+  LastModDate: string;
+  Content: Array<any>;
+  PreviewBase64: any;
+}
+
+@Component({
+  components: {
+    modal: Modal,
+    cardFolderPath,
+    cardElementQueue
+  }
+})
+export default class ModalAddElementQueue extends Vue {
+  driveList: Array<PathInfo> = [];
+  currentPath: string = "";
+  currentDrive: string = null;
+  lastClickPath: string = "";
+
+  breadcrumbs: Array<any> = [];
+
+  firstColumnData: Array<PathInfo> = [];
+  secondColumnData: Array<PathInfo> = [];
+
+  isLocalNavigation: boolean = true;
+  selectedFile: FileInfo = null;
+
+  currentFilterFirst: string = "";
+  currentFilterSecond: string = "";
+
+  navigationDepth: number = 0;
+
+  mounted() {
+    if (typeof cmsClient != "undefined") {
+      this.driveList = JSON.parse(cmsClient.getOSdriveList());
+    }
+  }
+
+  async navigateTo(
+    path: string,
+    absolutePath: string,
+    local: boolean,
+    todepth: number,
+    fromdepth: number
+  ) {
+    this.currentPath = absolutePath;
+    this.lastClickPath = absolutePath;
+    this.checkChangeNavigationType(local);
+    var files = await this.getFilesForPath(absolutePath, path, local);
+
+    // controlla se impostare il currentDrive
+    if (fromdepth == 0) this.currentDrive = absolutePath;
+
+    // controlla come organizzare le colonne.
+    if (this.navigationDepth == 2 && todepth == 2 && fromdepth == 2) {
+      this.fillArray(this.firstColumnData, this.secondColumnData);
+    }
+
+    this.navigationDepth = todepth;
+    if (todepth == 1) {
+      this.fillArray(this.firstColumnData, files);
+      this.secondColumnData.splice(0, this.secondColumnData.length);
+      this.currentFilterFirst = "";
+      this.selectedFile = null;
+    }
+
+    if (todepth == 2) {
+      this.fillArray(this.secondColumnData, files);
+      this.currentFilterSecond = "";
+    }
+    this.calcBreadCrumb(absolutePath);
+  }
+
+  fillArray(destinationArray: Array<any>, sourceArray: Array<any>) {
+    destinationArray.splice(0, destinationArray.length);
+    for (const key in sourceArray) {
+      if (sourceArray.hasOwnProperty(key)) {
+        const element = sourceArray[key];
+        destinationArray.push(element);
+      }
+    }
+  }
+
+  checkChangeNavigationType(local: boolean) {
+    if (this.isLocalNavigation != local) {
+      this.navigationDepth = 0;
+      this.firstColumnData.splice(0, this.firstColumnData.length);
+      this.secondColumnData.splice(0, this.secondColumnData.length);
+    }
+  }
+
+  async getFilesForPath(absolutePath: string, path: string, local: boolean): Promise<Array<any>> {
+    this.isLocalNavigation = local;
+    var result = null;
+    console.log(path);
+    if (local) result = JSON.parse(cmsClient.getFileList(absolutePath));
+    else result = await awaiter(fileService.getFiles(path));    
+    return this.toUpperCaseModel(result).sort(this.compareDirectoriesFirst);
+  }
+
+  private compareDirectoriesFirst(x,y){    
+    return (x.IsDirectory === y.IsDirectory)? 0 : x.IsDirectory? -1 : 1;
+  }
+
+  toUpperCaseModel(data: Array<any>): Array<PathInfo> {
+    console.log(data)
+    return data.map(i => {
+      return {
+        Name: i.name || i.Name,
+        AbsolutePath: i.absolutePath || i.AbsolutePath,
+        Path: i.path || i.Path,
+        IsDirectory: (i.isDirectory != null && i.isDirectory) ||  (i.IsDirectory != null && i.IsDirectory)
+      };
+    });
+  }
+
+  calcBreadCrumb(path: string) {
+    this.breadcrumbs.splice(0, this.breadcrumbs.length);
+    if (path.startsWith("\\\\")) {
+    this.breadcrumbs.push({
+      name: "CN",
+      path: "\\\\"
+    });}
+    if (path) {
+      var fragments = path.split("\\");
+      var __p = "";
+      fragments.forEach(element => {
+        __p = __p + element + "\\";
+        this.breadcrumbs.push({
+          name: element,
+          path: __p
+        });
+      });
+    }
+  }
+
+  isInPath(path) {
+    if (this.currentPath) return this.currentPath.startsWith(path);
+    return false;
+  }
+
+  toUpperCaseFileModel(data: any): FileInfo {
+    return {
+      AbsolutePath: data.absolutePath || data.AbsolutePath,
+      Path: data.path || data.Path,
+      Content: data.content || data.Content,
+      CreationDate: data.creationDate || data.CreationDate,
+      LastModDate: data.lastModDate || data.LastModDate,
+      Name: data.name || data.Name,
+      PreviewBase64: data.previewBase64 || data.PreviewBase64
+    } as FileInfo;
+  }
+
+  async fileInfo(str, fromdepth: number) {
+    this.lastClickPath = str;
+    if (fromdepth == 1)
+      this.secondColumnData.splice(0, this.secondColumnData.length);
+
+    if (this.isLocalNavigation && typeof cmsClient != "undefined")
+      this.selectedFile = this.toUpperCaseFileModel(
+        JSON.parse(cmsClient.getProgramInfo(str))
+      );
+
+    if (!this.isLocalNavigation)
+      this.selectedFile = this.toUpperCaseFileModel(
+        await awaiter(fileService.getFileInfo(str)));
+  }
+  close() {
+    Factory.Get(MessageService).deleteChannel("esc_pressed");
+    ModalHelper.HideModal();
+  }
+  reload() {
+    this.driveList = JSON.parse(cmsClient.getOSdriveList());
+  }
+
+  getDate(date) {
+    return moment(date).format("L");
+  }
+
+  async loadProgram(path: string) {
+    debugger
+    if (this.isLocalNavigation && typeof cmsClient != "undefined") {
+      var resp = cmsClient.uploadAndAddToQueue(path, 1);
+      if(resp != "")
+        (iziToast as any).error({
+          title: resp.split(";")[0],
+          message: resp.split(";")[1],
+          theme: "dark",
+          timeout: 10000,
+          class: "t-error",
+          transitionOut: "fadeOut",
+        })
+      else
+        this.close();
+    }
+
+    // if (!this.isLocalNavigation) {
+    //   await awaiter(fileService.activateProgram(path));
+    //   this.close();
+    // }
+  }
+}
diff --git a/Step/wwwroot/src/modules/base-components/modal-add-element-queue.vue b/Step/wwwroot/src/modules/base-components/modal-add-element-queue.vue
new file mode 100644
index 00000000..4fd74d4a
--- /dev/null
+++ b/Step/wwwroot/src/modules/base-components/modal-add-element-queue.vue
@@ -0,0 +1,123 @@
+<template>
+  <modal type="modal-add-element-queue" :title="'modal_add_element_queue_lbl_title_window' | localize('Aggiungere elemento in coda')">
+    <button class="close" slot="header-buttons" @click="close()"><i class="fa fa-remove"></i></button>
+            <div class="modal-add-element-queue-header">
+                <!-- <div class="title">
+                        <i class="fa fa-chevron-left"></i>
+                    Selezione programma da aggiungere in coda
+                </div> -->
+                <div class="box-search">
+                    <div class="path">
+
+                        <div class="child" v-for="(bread,key) in this.breadcrumbs" :key="key">
+                            <div v-if="bread.name && key!=0"><i class="fa fa-chevron-right"></i></div>
+                            <a href="#" @click="navigateTo(bread.path,bread.absolutePath,isLocalNavigation, 1,1)">{{bread.name}}</a>
+                        </div>
+                        <!-- <div class="root">PC</div>
+                        <div v-if="true"><i class="fa fa-chevron-right"></i></div>
+                        <div class="child">Cliente A</div>
+                        <div v-if="true"><i class="fa fa-chevron-right"></i></div>
+                        <div class="child">Part Program 01</div> -->
+                    </div>
+                </div>
+            </div>
+            <div class="modal-add-element-queue-body">
+                <div class="first-column">
+                    <card-folder-path v-for="(val, key) in this.driveList" :key="key" :name="val.Name" :iconType="val.Type"
+                                      :selected="val.Path == currentDrive"  @click="navigateTo(val.Path,val.Path, true, 1,0)" ></card-folder-path>
+                </div>
+                <div class="second-column" v-if="navigationDepth <1"></div>
+                <div class="second-column" v-if="navigationDepth >=1">
+                    <div class="group-btn">
+                        <input type="text" v-model="currentFilterFirst" :placeholder="'modal_add_element_queue_search_placeholder' | localize('Cerca un programma per nome')">
+                        <i class="fa fa-2x fa-search"></i>
+                    </div>
+                    <div class="content scrollable">
+                        <card-folder-path v-for="(val,key) in this.firstColumnData.filter(t => t.Name.toLowerCase().indexOf(currentFilterFirst.toLowerCase()) >=0)"
+                            :key="key"
+                            :name="val.Name"
+                            :disabled="!isCnReady() && !isLocalNavigation"
+                            :class="{dark: val.AbsolutePath == lastClickPath}"
+                            :selected="isInPath(val.AbsolutePath) || val.AbsolutePath == lastClickPath"
+                            :withArrow="val.IsDirectory == true"
+                            :iconType="val.IsDirectory? 'FOLDER':'FILE'"
+                            @click="val.IsDirectory ? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,1): fileInfo(val.AbsolutePath,1)"></card-folder-path>
+                    </div>
+                </div>
+                <div class="third-column" v-if="navigationDepth <2"></div>
+                <div class="third-column" v-if="navigationDepth >=2">
+                    <!-- !(this.arrayViewList[1] ? this.arrayViewList[1].length < 1 : false) -->
+                    <div class="group-btn">
+                        <input type="text" v-model="currentFilterSecond" :placeholder="'modal_add_element_queue_search_placeholder' | localize('Cerca un programma per nome')">
+                        <i class="fa fa-2x fa-search"></i>
+                    </div>
+                    <div class="label-folder-empty" v-if="secondColumnData.length ==0">
+                        <label>Cartella vuota</label>
+                    </div>
+                    <div class="content scrollable" v-if="secondColumnData.length >0">
+                        <card-folder-path v-for="val in (this.secondColumnData.filter(t => t.Name.toLowerCase().indexOf(currentFilterSecond.toLowerCase()) >=0))"
+                            :key="val.Name"
+                            :name="val.Name"
+                            :disabled="!isCnReady() && !isLocalNavigation"
+                            :class="{dark: val.AbsolutePath == lastClickPath}"
+                            :selected="isInPath(val.AbsolutePath) || val.AbsolutePath == lastClickPath"
+                            :withArrow="val.IsDirectory == true"
+                            :iconType="val.IsDirectory? 'FOLDER':'FILE'"
+                            @click="val.IsDirectory? navigateTo(val.Path, val.AbsolutePath, isLocalNavigation, 2,2):fileInfo(val.AbsolutePath,2) "></card-folder-path>
+                        <!-- <card-folder-path name="Cliente A" @click="selectItem()" :with-arrow="false"></card-folder-path>-->
+                    </div>
+                </div>
+                <div class="selected-item" v-if="selectedFile">
+                    <div class="selected-item-header">
+                        <div>
+                            <label class="selected-item-title">{{selectedFile.Name}}</label>
+                        
+                            <div class="subtitle">
+                                <label class="title">{{'modal_add_element_queue_creation_date' | localize("Creation Date:")}}</label>
+                                <label class="text">{{getDate(selectedFile.CreationDate)}}</label>
+                            <label class="title">{{'modal_add_element_queue_last_change_date' | localize("Last Change Date:")}}</label>
+                            <label class="text">{{getDate(selectedFile.LastModDate)}}</label>
+                            </div>
+                        </div>
+                        <div class="group-button">
+                            <button class="btn" v-if="false"><i class="fa fa-clone"></i></button>
+                            <button class="btn" disabled><i class="fa fa-pencil-square-o"></i></button>
+                        </div>
+                    </div>
+                    <div class="selected-item-body">
+                        <div class="selected-item-body-image">
+                            <img v-if="selectedFile.PreviewBase64" :src="selectedFile.PreviewBase64">
+                            <div v-if="!selectedFile.PreviewBase64" class="noimage">
+                                {{'modal_add_element_queue_lbl_img_not_found' | localize('Preview non disponibile')}}
+                            </div>
+                        </div>
+                        <div class="selected-item-body-description scrollable">
+                            <div class="row" v-for="(item,index) in selectedFile.Content" :key="'line' + index">
+                               <label>{{item}}</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="selected-item" v-if="!selectedFile">
+                    <div class="notselecteditem">
+                        <label>{{'modal_add_element_queue_lbl_box_select_program' | localize('Seleziona programma')}}</label>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-add-element-queue-footer">
+                <!-- <button class="btn btn-success"
+                        :disabled="!selectedFile || !isCnReady()"
+                        v-if="!this.isLocalNavigation"
+                        @click="loadProgram(selectedFile.AbsolutePath)">
+                        {{'modal_add_element_queue_btn_load_program' | localize('Attiva programma')}}
+                </button> -->
+                <button class="btn btn-success"
+                        :disabled="!selectedFile || !isCnReady()"
+                        v-if="this.isLocalNavigation"
+                        @click="loadProgram(selectedFile.AbsolutePath)">
+                        {{'modal_add_element_queue_btn_upload_program' | localize('Aggiungi elemento')}}
+                </button>
+            </div>
+  </modal>
+</template>
+<script src="./modal-add-element-queue.ts" lang="ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/modal-load-program.ts b/Step/wwwroot/src/modules/base-components/modal-load-program.ts
index 57a618c4..0b6254f6 100644
--- a/Step/wwwroot/src/modules/base-components/modal-load-program.ts
+++ b/Step/wwwroot/src/modules/base-components/modal-load-program.ts
@@ -207,6 +207,7 @@ export default class ModalLoadProgram extends Vue {
   }
 
   async loadProgram(path: string) {
+    debugger
     if (this.isLocalNavigation && typeof cmsClient != "undefined") {
       var resp = cmsClient.uploadAndActivateProgram(path);
       if(resp != "")
diff --git a/Step/wwwroot/src/services/hub.ts b/Step/wwwroot/src/services/hub.ts
index eef4e677..fa8bc74f 100644
--- a/Step/wwwroot/src/services/hub.ts
+++ b/Step/wwwroot/src/services/hub.ts
@@ -13,6 +13,7 @@ import { SoftKeyModel } from "../store/machineStatus.store";
 import { depotActions } from "../store/depot.store";
 import { fileService } from "./fileService";
 import { toolingActions } from "../store/tooling.store";
+import { productionActions } from "../store/production.store";
 
 declare let $: any;
 declare let cmsClient: any;
@@ -70,6 +71,8 @@ export class Hub {
     this._hub.client.activeProgramData = Hub.activeProgramData;
     this._hub.client.magazineIsActive = Hub.magazineIsActive;
 
+    this._hub.client.partProgramQueue = Hub.partProgramQueue;
+
     this._hub.client.logout = this.logout;
 
     // Token per signalr agganciato in modo esplicito
@@ -134,6 +137,10 @@ export class Hub {
     processModelActions.setValueAxisSelected(store, data);
   }
 
+  private static partProgramQueue(data){
+    productionActions.updatePartPrograms(store, data);
+  }
+
   private static magazineIsActive(data){
     let newArrayMagazine = [];
     let magazines = (store.state as AppModel).tooling.magazines;
diff --git a/Step/wwwroot/src/store/app.store.ts b/Step/wwwroot/src/store/app.store.ts
index 515c23c3..f2c4405a 100644
--- a/Step/wwwroot/src/store/app.store.ts
+++ b/Step/wwwroot/src/store/app.store.ts
@@ -11,6 +11,7 @@ import { depotStore, DepotStoreModel} from "./depot.store";
 import { maintenanceStore, MaintenanceStoreModel} from "./maintenance.store";
 
 import { LocalizationService, localizationService } from "src/services/localizationService";
+import { ProductionStoreModel, productionStore } from "./production.store";
 
 
 Vue.use(Vuex);
@@ -28,6 +29,7 @@ export interface AppModel {
   process: RunningProcessModel;
   tooling: ToolingStoreModel;
   depot: DepotStoreModel;
+  production: ProductionStoreModel;
   maintenance: MaintenanceStoreModel;
 }
 
@@ -62,6 +64,7 @@ const _store = {
     localization: localizationStore,
     tooling: toolingStore,
     depot: depotStore,
+    production: productionStore,
     maintenance: maintenanceStore
   },
 
diff --git a/Step/wwwroot/src/store/production.store.ts b/Step/wwwroot/src/store/production.store.ts
new file mode 100644
index 00000000..06606b43
--- /dev/null
+++ b/Step/wwwroot/src/store/production.store.ts
@@ -0,0 +1,37 @@
+export interface ProductionStoreModel {
+  partProgram: Array<server.PartProgramModel>
+}
+
+export interface ProductionGetters{
+
+}
+
+export interface ProductionActions {
+    updatePartPrograms(context, model: server.PartProgramModel[]);
+}
+
+export const productionStore = {
+  state: {
+    _partProgram: new Map<number, server.PartProgramModel>(),
+    partProgram: [],
+  } as ProductionStoreModel,
+  getters:{
+  },
+  mutations: {
+    UpdatePartProgram(store, model: server.PartProgramModel) {
+        store._partProgram.set(model.id, model);
+        store.partProgram = Array.from(store._partProgram.values());
+      }
+  },
+  actions: {
+    updatePartPrograms(context, model: server.PartProgramModel[]) {
+        for (const key in model) {
+          const element = model[key];
+          context.commit("UpdatePartProgram", element);
+        }
+      },
+
+  } as ProductionActions
+}
+
+export const productionActions = productionStore.actions as ProductionActions;