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

fix: using frappeui Breadcrumbs component everywhere

Browse Source
This commit is contained in:
Shariq Ansari 2023-10-02 23:20:38 +05:30
parent 7e8f6d1c64
commit c65b1ce50f
10 changed files with 47 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/Breadcrumbs.vue
View File

@ -1,27 +0,0 @@
<template>
<div class="flex min-w-0 items-center text-ellipsis whitespace-nowrap">
<template v-for="(item, i) in items" :key="item.label">
<router-link
class="flex items-center rounded px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700 last:text-gray-900 last:hover:text-gray-900 transition-all duration-300 ease-in-out"
:to="item.route || ''"
>
<slot name="prefix" :item="item" />
<span>{{ item.label }}</span>
</router-link>
<span
v-if="i != items.length - 1"
class="mx-0.5 text-base text-gray-500"
>
/
</span>
</template>
</div>
</template>
<script setup>
const props = defineProps({
items: {
type: Array,
required: true,
},
})
</script>

29
frontend/src/pages/CallLog.vue
View File

@ -15,9 +15,9 @@
</template>
</LayoutHeader>
<div class="border-b"></div>
<div v-if="callLog.data" class="p-6 max-w-lg">
<div v-if="callLog.data" class="max-w-lg p-6">
<div class="pb-3 text-base font-medium">Call details</div>
<div class="flex flex-col gap-4 border rounded-lg p-4 mb-3 shadow-sm">
<div class="mb-3 flex flex-col gap-4 rounded-lg border p-4 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<FeatherIcon
@ -26,7 +26,7 @@
? 'phone-incoming'
: 'phone-outgoing'
"
class="w-4 h-4 text-gray-600"
class="h-4 w-4 text-gray-600"
/>
<div class="font-medium">
{{ callLog.data.type == 'Incoming' ? 'Inbound' : 'Outbound' }} call
@ -48,7 +48,7 @@
:label="callLog.data.caller.label"
size="xl"
/>
<div class="flex flex-col gap-1 ml-1">
<div class="ml-1 flex flex-col gap-1">
<div class="text-base font-medium">
{{ callLog.data.caller.label }}
</div>
@ -56,13 +56,13 @@
{{ callLog.data.from }}
</div>
</div>
<FeatherIcon name="arrow-right" class="w-5 h-5 text-gray-600 mx-2" />
<FeatherIcon name="arrow-right" class="mx-2 h-5 w-5 text-gray-600" />
<Avatar
:image="callLog.data.receiver.image"
:label="callLog.data.receiver.label"
size="xl"
/>
<div class="flex flex-col gap-1 ml-1">
<div class="ml-1 flex flex-col gap-1">
<div class="text-base font-medium">
{{ callLog.data.receiver.label }}
</div>
@ -74,13 +74,13 @@
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1">
<DurationIcon class="w-4 h-4 text-gray-600" />
<DurationIcon class="h-4 w-4 text-gray-600" />
<div class="text-sm text-gray-600">Duration</div>
<div class="text-sm">{{ callLog.data.duration }}</div>
</div>
<div>
<Tooltip
class="text-gray-600 text-sm"
class="text-sm text-gray-600"
:text="dateFormat(callLog.data.creation, dateTooltipFormat)"
>
{{ timeAgo(callLog.data.creation) }}
@ -91,7 +91,7 @@
<div v-if="callLog.data.recording_url" class="mt-6">
<div class="mb-3 text-base font-medium">Call recording</div>
<div class="flex items-center justify-between border rounded shadow-sm">
<div class="flex items-center justify-between rounded border shadow-sm">
<audio
class="audio-control"
controls
@ -103,10 +103,10 @@
<div v-if="callLog.data.note" class="mt-6">
<div class="mb-3 text-base font-medium">Call note</div>
<div
class="flex flex-col gap-3 border rounded p-4 shadow-sm cursor-pointer h-56"
class="flex h-56 cursor-pointer flex-col gap-3 rounded border p-4 shadow-sm"
@click="showNoteModal = true"
>
<div class="text-lg font-medium truncate">
<div class="truncate text-lg font-medium">
{{ callLog.data.note_doc.title }}
</div>
<TextEditor
@ -141,7 +141,6 @@
<script setup>
import LayoutHeader from '@/components/LayoutHeader.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
import DurationIcon from '@/components/Icons/DurationIcon.vue'
import NoteModal from '@/components/NoteModal.vue'
import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
@ -153,6 +152,7 @@ import {
Tooltip,
Badge,
createResource,
Breadcrumbs,
} from 'frappe-ui'
import { usersStore } from '@/stores/users'
import { contactsStore } from '@/stores/contacts'
@ -232,7 +232,10 @@ function createLead() {
const breadcrumbs = computed(() => [
{ label: 'Call Logs', route: { name: 'Call Logs' } },
{ label: callLog.data?.caller.label },
{
label: callLog.data?.caller.label,
route: { name: 'Call Log', params: { callLogId: props.callLogId } },
},
])
</script>

9
frontend/src/pages/CallLogs.vue
View File

@ -1,10 +1,10 @@
<template>
<LayoutHeader>
<template #left-header>
<Breadcrumbs :items="[{ label: list.title }]" />
<Breadcrumbs :items="breadcrumbs" />
</template>
</LayoutHeader>
<div class="flex justify-between items-center px-5 pt-3 pb-4">
<div class="flex items-center justify-between px-5 pb-4 pt-3">
<div class="flex items-center gap-2">
<Button label="Sort">
<template #prefix><SortIcon class="h-4" /></template>
@ -23,13 +23,12 @@
<script setup>
import ListView from '@/components/ListView.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
import SortIcon from '@/components/Icons/SortIcon.vue'
import FilterIcon from '@/components/Icons/FilterIcon.vue'
import { secondsToDuration } from '@/utils'
import { usersStore } from '@/stores/users'
import { contactsStore } from '@/stores/contacts'
import { Button, createListResource } from 'frappe-ui'
import { Button, createListResource, Breadcrumbs } from 'frappe-ui'
import { computed } from 'vue'
const { getUser } = usersStore()
@ -41,6 +40,8 @@ const list = {
singular_label: 'Call Log',
}
const breadcrumbs = [{ label: list.title, route: { name: 'Call Logs' } }]
const callLogs = createListResource({
type: 'list',
doctype: 'CRM Call Log',

9
frontend/src/pages/Contacts.vue
View File

@ -1,7 +1,7 @@
<template>
<LayoutHeader>
<template #left-header>
<Breadcrumbs :items="[{ label: list.title }]" />
<Breadcrumbs :items="breadcrumbs" />
</template>
<template #right-header>
<Button variant="solid" label="Create">
@ -9,7 +9,7 @@
</Button>
</template>
</LayoutHeader>
<div class="flex justify-between items-center px-5 pt-3 pb-4">
<div class="flex items-center justify-between px-5 pb-4 pt-3">
<div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions">
<template #default="{ open }">
@ -42,10 +42,9 @@
<script setup>
import ListView from '@/components/ListView.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
import SortIcon from '@/components/Icons/SortIcon.vue'
import FilterIcon from '@/components/Icons/FilterIcon.vue'
import { FeatherIcon, Button, Dropdown } from 'frappe-ui'
import { FeatherIcon, Button, Dropdown, Breadcrumbs } from 'frappe-ui'
import { ref, computed } from 'vue'
import { contactsStore } from '@/stores/contacts.js'
@ -57,6 +56,8 @@ const list = {
singular_label: 'Contact',
}
const breadcrumbs = [{ label: list.title, route: { name: 'Contacts' } }]
const columns = [
{
label: 'Full name',

5
frontend/src/pages/Dashboard.vue
View File

@ -1,13 +1,14 @@
<template>
<LayoutHeader>
<template #left-header>
<Breadcrumbs :items="[{ label: title }]" />
<Breadcrumbs :items="breadcrumbs" />
</template>
</LayoutHeader>
</template>
<script setup>
import LayoutHeader from '@/components/LayoutHeader.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
import { Breadcrumbs } from 'frappe-ui'
let title = 'Dashboard'
const breadcrumbs = [{ label: title, route: { name: 'Dashboard' } }]
</script>

2
frontend/src/pages/Deal.vue
View File

@ -316,7 +316,6 @@ import LinkIcon from '@/components/Icons/LinkIcon.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import Toggler from '@/components/Toggler.vue'
import Activities from '@/components/Activities.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
import UserAvatar from '@/components/UserAvatar.vue'
import {
dealStatuses,
@ -337,6 +336,7 @@ import {
Tooltip,
Avatar,
Tabs,
Breadcrumbs,
} from 'frappe-ui'
import { ref, computed } from 'vue'

9
frontend/src/pages/Deals.vue
View File

@ -1,7 +1,7 @@
<template>
<LayoutHeader>
<template #left-header>
<Breadcrumbs :items="[{ label: list.title }]" />
<Breadcrumbs :items="breadcrumbs" />
</template>
<template #right-header>
<Button variant="solid" label="Create" @click="showNewDialog = true">
@ -9,7 +9,7 @@
</Button>
</template>
</LayoutHeader>
<div class="flex justify-between items-center px-5 pt-3 pb-4">
<div class="flex items-center justify-between px-5 pb-4 pt-3">
<div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions">
<template #default="{ open }">
@ -56,7 +56,6 @@
<script setup>
import ListView from '@/components/ListView.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
import NewDeal from '@/components/NewDeal.vue'
import SortBy from '@/components/SortBy.vue'
import Filter from '@/components/Filter.vue'
@ -72,6 +71,7 @@ import {
Dropdown,
createListResource,
createResource,
Breadcrumbs,
} from 'frappe-ui'
import { useRouter } from 'vue-router'
import { ref, computed, reactive, watch } from 'vue'
@ -81,6 +81,9 @@ const list = {
plural_label: 'Deals',
singular_label: 'Deal',
}
const breadcrumbs = [{ label: list.title, route: { name: 'Deals' } }]
const { getUser } = usersStore()
const { get: getOrderBy } = useOrderBy()
const { getArgs, storage } = useFilter()

2
frontend/src/pages/Lead.vue
View File

@ -287,7 +287,6 @@ import LinkIcon from '@/components/Icons/LinkIcon.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import Toggler from '@/components/Toggler.vue'
import Activities from '@/components/Activities.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
import UserAvatar from '@/components/UserAvatar.vue'
import {
leadStatuses,
@ -308,6 +307,7 @@ import {
Tooltip,
Avatar,
Tabs,
Breadcrumbs,
} from 'frappe-ui'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

9
frontend/src/pages/Leads.vue
View File

@ -1,7 +1,7 @@
<template>
<LayoutHeader>
<template #left-header>
<Breadcrumbs :items="[{ label: list.title }]" />
<Breadcrumbs :items="breadcrumbs" />
</template>
<template #right-header>
<Button variant="solid" label="Create" @click="showNewDialog = true">
@ -9,7 +9,7 @@
</Button>
</template>
</LayoutHeader>
<div class="flex justify-between items-center px-5 pt-3 pb-4">
<div class="flex items-center justify-between px-5 pb-4 pt-3">
<div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions">
<template #default="{ open }">
@ -55,7 +55,6 @@
<script setup>
import ListView from '@/components/ListView.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
import NewLead from '@/components/NewLead.vue'
import SortBy from '@/components/SortBy.vue'
import Filter from '@/components/Filter.vue'
@ -71,6 +70,7 @@ import {
Dropdown,
createListResource,
createResource,
Breadcrumbs,
} from 'frappe-ui'
import { useRouter } from 'vue-router'
import { ref, computed, reactive, watch } from 'vue'
@ -80,6 +80,9 @@ const list = {
plural_label: 'Leads',
singular_label: 'Lead',
}
const breadcrumbs = [{ label: list.title, route: { name: 'Leads' } }]
const { getUser } = usersStore()
const { get: getOrderBy } = useOrderBy()
const { getArgs, storage } = useFilter()

6
frontend/src/pages/Notes.vue
View File

@ -1,7 +1,7 @@
<template>
<LayoutHeader>
<template #left-header>
<Breadcrumbs :items="[{ label: list.title }]" />
<Breadcrumbs :items="breadcrumbs" />
</template>
<template #right-header>
<Button variant="solid" label="Create" @click="createNote">
@ -79,7 +79,6 @@
<script setup>
import LayoutHeader from '@/components/LayoutHeader.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
import UserAvatar from '@/components/UserAvatar.vue'
import NoteIcon from '@/components/Icons/NoteIcon.vue'
import NoteModal from '@/components/NoteModal.vue'
@ -92,6 +91,7 @@ import {
call,
Dropdown,
Tooltip,
Breadcrumbs,
} from 'frappe-ui'
import { ref } from 'vue'
import { usersStore } from '@/stores/users'
@ -104,6 +104,8 @@ const list = {
singular_label: 'Note',
}
const breadcrumbs = [{ label: list.title, route: { name: 'Notes' } }]
const showNoteModal = ref(false)
const currentNote = ref(null)