1
0
mirror of https://github.com/colymba/GridFieldBulkEditingTools.git synced 2024-10-22 11:05:57 +02:00

Add progress info + clear button

This commit is contained in:
colymba 2014-04-06 14:30:54 +03:00 committed by Thierry Francois
parent ade47d5e80
commit a726cce755
6 changed files with 204 additions and 87 deletions

View File

@ -272,13 +272,19 @@ class GridFieldBulkUpload implements GridField_HTMLProvider, GridField_URLHandle
->setUseButtonTag(true) ->setUseButtonTag(true)
->setAttribute('src', '');//changes type to image so isn't hooked by default actions handlers ->setAttribute('src', '');//changes type to image so isn't hooked by default actions handlers
$cancelButton = FormAction::create('Cancel', _t('GridFieldBulkTools.CANCEL_BTN_LABEL', 'Cancel & delete all')) $cancelButton = FormAction::create('Cancel', _t('GridFieldBulkTools.CANCEL_BTN_LABEL', 'Cancel'))
->addExtraClass('bulkUploadCancelButton ss-ui-action-destructive') ->addExtraClass('bulkUploadCancelButton ss-ui-action-destructive')
->setAttribute('data-icon', 'decline') ->setAttribute('data-icon', 'decline')
->setAttribute('data-url', $gridField->Link('bulkupload/cancel')) ->setAttribute('data-url', $gridField->Link('bulkupload/cancel'))
->setUseButtonTag(true) ->setUseButtonTag(true)
->setAttribute('src', ''); ->setAttribute('src', '');
$clearErrorButton = FormAction::create('ClearError', _t('GridFieldBulkTools.CLEAR_ERROR_BTN_LABEL', 'Clear errors'))
->addExtraClass('bulkUploadClearErrorButton')
->setAttribute('data-icon', 'arrow-circle-double')
->setUseButtonTag(true)
->setAttribute('src', '');
if ( $gridField->getConfig()->getComponentsByType('GridFieldBulkManager') ) if ( $gridField->getConfig()->getComponentsByType('GridFieldBulkManager') )
{ {
$editAllButton = FormAction::create('EditAll', _t('GridFieldBulkTools.EDIT_ALL_BTN_LABEL', 'Edit all')) $editAllButton = FormAction::create('EditAll', _t('GridFieldBulkTools.EDIT_ALL_BTN_LABEL', 'Edit all'))
@ -296,6 +302,7 @@ class GridFieldBulkUpload implements GridField_HTMLProvider, GridField_URLHandle
$uploadField->FinishButton = $finishButton; $uploadField->FinishButton = $finishButton;
$uploadField->CancelButton = $cancelButton; $uploadField->CancelButton = $cancelButton;
$uploadField->EditAllButton = $editAllButton; $uploadField->EditAllButton = $editAllButton;
$uploadField->ClearErrorButton = $clearErrorButton;
$data = ArrayData::create(array( $data = ArrayData::create(array(
'Colspan' => count($gridField->getColumns()), 'Colspan' => count($gridField->getColumns()),

View File

@ -14,8 +14,7 @@
position: relative; position: relative;
float: left; float: left;
clear: both; clear: both;
width: 100%; width: 100%; }
padding-top: 70px; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-files { .bulkUpload .component div.ss-uploadfield .ss-uploadfield-files {
float: left; float: left;
clear: both; clear: both;
@ -86,13 +85,9 @@
float: right; float: right;
margin-top: 2px; } margin-top: 2px; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile { .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile {
position: absolute;
top: 0;
left: 0;
float: left; float: left;
clear: both; clear: both;
width: 98%; width: 98%;
height: 50px;
padding: 1%; } padding: 1%; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile.borderTop { .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile.borderTop {
border: none; } border: none; }
@ -114,7 +109,8 @@
width: 60%; width: 60%;
margin: 0; } margin: 0; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-item-name { .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-item-name {
height: 20px; } height: auto;
margin-bottom: 2px; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-ui-button .ui-button-text .ui-button-text { .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-ui-button .ui-button-text .ui-button-text {
padding: 0px; } padding: 0px; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-fromcomputer { .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-fromcomputer {
@ -122,3 +118,23 @@
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-fromfiles { .bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-fromfiles {
margin-bottom: 0; margin-bottom: 0;
padding: .5px; } padding: .5px; }
.bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons {
display: none;
float: left;
width: 98%;
padding: 6px 1% 6px 1%;
border-top: 1px solid rgba(0, 0, 0, 0.1); }
.bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button {
float: left;
margin: 0 6px 0 0; }
.bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button .ui-button-text .ui-button-text {
padding: 0; }
.bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button.bulkUploadEditButton, .bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button.bulkUploadClearErrorButton {
float: right;
margin: 0 0 0 6px; }
.bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons .colymba-bulkupload-info {
float: left;
margin: 0 6px 0 0;
line-height: 28px;
height: 28px;
color: #73818a; }

View File

@ -29,8 +29,6 @@
clear: both; clear: both;
width: 100%; width: 100%;
padding-top: 70px;
// uploading file progress // uploading file progress
.ss-uploadfield-files .ss-uploadfield-files
{ {
@ -168,15 +166,10 @@
// upload tools // upload tools
.ss-uploadfield-addfile .ss-uploadfield-addfile
{ {
position: absolute;
top: 0;
left: 0;
float: left; float: left;
clear: both; clear: both;
width: 98%; width: 98%;
height: 50px;
padding: 1%; padding: 1%;
@ -214,7 +207,8 @@
.ss-uploadfield-item-name .ss-uploadfield-item-name
{ {
height: 20px; height: auto;
margin-bottom: 2px;
} }
.ss-ui-button .ss-ui-button
@ -239,7 +233,47 @@
padding: .5px; padding: .5px;
} }
} }
}// .ss-uploadfield-item }// .ss-uploadfield-addfile
.colymba-bulkupload-buttons
{
display: none;
float: left;
width: 98%;
padding: 6px 1% 6px 1%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
button
{
float: left;
margin: 0 6px 0 0;
.ui-button-text
{
.ui-button-text
{
padding: 0;
}
}
&.bulkUploadEditButton,
&.bulkUploadClearErrorButton
{
float: right;
margin: 0 0 0 6px;
}
}// button
.colymba-bulkupload-info
{
float: left;
margin: 0 6px 0 0;
line-height: 28px;
height: 28px;
color: #73818a;
}
}
}// .ss-uploadfield }// .ss-uploadfield

View File

@ -134,61 +134,131 @@
}); });
/* /**
* handles individual edit forms changes * Track upload progress...
* updates buttons and visual styles
*/ */
$('.bulkImageUploadUpdateForm').entwine({ $('ul.ss-uploadfield-files').entwine({
onmatch: function(){}, onmatch: function(){},
onunmatch: function(){}, onunmatch: function(){},
haschanged: function() trackProgress: function()
{ {
var itemInfo, var $li = this.find('li.ss-uploadfield-item'),
itemStatus total = $li.length,
$done = $li.filter('.done'),
done = $done.length,
$errors = $li.not($done).find('.ui-state-warning-text,.ui-state-error-text'),
errors = $errors.length
; ;
itemStatus = $(this).parents('li').find('.ss-uploadfield-item-status'); this.parents('.ss-uploadfield').find('.colymba-bulkupload-buttons').refresh(total, done, errors);
itemInfo = $(this).parents('li').find('.ss-uploadfield-item-info'); /*
this.closest('.colymba-bulkupload-info').html(ss.i18n.sprintf(
if ( !$(this).hasClass('hasUpdate') ) ss.i18n._t('GRIDFIELD_BULK_UPLOAD.PROGRESS_INFO'),
{ total,
$(this).addClass('hasUpdate'); done,
} total
));*/
$(itemStatus).removeClass('updated').addClass('dirty').html(ss.i18n._t('GridFieldBulkTools.EDIT_CHANGED'));
if ( $(itemInfo).hasClass('updated') ) $(itemInfo).removeClass('updated');
if ( !$(itemInfo).hasClass('dirty') ) $(itemInfo).addClass('dirty');
$('#bulkImageUploadUpdateBtn').removeClass('ui-state-disabled ssui-button-disabled');
$('#bulkImageUploadUpdateBtn').attr('aria-disabled', 'false');
$('#bulkImageUploadUpdateBtn').removeAttr('disabled');
} }
}); });
/*
* catches edit form changes /**
* Track new and canceled updloads
*/ */
$('.bulkImageUploadUpdateForm input.text, .bulkImageUploadUpdateForm input.checkbox, .bulkImageUploadUpdateForm select, .bulkImageUploadUpdateForm textarea').entwine({ $('li.ss-uploadfield-item').entwine({
onchange: function() onmatch: function(){
{ this.parents('ul.ss-uploadfield-files').trackProgress();
this.closest('.bulkImageUploadUpdateForm').haschanged(); },
} onunmatch: function(){
$('ul.ss-uploadfield-files').trackProgress();
},
}); });
/* /**
* catches edit form changes * Track updload warning/errors
* HTMLEditorField hack
*/ */
//textarea node is being removed from the DOM when the HTMLEditorFieldChanges, not the best but works $('li.ss-uploadfield-item .ui-state-warning-text,li.ss-uploadfield-item .ui-state-error-text').entwine({
$('.field.htmleditor textarea').entwine({ onmatch: function(){
this.parents('ul.ss-uploadfield-files').trackProgress();
},
onunmatch: function(){
$('ul.ss-uploadfield-files').trackProgress();
},
});
/**
* Track completed uploads
*//*
$('li.ss-uploadfield-item.done').entwine({
onmatch: function(){
this.parents('ul.ss-uploadfield-files').trackProgress();
},
onunmatch: function(){},
});*/
/**
* Update buttons state and progress info...
*/
$('.colymba-bulkupload-buttons').entwine({
onmatch: function(){}, onmatch: function(){},
onunmatch: function() onunmatch: function(){},
refresh: function(total, done, error)
{ {
//note sure why querying straight from the texarea doesn't work... maybe because it is already removed from DOM? var $info = this.find('.colymba-bulkupload-info'),
$('input[type="hidden"][name="'+$(this).attr('name')+'"]').parents('.bulkImageUploadUpdateForm').haschanged(); $editBtn = this.find('.bulkUploadEditButton'),
$cancelBtn = this.find('.bulkUploadCancelButton'),
$finishBtn = this.find('.bulkUploadFinishButton'),
$clearErrorBtn = this.find('.bulkUploadClearErrorButton')
;
if ( total > 0 )
{
this.css({display: 'block'});
$info.html(ss.i18n.sprintf(
ss.i18n._t('GRIDFIELD_BULK_UPLOAD.PROGRESS_INFO'),
total,
done,
error
));
$cancelBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
$finishBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
if ( total === done )
{
$editBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
}
else{
$editBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
}
if ( error > 0 )
{
$clearErrorBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
}
else{
$clearErrorBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
}
}
else{
this.css({display: 'none'});
$editBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
$cancelBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
$finishBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
$clearErrorBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
}
} }
}); });
/* /*
* save changes button behaviour * save changes button behaviour
* loop through edited forms and submit data * loop through edited forms and submit data
@ -264,19 +334,6 @@
} }
}); });
/*
* edit forms ovverides
*/
$('.ss-uploadfield-item-editform').entwine({
onmatch: function(e)
{
$('#bulkImageUploadUpdateCancelBtn').removeClass('ui-state-disabled ssui-button-disabled');
$('#bulkImageUploadUpdateCancelBtn').attr('aria-disabled', 'false');
$('#bulkImageUploadUpdateCancelBtn').removeAttr('disabled');
},
onunmatch: function(){}
});
/* /*
* cancel button behaviour * cancel button behaviour
* loop through edit forms and submit for deletion * loop through edit forms and submit for deletion

View File

@ -4,6 +4,7 @@ if(typeof(ss) == 'undefined' || typeof(ss.i18n) == 'undefined') {
if(typeof(console) != 'undefined') console.error('Class ss.i18n not defined'); if(typeof(console) != 'undefined') console.error('Class ss.i18n not defined');
} else { } else {
ss.i18n.addDictionary('en', { ss.i18n.addDictionary('en', {
"GRIDFIELD_BULK_UPLOAD.PROGRESS_INFO": "Uploading %s file(s). %s done. %s error(s).",
"GridFieldBulkTools.FINISH_CONFIRM": "You have unsaved changes. Continuing will loose all unsaved data.\n\nDo your really want to continue?", "GridFieldBulkTools.FINISH_CONFIRM": "You have unsaved changes. Continuing will loose all unsaved data.\n\nDo your really want to continue?",
"GridFieldBulkTools.EDIT_CHANGED": "Modified", "GridFieldBulkTools.EDIT_CHANGED": "Modified",
"GridFieldBulkTools.EDIT_UPDATED": "Saved", "GridFieldBulkTools.EDIT_UPDATED": "Saved",

View File

@ -42,9 +42,11 @@
<div class="clear"><!-- --></div> <div class="clear"><!-- --></div>
</div> </div>
<div class="colymba-bulkupload-progress"> <div class="colymba-bulkupload-buttons">
$FinishButton $FinishButton
$CancelButton $CancelButton
<span class="colymba-bulkupload-info"></span>
$ClearErrorButton
$EditAllButton $EditAllButton
</div> </div>
<% end_if %> <% end_if %>