Implemented tags in match editing forms

coffee/forms.coffee

@@ -37,3 +37,46 @@ $ ->
     $('tr').on 'click', ->
         href = $(this).data('href')
         document.location = href if href?
+
+    $('.tags-control').each ->
+        container = $(@)
+        tag_list = container.children('.tags')
+        text_input = container.find('input[type=text]')
+        submit_btn =  text_input.next().find('.btn')
+
+        generate_inputs = ->
+            container.children('input[type=hidden]').remove()
+            container.find('.tag .text').each ->
+                $('<input type="hidden" name="tags[]">')
+                    .appendTo(container)
+                    .val($(@).text())
+
+        submit_tag = ->
+            tag = text_input.val().trim()
+
+            if tag == ''
+                return
+
+            text_input.val('')
+
+            link = $('<a href="javascript:void(0)" class="tag"
+                         title="Click to remove tag">').appendTo(tag_list)
+            $('<span class="label label-default">')
+                .append($('<span class="text">').text(tag))
+                .append(' ')
+                .append($('<span class="glyphicon glyphicon-remove">'))
+                .appendTo(link)
+
+            generate_inputs()
+            text_input.focus()
+
+        text_input.on 'keydown', (e) ->
+            if e.which == 13
+                e.preventDefault()
+                submit_tag()
+
+        submit_btn.on 'click', submit_tag
+
+        container.on 'click', '.tag', ->
+            $(@).remove()
+            generate_inputs()

routes/match.php

@@ -147,7 +147,8 @@ function edit_form($match) {
     $form->setAction("match/{$match->id}");
     $form->addHidden('_METHOD', 'PUT');
 
-    $created_at = preg_replace('/^(\d{4}-\d{1,2}-\d{1,2})[T ](\d{1,2}:\d{1,2}):00$/', '\1T\2', $match->created_at);
+    $created_at = preg_replace('/^(\d{4}-\d{1,2}-\d{1,2})[T ](\d{1,2}:\d{1,2}):\d{1,2}$/',
+                               '\1T\2', $match->created_at);
 
     $form['name']->setDefaultValue($match->name);
     $form['created_at']->setDefaultValue($created_at);
@@ -160,6 +161,18 @@ function edit_form($match) {
     return $form;
 }
 
+function create_tag($match, $tagname) {
+    global $db;
+
+    // Need to catch the "unknown column tag.id" error because
+    // primary key fetching is bugged
+    try {
+        $db->table('tag')->insert(array(
+            'name' => $tagname,
+            'match_id' => $match->id
+        ));
+    } catch(PDOException $e) {}
+}
 
 $app->get('/matches', function ($filter=null) use ($app, $db, $user) {
     $matches = $db->table('match')
@@ -181,9 +194,6 @@ $app->get('/matches', function ($filter=null) use ($app, $db, $user) {
 
         if ($values->name)
             $matches->where('name LIKE ?', "%$values->name%");
-
-        //foreach ($filter_form->getValues() as $prop => $value) {
-        //$matches = $matches->where($filter_form->getValues();
     }
 
     $app->render('match/list', compact('matches', 'filter_form'));
@@ -201,11 +211,18 @@ $app->post('/match', function () use ($app, $db, $user) {
 
     if (!$form->hasErrors()) {
         $values = $form->getValues();
+
         $values->created_at = str_replace('T', ' ', $values->created_at) . ':00';
         $values->scores = pack_scores(array_fill(0, $values->turns * $values->arrows, 0));
         $values->user_id = $user->getId();
 
         $match = $db->table('match')->insert($values);
+
+        if (isset($_POST['tags'])) {
+            foreach (array_unique($_POST['tags']) as $tagname)
+                create_tag($match, $tagname);
+        }
+
         $app->redirect(ROOT_URL . "/match/{$match->id}/scores");
     }
 
@@ -231,7 +248,7 @@ $app->get('/match/:id/edit', function ($id) use ($app) {
    $app->render('match/edit', compact('form', 'match'));
 });
 
-$app->put('/match/:id', function ($id) use ($app) {
+$app->put('/match/:id', function ($id) use ($app, $db) {
     function zeropad($array, $size) {
         return array_pad(array_slice($array, 0, $size), $size, 0);
     }
@@ -265,6 +282,18 @@ $app->put('/match/:id', function ($id) use ($app) {
         }
 
         $match->update($update);
+
+        $tagnames = isset($_POST['tags']) ? $_POST['tags'] : array();
+        $old_tags = $match->related('tag');
+        $old_tagnames = $old_tags->fetchPairs(null, 'name');
+        $add = array_diff($tagnames, $old_tagnames);
+        $remove = array_values(array_diff($old_tagnames, $tagnames));
+
+        $db->table('tag')->where('name', $remove)->delete();
+
+        foreach ($add as $tagname)
+            create_tag($match, $tagname);
+
         $app->redirect(ROOT_URL . "/match/{$match->id}");
     }
 

sass/main.sass

@@ -80,5 +80,13 @@ $xs-width: 768px
       .text
         display: none
 
-.tags span
+.tags .label
   margin-right: 4px
+  font-size: 12px
+
+form .tags .tag
+  display: inline-block
+  margin-top: 12px
+
+a.tag
+  text-decoration: none

templates/match/create.latte

@@ -5,6 +5,20 @@
 {form $form}
     {form errors}
     {form controls}
+    <div class="form-group">
+        <label class="control-label col-sm-2" for="frm-tags">Tags</label>
+        <div class="form-actions col-sm-10 tags-control">
+            <div class="input-group">
+                <input type="text" id="frm-tags" class="form-control" placeholder="Add tag">
+                <span class="input-group-btn">
+                    <a class="btn btn-default" title="Add tag">
+                        <span class="glyphicon glyphicon-plus"></span>
+                    </a>
+                </span>
+            </div>
+            <div class="tags"></div>
+        </div>
+    </div>
     <div class="form-group">
         <div class="form-actions col-sm-offset-2 col-sm-10">
             <div class="btn-group actions">

templates/match/edit.latte

 {extends '../layout.latte'}
 
+{var $tags = $match->related('tag')}
+
 {block content}
 <h2 class="page-header">{$match->name}</h2>
 {form $form}
     {form errors}
     {form controls}
+    <div class="form-group">
+        <label class="control-label col-sm-2" for="frm-tags">Tags</label>
+        <div class="form-actions col-sm-10 tags-control">
+            <div class="input-group">
+                <input type="text" id="frm-tags" class="form-control" placeholder="Add tag">
+                <span class="input-group-btn">
+                    <a class="btn btn-default" title="Add tag">
+                        <span class="glyphicon glyphicon-plus"></span>
+                    </a>
+                </span>
+            </div>
+            <div class="tags">
+                <a n:foreach="$tags as $tag" href="javascript:void(0)"
+                        class="tag" title="Click to remove tag">
+                    <span class="label label-default">
+                        <span class="text">{$tag->name}</span>
+                        <span class="glyphicon glyphicon-remove"></span>
+                    </span>
+                </a>
+            </div>
+            <input n:foreach="$tags as $tag" type="hidden" name="tags[]" value="{$tag->name}">
+        </div>
+    </div>
     <div class="form-group">
         <div class="form-actions col-sm-offset-2 col-sm-10">
             <div class="btn-group actions">

templates/match/view.latte

@@ -14,7 +14,7 @@
 </p>
 <p n:if="$tags->count()" class="tags">
     <strong>Tags:</strong>
-    <a n:foreach="$tags as $tag" href="match?tag={$tag->name}">
+    <a n:foreach="$tags as $tag" href="matches?tag={$tag->name}" class="tag">
         <span class="label label-primary">{$tag->name}</span>
     </a>
 </p>