Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

* refactor testcase steps editor.

Browse Source
This commit is contained in:
Catouse
2017-03-18 13:37:18 +08:00
parent 7f5b9a3834
commit 87b7971ee4
6 changed files with 99 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/testcase/css/common.css
+11
View File
@@ -10,6 +10,7 @@
#steps .step-group .step-expects {display: none;}
#steps .step-item .step-item-id {display: table-cell; min-width: 40px;}
#steps .step-item .step-id {color: transparent}
#steps .step-group .step-id {font-weight: bold}
#steps .step-actions {width: 90px; text-align: center;}
#steps .btn-step-move {cursor: move}
@@ -20,6 +21,16 @@
#steps.sortable-sorting > tr.drag-row + tr > td {box-shadow: inset 0 4px 2px rgba(0,0,0,.2)}
#steps.sortable-sorting > tr.drag-row > td {background-color: #edf3fe!important}
#steps.sortable > tr.drop-success > td {background-color: #cfe0ff; transition: background-color 2s;}
#steps .step-type-toggle {padding: 0}
#steps .step-type-menu-box {position: relative;}
#steps .step-type-menu {position: absolute; top: 0; right: 0; z-index: 10; box-shadow: 0 6px 12px rgba(0,0,0,.175); background-color: #fff; display: none; border: 1px solid #ddd; min-width: 60px;}
#steps .step-step[data-type="item"] .step-type-menu > a[data-value="item"] {display: none}
#steps .step-type-current {display: block; padding: 5px 10px; position: relative; line-height: 20px;}
#steps .step-type-menu:hover,
#steps .step-type-toggle:hover .step-type-menu {display: block}
#steps .step-type-menu > a {display: block; padding: 8px 10px; color: #666;}
#steps .step-type-menu > a:hover {color: #333; background-color: #e5e5e5;}
#steps .step-type-menu > a.active {color: #fff; background-color: #1a4f85;}
.table-bordered .step-actions {width: 98px;}
.table-bordered > #steps > tr > td {padding: 0; background-color: #fafafa; border: 1px solid #ddd!important; border-left-style: dotted!important; border-right-style: dotted!important;}
module/testcase/js/common.js
+42 -20
View File
@@ -123,7 +123,7 @@ function initSteps(selector)
var $stepTemplate = $('#stepTemplate').detach().removeClass('template').attr('id', null);
var initSortableCallTask = null;
var groupNameText = $steps.data('groupName');
var insertStepRow = function($row, count)
var insertStepRow = function($row, count, type)
{
if(count === undefined) count = 1;
for(var i = 0; i < count; ++i)
@@ -133,38 +133,59 @@ function initSteps(selector)
else $steps.append($step);
$step.addClass('step-new');
setTimeout(function(){$step.find('.step-steps').focus();}, 10);
}
};
var toggleStepRowType = function($row, toggleisGroup)
var updateStepType = function($step, type)
{
if(toggleisGroup === undefined) targetIsGroup = $row.find('.step-type').is(':checked');
$row.toggleClass('step-group', targetIsGroup);
$row.find('.step-steps').toggleClass('autosize', !targetIsGroup).attr('placeholder', targetIsGroup ? groupNameText : null).focus();
var targetIsGroup = type =='group';
$step.attr('data-type', type).find('.step-steps').toggleClass('autosize', !targetIsGroup).attr('placeholder', targetIsGroup ? groupNameText : null).focus();
var displayType = (type =='item' && $step.hasClass('step-step')) ? 'step' : type;
var activeTypeText = $step.find('.step-type-menu > a').removeClass('active').filter('[data-value="' + displayType + '"]').addClass('active').text();
$step.find('.step-type-current > span').text(activeTypeText);
};
var refreshStepsID = function()
var refreshSteps = function()
{
var parentId = 1, childId = 0;
$steps.children('.step:not(.drag-shadow)').each(function(idx)
{
var $step = $(this);
var isGroup = $step.find('.step-type').is(':checked');
var type = $step.find('.step-type').val();
var stepID;
if(isGroup || !childId)
if(type == 'group')
{
$step.removeClass('step-item');
$step.removeClass('step-item step-step').addClass('step-group');
stepID = parentId++;
$step.find('.step-id').text(stepID);
if(isGroup) childId = 1;
childId = 1;
}
else if(type == 'step')
{
$step.removeClass('step-item step-group').addClass('step-step');
stepID = parentId++;
$step.find('.step-id').text(stepID);
childId = 0;
}
else
{
stepID = (parentId - 1) + '.' + (childId++);
$step.addClass('step-item').find('.step-item-id').text(stepID);
if(childId) // as child
{
stepID = (parentId - 1) + '.' + (childId++);
$step.removeClass('step-step step-group').addClass('step-item').find('.step-item-id').text(stepID);
}
else
{
$step.removeClass('step-item step-group').addClass('step-step');
stepID = parentId++;
$step.find('.step-id').text(stepID);
}
}
$step.find('[name^="steps["]').attr('name', "steps[" +stepID + ']');
$step.find('[name^="stepType["]').attr('name', "stepType[" +stepID + ']');
$step.find('[name^="expects["]').attr('name', "expects[" +stepID + ']');
updateStepType($step, type);
});
};
var initSortable = function()
@@ -182,6 +203,7 @@ function initSteps(selector)
$moveStep.removeClass('drag-row');
$steps.removeClass('sortable-sorting');
$moveStep = null;
refreshSteps();
});
$steps.addClass('sortable-sorting');
}).on('mouseenter', '.step:not(.drag-row)', function()
@@ -203,25 +225,25 @@ function initSteps(selector)
{
$targetStep.before($moveStep);
}
refreshStepsID();
});
}
$steps.on('click', '.btn-step-add', function()
{
insertStepRow($(this).closest('.step'));
refreshStepsID();
refreshSteps();
}).on('click', '.btn-step-delete', function()
{
if($('tbody#steps tr.step').size() == 1) return false;
$(this).closest('.step').remove();
refreshStepsID();
}).on('change', '.step-type', function()
refreshSteps();
}).on('click', '.step-type-menu a', function()
{
toggleStepRowType($(this).closest('.step'));
refreshStepsID();
var $a = $(this);
$a.closest('.step').find('.step-type').val($a.data('value'));
refreshSteps();
});
initSortable();
refreshStepsID();
refreshSteps();
}
/**
module/testcase/lang/en.php
+2
View File
@@ -90,6 +90,8 @@ $lang->testcase->confirmStoryChange = 'Confirm Story Change';
$lang->testcase->copy = 'Duplicate Case';
$lang->testcase->group = 'Group';
$lang->testcase->groupName = 'Group Name';
$lang->testcase->step = 'Step';
$lang->testcase->stepChild = 'Child';
$lang->testcase->new = 'New';
module/testcase/lang/zh-cn.php
+2
View File
@@ -92,6 +92,8 @@ $lang->testcase->confirmStoryChange = '确认需求变动';
$lang->testcase->copy = '复制用例';
$lang->testcase->group = '分组';
$lang->testcase->groupName = '分组名称';
$lang->testcase->step = '步骤';
$lang->testcase->stepChild = '子步骤';
$lang->testcase->new = '新增';
module/testcase/view/create.html.php
+21 -9
View File
@@ -145,10 +145,16 @@
<div class='input-group'>
<span class='input-group-addon step-item-id'></span>
<textarea rows='1' class='form-control autosize step-steps' name='steps[]'></textarea>
<span class="input-group-addon">
<label class="checkbox-inline">
<input type='checkbox' name='stepType[]' value='parent' class='step-type'> <?php echo $lang->testcase->group ?>
</label>
<span class="input-group-addon step-type-toggle">
<input type='hidden' name='stepType[]' value='item' class='step-type'>
<div class='step-type-menu-box'>
<div class='step-type-current'><span></span> <i class='caret'></i></div>
<div class='step-type-menu'>
<a href='javascript:;' href='step-type-option' data-value='step'><?php echo $lang->testcase->step ?></a>
<a href='javascript:;' href='step-type-option' data-value='group'><?php echo $lang->testcase->group ?></a>
<a href='javascript:;' href='step-type-option' data-value='item'><?php echo $lang->testcase->stepChild ?></a>
</div>
</div>
</span>
</div>
</td>
@@ -168,11 +174,17 @@
<div class='input-group'>
<span class='input-group-addon step-item-id'></span>
<?php echo html::textarea('steps[]', $step->desc, "rows='1' class='form-control autosize step-steps'") ?>
<span class="input-group-addon">
<label class="checkbox-inline">
<?php if(!isset($step->type)) $step->type = 'item';?>
<input type='checkbox' name='stepType[]' value='parent' class='step-type' <?php if($step->type == 'group') echo 'checked'?>> <?php echo $lang->testcase->group ?>
</label>
<span class='input-group-addon step-type-toggle'>
<?php if(!isset($step->type)) $step->type = 'item';?>
<input type='hidden' name='stepType[]' value='<?php echo $step->type ?>' class='step-type'>
<div class='step-type-menu-box'>
<div class='step-type-current'><span></span> <i class='caret'></i></div>
<div class='step-type-menu'>
<a href='javascript:;' href='step-type-option' data-value='step'><?php echo $lang->testcase->step ?></a>
<a href='javascript:;' href='step-type-option' data-value='group'><?php echo $lang->testcase->group ?></a>
<a href='javascript:;' href='step-type-option' data-value='item'><?php echo $lang->testcase->stepChild ?></a>
</div>
</div>
</span>
</div>
</td>
module/testcase/view/edit.html.php
+21 -8
View File
@@ -58,10 +58,16 @@
<div class='input-group'>
<span class='input-group-addon step-item-id'></span>
<textarea rows='1' class='form-control autosize step-steps' name='steps[]'></textarea>
<span class="input-group-addon">
<label class="checkbox-inline">
<input type='checkbox' name='stepType[]' value='parent' class='step-type'> <?php echo $lang->testcase->group ?>
</label>
<span class="input-group-addon step-type-toggle">
<input type='hidden' name='stepType[]' value='item' class='step-type'>
<div class='step-type-menu-box'>
<div class='step-type-current'><span></span> <i class='caret'></i></div>
<div class='step-type-menu'>
<a href='javascript:;' href='step-type-option' data-value='step'><?php echo $lang->testcase->step ?></a>
<a href='javascript:;' href='step-type-option' data-value='group'><?php echo $lang->testcase->group ?></a>
<a href='javascript:;' href='step-type-option' data-value='item'><?php echo $lang->testcase->stepChild ?></a>
</div>
</div>
</span>
</div>
</td>
@@ -81,10 +87,17 @@
<div class='input-group'>
<span class='input-group-addon step-item-id'></span>
<?php echo html::textarea('steps[]', $step->desc, "rows='1' class='form-control autosize step-steps'") ?>
<span class="input-group-addon">
<label class="checkbox-inline">
<input type='checkbox' name='stepType[]' value='parent' class='step-type' <?php if($step->type == 'group') echo 'checked'?>> <?php echo $lang->testcase->group ?>
</label>
<span class='input-group-addon step-type-toggle'>
<?php if(!isset($step->type)) $step->type = 'item';?>
<input type='hidden' name='stepType[]' value='<?php echo $step->type ?>' class='step-type'>
<div class='step-type-menu-box'>
<div class='step-type-current'><span></span> <i class='caret'></i></div>
<div class='step-type-menu'>
<a href='javascript:;' href='step-type-option' data-value='step'><?php echo $lang->testcase->step ?></a>
<a href='javascript:;' href='step-type-option' data-value='group'><?php echo $lang->testcase->group ?></a>
<a href='javascript:;' href='step-type-option' data-value='item'><?php echo $lang->testcase->stepChild ?></a>
</div>
</div>
</span>
</div>
</td>