test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: moved onboarding related ui and code in separate component

Browse Source
This commit is contained in:
Shariq Ansari 2025-03-12 19:27:27 +05:30
parent d673e88baa
commit bd6aa943a2
3 changed files with 66 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/Layouts/AppSidebar.vue
View File

@ -112,11 +112,7 @@
</div>
<Notifications />
<Settings />
<HelpModal
v-if="showHelpModal"
v-model="showHelpModal"
:isOnboardingStepsCompleted="isOnboardingStepsCompleted"
/>
<HelpModal v-if="showHelpModal" v-model="showHelpModal" />
</div>
</template>

79
frontend/src/components/Modals/HelpModal.vue
View File

@ -5,63 +5,33 @@
:class="[minimize ? 'right-0 top-[calc(100%_-_110px)]' : 'right-0']"
@click.stop
>
<div class="overflow-hidden flex flex-col gap-4">
<div class="flex items-center justify-between">
<div>
<div v-if="minimize" class="text-base font-medium ml-1">
{{ __('Getting started') }}
</div>
<div class="flex items-center justify-between">
<div class="text-base font-medium ml-1">
<div v-if="minimize && !isOnboardingStepsCompleted">
{{ __('Getting started') }}
</div>
<div>
<Button @click="minimize = !minimize" variant="ghost">
<component
:is="minimize ? MaximizeIcon : MinimizeIcon"
class="h-3.5"
/>
</Button>
<Button variant="ghost" @click="show = false">
<FeatherIcon name="x" class="h-3.5" />
</Button>
<div v-else>
{{ __('Help center') }}
</div>
</div>
<div class="flex flex-col justify-center items-center gap-1 mb-3">
<CRMLogo class="size-10 shrink-0 rounded mb-4" />
<div class="text-base font-medium">
{{ __('Welcome to Frappe CRM') }}
</div>
<div class="text-p-base font-normal">
{{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
</div>
</div>
<div class="flex flex-col gap-2.5 overflow-hidden">
<div class="flex justify-between items-center py-0.5">
<div class="text-base font-medium">{{ __('Getting started') }}</div>
<Badge
:label="__('{0}% completed', [completedPercentage])"
theme="orange"
size="lg"
<div>
<Button @click="minimize = !minimize" variant="ghost">
<component
:is="minimize ? MaximizeIcon : MinimizeIcon"
class="h-3.5"
/>
</div>
<div class="flex flex-col gap-1.5 overflow-y-auto">
<div
v-for="step in steps"
:key="step.title"
class="w-full flex gap-2 items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
:class="[
step.completed
? 'text-ink-gray-5 line-through'
: 'text-ink-gray-8',
]"
@click="() => !step.completed && step.onClick()"
>
<component :is="step.icon" class="h-4" />
<div class="text-base">{{ step.title }}</div>
</div>
</div>
</Button>
<Button variant="ghost" @click="show = false">
<FeatherIcon name="x" class="h-3.5" />
</Button>
</div>
</div>
<div class="h-full overflow-hidden flex flex-col">
<OnboardingSteps v-if="!isOnboardingStepsCompleted" />
</div>
<div class="flex flex-col gap-1.5">
<div
v-if="!isOnboardingStepsCompleted"
class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
>
<HelpIcon class="h-4" />
@ -74,15 +44,8 @@
import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
import HelpIcon from '@/components/Icons/HelpIcon.vue'
import CRMLogo from '@/components/Icons/CRMLogo.vue'
import { useOnboarding, minimize } from '@/composables/onboarding'
const props = defineProps({
isOnboardingStepsCompleted: Boolean,
})
import OnboardingSteps from '@/components/OnboardingSteps.vue'
import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
const show = defineModel()
const { steps, stepsCompleted, totalSteps, completedPercentage } =
useOnboarding()
</script>

44
frontend/src/components/OnboardingSteps.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="flex flex-col justify-center items-center gap-1 mb-3">
<CRMLogo class="size-10 shrink-0 rounded mb-4" />
<div class="text-base font-medium">
{{ __('Welcome to Frappe CRM') }}
</div>
<div class="text-p-base font-normal">
{{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
</div>
</div>
<div class="flex flex-col gap-2.5 overflow-hidden">
<div class="flex justify-between items-center py-0.5">
<div class="text-base font-medium">{{ __('Getting started') }}</div>
<Badge
:label="__('{0}% completed', [completedPercentage])"
theme="orange"
size="lg"
/>
</div>
<div class="flex flex-col gap-1.5 overflow-y-auto">
<div
v-for="step in steps"
:key="step.title"
class="w-full flex gap-2 items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
:class="[
step.completed ? 'text-ink-gray-5 line-through' : 'text-ink-gray-8',
]"
@click="() => !step.completed && step.onClick()"
>
<component :is="step.icon" class="h-4" />
<div class="text-base">{{ step.title }}</div>
</div>
</div>
</div>
</template>
<script setup>
import CRMLogo from '@/components/Icons/CRMLogo.vue'
import { useOnboarding } from '@/composables/onboarding'
const emit = defineEmits(['close'])
const { steps, stepsCompleted, totalSteps, completedPercentage } =
useOnboarding()
</script>