Created a UI for editting a media's metadata. Had to add a new macro to

wtforms.html in the process.

mediagoblin/edit/forms.py

@@ -124,12 +124,13 @@ class ChangeEmailForm(wtforms.Form):
             "Enter your password to prove you own this account."))
 
 class MetaDataForm(wtforms.Form):
-    identifier = wtforms.TextField(
+    identifier = wtforms.TextField('')
-        _(u'Id'))
+    value = wtforms.TextField('')
-    value = wtforms.TextField(
-        _(u'Value'))
 
 class EditMetaDataForm(wtforms.Form):
     media_metadata = wtforms.FieldList(
-        wtforms.FormField(MetaDataForm)
+        wtforms.FormField(MetaDataForm, label="")
+    )
+    context = wtforms.FieldList(
+        wtforms.FormField(MetaDataForm, label="")
     )

mediagoblin/edit/views.py

@@ -439,7 +439,22 @@ def change_email(request):
 @get_media_entry_by_id
 def edit_metadata(request, media):
     form = forms.EditMetaDataForm()
+    if media.media_metadata:
+        for row in media.media_metadata.iteritems():
+            if row[0] == "@context": continue
+            identifier = row[0]
+            # TODO Will change when we revert the metadata branch
+            value = row[1]['@value']
+            form.media_metadata.append_entry({
+                'identifier':identifier,
+                'value':value})
+        for row in media.media_metadata['@context'].iteritems():
+            identifier, value = row[0:2]
+            form.context.append_entry({
+                'identifier':identifier,
+                'value':value})
     return render_to_response(
         request,
         'mediagoblin/edit/metadata.html',
-        {'form':form})
+        {'form':form,
+         'media':media})

mediagoblin/static/css/base.css

@@ -938,3 +938,17 @@ p.verifier {
     none repeat scroll 0% 0% rgb(221, 221, 221);
     padding: 1em 0px;
 }
+
+/* for the media metadata editing table */
+table.metadata_editor {
+
+    margin: 10px auto;
+    width: 800px;
+}
+
+table.metadata_editor tr td {
+    width:350px;
+}
+table.metadata_editor tr td input.form_field_input {
+    width: 300px
+}

mediagoblin/templates/mediagoblin/edit/metadata.html

@@ -17,7 +17,113 @@
 #}
 {%- extends "mediagoblin/base.html" %}
 {% import "/mediagoblin/utils/wtforms.html" as wtforms_util %}
+{% block mediagoblin_head %}
+  <script>
+    function add_new_row(table_id, row_number, input_prefix) {
+        new_row = $('<tr>').append(
+                      $('<td>').attr(
+                      'class','form_field_input').append(
+                          $('<input>').attr('name',
+                          input_prefix + row_number + "-identifier").attr('id',
+                          input_prefix + row_number + "-identifier")
+                      )
+                  ).append(
+                      $('<td>').attr(
+                      'class','form_field_input').append(
+                          $('<input>').attr('name',
+                          input_prefix + row_number + "-value").attr('id',
+                          input_prefix + row_number + "-value")
+                      )
+                  );
+        $(table_id).append(new_row);
+    }
+    function clear_empty_rows(list_id) {
+        $('table'+list_id+' tr').each(function(row){
+            id_input = $(this).find('td').find('input');
+            value_input = $(this).find('td').next().find('input');
+            if ((value_input.attr('value') == "") && 
+                    (id_input.attr('value') == "")) {
+                $(this).remove();
+            }
+        })
+    }
 
+    $(document).ready(function(){
+        var context_lines = {{ form.context | length }};
+        var metadata_lines = {{ form.media_metadata | length }};
+        $("#add_new_metadata_row").click(function(){
+            add_new_row("#metadata_list", 
+                        metadata_lines,
+                        'media_metadata-');
+            metadata_lines += 1;
+        })
+        $("#add_new_context_row").click(function(){
+            add_new_row("#context_list", 
+                        context_lines,
+                        'context-');
+            context_lines += 1;
+        })
+        $("#clear_empty_rows").click(function(){
+            clear_empty_rows("#context_list");
+            clear_empty_rows("#metadata_list");
+        })
+    })
+  </script>
+{% endblock %}
 {% block mediagoblin_content %}
-  {{ wtforms_util.render_divs(form) }}
+  <h2>{% trans media_name=media.title -%}
+    Metadata for "{{ media_name }}"{% endtrans %}</h2>
+  <form action="" method="POST" id="metadata_form">
+<!-- This table holds all the information about the metadata's context.
+     visit http:/wwww.json-ld.org for more information. -->
+  <h3>{% trans %}Context{% endtrans %}</h3>
+  <table class="metadata_editor" id="context_list">
+    <tr>
+      <td><a class="strong highlight">
+        {% trans %}Identifier{% endtrans %}</a></td>
+      <td><a class="strong highlight">{% trans %}Value{% endtrans %}</a></td>
+    </tr>
+  {% for miniform in form.context -%}
+    {{ wtforms_util.render_table_row(miniform) }}
+  {% endfor -%}
+  </table>
+
+  <table class="metadata_editor" id="buttons_top">
+    <tr>
+      <td><input type=button value="{% trans %}Add new Row{% endtrans %}"
+        class="button_action" id="add_new_context_row" /></td>
+      <td></td>
+    </tr>
+  </table>
+
+<!-- This table holds all the information about the media entry's metadata -->
+  <h3>{% trans %}Data{% endtrans %}</h3>
+  <table class="metadata_editor" id="metadata_list" >
+    <tr>
+      <td><a class="strong highlight">
+        {% trans %}Identifier{% endtrans %}</a></td>
+      <td><a class="strong highlight">{% trans %}Value{% endtrans %}</a></td>
+    </tr>
+  {% for miniform in form.media_metadata -%}
+    {{ wtforms_util.render_table_row(miniform) }}
+  {% endfor -%}
+  </table>
+
+<!-- These are the buttons you use to control the form -->
+  <table class="metadata_editor" id="buttons_bottom">
+    <tr>
+      <td><input type=button value="{% trans %}Add new Row{% endtrans %}"
+        class="button_action" id="add_new_metadata_row" />
+      </td>
+      <td><input type=submit value="{% trans %}Update Metadata{% endtrans %}" 
+        class="button_action_highlight" /></td>
+    </tr>
+    <tr>
+      <td><input type=button value="{% trans %}Clear empty Rows{% endtrans %}"
+        class="button_action" id="clear_empty_rows" /></td>
+    </tr>
+  </table>
+  {{ csrf_token }}
+  </form>
+  
 {% endblock mediagoblin_content %}

mediagoblin/templates/mediagoblin/utils/metadata_table.html

@@ -33,4 +33,10 @@
         {%- endfor %}
       </table>
   {% endif %}
+  {% if request.user and request.user.has_privilege('admin') %}
+      <a href="{{ request.urlgen('mediagoblin.edit.metadata',
+                    user=media_entry.get_uploader.username,
+                    media_id=media_entry.id) }}">
+        {% trans %}Edit Metadata{% endtrans %}</a>
+  {% endif %}
 {%- endmacro %}

mediagoblin/templates/mediagoblin/utils/wtforms.html

@@ -87,6 +87,24 @@
   {% endfor %}
 {%- endmacro %}
 
+{% macro render_table_row(form) %}
+  <tr>
+  {%- for field in form %}
+    <td class="form_field_input">
+      {{field}}
+      {%- if field.errors -%}
+        <br />
+        <ul class="errors">
+          {% for error in field.errors %}
+            <li>{{error}}</li>
+          {%- endfor %}
+        </ul>
+      {%- endif -%}
+    </td>
+  {%- endfor %}
+  </tr>
+{%- endmacro %}
+
 {# Render a boolean field #}
 {% macro render_bool(field) %}
   <div class="boolean">