Sequences: Improve interface flow #2693

app/Resources/public/css/base.css

@@ -5548,10 +5548,10 @@ div#chat-remote-video video {
 #resource .parent .big-icon .sequence-id,
 #children .parent .big-icon .sequence-id {
     border: 0 none;
-    border-radius: 50%;
+    border-radius: 20px;
     background-color: #E74C3C;
-    width: 20%;
     color: #ffffff;
+    padding: 0 6px;
     position: absolute;
     right: 5px;
     top: 5px;

main/admin/resource_sequence.php

@@ -45,15 +45,16 @@ $em = Database::getManager();
 
 $sequenceList = $em->getRepository('ChamiloCoreBundle:Sequence')->findAll();
 
-$selectSequence->addSelect(
+$slcSequences = $selectSequence->addSelect(
     'sequence',
     get_lang('Sequence'),
     $sequenceList,
-    ['id' => 'sequence_id', 'cols-size' => [3, 7, 2]]
+    ['id' => 'sequence_id', 'cols-size' => [3, 7, 2], 'disabled' => 'disabled']
 );
 
 if (!empty($sequenceList)) {
     $selectSequence->addButtonDelete(get_lang('Delete'));
+    $slcSequences->removeAttribute('disabled');
 }
 
 if ($selectSequence->validate()) {
@@ -83,19 +84,19 @@ $form->addSelect(
     'sessions',
     get_lang('Sessions'),
     $sessionList,
-    ['id' => 'item', 'cols-size' => [4, 7, 1]]
+    ['id' => 'item', 'cols-size' => [4, 7, 1], 'disabled' => 'disabled']
 );
-$form->addButtonNext(get_lang('UseAsReference'), 'use_as_reference', ['cols-size' => [4, 7, 1]]);
+$form->addButtonNext(get_lang('UseAsReference'), 'use_as_reference', ['cols-size' => [4, 7, 1], 'disabled' => 'disabled']);
 $form->addHtml("</div>");
 $form->addHtml("<div class='col-md-6'>");
 $form->addSelect(
     'requirements',
     get_lang('Requirements'),
     $sessionList,
-    ['id' => 'requirements', 'cols-size' => [3, 7, 2]]
+    ['id' => 'requirements', 'cols-size' => [3, 7, 2], 'disabled' => 'disabled']
 );
 
-$form->addButtonCreate(get_lang('SetAsRequirement'), 'set_requirement', false, ['cols-size' => [3, 7, 2]]);
+$form->addButtonCreate(get_lang('SetAsRequirement'), 'set_requirement', false, ['cols-size' => [3, 7, 2], 'disabled' => 'disabled']);
 $form->addHtml("</div>");
 
 $formSave = new FormValidator('');
@@ -107,7 +108,7 @@ $formSave->addButton(
     'success',
     null,
     null,
-    ['cols-size' => [1, 10, 1]]
+    ['cols-size' => [1, 10, 1], 'disabled' => 'disabled']
 );
 
 $tpl->assign('create_sequence', $formSequence->returnForm());

main/template/default/admin/resource_sequence.tpl

@@ -106,10 +106,6 @@
             var type = $('input[name="sequence_type"]').val();
             // By default "set requirement" is set to false
 
-            $('button[name="set_requirement"]').prop('disabled', true);
-            $('#requirements').prop('disabled', true);
-            $('button[name="save_resource"]').prop('disabled', true);
-
             sequenceId = $("#sequence_id option:selected" ).val();
 
             // Load parents
@@ -154,22 +150,31 @@
             });
 
             // Button use as reference
+            $('button[name="use_as_reference"]').click(function(e) {
+                e.preventDefault();
 
-            $('button[name="use_as_reference"]').click(function() {
-                $('button[name="set_requirement"]').prop('disabled', false);
-                $('#requirements').prop('disabled', false);
+                if (!sequenceId) {
+                    return;
+                }
+
+                $('#pnl-preview').show();
+                $('button[name="set_requirement"], #requirements, button[name="save_resource"]').prop('disabled', false);
                 $('#requirements').selectpicker('refresh');
-                $('button[name="save_resource"]').prop('disabled', false);
 
                 useAsReference(type, sequenceId);
-
-                return false;
             });
 
             // Button set requirement
+            $('button[name="set_requirement"]').click(function(e) {
+                e.preventDefault();
 
-            $('button[name="set_requirement"]').click(function() {
-                $("#requirements option:selected" ).each(function() {
+                var requirementsSelectedEl = $("#requirements option:selected");
+
+                if (0 === requirementsSelectedEl.length || !sequenceId) {
+                    return;
+                }
+
+                requirementsSelectedEl.each(function() {
                     var id = $(this).val();
                     if ($.inArray(id, parentList) == -1) {
                         $.ajax({
@@ -181,13 +186,16 @@
                         });
                     }
                 });
-                return false;
             });
 
             // Button save
             $('button[name="save_resource"]').click(function(e) {
                 e.preventDefault();
 
+                if (!sequenceId) {
+                    return;
+                }
+
                 var self = $(this).prop('disabled', true);
 
                 // parse to integer the parents IDs
@@ -253,6 +261,15 @@
 
             $('select#sequence_id').on('change', function() {
                 sequenceId = $(this).val();
+
+                if (sequenceId > 0) {
+                    $('#pnl-configuration').show();
+                    $('#item, button[name="use_as_reference"]').prop('disabled', false);
+
+                    return;
+                }
+
+                $('#pnl-configuration').hide();
             });
 
             $('form[name="frm_select_delete"]').on('submit', function (e) {
@@ -262,6 +279,8 @@
                     e.preventDefault();
                 }
             });
+
+            $('select#sequence_id').trigger('change');
         });
     </script>
     <div class="panel panel-default">
@@ -278,7 +297,7 @@
         </div>
     </div>
 
-    <div class="panel panel-default">
+    <div id="pnl-configuration" class="panel panel-default" style="display: none;">
         <div class="panel-body">
             <div class="section-title-sequence">{{ 'SequenceConfiguration' | get_lang }}</div>
             <div class="row">
@@ -288,7 +307,7 @@
 
         </div>
     </div>
-    <div class="panel panel-default">
+    <div id="pnl-preview" class="panel panel-default" style="display: none;">
         <div class="panel-body">
             <div class="section-title-sequence">{{ 'SequencePreview' | get_lang }}</div>
             <div class="row">