feat: tip wanneer er geen leerobject geselecteerd is in discussies
This commit is contained in:
		
							parent
							
								
									b193d47d42
								
							
						
					
					
						commit
						233d89b5bf
					
				
					 6 changed files with 51 additions and 25 deletions
				
			
		|  | @ -185,7 +185,7 @@ | |||
|             </v-list-item> | ||||
| 
 | ||||
|             <v-list-item | ||||
|                 to="/user/discussion" | ||||
|                 to="/discussion" | ||||
|                 link | ||||
|             > | ||||
|                 <v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title> | ||||
|  |  | |||
|  | @ -127,5 +127,6 @@ | |||
|     "question-input-placeholder": "Frage...", | ||||
|     "answer-input-placeholder": "Antwort...", | ||||
|     "answers-toggle-hide": "Antworten verstecken", | ||||
|     "answers-toggle-show": "Antworten anzeigen" | ||||
|     "answers-toggle-show": "Antworten anzeigen", | ||||
|     "no-discussion-tip": "Wählen Sie ein Lernobjekt aus, um dessen Fragen anzuzeigen" | ||||
| } | ||||
|  |  | |||
|  | @ -127,6 +127,7 @@ | |||
|     "question-input-placeholder": "question...", | ||||
|     "answer-input-placeholder": "answer...", | ||||
|     "answers-toggle-hide": "Hide answers", | ||||
|     "answers-toggle-show": "Show answers" | ||||
|     "answers-toggle-show": "Show answers", | ||||
|     "no-discussion-tip": "Choose a learning object to view its questions" | ||||
| 
 | ||||
| } | ||||
|  |  | |||
|  | @ -127,5 +127,6 @@ | |||
|     "question-input-placeholder": "question...", | ||||
|     "answer-input-placeholder": "réponse...", | ||||
|     "answers-toggle-hide": "Masquer réponses", | ||||
|     "answers-toggle-show": "Afficher réponse" | ||||
|     "answers-toggle-show": "Afficher réponse", | ||||
|     "no-discussion-tip": "Sélectionnez un objet d'apprentissage pour afficher les questions qui s'y rapportent" | ||||
| } | ||||
|  |  | |||
|  | @ -127,5 +127,6 @@ | |||
|     "question-input-placeholder": "vraag...", | ||||
|     "answer-input-placeholder": "antwoord...", | ||||
|     "answers-toggle-hide": "Verberg antwoorden", | ||||
|     "answers-toggle-show": "Toon antwoorden" | ||||
|     "answers-toggle-show": "Toon antwoorden", | ||||
|     "no-discussion-tip": "Kies een leerobject om zijn vragen te bekijken" | ||||
| } | ||||
|  |  | |||
|  | @ -4,44 +4,66 @@ | |||
|     import { useGetAllLearningPaths } from "@/queries/learning-paths.ts"; | ||||
|     import UsingQueryResult from "@/components/UsingQueryResult.vue"; | ||||
|     import DiscussionSideBarElement from "@/components/DiscussionSideBarElement.vue"; | ||||
|     import { ref } from "vue"; | ||||
| 
 | ||||
|     const { t, locale } = useI18n(); | ||||
| 
 | ||||
|     const allLearningPathsResult = useGetAllLearningPaths(locale.value) | ||||
| 
 | ||||
|     const navigationDrawerShown = ref(true); | ||||
| 
 | ||||
| </script> | ||||
| 
 | ||||
| <template> | ||||
|     <div class="d-flex flex-column h-100"> | ||||
|         <v-list-item> | ||||
|             <template v-slot:title> | ||||
|                 <div class="title">{{t("discussions")}}</div> | ||||
|             </template> | ||||
|         </v-list-item> | ||||
|         <v-divider></v-divider> | ||||
|         <div> | ||||
|             <using-query-result | ||||
|                 :query-result="allLearningPathsResult" | ||||
|                 v-slot="learningPaths: {data: LearningPath[]}"> | ||||
|                 <DiscussionSideBarElement | ||||
|                     v-for="learningPath in learningPaths.data" | ||||
|                     :path="learningPath" | ||||
|                     :activeObjectId="'' as string" | ||||
|                     :key="learningPath.hruid" | ||||
|                     > | ||||
|                 </DiscussionSideBarElement> | ||||
|             </using-query-result> | ||||
|     <v-navigation-drawer | ||||
|         v-model="navigationDrawerShown" | ||||
|         :width="350" | ||||
|         app | ||||
|     > | ||||
|         <div class="d-flex flex-column h-100"> | ||||
|             <v-list-item> | ||||
|                 <template v-slot:title> | ||||
|                     <div class="title">{{t("discussions")}}</div> | ||||
|                 </template> | ||||
|             </v-list-item> | ||||
|             <v-divider></v-divider> | ||||
|             <div> | ||||
|                 <using-query-result | ||||
|                     :query-result="allLearningPathsResult" | ||||
|                     v-slot="learningPaths: {data: LearningPath[]}"> | ||||
|                     <DiscussionSideBarElement | ||||
|                         v-for="learningPath in learningPaths.data" | ||||
|                         :path="learningPath" | ||||
|                         :activeObjectId="'' as string" | ||||
|                         :key="learningPath.hruid" | ||||
|                         > | ||||
|                     </DiscussionSideBarElement> | ||||
|                 </using-query-result> | ||||
|             </div> | ||||
|         </div> | ||||
|     </v-navigation-drawer> | ||||
|     <div> | ||||
|         <p class="no-discussion-tip">{{t("no-discussion-tip")}}</p> | ||||
|     </div> | ||||
| </template> | ||||
| 
 | ||||
| <style scoped> | ||||
|     .no-discussion-tip { | ||||
|         display: flex; | ||||
|         justify-content: center; | ||||
|         align-items: center; | ||||
|         height: 100vh;  | ||||
|         text-align: center; | ||||
|         font-size: 18px; | ||||
|         color: #666; | ||||
|         padding: 0 20px; | ||||
|     } | ||||
|     .title { | ||||
|         color: #0e6942; | ||||
|         text-transform: uppercase; | ||||
|         font-weight: bolder; | ||||
|         padding-top: 2%; | ||||
|         font-size: 50px; | ||||
|         font-size: 36px; | ||||
|     } | ||||
|     .learning-path-title { | ||||
|         white-space: normal; | ||||
|  |  | |||
		Reference in a new issue
	
	 Timo De Meyst
						Timo De Meyst