vue

vue.js

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'
import VueResource from 'vue-resource'
Vue.use(VueResource)

document.addEventListener('turbolinks:load', () => {
  Vue.http.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

  var Profiles = Vue.extend({
    mixins: [TurbolinksAdapter],
    data: function() {
      return {
        queryTags: [],
        alertMessage: '',
        profiles: this.initData(''),
        showProfiles: true,
        defaultTags: [],
        fullList: true
      }
    },
    methods: {
      fetchData: function(taglist) {
        var getUrl = ''
        if (taglist.length) {
           getUrl = '/profiles?tag=' + this.queryTags
        } else {
           getUrl = '/profiles/'
        }
        this.$http.get(getUrl).then((response) => {
          this.profiles = response.body.profiles
        });
      },
      initData: function() {
        this.$http.get('/profiles/').then((response) => {
          this.profiles = response.body.profiles
          this.defaultTags = response.body.tags
        });
      },
      sortWithTag: function(tag) {
        if (this.queryTags.includes(tag)) {
          let index = this.queryTags.indexOf(tag)
          this.queryTags.splice(index, 1)
        } else {
          this.queryTags.push(tag)
        }
        this.fetchData(this.queryTags)
      }
    }
  })

  var indexBox = document.getElementById('index-box')
  if (indexBox != null) {
    var app = new Profiles({
      el: indexBox
    })
  }

  var profileForm = document.getElementById('admin-box')
  if (profileForm != null) {

    var app = new Profiles({
      el: profileForm,
      data: function() {
        return {
          profile: { id: null, name: null, bio: null, url: null, screen_name: null, taglist: [] },
          url: '',
          showPreview: false
        }
      },
      methods: {
        addProfile: function() {
          this.$http.post('/admin/create', { profile: this.profile }).then((response) => {
            if (response.status == 200) {
              this.profiles.push(response.body)
              this.showPreview = false
              this.showProfiles = true
              this.url = ''
            } else {
              this.alertMessage = "something it's wrong!"
            }
          });
        },
        removeProfile: function(index, profile) {
          this.$http.delete('/admin/destroy/' + profile.id ).then((response) => {
            if (response.status == 200) {
              this.profiles.splice(index, 1);
            } else {
              this.alertMessage = "something it's wrong!"
            }
          });
        },
        addUrl: function() {
          this.alertMessage = ''
          this.$http.get('admin/get_details', { params: {url: this.url} }).then((response) => {
            if (response.body.status == '200') {
              this.profile.bio = response.body.description
              this.profile.name = response.body.name
              this.profile.screen_name = response.body.screen_name
              this.profile.url = response.body.url
              this.profile.image = response.body.image
              this.profile.taglist = []
              this.showPreview = true
              this.showProfiles = false
            } else {
              this.alertMessage = response.body.statusText
              this.showPreview = true
              this.showProfiles = false
            }
          });
        },
        selectTag: function(tag) {
          if (this.profile.taglist.includes(tag)) {
            let index = this.profile.taglist.indexOf(tag)
            this.profile.taglist.splice(index, 1)
          } else {
            this.profile.taglist.push(tag)
          }
        },
        checkClassTag: function(tag) {
          if (this.profile.taglist.includes(tag)) {
            return 'checked'
          }
        }
      }
    })
  }
})