Command pattern

src/App.vue

@@ -1,107 +1,51 @@
 <script setup lang="ts">
-import axios from 'axios'
 import InputBar from './components/InputBar.vue'
 import ValuesDisplay from './components/ValuesDisplay.vue'
 import TypesDisplay from './components/TypesDisplay.vue'
+import { CommandFactory } from './commands/command.factory'
 
-import { ValueType } from './scripts/value_type'
-import { Value } from './scripts/value'
+import { useValueStore } from './stores/value.store'
+import { useValueTypeStore } from './stores/value-type.store'
+
+import type { UrlParams } from './types/url-paras.type'
 </script>
 
 <script lang="ts">
 export default {
   data() {
+    const valueStore = useValueStore()
+    const valueTypeStore = useValueTypeStore()
+    const params: UrlParams = {}
+    const commandFactory = new CommandFactory(params)
     return {
-      values: new Array<Value>(),
-      value_types: new Array<ValueType>(),
-      filter_start : '',
-      filter_end : '',
-      filter_type : ''
+      params,
+      commandFactory,
+      valueStore,
+      valueTypeStore
     }
   },
   mounted() {
-    this.get_types()
-    this.get_values().then((data) => {
-      this.values = data
-    })
+    this.valueTypeStore.updateValueTypes()
+    this.valueStore.updateValues()
   },
   methods: {
-    getTypeId(type_name: string) {
-      var return_value = ''
-      for (var i = 0; i < this.value_types.length; i++) {
-        if (this.value_types[i].type_name.toUpperCase() == type_name.toUpperCase()) {
-          return_value = '' + this.value_types[i].id
-          console.log('Found matching type', this.value_types[i])
-        }
-      }
-      return return_value
-    },
     update_search(args: string[]) {
       console.log('New search arguemnts', args)
-      this.filter_end=''
-      this.filter_start=''
-      this.filter_type=''
       for (var i = 0; i < args.length; i++) {
-        const command = args[i]
-        console.log('handling command', command)
+        console.log('handling command', args[i])
         const command_and_args = args[i].split(':')
         if (command_and_args.length == 2) {
           const key = command_and_args[0]
           const value = command_and_args[1]
-          if (key == 'type') {
-            this.filter_type = this.getTypeId(value)
-            console.log('Update typeid', this.filter_type)
-            continue
-          } else if (key == 'start') {
-            this.filter_start = value
-            continue
-          } else if (key == 'end') {
-            this.filter_end = value
+          const command = this.commandFactory.getCommand(key)
+          if (command) {
+            command.execute(value)
             continue
           }
         }
-        console.log('Ignoring command', command)
+        console.log('Ignoring command', args[i])
       }
-      this.get_values().then((result) => {
-        this.values = result
-      })
-    },
-    get_types() {
-      axios
-        .get('/api/type/')
-        .then((result) => {
-          this.value_types = result.data
-        })
-        .catch((error) => {
-          console.error(error)
-        })
-    },
-    get_values() {
-      const promise = new Promise<Value[]>((accept, reject) => {
-        const url = '/api/value/'
-        var params : { [key: string]: string } = {}
-        if (this.filter_type != '') {
-          params['type_id'] = this.filter_type
-        }
-        if (this.filter_end != '') {
-          params['end'] = this.filter_end
-        }
-        if (this.filter_start != '') {
-          params['start']=this.filter_start
-        }
-        console.log('Trying to get url', url)
-        axios
-          .get(url, { params: params })
-          .then((result) => {
-            // console.log('Got values: ', result.data)
-            accept(result.data)
-          })
-          .catch((error) => {
-            console.error(error)
-            reject(error)
-          })
-      })
-      return promise
+      this.valueStore.updateValues(this.params)
     }
   }
 }
@@ -111,7 +55,10 @@ export default {
   <div class="container p-1">
     <h1 class="row">RDP</h1>
     <InputBar @search="update_search" />
-    <TypesDisplay :value_types="value_types" @update_type="get_types" />
-    <ValuesDisplay :values="values" :value_types="value_types" />
+    <TypesDisplay
+      :value_types="valueTypeStore.valueTypes"
+      @update_type="valueTypeStore.updateValueTypes"
+    />
+    <ValuesDisplay :values="valueStore.values" :value_types="valueTypeStore.valueTypes" />
   </div>
 </template>

src/commands/command.factory.ts

@@ -0,0 +1,22 @@
+import type { UrlParams } from '@/types/url-paras.type'
+import { Command } from './command'
+import { TypeFilterCommand } from './type-filter.command'
+import { StartFilterCommand } from './start-filter.command'
+import { EndFilterCommand } from './end-filter.command'
+
+export class CommandFactory {
+  private static readonly registeredCommands: Record<string, new (params: UrlParams) => Command> = {
+    type: TypeFilterCommand,
+    start: StartFilterCommand,
+    end: EndFilterCommand
+  }
+
+  constructor(private params: UrlParams) {}
+
+  public getCommand(command: string): Command | undefined {
+    const cmd = CommandFactory.registeredCommands[command]
+    if (cmd) {
+      return new cmd(this.params)
+    }
+  }
+}

src/commands/command.ts

@@ -0,0 +1,6 @@
+import type { UrlParams } from '@/types/url-paras.type'
+
+export abstract class Command {
+  public constructor(protected params: UrlParams) {}
+  public abstract execute(arg: string): void
+}

src/commands/end-filter.command.ts

@@ -0,0 +1,7 @@
+import { Command } from './command'
+
+export class EndFilterCommand extends Command {
+  execute(arg: string): void {
+    this.params['end'] = arg
+  }
+}

src/commands/start-filter.command.ts

@@ -0,0 +1,7 @@
+import { Command } from './command'
+
+export class StartFilterCommand extends Command {
+  execute(arg: string): void {
+    this.params['start'] = arg
+  }
+}

src/commands/type-filter.command.ts

@@ -0,0 +1,10 @@
+import { Command } from './command'
+import { useValueTypeStore } from '@/stores/value-type.store'
+
+export class TypeFilterCommand extends Command {
+  private valueTypeStore = useValueTypeStore()
+
+  execute(arg: string): void {
+    this.params['type_id'] = this.valueTypeStore.getTypeId(arg)
+  }
+}

src/main.ts

@@ -1,4 +1,4 @@
-import "./scss/custom.scss"
+import './scss/custom.scss'
 import 'bootstrap'
 import 'bootstrap-icons/font/bootstrap-icons.scss'
 

src/stores/value-type.store.ts

@@ -0,0 +1,31 @@
+import axios from 'axios'
+
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { ValueType } from '@/scripts/value_type'
+
+export const useValueTypeStore = defineStore('valueType', () => {
+  const valueTypes = ref<ValueType[]>([])
+  const getTypeId = (type_name: string) => {
+    var return_value = ''
+    for (var i = 0; i < valueTypes.value.length; i++) {
+      if (valueTypes.value[i].type_name.toUpperCase() == type_name.toUpperCase()) {
+        return_value = '' + valueTypes.value[i].id
+        console.log('Found matching type', valueTypes.value[i])
+      }
+    }
+    return return_value
+  }
+  const updateValueTypes = () => {
+    axios
+      .get('/api/type/')
+      .then((result) => {
+        valueTypes.value = result.data
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+  }
+
+  return { valueTypes, getTypeId, updateValueTypes }
+})

src/stores/value.store.ts

@@ -0,0 +1,24 @@
+import axios from 'axios'
+
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { Value } from '@/scripts/value'
+import type { UrlParams } from '@/types/url-paras.type'
+
+export const useValueStore = defineStore('value', () => {
+  const values = ref<Value[]>([])
+  const updateValues = (params: UrlParams = {}) => {
+    const url = '/api/value/'
+    console.log('Trying to get url', url)
+    axios
+      .get(url, { params })
+      .then((result) => {
+        values.value = result.data
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+  }
+
+  return { values, updateValues }
+})

src/types/url-paras.type.ts

@@ -0,0 +1 @@
+export type UrlParams = { [key: string]: string }