From 0f1fa1aadd54ba58fd737caa623e4e92945107f0 Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Mon, 1 Oct 2018 17:28:46 +0200
Subject: [PATCH] Fix Style on job-editor

---
 Step/wwwroot/assets/styles/base/buttons.less  |  7 ++-
 .../assets/styles/base/job-editor.less        | 19 ++++++
 Step/wwwroot/assets/styles/style.css          | 20 +++++-
 .../src/components/job-editor-detail.vue      |  4 +-
 Step/wwwroot/src/components/job-editor.ts     | 61 ++++++++++++++++---
 Step/wwwroot/src/components/job-editor.vue    | 18 +++---
 Step/wwwroot/src/modules/app-footer.vue       |  2 +-
 7 files changed, 108 insertions(+), 23 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/buttons.less b/Step/wwwroot/assets/styles/base/buttons.less
index e5a38233..53b9aab0 100644
--- a/Step/wwwroot/assets/styles/base/buttons.less
+++ b/Step/wwwroot/assets/styles/base/buttons.less
@@ -17,9 +17,12 @@ button {
 
 button[disabled] {
     cursor: not-allowed !important;
+    *{
+        cursor: not-allowed !important;
+    }
 }
 
-button.btn[disabled] {
+button.btn[disabled]{
     border-radius: 2px;
     border-radius: 2px;
     background-color: #dddddd;
@@ -50,7 +53,7 @@ button.btn {
     border: none;
     background-image: linear-gradient(to bottom, @color-white2, @color-silver);
     color: @color-darkish-blue;
-    &:active {
+    &:active:not([disabled]){
         background-image: linear-gradient(to bottom, @color-silver, @color-white2);
         border: none !important;
         box-shadow: inset @button-shadow !important;
diff --git a/Step/wwwroot/assets/styles/base/job-editor.less b/Step/wwwroot/assets/styles/base/job-editor.less
index 973717b2..f80713a1 100644
--- a/Step/wwwroot/assets/styles/base/job-editor.less
+++ b/Step/wwwroot/assets/styles/base/job-editor.less
@@ -7,6 +7,7 @@
     display: flex;
     justify-content: center;
     padding-top: 104px;
+        
     .job-editor-box{
         width: 1808px;
         height: 872px;
@@ -41,6 +42,24 @@
                 //     border-radius: 2px;
                 //     font-size: 20px;
                 // }
+                .job-name-box{    
+                    font-size: 18px;
+                    line-height: 1.11;
+                    color: #4b4b4b;
+                    padding: 0 5px;
+                    box-sizing: border-box;
+                    width: 300px;
+
+                }
+                .btn{
+                    width: 70px;
+                } 
+                
+                .fa{
+                    font-size: 24px;
+                    cursor: pointer;    
+                }
+
                 span{
                     display: flex;
                     align-items: center;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 5f17e76f..f5414178 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -2034,6 +2034,9 @@ button {
 button[disabled] {
   cursor: not-allowed !important;
 }
+button[disabled] * {
+  cursor: not-allowed !important;
+}
 button.btn[disabled] {
   border-radius: 2px;
   background-color: #dddddd;
@@ -2063,7 +2066,7 @@ button.btn {
   background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
   color: #002680;
 }
-button.btn:active {
+button.btn:active:not([disabled]) {
   background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
   border: none !important;
   box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
@@ -12856,6 +12859,21 @@ footer .container button.big:before {
   flex-flow: row;
   margin-left: 24px;
 }
+.job-editor-container .job-editor-box .job-editor-header .search-job .job-name-box {
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding: 0 5px;
+  box-sizing: border-box;
+  width: 300px;
+}
+.job-editor-container .job-editor-box .job-editor-header .search-job .btn {
+  width: 70px;
+}
+.job-editor-container .job-editor-box .job-editor-header .search-job .fa {
+  font-size: 24px;
+  cursor: pointer;
+}
 .job-editor-container .job-editor-box .job-editor-header .search-job span {
   display: flex;
   align-items: center;
diff --git a/Step/wwwroot/src/components/job-editor-detail.vue b/Step/wwwroot/src/components/job-editor-detail.vue
index c9e1dea5..ea245d79 100644
--- a/Step/wwwroot/src/components/job-editor-detail.vue
+++ b/Step/wwwroot/src/components/job-editor-detail.vue
@@ -2,10 +2,10 @@
   <div class="editor">
     <div class="buttons">
       <button class="btn" :active="interactive" @click="interactive = !interactive">
-        <img src="">
+        <i class="fa fa-th-large"></i>
       </button>
       <button class="btn" :active="!interactive" @click="interactive = !interactive">
-        <img src="">
+        <i class="fa fa-code"></i>
       </button>
     </div>
     <div class="interactive-editor scrollable" v-if="interactive">
diff --git a/Step/wwwroot/src/components/job-editor.ts b/Step/wwwroot/src/components/job-editor.ts
index f89c569a..dbc798cf 100644
--- a/Step/wwwroot/src/components/job-editor.ts
+++ b/Step/wwwroot/src/components/job-editor.ts
@@ -8,6 +8,7 @@ import jobEditorDetail from "./job-editor-detail.vue";
 import { store, AppModel } from "../store";
 import { ToolingService } from "../services/toolingService";
 import { ModalHelper, ModalMissingTools, ModalJobAddParameter } from "../modules/base-components";
+import * as iziToast from "izitoast";
 import { Watch } from "vue-property-decorator";
 
 declare let $: any;
@@ -66,7 +67,17 @@ export default class JobEditor extends Vue {
     if (this.currentJob)
       ModalHelper.AskConfirm(this.$options.filters.localize("modal_open_job", "Richiesta di conferma"),
         this.$options.filters.localize("modal_open_job_body", "Sei sicuro di aver salvato il Job?"),
-        () => this.currentJob = JSON.parse(cmsClient.newJob()), null);
+        () => {
+          var res = cmsClient.newJob();
+          if(res){
+            var obj = JSON.parse(res);
+            if(obj.err)
+              this.showError(obj.err);
+            else
+              this.currentJob = obj;
+          }
+          
+        }, null);
     else
       this.currentJob = JSON.parse(cmsClient.newJob());
 
@@ -81,7 +92,6 @@ export default class JobEditor extends Vue {
   }
 
   async openJob() {
-
     if (this.currentJob)
       ModalHelper.AskConfirm(this.$options.filters.localize("modal_open_job", "Richiesta di conferma"),
         this.$options.filters.localize("modal_open_job_body", "Sei sicuro di aver salvato il Job?"),
@@ -91,22 +101,41 @@ export default class JobEditor extends Vue {
   }
 
   async loadJob() {
-    var result = cmsClient.openJob();
-    if (result) {
-      this.currentJob = JSON.parse(result);
-      await new ToolingService().GetNcTools();
+    var res = cmsClient.openJob();
+    if(res){
+      var obj = JSON.parse(res);
+      if(obj.err)
+        this.showError(obj.err);
+      else{
+        this.currentJob = obj;
+        await new ToolingService().GetNcTools();
+      }
     }
   }
 
   saveJobNewPath() {
     if (this.currentJob) {
       var res = cmsClient.saveJobNewPath(JSON.stringify(this.currentJob));
+      if(res){
+        var obj = JSON.parse(res);
+        if(obj.err)
+          this.showError(obj.err);
+        else
+          this.currentJob.name = obj.name;
+      }
     }
   }
 
   saveJob() {
     if (this.currentJob) {
       var res = cmsClient.saveJob(JSON.stringify(this.currentJob));
+      if(res){
+        var obj = JSON.parse(res);
+        if(obj.err)
+          this.showError(obj.err);
+        else
+          this.currentJob.name = obj.name;
+      }
     }
   }
 
@@ -117,7 +146,13 @@ export default class JobEditor extends Vue {
         this.$options.filters.localize("modal_open_job_body", "Sei sicuro di aver salvato il Job?"),
         () => {
           var res = cmsClient.closeJob();
-          this.currentJob = null;
+          if(res){
+            var obj = JSON.parse(res);
+            if(obj.err)
+              this.showError(obj.err);
+          }
+          else
+            this.currentJob = null;
         }, null);
     }
   }
@@ -167,6 +202,18 @@ export default class JobEditor extends Vue {
   }
 
 
+  showError(error) {
+    
+    (iziToast as any).error({
+      title: "Error",
+      message: error,
+      theme: "dark",
+      timeout: 10000,
+      class: "t-error",
+      transitionOut: "fadeOut",
+    })
+  }
+
 }
 
 
diff --git a/Step/wwwroot/src/components/job-editor.vue b/Step/wwwroot/src/components/job-editor.vue
index fc84811b..1b2ff75a 100644
--- a/Step/wwwroot/src/components/job-editor.vue
+++ b/Step/wwwroot/src/components/job-editor.vue
@@ -6,20 +6,18 @@
                 <label>{{'job_editor_title' | localize('Job editor')}}</label>
             </div>
             <div class="search-job">
-                <!-- <input v-if="currentJob" type="text" v-model="currentJob.name" :disabled="editing"> -->
-                <span v-if="currentJob">{{currentJob.name}}</span>
-                <button class="btn" @click="openJob()"><i class="fa fa-folder"></i></button>
-                <button class="btn" @click="newJob()"><i class="fa fa-plus"></i></button>
-            </div>
-            <div class="group-button">
-                <button class="btn btn-success" :disabled="!currentJob" @click="saveJob()">{{'job_editor_save_job' | localize('Salva')}}</button>
-                <button class="btn btn-success" :disabled="!currentJob" @click="saveJobNewPath()">{{'job_editor_save_with_name' | localize('Salva con nome')}}</button>
-                <button class="btn" :disabled="!currentJob" @click="closeJob()">{{'job_editor_close_job' | localize('Chiudi job')}}</button>
+                <input type="text" :placeholder="'job_editor_box_name_placeholder' | localize('Apri il Job o creane uno nuovo..')" class="job-name-box" v-if="!currentJob" readonly="readonly">
+                <input type="text" class="job-name-box" v-if="currentJob" v-model="currentJob.name" readonly="readonly">
+                <button class="btn" @click="newJob()" :title="'job_editor_btn_new' | localize('Crea Job')"><i class="fa fa-file-o"></i></button>
+                <button class="btn" @click="openJob()" :title="'job_editor_btn_open' | localize('Apri Job')"><i class="fa fa-folder-open"></i></button>
+                <button class="btn" :disabled="!currentJob" @click="saveJob()" :title="'job_editor_btn_save' | localize('Salva Job')"><i class="fa fa-floppy-o"></i></button>
+                <button class="btn" :disabled="!currentJob" @click="saveJobNewPath()" :title="'job_editor_btn_save_path' | localize('Salva con nome')"><i class="fa fa-files-o"></i></button>
+                <button class="btn" :disabled="!currentJob" @click="closeJob()" :title="'job_editor_btn_close' | localize('Chiudi Job')"><i class="fa fa-window-close"></i></button>
             </div>
           </div>
           <div class="job-editor-body">
             <!-- Lista degli elementi disponibili -->
-              <div class="job-editor-column-left">
+              <div class="job-editor-column-left" >
                 <Container :group-name="'commands'" :get-child-payload="getChildPayload" >
                   <div class="column-left-title">
                       <span>{{'drag_job_items_to_compose_job' | localize('Trascina nella parte centrale della pagina gli oggetti che desideri aggiungere al job')}}</span>
diff --git a/Step/wwwroot/src/modules/app-footer.vue b/Step/wwwroot/src/modules/app-footer.vue
index 8ee617d1..63adb97a 100644
--- a/Step/wwwroot/src/modules/app-footer.vue
+++ b/Step/wwwroot/src/modules/app-footer.vue
@@ -18,7 +18,7 @@
               :disabled="!isAreaEnabled('scada')" v-if="isAreaVisible('scada')" class="oval scada" :class="{ big:isInPath('/test/header') && !state.isMainViewLiftedUp}"></button>
         
       <button @click="openProgram('/job-editor')" :title="'footer_tooltip_job_editor' | localize('Job-Editor')"
-              :disabled="!isAreaEnabled('jobeditor')" v-if="isAreaVisible('jobeditor')" class="oval jobeditor" :class="{ big:isInPath('jobeditor') && !state.isMainViewLiftedUp}"></button>
+              :disabled="!isAreaEnabled('jobeditor')" v-if="isAreaVisible('jobeditor')" class="oval jobeditor" :class="{ big:isInPath('job-editor') && !state.isMainViewLiftedUp}"></button>
         
       <div v-if="isAreaVisible('utilities') && getUtilities().length > 0" class="divider"><i class="fa fa-circle"></i></div>  
       <button @click="startUtility(software.id)" :title="software.longName" v-for="software in getUtilities()" :key="software.id"