\n \n

\n \n \n \n \n \n

\n\n \n

0\" class=\"bg-white rounded-lg p-6 shadow-sm border\">\n

Popular Tags

\n \n {{ tag.tag }} ({{ tag.count }})\n \n

\n\n \n

0\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n

\n {{ getMaterialIcon(material.type) }}\n

\n \n {{ material.difficulty }}\n \n

\n \n

\n 📚\n {{ material.subject }}\n

\n ⏱️\n {{ material.estimatedTime }}\n

\n \n

\n \n {{ tag }}\n \n 3\" class=\"text-xs text-gray-500\">\n +{{ material.tags.length - 3 }} more\n \n

\n \n

\n \n \n

\n\n \n

📚

No materials found

\n Select an exam to view study materials\n Try adjusting your search or filters\n No materials available for this exam yet\n

\n \n

\n\n \n

\n \n

\n\n \n

Add Study Material

\n `\n})\nexport class MaterialsComponent implements OnInit, OnChanges {\n @Input() selectedExam: ExamType | null = null;\n\n materials: StudyMaterial[] = [];\n subjects: string[] = [];\n popularTags: Array<{ tag: string; count: number }> = [];\n \n searchQuery = '';\n selectedSubject = '';\n selectedDifficulty = '';\n selectedType = '';\n \n isLoading = false;\n showAddMaterial = false;\n isSubmitting = false;\n\n newMaterial = {\n title: '',\n description: '',\n subject: '',\n type: '',\n difficulty: '',\n url: '',\n estimatedTime: ''\n };\n\n constructor(\n private examService: ExamService,\n private apiService: ApiService\n ) {}\n\n ngOnInit(): void {\n this.loadMaterials();\n }\n\n ngOnChanges(): void {\n this.loadMaterials();\n }\n\n private loadMaterials(): void {\n if (!this.selectedExam) {\n this.materials = [];\n return;\n }\n\n this.isLoading = true;\n \n // Load subjects\n this.examService.getExamSubjects(this.selectedExam).subscribe(subjects => {\n this.subjects = subjects;\n });\n\n // Load materials\n this.examService.getMaterials(this.selectedExam, this.selectedSubject).subscribe(materials => {\n this.materials = materials;\n this.isLoading = false;\n });\n\n // Load popular tags\n this.apiService.getPopularTags(this.selectedExam).subscribe(response => {\n if (response.success && response.data) {\n this.popularTags = response.data;\n }\n });\n }\n\n onSearch(): void {\n if (!this.selectedExam) return;\n\n if (this.searchQuery.trim()) {\n this.isLoading = true;\n this.examService.searchMaterials(this.selectedExam, this.searchQuery).subscribe(materials => {\n this.materials = materials;\n this.isLoading = false;\n });\n } else {\n this.loadMaterials();\n }\n }\n\n onFilterChange(): void {\n this.loadMaterials();\n }\n\n filterByTag(tag: string): void {\n if (!this.selectedExam) return;\n\n this.isLoading = true;\n this.apiService.getMaterialsByTag(this.selectedExam, tag).subscribe(response => {\n if (response.success && response.data) {\n this.materials = response.data;\n }\n this.isLoading = false;\n });\n }\n\n clearFilters(): void {\n this.searchQuery = '';\n this.selectedSubject = '';\n this.selectedDifficulty = '';\n this.selectedType = '';\n this.loadMaterials();\n }\n\n getMaterialIcon(type: string): string {\n const icons = this.examService.getMaterialTypeInfo();\n return icons[type]?.icon || '📄';\n }\n\n getMaterialTypeLabel(type: string): string {\n const types = this.examService.getMaterialTypeInfo();\n return types[type]?.label || type;\n }\n\n getDifficultyClass(difficulty: string): string {\n const classes = {\n beginner: 'bg-green-100 text-green-800',\n intermediate: 'bg-yellow-100 text-yellow-800',\n advanced: 'bg-red-100 text-red-800'\n };\n return classes[difficulty as keyof typeof classes] || 'bg-gray-100 text-gray-800';\n }\n\n openMaterial(url: string): void {\n window.open(url, '_blank');\n }\n\n bookmarkMaterial(material: StudyMaterial): void {\n // This would typically call the bookmark service\n console.log('Bookmark material:', material.title);\n }\n\n markAsCompleted(material: StudyMaterial): void {\n // This would typically update progress\n console.log('Mark as completed:', material.title);\n }\n\n addMaterial(): void {\n if (!this.selectedExam) return;\n\n this.isSubmitting = true;\n \n const materialData = {\n ...this.newMaterial,\n examType: this.selectedExam,\n tags: []\n };\n\n this.apiService.createMaterial(materialData).subscribe({\n next: (response) => {\n if (response.success) {\n this.showAddMaterial = false;\n this.resetNewMaterial();\n this.loadMaterials();\n }\n this.isSubmitting = false;\n },\n error: (error) => {\n console.error('Failed to add material:', error);\n this.isSubmitting = false;\n }\n });\n }\n\n private resetNewMaterial(): void {\n this.newMaterial = {\n title: '',\n description: '',\n subject: '',\n type: '',\n difficulty: '',\n url: '',\n estimatedTime: ''\n };\n }\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/angayarb/StudyPlanner/code/frontend/components/materials.component.ts","extension","actionData","errors"]

Popular Tags

{{ material.title }}

No materials found

Add Study Material