Courses: Use icons instead of images. Add icons in tools.yml

assets/vue/App.vue

@@ -212,7 +212,8 @@ export default {
           // Redirect to the login if status 401.
           //this.$router.replace({path: "/login"}).catch(()=>{});
           // Real redirect to avoid loops with Login.vue page.
-          window.location.href = '/login';
+          //window.location.href = '/login';
+            this.showMessage(err.response.data.error, 'warning');
         } else if (500 === err.response.status) {
           if (err.response) {
             // Request made and server responded

assets/vue/components/course/HomeCourseCard.vue

@@ -1,15 +1,19 @@
 <template>
   <div
-      class="bg-gray-100 rounded-xl p-2 shadow-md"
+      class=""
   >
     <div class="flex flex-col flex-center">
-      <div class="mx-auto">
+      <div class="border p-12 rounded-xl shadow-md">
         <a :href="goToCourseTool(course, tool)">
-          <img
-              :alt="tool.name"
-              :src="'/img/tools/' + tool.name + '.png'"
-              class="w-32 h-32 object-contain"
-          />
+          <v-icon>
+            {{ tool.tool.icon }}
+            x-large
+          </v-icon>
+<!--          <img-->
+<!--              :alt="tool.tool.name"-->
+<!--              :src="'/img/tools/' + tool.tool.name + '.png'"-->
+<!--              class="w-24 h-24 object-contain"-->
+<!--          />-->
         </a>
       </div>
 
@@ -17,12 +21,12 @@
         <a
             :href="goToCourseTool(course, tool)"
         >
-          {{ tool.nameToTranslate }}
+          {{ tool.ctool.nameToTranslate }}
         </a>
 
         <button v-if="isCurrentTeacher && changeVisibility" @click="changeVisibility(course, tool)">
           <FontAwesomeIcon
-              v-if="tool.resourceNode.resourceLinks[0].visibility === 2"
+              v-if="tool.ctool.resourceNode.resourceLinks[0].visibility === 2"
               icon="eye" size="lg"
           />
           <FontAwesomeIcon

assets/vue/main.js

@@ -77,9 +77,9 @@ store.registerModule(
 );
 
 // Vuetify.
-/*import '@mdi/font/css/materialdesignicons.css';
+import '@mdi/font/css/materialdesignicons.css';
 import { createVuetify } from 'vuetify';
-import 'vuetify/lib/styles/main.sass';
+//import 'vuetify/lib/styles/main.sass';
 import * as components from 'vuetify/lib/components';
 import * as directives from 'vuetify/lib/directives';
 import { aliases, mdi } from 'vuetify/lib/iconsets/mdi'
@@ -106,7 +106,7 @@ const options = {
         defaultTheme: 'light'
     },
 }
-const vuetify = createVuetify(options);*/
+const vuetify = createVuetify(options);
 
 import DashboardLayout from './components/layout/DashboardLayout.vue'
 import EmptyLayout from './components/layout/EmptyLayout.vue'
@@ -171,7 +171,7 @@ app
     .use(Quasar, quasarUserOptions)
     .use(VueFlatPickr)
     //.use(VuelidatePlugin)
-    //.use(vuetify)
+    .use(vuetify)
     .use(router)
     .use(store)
     .use(i18n)

assets/vue/pages/Index.vue

@@ -26,6 +26,7 @@
                     Sign in
                   </h2>
                 </div>
+
                 <Login />
               </div>
             </div>

assets/vue/views/course/Home.vue

@@ -1,13 +1,59 @@
 <template>
   <div v-if="course" class="grid gap-4">
-    <q-card-section>
-      <div class="text-h6">
+    <div class="flex justify-between">
+      <div class="text-h6 font-bold">
         {{ course.title }}
       </div>
-      <div class="text-subtitle2">
-        {{ course.description }}
+
+      <div v-if="isCurrentTeacher && course">
+        <v-icon>mdi-cog</v-icon>
+
+        <select>
+          <option
+              v-for="tool in tools.admin"
+          >
+            {{ tool.tool.name }}
+          </option>
+        </select>
+
+      </div>
+    </div>
+    <hr/>
+
+    <div class="bg-gradient-to-r from-gray-100 to-gray-50 flex flex-col rounded-md text-center p-2">
+      <div class="text-center">
+        <div>
+          <v-icon>mdi-book-open-page-variant</v-icon>
+        </div>
+
+        <div class="p-text-bold">
+          You don't have course content
+        </div>
+        <div>
+        Add a course introduction to display to your students.
+        </div>
+        <a class="btn btn-info">
+          <v-icon>mdi-plus</v-icon>
+          Course introduction
+        </a>
+
+      </div>
+    </div>
+
+    <hr />
+
+    <div class="flex justify-between">
+      <div class="text-h6 font-bold">
+        Tools
+      </div>
+      <div>
+        <v-icon>
+          mdi-format-paint
+        </v-icon>
+        Customize
       </div>
-    </q-card-section>
+    </div>
+
 
     <div
         class="grid gap-3 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-6"
@@ -34,20 +80,6 @@
           :change-visibility="changeVisibility"
       />
     </div>
-
-    <h2 v-if="isCurrentTeacher && tools && course">Settings</h2>
-
-    <div
-        v-if="isCurrentTeacher"
-        class="grid gap-3 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-6"
-    >
-      <HomeCourseCard
-          v-for="tool in tools.admin"
-          :course="course"
-          :tool="tool"
-          :go-to-course-tool="goToCourseTool"
-      />
-    </div>
   </div>
 </template>
 
@@ -57,10 +89,10 @@ import Toolbar from '../../components/Toolbar.vue';
 import HomeCourseCard from '../../components/course/HomeCourseCard.vue';
 import HomeShortCutCard from '../../components/course/HomeShortCutCard.vue';
 
-import { useRoute } from 'vue-router'
+import {useRoute} from 'vue-router'
 import axios from "axios";
-import { ENTRYPOINT } from '../../config/entrypoint';
-import { reactive, toRefs} from 'vue'
+import {ENTRYPOINT} from '../../config/entrypoint';
+import {reactive, toRefs} from 'vue'
 import {mapGetters} from "vuex";
 
 export default {
@@ -73,7 +105,7 @@ export default {
     HomeShortCutCard
   },
   setup() {
-    const state = reactive({course: [], tools: [], shortcuts:[], goToCourseTool, changeVisibility, goToShortCut });
+    const state = reactive({course: [], tools: [], shortcuts: [], goToCourseTool, changeVisibility, goToShortCut});
     const route = useRoute()
     let courseId = route.params.id;
     let sessionId = route.query.sid ?? 0;
@@ -87,7 +119,7 @@ export default {
     });
 
     function goToCourseTool(course, tool) {
-      let url = '/course/' + courseId + '/tool/' + tool.name + '?sid=' + sessionId;
+      let url = '/course/' + courseId + '/tool/' + tool.tool.name + '?sid=' + sessionId;
 
       return url;
     }

assets/vue/views/user/courses/List.vue

@@ -1,6 +1,6 @@
 <template>
 <!--  {{ loading }}-->
-  <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-2">
+  <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 mt-2">
       <CourseCardList
           :courses="courses"
       />

src/CoreBundle/Controller/CourseHomeController.php

@@ -128,7 +128,7 @@ class CourseHomeController extends ToolBaseController
             if (!$isCourseTeacher && 'admin' === $toolModel->getCategory()) {
                 continue;
             }
-            $tools[$toolModel->getCategory()][] = $item;
+            $tools[$toolModel->getCategory()][] = ['ctool' => $item, 'tool' => $toolModel];
         }
 
         // Get session-career diagram

src/CoreBundle/Entity/Listener/ResourceListener.php

@@ -179,7 +179,7 @@ class ResourceListener
         if ($resource->hasUploadFile()) {
             //error_log('hasUploadFile');
             // @todo check CreateResourceNodeFileAction
-            /** @var File $uploadedFile */
+            /** @var File|null $uploadedFile */
             $uploadedFile = $request->getCurrentRequest()->files->get('uploadFile');
 
             if (null === $uploadedFile) {

src/CoreBundle/Entity/Listener/UserListener.php

@@ -10,7 +10,6 @@ use Chamilo\CoreBundle\Entity\ResourceNode;
 use Chamilo\CoreBundle\Entity\User;
 use Chamilo\CoreBundle\Repository\Node\UserRepository;
 use Doctrine\ORM\Event\LifecycleEventArgs;
-use Exception;
 use Symfony\Component\Security\Core\Exception\UserNotFoundException;
 use Symfony\Component\Security\Core\Security;
 

src/CoreBundle/Resources/config/tools.yml

@@ -42,6 +42,8 @@ services:
     # Agenda tool
     chamilo_core.tool.agenda:
         class: Chamilo\CoreBundle\Tool\Agenda
+        calls:
+            -   setIcon: [ 'mdi-calendar' ]
         arguments:
             - 'agenda'
             - 'authoring'
@@ -58,6 +60,8 @@ services:
     # Announcement tool
     chamilo_core.tool.announcement:
         class: Chamilo\CoreBundle\Tool\Announcement
+        calls:
+            - setIcon: [ 'mdi-bullhorn' ]
         arguments:
             - 'announcement'
             - 'authoring'
@@ -170,6 +174,8 @@ services:
 
     chamilo_core.tool.document:
         class: Chamilo\CoreBundle\Tool\Document
+        calls:
+            -   setIcon: [ 'mdi-file-document' ]
         arguments:
             - 'document'
             - 'authoring'
@@ -236,6 +242,8 @@ services:
 
     chamilo_core.tool.glossary:
         class: Chamilo\CoreBundle\Tool\Glossary
+        calls:
+            - setIcon: [ 'mdi-alphabetical' ]
         arguments:
             - 'glossary'
             - 'authoring'
@@ -266,6 +274,8 @@ services:
 
     chamilo_core.tool.group:
         class: Chamilo\CoreBundle\Tool\Group
+        calls:
+            -   setIcon: [ 'mdi-account-group' ]
         arguments:
             - 'group'
             - 'interaction'
@@ -313,6 +323,8 @@ services:
 
     chamilo_core.tool.member:
         class: Chamilo\CoreBundle\Tool\Member
+        calls:
+            -   setIcon: [ 'mdi-account-multiple' ]
         arguments:
             - 'member'
             - 'interaction'
@@ -389,9 +401,11 @@ services:
 
     chamilo_core.tool.tracking:
         class: Chamilo\CoreBundle\Tool\Tracking
+        calls:
+            -   setIcon: [ 'mdi-chart-bar' ]
         arguments:
             - 'tracking'
-            - 'admin'
+            - 'interaction'
             - '/main/tracking/courseLog.php'
             - '@chamilo_course.settings.tracking'
         tags:

src/CoreBundle/Tool/AbstractTool.php

@@ -7,10 +7,19 @@ declare(strict_types=1);
 namespace Chamilo\CoreBundle\Tool;
 
 use Sylius\Bundle\SettingsBundle\Schema\SchemaInterface;
+use Symfony\Component\Serializer\Annotation\Groups;
 
 abstract class AbstractTool implements ToolInterface
 {
+    /**
+     * @Groups({"ctool:read"})
+     */
     protected string $name;
+
+    /**
+     * @Groups({"ctool:read"})
+     */
+    protected string $icon;
     protected string $category;
     protected string $link;
     protected string $image;
@@ -41,6 +50,7 @@ abstract class AbstractTool implements ToolInterface
         $this->image = $name.'.png';
         $this->settings = $settings;
         $this->resourceTypes = $resourceTypes;
+        $this->icon = 'mdi-crop-square';
     }
 
     public function isCourseTool(): bool
@@ -89,4 +99,16 @@ abstract class AbstractTool implements ToolInterface
 
         return $this;
     }
+
+    public function getIcon(): string
+    {
+        return $this->icon;
+    }
+
+    public function setIcon(string $icon): self
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
 }

src/CourseBundle/Entity/CTool.php

@@ -73,8 +73,6 @@ class CTool extends AbstractResource implements ResourceInterface
     protected ?Session $session = null;
 
     /**
-     * @Groups({"ctool:read"})
-     *
      * @ORM\ManyToOne(targetEntity="Chamilo\CoreBundle\Entity\Tool")
      * @ORM\JoinColumn(name="tool_id", referencedColumnName="id", nullable=false)
      */
@@ -157,12 +155,7 @@ class CTool extends AbstractResource implements ResourceInterface
         return $this;
     }
 
-    /**
-     * Get visibility.
-     *
-     * @return bool
-     */
-    public function getVisibility()
+    public function getVisibility(): bool
     {
         return $this->visibility;
     }