depot

Step/wwwroot/src/app.routes.js

@@ -20,9 +20,10 @@ import {
 export let routes = [
     { path: "", component: Home, name: "home", meta: { title: "Step - Dashboard" } },
     { path: "/production", meta: { title: "Step - Production", area: "production" } },
-    { path: "/tooling", component: Tooling, meta: { title: "Step - Tools", area: "tooling" } },
 
-    { path: "/depot", component: Depot, meta: { title: "Step - Depot", area: "depot" } },
+    { path: "/tooling", component: Tooling, meta: { title: "Step - Tools", area: "tooling" } },
+    { name: "depot", path: "/depot/:id", component: Depot, meta: { title: "Step - Depot", area: "depot" } },
+
     { path: "/summary-depot", component: SummaryDepot, meta: { title: "Step - Summary-Depot", area: "summary-depot" } },
     { path: "/assisted-tooling", component: AssistedTooling, meta: { title: "Step - Assisted-Tooling", area: "assisted-tooling" } },
     { path: "/tooling-equipment", component: ToolingEquipment, meta: { title: "Step - Tooling-Equipment", area: "tooling-equipment" } },

Step/wwwroot/src/components/depot.ts

@@ -0,0 +1,24 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import { tool, detailCard } from "src/modules/base-components/cards"
+
+@Component({ components: { tool, detailCard } })
+export default class depot extends Vue {
+
+  $route: any;
+
+  depotId: number = 0;
+
+  editable: boolean = false;
+
+  mounted() {
+    this.depotId = this.$route.params.id;
+  }
+
+  toggleEdit(){
+    this.editable = !this.editable;
+  }
+
+
+
+}

Step/wwwroot/src/components/depot.vue

@@ -3,14 +3,17 @@
       <div class="depot-box">
           <div class="depot-header">
               <div class="depot-header-left">
-                  <i class="fa fa-chevron-left"></i>Magazzino 1 - Lineare
+                <router-link :to="'/tooling'">
+                  <i class="fa fa-chevron-left"></i>
+                </router-link>
+                {{'depot_title' | localize("Magazzino")}} {{depotId}} - Lineare
               </div>
               <div class="depot-header-right">
                   <button class="btn" v-if="true">{{'depot_button_assistedtooling' | localize("Attrezzaggio automatico")}}</button>
               </div>
           </div>
           <div class="depot-boxbody">
-              <div class="list-left" v-if="true">
+              <div class="list-left" v-if="editable">
                   <span class="depot-search-label">{{'depot_label_search' | localize("Seleziona un utensile e posizionalo nel magazzino corrispondente:")}}</span>
                   <div class="depot-search">
                     <input type="text">
@@ -75,18 +78,12 @@
                   <label class="depot-checkbox-label">{{'depot_checkbox_viewstate_equipment' | localize('Visualizza stato utensili')}}</label>
               </div>
               <div class="depot-footer-right">
-                    <button class="btn" v-if="true">{{'depot_button_cancel' | localize("Annulla")}}</button>
-                    <button class="btn blue-reverse" v-if="true">{{'depot_button_save' | localize("Salva")}}</button>
-                    <button class="btn" v-if="false">{{'depot_button_modify' | localize("Modifica")}}</button>
+                    <button class="btn" v-if="editable" @click="toggleEdit()">{{'depot_button_cancel' | localize("Annulla")}}</button>
+                    <button class="btn blue-reverse" v-if="editable">{{'depot_button_save' | localize("Salva")}}</button>
+                    <button class="btn" v-if="!editable"  @click="toggleEdit()">{{'depot_button_modify' | localize("Modifica")}}</button>
               </div>
           </div>
       </div>
   </div>
 </template>
-<script>
-import tool from "src/modules/base-components/cards/tool.vue";
-import detailCard from "src/modules/base-components/cards/detail-card.vue";
-export default {
-  components:{tool, detailCard},
-}
-</script>
+<script src="./depot.ts" lang="ts"></script>

Step/wwwroot/src/components/tooling.ts

@@ -3,10 +3,13 @@ import Component from "vue-class-component";
 import { card } from "../modules/base-components";
 import { AppModel, store } from "../store";
 
+
 @Component({ name: "tooling", components: { card: card } })
 
 export default class Tooling extends Vue {
 
+  $route: any;
+
   public magazines:  server.MagazineModel[] = (this.$store.state as AppModel).tooling.magazines;
 
   // public get magazines(): server.MagazineModel[] {
@@ -21,7 +24,7 @@ export default class Tooling extends Vue {
 
   }
 
-  public archiveClick = function (val) {
-    console.log(val);
+  public goToDepot = function (item:server.MagazineModel) {
+    this.$router.push({ name: 'depot', params:{id: item.id} });
   }
 }

Step/wwwroot/src/components/tooling.vue

@@ -7,7 +7,7 @@
             <div class="tooling-boxbody">
                 <div class="list-top scrollable">
                     <card v-for="t in magazines" :key="t.id"
-                          :title="getStoreTitle(t.type) + t.id" img-source="../assets/images/image_tooling.PNG" @click="archiveClick(t)"></card>
+                          :title="getStoreTitle(t.type) + t.id" img-source="../assets/images/image_tooling.PNG" @click="goToDepot(t)"></card>
                 </div>
 
                 <div class="list-bottom  scrollable">

Step/wwwroot/src/modules/base-components/cards/index.js

@@ -0,0 +1,5 @@
+import cardUtilities from "./card-utilities.vue";
+import tool from "./tool.vue";
+import detailCard from "./detail-card.vue";
+
+export { cardUtilities, tool, detailCard };