Skip to content

GitLab

W
work.w
Commit b343cf69 authored by alexandre's avatar alexandre
Browse files
Options

Gridview for partition list

parent 2ee51c43
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3468 additions and 119 deletions
playground/static/playground/css/styles.css
View file @ b343cf69
......@@ -671,7 +671,7 @@ li+li>.axis-title #alt_symbole {
}
input[type="text"] {
width: 20em;
/* width: 20em; */
}
input.small-number {
......@@ -925,4 +925,4 @@ section.hidden {
content: "⋯";
display: inline-block;
padding-left: .25em;
}
\ No newline at end of file
}
playground/static/playground/js/views.js
View file @ b343cf69
......@@ -4,6 +4,64 @@ window.W = window.W || {};
(function (undefined) {
'use strict';
var MyDatetimeFormatter = _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function (rawValue, model) {
moment.locale('fr');
return moment(rawValue).calendar();
}
});
var MyDatetimeCell = Backgrid.DatetimeCell.extend({
formatter: MyDatetimeFormatter
});
var MyUriCell = Backgrid.StringCell.extend({
render: function () {
this.$el.empty();
var rawValue = this.model.get(this.column.get("name"));
var uri = "/partitions/" + this.model.get("id");
var formattedValue = this.formatter.fromRaw(rawValue, this.model);
this.$el.append($("<a>", {
tabIndex: -1,
href: uri,
title: this.title || formattedValue,
target: this.target
}).text(formattedValue));
this.delegateEvents();
return this;
}
});
var columns = [
{
name: "title",
label: "Partition",
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
cell: MyUriCell
},
{
name: "created_at",
label: "Créée le",
cell: MyDatetimeCell
},
{
name: "updated_at",
label: "Mise à jour le",
cell: MyDatetimeCell
},
{
name: "score_type",
label: "Type",
cell: "string",
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function (rawValue, model) {
return ["transcription", "prescription", "traduction"][parseInt(rawValue)]
}
})
},
];
W.edit_mode = false;
var rangeType = {
......@@ -1271,59 +1329,6 @@ window.W = window.W || {};
*/
W.ListItemView = Backbone.Marionette.View.extend({
tagName: 'li',
template: '#list-item-template',
triggers: {
"click .delete": "delete",
"click .duplicate": "duplicate"
},
onDelete: function (view, event) {
// console.log("ok");
var r = confirm("Vous êtes sur le point de supprimer la partition intitulée \"" + this.model.get("title") + "\". Continuer?");
if (r) {
this.model.destroy();
}
},
onDuplicate: function (view, event) {
// We cannot rely on the Backbone Clone() method here because it
// doesn't copy the relations. So we just create a new instance and
// initialise it with the source partition data instead, minus it's
// id attribute.
var data = this.model.toJSON();
delete data.id
var newModel = new W.ScoreModel(data);
newModel.set("title", newModel.get("title") + " (copy)");
newModel.save(null, {
success: function () {
Backbone.history.navigate('/' + newModel.id, {
trigger: true
});
}
});
},
});
W.ListView = Backbone.Marionette.CollectionView.extend({
tagName: 'ol',
collection: W.ScoreCollection,
childView: W.ListItemView,
initialize: function (options) {
// this.listenTo(this.collection, 'sync', this.render);
},
});
W.SearchView = Backbone.Marionette.View.extend({
template: '#search-template',
......@@ -1335,43 +1340,6 @@ window.W = window.W || {};
this.collection.queryParams.search = this.$el.find('.search-input').val();
this.collection.fetch();
},
// initialize: function (options) {
// this.listenTo(this.collection, 'sync', this.render);
// },
});
W.PaginationView = Backbone.Marionette.View.extend({
template: '#pagination-template',
templateContext: function () {
return {
currentPage: this.collection.state.currentPage,
lastPage: this.collection.state.lastPage,
hasPreviousPage: this.collection.hasPreviousPage(),
hasNextPage: this.collection.hasNextPage()
}
},
triggers: {
'click .next-page': 'nextPage',
'click .previous-page': 'previousPage',
},
onNextPage: function (event) {
this.collection.getNextPage();
console.log(this.collection.state)
},
onPreviousPage: function (event) {
this.collection.getPreviousPage();
console.log(this.collection.state)
},
initialize: function (options) {
this.listenTo(this.collection, 'sync', this.render);
},
});
......@@ -1391,7 +1359,7 @@ window.W = window.W || {};
title: title
}, {
success: function () {
Backbone.history.navigate('/' + myModel.id, {
Backbone.history.navigate('/partitions/' + myModel.id, {
trigger: true
});
}
......@@ -1409,7 +1377,7 @@ window.W = window.W || {};
search: '#search',
list: '#list',
pagination: '#pagination',
create: '#create'
search: '#search',
},
onRender: function () {
......@@ -1427,7 +1395,8 @@ window.W = window.W || {};
}
});
var myListView = new W.ListView({
var myListView = new Backgrid.Grid({
columns: columns,
collection: scoreCollection
});
......@@ -1435,12 +1404,24 @@ window.W = window.W || {};
collection: scoreCollection
});
var myPaginationView = new W.PaginationView({
var myPaginationView = new Backgrid.Extension.Paginator({
// If you anticipate a large number of pages, you can adjust
// the number of page handles to show. The sliding window
// will automatically show the next set of page handles when
// you click next at the end of a window.
windowSize: 20, // Default is 10
// Used to multiple windowSize to yield a number of pages to slide,
// in the case the number is 5
slideScale: 0.25, // Default is 0.5
// Whether sorting should go back to the first page
goBackFirstOnSort: false, // Default is true
collection: scoreCollection
});
var myCreateView = new W.CreateView();
var that = this;
myListView.collection.fetch({
......@@ -1448,7 +1429,6 @@ window.W = window.W || {};
that.showChildView('search', mySearchView);
that.showChildView('list', myListView);
that.showChildView('pagination', myPaginationView);
that.showChildView('create', myCreateView);
}
});
}
......@@ -1518,8 +1498,19 @@ window.W = window.W || {};
'click @ui.toggle': 'toggle',
},
regions: {
create: '#create'
},
onToggle: function () {
this.$el.toggleClass('main-header--collapsed');
},
onRender: function () {
var myCreateView = new W.CreateView();
this.showChildView('create', myCreateView);
}
});
......
playground/static/playground/vendors/backgrid-paginator.min.css 0 → 100644
View file @ b343cf69
.backgrid-paginator{text-align:center;border-top:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.backgrid-paginator ul{display:inline-block;*display:inline;margin:5px 0;*zoom:1}.backgrid-paginator ul>li{display:inline}.backgrid-paginator ul>li>a,.backgrid-paginator ul>li>span{float:left;width:30px;height:30px;padding:0;line-height:30px;text-decoration:none}.backgrid-paginator ul>li>a:hover,.backgrid-paginator ul>.active>a,.backgrid-paginator ul>.active>span{background-color:#f5f5f5}.backgrid-paginator ul>.active>a,.backgrid-paginator ul>.active>span{color:#999;cursor:default}.backgrid-paginator ul>.disabled>span,.backgrid-paginator ul>.disabled>a,.backgrid-paginator ul>.disabled>a:hover{color:#999;cursor:default}
\ No newline at end of file
playground/static/playground/vendors/backgrid-paginator.min.js 0 → 100644
View file @ b343cf69
This diff is collapsed.
playground/static/playground/vendors/backgrid.css 0 → 100644
View file @ b343cf69
/*
backgrid
http://github.com/cloudflare/backgrid
Copyright (c) 2013-present Cloudflare, Inc. and contributors
Licensed under the MIT license.
*/
.backgrid-container {
position: relative;
display: block;
width: 100%;
height: 465px;
padding: 0;
overflow: auto;
border: 0;
}
.backgrid {
width: 100%;
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.backgrid th,
.backgrid td {
display: none;
height: 20px;
max-width: 250px;
padding: 4px 5px;
overflow: hidden;
line-height: 20px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
border-bottom: 1px solid #DDD;
}
.backgrid th.renderable,
.backgrid td.renderable {
display: table-cell;
}
.backgrid th {
font-weight: bold;
text-align: center;
}
.backgrid th.sortable a {
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.backgrid thead th {
vertical-align: bottom;
background-color: #f9f9f9;
}
.backgrid thead th button {
display: block;
padding: 0;
background: none;
border: none;
}
.backgrid.backgrid-striped tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
.backgrid tbody tr.empty {
font-style: italic;
color: gray;
}
.backgrid tbody tr.empty td {
display: table-cell;
text-align: center;
}
.backgrid td.editor {
padding: 0;
}
.backgrid td.editor,
.backgrid tbody tr:nth-child(odd) td.editor {
background-color: rgba(82, 168, 236, 0.1);
outline: 1px solid rgba(82, 168, 236, 0.8);
outline-offset: -1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition-duration: 200ms;
-moz-transition-duration: 200ms;
-o-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transition-property: width, outline, background-color;
-moz-transition-property: width, outline, background-color;
-o-transition-property: width, outline, background-color;
transition-property: width, outline, background-color;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.backgrid td.editor input[type=text] {
display: block;
width: 100%;
height: 100%;
padding: 0 5px;
margin: 0;
background-color: transparent;
border: 0;
outline: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
.backgrid td.editor input[type=text]::-ms-clear {
display: none;
}
.backgrid td.error,
.backgrid tbody tr:nth-child(odd) td.error {
background-color: rgba(255, 210, 77, 0.1);
outline: 1px solid #ffd24d;
}
.backgrid td.editor :focus,
.backgrid th.editor :focus {
outline: 0;
}
.backgrid .sort-caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.3em;
border: 0;
content: "";
}
.backgrid .ascending .sort-caret {
vertical-align: baseline;
border-top: none;
border-right: 4px solid transparent;
border-bottom: 4px solid #000000;
border-left: 4px solid transparent;
}
.backgrid .descending .sort-caret {
vertical-align: super;
border-top: 4px solid #000000;
border-right: 4px solid transparent;
border-bottom: none;
border-left: 4px solid transparent;
}
.backgrid .string-cell,
.backgrid .uri-cell,
.backgrid .email-cell,
.backgrid .string-cell.editor input[type=text],
.backgrid .uri-cell.editor input[type=text],
.backgrid .email-cell.editor input[type=text] {
text-align: left;
}
.backgrid .date-cell,
.backgrid .time-cell,
.backgrid .datetime-cell,
.backgrid .number-cell,
.backgrid .integer-cell,
.backgrid .percent-cell,
.backgrid .date-cell.editor input[type=text],
.backgrid .time-cell.editor input[type=text],
.backgrid .datetime-cell.editor input[type=text],
.backgrid .number-cell.editor input[type=text],
.backgrid .integer-cell.editor input[type=text],
.backgrid .percent-cell.editor input[type=text] {
text-align: right;
}
.backgrid .boolean-cell,
.backgrid .boolean-cell.editor input[type=checkbox] {
text-align: center;
}
.backgrid .select-cell {
text-align: center;
}
.backgrid .select-cell.editor {
padding: 0;
}
.backgrid .select-cell.editor select {
display: block;
width: 100%;
height: 28px;
padding: 4px 5px;
margin: 0;
line-height: 28px;
vertical-align: middle;
background-color: white;
border: 0;
outline: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.backgrid .select-cell.editor select[multiple] {
height: auto;
}
.backgrid .select-cell.editor :focus {
border: 0;
outline: 0;
}
.backgrid .select-cell.editor select::-moz-focus-inner,
.backgrid .select-cell.editor optgroup::-moz-focus-inner,
.backgrid .select-cell.editor option::-moz-focus-inner,
.backgrid .select-cell.editor select::-o-focus-inner,
.backgrid .select-cell.editor optgroup::-o-focus-inner,
.backgrid .select-cell.editor option::-o-focus-inner {
border: 0;
}
\ No newline at end of file
playground/static/playground/vendors/backgrid.js 0 → 100644
View file @ b343cf69
This diff is collapsed.
playground/static/playground/vendors/moment-with-locales.min.js 0 → 100644
View file @ b343cf69
This source diff could not be displayed because it is too large. You can view the blob instead.
playground/templates/playground/score.html
View file @ b343cf69
......@@ -8,6 +8,8 @@
<title>Notation W</title>
<link rel="stylesheet" href="{% static 'playground/vendors/reset.css' %}">
<link rel="stylesheet" href="{% static 'playground/vendors/backgrid.css' %}">
<link rel="stylesheet" href="{% static 'playground/vendors/backgrid-paginator.min.css' %}">
<link rel="stylesheet" href="{% static 'playground/css/styles.css' %}">
<script id="base-template" type="text/template">
......@@ -34,18 +36,10 @@
{% include "playground/underscore/search.mtpl" %}
</script>
<script id="pagination-template" type="text/template">
{% include "playground/underscore/pagination.mtpl" %}
</script>
<script id="create-template" type="text/template">
{% include "playground/underscore/create.mtpl" %}
</script>
<script id="list-item-template" type="text/template">
{% include "playground/underscore/list-item.mtpl" %}
</script>
<script id="score-template-vue" type="text/template">
{% include "playground/underscore/score-vue.mtpl" %}
</script>
......@@ -100,6 +94,9 @@
<script src="{% static 'playground/vendors/backbone.marionette.min.js' %}"></script>
<script src="{% static 'playground/vendors/backbone-relational.min.js' %}"></script>
<script src="{% static 'playground/vendors/backbone.paginator.min.js' %}"></script>
<script src="{% static 'playground/vendors/backgrid.js' %}"></script>
<script src="{% static 'playground/vendors/backgrid-paginator.min.js' %}"></script>
<script src="{% static 'playground/vendors/moment-with-locales.min.js' %}"></script>
<script src="{% static 'playground/vendors/jquery-ui.min.js' %}"></script>
<script src="{% static 'playground/vendors/jquery.mjs.nestedSortable.js' %}"></script>
<script src="{% static 'playground/js/models.js' %}"></script>
......
playground/templates/playground/underscore/header.mtpl
View file @ b343cf69
......@@ -25,6 +25,8 @@
<h2>Un logiciel pour noter l’action performée, développé par W</h2>
</div>
<div id="create"></div>
<nav>
<ul>
<li><a href="/apropos/">À propos</a></li> <!-- + crédits -->
......
playground/templates/playground/underscore/list-item.mtpl deleted 100644 → 0
View file @ 2ee51c43
<a href="/partitions/<%= id %>"><%= title %></a> <!-- (<a href="#" class="delete">supprimer</a>, <a href="#" class="duplicate">dupliquer</a>) -->
playground/templates/playground/underscore/pagination.mtpl deleted 100644 → 0
View file @ 2ee51c43
<br>
<% if (hasPreviousPage) { %>
<span class="previous-page">Précédente</span> |
<% } %>
page <%= currentPage %> de <%= lastPage %>
<% if (hasNextPage) { %>
| <span class="next-page">Suivante</span>
<% } %>
playground/templates/playground/underscore/score-list.mtpl
View file @ b343cf69
<div id="create"></div>
<br>
<br>
<div>
<h1>Partitions existantes</h1>
<div id="search"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment