Working LinkableValueMetric and LinkableTrendMetric

Author: anderly

dist/js/card.js

@@ -15,7 +15,8 @@ class NovaExtension {
 
     webpackConfig.externals = {
         vue: 'Vue',
-        'laravel-nova': 'LaravelNova'
+        'laravel-nova': 'LaravelNova',
+        '@/mixins': 'LaravelNova'
     }
 
     // webpackConfig.resolve.alias = {

nova.mix.js

@@ -1,10 +1,11 @@
 import camelCase from 'lodash/camelCase'
 import upperFirst from 'lodash/upperFirst'
 
-import BaseValueMetric from './components/Base/BaseValueMetric'
-// import LinkableValueMetric from './components/LinkableValueMetric'
+import BaseLinkableValueMetric from './components/Base/BaseValueMetric'
+import BaseLinkableTrendMetric from './components/Base/BaseTrendMetric'
+
 import LinkableValueMetric from './components/LinkableValueMetric'
-// import LinkableTrendMetric from './components/LinkableTrendMetric'
+import LinkableTrendMetric from './components/LinkableTrendMetric'
 // import LinkablePartitionMetric from './components/LinkablePartitionMetric'
 
 Nova.booting((app, store) => {
@@ -29,8 +30,9 @@ Nova.booting((app, store) => {
   //   //app.component(componentName, componentConfig.default || componentConfig)
   // })
 
-  app.component('BaseLinkableValueMetric', BaseValueMetric)
+  app.component('BaseLinkableValueMetric', BaseLinkableValueMetric)
+  app.component('BaseLinkableTrendMetric', BaseLinkableTrendMetric)
   app.component('linkable-value-metric', LinkableValueMetric)
-  // app.component('linkable-trend-metric', LinkableTrendMetric)
+  app.component('linkable-trend-metric', LinkableTrendMetric)
   // app.component('linkable-partition-metric', LinkablePartitionMetric)
 })

resources/js/card.js

@@ -5,19 +5,21 @@
 
         <HelpTextTooltip :text="helpText" :width="helpWidth" />
 
-        <!-- <SelectControl
+        <SelectControl
           v-if="ranges.length > 0"
           class="ml-auto w-[6rem] flex-shrink-0"
           size="xxs"
           :options="ranges"
           v-model:selected="selectedRangeKey"
           @change="handleChange"
           :aria-label="__('Select Ranges')"
-        /> -->
+        />
       </div>
 
       <p class="flex items-center text-4xl mb-4">
-        {{ formattedValue }}
+        <Link :href="this.url" :title="title" class="link-default font-normal">
+          {{ formattedValue }}
+        </Link>
         <span v-if="suffix" class="ml-2 text-sm font-bold">{{
           formattedSuffix
         }}</span>
@@ -35,7 +37,7 @@
   import debounce from 'lodash/debounce'
   import Chartist from 'chartist'
   import 'chartist/dist/chartist.min.css'
-  import { singularOrPlural } from 'laravel-nova'
+  import { singularOrPlural } from '@/mixins'//'laravel-nova'
   import ChartistTooltip from 'chartist-plugin-tooltips-updated'
   import 'chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.css'
 
@@ -50,6 +52,7 @@
       helpText: {},
       helpWidth: {},
       value: {},
+      url: '',
       chartData: {},
       maxWidth: {},
       prefix: '',

resources/js/components/Base/BaseTrendMetric.vue

@@ -1,5 +1,5 @@
 <template>
-    <BaseTrendMetric
+    <component :is="this.card.url ? 'BaseLinkableTrendMetric' : 'BaseTrendMetric'"
       @selected="handleRangeSelected"
       :title="card.name"
       :help-text="card.helpText"
@@ -13,18 +13,19 @@
       :suffix-inflection="suffixInflection"
       :selected-range-key="selectedRangeKey"
       :loading="loading"
+      :url="this.card.url"
     />
   </template>
 
   <script>
   import map from 'lodash/map'
-  import { InteractsWithDates, MetricBehavior } from 'laravel-nova'
+  import { InteractsWithDates, MetricBehavior } from 'laravel-nova' //'@/mixins'
   import { minimum } from '../util'
 
   export default {
-    name: 'TrendMetric',
+    name: 'LinkableTrendMetric',
 
-    mixins: [InteractsWithDates, MetricBehavior],
+    // mixins: [InteractsWithDates, MetricBehavior],
 
     props: {
       card: {

resources/js/components/LinkableTrendMetric.vue

@@ -1,5 +1,5 @@
 <template>
-    <BaseLinkableValueMetric
+    <component :is="this.card.url ? 'BaseLinkableValueMetric' : 'BaseValueMetric'"
       @selected="handleRangeSelected"
       :title="card.name"
       :copyable="copyable"
@@ -22,8 +22,8 @@
   </template>
 
   <script>
-  import { minimum } from '../util'
-  import { InteractsWithDates, MetricBehavior } from 'laravel-nova'
+  import { minimum } from '@/util'
+  import { InteractsWithDates, MetricBehavior } from '@/mixins' //'laravel-nova'
   // import BaseLinkableValueMetric from './Base/BaseValueMetric'
   // import { BaseValueMetric } from 'laravel-nova'
   export default {

resources/js/components/LinkableValueMetric.vue

@@ -1,4 +1,5 @@
 let mix = require('laravel-mix')
+let path = require('path')
 
 require('./nova.mix')
 
@@ -7,4 +8,5 @@ mix
   .js('resources/js/card.js', 'js')
   .vue({ version: 3 })
   .css('resources/css/card.css', 'css')
+  .alias({ '@': path.join(__dirname, 'resources/js/') })
   .nova('saintsystems/nova-linkable-metrics')