Merge pull request #9 from nemrutco/nova-v3-upgrade-fixes

Nova 3.0 upgrade fixes

resources/js/components/Base/PartitionMetric.vue

@@ -1,17 +1,9 @@
 <template>
   <loading-card :loading="loading" class="px-6 py-4">
     <h3 class="flex mb-3 text-base text-80 font-bold">
-      <template v-if="url">
-        <router-link
-          tag="a"
-          :to="JSON.parse(url)"
-          :title="title"
-          class="cursor-pointer text-primary dim no-underline"
-        >{{ title }}</router-link>
-      </template>
-      <template v-else>{{ title }}</template>
+      {{ title }}
       <span
-        class="mr-auto ml-2 font-semibold text-70 text-base"
+        class="ml-auto font-semibold text-70 text-sm"
       >({{ formattedTotal }} {{ __('total') }})</span>
       <button class="ml-auto text-80 btn btn-white" v-if="filters.length > 0" @click="openModal">
         <svg
@@ -46,8 +38,8 @@
     </div>
 
     <div class="overflow-hidden overflow-y-auto max-h-90px">
-      <ul class="list-reset flex flex-wrap" :class="{'flex-col' : wrap}">
-        <li v-for="item in formattedItems" class="text-xs text-80 leading-normal w-1/2">
+      <ul class="list-reset">
+        <li v-for="item in formattedItems" class="text-xs text-80 leading-normal">
           <span
             class="inline-block rounded-full w-2 h-2 mr-2"
             :style="{
@@ -62,7 +54,13 @@
     <div
       ref="chart"
       :class="chartClasses"
-      style="width: 90px; height: 90px; right: 20px; bottom: 30px; top: calc(50% + 15px);"
+      style="
+        width: 90px;
+        height: 90px;
+        right: 20px;
+        bottom: 30px;
+        top: calc(50% + 15px);
+      "
     />
 
     <filterable-modal
@@ -81,13 +79,6 @@ import PartitionMetric from "@/components/Metrics/Base/PartitionMetric";
 
 export default {
   extends: PartitionMetric,
-
-  props: {
-    wrap: {
-      type: Boolean
-    }
-  },
-
   mixins: [require("@/base"), require("./../modal")]
 };
 </script>

resources/js/components/Base/TrendMetric.vue

@@ -1,34 +1,23 @@
 <template>
   <loading-card :loading="loading" class="px-6 py-4">
     <div class="flex mb-4">
-      <h3 class="flex mb-3 text-base text-80 font-bold">
-        <template v-if="url">
-          <router-link
-            tag="a"
-            :to="JSON.parse(url)"
-            :title="title"
-            class="cursor-pointer text-primary dim no-underline"
-          >{{ title }}</router-link>
-        </template>
-        <template v-else>{{ title }}</template>
-        <button class="ml-auto text-80 btn btn-white" v-if="filters.length > 0" @click="openModal">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="15"
-            height="15"
-            viewBox="0 0 20 20"
-            aria-labelledby="filter"
-            role="presentation"
-            class="fill-current text-80"
-          >
-            <path
-              fill-rule="nonzero"
-              d="M.293 5.707A1 1 0 0 1 0 4.999V1A1 1 0 0 1 1 0h18a1 1 0 0 1 1 1v4a1 1 0 0 1-.293.707L13 12.413v2.585a1 1 0 0 1-.293.708l-4 4c-.63.629-1.707.183-1.707-.708v-6.585L.293 5.707zM2 2v2.585l6.707 6.707a1 1 0 0 1 .293.707v4.585l2-2V12a1 1 0 0 1 .293-.707L18 4.585V2H2z"
-            />
-          </svg>
-        </button>
-      </h3>
-
+      <h3 class="mr-3 text-base text-80 font-bold">{{ title }}</h3>
+      <button class="ml-auto text-80 btn btn-white" v-if="filters.length > 0" @click="openModal">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="15"
+          height="15"
+          viewBox="0 0 20 20"
+          aria-labelledby="filter"
+          role="presentation"
+          class="fill-current text-80"
+        >
+          <path
+            fill-rule="nonzero"
+            d="M.293 5.707A1 1 0 0 1 0 4.999V1A1 1 0 0 1 1 0h18a1 1 0 0 1 1 1v4a1 1 0 0 1-.293.707L13 12.413v2.585a1 1 0 0 1-.293.708l-4 4c-.63.629-1.707.183-1.707-.708v-6.585L.293 5.707zM2 2v2.585l6.707 6.707a1 1 0 0 1 .293.707v4.585l2-2V12a1 1 0 0 1 .293-.707L18 4.585V2H2z"
+          />
+        </svg>
+      </button>
       <div v-if="helpText" class="absolute pin-r pin-b p-2 z-50">
         <tooltip trigger="click">
           <icon
@@ -53,12 +42,13 @@
       </span>
     </p>
 
-    <div ref="chart" class="absolute pin rounded-b-lg ct-chart" style="top: 60%" />
+    <div ref="chart" class="absolute pin rounded-b-lg ct-chart" style="top: 60%;" />
 
     <filterable-modal
       v-if="modalOpen"
       :selected-range-key="selectedRangeKey"
       :selected-filters="selectedFilters"
+      :ranges="ranges"
       :title="title"
       :filters="filters"
       @selected="selected"
@@ -72,7 +62,6 @@ import TrendMetric from "@/components/Metrics/Base/TrendMetric";
 
 export default {
   extends: TrendMetric,
-
   mixins: [require("@/base"), require("./../modal")]
 };
 </script>

resources/js/components/Base/ValueMetric.vue

@@ -1,17 +1,7 @@
 <template>
   <loading-card :loading="loading" class="px-6 py-4">
     <div class="flex mb-4">
-      <h3 class="mr-3 text-base text-80 font-bold">
-        <template v-if="url">
-          <router-link
-            tag="a"
-            :to="JSON.parse(url)"
-            :title="title"
-            class="cursor-pointer text-primary dim no-underline"
-          >{{ title }}</router-link>
-        </template>
-        <template v-else>{{ title }}</template>
-      </h3>
+      <h3 class="mr-3 text-base text-80 font-bold">{{ title }}</h3>
       <button class="ml-auto text-80 btn btn-white" v-if="filters.length > 0" @click="openModal">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -28,6 +18,7 @@
           />
         </svg>
       </button>
+
       <div v-if="helpText" class="absolute pin-r pin-b p-2 z-50">
         <tooltip trigger="click">
           <icon
@@ -111,7 +102,6 @@ import ValueMetric from "@/components/Metrics/Base/ValueMetric";
 
 export default {
   extends: ValueMetric,
-
   mixins: [require("@/base"), require("./../modal")]
 };
 </script>

resources/js/components/FilterablePartitionMetric.vue

@@ -8,8 +8,6 @@
     :loading="loading"
     :filters="card.filters"
     :selected-filters="selectedFilters"
-    :url="card.url"
-    :wrap="card.width === '1/3'"
   />
 </template>
 
@@ -24,7 +22,6 @@ export default {
   components: {
     BasePartitionMetric
   },
-
   data: () => ({
     selectedFilters: {
       type: Object
@@ -47,10 +44,16 @@ export default {
 
       Minimum(
         Nova.request().get(this.metricEndpoint, this.filterPayload())
-      ).then(({ data: { value: { value } } }) => {
-        this.chartData = value;
-        this.loading = false;
-      });
+      ).then(
+        ({
+          data: {
+            value: { value }
+          }
+        }) => {
+          this.chartData = value;
+          this.loading = false;
+        }
+      );
     },
 
     filterPayload() {

resources/js/components/FilterableTrendMetric.vue

@@ -4,8 +4,8 @@
     :title="card.name"
     :help-text="card.helpText"
     :help-width="card.helpWidth"
-    :chart-data="data"
     :value="value"
+    :chart-data="data"
     :ranges="card.ranges"
     :format="format"
     :prefix="prefix"
@@ -15,13 +15,12 @@
     :loading="loading"
     :filters="card.filters"
     :selected-filters="selectedFilters"
-    :url="card.url"
   />
 </template>
 
 <script>
 import _ from "lodash";
-import { InteractsWithDates, Minimum } from "laravel-nova";
+import { Minimum } from "laravel-nova";
 import BaseTrendMetric from "./Base/TrendMetric";
 import TrendMetric from "@/components/Metrics/TrendMetric";
 
@@ -31,7 +30,6 @@ export default {
   components: {
     BaseTrendMetric
   },
-
   data: () => ({
     selectedFilters: {
       type: Object
@@ -92,7 +90,8 @@ export default {
     filterPayload() {
       const payload = {
         params: {
-          timezone: this.userTimezone
+          timezone: this.userTimezone,
+          twelveHourTime: this.usesTwelveHourTime,
         }
       };
 

resources/js/components/FilterableValueMetric.vue

@@ -16,45 +16,40 @@
     :zero-result="zeroResult"
     :filters="card.filters"
     :selected-filters="selectedFilters"
-    :url="card.url"
   />
 </template>
 
 <script>
 import { Minimum } from "laravel-nova";
 import BaseValueMetric from "./Base/ValueMetric";
 import ValueMetric from "@/components/Metrics/ValueMetric";
-import { isObject } from "util";
 
 export default {
   extends: ValueMetric,
 
+  components: {
+    BaseValueMetric
+  },
+
   data: () => ({
     selectedFilters: {
       type: Object
     }
   }),
 
-  components: {
-    BaseValueMetric
-  },
-
   methods: {
-    handleChange(payload) {
+    handleChange(key) {
       if (typeof payload !== "object") {
         this.selectedRangeKey = payload;
       } else {
         this.selectedFilters[payload.filter.class] = payload.selected;
       }
-
-      this.fetch();
     },
 
     fetch() {
       this.loading = true;
-      Minimum(
-        Nova.request().get(this.metricEndpoint, this.filterPayload())
-      ).then(
+
+      Minimum(Nova.request().get(this.metricEndpoint, this.filterPayload)).then(
         ({
           data: {
             value: {
@@ -79,6 +74,7 @@ export default {
         }
       );
     },
+
     filterPayload() {
       const payload = {
         params: {

resources/js/components/modal.js

@@ -1,33 +1,33 @@
 module.exports = {
-    props: {
-        filters: {
-            type: Object
-        },
-        selectedFilters: {
-            type: Object
-        },
-        url: {
-            type: Object
-        },
+  props: {
+    filters: {
+      type: Array
     },
-
-    data() {
-        return {
-            modalOpen: false
-        };
+    selectedFilters: {
+      type: Object
+    },
+    url: {
+      type: Object
     },
+  },
 
-    methods: {
-        openModal() {
-            this.modalOpen = true;
-        },
+  data() {
+    return {
+      modalOpen: false
+    };
+  },
 
-        closeModal() {
-            this.modalOpen = false;
-        },
+  methods: {
+    openModal() {
+      this.modalOpen = true;
+    },
+
+    closeModal() {
+      this.modalOpen = false;
+    },
 
-        selected(payload) {
-            this.$emit('selected', payload)
-        }
+    selected(payload) {
+      this.$emit('selected', payload)
     }
-}
+  }
+}