Merge pull request #17 from gapitio/notes

feat: add bulk note for alerts
gapitio · May 2, 2024 · 8565632 · 8565632
2 parents 37c887c + 3ac8beb
commit 8565632
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 12 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -350,6 +350,44 @@
           </v-btn>
           <span>{{ $t('Delete') }}</span>
         </v-tooltip>
+
+        <v-text-field
+          v-if="showNote"
+          v-model.trim="noteText"
+          :counter="maxNoteLength"
+          :maxlength="maxNoteLength"
+          :minlength="minNoteLength"
+          :rules="noteRules"
+          :label="$t('AddNote')"
+          required
+        />
+        <v-tooltip bottom>
+          <v-btn
+            slot="activator"
+            icon
+            class="btn--plain"
+            @click="showNote ? bulkAddNote() : toggleNote()"
+          >
+            <v-icon>
+              note_add
+            </v-icon>
+          </v-btn>
+          <span>{{ $t('AddNote') }}</span>
+        </v-tooltip>
+
+        <v-tooltip bottom>
+          <v-btn
+            slot="activator"
+            icon
+            class="btn--plain"
+            @click="bulkDeleteLastNote()"
+          >
+            <v-icon>
+              cancel_presentation
+            </v-icon>
+          </v-btn>
+          <span>{{ $t('DeleteNote') }}</span>
+        </v-tooltip>
 
         <v-menu
           bottom
@@ -513,13 +551,21 @@ export default {
     Snackbar
   },
   props: [],
-  data: () => ({
+  data: vm => ({
     hasFocus: false,
     menu: false,
     message: false,
     hints: true,
     dialog: false,
     drawer: false,
+    noteText: '',
+    showNote: false,
+    maxNoteLength: 200,
+    minNoteLength: 0,
+    noteRules: [
+      v => !!v || i18n.t('TextIsRequired'),
+      v => (v && v.length <= vm.maxNoteLength) || `${i18n.t('TextMustBeLessThan')} ${vm.maxNoteLength} ${i18n.t('characters')}`
+    ],
     navbar: {
       signin: { icon: 'account_circle', text: i18n.t('SignIn'), path: '/login' }
     },
@@ -850,6 +896,25 @@ export default {
     unwatchAlert(id) {
       this.$store.dispatch('alerts/unwatchAlert', id)
     },
+    toggleNote() {
+      this.showNote = !this.showNote
+      this.noteText = ''
+    },
+    bulkAddNote() {
+      this.noteText ?
+        Promise.all(this.selected.map(a => this.$store.dispatch('alerts/addNote', [a.id, this.noteText]))).then(() => {
+          this.clearSelected()
+          this.$store.dispatch('alerts/getAlerts')
+          this.toggleNote()
+        }) : this.toggleNote()
+    },
+    bulkDeleteLastNote(){
+      confirm(i18n.t('confirmDelete')) &&
+        Promise.all(this.selected.map(a => {const note = a.history.filter(h => h.type == 'note').pop();this.$store.dispatch('alerts/deleteNote', [a.id, note.id])})).then(() => {
+          this.clearSelected()
+          this.$store.dispatch('alerts/getAlerts')
+        })
+    },
     bulkDeleteAlert() {
       confirm(i18n.t('ConfirmDelete')) &&
         Promise.all(this.selected.map(a => this.$store.dispatch('alerts/deleteAlert', a.id, false))).then(() => {

diff --git a/src/components/HistoryList.vue b/src/components/HistoryList.vue
@@ -154,11 +154,6 @@
             </span>
             <!-- trendIndication not supported -->
             <!-- only history supported is most recent note -->
-            <span
-              v-if="col == 'note'"
-            >
-              {{ lastNote(props.item) }}
-            </span>
           </td>
         </tr>
       </template>
@@ -201,7 +196,8 @@ export default {
       'receiveTime',
       'duration',
       'lastReceiveId',
-      'lastReceiveTime'
+      'lastReceiveTime',
+      'note'
     ],
     allowedHeaders: [
       'attributes',
@@ -243,7 +239,6 @@ export default {
       timeout: { text: i18n.t('Timeout'), value: 'timeout', sortable: false  },
       timeoutLeft: { text: i18n.t('TimeoutLeft'), value: 'timeoutLeft', sortable: false  },
       customer: { text: i18n.t('Customer'), value: 'customer', sortable: false  },
-      note: { text: i18n.t('LastNote'), value: 'note', sortable: false }
     },
     details: false,
     timer: null
@@ -319,10 +314,6 @@ export default {
       let expireTime = moment(lastModified).add(item.timeout, 'seconds')
       return expireTime.isAfter() ? expireTime.diff(moment(), 'seconds') : moment.duration()
     },
-    lastNote(item) {
-      const note = item.history.filter(h => h.type == 'note' || h.type == 'dismiss').pop()
-      return note && note.type == 'note' ? note.text : ''
-    },
     valueWidth() {
       return this.$store.getters.getPreference('valueWidth')
     },