Internal: Improve UI and fix bugs for session lessons and category permissions

assets/css/scss/_lp.scss

@@ -7,33 +7,6 @@
   padding: 0;
 }
 
-#lp_item_list li {
-  //border-bottom: 1px solid #dddddd;
-  //width: 100%;
-  //margin-bottom: 5px;
-  //margin-top: 5px;
-}
-
-#lp_item_list, #lp_item_list li {
-  /* list-style-type: none;*/
-}
-
-#lp_item_list .active {
-  border: 2px dotted #BDB76B;
-}
-
-#lp_item_list li:last-child {
-  //border-bottom: none;
-}
-
-#lp_item_list .item_data {
-  padding: .5em;
-}
-
-#lp_item_list .item_data span {
-  margin-left: 5px;
-}
-
 .item_data .button_actions {
   display: none;
   margin: 5px 0;
@@ -67,14 +40,179 @@
   font-size: 14px
 }
 
-.lp_resource li {
-  padding: 10px 10px 10px 20px;
-}
 
 .list-group-item-empty {
   height: 50px;
 }
 
-.media {
+.display-panel-collapse {
-  display:none;
+  display: block;
+
+  h5 {
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin-bottom: 0;
+  }
+
+  a {
+    text-decoration: none;
+    color: #1f2937;
+  }
+
+  .card-body {
+    padding: 1rem;
+  }
+}
+
+#resource_tab {
+  margin-top: 15px;
+}
+
+#resource_tab .nav-tabs {
+  .nav-link.active {
+    background-color: #007bff;
+    border-color: #007bff;
+    border-radius: 0.25rem;
+    color: #FFF;
+  }
+
+  .nav-link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 0.5rem;
+    transition: background-color 0.3s, transform 0.3s;
+  }
+
+  .nav-link i {
+    font-size: 64px;
+    color: #495057;
+    transition: color 0.3s;
+    height: auto !important;
+    padding: 2px;
+  }
+
+  .nav-link:hover {
+    background-color: #e9ecef;
+    transform: scale(1.05);
+    color: inherit;
+  }
+
+  .nav-link i:hover {
+    color: #495057 !important;
+  }
+
+  .nav-link.active i {
+    color: #ffffff;
+  }
+}
+
+.mdi-cursor-move {
+  cursor: move !important;
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+#lp_item_list {
+  font-family: 'Arial', sans-serif;
+  background-color: #f9f9f9;
+
+  .list-group-item {
+    border: 1px solid #ddd;
+    margin-bottom: 5px;
+    padding: 10px;
+    background-color: white;
+  }
+
+  .ch-tool-icon {
+    color: #555;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+
+  .ch-tool-icon:hover {
+    color: #000;
+  }
+
+  .button_actions a {
+    margin-right: 5px;
+  }
+
+  .btn-toolbar {
+    margin-top: 5px;
+  }
+}
+
+#doc_list {
+  .list-group-item {
+    padding-left: 10px;
+    display: block;
+  }
+
+  .nested-1 {
+    padding-left: 20px;
+  }
+
+  .nested-2 {
+    padding-left: 25px;
+  }
+
+  .nested-3 {
+    padding-left: 30px;
+    border: none;
+  }
+
+  .nested-4 {
+    padding-left: 35px;
+    border: none;
+  }
+
+  .nested-5 {
+    padding-left: 40px;
+    border: none;
+  }
+
+  .nested-6 {
+    padding-left: 45px;
+    border: none;
+  }
+}
+
+#dropzone {
+  position: relative;
+  overflow: hidden;
+  direction: ltr;
+  cursor: pointer;
+  text-align: center;
+  color: #333;
+  font-weight: bold;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  width: auto;
+  margin-left: auto;
+  margin-right: auto;
+  height: auto;
+  line-height: 50px;
+  background-color: #D4E6F0;
+  border: 2px dashed #bbbbbb;
+  font-size: 120%;
+  margin-bottom: 0;
+}
+
+#dropzone.hover {
+  background: lawngreen;
+}
+
+#upload_form .fa-plus-square-o, #upload_form .fa-minus-square-o {
+  cursor: pointer;
+}
+
+#upload, .description-upload {
+  padding-top: 15px;
+}
+
+.description-upload {
+  margin-bottom: 15px;
 }

assets/js/legacy/lp.js

@@ -16,3 +16,29 @@ window.frameReady = frameReady;
 
 var hljs = require('highlight.js');
 global.hljs = hljs;
+
+document.addEventListener('DOMContentLoaded', (event) => {
+  var tabLinks = document.querySelectorAll('.nav-item.nav-link');
+
+  function removeActiveClasses() {
+    tabLinks.forEach(function(link) {
+      link.classList.remove('active');
+      var tabPanel = document.getElementById(link.getAttribute('aria-controls'));
+      if (tabPanel) {
+        tabPanel.classList.remove('active');
+      }
+    });
+  }
+
+  tabLinks.forEach(function(link) {
+    link.addEventListener('click', function() {
+      removeActiveClasses();
+      this.classList.add('active');
+      var tabContentId = this.getAttribute('aria-controls');
+      var tabContent = document.getElementById(tabContentId);
+      if (tabContent) {
+        tabContent.classList.add('active');
+      }
+    });
+  });
+});

assets/vue/components/layout/DashboardLayout.vue

@@ -1,10 +1,7 @@
 <template>
-  <Topbar />
+  <Topbar v-if="!hideInterface" />
-  <Sidebar v-if="securityStore.isAuthenticated" />
+  <Sidebar v-if="!hideInterface && securityStore.isAuthenticated" />
-  <div
+  <div v-if="!hideInterface" class="app-main" :class="{ 'app-main--no-sidebar': !securityStore.isAuthenticated }">
-    class="app-main"
-    :class="{ 'app-main--no-sidebar': !securityStore.isAuthenticated }"
-  >
     <Breadcrumb v-if="showBreadcrumb" />
     <slot />
     <router-view />
@@ -12,12 +9,12 @@
 </template>
 
 <script setup>
+import { ref } from "vue"
 import Breadcrumb from "../../components/Breadcrumb.vue"
 import Topbar from "../../components/layout/Topbar.vue"
 import Sidebar from "../../components/layout/Sidebar.vue"
 import { useSecurityStore } from "../../store/securityStore"
 
-// eslint-disable-next-line no-undef
 defineProps({
   showBreadcrumb: {
     type: Boolean,
@@ -26,4 +23,6 @@ defineProps({
 })
 
 const securityStore = useSecurityStore()
+const chamiloAppSettings = window.ChamiloAppSettings || {}
+const hideInterface = ref(!!chamiloAppSettings.hideInterface)
 </script>

public/main/inc/lib/display.lib.php

@@ -2455,9 +2455,9 @@ class Display
             });
         </script>';
             $html = '
-        <div class="mt-4 rounded-lg bg-gray-50 p-2">
+        <div class="mt-4 rounded-lg bg-gray-15 display-panel-collapse mr-4">
-            <div class="px-4 bg-gray-100 border border-gray-50" id="card_'.$idAccordion.'">
+            <div class="px-4 bg-gray-25 border border-gray-30" id="card_'.$idAccordion.'">
-                <h5>
+                <h5 class="p-2">
                     <a role="button"
                         class="cursor-pointer"
                         data-toggle="collapse"
@@ -2471,7 +2471,7 @@ class Display
             </div>
             <div
                 id="collapse_'.$idAccordion.'"
-                class="px-4 border border-gray-50 bg-white collapse custom-collapse '.(($open) ? 'active' : '').'"
+                class="px-4 border border-gray-30 bg-white collapse custom-collapse '.(($open) ? 'active' : '').'"
             >
                 <div id="collapse_contant_'.$idAccordion.'"  class="card-body ">';
 

public/main/lp/learnpath.class.php

@@ -7237,9 +7237,8 @@ class learnpath
 
             foreach ($lps as $lp) {
                 $lp->setCategory(null);
-            }
-
                 $em->persist($lp);
+            }
 
             $course = api_get_course_entity();
             $session = api_get_session_entity();
@@ -7753,7 +7752,7 @@ class learnpath
                     $values['title']
                 );
                 $this->add_item(
-                    0,
+                    null,
                     $lastItemId,
                     'final_item',
                     $documentId,

public/main/lp/lp_list.php

@@ -99,6 +99,14 @@ if ($allowCategory) {
     foreach ($categoriesTempList as $category) {
         $categorySessionId = (int) learnpath::getCategorySessionId($category->getIid());
         if ($categorySessionId === $sessionId || 0 === $categorySessionId) {
+            if (!empty($categorySessionId)) {
+                $sessionImage = api_get_session_image(
+                    $categorySessionId,
+                    api_get_user_entity()
+                );
+                $newTitle = $category->getTitle().' '.$sessionImage;
+                $category->setTitle($newTitle);
+            }
             $newCategoryFiltered[] = $category;
         }
         if (!empty($sessionId) && empty($firstSessionCategoryId) && $categorySessionId == $sessionId) {
@@ -846,13 +854,21 @@ foreach ($categories as $category) {
     }
 
     $shortcut = false;
+    $canEditCategory = false;
     if ($category->hasResourceNode()) {
         $shortcut = $shortcutRepository->getShortcutFromResource($category);
+        $categorySession = 0;
+        $categoryLink = $category->getResourceNode()->getResourceLinks()->first();
+        if ($categoryLink && $categoryLink->getSession()) {
+            $categorySession = (int) $categoryLink->getSession()->getId();
+        }
+        $canEditCategory = api_get_session_id() === $categorySession;
     }
 
     $data[] = [
         'category' => $category,
         'category_visibility' => $visibility,
+        'can_edit_category' => $canEditCategory,
         'category_is_published' => $shortcut ? 1 : 0,
         'lp_list' => $listData,
     ];

src/CoreBundle/Resources/views/Index/vue.html.twig

@@ -1,6 +1,18 @@
-{% extends "@ChamiloCore/Layout/no_layout.html.twig" %}
+{% extends "@ChamiloCore/Layout/base-layout.html.twig" %}
-
+{% block chamilo_wrap %}
+    {%- autoescape %}
+        {% if not from_vue %}
+            <div id="app" data-flashes="{{ app.flashes()|json_encode }}"></div>
+        {% endif %}
+    {% endautoescape -%}
+    {% autoescape false %}
+        <section id="sectionMainContent" class="section-content">
             {%- block content %}
                 {% include '@ChamiloCore/Layout/vue_setup.html.twig' %}
-    {#    {{ encore_entry_script_tags('vue') }}#}
+            {% endblock -%}
+        </section>
+    {% endautoescape %}
+{% endblock %}
+
+{% block chamilo_footer %}
 {% endblock %}

src/CoreBundle/Resources/views/Layout/no_layout.html.twig

@@ -13,6 +13,11 @@
             {% endblock -%}
         </section>
     {% endautoescape %}
+    <script>
+      window.ChamiloAppSettings = {
+        hideInterface: {{ not from_vue ? 'true' : 'false' }},
+      };
+    </script>
 {% endblock %}
 
 {% block chamilo_footer %}

src/CoreBundle/Resources/views/LearnPath/list.html.twig

@@ -33,7 +33,7 @@
                                     {{ lp_data.category.getTitle() | trim }}
                                 </h6>
                                 {% if lp_data.category.iid > 0 %}
-                                    {% if not session %}
+                                    {% if lp_data.can_edit_category %}
                                         <a href="{{ 'lp_controller.php?' ~ course_url_params ~ '&action=add_lp_category&id=' ~ lp_data.category.iid }}"
                                            title="{{ "Edit"|trans }}">
                                             <i class="mdi-pencil mdi ch-tool-icon" style="font-size: 22px; width: 22px; height: 22px;" aria-hidden="true" title="{{ "Edit"|trans }}"></i>
@@ -94,7 +94,7 @@
                                             <i class="mdi-checkbox-multiple-blank mdi ch-tool-icon" style="font-size: 22px; width: 22px; height: 22px;" aria-hidden="true" title="{{ "Hide"|trans }}"></i>
                                         </a>
                                     {% endif %}
-                                    {% if not session %}
+                                    {% if lp_data.can_edit_category %}
                                     <a href="{{ 'lp_controller.php?' ~ course_url_params  ~ '&action=delete_lp_category&id=' ~ lp_data.category.iid }}"
                                        title="{{ "Delete"|trans }}">
                                         <i class="mdi-delete mdi ch-tool-icon" style="font-size: 22px; width: 22px; height: 22px;" aria-hidden="true" title="{{ "Delete"|trans }}"></i>

src/CourseBundle/Entity/CLpCategory.php

@@ -8,6 +8,7 @@ namespace Chamilo\CourseBundle\Entity;
 
 use Chamilo\CoreBundle\Entity\AbstractResource;
 use Chamilo\CoreBundle\Entity\ResourceInterface;
+use Chamilo\CoreBundle\Entity\ResourceShowCourseResourcesInSessionInterface;
 use Chamilo\CoreBundle\Entity\User;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
@@ -22,7 +23,7 @@ use Symfony\Component\Validator\Constraints as Assert;
  */
 #[ORM\Table(name: 'c_lp_category')]
 #[ORM\Entity(repositoryClass: SortableRepository::class)]
-class CLpCategory extends AbstractResource implements ResourceInterface, Stringable
+class CLpCategory extends AbstractResource implements ResourceInterface, ResourceShowCourseResourcesInSessionInterface, Stringable
 {
     #[ORM\Column(name: 'iid', type: 'integer')]
     #[ORM\Id]