BookStack Code Mirror - bookstack/blob - resources/assets/js/vues/tag-manager.js

   1 const draggable = require('vuedraggable');
   2 const autosuggest = require('./components/autosuggest');
   3
   4 let data = {
   5     pageId: false,
   6     tags: [],
   7 };
   8
   9 const components = {draggable, autosuggest};
  10 const directives = {};
  11
  12 let computed = {};
  13
  14 let methods = {
  15
  16     addEmptyTag() {
  17         this.tags.push({name: '', value: '', key: Math.random().toString(36).substring(7)});
  18     },
  19
  20     /**
  21      * When an tag changes check if another empty editable field needs to be added onto the end.
  22      * @param tag
  23      */
  24     tagChange(tag) {
  25         let tagPos = this.tags.indexOf(tag);
  26         if (tagPos === this.tags.length-1 && (tag.name !== '' || tag.value !== '')) this.addEmptyTag();
  27     },
  28
  29     /**
  30      * When an tag field loses focus check the tag to see if its
  31      * empty and therefore could be removed from the list.
  32      * @param tag
  33      */
  34     tagBlur(tag) {
  35         let isLast = (this.tags.indexOf(tag) === this.tags.length-1);
  36         if (tag.name !== '' || tag.value !== '' || isLast) return;
  37         let cPos = this.tags.indexOf(tag);
  38         this.tags.splice(cPos, 1);
  39     },
  40
  41     removeTag(tag) {
  42         let tagPos = this.tags.indexOf(tag);
  43         if (tagPos === -1) return;
  44         this.tags.splice(tagPos, 1);
  45     },
  46
  47     getTagFieldName(index, key) {
  48         return `tags[${index}][${key}]`;
  49     },
  50 };
  51
  52 function mounted() {
  53     this.pageId = Number(this.$el.getAttribute('page-id'));
  54
  55     let url = window.baseUrl(`/ajax/tags/get/page/${this.pageId}`);
  56     this.$http.get(url).then(response => {
  57         let tags = response.data;
  58         for (let i = 0, len = tags.length; i < len; i++) {
  59             tags[i].key = Math.random().toString(36).substring(7);
  60         }
  61         this.tags = tags;
  62         this.addEmptyTag();
  63     });
  64 }
  65
  66 module.exports = {
  67     data, computed, methods, mounted, components, directives
  68 };