feat(Spoolman): show currency for price field (#1584)

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

src/api/socketActions.ts

@@ -808,5 +808,18 @@ export const SocketActions = {
         dispatch: 'spoolman/onAvailableSpools'
       }
     )
+  },
+
+  async serverSpoolmanProxyGetSettingCurrency () {
+    baseEmit(
+      'server.spoolman.proxy', {
+        params: {
+          request_method: 'GET',
+          path: '/v1/setting/currency',
+          use_v2_response: true
+        },
+        dispatch: 'spoolman/onSettingCurrency'
+      }
+    )
   }
 }

src/components/widgets/spoolman/SpoolmanCard.vue

@@ -219,6 +219,10 @@ export default class SpoolmanCard extends Mixins(StateMixin) {
     return this.$store.getters['spoolman/getActiveSpool']
   }
 
+  get currency (): string | undefined {
+    return this.$store.state.spoolman.currency
+  }
+
   get isConnected (): boolean {
     return this.$store.state.spoolman.connected
   }
@@ -251,17 +255,38 @@ export default class SpoolmanCard extends Mixins(StateMixin) {
     if (!this.activeSpool) return '-'
 
     switch (field) {
-      case 'vendor': return this.activeSpool.filament.vendor?.name || '-'
-      case 'filament_name': return this.activeSpool.filament.name
-      case 'material': return this.activeSpool.filament.material || '-'
-      case 'first_used': return this.activeSpool.first_used ? this.$filters.formatRelativeTimeToNow(this.activeSpool.first_used) : this.$tc('app.setting.label.never')
-      case 'last_used': return this.activeSpool.last_used ? this.$filters.formatRelativeTimeToNow(this.activeSpool.last_used) : this.$tc('app.setting.label.never')
-      case 'price': return this.activeSpool.filament.price || '-'
-      case 'density': return this.activeSpool.filament.density || '-'
-      case 'extruder_temp': return this.activeSpool.filament.settings_extruder_temp || '-'
-      case 'bed_temp': return this.activeSpool.filament.settings_bed_temp || '-'
-
-      default: return this.activeSpool[field as keyof Spool] || '-'
+      case 'vendor':
+        return this.activeSpool.filament.vendor?.name || '-'
+
+      case 'filament_name':
+        return this.activeSpool.filament.name
+
+      case 'material':
+        return this.activeSpool.filament.material || '-'
+
+      case 'first_used':
+        return this.activeSpool.first_used ? this.$filters.formatRelativeTimeToNow(this.activeSpool.first_used) : this.$tc('app.setting.label.never')
+
+      case 'last_used':
+        return this.activeSpool.last_used ? this.$filters.formatRelativeTimeToNow(this.activeSpool.last_used) : this.$tc('app.setting.label.never')
+
+      case 'price':
+        return [
+          this.activeSpool.filament.price?.toFixed(2),
+          this.currency
+        ].filter(x => x != null).join(' ') || '-'
+
+      case 'density':
+        return this.activeSpool.filament.density || '-'
+
+      case 'extruder_temp':
+        return this.activeSpool.filament.settings_extruder_temp || '-'
+
+      case 'bed_temp':
+        return this.activeSpool.filament.settings_bed_temp || '-'
+
+      default:
+        return this.activeSpool[field as keyof Spool] || '-'
     }
   }
 }

src/store/spoolman/actions.ts

@@ -29,6 +29,7 @@ export const actions: ActionTree<SpoolmanState, RootState> = {
   async init () {
     SocketActions.serverSpoolmanGetSpoolId()
     SocketActions.serverSpoolmanProxyGetAvailableSpools()
+    SocketActions.serverSpoolmanProxyGetSettingCurrency()
   },
 
   async onActiveSpool ({ commit }, payload) {
@@ -132,6 +133,19 @@ export const actions: ActionTree<SpoolmanState, RootState> = {
     } else commit('setConnected', payload)
   },
 
+  async onSettingCurrency ({ commit }, payload: SpoolmanProxyResponse<{ value: string }>) {
+    if ('error' in payload && 'response' in payload) {
+      if (payload.error != null) {
+        EventBus.$emit(typeof payload.error === 'string' ? payload.error : payload.error.message, { type: 'error' })
+        return
+      }
+
+      payload = payload.response
+    }
+
+    commit('setCurrency', payload)
+  },
+
   async initializeWebsocketConnection ({ state, rootState, dispatch }) {
     if (rootState.server.config.spoolman?.server) {
       if (state.socket?.readyState === WebSocket.OPEN) {

src/store/spoolman/mutations.ts

@@ -32,6 +32,10 @@ export const mutations: MutationTree<SpoolmanState> = {
     state.dialog = payload
   },
 
+  setCurrency (state, payload: { value: string }) {
+    state.currency = payload.value.replace(/^"|"$/g, '')
+  },
+
   setConnected (state, payload) {
     state.connected = payload
   }

src/store/spoolman/state.ts

@@ -4,6 +4,7 @@ export const defaultState = (): SpoolmanState => {
   return {
     availableSpools: [],
     activeSpool: undefined,
+    currency: undefined,
     connected: false,
     dialog: {
       show: false

src/store/spoolman/types.ts

@@ -46,6 +46,7 @@ export interface Spool {
 export interface SpoolmanState {
   availableSpools: Spool[];
   activeSpool?: number;
+  currency?: string;
   connected: boolean;
   dialog: SpoolSelectionDialogState;
   socket?: WebSocket;