Added index component

Author: alistairwheeler

others/vuejs-frontend/src/App.vue

@@ -1,20 +1,24 @@
 <template>
-    <metainfo></metainfo>
-    <div v-if="isStyleLoaded" id="app" class="app">
-        <CustomHeader/>
-        <main>
-            <nav class="navigation-drawer" v-show="isDrawerOpen" :style="{background: `linear-gradient(${themeValues.primaryColor} 65%, ${themeValues.secondaryColor})`}">
-                <MenuSearchBar v-model="searchQuery" class="search-bar" />
-                <TreeViewNode v-for="(motherCategory, index) in filteredTree" :key="index" :node="motherCategory" :depth="0" :searchQuery="searchQuery"/>
-            </nav>
-            <div class="page-content">
-                <router-view v-if="!isFetching" class="page-content__router-view" :key="$route.fullPath"/>
-                <Spinner v-else/>
-            </div>
-        </main>
-        <LightBox/>
+    <div class="root-container">
+        <metainfo></metainfo>
+        <div v-if="isStyleLoaded" id="app" class="app">
+            <CustomHeader/>
+            <main>
+                <nav class="navigation-drawer" v-show="isDrawerOpen" :style="{background: `linear-gradient(${themeValues.primaryColor} 65%, ${themeValues.secondaryColor})`}">
+                    <MenuSearchBar v-model="searchQuery" class="search-bar" />
+                    <TreeViewNode v-for="(motherCategory, index) in filteredTree" :key="index" :node="motherCategory" :depth="0" :searchQuery="searchQuery"/>
+                </nav>
+                <div class="page-content">
+                    <router-view v-if="!isFetching" class="page-content__router-view" :key="$route.fullPath"/>
+                    <Spinner v-else/>
+                    <TableOfContents class="page-content_toc" v-if="!isFetching"/>
+                    <Spinner v-else/>
+                </div>
+            </main>
+            <LightBox/>
+        </div>
+        <Spinner v-else/>
     </div>
-    <Spinner v-else/>
 </template>
 
 <script>
@@ -27,6 +31,7 @@
     import {useLessonStore} from '@/stores/lesson';
     import {useUiStore} from '@/stores/ui';
     import {useTreeStore} from '@/stores/tree';
+    import TableOfContents from "./components/UI/TableOfContents.vue";
 
     export default {
         name: 'App',
@@ -37,7 +42,7 @@
                 treeStore: useTreeStore()
             }
         },
-        components: {LightBox, CustomHeader, TreeViewNode, Spinner, MenuSearchBar},
+        components: {LightBox, CustomHeader, TreeViewNode, Spinner, MenuSearchBar, TableOfContents},
         data: () => ({
             isFetching: true,
             isStyleLoaded: false,
@@ -175,12 +180,13 @@ button
                 padding: 8px
 
         .page-content 
+            display: flex
             width: 100%
 
             &__router-view 
-                width: 100%
+                width: 80%
                 height: 100%
-
+            
         .drawer-enter-active 
             animation: drawerIn $duration-drawer-collapse
 
@@ -198,5 +204,7 @@ button
                 width: $drawer-width
             to 
                 width: 0
-
+                
+.root-container
+    height: 100%
 </style>

others/vuejs-frontend/src/components/Pages/AdvancedSearch.vue

@@ -92,7 +92,6 @@ export default {
             result.searchTerm = this.query;
             return result;
           });
-          console.log(res.results);
           this.searchInfo = new ResultInfo(res.search_info); 
           this.page += this.searchInfo?.pageIncrement;
         }catch(err){
@@ -157,7 +156,6 @@ export default {
 
 class ResultInfo {
   constructor(info) {
-    console.log(info);
     this.totalHits = info.total_hits;
     this.searchDuration = info.search_duration;
     this.searchType = info.search_type;

others/vuejs-frontend/src/components/Pages/Lesson.vue

@@ -343,12 +343,10 @@ export default {
 		}
 	},
 	async created() {
-		console.log("created");
 		const searchQuery = this.$route.query.search; // Accéder au paramètre de requête
         if(searchQuery){
 			this.search = this.escapeHtml(searchQuery);
 		}
-		console.log(this.search);
 		hljs.configure({
 			cssSelector: "code"
 		});
@@ -615,7 +613,7 @@ export default {
 .linear
 	.lesson-wrapper
 		//@include fillParent()
-		padding-right: 20%
+		padding-right: 25px
 		padding-left: 25px
 	.lesson-block
 		grid-column: 1/3

others/vuejs-frontend/src/components/Pages/SandBox/Demand.vue

@@ -77,7 +77,6 @@
     }),
     methods: {
       sendDemand: function () {
-        console.log("COUNTER ===" + this.clickCounter);
         if (this.clickCounter === 0) {
           let email = document.getElementById("email");
           if (email.value !== "" && email.value !== undefined && email.value !== null) {
@@ -113,10 +112,8 @@
         let req = new XMLHttpRequest();
         req.open("POST", "https://portalpr.dev.simplicite.io/ext/PorIsdService", true);
         req.setRequestHeader("Content-type", "application/json");
-        req.addEventListener("load", (result) => {
-          console.log(result)
+        req.addEventListener("load", () => {
           if (req.status >= 200 && req.status < 400) {
-            console.log(req)
             this.showSpinner = false;
             btn.classList.add("server-ok");
             btn.innerText = "Un email vous a été envoyé !"

others/vuejs-frontend/src/components/Pages/SandBox/Deployment.vue

@@ -43,7 +43,6 @@
       let req = new XMLHttpRequest();
       req.open("GET", baseURL + demandId, true);
       req.send(null);
-      console.log(req.responseText);
     }
   }
 

others/vuejs-frontend/src/components/UI/MenuSearchBar.vue

@@ -6,6 +6,9 @@
             </span>
         </div>
         <input v-model="search" type="text" class="searchbar"/>
+        <button v-if="search" @click="clearSearch" class="clear-button">
+            <span class="material-icons">close</span>
+        </button>
     </div>
 </template>
 
@@ -21,6 +24,11 @@ export default {
                 this.$emit('update:modelValue', value); // Emits the updated value
             }
         }
+    },
+    methods: {
+        clearSearch() {
+            this.search = '';
+        }
     }
 }
 </script>
@@ -63,4 +71,21 @@ export default {
 .searchbar:focus
     outline: none
     transition: border-color 0.3s ease
+
+.clear-button
+    position: absolute
+    right: 10px
+    background: none
+    border: none
+    cursor: pointer
+    display: flex
+    align-items: center
+    justify-content: center
+    height: 100%
+    .material-icons
+        font-size: 1.2rem
+        color: #888
+
+    &:hover .material-icons
+        color: #555
 </style>

others/vuejs-frontend/src/components/UI/SearchBar.vue

@@ -113,7 +113,6 @@ export default {
 		
 		watch(() => uiStore.contentLoaded, function(newValue) {
 			if (newValue) {
-				console.log("new load");
 				this.setFocus();
 				uiStore.resetContentLoaded(); 
 			}

others/vuejs-frontend/src/components/UI/SuggestionItem/AdvancedSuggestionItem.vue

@@ -29,7 +29,6 @@ export default {
   methods: {
     onClick(event) {
       if(event.type === "click") {
-        console.log(this.suggestion.searchTerm);
         if (this.suggestion.type === "lesson") {
           event.preventDefault();
           this.$router.push('/lesson' + this.suggestion.path +"?search="+this.suggestion.searchTerm).catch(err => console.error(err));