Adressed PR comment's

This commit is contained in:
Nicolas Le Goff
2013-05-13 09:52:23 +02:00
committed by Romain Neutron
parent 18b7f6d65a
commit 8a59f0070d
11 changed files with 147 additions and 162 deletions

View File

@@ -146,7 +146,7 @@ class Fields implements ControllerProviderInterface
continue; continue;
} }
$res[$tagname] = array( $res[] = array(
'id' => $namespace . '/' . $tagname, 'id' => $namespace . '/' . $tagname,
'label' => $datas['namespace'] . ' / ' . $datas['tagname'], 'label' => $datas['namespace'] . ' / ' . $datas['tagname'],
'value' => $datas['namespace'] . ':' . $datas['tagname'], 'value' => $datas['namespace'] . ':' . $datas['tagname'],
@@ -155,8 +155,6 @@ class Fields implements ControllerProviderInterface
} }
} }
ksort($res);
return $app->json($res); return $app->json($res);
} }

View File

@@ -1,6 +1,3 @@
{# empty Twig template #}
<script type="text/javascript" src="/assets/i18n/i18next-1.6.0.min.js"></script>
{% include 'admin/fields/templates.html.twig' %} {% include 'admin/fields/templates.html.twig' %}
<div id="admin-field-app" class="container-fluid"> <div id="admin-field-app" class="container-fluid">
@@ -14,14 +11,10 @@
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="left-block span4"> <div class="left-block span4"></div>
<div class="right-block span8" style="border-left: 1px dashed #000"></div>
</div>
<div class="right-block span8" style="border-left: 1px dashed #000">
</div>
</div> </div>
</div> </div>
{# bootstrap admin field application #}
<script src="/assets/requirejs/require.js"></script> <script src="/assets/requirejs/require.js"></script>
<script src="/scripts/apps/admin/fields/main.js"></script> <script src="/scripts/apps/admin/fields/main.js"></script>

View File

@@ -14,17 +14,14 @@
</script> </script>
<script type="text/template" id="item_list_view_template"> <script type="text/template" id="item_list_view_template">
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<div class="sidebar-block">
<div style="margin:20px 0">
<button type="button" class="btn btn-success btn-add-field"><i class="icon-plus icon-white"></i>{% trans %}Add new field{% endtrans %}</button> <button type="button" class="btn btn-success btn-add-field"><i class="icon-plus icon-white"></i>{% trans %}Add new field{% endtrans %}</button>
</div> </div>
<div class="sidebar-block">
<div style="margin:20px 0">
<input class="input-block-level" type="text" id="live_search" placeholder="{% trans %}Live search{% endtrans %}"/> <input class="input-block-level" type="text" id="live_search" placeholder="{% trans %}Live search{% endtrans %}"/>
</div> </div>
<div class="well well-small add-field-block" style="display:none"> <div class="well well-small add-field-block" style="display:none">
<h3>{% trans %}Add a new field{% endtrans %}</h3> <h3>{% trans %}Add a new field{% endtrans %}</h3>
<form class="form-horizontal"> <form class="form-horizontal">
@@ -53,27 +50,26 @@
</form> </form>
</div> </div>
</div> </div>
</div>
<div class="row-fluid">
<div class="span12">
<ul id="collection-fields" class="unstyled" style="height:450px;overflow: auto;">
</ul>
</div> </div>
</div> <div class="row-fluid">
<div class="span12">
<ul id="collection-fields" class="unstyled"></ul>
</div>
</div>
</script> </script>
<script type="text/template" id="edit_template"> <script type="text/template" id="edit_template">
<div style="padding: 5px 20px"> <div class="edit-block">
<table> <table>
<tr style="height: 50px;"> <tr class="edit-order">
<td>{% trans %}Order{% endtrans %}:</td> <td>{% trans %}Order{% endtrans %}:</td>
<td><%= field.sorter %></td> <td><%= field.sorter %></td>
<td><button type="button" class="btn btn-danger delete-field pull-right"><i class="icon-trash icon-white"></i>delete</button></td> <td><button type="button" class="btn btn-danger delete-field pull-right"><i class="icon-trash icon-white"></i>delete</button></td>
</tr> </tr>
<tr style="height: 60px;"> <tr class="edit-name">
<td colspan="2"><input id="name" style="font-size:28px;color:#0080FF;height:42px;line-height:42px; font-weight:bold" value="<%= field.name %>" class="input-block-level"></td> <td colspan="2">
<input id="name" value="<%= field.name %>" class="input-block-level">
</td>
</tr> </tr>
<tr> <tr>
<td>{% trans %}Source{% endtrans %} : </td> <td>{% trans %}Source{% endtrans %} : </td>
@@ -94,16 +90,15 @@
</tr> </tr>
<% } %> <% } %>
</table> </table>
<div class="edit-form"> <div class="edit-form">
<h4 style="padding: 10px 0;">{% trans %}Advanced field parameter{% endtrans %}</h4> <h4>{% trans %}Advanced field parameter{% endtrans %}</h4>
<table> <table>
<tr> <tr>
<td><label for="">{% trans %}Thesaurus branch{% endtrans %}</label></td> <td><label for="tbranch">{% trans %}Thesaurus branch{% endtrans %}</label></td>
<td><input id="tbranch" type="text" value="<%= field.tbranch %>"/></td> <td><input id="tbranch" type="text" value="<%= field.tbranch %>"/></td>
</tr> </tr>
<tr> <tr>
<td><label for="">{% trans %}Vocabulary type{% endtrans %}</label></td> <td><label for="vocabulary-type">{% trans %}Vocabulary type{% endtrans %}</label></td>
<td> <td>
<select id="vocabulary-type" class="input-block-level"> <select id="vocabulary-type" class="input-block-level">
<% _.each(vocabularyTypes, function(vocab) { %> <% _.each(vocabularyTypes, function(vocab) { %>
@@ -113,7 +108,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td><label for="">{% trans %}Type{% endtrans %}</label></td> <td><label for="type">{% trans %}Type{% endtrans %}</label></td>
<td> <td>
<select id="type" class="input-block-level"> <select id="type" class="input-block-level">
<option value=""></option> <option value=""></option>
@@ -125,32 +120,32 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><label for="" class="checkbox"><input id="business" type="checkbox" <%= field.business ? "checked='checked'" : "" %> />{% trans %}Business Fields{% endtrans %}</label></td> <td colspan="2"><label for="business" class="checkbox"><input id="business" type="checkbox" <%= field.business ? "checked='checked'" : "" %> />{% trans %}Business Fields{% endtrans %}</label></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><label for="" class="checkbox"><input id="vocabulary-restricted" type="checkbox" <%= field["vocavulary-restricted"] ? "checked='checked'" : "" %> />{% trans %}Limited vocabulary{% endtrans %}</label></td> <td colspan="2"><label for="vocabulary-restricted" class="checkbox"><input id="vocabulary-restricted" type="checkbox" <%= field["vocavulary-restricted"] ? "checked='checked'" : "" %> />{% trans %}Limited vocabulary{% endtrans %}</label></td>
</tr> </tr>
<tr> <tr>
<td><label for="">{% trans %}Separator{% endtrans %}</label></td> <td><label for="separator">{% trans %}Separator{% endtrans %}</label></td>
<td><input id="separator" type="text" value="<%= field.separator %>" /></td> <td><input id="separator" type="text" value="<%= field.separator %>" /></td>
</tr> </tr>
</table> </table>
<h4 style="padding: 10px 0;">{% trans %}display & action settings{% endtrans %}</h4> <h4>{% trans %}display & action settings{% endtrans %}</h4>
<table> <table>
<tr> <tr>
<td colspan="2"><label for="" class="checkbox"><input id="required" type="checkbox" <%= field.required ? "checked='checked'" : "" %> />{% trans %}Mandatory{% endtrans %}</label></td> <td colspan="2"><label for="required" class="checkbox"><input id="required" type="checkbox" <%= field.required ? "checked='checked'" : "" %> />{% trans %}Mandatory{% endtrans %}</label></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><label for="" class="checkbox"><input id="indexable" type="checkbox" <%= field.indexable ? "checked='checked'" : "" %> />{% trans %}Indexable{% endtrans %}</label></td> <td colspan="2"><label for="indexable" class="checkbox"><input id="indexable" type="checkbox" <%= field.indexable ? "checked='checked'" : "" %> />{% trans %}Indexable{% endtrans %}</label></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><label for="" class="checkbox"><input id="readonly" type="checkbox" <%= field.readonly ? "checked='checked'" : "" %> />{% trans %}Read only{% endtrans %}</label></td> <td colspan="2"><label for="readonly" class="checkbox"><input id="readonly" type="checkbox" <%= field.readonly ? "checked='checked'" : "" %> />{% trans %}Read only{% endtrans %}</label></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><label for="" class="checkbox"><input id="report" type="checkbox" <%= field.report ? "checked='checked'" : "" %> />{% trans %}Report{% endtrans %}</label></td> <td colspan="2"><label for="report" class="checkbox"><input id="report" type="checkbox" <%= field.report ? "checked='checked'" : "" %> />{% trans %}Report{% endtrans %}</label></td>
</tr> </tr>
<tr> <tr>
<td><label for="">{% trans %}Display thumbnails{% endtrans %}</label></td> <td><label for="thumbtitle">{% trans %}Display thumbnails{% endtrans %}</label></td>
<td> <td>
<select id="thumbtitle" class="input-block-level"> <select id="thumbtitle" class="input-block-level">
<option value="1" <%= field.thumbtitle == "1" ? "selected" : "" %> >{% trans 'Tous' %}</option> <option value="1" <%= field.thumbtitle == "1" ? "selected" : "" %> >{% trans 'Tous' %}</option>
@@ -159,7 +154,7 @@
<option value="nl" <%= field.thumbtitle == "nl" ? "selected" : "" %> >{% trans 'Dutch' %}</option> <option value="nl" <%= field.thumbtitle == "nl" ? "selected" : "" %> >{% trans 'Dutch' %}</option>
<option value="de" <%= field.thumbtitle == "de" ? "selected" : "" %> >{% trans 'Allemand' %}</option> <option value="de" <%= field.thumbtitle == "de" ? "selected" : "" %> >{% trans 'Allemand' %}</option>
<option value="en" <%= field.thumbtitle == "en" ? "selected" : "" %> >{% trans 'Anglais' %}</option> <option value="en" <%= field.thumbtitle == "en" ? "selected" : "" %> >{% trans 'Anglais' %}</option>
<option value="ar" <%= field.thumbtitle == " r" ? "selected" : "" %> >{% trans 'Arabe' %}</option> <option value="ar" <%= field.thumbtitle == "ar" ? "selected" : "" %> >{% trans 'Arabe' %}</option>
</select> </select>
</td> </td>
</tr> </tr>
@@ -170,21 +165,21 @@
<script type="text/template" id="list_row_template"> <script type="text/template" id="list_row_template">
<table style="table-layout:fixed;width:100%;"> <table>
<tr> <tr>
<td class="handle" style="width: 10%; vertical-align:middle;text-align:center;cursor: move;"> <td class="handle">
<i class="icon-move"></i> <i class="icon-move"></i>
</td> </td>
<td rowspan="2" class="trigger-click" style="padding:10px"> <td rowspan="2" class="trigger-click">
<div class="field-name"><%= name %></div> <div class="field-name"><%= name %></div>
<div class="field-tag"><%= tag %></div> <div class="field-tag"><%= tag %></div>
</td> </td>
<td rowspan="2" class="trigger-click" style="width: 10%;padding:10px;"> <td rowspan="2" class="chip trigger-click">
<i class="icon-chevron-right"></i> <i class="icon-chevron-right"></i>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="position" style="width: 10%; vertical-align:bottom;text-align: center"> <td class="position">
<%= position %> <%= position %>
</td> </td>
</tr> </tr>

View File

@@ -7,7 +7,7 @@ require.config({
backbone: '../assets/backbone-amd/backbone', backbone: '../assets/backbone-amd/backbone',
twig: '../assets/twig/twig', twig: '../assets/twig/twig',
i18n: '../assets/i18n/i18next.amd', i18n: '../assets/i18n/i18next.amd',
bootstrap: ['//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min'] bootstrap: '../skins/html5/bootstrap/js/bootstrap.min'
}, },
shim: { shim: {
twig: { twig: {

View File

@@ -1,51 +0,0 @@
define([
'underscore',
'backbone',
'i18n'
], function( _, Backbone, i18n, bootstrap) {
var AddView = Backbone.View.extend({
tagName: "div",
className: "add-field-block",
style: "display:none;",
events: {
"click .btn-submit-field": "createAction"
},
initialize: function() {},
render: function() {
var template = _.template($("#alert_template").html(), {
msg: this.msg
});
this.$el.after(template);
return this;
},
createAction: function(event) {
var self = this;
var field = new FieldModel({
"name": "AA" + new Date().getUTCMilliseconds(),
"tag": "IPTC:ObjectName"
}, {
sbas_id: AdminFieldApp.sbas_id
});
field.save(null, {
success: function(field) {
self.collection.add(field);
_.last(self.itemViews).clickAction().animate();
new AlertView({alert: 'success', message: 'A new field has been created'}).render();
},
error: function() {
new AlertView({alert: 'error', message: 'Something wrong happened'}).render();
}
});
},
destroy: function() {
this.remove();
}
});
return AddView;
});

View File

@@ -7,7 +7,7 @@ define([
tagName: "div", tagName: "div",
className: "input-append", className: "input-append",
events: { events: {
"change select": "onChange" "change select": "selectChangedAction"
}, },
render: function() { render: function() {
var template = _.template($("#dc_fields_template").html(), { var template = _.template($("#dc_fields_template").html(), {
@@ -18,7 +18,7 @@ define([
return this; return this;
}, },
onChange: function(e) { selectChangedAction: function(e) {
var index = $(e.target)[0].selectedIndex; var index = $(e.target)[0].selectedIndex;
this.$el.closest('table').find('.dces-help-block').empty().append(this.collection.at(index).get('definition')); this.$el.closest('table').find('.dces-help-block').empty().append(this.collection.at(index).get('definition'));
} }
@@ -26,4 +26,3 @@ define([
return DcFieldsView; return DcFieldsView;
}); });

View File

@@ -11,8 +11,8 @@ define([
className: "field-edit", className: "field-edit",
initialize: function() { initialize: function() {
this.model.on('change', this.render, this); this.model.on('change', this.render, this);
this.model.on('change:name', this.onFieldChange, this); this.model.on('change:name', this.onModelFieldChange, this);
this.model.on('change:tag', this.onFieldChange, this); this.model.on('change:tag', this.onModelFieldChange, this);
this.dcFieldsSubView = new DcFieldView({ this.dcFieldsSubView = new DcFieldView({
collection: window.AdminFieldApp.dcFieldsCollection collection: window.AdminFieldApp.dcFieldsCollection
@@ -54,19 +54,18 @@ define([
}, },
events: { events: {
"click .delete-field": "deleteAction", "click .delete-field": "deleteAction",
"focusout input[type=text]": "fieldChanged", "focusout input[type=text]": "fieldChangedAction",
"change input[type=checkbox]": "fieldChanged", "change input[type=checkbox]": "fieldChangedAction",
"change select": "selectionChanged" "change select": "selectionChangedAction"
}, },
selectionChanged: function(e) { selectionChangedAction: function(e) {
var field = $(e.currentTarget); var field = $(e.currentTarget);
var value = $("option:selected", field).val(); var value = $("option:selected", field).val();
var data = {}; var data = {};
data[field.attr('id')] = value; data[field.attr('id')] = value;
this.model.set(data); this.model.set(data);
}, },
fieldChanged: function(e) { fieldChangedAction: function(e) {
console.log('field change');
var field = $(e.currentTarget); var field = $(e.currentTarget);
var data = {}; var data = {};
data[field.attr('id')] = field.is(":checkbox") ? field.is(":checked") : field.val(); data[field.attr('id')] = field.is(":checkbox") ? field.is(":checked") : field.val();
@@ -108,8 +107,7 @@ define([
return this; return this;
}, },
onFieldChange: function() { onModelFieldChange: function() {
console.log('on field changed');
AdminFieldApp.fieldListView.collection.remove(this.model, {silent: true}); AdminFieldApp.fieldListView.collection.remove(this.model, {silent: true});
AdminFieldApp.fieldListView.collection.add(this.model); AdminFieldApp.fieldListView.collection.add(this.model);
this.render(); this.render();
@@ -118,13 +116,11 @@ define([
var selectors; var selectors;
if (_.isObject(selector)) { if (_.isObject(selector)) {
selectors = selector; selectors = selector;
} } else {
else {
selectors = {}; selectors = {};
selectors[selector] = view; selectors[selector] = view;
} }
if (!selectors) if (!selectors) return;
return;
_.each(selectors, function(view, selector) { _.each(selectors, function(view, selector) {
view.setElement(this.$(selector)).render(); view.setElement(this.$(selector)).render();
}, this); }, this);

View File

@@ -13,7 +13,7 @@ define([
"click .btn-submit-field": "createAction", "click .btn-submit-field": "createAction",
"click .btn-add-field": "toggleCreateFormAction", "click .btn-add-field": "toggleCreateFormAction",
"click .btn-cancel-field": "toggleCreateFormAction", "click .btn-cancel-field": "toggleCreateFormAction",
"update-sort": "onUpdateSort" "update-sort": "updateSortAction"
}, },
initialize: function() { initialize: function() {
// Store all single rendered views // Store all single rendered views
@@ -73,9 +73,6 @@ define([
this.$listEl.sortable({ this.$listEl.sortable({
handle: ".handle", handle: ".handle",
start: function () {
console.log('start', AdminFieldApp.fieldEditView.model.get('id'));
},
stop: function(event, ui) { stop: function(event, ui) {
ui.item.trigger('drop', ui.item.index()); ui.item.trigger('drop', ui.item.index());
} }
@@ -126,7 +123,7 @@ define([
toggleCreateFormAction: function(event) { toggleCreateFormAction: function(event) {
$('.add-field-block', this.$el).toggle(); $('.add-field-block', this.$el).toggle();
}, },
onUpdateSort: function(event, model, position) { updateSortAction: function(event, model, position) {
this.collection.remove(model, {silent: true}); this.collection.remove(model, {silent: true});
this.collection.each(function(model, index) { this.collection.each(function(model, index) {
@@ -139,7 +136,9 @@ define([
this.collection.add(model, {at: position}); this.collection.add(model, {at: position});
// update edit view // update edit view
AdminFieldApp.fieldEditView.model = this.collection.find(function(el) { return el.get('id') === AdminFieldApp.fieldEditView.model.get('id') }); AdminFieldApp.fieldEditView.model = this.collection.find(function(el) {
return el.get('id') === AdminFieldApp.fieldEditView.model.get('id');
});
} }
}); });

View File

@@ -41,4 +41,3 @@ define([
return ModalView; return ModalView;
}); });

View File

@@ -1,3 +1,7 @@
#admin-field-app h4 {
padding: 10px 0;
}
#admin-field-app li { #admin-field-app li {
background: #FFF; background: #FFF;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
@@ -5,12 +9,38 @@
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
} }
#admin-field-app li table {
table-layout:fixed;
width:100%;
}
#admin-field-app li .field-name { #admin-field-app li .field-name {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
color: #666; color: #666;
} }
#admin-field-app li .handle {
width: 10%;
vertical-align:middle;
text-align:center;
cursor: move;
}
#admin-field-app li .trigger-click {
padding:10px;
}
#admin-field-app li .position {
width: 10%;
vertical-align:bottom;
text-align: center
}
#admin-field-app li .chip {
width:10%;
}
#admin-field-app li .handle, #admin-field-app li .position { #admin-field-app li .handle, #admin-field-app li .position {
color: #ccc; color: #ccc;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
@@ -51,6 +81,35 @@
min-width: 220px; min-width: 220px;
} }
#admin-field-app .sidebar-block {
margin: 20px 0;
}
#admin-field-app #collection-fields {
height:450px;
overflow: auto;
}
#admin-field-app .edit-block {
padding: 5px 20px
}
#admin-field-app .edit-block .edit-order {
height: 50px;
}
#admin-field-app .edit-block .edit-name {
height: 60px;
}
#admin-field-app .edit-block input#name {
font-size:28px;
color:#0080FF;
height:42px;
line-height:42px;
font-weight:bold
}
.ui-autocomplete-admin-field { .ui-autocomplete-admin-field {
list-style-type: none; list-style-type: none;
overflow-y: scroll; overflow-y: scroll;
@@ -69,5 +128,3 @@
.ui-autocomplete-admin-field li a { .ui-autocomplete-admin-field li a {
text-decoration: none; text-decoration: none;
} }