New appearance for course creation, Work in progress - refs BT#2681

main/course_info/start.php

@@ -24,7 +24,7 @@ $tpl->assign('course_url', $link);
 $tpl->assign('course_title', Display::url($title, $link));
 $tpl->assign('course_id', $course_info['code']);
 $tpl->assign('just_created', isset($_GET['first']) && $_GET['first'] ? 1 : 0);
-$add_course_tpl = $tpl->get_template('create_course/add_course.tpl');
+$add_course_tpl = $tpl->get_template('create_course/start.html.twig');
 $content = $tpl->fetch($add_course_tpl);
 
 $tpl->assign('content', $content);

main/create_course/add_course.php

@@ -74,7 +74,7 @@ $form = new FormValidator('add_course');
 $form->addElement('header', $tool_name);
 
 // Title
-$form->addElement(
+/*$form->addElement(
     'text',
     'title',
     [
@@ -84,9 +84,16 @@ $form->addElement(
     [
         'id' => 'title',
     ]
-);
+);*/
+$form->addText(
+    'title',
+    [
+        get_lang('CourseName'),
+        get_lang('For example: Innovation management'),
+    ],
+    true);
 $form->applyFilter('title', 'html_filter');
-$form->addRule('title', get_lang('ThisFieldIsRequired'), 'required');
+//$form->addRule('title', get_lang('ThisFieldIsRequired'), 'required');
 
 $form->addButtonAdvancedSettings('advanced_params');
 $form->addElement(
@@ -94,6 +101,28 @@ $form->addElement(
     '<div id="advanced_params_options" style="display:none">'
 );
 
+// Picture
+$form->addFile(
+    'picture',
+    [
+        get_lang('AddPicture')
+    ],
+    [
+        'id' => 'picture',
+        'class' => 'picture-form',
+        'crop_image' => true
+    ]
+);
+
+$allowed_picture_types = api_get_supported_image_extensions(false);
+
+$form->addRule(
+    'picture',
+    get_lang('OnlyImagesAllowed').' ('.implode(',', $allowed_picture_types).')',
+    'filetype',
+    $allowed_picture_types
+);
+
 $countCategories = $courseCategoriesRepo->countAllInAccessUrl(
     $accessUrlId,
     api_get_configuration_value('allow_base_course_category')
@@ -281,7 +310,7 @@ if (isset($_user['language']) && $_user['language'] != '') {
 
 $form->setDefaults($values);
 $message = null;
-$content = null;
+$formContent = null;
 
 // Validate the form.
 if ($form->validate()) {
@@ -333,6 +362,18 @@ if ($form->validate()) {
             $course_info = CourseManager::create_course($params);
 
             if (!empty($course_info)) {
+
+                // update course picture
+                $picture = $_FILES['picture'];
+                if (!empty($picture['name'])) {
+                    $picture_uri = CourseManager::update_course_picture(
+                        $course_info,
+                        $picture['name'],
+                        $picture['tmp_name'],
+                        $course_values['picture_crop_result']
+                    );
+                }
+
                 /*
                 $directory  = $course_info['directory'];
                 $title      = $course_info['title'];
@@ -365,7 +406,7 @@ if ($form->validate()) {
                     false
                 );
                 // Display the form.
-                $content = $form->returnForm();
+                $formContent = $form->returnForm();
             }
         } else {
             // Create a request for a new course.
@@ -405,7 +446,7 @@ if ($form->validate()) {
                     false
                 );
                 // Display the form.
-                $content = $form->returnForm();
+                $formContent = $form->returnForm();
             }
         }
     } else {
@@ -415,16 +456,19 @@ if ($form->validate()) {
             false
         );
         // Display the form.
-        $content = $form->returnForm();
+        $formContent = $form->returnForm();
     }
 } else {
     if (!$course_validation_feature) {
         $message = Display::return_message(get_lang('Explanation'));
     }
     // Display the form.
-    $content = $form->returnForm();
+    $formContent = $form->returnForm();
 }
 
+
+$tpl->assign('form', $formContent);
+$layout = $tpl->fetch($tpl->get_template('create_course/add_course.html.twig'));
 $tpl->assign('message', $message);
-$tpl->assign('content', $content);
+$tpl->assign('content', $layout);
 $tpl->display_one_col_template();

main/inc/lib/pear/HTML/QuickForm/advanced_settings.php

@@ -54,7 +54,7 @@ class HTML_QuickForm_advanced_settings extends HTML_QuickForm_static
 
         $html .= '  
             <div class="col-sm-10">         
-            <button id="'.$name.'" type="button" class="btn btn-outline-secondary advanced_options"
+            <button id="'.$name.'" type="button" class="btn btn-secondary advanced_options"
                     data-toggle="button" aria-pressed="false" autocomplete="off">
                 <em class="fa fa-bars"></em> '.$label.'
             </button>

main/template/default/create_course/add_course.html.twig

@@ -1,56 +1,47 @@
 {% autoescape false %}
-{% if just_created == 1%}
-    <h3>{{ 'JustCreated'|get_lang }} {{ course_title }}</h3>
-    <hr />
-{% endif %}
-
-<h3>{{ 'ThingsToDo'|get_lang }}</h3>
-<br />
-<div id="course_thing_to_do" class="row">
-    <div class="col-md-3">
-        <div class="thumbnail">
-            {{ 'info.png' | img(64, 'AddCourseDescription'|get_lang ) }}
-            <div class="caption">
-                <a href="{{ _p.web_main }}course_description/?cidReq={{ course_id }}" class="btn btn-default">
-                    <em class="fa fa-info-circle"></em> {{'AddCourseDescription'|get_lang}}
-                </a>
-            </div>
-        </div>
+<div class="row">
+    <div class="col-md-8">
+        {{ form }}
     </div>
-    <div class="col-md-3">
-        <div class="thumbnail">
-            {{ 'folder_document.png' | img(64, 'UploadADocument'|get_lang ) }}
-            <div class="caption">
-                <a href="{{ _p.web_main }}document/document.php?cidReq={{ course_id }}" class="btn btn-default">
-                    <em class="fa fa-paper-plane"></em> {{'UploadADocument'|get_lang}}
-                </a>
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-header">
+                {{ 'Preview of the course'|trans }}
             </div>
-        </div>
-    </div>
-    <div class="col-md-3">
-        <div class="thumbnail">
-            {{ 'forum.png' | img(64, 'AddForum'|get_lang ) }}
-
-            <div class="caption">
-                <a href="{{ _p.web_main }}forum/index.php?cidReq={{ course_id }}" class="btn btn-default">
-                    <em class="fa fa-users"></em> {{ 'AddForum'|get_lang }}
-                </a>
-            </div>
-        </div>
-    </div>
-    {% if ("allow_user_course_subscription_by_course_admin" | api_get_setting) == 'true' or is_granted('ROLE_ADMIN') %}
-    <div class="col-md-3">
-        <div class="thumbnail">
-        {{ 'user.png' | img(64, 'SubscribeUserToCourse'|get_lang ) }}
-            <div class="caption">
-            <a href="{{ _p.web_main }}user/subscribe_user.php?cidReq={{ course_id }}" class="btn btn-default">
-                <em class="fa fa-user-plus"></em> {{ 'SubscribeUserToCourse'|get_lang }}
-            </a>
+            <div class="card-body">
+                <div id="view-course" class="card card-course-classic ">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-md-5">
+                                <a href="#">
+                                    <img src="http://chamilo2.test/../courses/INTRODUCCIONLAREALIDADAUMENTADA/course-pic.png" class="img-fluid">
+                                </a>
+                            </div>
+                            <div class="col-md-7">
+                                <div class="card-inside">
+                                    <div class="float-right">
+                                        <a class="btn btn-outline-primary btn-sm" href="#">
+                                            <i class="fas fa-pencil-alt"></i>
+                                        </a>
+                                    </div>
+                                    <h5 class="title">
+                                        <a href="#">
+                                            Titulo del curso
+                                        </a>
+                                    </h5>
+                                    <div class="list-teachers">
+                                        <i class="fas fa-user-tie"></i>
+                                        <a href="#">
+                                            Joe Doe
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-    {% endif %}
 </div>
-<div class="clear"></div>
-
 {% endautoescape %}

main/template/default/create_course/start.html.twig

@@ -0,0 +1,56 @@
+{% autoescape false %}
+    {% if just_created == 1%}
+        <h3>{{ 'JustCreated'|get_lang }} {{ course_title }}</h3>
+        <hr />
+    {% endif %}
+
+    <h3>{{ 'ThingsToDo'|get_lang }}</h3>
+    <br />
+    <div id="course_thing_to_do" class="row">
+        <div class="col-md-3">
+            <div class="thumbnail">
+                {{ 'info.png' | img(64, 'AddCourseDescription'|get_lang ) }}
+                <div class="caption">
+                    <a href="{{ _p.web_main }}course_description/?cidReq={{ course_id }}" class="btn btn-default">
+                        <em class="fa fa-info-circle"></em> {{'AddCourseDescription'|get_lang}}
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="thumbnail">
+                {{ 'folder_document.png' | img(64, 'UploadADocument'|get_lang ) }}
+                <div class="caption">
+                    <a href="{{ _p.web_main }}document/document.php?cidReq={{ course_id }}" class="btn btn-default">
+                        <em class="fa fa-paper-plane"></em> {{'UploadADocument'|get_lang}}
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="thumbnail">
+                {{ 'forum.png' | img(64, 'AddForum'|get_lang ) }}
+
+                <div class="caption">
+                    <a href="{{ _p.web_main }}forum/index.php?cidReq={{ course_id }}" class="btn btn-default">
+                        <em class="fa fa-users"></em> {{ 'AddForum'|get_lang }}
+                    </a>
+                </div>
+            </div>
+        </div>
+        {% if ("allow_user_course_subscription_by_course_admin" | api_get_setting) == 'true' or is_granted('ROLE_ADMIN') %}
+            <div class="col-md-3">
+                <div class="thumbnail">
+                    {{ 'user.png' | img(64, 'SubscribeUserToCourse'|get_lang ) }}
+                    <div class="caption">
+                        <a href="{{ _p.web_main }}user/subscribe_user.php?cidReq={{ course_id }}" class="btn btn-default">
+                            <em class="fa fa-user-plus"></em> {{ 'SubscribeUserToCourse'|get_lang }}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    </div>
+    <div class="clear"></div>
+
+{% endautoescape %}