feat: badge list and form

frontend/src/components/Settings/Settings.vue

@@ -34,30 +34,9 @@
 					:key="activeTab.label"
 					class="flex flex-1 flex-col px-10 py-8 bg-surface-modal"
 				>
-					<Members
-						v-if="activeTab.label === 'Members'"
-						:label="activeTab.label"
-						:description="activeTab.description"
-						v-model:show="show"
-					/>
-					<Evaluators
-						v-else-if="activeTab.label === 'Evaluators'"
-						:label="activeTab.label"
-						:description="activeTab.description"
-						v-model:show="show"
-					/>
-					<Categories
-						v-else-if="activeTab.label === 'Categories'"
-						:label="activeTab.label"
-						:description="activeTab.description"
-					/>
-					<EmailTemplates
-						v-else-if="activeTab.label === 'Email Templates'"
-						:label="activeTab.label"
-						:description="activeTab.description"
-					/>
-					<ZoomSettings
-						v-else-if="activeTab.label === 'Zoom Accounts'"
+					<component
+						v-if="activeTab.template"
+						:is="activeTab.template"
 						:label="activeTab.label"
 						:description="activeTab.description"
 					/>
@@ -68,13 +47,6 @@
 						:data="data"
 						:fields="activeTab.fields"
 					/>
-					<BrandSettings
-						v-else-if="activeTab.label === 'Branding'"
-						:label="activeTab.label"
-						:description="activeTab.description"
-						:fields="activeTab.fields"
-						:data="branding"
-					/>
 					<SettingDetails
 						v-else
 						:fields="activeTab.fields"
@@ -88,8 +60,8 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createDocumentResource, createResource } from 'frappe-ui'
-import { ref, computed, watch } from 'vue'
+import { Dialog, createDocumentResource } from 'frappe-ui'
+import { computed, markRaw, ref, watch } from 'vue'
 import { useSettings } from '@/stores/settings'
 import SettingDetails from '@/components/Settings/SettingDetails.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
@@ -100,6 +72,7 @@ import EmailTemplates from '@/components/Settings/EmailTemplates.vue'
 import BrandSettings from '@/components/Settings/BrandSettings.vue'
 import PaymentSettings from '@/components/Settings/PaymentSettings.vue'
 import ZoomSettings from '@/components/Settings/ZoomSettings.vue'
+import Badges from '@/components/Settings/Badges.vue'
 
 const show = defineModel()
 const doctype = ref('LMS Settings')
@@ -114,12 +87,6 @@ const data = createDocumentResource({
 	auto: true,
 })
 
-const branding = createResource({
-	url: 'lms.lms.api.get_branding',
-	auto: true,
-	cache: 'brand',
-})
-
 const tabsStructure = computed(() => {
 	return [
 		{
@@ -245,6 +212,7 @@ const tabsStructure = computed(() => {
 					description:
 						'Add new members or manage roles and permissions of existing members',
 					icon: 'UserRoundPlus',
+					template: markRaw(Members),
 				},
 				{
 					label: 'Evaluators',
@@ -252,21 +220,32 @@ const tabsStructure = computed(() => {
 					icon: 'UserCheck',
 					description:
 						'Add new evaluators or check the slots existing evaluators',
-				},
-				{
-					label: 'Categories',
-					description: 'Double click to edit the category',
-					icon: 'Network',
-				},
-				{
-					label: 'Email Templates',
-					description: 'Manage the email templates for your learning system',
-					icon: 'MailPlus',
+					template: markRaw(Evaluators),
 				},
 				{
 					label: 'Zoom Accounts',
 					description: 'Manage the Zoom accounts for your learning system',
 					icon: 'Video',
+					template: markRaw(ZoomSettings),
+				},
+				{
+					label: 'Badges',
+					description:
+						'Create badges and assign them to students to acknowledge their achievements',
+					icon: 'Award',
+					template: markRaw(Badges),
+				},
+				{
+					label: 'Categories',
+					description: 'Double click to edit the category',
+					icon: 'Network',
+					template: markRaw(Categories),
+				},
+				{
+					label: 'Email Templates',
+					description: 'Manage the email templates for your learning system',
+					icon: 'MailPlus',
+					template: markRaw(EmailTemplates),
 				},
 			],
 		},
@@ -277,6 +256,7 @@ const tabsStructure = computed(() => {
 				{
 					label: 'Branding',
 					icon: 'Blocks',
+					template: markRaw(BrandSettings),
 					fields: [
 						{
 							label: 'Brand Name',