-
-
+
+
{{
__(
'Add existing system users to this CRM. Assign them a role to grant access with their current credentials.',
@@ -21,13 +21,14 @@
- __('{0} is an invalid email address', [value])
"
+ :emptyPlaceholder="__('No users found')"
/>
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 153184f4..f230f0e2 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -21,9 +21,11 @@
+
title.value?.el?.focus?.(), 100)
nextTick(() => {
- title.value?.el?.focus?.()
_task.value = { ...props.task }
if (_task.value.title) {
editMode.value = true
diff --git a/frontend/src/components/MultiActionButton.vue b/frontend/src/components/MultiActionButton.vue
index 44f5fd85..26c167b6 100644
--- a/frontend/src/components/MultiActionButton.vue
+++ b/frontend/src/components/MultiActionButton.vue
@@ -29,6 +29,7 @@
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index 97dd7d10..5f7d96f7 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -229,19 +229,26 @@
@change="(v) => fieldChange(v, field)"
:onCreate="field.create"
/>
+
+
+
@@ -250,12 +257,10 @@
class="form-control"
>
@@ -378,7 +383,13 @@ import { usersStore } from '@/stores/users'
import { isMobileView } from '@/composables/settings'
import { getFormat, evaluateDependsOnValue } from '@/utils'
import { flt } from '@/utils/numberFormat.js'
-import { Tooltip, DateTimePicker, DatePicker, Popover } from 'frappe-ui'
+import {
+ Tooltip,
+ DateTimePicker,
+ DatePicker,
+ TimePicker,
+ Popover,
+} from 'frappe-ui'
import { useDocument } from '@/data/document'
import { ref, computed, getCurrentInstance } from 'vue'
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index e59f319c..05a930ba 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -58,8 +58,7 @@ import { getSettings } from '@/stores/settings'
import { showSettings, isMobileView } from '@/composables/settings'
import { showAboutModal } from '@/composables/modals'
import { confirmLoginToFrappeCloud } from '@/composables/frappecloud'
-import { Dropdown } from 'frappe-ui'
-import { theme, toggleTheme } from '@/stores/theme'
+import { Dropdown, useTheme } from 'frappe-ui'
import { computed, h, markRaw } from 'vue'
const props = defineProps({
@@ -72,6 +71,7 @@ const props = defineProps({
const { settings, brand } = getSettings()
const { logout } = sessionStore()
const { getUser } = usersStore()
+const { currentTheme, toggleTheme } = useTheme()
const user = computed(() => getUser() || {})
@@ -134,7 +134,7 @@ function getStandardItem(item) {
}
case 'toggle_theme':
return {
- icon: theme.value === 'dark' ? 'sun' : item.icon,
+ icon: currentTheme.value === 'dark' ? 'sun' : item.icon,
label: __(item.label),
onClick: toggleTheme,
}
diff --git a/frontend/src/components/ViewBreadcrumbs.vue b/frontend/src/components/ViewBreadcrumbs.vue
index ecb67022..163f3e2c 100644
--- a/frontend/src/components/ViewBreadcrumbs.vue
+++ b/frontend/src/components/ViewBreadcrumbs.vue
@@ -60,13 +60,14 @@
class="flex flex-row-reverse gap-2 items-center min-w-11"
>
diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index ca53093e..1b795bde 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -157,7 +157,7 @@ const props = defineProps({
},
size: {
type: String,
- default: 'md',
+ default: 'sm',
},
variant: {
type: String,
@@ -282,7 +282,7 @@ const inputClasses = computed(() => {
let variant = props.disabled ? 'disabled' : props.variant
let variantClasses = {
subtle:
- 'border border-gray-100 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+ 'border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
outline:
'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
disabled: [
diff --git a/frontend/src/components/frappe-ui/Dropdown.vue b/frontend/src/components/frappe-ui/Dropdown.vue
deleted file mode 100644
index b2317b33..00000000
--- a/frontend/src/components/frappe-ui/Dropdown.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-
-
-
-
-
diff --git a/frontend/src/components/frappe-ui/Popover.vue b/frontend/src/components/frappe-ui/Popover.vue
deleted file mode 100644
index 8c5284c9..00000000
--- a/frontend/src/components/frappe-ui/Popover.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-
-
-
-
-
diff --git a/frontend/src/composables/event.js b/frontend/src/composables/event.js
new file mode 100644
index 00000000..d1da9fee
--- /dev/null
+++ b/frontend/src/composables/event.js
@@ -0,0 +1,237 @@
+import { usersStore } from '@/stores/users'
+import { dayjs, createListResource } from 'frappe-ui'
+import { sameArrayContents } from '@/utils'
+import { computed, ref } from 'vue'
+import { allTimeSlots } from '@/components/Calendar/utils'
+
+export const showEventModal = ref(false)
+export const activeEvent = ref(null)
+
+export function useEvent(doctype, docname) {
+ const { getUser } = usersStore()
+
+ const eventsResource = createListResource({
+ doctype: 'Event',
+ cache: ['calendar', docname],
+ fields: [
+ 'name',
+ 'status',
+ 'subject',
+ 'description',
+ 'starts_on',
+ 'ends_on',
+ 'all_day',
+ 'event_type',
+ 'color',
+ 'owner',
+ 'reference_doctype',
+ 'reference_docname',
+ 'creation',
+ ],
+ filters: {
+ reference_doctype: doctype,
+ reference_docname: docname,
+ },
+ auto: true,
+ orderBy: 'creation desc',
+ onSuccess: (d) => {
+ console.log(d)
+ },
+ })
+
+ const eventParticipantsResource = createListResource({
+ doctype: 'Event Participants',
+ fields: ['*'],
+ parent: 'Event',
+ })
+
+ const events = computed(() => {
+ if (!eventsResource.data) return []
+ const eventNames = eventsResource.data.map((e) => e.name)
+ if (
+ !eventParticipantsResource.data?.length ||
+ eventsParticipantIsUpdated(eventNames)
+ ) {
+ eventParticipantsResource.update({
+ filters: {
+ parenttype: 'Event',
+ parentfield: 'event_participants',
+ parent: ['in', eventNames],
+ },
+ })
+ !eventParticipantsResource.list.loading &&
+ eventParticipantsResource.reload()
+ } else {
+ eventsResource.data.forEach((event) => {
+ if (typeof event.owner !== 'object') {
+ event.owner = {
+ label: getUser(event.owner).full_name,
+ image: getUser(event.owner).user_image,
+ name: event.owner,
+ }
+ }
+
+ event.event_participants = [
+ ...eventParticipantsResource.data.filter(
+ (participant) => participant.parent === event.name,
+ ),
+ ]
+
+ event.participants = [
+ event.owner,
+ ...eventParticipantsResource.data
+ .filter((participant) => participant.parent === event.name)
+ .map((participant) => ({
+ label: getUser(participant.email).full_name || participant.email,
+ image: getUser(participant.email).user_image || '',
+ name: participant.email,
+ })),
+ ]
+ })
+ }
+
+ return eventsResource.data
+ })
+
+ function eventsParticipantIsUpdated(eventNames) {
+ const parentFilter = eventParticipantsResource.filters?.parent?.[1]
+
+ if (eventNames.length && !sameArrayContents(parentFilter, eventNames))
+ return true
+
+ let d = eventsResource.setValue.data
+ if (!d) return false
+
+ let newParticipants = d.event_participants.map((p) => p.name)
+ let oldParticipants = eventParticipantsResource.data
+ .filter((p) => p.parent === d.name)
+ .map((p) => p.name)
+
+ return !sameArrayContents(newParticipants, oldParticipants)
+ }
+
+ const startEndTime = (
+ startTime,
+ endTime,
+ isFullDay = false,
+ format = 'h:mm a',
+ ) => {
+ const start = dayjs(startTime)
+ const end = dayjs(endTime)
+
+ if (isFullDay) return __('All day')
+
+ return `${start.format(format)} - ${end.format(format)}`
+ }
+
+ const startDate = (startTime, format = 'ddd, D MMM YYYY') => {
+ const start = dayjs(startTime)
+ return start.format(format)
+ }
+
+ return {
+ eventsResource,
+ eventParticipantsResource,
+ events,
+ startEndTime,
+ startDate,
+ }
+}
+
+export function normalizeParticipants(list = []) {
+ const seen = new Set()
+ const out = []
+ for (const a of list || []) {
+ if (!a?.email || seen.has(a.email)) continue
+ seen.add(a.email)
+ out.push({
+ email: a.email,
+ reference_doctype: a.reference_doctype || 'Contact',
+ reference_docname: a.reference_docname || '',
+ })
+ }
+ return out
+}
+
+export function formatDuration(mins) {
+ if (mins < 60) return __('{0} mins', [mins])
+ let hours = mins / 60
+ if (hours % 1 !== 0 && hours % 1 !== 0.5) {
+ hours = hours.toFixed(2)
+ }
+ if (Number.isInteger(hours)) {
+ return hours === 1 ? __('1 hr') : __('{0} hrs', [hours])
+ }
+ return `${hours} hrs`
+}
+
+export function buildEndTimeOptions(fromTime) {
+ const timeSlots = allTimeSlots()
+ if (!fromTime) return timeSlots
+ const startIndex = timeSlots.findIndex((o) => o.value > fromTime)
+ if (startIndex === -1) return []
+ const [fh, fm] = fromTime.split(':').map((n) => parseInt(n))
+ const fromTotal = fh * 60 + fm
+ return timeSlots.slice(startIndex).map((o) => {
+ const [th, tm] = o.value.split(':').map((n) => parseInt(n))
+ const toTotal = th * 60 + tm
+ const duration = toTotal - fromTotal
+ return { ...o, label: `${o.label} (${formatDuration(duration)})` }
+ })
+}
+
+export function computeAutoToTime(fromTime) {
+ if (!fromTime) return ''
+ const [hour, minute] = fromTime.split(':').map((n) => parseInt(n))
+ let nh = hour + 1
+ let nm = minute
+ if (nh >= 24) {
+ nh = 23
+ nm = 59
+ }
+ return `${String(nh).padStart(2, '0')}:${String(nm).padStart(2, '0')}`
+}
+
+export function validateTimeRange({ fromDate, fromTime, toTime, isFullDay }) {
+ if (isFullDay) return { valid: true, error: null }
+ if (!fromTime || !toTime) {
+ return { valid: false, error: __('Start and end time are required') }
+ }
+ const start = dayjs(fromDate + ' ' + fromTime)
+ const end = dayjs(fromDate + ' ' + toTime)
+ if (!start.isValid() || !end.isValid()) {
+ return { valid: false, error: __('Invalid start or end time') }
+ }
+ if (end.diff(start, 'minute') <= 0) {
+ return { valid: false, error: __('End time should be after start time') }
+ }
+ return { valid: true, error: null }
+}
+
+export function parseEventDoc(doc) {
+ if (!doc) return {}
+ const { getUser } = usersStore()
+ return {
+ id: doc.name,
+ title: doc.subject,
+ description: doc.description,
+ status: doc.status,
+ fromDate: dayjs(doc.starts_on).format('YYYY-MM-DD'),
+ toDate: dayjs(doc.ends_on).format('YYYY-MM-DD'),
+ fromTime: dayjs(doc.starts_on).format('HH:mm'),
+ toTime: dayjs(doc.ends_on).format('HH:mm'),
+ isFullDay: doc.all_day,
+ eventType: doc.event_type,
+ color: doc.color,
+ referenceDoctype: doc.reference_doctype,
+ referenceDocname: doc.reference_docname,
+ event_participants: doc.event_participants || [],
+ owner: doc.owner
+ ? {
+ label: getUser(doc.owner).full_name,
+ image: getUser(doc.owner).user_image,
+ value: doc.owner,
+ }
+ : null,
+ }
+}
diff --git a/frontend/src/composables/useKeyboardShortcuts.js b/frontend/src/composables/useKeyboardShortcuts.js
new file mode 100644
index 00000000..a3bed36f
--- /dev/null
+++ b/frontend/src/composables/useKeyboardShortcuts.js
@@ -0,0 +1,75 @@
+import { onMounted, onBeforeUnmount, unref } from 'vue'
+
+/**
+ * Generic global keyboard shortcuts composable.
+ *
+ * Usage:
+ * useKeyboardShortcuts({
+ * active: () => true, // boolean | () => boolean (reactive allowed)
+ * shortcuts: [
+ * { keys: 'Escape', action: close },
+ * { keys: ['Delete', 'Backspace'], action: onDelete },
+ * { match: e => (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'd', action: duplicate }
+ * ],
+ * ignoreTyping: true // skip when focus is in input/textarea/contenteditable (default true)
+ * })
+ */
+export function useKeyboardShortcuts(options) {
+ const {
+ active = true,
+ shortcuts = [],
+ ignoreTyping = true,
+ target = typeof window !== 'undefined' ? window : null,
+ } = options || {}
+
+ function isTypingEvent(e) {
+ if (!ignoreTyping) return false
+ const el = e.target
+ if (!el) return false
+ const tag = el.tagName
+ return (
+ el.isContentEditable ||
+ tag === 'INPUT' ||
+ tag === 'TEXTAREA' ||
+ tag === 'SELECT' ||
+ (el.closest && el.closest('[contenteditable="true"]'))
+ )
+ }
+
+ function matchShortcut(def, e) {
+ if (def.match) return def.match(e)
+ let keys = def.keys
+ if (!keys) return false
+ if (!Array.isArray(keys)) keys = [keys]
+ return keys.some((k) => k === e.key)
+ }
+
+ function handler(e) {
+ if (!target) return
+ const isActive = typeof active === 'function' ? active() : unref(active)
+ if (!isActive) return
+ if (isTypingEvent(e)) return
+
+ for (const def of shortcuts) {
+ if (!def) continue
+ if (def.guard && !def.guard(e)) continue
+ if (matchShortcut(def, e)) {
+ if (def.preventDefault !== false) e.preventDefault()
+ if (def.stopPropagation) e.stopPropagation()
+ def.action && def.action(e)
+ break
+ }
+ }
+ }
+
+ onMounted(() => {
+ target && target.addEventListener('keydown', handler)
+ })
+ onBeforeUnmount(() => {
+ target && target.removeEventListener('keydown', handler)
+ })
+
+ return {
+ stop: () => target && target.removeEventListener('keydown', handler),
+ }
+}
diff --git a/frontend/src/pages/Calendar.vue b/frontend/src/pages/Calendar.vue
new file mode 100644
index 00000000..27e68612
--- /dev/null
+++ b/frontend/src/pages/Calendar.vue
@@ -0,0 +1,476 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ parseDateWithDay(currentDate) }}
+
+
+
+
+
+
+
+
+