allow applying a note to multiple alerts at once

src/App.vue

@@ -309,6 +309,19 @@
           <span>{{ $t('Ack') }}</span>
         </v-tooltip>
 
+        <v-tooltip bottom>
+          <v-btn
+            slot="activator"
+            icon
+            class="btn--plain"
+            @click="showAddNoteForm = !showAddNoteForm"
+          >
+            <v-icon>
+              notes
+            </v-icon>
+          </v-btn>
+          <span>{{ $t('Notes') }}</span>
+        </v-tooltip>
         <v-tooltip bottom>
           <v-btn
             slot="activator"
@@ -462,6 +475,31 @@
           </v-btn>
         </span>
       </v-toolbar>
+      <v-container
+        v-if="showAddNoteForm"
+        class="pa-1"
+        fluid
+      >
+        <v-layout>
+          <v-flex>
+            <v-card>
+              <v-card-text>
+                <v-text-field
+                  v-model.trim="text"
+                  :counter="maxNoteLength"
+                  :maxlength="maxNoteLength"
+                  :minlength="minNoteLength"
+                  :rules="textRules"
+                  :label="$t('AddNote')"
+                  prepend-icon="edit"
+                  required
+                  @keydown.enter="bulkAddNotes()"
+                />
+              </v-card-text>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-container>
     </div>
 
     <v-content>
@@ -513,7 +551,16 @@ export default {
     Snackbar
   },
   props: [],
-  data: () => ({
+  data: vm => ({
+    showAddNoteForm: false,
+    text: '',
+    valid: true,
+    maxNoteLength: 200,
+    minNoteLength: 0,
+    textRules: [
+      v => !!v || i18n.t('TextIsRequired'),
+      v => (v && v.length <= vm.maxNoteLength) || `${i18n.t('TextMustBeLessThan')} ${vm.maxNoteLength} ${i18n.t('characters')}`
+    ],
     hasFocus: false,
     menu: false,
     message: false,
@@ -764,6 +811,13 @@ export default {
       })
         .reduce(() => this.clearSelected())
     },
+    bulkAddNotes() {
+      Promise.all(this.selected.map(a => this.$store.dispatch('alerts/addNote', [a.id, this.text]))).then(() => {
+        this.showAddNoteForm = false
+        this.clearSelected()
+        this.text=''
+      })
+    },
     bulkShelveAlert() {
       Promise.all(this.selected.map(a => {
         this.$store

src/locales/de.js

@@ -70,6 +70,7 @@ export const de = {
   Unshelve: 'Unshelve',
   Close: 'Schließen',
   Watch: 'Beobachten',
+  Notes: 'Notities',
   Unwatch: 'Nicht beobachten',
   AddNote: 'Notiz hinzufügen',
   Delete: 'Löschen',

src/locales/en.js

@@ -70,6 +70,7 @@ export const en = {
   Unshelve: 'Unshelve',
   Close: 'Close',
   Watch: 'Watch',
+  Notes: 'Notes',
   Unwatch: 'Unwatch',
   AddNote: 'Add note',
   Delete: 'Delete',

src/locales/fr.js

@@ -70,6 +70,7 @@ export const fr = {
   Unshelve: 'Unshelve',
   Close: 'Close', //'Fermé',
   Watch: 'Watch', //'Surveiller',
+  Notes: 'Notes', // 'Remarques'
   Unwatch: 'Unwatch', //'Ne plus surveiller',
   AddNote: 'Add note', //'Ajouter Note',
   Delete: 'Delete', //'Supprimer',

src/locales/tr.js

@@ -70,6 +70,7 @@ export const tr = {
   Unshelve: 'Raftan kaldır',
   Close: 'Kapat',
   Watch: 'İzle',
+  Notes: 'Notlar',
   Unwatch: 'İzleme kaldır',
   AddNote: 'Not ekle',
   Delete: 'Sil',