DGNum/demarches-normaliennes
13
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Refactor and redesign publish modal

Browse source 
* remove the autocomplete menu
* use ujs to pre-validate the procedure
* tweak the UI
This commit is contained in:
Nicolas Bouilleaud 2019-07-30 16:54:43 +02:00
parent bd1e0aba38
commit c26a701a17
18 changed files with 148 additions and 292 deletions
Download patch file Download diff file Expand all files Collapse all files

70
app/assets/javascripts/old_design/admin_procedures_modal.js
View file

@ -1,70 +0,0 @@
/* globals $ */
$(document).on('turbolinks:load', init_path_modal);
var PROCEDURE_PATH_SELECTOR = 'input[data-autocomplete=path]';
function init_path_modal() {
path_modal_action();
path_validation_action();
path_type_init();
path_validation($(PROCEDURE_PATH_SELECTOR));
}
function path_modal_action() {
$('#publish-modal').on('show.bs.modal', function(event) {
$('#publish-modal .modal-body .table .tr-content').hide();
var button = $(event.relatedTarget); // Button that triggered the modal
var modal_title = button.data('modal_title'); // Extract info from data-* attributes
var modal_index = button.data('modal_index'); // Extract info from data-* attributes
var modal = $(this);
modal.find('#publish-modal-title').html(modal_title);
$('#publish-modal .modal-body .table #' + modal_index).show();
});
}
function path_validation_action() {
$(PROCEDURE_PATH_SELECTOR).keyup(function(key) {
if (key.keyCode != 13) path_validation(this);
});
}
function togglePathMessage(valid, mine) {
$('#path-messages .message').hide();
if (valid === true && mine === true) {
$('#path_is_mine').show();
} else if (valid === true && mine === false) {
$('#path_is_not_mine').show();
} else if (valid === false && mine === null) {
$('#path_is_invalid').show();
}
if ((valid && mine === null) || mine === true)
$('#publish-modal #publish').removeAttr('disabled');
else $('#publish-modal #publish').attr('disabled', 'disabled');
}
function path_validation(el) {
var valid = validatePath($(el).val());
toggleErrorClass(el, valid);
togglePathMessage(valid, null);
}
function toggleErrorClass(node, boolean) {
if (boolean) $(node).removeClass('input-error');
else $(node).addClass('input-error');
}
function validatePath(path) {
var re = /^[a-z0-9_-]{3,50}$/;
return re.test(path);
}
function path_type_init() {
$(PROCEDURE_PATH_SELECTOR).on('autocomplete:select', function(event) {
togglePathMessage(true, event.detail['mine']);
});
}

24
app/assets/stylesheets/admin_procedures_modal.scss
View file

@ -1,24 +0,0 @@
.path-mine-false {
color: #FF0000;
}
#path-messages {
.message {
display: none;
}
}
#publish-modal {
.algolia-autocomplete {
width: 300px;
}
.aa-dropdown-menu {
width: 300px;
}
// Fix the input not being displayed on the same line than the text before
.aa-input {
vertical-align: initial !important;
}
}

1
app/assets/stylesheets/application.scss
View file

@ -13,7 +13,6 @@
// = require _card
// = require _helpers
// = require _turbolinks
// = require admin_procedures_modal
// = require admin_type_de_champ
// = require carte
// = require custom_mails