ayanova/src/api/dash-registry.js

@@ -64,7 +64,15 @@ export default {
       singleOnly: false,
       settings: { customTitle: null, dateRange: "*thismonth*", unit: "day" }
     },
-
+    {
+      id: "dash-labor-hours-personal-bar",
+      roles: [role.Tech, role.TechRestricted],
+      title: "Labor hours - bar",
+      type: "GzDashLaborHoursPersonalBar",
+      scheduleableUserOnly: true,
+      singleOnly: false,
+      settings: { customTitle: null, dateRange: "*thismonth*", unit: "day" }
+    },
     {
       id: "TestBarWidgetCountByUserType",
       roles: [

ayanova/src/components/dash-base.vue

@@ -134,9 +134,7 @@
       </v-toolbar>
     </slot>
     <slot name="settings">
-      <div>
+      <div></div>
-        default slot for settings
-      </div>
     </slot>
     <div v-if="hasError" class="mx-2 mt-4 d-flex align-center">
       <v-alert

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

@@ -0,0 +1,400 @@
+<template>
+  <gz-dash
+    icon="$ayiUser"
+    :show-context-button="true"
+    :update-frequency="600000"
+    v-bind="[$props, $attrs]"
+    @dash-refresh="getDataFromApi()"
+    @dash-context="showContext()"
+    v-on="$listeners"
+  >
+    <template slot="main">
+      <div>
+        <!-- <gz-chart-line
+        :width="400"
+        :height="240"
+        :chart-data="obj"
+        :options="{
+          responsive: true,
+          maintainAspectRatio: false,
+          legend: { display: false }
+        }"
+      ></gz-chart-line> -->
+
+        <gz-chart-bar
+          :width="400"
+          :height="330"
+          :chart-data="chartData"
+          :options="chartOptions"
+        />
+      </div>
+    </template>
+
+    <template slot="settings">
+      <div></div>
+      <v-col v-if="context" cols="12">
+        <v-dialog
+          v-model="context"
+          scrollable
+          max-width="600px"
+          data-cy="dashSettings"
+          @keydown.esc="cancel"
+        >
+          <v-card elevation="24">
+            <v-card-title class="text-h5 lighten-2" primary-title>
+              <span> {{ $ay.t("Settings") }} </span>
+            </v-card-title>
+
+            <v-card-text style="height: 500px;">
+              {{ settings }}
+              <v-select
+                v-model="localSettings.dateRange"
+                :items="selectLists.dateFilterTokens"
+                item-text="name"
+                item-value="id"
+                :label="$ay.t('TimeSpanDateRange')"
+              ></v-select>
+
+              <v-select
+                v-model="localSettings.unit"
+                :items="selectLists.units"
+                item-text="name"
+                item-value="id"
+                :label="$ay.t('Unit')"
+              ></v-select>
+
+              <v-text-field
+                v-model="localSettings.customTitle"
+                :label="$ay.t('Name')"
+              ></v-text-field>
+            </v-card-text>
+
+            <v-divider></v-divider>
+            <v-card-actions>
+              <v-btn color="primary" text @click.native="context = false">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn
+                color="primary"
+                text
+                class="ml-4"
+                @click="updateSettings"
+                >{{ $ay.t("Save") }}</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+    </template>
+  </gz-dash>
+</template>
+<script>
+import GzDash from "./dash-base.vue";
+import Palette from "../api/palette";
+export default {
+  components: {
+    GzDash
+  },
+  props: {
+    settings: { type: Object, default: null }
+  },
+  data() {
+    return {
+      obj: {},
+      context: false,
+      localSettings: {},
+      selectLists: {
+        dateFilterTokens: [],
+        tagFilterOperators: [],
+        units: []
+      },
+      chartOptions: {
+        responsive: true,
+        maintainAspectRatio: false,
+        // legend: { display: false },
+        scales: {
+          xAxes: [
+            {
+              type: "time",
+              time: {
+                unit: this.settings.unit
+              },
+              gridLines: {
+                drawOnChartArea: false
+              }
+            }
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                drawOnChartArea: false
+              },
+              ticks: {
+                beginAtZero: true
+              }
+            }
+          ]
+        }
+      }
+    };
+  },
+  computed: {
+    chartData() {
+      return {
+        datasets: [
+          {
+            label: this.$ay.t("WorkOrderItemLaborServiceRateQuantity"),
+            backgroundColor: Palette.color.soft_green,
+            data: this.obj
+          }
+        ]
+      };
+    }
+  },
+  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);
+      this.context = true;
+    },
+    updateSettings: function() {
+      //copy settings from local to
+      this.settings.customTitle = this.localSettings.customTitle;
+      this.settings.dateRange = this.localSettings.dateRange;
+      this.settings.unit = this.localSettings.unit;
+      this.$emit("dash-change");
+      this.context = false;
+      this.getDataFromApi();
+    },
+
+    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
+      /*
+      TODO: 
+  DYNAMIC FROM SETS
+    handle params (time range, currentusertoken,period)
+    enforce current user only (I guess that's built in if use token or leave out token because it's assumed in which case rename to WorkOrderItemLaborQuantitySummaryPERSONAL )
+  ACTUAL CHART WORKING
+    line chart, can it work with this data, does it need adjustment to locale?
+    scroll? Vertical better than horizontal? Select bar OR line?
+
+
+  REPORTING
+    v.nexxt?
+    charts lib at server?
+
+
+      DateTrunc https://www.postgresqltutorial.com/postgresql-date_trunc/ will respect changes of month or year or whatever so this works 
+
+SELECT row_to_json(t) as res from (
+	
+	select SUM(AWORKORDERITEMLABOR.serviceratequantity) SERVICERATESUM, date_trunc('month',AWORKORDERITEMLABOR.servicestartdate) timeframe
+
+FROM AWORKORDER
+		LEFT JOIN AWORKORDERITEM ON AWORKORDER.ID = AWORKORDERITEM.WORKORDERID
+		LEFT JOIN AWORKORDERITEMLABOR ON AWORKORDERITEM.ID = AWORKORDERITEMLABOR.WORKORDERITEMID
+		WHERE AWORKORDERITEMLABOR.userid = 10
+
+GROUP BY timeframe
+ORDER BY timeframe ASC
+) t
+
+
+
+
+
+      */
+
+      // let tt = {
+      //   KPIName: "WorkOrderItemLaborQuantitySummary",
+      //   criteria: {
+      //     dateRange: this.settings.dateRange,
+      //     unit: this.settings.unit
+      //   },
+      //   clientTimeStamp: window.$gz.locale.clientLocalZoneTimeStamp()
+      // };
+      // console.log(tt);
+
+      try {
+        this.errorMessage = null;
+        const res = await window.$gz.api.post("kpi", {
+          KPIName: "WorkOrderItemLaborQuantitySummary",
+          criteria: {
+            dateRange: this.settings.dateRange,
+            unit: this.settings.unit
+          },
+          clientTimeStamp: window.$gz.locale.clientLocalZoneTimeStamp()
+        });
+        if (res.error) {
+          this.errorMessage = res.error;
+        } else {
+          // console.log(res);
+          this.obj = res.data;
+        }
+      } catch (error) {
+        this.errorMessage = error.toString();
+      }
+    }
+  }
+};
+
+/////////////////////////////////
+//
+//
+async function initWidget(vm) {
+  //console.log("INitializing widget dash-labotr-hours-personal");
+  await fetchTranslatedText();
+  populateSelectionLists(vm);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText() {
+  await window.$gz.translation.cacheTranslations([
+    "Filter",
+    "GridRowFilterDropDownBlanksItem",
+    "GridRowFilterDropDownNonBlanksItem",
+    "GridRowFilterDropDownEquals",
+    "GridRowFilterDropDownNotEquals",
+    "GridRowFilterDropDownDoesNotContain",
+    "GridRowFilterDropDownContains",
+    "DateRangeYesterday",
+    "DateRangeToday",
+    "DateRangeLastWeek",
+    "DateRangeThisWeek",
+    "DateRangeNextWeek",
+    "DateRangeLastMonth",
+    "DateRangeThisMonth",
+    "DateRangeNextMonth",
+    "DateRange14DayWindow",
+    "DateRangePast",
+    "DateRangeLastYear",
+    "DateRangeThisYear",
+    "DateRangeInTheLastThreeMonths",
+    "DateRangeInTheLastSixMonths",
+    "DateRangePastYear",
+    "DateRangePast90Days",
+    "DateRangePast30Days",
+    "DateRangePast7Days",
+    "DateRangePast24Hours",
+    "DateRangePast6Hours",
+    "DateRangeJanuary",
+    "DateRangeFebruary",
+    "DateRangeMarch",
+    "DateRangeApril",
+    "DateRangeMay",
+    "DateRangeJune",
+    "DateRangeJuly",
+    "DateRangeAugust",
+    "DateRangeSeptember",
+    "DateRangeOctober",
+    "DateRangeNovember",
+    "DateRangeDecember",
+    "DateRangePreviousYearThisMonth",
+    "DateRangePreviousYearLastMonth",
+    "DateRangePreviousYearNextMonth",
+    "TimeSpanDays",
+    "TimeSpanMonths",
+    "WorkOrderItemLaborServiceRateQuantity"
+  ]);
+}
+
+/////////////////////////////////
+//
+//
+function populateSelectionLists(vm) {
+  vm.selectLists.dateFilterTokens.push(
+    ...[
+      { name: vm.$ay.t("DateRangeYesterday"), id: "*yesterday*" },
+      { name: vm.$ay.t("DateRangeToday"), id: "*today*" },
+      { name: vm.$ay.t("DateRangeLastWeek"), id: "*lastweek*" },
+      { name: vm.$ay.t("DateRangeThisWeek"), id: "*thisweek*" },
+
+      { name: vm.$ay.t("DateRangeLastMonth"), id: "*lastmonth*" },
+      { name: vm.$ay.t("DateRangeThisMonth"), id: "*thismonth*" },
+      { name: vm.$ay.t("DateRange14DayWindow"), id: "*14daywindow*" },
+      { name: vm.$ay.t("DateRangePast"), id: "*past*" },
+      { name: vm.$ay.t("DateRangeLastYear"), id: "*lastyear*" }, //prior year from jan to dec
+      { name: vm.$ay.t("DateRangeThisYear"), id: "*thisyear*" },
+      {
+        name: vm.$ay.t("DateRangeInTheLastThreeMonths"),
+        id: "*last3months*"
+      },
+      {
+        name: vm.$ay.t("DateRangeInTheLastSixMonths"),
+        id: "*last6months*"
+      },
+      { name: vm.$ay.t("DateRangePastYear"), id: "*pastyear*" }, //last 365 days
+      { name: vm.$ay.t("DateRangePast90Days"), id: "*past90days*" },
+      { name: vm.$ay.t("DateRangePast30Days"), id: "*past30days*" },
+      { name: vm.$ay.t("DateRangePast7Days"), id: "*past7days*" },
+      { name: vm.$ay.t("DateRangePast24Hours"), id: "*past24hours*" },
+      { name: vm.$ay.t("DateRangePast6Hours"), id: "*past6hours*" },
+      { name: vm.$ay.t("DateRangeJanuary"), id: "*january*" },
+      { name: vm.$ay.t("DateRangeFebruary"), id: "*february*" },
+      { name: vm.$ay.t("DateRangeMarch"), id: "*march*" },
+      { name: vm.$ay.t("DateRangeApril"), id: "*april*" },
+      { name: vm.$ay.t("DateRangeMay"), id: "*may*" },
+      { name: vm.$ay.t("DateRangeJune"), id: "*june*" },
+      { name: vm.$ay.t("DateRangeJuly"), id: "*july*" },
+      { name: vm.$ay.t("DateRangeAugust"), id: "*august*" },
+      { name: vm.$ay.t("DateRangeSeptember"), id: "*september*" },
+      { name: vm.$ay.t("DateRangeOctober"), id: "*october*" },
+      { name: vm.$ay.t("DateRangeNovember"), id: "*november*" },
+      { name: vm.$ay.t("DateRangeDecember"), id: "*december*" },
+      {
+        name: vm.$ay.t("DateRangePreviousYearThisMonth"),
+        id: "*lastyearthismonth*"
+      },
+      {
+        name: vm.$ay.t("DateRangePreviousYearLastMonth"),
+        id: "*lastyearlastmonth*"
+      },
+      {
+        name: vm.$ay.t("DateRangePreviousYearNextMonth"),
+        id: "*lastyearnextmonth*"
+      }
+    ]
+  );
+
+  vm.selectLists.tagFilterOperators.push(
+    ...[
+      { name: vm.$ay.t("GridRowFilterDropDownBlanksItem"), id: "*NOVALUE*" },
+      {
+        name: vm.$ay.t("GridRowFilterDropDownNonBlanksItem"),
+        id: "*HASVALUE*"
+      },
+      { name: vm.$ay.t("GridRowFilterDropDownEquals"), id: "=" },
+      { name: vm.$ay.t("GridRowFilterDropDownNotEquals"), id: "!=" },
+      { name: vm.$ay.t("GridRowFilterDropDownDoesNotContain"), id: "!-%-" },
+      { name: vm.$ay.t("GridRowFilterDropDownContains"), id: "-%-" }
+    ]
+  );
+
+  vm.selectLists.units.push(
+    ...[
+      { name: vm.$ay.t("TimeSpanDays"), id: "day" },
+      {
+        name: vm.$ay.t("TimeSpanMonths"),
+        id: "month"
+      }
+    ]
+  );
+}
+/*
+var crit=(string)options.Criteria["dateRange"];
+
+*/
+</script>

ayanova/src/views/home-dashboard.vue

@@ -89,10 +89,12 @@ import GzDashTodayScheduledWo from "../components/dash-today-scheduled-wo.vue";
 import GzDashTodayReminders from "../components/dash-today-reminders.vue";
 import GzDashTodayReviews from "../components/dash-today-reviews.vue";
 import GzDashLaborHoursPersonal from "../components/dash-labor-hours-personal.vue";
+import GzDashLaborHoursPersonalBar from "../components/dash-labor-hours-personal-bar.vue";
 
 export default {
   components: {
     GzDashLaborHoursPersonal,
+    GzDashLaborHoursPersonalBar,
     GzDashTestBarWidgetCountByUserType,
     GzDashTestLineWidgetMonthlyTotalPrice,
     GzDashTodayScheduledWo,