ayanova/src/components/dash-labor-hours-personal.vue

@@ -9,35 +9,7 @@
     v-on="$listeners"
   >
     <template slot="main">
-      settings:{{ settings }}
-      <gz-chart-bar-horizontal
-        :width="400"
-        :height="240"
-        :chart-data="obj"
-        :options="{
-          maintainAspectRatio: false,
-          responsive: true,
-          legend: { display: false },
-          scales: {
-            xAxes: [
-              {
-                gridLines: { display: true },
-                ticks: {
-                  beginAtZero: true
-                }
-              }
-            ],
-            yAxes: [
-              {
-                gridLines: { display: false }
-              }
-            ]
-          },
-          onClick: function(e, items) {
-            clicked(e, items);
-          }
-        }"
-      ></gz-chart-bar-horizontal>
+      {{ settings }}
     </template>
     <template slot="settings">
       <div></div>
@@ -55,8 +27,6 @@
             </v-card-title>
 
             <v-card-text style="height: 500px;">
-              settings:{{ settings }}<br />
-              localSettings:{{ localSettings }}
               <v-select
                 v-model="localSettings.dateRange"
                 :items="selectLists.dateFilterTokens"
@@ -101,7 +71,6 @@
 </template>
 <script>
 import GzDash from "./dash-base.vue";
-import Palette from "../api/palette";
 export default {
   components: {
     GzDash
@@ -125,6 +94,11 @@ export default {
   async created() {
     await initWidget(this);
   },
+  async mounted() {
+    //must be called from mounted to have refs available
+    //console.log("reminders-mounted");
+    await this.getDataFromApi();
+  },
   methods: {
     showContext: function() {
       this.localSettings = window.$gz.util.deepCopySkip(this.settings);
@@ -138,47 +112,24 @@ export default {
       this.$emit("dash-change");
       this.context = false;
     },
-    loadData: function() {
-      this.obj = {
-        labels: [
-          "Customer",
-          "Head office",
-          "Service",
-          "Non Service",
-          "Subcontractor"
-        ],
-        datasets: [
-          {
-            label: "",
-            data: [2, 4, 6, 8, 10],
-            backgroundColor: Palette.getSoftPaletteArray(5)
-          }
-        ],
-        //this is added for my use, not part of chart js, used to get special id value of bar since labels are localized and data is not unique
-        //https://stackoverflow.com/a/42635435/8939
-        datakeys: [
-          { id: 11, type: 34 },
-          { id: 22, type: 34 },
-          { id: 33, type: 34 },
-          { id: 44, type: 34 },
-          { id: 55, type: 34 }
-        ]
-      };
-    },
-    clicked: function(c, i) {
-      if (i.length == 0) return; //Clicked outside any bar.
-      const e = i[0]; //get index of bar clicked on
 
-      //this gets the label
-      //let x_value = this.obj.labels[e._index];
-      //this gets the value
-      //let y_value = this.obj.datasets[0].data[e._index];
-      //this gets my custom id stuff
-      //https://stackoverflow.com/a/42635435/8939
-      const dataKeyValue = this.obj.datakeys[e._index];
-
-      alert(`STUB: OPEN ITEM (data: ${JSON.stringify(dataKeyValue)})`);
-      //clickOnChart(lastHoveredIndex);
+    async getDataFromApi() {
+      //todo: need a equivalent of a datalist at the server but that can take the minimal criteria offered here and return the data easily digestable
+      //do not want the client end to have to do math or anything and also it needs to drive reporting of the same type as the widget display
+      //so as similar as possible to the datatable system but handles the math and summarizing ideally in the db server itself
+      // try {
+      //   this.errorMessage = null;
+      //   const res = await window.$gz.api.post("schedule/personal", {
+      //     view: 1
+      //   });
+      //   if (res.error) {
+      //     this.errorMessage = res.error;
+      //   } else {
+      //     //for later
+      //   }
+      // } catch (error) {
+      //   this.errorMessage = error.toString();
+      // }
     }
   }
 };