feat: add note to history job (#716)

src/components/panels/HistoryListPanel.vue

@@ -172,7 +172,17 @@
                             </template>
                         </td>
                         <td class=" ">{{ item.filename }}</td>
-                        <td class="text-center">
+                        <td class="text-right text-no-wrap">
+                            <template v-if="'note' in item && item.note">
+                                <v-tooltip top>
+                                    <template #activator="{ on, attrs }">
+                                        <v-icon small class="mr-2" v-bind="attrs" v-on="on">
+                                            {{ mdiNotebook }}
+                                        </v-icon>
+                                    </template>
+                                    <span v-html="item.note.replaceAll('\n', '<br />')"></span>
+                                </v-tooltip>
+                            </template>
                             <v-tooltip top>
                                 <template #activator="{ on, attrs }">
                                     <span v-bind="attrs" v-on="on">
@@ -213,6 +223,16 @@
                     <v-icon class="mr-1">{{ mdiTextBoxSearch }}</v-icon>
                     {{ $t('History.Details') }}
                 </v-list-item>
+                <v-list-item
+                    v-if="'note' in contextMenu.item && contextMenu.item.note"
+                    @click="editNote(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiNotebookEdit }}</v-icon>
+                    {{ $t('History.EditNote') }}
+                </v-list-item>
+                <v-list-item v-else @click="createNote(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiNotebookPlus }}</v-icon>
+                    {{ $t('History.AddNote') }}
+                </v-list-item>
                 <v-list-item
                     v-if="contextMenu.item.exists"
                     :disabled="printerIsPrinting || !klipperReadyForGui"
@@ -429,6 +449,35 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
+        <v-dialog v-model="noteDialog.boolShow" :max-width="600" persistent @keydown.esc="noteDialog.boolShow = false">
+            <panel
+                :title="noteDialog.type === 'create' ? $t('History.CreateNote') : $t('History.EditNote')"
+                :icon="noteDialog.type === 'create' ? mdiNotebookPlus : mdiNotebookEdit"
+                card-class="history-note-dialog"
+                :margin-bottom="false">
+                <template #buttons>
+                    <v-btn icon tile @click="noteDialog.boolShow = false">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+                <v-card-text class="pb-0">
+                    <v-row>
+                        <v-col>
+                            <v-textarea
+                                v-model="noteDialog.note"
+                                outlined
+                                hide-details
+                                :label="$t('History.Note')"></v-textarea>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="" text @click="noteDialog.boolShow = false">{{ $t('History.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="saveNote">{{ $t('History.Save') }}</v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
     </div>
 </template>
 
@@ -451,6 +500,9 @@ import {
     mdiMagnify,
     mdiCloseThick,
     mdiUpdate,
+    mdiNotebookEdit,
+    mdiNotebookPlus,
+    mdiNotebook,
 } from '@mdi/js'
 @Component({
     components: { Panel },
@@ -467,6 +519,9 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiMagnify = mdiMagnify
     mdiUpdate = mdiUpdate
     mdiCloseThick = mdiCloseThick
+    mdiNotebookPlus = mdiNotebookPlus
+    mdiNotebookEdit = mdiNotebookEdit
+    mdiNotebook = mdiNotebook
 
     formatFilesize = formatFilesize
 
@@ -487,6 +542,18 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         boolShow: false,
     }
 
+    private noteDialog: {
+        item: ServerHistoryStateJob | null
+        note: string
+        boolShow: boolean
+        type: 'create' | 'edit'
+    } = {
+        item: null,
+        note: '',
+        boolShow: false,
+        type: 'create',
+    }
+
     private deleteSelectedDialog = false
 
     get jobs() {
@@ -985,5 +1052,28 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
             }
         } else return '--'
     }
+
+    createNote(item: ServerHistoryStateJob) {
+        this.noteDialog.item = item
+        this.noteDialog.note = ''
+        this.noteDialog.type = 'create'
+        this.noteDialog.boolShow = true
+    }
+
+    editNote(item: ServerHistoryStateJob) {
+        this.noteDialog.item = item
+        this.noteDialog.note = item.note ?? ''
+        this.noteDialog.type = 'edit'
+        this.noteDialog.boolShow = true
+    }
+
+    saveNote() {
+        this.$store.dispatch('server/history/saveHistoryNote', {
+            job_id: this.noteDialog.item?.job_id,
+            note: this.noteDialog.note,
+        })
+
+        this.noteDialog.boolShow = false
+    }
 }
 </script>

src/locales/en.json

@@ -245,12 +245,15 @@
         "Wireframe": "Wireframe"
     },
     "History": {
+        "AddNote": "Add note",
         "AllJobs": "All",
         "AvgPrinttime": "Printtime - Ø",
         "Cancel": "Cancel",
+        "CreateNote": "Create Note",
         "Delete": "Delete",
         "DeleteSelectedQuestion": "Do you really want to delete {count} selected jobs?",
         "Details": "Details",
+        "EditNote": "Edit Note",
         "Empty": "empty",
         "EndTime": "End Time",
         "EstimatedFilament": "Estimated Filament",
@@ -271,12 +274,14 @@
         "LastModified": "Last Modified",
         "LayerHeight": "Layer Height",
         "LongestPrinttime": "Longest Printtime",
+        "Note": "Note",
         "ObjectHeight": "Object Height",
         "PrintDuration": "Print Time",
         "PrintHistory": "Print History",
         "PrintTime": "Print Time",
         "PrinttimeAvg": "Printtime - Ø",
         "Reprint": "Reprint",
+        "Save": "save",
         "Search": "search",
         "SelectedFilamentUsed": "Selected Filament Used",
         "SelectedJobs": "Selected Jobs",

src/store/server/history/actions.ts

@@ -17,7 +17,7 @@ export const actions: ActionTree<ServerHistoryState, RootState> = {
         commit('setTotals', payload.job_totals)
     },
 
-    getHistory({ commit, state }, payload) {
+    getHistory({ commit, dispatch, state }, payload) {
         if ('requestParams' in payload && 'start' in payload.requestParams && payload.requestParams.start === 0)
             commit('resetJobs')
 
@@ -34,6 +34,28 @@ export const actions: ActionTree<ServerHistoryState, RootState> = {
                 },
                 { action: 'server/history/getHistory' }
             )
+        else dispatch('loadHistoryNotes')
+    },
+
+    loadHistoryNotes({ rootState }) {
+        if (rootState.server?.dbNamespaces.includes('history_notes'))
+            Vue.$socket.emit(
+                'server.database.get_item',
+                { namespace: 'history_notes' },
+                { action: 'server/history/initHistoryNotes' }
+            )
+    },
+
+    initHistoryNotes({ commit, state }, payload) {
+        const job_ids = Object.keys(payload.value)
+
+        job_ids.forEach((job_id: string) => {
+            const noteObject: { text: string } = payload.value[job_id]
+            commit('setHistoryNotes', {
+                job_id,
+                text: noteObject.text,
+            })
+        })
     },
 
     getChanged({ commit }, payload) {
@@ -50,4 +72,17 @@ export const actions: ActionTree<ServerHistoryState, RootState> = {
             })
         }
     },
+
+    saveHistoryNote({ commit }, payload: { job_id: string; note: string }) {
+        Vue.$socket.emit('server.database.post_item', {
+            namespace: 'history_notes',
+            key: payload.job_id,
+            value: { text: payload.note },
+        })
+
+        commit('setHistoryNotes', {
+            job_id: payload.job_id,
+            text: payload.note,
+        })
+    },
 }

src/store/server/history/mutations.ts

@@ -16,6 +16,11 @@ export const mutations: MutationTree<ServerHistoryState> = {
         Vue.set(state, 'job_totals', payload)
     },
 
+    setHistoryNotes(state, payload) {
+        const job = state.jobs.find((job) => job.job_id === payload.job_id)
+        if (job) Vue.set(job, 'note', payload.text)
+    },
+
     addJob(state, payload) {
         state.jobs.push(payload)
     },
@@ -29,8 +34,6 @@ export const mutations: MutationTree<ServerHistoryState> = {
 
     destroyJob(state, payload) {
         const index = state.jobs.findIndex((job) => job.job_id === payload)
-        if (index !== -1) {
+        if (index !== -1) state.jobs.splice(index, 1)
-            state.jobs.splice(index, 1)
-        }
     },
 }

src/store/server/history/types.ts

@@ -18,6 +18,7 @@ export interface ServerHistoryStateJob {
     filename: string
     // eslint-disable-next-line
     metadata: any
+    note?: string
     print_duration: number
     status: string
     start_time: number