From 3604c677bc6c53eba613fd7f51d84bb167f0496c Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 22 Oct 2024 00:51:32 +0200
Subject: [PATCH] refactor: refactor Console & MiniConsole (#2031)

---
 src/components/inputs/ConsoleTextarea.vue  | 138 ++++++++++++
 src/components/mixins/console.ts           |  63 ++++++
 src/components/panels/MiniconsolePanel.vue | 234 ++-------------------
 src/pages/Console.vue                      | 221 ++-----------------
 src/store/gui/console/mutations.ts         |  16 +-
 5 files changed, 244 insertions(+), 428 deletions(-)
 create mode 100644 src/components/inputs/ConsoleTextarea.vue
 create mode 100644 src/components/mixins/console.ts

diff --git a/src/components/inputs/ConsoleTextarea.vue b/src/components/inputs/ConsoleTextarea.vue
new file mode 100644
index 000000000..8663a9286
--- /dev/null
+++ b/src/components/inputs/ConsoleTextarea.vue
@@ -0,0 +1,138 @@
+<template>
+    <v-textarea
+        ref="gcodeCommandField"
+        v-model="gcode"
+        :items="items"
+        :label="$t('Panels.MiniconsolePanel.SendCode')"
+        solo
+        class="gcode-command-field"
+        autocomplete="off"
+        no-resize
+        auto-grow
+        :rows="rows"
+        hide-details
+        outlined
+        dense
+        :prepend-icon="isTouchDevice ? mdiChevronDoubleRight : ''"
+        :append-icon="mdiSend"
+        @keydown.enter.prevent.stop="doSend"
+        @keyup.up="onKeyUp"
+        @keyup.down="onKeyDown"
+        @keydown.tab="onAutocomplete"
+        @click:prepend="onAutocomplete"
+        @click:append="doSend" />
+</template>
+<script lang="ts">
+import { Component, Mixins, Ref } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import ConsoleMixin from '@/components/mixins/console'
+import { mdiSend, mdiChevronDoubleRight } from '@mdi/js'
+import { VTextareaType } from '@/store/printer/types'
+import { strLongestEqual } from '@/plugins/helpers'
+
+@Component
+export default class ConsoleTextarea extends Mixins(BaseMixin, ConsoleMixin) {
+    mdiSend = mdiSend
+    mdiChevronDoubleRight = mdiChevronDoubleRight
+
+    @Ref() readonly gcodeCommandField!: VTextareaType
+
+    gcode = ''
+    lastCommandNumber: number | null = null
+    items = []
+
+    get rows(): number {
+        return this.gcode?.split('\n').length ?? 1
+    }
+
+    setGcode(gcode: string): void {
+        this.gcode = gcode
+
+        this.$nextTick(() => {
+            this.gcodeCommandField.focus()
+        })
+    }
+
+    onKeyUp(): void {
+        if (this.lastCommandNumber === null && this.lastCommands.length) {
+            this.lastCommandNumber = this.lastCommands.length - 1
+            this.gcode = this.lastCommands[this.lastCommandNumber]
+        } else if (this.lastCommandNumber && this.lastCommandNumber > 0) {
+            this.lastCommandNumber--
+            this.gcode = this.lastCommands[this.lastCommandNumber]
+        }
+    }
+
+    onKeyDown(): void {
+        if (this.lastCommandNumber === null) return
+
+        if (this.lastCommandNumber < this.lastCommands.length - 1) {
+            this.lastCommandNumber++
+            this.gcode = this.lastCommands[this.lastCommandNumber]
+        } else if (this.lastCommandNumber === this.lastCommands.length - 1) {
+            this.lastCommandNumber = null
+            this.gcode = ''
+        }
+    }
+
+    doSend(cmd: KeyboardEvent) {
+        if (cmd.shiftKey) {
+            this.gcode += '\n'
+            return
+        }
+
+        if (this.gcode === '') return
+
+        this.$store.dispatch('printer/sendGcode', this.gcode)
+        this.$store.dispatch('gui/gcodehistory/addToHistory', this.gcode)
+        this.gcode = ''
+        this.lastCommandNumber = null
+    }
+
+    onAutocomplete(e: Event): void {
+        e.preventDefault()
+
+        if (!this.gcode.length) return
+
+        const textarea = this.gcodeCommandField.$refs.input
+        const currentPosition = textarea.selectionStart
+        const beforeCursor = this.gcode.substring(0, currentPosition)
+        const lastNewlineIndex = beforeCursor.lastIndexOf('\n')
+        const currentLine = beforeCursor.substring(lastNewlineIndex + 1)
+
+        const currentLineLowerCase = currentLine.toLowerCase()
+        const commands = this.helplist.filter((element) => element.commandLow.startsWith(currentLineLowerCase))
+
+        if (commands.length === 0) return
+
+        if (commands?.length === 1) {
+            this.updateGcode(commands[0].command, lastNewlineIndex, currentPosition)
+            return
+        }
+
+        const longestCommon = commands.reduce((acc, val) => {
+            return strLongestEqual(acc, val.command)
+        }, commands[0].command)
+
+        let output = ''
+        commands.forEach(
+            (command) =>
+                (output += `<a class="command font-weight-bold">${command.command}</a>: ${command.description}<br />`)
+        )
+
+        this.$store.dispatch('server/addEvent', { message: output, type: 'autocomplete' })
+
+        this.updateGcode(longestCommon, lastNewlineIndex, currentPosition)
+    }
+
+    updateGcode(text: string, start: number, end: number) {
+        this.gcode = this.gcode.substring(0, start + 1) + text + this.gcode.substring(end)
+    }
+}
+</script>
+
+<style scoped>
+.gcode-command-field {
+    font-family: 'Roboto Mono', monospace;
+}
+</style>
diff --git a/src/components/mixins/console.ts b/src/components/mixins/console.ts
new file mode 100644
index 000000000..1709f6e89
--- /dev/null
+++ b/src/components/mixins/console.ts
@@ -0,0 +1,63 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { CommandHelp } from '@/store/printer/types'
+import { GuiConsoleStateFilter } from '@/store/gui/console/types'
+
+@Component
+export default class ConsoleMixin extends Vue {
+    get helplist(): CommandHelp[] {
+        return this.$store.state.printer.helplist ?? []
+    }
+
+    get consoleDirection() {
+        return this.$store.state.gui.console.direction ?? 'table'
+    }
+
+    get hideWaitTemperatures(): boolean {
+        return this.$store.state.gui.console.hideWaitTemperatures
+    }
+
+    set hideWaitTemperatures(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.hideWaitTemperatures', value: newVal })
+    }
+
+    get hideTlCommands(): boolean {
+        return this.$store.state.gui.console.hideTlCommands
+    }
+
+    set hideTlCommands(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.hideTlCommands', value: newVal })
+    }
+
+    get customFilters() {
+        return this.$store.state.gui.console.consolefilters ?? {}
+    }
+
+    get autoscroll(): boolean {
+        return this.$store.state.gui.console.autoscroll ?? true
+    }
+
+    set autoscroll(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.autoscroll', value: newVal })
+    }
+
+    get rawOutput(): boolean {
+        return this.$store.state.gui.console.rawOutput ?? false
+    }
+
+    set rawOutput(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.rawOutput', value: newVal })
+    }
+
+    get lastCommands(): string[] {
+        return this.$store.state.gui.gcodehistory.entries ?? []
+    }
+
+    toggleFilter(id: string | number, filter: GuiConsoleStateFilter): void {
+        this.$store.dispatch('gui/console/filterUpdate', { id, values: filter })
+    }
+
+    clearConsole() {
+        this.$store.dispatch('gui/console/clear')
+    }
+}
diff --git a/src/components/panels/MiniconsolePanel.vue b/src/components/panels/MiniconsolePanel.vue
index 8a5168dc6..98c6499d7 100644
--- a/src/components/panels/MiniconsolePanel.vue
+++ b/src/components/panels/MiniconsolePanel.vue
@@ -10,7 +10,7 @@
             <v-btn icon tile @click="clearConsole">
                 <v-icon small>{{ mdiTrashCan }}</v-icon>
             </v-btn>
-            <command-help-modal :in-toolbar="true" @onCommand="gcode = $event" />
+            <command-help-modal :in-toolbar="true" @onCommand="commandClick($event)" />
             <v-menu
                 :offset-y="true"
                 :close-on-content-click="false"
@@ -48,7 +48,7 @@
                             class="mt-0"
                             hide-details
                             :label="filter.name"
-                            @change="toggleFilter(filter)" />
+                            @change="toggleFilter(index, filter)" />
                     </v-list-item>
                     <v-list-item class="minHeight36">
                         <v-checkbox
@@ -62,28 +62,7 @@
         </template>
         <div class="d-flex flex-column">
             <v-card-text :class="consoleDirection === 'table' ? 'order-1' : 'order-2'">
-                <v-textarea
-                    ref="gcodeCommandField"
-                    v-model="gcode"
-                    :items="items"
-                    :label="$t('Panels.MiniconsolePanel.SendCode')"
-                    solo
-                    class="gcode-command-field"
-                    autocomplete="off"
-                    no-resize
-                    auto-grow
-                    :rows="rows"
-                    hide-details
-                    outlined
-                    dense
-                    :prepend-icon="isTouchDevice ? mdiChevronDoubleRight : ''"
-                    :append-icon="mdiSend"
-                    @keydown.enter.prevent.stop="doSend"
-                    @keyup.up="onKeyUp"
-                    @keyup.down="onKeyDown"
-                    @keydown.tab="getAutocomplete"
-                    @click:prepend="getAutocomplete"
-                    @click:append="doSend"></v-textarea>
+                <console-textarea ref="gcodeCommandField" />
             </v-card-text>
             <v-card-text :class="(consoleDirection === 'table' ? 'order-2' : 'order-1') + ' pa-0'">
                 <v-row>
@@ -107,14 +86,14 @@
 </template>
 
 <script lang="ts">
-import { strLongestEqual, reverseString } from '@/plugins/helpers'
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { CommandHelp, VTextareaType } from '@/store/printer/types'
 import ConsoleTable from '@/components/console/ConsoleTable.vue'
 import Panel from '@/components/ui/Panel.vue'
-import { mdiChevronDoubleRight, mdiCog, mdiConsoleLine, mdiSend, mdiTrashCan } from '@mdi/js'
+import { mdiCog, mdiConsoleLine, mdiTrashCan } from '@mdi/js'
 import CommandHelpModal from '@/components/CommandHelpModal.vue'
+import ConsoleMixin from '@/components/mixins/console'
+import ConsoleTextarea from '@/components/inputs/ConsoleTextarea.vue'
 
 @Component({
     components: {
@@ -123,31 +102,13 @@ import CommandHelpModal from '@/components/CommandHelpModal.vue'
         CommandHelpModal,
     },
 })
-export default class MiniconsolePanel extends Mixins(BaseMixin) {
+export default class MiniconsolePanel extends Mixins(BaseMixin, ConsoleMixin) {
     mdiTrashCan = mdiTrashCan
     mdiConsoleLine = mdiConsoleLine
     mdiCog = mdiCog
-    mdiSend = mdiSend
-    mdiChevronDoubleRight = mdiChevronDoubleRight
 
-    declare $refs: {
-        gcodeCommandField: VTextareaType
-        console: ConsoleTable
-        miniConsoleScroll: any
-    }
-
-    private gcode = ''
-    private lastCommandNumber: number | null = null
-    private items = []
-    private cmdListSearch: string | null = null
-
-    get helplist(): CommandHelp[] {
-        return this.$store.state.printer.helplist ?? []
-    }
-
-    get consoleDirection() {
-        return this.$store.state.gui.console.direction ?? 'table'
-    }
+    @Ref() readonly miniConsoleScroll!: any
+    @Ref() readonly gcodeCommandField!: typeof ConsoleTextarea
 
     get consoleHeight() {
         return this.$store.state.gui.console.height ?? 300
@@ -171,160 +132,8 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
         if (newVal) this.scrollToBottom()
     }
 
-    clearConsole() {
-        this.$store.dispatch('gui/console/clear')
-    }
-
-    get hideWaitTemperatures(): boolean {
-        return this.$store.state.gui.console.hideWaitTemperatures
-    }
-
-    set hideWaitTemperatures(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'console.hideWaitTemperatures', value: newVal })
-    }
-
-    get hideTlCommands(): boolean {
-        return this.$store.state.gui.console.hideTlCommands
-    }
-
-    set hideTlCommands(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'console.hideTlCommands', value: newVal })
-    }
-
-    get customFilters(): any[] {
-        return this.$store.state.gui.console.consolefilters
-    }
-
-    get rows(): number {
-        return this.gcode?.split('\n').length ?? 1
-    }
-
-    get lastCommands(): string[] {
-        return this.$store.state.gui.gcodehistory.entries ?? []
-    }
-
-    get autoscroll(): boolean {
-        return this.$store.state.gui.console.autoscroll ?? true
-    }
-
-    set autoscroll(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'console.autoscroll', value: newVal })
-    }
-
-    get rawOutput(): boolean {
-        return this.$store.state.gui.console.rawOutput ?? false
-    }
-
-    set rawOutput(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'console.rawOutput', value: newVal })
-    }
-
     commandClick(msg: string): void {
-        this.gcode = msg
-
-        this.$nextTick(() => {
-            this.$refs.gcodeCommandField.focus()
-        })
-    }
-
-    doSend(cmd: KeyboardEvent) {
-        if (!cmd.shiftKey) {
-            if (this.gcode !== '') {
-                this.$store.dispatch('printer/sendGcode', this.gcode)
-                this.$store.dispatch('gui/gcodehistory/addToHistory', this.gcode)
-                this.gcode = ''
-                this.lastCommandNumber = null
-                setTimeout(() => {
-                    this.$refs.console.$el.scroll({
-                        top: 0,
-                        left: 0,
-                        behavior: 'smooth',
-                    })
-                }, 20)
-            }
-        } else {
-            this.gcode += '\n'
-        }
-    }
-
-    onKeyUp(): void {
-        if (this.lastCommandNumber === null && this.lastCommands.length) {
-            this.lastCommandNumber = this.lastCommands.length - 1
-            this.gcode = this.lastCommands[this.lastCommandNumber]
-        } else if (this.lastCommandNumber && this.lastCommandNumber > 0) {
-            this.lastCommandNumber--
-            this.gcode = this.lastCommands[this.lastCommandNumber]
-        }
-    }
-
-    onKeyDown(): void {
-        if (this.lastCommandNumber !== null && this.lastCommandNumber < this.lastCommands.length - 1) {
-            this.lastCommandNumber++
-            this.gcode = this.lastCommands[this.lastCommandNumber]
-        } else if (this.lastCommandNumber !== null && this.lastCommandNumber === this.lastCommands.length - 1) {
-            this.lastCommandNumber = null
-            this.gcode = ''
-        }
-    }
-
-    getAutocomplete(e: Event): void {
-        e.preventDefault()
-        if (this.gcode.length) {
-            let check = this.gcode.toLowerCase()
-            const textarea = this.$refs.gcodeCommandField.$refs.input
-            const sentence = textarea.value
-            const len = sentence.length
-            const pos = textarea.selectionStart
-            const currentLinePos = len - reverseString(sentence).indexOf('\n', len - pos)
-            const currentEndPos =
-                sentence.indexOf('\n', currentLinePos) > -1
-                    ? sentence.indexOf('\n', currentLinePos) - 1
-                    : Number.MAX_SAFE_INTEGER
-            if (this.rows > 1) {
-                check = sentence.substr(currentLinePos, currentEndPos - currentLinePos)
-            }
-            let commands = this.helplist.filter((element) => element.commandLow.startsWith(check.toLowerCase()))
-            if (commands?.length === 1) {
-                if (this.rows > 1) {
-                    this.gcode = this.gcode.replace(check, commands[0].command)
-                } else {
-                    this.gcode = commands[0].command
-                }
-            } else if (commands?.length > 1) {
-                let commands = this.helplist.filter((element) => element.commandLow.startsWith(check.toLowerCase()))
-                if (this.rows > 1) {
-                    this.gcode = this.gcode.replace(
-                        check,
-                        commands.reduce((acc, val) => {
-                            return strLongestEqual(acc, val.command)
-                        }, commands[0].command)
-                    )
-                } else {
-                    this.gcode = commands.reduce((acc, val) => {
-                        return strLongestEqual(acc, val.command)
-                    }, commands[0].command)
-                }
-                if (commands && commands.length) {
-                    let output = ''
-                    commands.forEach(
-                        (command) =>
-                            (output +=
-                                '<a class="command font-weight-bold">' +
-                                command.command +
-                                '</a>: ' +
-                                command.description +
-                                '<br />')
-                    )
-
-                    this.$store.dispatch('server/addEvent', { message: output, type: 'autocomplete' })
-                }
-            }
-        }
-        this.$refs.gcodeCommandField.focus()
-    }
-
-    toggleFilter(filter: string) {
-        this.$store.dispatch('gui/updateConsoleFilter', filter)
+        this.gcodeCommandField.setGcode(msg)
     }
 
     mounted() {
@@ -333,21 +142,22 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
 
     scrollToBottom() {
         this.$nextTick(() => {
-            if (this.$refs.miniConsoleScroll) {
-                const overlayscroll = this.$refs.miniConsoleScroll.osInstance()
-                overlayscroll?.scroll({ y: '100%' })
-            }
+            this.scrollTo(100)
         })
     }
 
     scrollToTop() {
         this.$nextTick(() => {
-            if (this.$refs.miniConsoleScroll) {
-                const overlayscroll = this.$refs.miniConsoleScroll.osInstance()
-                overlayscroll?.scroll({ y: '0%' })
-            }
+            this.scrollTo(0)
         })
     }
+
+    scrollTo(position: number) {
+        if (!this.miniConsoleScroll) return
+
+        const instance = this.miniConsoleScroll.osInstance()
+        instance?.scroll({ y: `${position}%` })
+    }
 }
 </script>
 
@@ -359,8 +169,4 @@ export default class MiniconsolePanel extends Mixins(BaseMixin) {
 html.theme--light .consoleTable {
     border-top: 1px solid rgba(0, 0, 0, 0.12);
 }
-
-.gcode-command-field {
-    font-family: 'Roboto Mono', monospace;
-}
 </style>
diff --git a/src/pages/Console.vue b/src/pages/Console.vue
index 39a5da20b..a9ca31d6d 100644
--- a/src/pages/Console.vue
+++ b/src/pages/Console.vue
@@ -2,35 +2,14 @@
     <div class="d-flex flex-column">
         <v-row :class="consoleDirection === 'table' ? 'order-0' : 'order-1 mt-3'">
             <v-col>
-                <v-textarea
-                    ref="gcodeCommandField"
-                    v-model="gcode"
-                    :items="items"
-                    :label="$t('Console.SendCode')"
-                    solo
-                    class="gcode-command-field"
-                    autocomplete="off"
-                    no-resize
-                    auto-grow
-                    :rows="rows"
-                    hide-details
-                    outlined
-                    dense
-                    :prepend-icon="isTouchDevice ? mdiChevronDoubleRight : ''"
-                    :append-icon="mdiSend"
-                    @keydown.enter.prevent.stop="doSend"
-                    @keyup.up="onKeyUp"
-                    @keyup.down="onKeyDown"
-                    @keydown.tab="getAutocomplete"
-                    @click:prepend="getAutocomplete"
-                    @click:append="doSend"></v-textarea>
+                <console-textarea ref="gcodeCommandField" />
             </v-col>
 
             <v-col class="col-auto d-flex align-center">
                 <v-btn class="mr-3 px-2 minwidth-0" color="lightgray" @click="clearConsole">
                     <v-icon>{{ mdiTrashCan }}</v-icon>
                 </v-btn>
-                <command-help-modal @onCommand="gcode = $event" />
+                <command-help-modal @onCommand="commandClick($event)" />
                 <v-menu
                     offset-y
                     :top="consoleDirection === 'shell'"
@@ -69,7 +48,7 @@
                                 class="mt-0"
                                 hide-details
                                 :label="filter.name"
-                                @change="toggleFilter(filter)" />
+                                @change="toggleFilter(index, filter)" />
                         </v-list-item>
                         <v-list-item class="minHeight36">
                             <v-checkbox
@@ -101,13 +80,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import ConsoleTable from '@/components/console/ConsoleTable.vue'
-import { CommandHelp, VTextareaType } from '@/store/printer/types'
-import { reverseString, strLongestEqual } from '@/plugins/helpers'
 import CommandHelpModal from '@/components/CommandHelpModal.vue'
-import { mdiChevronDoubleRight, mdiCog, mdiSend, mdiTrashCan } from '@mdi/js'
+import { mdiCog, mdiTrashCan } from '@mdi/js'
+import ConsoleMixin from '@/components/mixins/console'
+import ConsoleTextarea from '@/components/inputs/ConsoleTextarea.vue'
 
 @Component({
     components: {
@@ -115,32 +94,12 @@ import { mdiChevronDoubleRight, mdiCog, mdiSend, mdiTrashCan } from '@mdi/js'
         ConsoleTable,
     },
 })
-export default class PageConsole extends Mixins(BaseMixin) {
-    private gcode = ''
-    private lastCommandNumber: number | null = null
-    private items = []
-
-    /**
-     * Icons
-     */
-    mdiChevronDoubleRight = mdiChevronDoubleRight
-    mdiSend = mdiSend
+export default class PageConsole extends Mixins(BaseMixin, ConsoleMixin) {
     mdiCog = mdiCog
     mdiTrashCan = mdiTrashCan
 
-    declare $refs: {
-        gcodeCommandField: VTextareaType
-        console: ConsoleTable
-        consoleScroll: any
-    }
-
-    get helplist(): CommandHelp[] {
-        return this.$store.state.printer.helplist ?? []
-    }
-
-    get consoleDirection() {
-        return this.$store.state.gui.console.direction ?? 'table'
-    }
+    @Ref() readonly consoleScroll!: any
+    @Ref() readonly gcodeCommandField!: typeof ConsoleTextarea
 
     get events() {
         return this.$store.getters['server/getConsoleEvents'](this.consoleDirection === 'table')
@@ -160,158 +119,8 @@ export default class PageConsole extends Mixins(BaseMixin) {
         if (newVal) this.scrollToBottom()
     }
 
-    get hideWaitTemperatures(): boolean {
-        return this.$store.state.gui.console.hideWaitTemperatures
-    }
-
-    set hideWaitTemperatures(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'console.hideWaitTemperatures', value: newVal })
-    }
-
-    clearConsole() {
-        this.$store.dispatch('gui/console/clear')
-    }
-
-    get hideTlCommands(): boolean {
-        return this.$store.state.gui.console.hideWaitTemperatures
-    }
-
-    set hideTlCommands(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'console.hideTlCommands', value: newVal })
-    }
-
-    get rows(): number {
-        return this.gcode?.split('\n').length ?? 1
-    }
-
-    get customFilters(): any[] {
-        return this.$store.state.gui.console.consolefilters
-    }
-
-    get lastCommands(): string[] {
-        return this.$store.state.gui.gcodehistory.entries ?? []
-    }
-
-    get autoscroll(): boolean {
-        return this.$store.state.gui.console.autoscroll ?? true
-    }
-
-    set autoscroll(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'console.autoscroll', value: newVal })
-    }
-
-    get rawOutput(): boolean {
-        return this.$store.state.gui.console.rawOutput ?? false
-    }
-
-    set rawOutput(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'console.rawOutput', value: newVal })
-    }
-
     commandClick(msg: string): void {
-        this.gcode = msg
-
-        this.$nextTick(() => {
-            this.$refs.gcodeCommandField.focus()
-        })
-    }
-
-    doSend(cmd: KeyboardEvent): void {
-        if (!cmd.shiftKey) {
-            if (this.gcode !== '') {
-                this.$store.dispatch('printer/sendGcode', this.gcode)
-                this.$store.dispatch('gui/gcodehistory/addToHistory', this.gcode)
-                this.gcode = ''
-                this.lastCommandNumber = null
-                setTimeout(() => {
-                    this.$refs.console.$el.scroll({
-                        top: 0,
-                        left: 0,
-                        behavior: 'smooth',
-                    })
-                }, 20)
-            }
-        } else this.gcode += '\n'
-    }
-
-    onKeyUp(): void {
-        if (this.lastCommandNumber === null && this.lastCommands.length) {
-            this.lastCommandNumber = this.lastCommands.length - 1
-            this.gcode = this.lastCommands[this.lastCommandNumber]
-        } else if (this.lastCommandNumber && this.lastCommandNumber > 0) {
-            this.lastCommandNumber--
-            this.gcode = this.lastCommands[this.lastCommandNumber]
-        }
-    }
-
-    onKeyDown(): void {
-        if (this.lastCommandNumber !== null && this.lastCommandNumber < this.lastCommands.length - 1) {
-            this.lastCommandNumber++
-            this.gcode = this.lastCommands[this.lastCommandNumber]
-        } else if (this.lastCommandNumber !== null && this.lastCommandNumber === this.lastCommands.length - 1) {
-            this.lastCommandNumber = null
-            this.gcode = ''
-        }
-    }
-
-    getAutocomplete(e: Event): void {
-        e.preventDefault()
-        if (this.gcode.length) {
-            let check = this.gcode.toLowerCase()
-            const textarea = this.$refs.gcodeCommandField.$refs.input
-            const sentence = textarea.value
-            const len = sentence.length
-            const pos = textarea.selectionStart
-            const currentLinePos = len - reverseString(sentence).indexOf('\n', len - pos)
-            const currentEndPos =
-                sentence.indexOf('\n', currentLinePos) > -1
-                    ? sentence.indexOf('\n', currentLinePos) - 1
-                    : Number.MAX_SAFE_INTEGER
-            if (this.rows > 1) {
-                check = sentence.substr(currentLinePos, currentEndPos - currentLinePos)
-            }
-            let commands = this.helplist.filter((element) => element.commandLow.startsWith(check.toLowerCase()))
-            if (commands?.length === 1) {
-                if (this.rows > 1) {
-                    this.gcode = this.gcode.replace(check, commands[0].command)
-                } else {
-                    this.gcode = commands[0].command
-                }
-            } else if (commands?.length > 1) {
-                let commands = this.helplist.filter((element) => element.commandLow.startsWith(check.toLowerCase()))
-                if (this.rows > 1) {
-                    this.gcode = this.gcode.replace(
-                        check,
-                        commands.reduce((acc, val) => {
-                            return strLongestEqual(acc, val.command)
-                        }, commands[0].command)
-                    )
-                } else {
-                    this.gcode = commands.reduce((acc, val) => {
-                        return strLongestEqual(acc, val.command)
-                    }, commands[0].command)
-                }
-                if (commands && commands.length) {
-                    let output = ''
-                    commands.forEach(
-                        (command) =>
-                            (output +=
-                                "<a class='command font-weight-bold'>" +
-                                command.command +
-                                '</a>: ' +
-                                command.description +
-                                '<br />')
-                    )
-
-                    this.$store.dispatch('server/addEvent', { message: output, type: 'autocomplete' })
-                }
-            }
-        }
-        this.$refs.gcodeCommandField.focus()
-    }
-
-    toggleFilter(filter: string): void {
-        this.$store.dispatch('gui/updateConsoleFilter', filter)
+        this.gcodeCommandField.setGcode(msg)
     }
 
     mounted() {
@@ -320,10 +129,10 @@ export default class PageConsole extends Mixins(BaseMixin) {
 
     scrollToBottom() {
         this.$nextTick(() => {
-            if (this.$refs.consoleScroll) {
-                const overlayscroll = this.$refs.consoleScroll.osInstance()
-                overlayscroll?.scroll({ y: '100%' })
-            }
+            if (!this.consoleScroll) return
+
+            const overlayscroll = this.consoleScroll.osInstance()
+            overlayscroll?.scroll({ y: '100%' })
         })
     }
 }
diff --git a/src/store/gui/console/mutations.ts b/src/store/gui/console/mutations.ts
index 737727bef..977a9b6dd 100644
--- a/src/store/gui/console/mutations.ts
+++ b/src/store/gui/console/mutations.ts
@@ -17,17 +17,17 @@ export const mutations: MutationTree<GuiConsoleState> = {
     },
 
     filterUpdate(state, payload) {
-        if (payload.id in state.consolefilters) {
-            const preset = { ...state.consolefilters[payload.id] }
-            Object.assign(preset, payload.values)
+        if (!(payload.id in state.consolefilters)) return
 
-            Vue.set(state.consolefilters, payload.id, preset)
-        }
+        const preset = { ...state.consolefilters[payload.id] }
+        Object.assign(preset, payload.values)
+
+        Vue.set(state.consolefilters, payload.id, preset)
     },
 
     filterDelete(state, payload) {
-        if (payload in state.consolefilters) {
-            Vue.delete(state.consolefilters, payload)
-        }
+        if (!(payload in state.consolefilters)) return
+
+        Vue.delete(state.consolefilters, payload)
     },
 }