1 files changed, 126 insertions, 0 deletions
diff --git a/client/components/cards/labels.js b/client/components/cards/labels.js
new file mode 100644
index 00000000..36a35f82
--- /dev/null
+++ b/client/components/cards/labels.js
@@ -0,0 +1,126 @@
+Template.cardLabelsPopup.events({
+  'click .js-select-label': function(evt) {
+    var cardId = Template.parentData(2).data._id;
+    var labelId = this._id;
+    var operation;
+    if (Cards.find({ _id: cardId, labelIds: labelId}).count() === 0)
+      operation = '$addToSet';
+    else
+      operation = '$pull';
+
+    var query = {};
+    query[operation] = {
+      labelIds: labelId
+    };
+    Cards.update(cardId, query);
+    evt.preventDefault();
+  },
+  'click .js-edit-label': Popup.open('editLabel'),
+  'click .js-add-label': Popup.open('createLabel')
+});
+
+Template.formLabel.events({
+  'click .js-palette-color': function(evt) {
+    var $this = $(evt.currentTarget);
+
+    // hide selected ll colors
+    $('.js-palette-select').addClass('hide');
+
+    // show select color
+    $this.find('.js-palette-select').removeClass('hide');
+  }
+});
+
+Template.createLabelPopup.events({
+  // Create the new label
+  'submit .create-label': function(evt, tpl) {
+    var name = tpl.$('#labelName').val().trim();
+    var boardId = Session.get('currentBoard');
+    var selectLabelDom = tpl.$('.js-palette-select').get(0);
+    var selectLabel = Blaze.getData(selectLabelDom);
+    Boards.update(boardId, {
+      $push: {
+        labels: {
+          _id: Random.id(6),
+          name: name,
+          color: selectLabel.color
+        }
+      }
+    });
+    Popup.back();
+    evt.preventDefault();
+  }
+});
+
+Template.editLabelPopup.events({
+  'click .js-delete-label': Popup.afterConfirm('deleteLabel', function() {
+    var boardId = Session.get('currentBoard');
+    Boards.update(boardId, {
+      $pull: {
+        labels: {
+          _id: this._id
+        }
+      }
+    });
+    Popup.back(2);
+  }),
+  'submit .edit-label': function(evt, tpl) {
+    var name = tpl.$('#labelName').val().trim();
+    var boardId = Session.get('currentBoard');
+    var getLabel = Utils.getLabelIndex(boardId, this._id);
+    var selectLabelDom = tpl.$('.js-palette-select').get(0);
+    var selectLabel = Blaze.getData(selectLabelDom);
+    var $set = {};
+
+    // set label index
+    $set[getLabel.key('name')] = name;
+
+    // set color
+    $set[getLabel.key('color')] = selectLabel.color;
+
+    // update
+    Boards.update(boardId, { $set: $set });
+
+    // return to the previous popup view trigger
+    Popup.back();
+
+    evt.preventDefault();
+  },
+  'click .js-select-label': function() {
+    Cards.remove(this.cardId);
+
+    // redirect board
+    Utils.goBoardId(this.boardId);
+  }
+});
+
+Template.cardLabelsPopup.helpers({
+  isLabelSelected: function(cardId) {
+    return _.contains(Cards.findOne(cardId).labelIds, this._id);
+  }
+});
+
+var labelColors;
+Meteor.startup(function() {
+  labelColors = Boards.simpleSchema()._schema['labels.$.color'].allowedValues;
+});
+
+Template.createLabelPopup.helpers({
+  // This is the default color for a new label. We search the first color that
+  // is not already used in the board (although it's not a problem if two
+  // labels have the same color).
+  defaultColor: function() {
+    var labels = this.labels || this.card.board().labels;
+    var usedColors = _.pluck(labels, 'color');
+    var availableColors = _.difference(labelColors, usedColors);
+    return availableColors.length > 1 ? availableColors[0] : labelColors[0];
+  }
+});
+
+Template.formLabel.helpers({
+  labels: function() {
+    return _.map(labelColors, function(color) {
+      return { color: color, name: '' };
+    });
+  }
+});