Profile Toolbar, Single App

Creates a single app which manages multiple toolbars, one for each profile.

by Rob Cameron

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/x-template" id="profile-toolbar">
  <div class="profile-toolbar">
    <ul>
      <li>Following: {{ isFollowing }}</li>
      <li>Favorite: {{ isFavorited }}</li>
      <li>Lists: {{ isListed }}</li>
      <li>VouchedFor: {{ isVouchedFor }}</li>
      <li>HasNote: {{ hasNote }}</li>
    </ul>

    <button v-bind:data-username="profile.username" data-behavior="toggle-vouch">
      <span v-if="isVouchedFor">Remove Vouch</span>
      <span v-else>Add Vouch</span>
    </button>
    <button v-bind:data-username="profile.username" data-behavior="toggle-follow">
      <span v-if="isFollowing">Unfollow</span>
      <span v-else>Follow</span>
    </button>
  </div>
</script>

<div id="profiles">
  <div class="profile" data-id="1" data-username="rob" data-following="1,2,3" data-favorites="1,3,5" data-lists="4,5,6" data-vouches="7,8,9" data-notes="1,5,9">
    <h1>Rob</h1>
    <profile-toolbar
      v-bind:profile="profiles['rob']"
      v-bind:key="profiles['rob'].id"></profile-toolbar>
  </div>
  
  <div class="profile" data-id="2" data-username="joel" data-following="2,3" data-favorites="3,5" data-lists="4,5,6" data-vouches="1,8,9" data-notes="5,9">
    <h1>Joel</h1>
    <profile-toolbar
      v-bind:profile="profiles['joel']"
      v-bind:key="profiles['joel'].id"></profile-toolbar>
  </div>
</div>

CSS

body {
  font-family: 'Helvetica Neue', sans-serif;
}
h1 {
  margin: 0;
  padding: 0;
}
ul {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}
.profile {
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 1em;
  margin: 1em;
}

JavaScript

// id of the user viewing this page
var userId = 1;

// Helper method that turns the data attributes of the profile 
// into an array of integers (by default they'll be an array 
// of strings)
var attributeToData = function($profile, name) {
	return $profile.data(name).toString().split(',').map(function(id) {
  	return parseInt(id);
  });
};




// build data structure for Vue
var profilesData = {};

$.map($('.profile'), function(profile) {
	var $profile = $(profile);
  profilesData[$profile.data('username')] = {
    id: $profile.data('id'),
    username: $profile.data('username'),
    following: attributeToData($profile, 'following'),
    favorites: attributeToData($profile, 'favorites'),
    lists: attributeToData($profile, 'lists'),
    vouches: attributeToData($profile, 'vouches'),
    notes: attributeToData($profile, 'notes')
  };
});



// profile-toolbar is a Vue component with its own template
Vue.component('profile-toolbar', {
	template: '#profile-toolbar',
  props: ['profile'],
  computed: {
    isFollowing: function() {
      return this.profile.following.indexOf(userId) != -1;
    },
    isFavorited: function() {
      return this.profile.favorites.indexOf(userId) != -1;
    },
    isListed: function() {
      return this.profile.lists.indexOf(userId) != -1;
    },
    isVouchedFor: function() {
      return this.profile.vouches.indexOf(userId) != -1;
    },
    hasNote: function() {
      return this.profile.notes.indexOf(userId) != -1;
    }
  }
});

// actual Vue app
var app = new Vue({
  el: '#profiles',
  data: {
  	profiles: profilesData
  }
});



// Event handling (clicking follow/vouch buttons)

// user vouches and the data structure is updated. response is the entire vouches structure so we just replace it.
var toggleVouch = function(e) {
	var $el = $(e.currentTarget),
    username = $el.data('username');

	$.post('/echo/json/', {
    json:JSON.stringify({
    	// toggles adding and removing 1 from the list of IDs
      vouches:...