Merge pull request #219 from frappe/develop
chore: Merge develop to main
This commit is contained in:
Shariq Ansari
GitHub
commit
6ac82a335b
@ -1,5 +1,7 @@
|
||||
from bs4 import BeautifulSoup
|
||||
import frappe
|
||||
from frappe.translate import get_all_translations
|
||||
from frappe.utils import cstr
|
||||
|
||||
|
||||
@frappe.whitelist(allow_guest=True)
|
||||
@ -9,4 +11,37 @@ def get_translations():
|
||||
else:
|
||||
language = frappe.db.get_single_value("System Settings", "language")
|
||||
|
||||
return get_all_translations(language)
|
||||
return get_all_translations(language)
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_user_signature():
|
||||
user = frappe.session.user
|
||||
user_email_signature = (
|
||||
frappe.db.get_value(
|
||||
"User",
|
||||
user,
|
||||
"email_signature",
|
||||
)
|
||||
if user
|
||||
else None
|
||||
)
|
||||
|
||||
signature = user_email_signature or frappe.db.get_value(
|
||||
"Email Account",
|
||||
{"default_outgoing": 1, "add_signature": 1},
|
||||
"signature",
|
||||
)
|
||||
|
||||
if not signature:
|
||||
return
|
||||
|
||||
soup = BeautifulSoup(signature, "html.parser")
|
||||
html_signature = soup.find("div", {"class": "ql-editor read-mode"})
|
||||
_signature = None
|
||||
if html_signature:
|
||||
_signature = html_signature.renderContents()
|
||||
content = ""
|
||||
if (cstr(_signature) or signature):
|
||||
content = f'<br><p class="signature">{signature}</p>'
|
||||
return content
|
||||
@ -534,8 +534,10 @@ def get_assigned_users(doctype, name, default_assigned_to=None):
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_fields(doctype: str):
|
||||
def get_fields(doctype: str, allow_all_fieldtypes: bool = False):
|
||||
not_allowed_fieldtypes = list(frappe.model.no_value_fields) + ["Read Only"]
|
||||
if allow_all_fieldtypes:
|
||||
not_allowed_fieldtypes = []
|
||||
fields = frappe.get_meta(doctype).fields
|
||||
|
||||
_fields = []
|
||||
@ -553,6 +555,7 @@ def get_fields(doctype: str):
|
||||
"type": field.fieldtype,
|
||||
"value": field.fieldname,
|
||||
"options": field.options,
|
||||
"mandatory": field.reqd,
|
||||
})
|
||||
|
||||
return _fields
|
||||
@ -5,7 +5,7 @@ import frappe
|
||||
def get_users():
|
||||
users = frappe.qb.get_query(
|
||||
"User",
|
||||
fields=["name", "email", "enabled", "user_image", "full_name", "user_type"],
|
||||
fields=["name", "email", "enabled", "user_image", "first_name", "last_name", "full_name", "user_type"],
|
||||
order_by="full_name asc",
|
||||
distinct=True,
|
||||
).run(as_dict=1)
|
||||
|
||||
@ -96,6 +96,12 @@ def is_whatsapp_enabled():
|
||||
return False
|
||||
return frappe.get_cached_value("WhatsApp Settings", "WhatsApp Settings", "enabled")
|
||||
|
||||
@frappe.whitelist()
|
||||
def is_whatsapp_installed():
|
||||
if not frappe.db.exists("DocType", "WhatsApp Settings"):
|
||||
return False
|
||||
return True
|
||||
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_whatsapp_messages(reference_doctype, reference_name):
|
||||
|
||||
@ -7,17 +7,17 @@
|
||||
"editable_grid": 1,
|
||||
"engine": "InnoDB",
|
||||
"field_order": [
|
||||
"section_break_ssqj",
|
||||
"enabled",
|
||||
"column_break_avmt",
|
||||
"record_calls",
|
||||
"section_break_malx",
|
||||
"account_sid",
|
||||
"api_key",
|
||||
"api_secret",
|
||||
"column_break_idds",
|
||||
"auth_token",
|
||||
"twiml_sid",
|
||||
"section_break_ssqj",
|
||||
"enabled",
|
||||
"column_break_avmt",
|
||||
"record_calls"
|
||||
"twiml_sid"
|
||||
],
|
||||
"fields": [
|
||||
{
|
||||
@ -84,7 +84,7 @@
|
||||
"index_web_pages_for_search": 1,
|
||||
"issingle": 1,
|
||||
"links": [],
|
||||
"modified": "2024-01-13 14:24:16.726645",
|
||||
"modified": "2024-06-11 17:42:38.256260",
|
||||
"modified_by": "Administrator",
|
||||
"module": "FCRM",
|
||||
"name": "Twilio Settings",
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit d7ad7bd0d09f25a446da984e6006479ea218acd0
|
||||
Subproject commit 0c0212cc5bbac151cffc6dc73dfbdf7b69d45ec2
|
||||
@ -13,7 +13,7 @@
|
||||
"@vueuse/core": "^10.3.0",
|
||||
"@vueuse/integrations": "^10.3.0",
|
||||
"feather-icons": "^4.28.0",
|
||||
"frappe-ui": "^0.1.59",
|
||||
"frappe-ui": "^0.1.61",
|
||||
"gemoji": "^8.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
"mime": "^4.0.1",
|
||||
|
||||
@ -479,22 +479,26 @@
|
||||
</div>
|
||||
<div class="flex gap-0.5">
|
||||
<Tooltip :text="__('Reply')">
|
||||
<Button
|
||||
variant="ghost"
|
||||
class="text-gray-700"
|
||||
@click="reply(activity.data)"
|
||||
>
|
||||
<ReplyIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
class="text-gray-700"
|
||||
@click="reply(activity.data)"
|
||||
>
|
||||
<ReplyIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip :text="__('Reply All')">
|
||||
<Button
|
||||
variant="ghost"
|
||||
class="text-gray-700"
|
||||
@click="reply(activity.data, true)"
|
||||
>
|
||||
<ReplyAllIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
class="text-gray-700"
|
||||
@click="reply(activity.data, true)"
|
||||
>
|
||||
<ReplyAllIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex justify-between gap-3 border-t sm:px-10 px-4 py-2.5">
|
||||
<div class="flex justify-between gap-3 border-t px-4 py-2.5 sm:px-10">
|
||||
<div class="flex gap-1.5">
|
||||
<Button
|
||||
ref="sendEmailRef"
|
||||
@ -102,7 +102,7 @@ import CommentIcon from '@/components/Icons/CommentIcon.vue'
|
||||
import EmailIcon from '@/components/Icons/EmailIcon.vue'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { call } from 'frappe-ui'
|
||||
import { call, createResource } from 'frappe-ui'
|
||||
import { ref, watch, computed, nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
@ -138,11 +138,29 @@ const subject = computed(() => {
|
||||
return `${prefix} (#${doc.value.data.name})`
|
||||
})
|
||||
|
||||
const signature = createResource({
|
||||
url: 'crm.api.get_user_signature',
|
||||
cache: 'user-email-signature',
|
||||
auto: true,
|
||||
})
|
||||
|
||||
function setSignature(editor) {
|
||||
signature.data = signature.data.replace(/\n/g, '<br>')
|
||||
let emailContent = editor.getHTML()
|
||||
emailContent = emailContent.startsWith('<p></p>')
|
||||
? emailContent.slice(7)
|
||||
: emailContent
|
||||
editor.commands.setContent(signature.data + emailContent)
|
||||
editor.commands.focus('start')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => showEmailBox.value,
|
||||
(value) => {
|
||||
if (value) {
|
||||
newEmailEditor.value.editor.commands.focus()
|
||||
let editor = newEmailEditor.value.editor
|
||||
editor.commands.focus()
|
||||
setSignature(editor)
|
||||
}
|
||||
}
|
||||
)
|
||||
@ -248,5 +266,9 @@ function toggleCommentBox() {
|
||||
showCommentBox.value = !showCommentBox.value
|
||||
}
|
||||
|
||||
defineExpose({ show: showEmailBox, showComment: showCommentBox, editor: newEmailEditor })
|
||||
defineExpose({
|
||||
show: showEmailBox,
|
||||
showComment: showCommentBox,
|
||||
editor: newEmailEditor,
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,268 +0,0 @@
|
||||
<template>
|
||||
<Popover
|
||||
@open="selectCurrentMonthYear"
|
||||
class="flex w-full [&>div:first-child]:w-full"
|
||||
>
|
||||
<template #target="{ togglePopover }">
|
||||
<input
|
||||
readonly
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
:value="value && formatter ? formatter(value) : value"
|
||||
@focus="!readonly ? togglePopover() : null"
|
||||
:class="[
|
||||
'form-input block h-7 w-full cursor-pointer select-none rounded border-gray-400 text-sm placeholder-gray-500',
|
||||
inputClass,
|
||||
]"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</template>
|
||||
<template #body="{ togglePopover }">
|
||||
<div
|
||||
class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div class="flex items-center p-1 text-gray-500">
|
||||
<Button variant="ghost" class="h-7 w-7" @click="prevMonth">
|
||||
<FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" />
|
||||
</Button>
|
||||
<div class="flex-1 text-center text-base font-medium text-gray-700">
|
||||
{{ formatMonth }}
|
||||
</div>
|
||||
<Button variant="ghost" class="h-7 w-7" @click="nextMonth">
|
||||
<FeatherIcon
|
||||
:stroke-width="2"
|
||||
name="chevron-right"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-1 p-1">
|
||||
<TextInput
|
||||
class="text-sm"
|
||||
type="text"
|
||||
:value="value"
|
||||
@change="
|
||||
selectDate(getDate($event.target.value)) || togglePopover()
|
||||
"
|
||||
/>
|
||||
<Button
|
||||
:label="__('Today')"
|
||||
class="text-sm"
|
||||
@click="selectDate(getDate()) || togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center p-1 text-gray-800"
|
||||
>
|
||||
<div class="flex items-center text-xs uppercase">
|
||||
<div
|
||||
class="flex h-6 w-8 items-center justify-center text-center"
|
||||
v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
|
||||
:key="i"
|
||||
>
|
||||
{{ __(d) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center"
|
||||
v-for="(week, i) in datesAsWeeks"
|
||||
:key="i"
|
||||
>
|
||||
<div
|
||||
v-for="date in week"
|
||||
:key="toValue(date)"
|
||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
|
||||
:class="{
|
||||
'text-gray-400': date.getMonth() !== currentMonth - 1,
|
||||
'font-extrabold text-gray-900':
|
||||
toValue(date) === toValue(today),
|
||||
'bg-gray-800 text-white hover:bg-gray-800':
|
||||
toValue(date) === value,
|
||||
}"
|
||||
@click="
|
||||
() => {
|
||||
selectDate(date)
|
||||
togglePopover()
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ __(date.getDate()) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end p-1">
|
||||
<Button
|
||||
:label="__('Clear')"
|
||||
class="text-sm"
|
||||
@click="
|
||||
() => {
|
||||
selectDate('')
|
||||
togglePopover()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Popover } from 'frappe-ui'
|
||||
export default {
|
||||
name: 'DatePicker',
|
||||
props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
|
||||
emits: ['change'],
|
||||
components: {
|
||||
Popover,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentYear: null,
|
||||
currentMonth: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.selectCurrentMonthYear()
|
||||
},
|
||||
computed: {
|
||||
today() {
|
||||
return this.getDate()
|
||||
},
|
||||
datesAsWeeks() {
|
||||
let datesAsWeeks = []
|
||||
let dates = this.dates.slice()
|
||||
while (dates.length) {
|
||||
let week = dates.splice(0, 7)
|
||||
datesAsWeeks.push(week)
|
||||
}
|
||||
return datesAsWeeks
|
||||
},
|
||||
dates() {
|
||||
if (!(this.currentYear && this.currentMonth)) {
|
||||
return []
|
||||
}
|
||||
let monthIndex = this.currentMonth - 1
|
||||
let year = this.currentYear
|
||||
|
||||
let firstDayOfMonth = this.getDate(year, monthIndex, 1)
|
||||
let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
|
||||
let leftPaddingCount = firstDayOfMonth.getDay()
|
||||
let rightPaddingCount = 6 - lastDayOfMonth.getDay()
|
||||
|
||||
let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
|
||||
let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
|
||||
let daysInMonth = this.getDaysInMonth(monthIndex, year)
|
||||
let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
|
||||
|
||||
let dates = [
|
||||
...leftPadding,
|
||||
firstDayOfMonth,
|
||||
...datesInMonth,
|
||||
...rightPadding,
|
||||
]
|
||||
if (dates.length < 42) {
|
||||
const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
|
||||
dates = dates.concat(...finalPadding)
|
||||
}
|
||||
return dates
|
||||
},
|
||||
formatMonth() {
|
||||
let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
|
||||
let month = __(
|
||||
date.toLocaleString('en-US', {
|
||||
month: 'long',
|
||||
})
|
||||
)
|
||||
return `${month}, ${date.getFullYear()}`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
selectDate(date) {
|
||||
this.$emit('change', this.toValue(date))
|
||||
},
|
||||
selectCurrentMonthYear() {
|
||||
let date = this.value ? this.getDate(this.value) : this.getDate()
|
||||
if (date === 'Invalid Date') {
|
||||
date = this.getDate()
|
||||
}
|
||||
this.currentYear = date.getFullYear()
|
||||
this.currentMonth = date.getMonth() + 1
|
||||
},
|
||||
prevMonth() {
|
||||
this.changeMonth(-1)
|
||||
},
|
||||
nextMonth() {
|
||||
this.changeMonth(1)
|
||||
},
|
||||
changeMonth(adder) {
|
||||
this.currentMonth = this.currentMonth + adder
|
||||
if (this.currentMonth < 1) {
|
||||
this.currentMonth = 12
|
||||
this.currentYear = this.currentYear - 1
|
||||
}
|
||||
if (this.currentMonth > 12) {
|
||||
this.currentMonth = 1
|
||||
this.currentYear = this.currentYear + 1
|
||||
}
|
||||
},
|
||||
getDatesAfter(date, count) {
|
||||
let incrementer = 1
|
||||
if (count < 0) {
|
||||
incrementer = -1
|
||||
count = Math.abs(count)
|
||||
}
|
||||
let dates = []
|
||||
while (count) {
|
||||
date = this.getDate(
|
||||
date.getFullYear(),
|
||||
date.getMonth(),
|
||||
date.getDate() + incrementer
|
||||
)
|
||||
dates.push(date)
|
||||
count--
|
||||
}
|
||||
if (incrementer === -1) {
|
||||
return dates.reverse()
|
||||
}
|
||||
return dates
|
||||
},
|
||||
|
||||
getDaysInMonth(monthIndex, year) {
|
||||
let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
|
||||
let daysInMonth = daysInMonthMap[monthIndex]
|
||||
if (monthIndex === 1 && this.isLeapYear(year)) {
|
||||
return 29
|
||||
}
|
||||
return daysInMonth
|
||||
},
|
||||
|
||||
isLeapYear(year) {
|
||||
if (year % 400 === 0) return true
|
||||
if (year % 100 === 0) return false
|
||||
if (year % 4 === 0) return true
|
||||
return false
|
||||
},
|
||||
|
||||
toValue(date) {
|
||||
if (!date) {
|
||||
return ''
|
||||
}
|
||||
|
||||
// toISOString is buggy and reduces the day by one
|
||||
// this is because it considers the UTC timestamp
|
||||
// in order to circumvent that we need to use luxon/moment
|
||||
// but that refactor could take some time, so fixing the time difference
|
||||
// as suggested in this answer.
|
||||
// https://stackoverflow.com/a/16084846/3541205
|
||||
date.setHours(0, -date.getTimezoneOffset(), 0, 0)
|
||||
return date.toISOString().slice(0, 10)
|
||||
},
|
||||
|
||||
getDate(...args) {
|
||||
let d = new Date(...args)
|
||||
return d
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,311 +0,0 @@
|
||||
<template>
|
||||
<Popover
|
||||
@open="selectCurrentMonthYear"
|
||||
class="flex w-full [&>div:first-child]:w-full"
|
||||
>
|
||||
<template #target="{ togglePopover }">
|
||||
<input
|
||||
readonly
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
:value="formatter ? formatDates(value) : value"
|
||||
@focus="!readonly ? togglePopover() : null"
|
||||
:class="[
|
||||
'form-input block h-7 w-full cursor-pointer select-none rounded border-gray-400 text-sm placeholder-gray-500 ',
|
||||
inputClass,
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #body="{ togglePopover }">
|
||||
<div
|
||||
class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div class="flex items-center p-1 text-gray-500">
|
||||
<Button variant="ghost" class="h-7 w-7" @click="prevMonth">
|
||||
<FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" />
|
||||
</Button>
|
||||
<div class="flex-1 text-center text-base font-medium text-gray-700">
|
||||
{{ formatMonth }}
|
||||
</div>
|
||||
<Button variant="ghost" class="h-7 w-7" @click="nextMonth">
|
||||
<FeatherIcon
|
||||
:stroke-width="2"
|
||||
name="chevron-right"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-1 p-1">
|
||||
<TextInput class="w-28 text-sm" type="text" v-model="fromDate" />
|
||||
<TextInput class="w-28 text-sm" type="text" v-model="toDate" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center p-1 text-gray-800"
|
||||
>
|
||||
<div class="flex items-center text-xs uppercase">
|
||||
<div
|
||||
class="flex h-6 w-8 items-center justify-center text-center"
|
||||
v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
|
||||
:key="i"
|
||||
>
|
||||
{{ __(d) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center"
|
||||
v-for="(week, i) in datesAsWeeks"
|
||||
:key="i"
|
||||
>
|
||||
<div
|
||||
v-for="date in week"
|
||||
:key="toValue(date)"
|
||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
|
||||
:class="{
|
||||
'text-gray-400': date.getMonth() !== currentMonth - 1,
|
||||
'text-gray-900': date.getMonth() === currentMonth - 1,
|
||||
'font-extrabold text-gray-900':
|
||||
toValue(date) === toValue(today),
|
||||
'rounded-none bg-gray-100': isInRange(date),
|
||||
'rounded-l-md rounded-r-none bg-gray-800 text-white hover:bg-gray-800':
|
||||
fromDate && toValue(date) === toValue(fromDate),
|
||||
'rounded-r-md bg-gray-800 text-white hover:bg-gray-800':
|
||||
toDate && toValue(date) === toValue(toDate),
|
||||
}"
|
||||
@click="() => handleDateClick(date)"
|
||||
>
|
||||
{{ date.getDate() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-1 p-1">
|
||||
<Button
|
||||
:label="__('Clear')"
|
||||
@click="() => clearDates() | togglePopover()"
|
||||
:disabled="!fromDate || !toDate"
|
||||
/>
|
||||
<Button
|
||||
variant="solid"
|
||||
:label="__('Apply')"
|
||||
:disabled="!fromDate || !toDate"
|
||||
@click="() => selectDates() | togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Popover } from 'frappe-ui'
|
||||
export default {
|
||||
name: 'DateRangePicker',
|
||||
props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
|
||||
emits: ['change'],
|
||||
components: {
|
||||
Popover,
|
||||
},
|
||||
data() {
|
||||
const fromDate = this.value ? this.value[0] : ''
|
||||
const toDate = this.value ? this.value[1] : ''
|
||||
return {
|
||||
currentYear: null,
|
||||
currentMonth: null,
|
||||
fromDate,
|
||||
toDate,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.selectCurrentMonthYear()
|
||||
},
|
||||
computed: {
|
||||
today() {
|
||||
return this.getDate()
|
||||
},
|
||||
datesAsWeeks() {
|
||||
let datesAsWeeks = []
|
||||
let dates = this.dates.slice()
|
||||
while (dates.length) {
|
||||
let week = dates.splice(0, 7)
|
||||
datesAsWeeks.push(week)
|
||||
}
|
||||
return datesAsWeeks
|
||||
},
|
||||
dates() {
|
||||
if (!(this.currentYear && this.currentMonth)) {
|
||||
return []
|
||||
}
|
||||
let monthIndex = this.currentMonth - 1
|
||||
let year = this.currentYear
|
||||
|
||||
let firstDayOfMonth = this.getDate(year, monthIndex, 1)
|
||||
let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
|
||||
let leftPaddingCount = firstDayOfMonth.getDay()
|
||||
let rightPaddingCount = 6 - lastDayOfMonth.getDay()
|
||||
|
||||
let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
|
||||
let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
|
||||
let daysInMonth = this.getDaysInMonth(monthIndex, year)
|
||||
let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
|
||||
|
||||
let dates = [
|
||||
...leftPadding,
|
||||
firstDayOfMonth,
|
||||
...datesInMonth,
|
||||
...rightPadding,
|
||||
]
|
||||
if (dates.length < 42) {
|
||||
const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
|
||||
dates = dates.concat(...finalPadding)
|
||||
}
|
||||
return dates
|
||||
},
|
||||
formatMonth() {
|
||||
let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
|
||||
let month = __(
|
||||
date.toLocaleString('en-US', {
|
||||
month: 'long',
|
||||
})
|
||||
)
|
||||
return `${month}, ${date.getFullYear()}`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleDateClick(date) {
|
||||
if (this.fromDate && this.toDate) {
|
||||
this.fromDate = this.toValue(date)
|
||||
this.toDate = ''
|
||||
} else if (this.fromDate && !this.toDate) {
|
||||
this.toDate = this.toValue(date)
|
||||
} else {
|
||||
this.fromDate = this.toValue(date)
|
||||
}
|
||||
this.swapDatesIfNecessary()
|
||||
},
|
||||
selectDates() {
|
||||
if (!this.fromDate && !this.toDate) {
|
||||
return this.$emit('change', '')
|
||||
}
|
||||
this.$emit('change', `${this.fromDate},${this.toDate}`)
|
||||
},
|
||||
swapDatesIfNecessary() {
|
||||
if (!this.fromDate || !this.toDate) {
|
||||
return
|
||||
}
|
||||
// if fromDate is greater than toDate, swap them
|
||||
let fromDate = this.getDate(this.fromDate)
|
||||
let toDate = this.getDate(this.toDate)
|
||||
if (fromDate > toDate) {
|
||||
let temp = fromDate
|
||||
fromDate = toDate
|
||||
toDate = temp
|
||||
}
|
||||
this.fromDate = this.toValue(fromDate)
|
||||
this.toDate = this.toValue(toDate)
|
||||
},
|
||||
selectCurrentMonthYear() {
|
||||
let date = this.toDate ? this.getDate(this.toDate) : this.today
|
||||
this.currentYear = date.getFullYear()
|
||||
this.currentMonth = date.getMonth() + 1
|
||||
},
|
||||
prevMonth() {
|
||||
this.changeMonth(-1)
|
||||
},
|
||||
nextMonth() {
|
||||
this.changeMonth(1)
|
||||
},
|
||||
changeMonth(adder) {
|
||||
this.currentMonth = this.currentMonth + adder
|
||||
if (this.currentMonth < 1) {
|
||||
this.currentMonth = 12
|
||||
this.currentYear = this.currentYear - 1
|
||||
}
|
||||
if (this.currentMonth > 12) {
|
||||
this.currentMonth = 1
|
||||
this.currentYear = this.currentYear + 1
|
||||
}
|
||||
},
|
||||
getDatesAfter(date, count) {
|
||||
let incrementer = 1
|
||||
if (count < 0) {
|
||||
incrementer = -1
|
||||
count = Math.abs(count)
|
||||
}
|
||||
let dates = []
|
||||
while (count) {
|
||||
date = this.getDate(
|
||||
date.getFullYear(),
|
||||
date.getMonth(),
|
||||
date.getDate() + incrementer
|
||||
)
|
||||
dates.push(date)
|
||||
count--
|
||||
}
|
||||
if (incrementer === -1) {
|
||||
return dates.reverse()
|
||||
}
|
||||
return dates
|
||||
},
|
||||
|
||||
getDaysInMonth(monthIndex, year) {
|
||||
let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
|
||||
let daysInMonth = daysInMonthMap[monthIndex]
|
||||
if (monthIndex === 1 && this.isLeapYear(year)) {
|
||||
return 29
|
||||
}
|
||||
return daysInMonth
|
||||
},
|
||||
|
||||
isLeapYear(year) {
|
||||
if (year % 400 === 0) return true
|
||||
if (year % 100 === 0) return false
|
||||
if (year % 4 === 0) return true
|
||||
return false
|
||||
},
|
||||
|
||||
toValue(date) {
|
||||
if (!date) {
|
||||
return ''
|
||||
}
|
||||
if (typeof date === 'string') {
|
||||
return date
|
||||
}
|
||||
|
||||
// toISOString is buggy and reduces the day by one
|
||||
// this is because it considers the UTC timestamp
|
||||
// in order to circumvent that we need to use luxon/moment
|
||||
// but that refactor could take some time, so fixing the time difference
|
||||
// as suggested in this answer.
|
||||
// https://stackoverflow.com/a/16084846/3541205
|
||||
date.setHours(0, -date.getTimezoneOffset(), 0, 0)
|
||||
return date.toISOString().slice(0, 10)
|
||||
},
|
||||
|
||||
getDate(...args) {
|
||||
let d = new Date(...args)
|
||||
return d
|
||||
},
|
||||
|
||||
isInRange(date) {
|
||||
if (!this.fromDate || !this.toDate) {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
date >= this.getDate(this.fromDate) && date <= this.getDate(this.toDate)
|
||||
)
|
||||
},
|
||||
|
||||
formatDates(value) {
|
||||
if (!value) {
|
||||
return ''
|
||||
}
|
||||
const values = value.split(',')
|
||||
return this.formatter(values[0]) + ' to ' + this.formatter(values[1])
|
||||
},
|
||||
clearDates() {
|
||||
this.fromDate = ''
|
||||
this.toDate = ''
|
||||
this.selectDates()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,379 +0,0 @@
|
||||
<template>
|
||||
<Popover
|
||||
@open="selectCurrentMonthYear"
|
||||
class="flex w-full [&>div:first-child]:w-full"
|
||||
>
|
||||
<template #target="{ togglePopover }">
|
||||
<Input
|
||||
readonly
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
:value="value && formatter ? formatter(value) : value"
|
||||
@focus="!readonly ? togglePopover() : null"
|
||||
:class="inputClass"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</template>
|
||||
<template #body="{ togglePopover }">
|
||||
<div
|
||||
class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div class="flex items-center p-1 text-gray-500">
|
||||
<Button variant="ghost" class="h-7 w-7" @click="prevMonth">
|
||||
<FeatherIcon :stroke-width="2" name="chevron-left" class="h-4 w-4" />
|
||||
</Button>
|
||||
<div class="flex-1 text-center text-base font-medium text-gray-700">
|
||||
{{ formatMonth }}
|
||||
</div>
|
||||
<Button variant="ghost" class="h-7 w-7" @click="nextMonth">
|
||||
<FeatherIcon
|
||||
:stroke-width="2"
|
||||
name="chevron-right"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-1 p-1">
|
||||
<TextInput
|
||||
class="text-sm"
|
||||
type="text"
|
||||
:value="value"
|
||||
@change="updateDate($event.target.value) || togglePopover()"
|
||||
/>
|
||||
<Button
|
||||
:label="__('Now')"
|
||||
class="text-sm"
|
||||
@click="selectDate(getDate(), false, true) || togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center p-1 text-gray-800"
|
||||
>
|
||||
<div class="flex items-center text-xs uppercase">
|
||||
<div
|
||||
class="flex h-6 w-8 items-center justify-center text-center"
|
||||
v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
|
||||
:key="i"
|
||||
>
|
||||
{{ __(d) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center"
|
||||
v-for="(week, i) in datesAsWeeks"
|
||||
:key="i"
|
||||
>
|
||||
<div
|
||||
v-for="date in week"
|
||||
:key="toValue(date)"
|
||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
|
||||
:class="{
|
||||
'text-gray-400': date.getMonth() !== currentMonth - 1,
|
||||
'font-extrabold text-gray-900':
|
||||
toValue(date) === toValue(today),
|
||||
'bg-gray-800 text-white hover:bg-gray-800':
|
||||
toValue(date) === value,
|
||||
}"
|
||||
@click="
|
||||
() => {
|
||||
selectDate(date)
|
||||
togglePopover()
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ date.getDate() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-around gap-2 p-1">
|
||||
<div>
|
||||
{{ twoDigit(hour) }} : {{ twoDigit(minute) }} :
|
||||
{{ twoDigit(second) }}
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="slider flex min-h-4 items-center justify-center">
|
||||
<TextInput
|
||||
v-model="hour"
|
||||
name="hours"
|
||||
type="range"
|
||||
min="0"
|
||||
max="23"
|
||||
step="1"
|
||||
@change="() => changeTime() || togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
<div class="slider flex min-h-4 items-center justify-center">
|
||||
<TextInput
|
||||
v-model="minute"
|
||||
name="minutes"
|
||||
type="range"
|
||||
min="0"
|
||||
max="59"
|
||||
step="1"
|
||||
@change="() => changeTime() || togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
<div class="slider flex min-h-4 items-center justify-center">
|
||||
<TextInput
|
||||
v-model="second"
|
||||
name="seconds"
|
||||
type="range"
|
||||
min="0"
|
||||
max="59"
|
||||
step="1"
|
||||
@change="() => changeTime() || togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end p-1">
|
||||
<Button
|
||||
:label="__('Clear')"
|
||||
class="text-sm"
|
||||
@click="
|
||||
() => {
|
||||
selectDate('')
|
||||
togglePopover()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Popover } from 'frappe-ui'
|
||||
export default {
|
||||
name: 'DatePicker',
|
||||
props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
|
||||
emits: ['change'],
|
||||
components: {
|
||||
Popover,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentYear: null,
|
||||
currentMonth: null,
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.selectCurrentMonthYear()
|
||||
},
|
||||
computed: {
|
||||
today() {
|
||||
return this.getDate()
|
||||
},
|
||||
datesAsWeeks() {
|
||||
let datesAsWeeks = []
|
||||
let dates = this.dates.slice()
|
||||
while (dates.length) {
|
||||
let week = dates.splice(0, 7)
|
||||
datesAsWeeks.push(week)
|
||||
}
|
||||
return datesAsWeeks
|
||||
},
|
||||
dates() {
|
||||
if (!(this.currentYear && this.currentMonth)) {
|
||||
return []
|
||||
}
|
||||
let monthIndex = this.currentMonth - 1
|
||||
let year = this.currentYear
|
||||
|
||||
let firstDayOfMonth = this.getDate(year, monthIndex, 1)
|
||||
let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
|
||||
let leftPaddingCount = firstDayOfMonth.getDay()
|
||||
let rightPaddingCount = 6 - lastDayOfMonth.getDay()
|
||||
|
||||
let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
|
||||
let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
|
||||
let daysInMonth = this.getDaysInMonth(monthIndex, year)
|
||||
let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
|
||||
|
||||
let dates = [
|
||||
...leftPadding,
|
||||
firstDayOfMonth,
|
||||
...datesInMonth,
|
||||
...rightPadding,
|
||||
]
|
||||
if (dates.length < 42) {
|
||||
const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
|
||||
dates = dates.concat(...finalPadding)
|
||||
}
|
||||
return dates
|
||||
},
|
||||
formatMonth() {
|
||||
let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
|
||||
let month = __(
|
||||
date.toLocaleString('en-US', {
|
||||
month: 'long',
|
||||
})
|
||||
)
|
||||
return `${month}, ${date.getFullYear()}`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeTime() {
|
||||
let date = this.value ? this.getDate(this.value) : this.getDate()
|
||||
this.selectDate(date, true)
|
||||
},
|
||||
selectDate(date, isTimeChange = false, isNow = false) {
|
||||
if (!isTimeChange) {
|
||||
let currentDate =
|
||||
this.value && !isNow ? this.getDate(this.value) : this.getDate()
|
||||
this.hour = currentDate.getHours()
|
||||
this.minute = currentDate.getMinutes()
|
||||
this.second = currentDate.getSeconds()
|
||||
}
|
||||
this.$emit('change', this.toValue(date))
|
||||
},
|
||||
selectCurrentMonthYear() {
|
||||
let date = this.value ? this.getDate(this.value) : this.getDate()
|
||||
if (date === 'Invalid Date') {
|
||||
date = this.getDate()
|
||||
}
|
||||
this.currentYear = date.getFullYear()
|
||||
this.currentMonth = date.getMonth() + 1
|
||||
this.hour = date.getHours()
|
||||
this.minute = date.getMinutes()
|
||||
this.second = date.getSeconds()
|
||||
},
|
||||
prevMonth() {
|
||||
this.changeMonth(-1)
|
||||
},
|
||||
nextMonth() {
|
||||
this.changeMonth(1)
|
||||
},
|
||||
changeMonth(adder) {
|
||||
this.currentMonth = this.currentMonth + adder
|
||||
if (this.currentMonth < 1) {
|
||||
this.currentMonth = 12
|
||||
this.currentYear = this.currentYear - 1
|
||||
}
|
||||
if (this.currentMonth > 12) {
|
||||
this.currentMonth = 1
|
||||
this.currentYear = this.currentYear + 1
|
||||
}
|
||||
},
|
||||
getDatesAfter(date, count) {
|
||||
let incrementer = 1
|
||||
if (count < 0) {
|
||||
incrementer = -1
|
||||
count = Math.abs(count)
|
||||
}
|
||||
let dates = []
|
||||
while (count) {
|
||||
date = this.getDate(
|
||||
date.getFullYear(),
|
||||
date.getMonth(),
|
||||
date.getDate() + incrementer
|
||||
)
|
||||
dates.push(date)
|
||||
count--
|
||||
}
|
||||
if (incrementer === -1) {
|
||||
return dates.reverse()
|
||||
}
|
||||
return dates
|
||||
},
|
||||
getDaysInMonth(monthIndex, year) {
|
||||
let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
|
||||
let daysInMonth = daysInMonthMap[monthIndex]
|
||||
if (monthIndex === 1 && this.isLeapYear(year)) {
|
||||
return 29
|
||||
}
|
||||
return daysInMonth
|
||||
},
|
||||
isLeapYear(year) {
|
||||
if (year % 400 === 0) return true
|
||||
if (year % 100 === 0) return false
|
||||
if (year % 4 === 0) return true
|
||||
return false
|
||||
},
|
||||
twoDigit(number) {
|
||||
return number.toString().padStart(2, '0')
|
||||
},
|
||||
toValue(date) {
|
||||
if (!date) return ''
|
||||
|
||||
date.setHours(this.hour, this.minute, this.second, 0)
|
||||
// "YYYY-MM-DD HH:MM:SS"
|
||||
return `${date.getFullYear()}-${this.twoDigit(
|
||||
date.getMonth() + 1
|
||||
)}-${this.twoDigit(date.getDate())} ${this.twoDigit(
|
||||
date.getHours()
|
||||
)}:${this.twoDigit(date.getMinutes())}:${this.twoDigit(
|
||||
date.getSeconds()
|
||||
)}`
|
||||
},
|
||||
getDate(...args) {
|
||||
let d = new Date(...args)
|
||||
return d
|
||||
},
|
||||
updateDate(date) {
|
||||
date = this.getDate(date)
|
||||
this.hour = date.getHours()
|
||||
this.minute = date.getMinutes()
|
||||
this.second = date.getSeconds()
|
||||
this.selectDate(date, true)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slider {
|
||||
--trackHeight: 1px;
|
||||
--thumbRadius: 10px;
|
||||
}
|
||||
:deep(.slider input[type='range']) {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.slider input[type='range']::-webkit-slider-runnable-track) {
|
||||
appearance: none;
|
||||
background: #000;
|
||||
height: var(--trackHeight);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
:deep(.slider input[type='range']:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:deep(.slider input[type='range']::-webkit-slider-thumb) {
|
||||
width: var(--thumbRadius);
|
||||
height: var(--thumbRadius);
|
||||
margin-top: calc((var(--trackHeight) - var(--thumbRadius)) / 2);
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
pointer-events: all;
|
||||
appearance: none;
|
||||
outline: 1px solid #777777;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:deep(.slider:hover input[type='range']::-webkit-slider-thumb) {
|
||||
outline: 1px solid #000;
|
||||
}
|
||||
:deep(.slider input[type='range']::-webkit-slider-thumb) {
|
||||
width: var(--thumbRadius);
|
||||
height: var(--thumbRadius);
|
||||
margin-top: calc((var(--trackHeight) - var(--thumbRadius)) / 2);
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
pointer-events: all;
|
||||
appearance: none;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
@ -93,7 +93,8 @@ import {
|
||||
ComboboxOption,
|
||||
} from '@headlessui/vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import { Popover, createResource } from 'frappe-ui'
|
||||
import Popover from '@/components/frappe-ui/Popover.vue'
|
||||
import { createResource } from 'frappe-ui'
|
||||
import { ref, computed, nextTick } from 'vue'
|
||||
import { watchDebounced } from '@vueuse/core'
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
"
|
||||
>
|
||||
<div v-for="field in section.fields" :key="field.name">
|
||||
<div class="mb-2 text-sm text-gray-600">
|
||||
<div v-if="field.type != 'Check'" class="mb-2 text-sm text-gray-600">
|
||||
{{ __(field.label) }}
|
||||
<span class="text-red-500" v-if="field.mandatory">*</span>
|
||||
</div>
|
||||
@ -32,6 +32,25 @@
|
||||
<IndicatorIcon :class="field.prefix" />
|
||||
</template>
|
||||
</FormControl>
|
||||
<div
|
||||
v-else-if="field.type == 'Check'"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<FormControl
|
||||
class="form-control"
|
||||
type="checkbox"
|
||||
v-model="data[field.name]"
|
||||
@change="(e) => (data[field.name] = e.target.checked)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
<label
|
||||
class="text-sm text-gray-600"
|
||||
@click="data[field.name] = !data[field.name]"
|
||||
>
|
||||
{{ __(field.label) }}
|
||||
<span class="text-red-500" v-if="field.mandatory">*</span>
|
||||
</label>
|
||||
</div>
|
||||
<Link
|
||||
v-else-if="field.type === 'Link'"
|
||||
class="form-control"
|
||||
@ -113,6 +132,30 @@
|
||||
</template>
|
||||
</NestedPopover>
|
||||
</div>
|
||||
<DateTimePicker
|
||||
v-else-if="field.type === 'Datetime'"
|
||||
v-model="data[field.name]"
|
||||
:placeholder="__(field.placeholder || field.label)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<DatePicker
|
||||
v-else-if="field.type === 'Date'"
|
||||
v-model="data[field.name]"
|
||||
:placeholder="__(field.placeholder || field.label)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="['Small Text', 'Text', 'Long Text'].includes(field.type)"
|
||||
type="textarea"
|
||||
:placeholder="__(field.placeholder || field.label)"
|
||||
v-model="data[field.name]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="['Int'].includes(field.type)"
|
||||
type="number"
|
||||
:placeholder="__(field.placeholder || field.label)"
|
||||
v-model="data[field.name]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else
|
||||
type="text"
|
||||
@ -132,8 +175,7 @@ import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { Tooltip } from 'frappe-ui'
|
||||
import { isMobileView } from '@/composables/settings'
|
||||
import { Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
|
||||
|
||||
const { getUser } = usersStore()
|
||||
|
||||
|
||||
@ -34,10 +34,10 @@
|
||||
v-for="(f, i) in filters"
|
||||
:key="i"
|
||||
id="filter-list"
|
||||
class="sm:mb-3 mb-4"
|
||||
class="mb-4 sm:mb-3"
|
||||
>
|
||||
<div v-if="isMobileView" class="flex flex-col gap-2">
|
||||
<div class="flex w-full items-center justify-between -mb-2">
|
||||
<div class="-mb-2 flex w-full items-center justify-between">
|
||||
<div class="text-base text-gray-600">
|
||||
{{ i == 0 ? __('Where') : __('And') }}
|
||||
</div>
|
||||
@ -102,7 +102,7 @@
|
||||
<component
|
||||
:is="getValSelect(f)"
|
||||
v-model="f.value"
|
||||
@change.stop="(v) => updateValue(v, f)"
|
||||
@change="(v) => updateValue(v, f)"
|
||||
:placeholder="__('John Doe')"
|
||||
/>
|
||||
</div>
|
||||
@ -155,14 +155,18 @@
|
||||
</NestedPopover>
|
||||
</template>
|
||||
<script setup>
|
||||
import DatePicker from '@/components/Controls/DatePicker.vue'
|
||||
import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
|
||||
import DateRangePicker from '@/components/Controls/DateRangePicker.vue'
|
||||
import NestedPopover from '@/components/NestedPopover.vue'
|
||||
import FilterIcon from '@/components/Icons/FilterIcon.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
|
||||
import { FormControl, createResource, Tooltip } from 'frappe-ui'
|
||||
import {
|
||||
FormControl,
|
||||
createResource,
|
||||
Tooltip,
|
||||
DatePicker,
|
||||
DateTimePicker,
|
||||
DateRangePicker,
|
||||
} from 'frappe-ui'
|
||||
import { h, computed, onMounted } from 'vue'
|
||||
import { isMobileView } from '@/composables/settings'
|
||||
|
||||
@ -395,10 +399,11 @@ function getValSelect(f) {
|
||||
} else if (typeNumber.includes(fieldtype)) {
|
||||
return h(FormControl, { type: 'number' })
|
||||
} else if (typeDate.includes(fieldtype) && operator == 'between') {
|
||||
return h(DateRangePicker, { value: f.value })
|
||||
return h(DateRangePicker, { value: f.value, iconLeft: '' })
|
||||
} else if (typeDate.includes(fieldtype)) {
|
||||
return h(fieldtype == 'Date' ? DatePicker : DatetimePicker, {
|
||||
return h(fieldtype == 'Date' ? DatePicker : DateTimePicker, {
|
||||
value: f.value,
|
||||
iconLeft: '',
|
||||
})
|
||||
} else {
|
||||
return h(FormControl, { type: 'text' })
|
||||
|
||||
@ -64,8 +64,8 @@
|
||||
</Popover>
|
||||
</template>
|
||||
<script setup>
|
||||
import Popover from '@/components/frappe-ui/Popover.vue'
|
||||
import { gemoji } from 'gemoji'
|
||||
import { Popover } from 'frappe-ui'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const search = ref('')
|
||||
|
||||
@ -34,10 +34,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DatePicker from '@/components/Controls/DatePicker.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
|
||||
import { FormControl, call, createResource, TextEditor } from 'frappe-ui'
|
||||
import { FormControl, call, createResource, TextEditor, DatePicker } from 'frappe-ui'
|
||||
import { ref, computed, onMounted, h } from 'vue'
|
||||
|
||||
const typeCheck = ['Check']
|
||||
|
||||
@ -91,11 +91,9 @@
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
<DatetimePicker
|
||||
<DateTimePicker
|
||||
class="datepicker w-36"
|
||||
icon-left="calendar"
|
||||
:value="_task.due_date"
|
||||
@change="(val) => (_task.due_date = val)"
|
||||
v-model="_task.due_date"
|
||||
:placeholder="__('01/04/2024 11:30 PM')"
|
||||
input-class="border-none"
|
||||
/>
|
||||
@ -120,8 +118,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { taskStatusOptions, taskPriorityOptions } from '@/utils'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
|
||||
import { TextEditor, Dropdown, Tooltip, call } from 'frappe-ui'
|
||||
import { TextEditor, Dropdown, Tooltip, call, DateTimePicker } from 'frappe-ui'
|
||||
import { ref, watch, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
<component
|
||||
v-else-if="['Date', 'Datetime'].includes(filter.type)"
|
||||
class="border-none"
|
||||
:is="filter.type === 'Date' ? DatePicker : DatetimePicker"
|
||||
:is="filter.type === 'Date' ? DatePicker : DateTimePicker"
|
||||
:value="filter.value"
|
||||
@change="(v) => updateFilter(filter, v)"
|
||||
:placeholder="filter.label"
|
||||
@ -39,10 +39,8 @@
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
import DatePicker from '@/components/Controls/DatePicker.vue'
|
||||
import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { TextInput, FormControl } from 'frappe-ui'
|
||||
import { TextInput, FormControl, DatePicker, DateTimePicker } from 'frappe-ui'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
64
frontend/src/components/Settings/ProfileImageEditor.vue
Normal file
64
frontend/src/components/Settings/ProfileImageEditor.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<FileUploader
|
||||
@success="(file) => setUserImage(file.file_url)"
|
||||
:validateFile="validateFile"
|
||||
>
|
||||
<template v-slot="{ file, progress, error, uploading, openFileSelector }">
|
||||
<div class="flex flex-col items-center">
|
||||
<button
|
||||
class="group relative rounded-full border-2"
|
||||
@click="openFileSelector"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 grid place-items-center rounded-full bg-gray-400/20 text-base text-gray-600 transition-opacity"
|
||||
:class="[
|
||||
uploading ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
|
||||
'drop-shadow-sm',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
class="inline-block rounded-md bg-gray-900/60 px-2 py-1 text-white"
|
||||
>
|
||||
{{
|
||||
uploading
|
||||
? `Uploading ${progress}%`
|
||||
: profile.user_image
|
||||
? 'Change Image'
|
||||
: 'Upload Image'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<img
|
||||
v-if="profile.user_image"
|
||||
class="h-64 w-64 rounded-full object-cover"
|
||||
:src="profile.user_image"
|
||||
alt="Profile Photo"
|
||||
/>
|
||||
<div v-else class="h-64 w-64 rounded-full bg-gray-100"></div>
|
||||
</button>
|
||||
<ErrorMessage class="mt-4" :message="error" />
|
||||
<div class="mt-4 flex items-center gap-4">
|
||||
<Button v-if="profile.user_image" @click="setUserImage(null)">
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</FileUploader>
|
||||
</template>
|
||||
<script setup>
|
||||
import { FileUploader } from 'frappe-ui'
|
||||
|
||||
const profile = defineModel()
|
||||
|
||||
function setUserImage(url) {
|
||||
profile.value.user_image = url
|
||||
}
|
||||
|
||||
function validateFile(file) {
|
||||
let extn = file.name.split('.').pop().toLowerCase()
|
||||
if (!['png', 'jpg'].includes(extn)) {
|
||||
return 'Only PNG and JPG images are allowed'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
100
frontend/src/components/Settings/ProfileSettings.vue
Normal file
100
frontend/src/components/Settings/ProfileSettings.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div v-if="profile" class="flex w-full items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar
|
||||
class="!size-16"
|
||||
:image="profile.user_image"
|
||||
:label="profile.full_name"
|
||||
/>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-2xl font-semibold">{{ profile.full_name }}</span>
|
||||
<span class="text-base text-gray-700">{{ profile.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button :label="__('Edit profile')" @click="showProfileModal = true" />
|
||||
<Dialog
|
||||
:options="{ title: __('Edit Profile') }"
|
||||
v-model="showProfileModal"
|
||||
@after-leave="editingProfilePhoto = false"
|
||||
>
|
||||
<template #body-content>
|
||||
<div v-if="user" class="space-y-4">
|
||||
<ProfileImageEditor v-model="profile" v-if="editingProfilePhoto" />
|
||||
<template v-else>
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar
|
||||
size="lg"
|
||||
:image="profile.user_image"
|
||||
:label="profile.full_name"
|
||||
/>
|
||||
<Button
|
||||
:label="__('Edit Profile Photo')"
|
||||
@click="editingProfilePhoto = true"
|
||||
/>
|
||||
</div>
|
||||
<FormControl label="First Name" v-model="profile.first_name" />
|
||||
<FormControl label="Last Name" v-model="profile.last_name" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button
|
||||
v-if="editingProfilePhoto"
|
||||
class="mb-2 w-full"
|
||||
@click="editingProfilePhoto = false"
|
||||
:label="__('Back')"
|
||||
/>
|
||||
<Button
|
||||
variant="solid"
|
||||
class="w-full"
|
||||
:loading="loading"
|
||||
@click="updateUser"
|
||||
:label="__('Save')"
|
||||
/>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import ProfileImageEditor from '@/components/Settings/ProfileImageEditor.vue'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { Dialog, Avatar, createResource } from 'frappe-ui'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
const { getUser, users } = usersStore()
|
||||
|
||||
const user = computed(() => getUser() || {})
|
||||
|
||||
const showProfileModal = ref(false)
|
||||
|
||||
const editingProfilePhoto = ref(false)
|
||||
const profile = ref({})
|
||||
const loading = ref(false)
|
||||
|
||||
function updateUser() {
|
||||
loading.value = true
|
||||
const fieldname = {
|
||||
first_name: profile.value.first_name,
|
||||
last_name: profile.value.last_name,
|
||||
user_image: profile.value.user_image,
|
||||
}
|
||||
createResource({
|
||||
url: 'frappe.client.set_value',
|
||||
params: {
|
||||
doctype: 'User',
|
||||
name: user.value.name,
|
||||
fieldname,
|
||||
},
|
||||
auto: true,
|
||||
onSuccess: () => {
|
||||
loading.value = false
|
||||
showProfileModal.value = false
|
||||
users.reload()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
profile.value = { ...user.value }
|
||||
})
|
||||
</script>
|
||||
93
frontend/src/components/Settings/SettingsModal.vue
Normal file
93
frontend/src/components/Settings/SettingsModal.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<Dialog v-model="show" :options="{ size: '5xl' }">
|
||||
<template #body>
|
||||
<div class="flex h-[calc(100vh_-_8rem)]">
|
||||
<div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
|
||||
<h1 class="px-2 pt-2 text-lg font-semibold">
|
||||
{{ __('Settings') }}
|
||||
</h1>
|
||||
<nav class="mt-3 space-y-1">
|
||||
<SidebarLink
|
||||
v-for="tab in tabs"
|
||||
:icon="tab.icon"
|
||||
:label="__(tab.label)"
|
||||
class="w-full"
|
||||
:class="
|
||||
activeTab?.label == tab.label
|
||||
? 'bg-white shadow-sm'
|
||||
: 'hover:bg-gray-100'
|
||||
"
|
||||
@click="activeTab = tab"
|
||||
/>
|
||||
</nav>
|
||||
<div
|
||||
class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
|
||||
>
|
||||
<span>{{ __('Integrations') }}</span>
|
||||
</div>
|
||||
<nav class="space-y-1">
|
||||
<SidebarLink
|
||||
v-for="i in integrations"
|
||||
:icon="i.icon"
|
||||
:label="__(i.label)"
|
||||
class="w-full"
|
||||
:class="
|
||||
activeTab?.label == i.label
|
||||
? 'bg-white shadow-sm'
|
||||
: 'hover:bg-gray-100'
|
||||
"
|
||||
@click="activeTab = i"
|
||||
/>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col overflow-y-auto p-8">
|
||||
<component :is="activeTab.component" v-if="activeTab" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
|
||||
import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
|
||||
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||
import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
|
||||
import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
|
||||
import TwilioSettings from '@/components/Settings/TwilioSettings.vue'
|
||||
import SidebarLink from '@/components/SidebarLink.vue'
|
||||
import { isWhatsappInstalled } from '@/composables/settings'
|
||||
import { Dialog } from 'frappe-ui'
|
||||
import { ref, markRaw, computed } from 'vue'
|
||||
|
||||
const show = defineModel()
|
||||
|
||||
let tabs = [
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: ContactsIcon,
|
||||
component: markRaw(ProfileSettings),
|
||||
},
|
||||
]
|
||||
|
||||
let integrations = computed(() => {
|
||||
let items = [
|
||||
{
|
||||
label: 'Twilio',
|
||||
icon: PhoneIcon,
|
||||
component: markRaw(TwilioSettings),
|
||||
},
|
||||
]
|
||||
|
||||
if (isWhatsappInstalled.value) {
|
||||
items.push({
|
||||
label: 'WhatsApp',
|
||||
icon: WhatsAppIcon,
|
||||
component: markRaw(WhatsAppSettings),
|
||||
})
|
||||
}
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
const activeTab = ref(tabs[0])
|
||||
</script>
|
||||
97
frontend/src/components/Settings/SettingsPage.vue
Normal file
97
frontend/src/components/Settings/SettingsPage.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-8">
|
||||
<h2 class="flex gap-2 text-xl font-semibold leading-none">
|
||||
<div>{{ __(doctype) }}</div>
|
||||
<Badge
|
||||
:label="__('Not Saved')"
|
||||
variant="subtle"
|
||||
theme="orange"
|
||||
v-if="data.isDirty"
|
||||
/>
|
||||
</h2>
|
||||
<div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
|
||||
<Fields
|
||||
v-if="data?.doc && sections"
|
||||
:sections="sections"
|
||||
:data="data.doc"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex flex-1 items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
<div class="flex flex-row-reverse">
|
||||
<Button
|
||||
:loading="data.save.loading"
|
||||
:label="__('Update')"
|
||||
variant="solid"
|
||||
@click="update"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import Fields from '@/components/Fields.vue'
|
||||
import { createDocumentResource, createResource, Spinner, Badge } from 'frappe-ui'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
doctype: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const fields = createResource({
|
||||
url: 'crm.api.doc.get_fields',
|
||||
cache: ['fields', props.doctype],
|
||||
params: {
|
||||
doctype: props.doctype,
|
||||
allow_all_fieldtypes: true,
|
||||
},
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const data = createDocumentResource({
|
||||
doctype: props.doctype,
|
||||
name: props.doctype,
|
||||
fields: ['*'],
|
||||
cache: props.doctype,
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const sections = computed(() => {
|
||||
if (!fields.data) return []
|
||||
let _sections = []
|
||||
let fieldsData = fields.data
|
||||
|
||||
if (fieldsData[0].type !== 'Section Break') {
|
||||
_sections.push({
|
||||
label: 'General',
|
||||
columns: 1,
|
||||
fields: [],
|
||||
})
|
||||
}
|
||||
fieldsData.forEach((field) => {
|
||||
if (field.type === 'Section Break') {
|
||||
_sections.push({
|
||||
label: field.value,
|
||||
columns: 1,
|
||||
fields: [],
|
||||
})
|
||||
} else if (field.type === 'Column Break') {
|
||||
_sections[_sections.length - 1].columns += 1
|
||||
} else {
|
||||
_sections[_sections.length - 1].fields.push({
|
||||
...field,
|
||||
name: field.value,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return _sections
|
||||
})
|
||||
|
||||
function update() {
|
||||
data.save.submit()
|
||||
}
|
||||
</script>
|
||||
6
frontend/src/components/Settings/TwilioSettings.vue
Normal file
6
frontend/src/components/Settings/TwilioSettings.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<SettingsPage doctype="Twilio Settings" />
|
||||
</template>
|
||||
<script setup>
|
||||
import SettingsPage from '@/components/Settings/SettingsPage.vue'
|
||||
</script>
|
||||
6
frontend/src/components/Settings/WhatsAppSettings.vue
Normal file
6
frontend/src/components/Settings/WhatsAppSettings.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<SettingsPage doctype="WhatsApp Settings" />
|
||||
</template>
|
||||
<script setup>
|
||||
import SettingsPage from '@/components/Settings/SettingsPage.vue'
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Dropdown :options="dropdownOptions">
|
||||
<Dropdown :options="dropdownOptions" v-bind="$attrs">
|
||||
<template v-slot="{ open }">
|
||||
<button
|
||||
class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out"
|
||||
@ -44,9 +44,11 @@
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<SettingsModal v-model="showSettingsModal" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SettingsModal from '@/components/Settings/SettingsModal.vue'
|
||||
import CRMLogo from '@/components/Icons/CRMLogo.vue'
|
||||
import { sessionStore } from '@/stores/session'
|
||||
import { usersStore } from '@/stores/users'
|
||||
@ -65,6 +67,8 @@ const { getUser } = usersStore()
|
||||
|
||||
const user = computed(() => getUser() || {})
|
||||
|
||||
const showSettingsModal = ref(false)
|
||||
|
||||
let dropdownOptions = ref([
|
||||
{
|
||||
group: 'Manage',
|
||||
@ -88,9 +92,14 @@ let dropdownOptions = ref([
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Logout',
|
||||
group: 'Others',
|
||||
hideLabel: true,
|
||||
items: [
|
||||
{
|
||||
icon: 'settings',
|
||||
label: computed(() => __('Settings')),
|
||||
onClick: () => (showSettingsModal.value = true),
|
||||
},
|
||||
{
|
||||
icon: 'log-out',
|
||||
label: computed(() => __('Log out')),
|
||||
|
||||
277
frontend/src/components/frappe-ui/Popover.vue
Normal file
277
frontend/src/components/frappe-ui/Popover.vue
Normal file
@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div ref="reference">
|
||||
<div
|
||||
ref="target"
|
||||
:class="['flex', $attrs.class]"
|
||||
@click="updatePosition"
|
||||
@focusin="updatePosition"
|
||||
@keydown="updatePosition"
|
||||
@mouseover="onMouseover"
|
||||
@mouseleave="onMouseleave"
|
||||
>
|
||||
<slot
|
||||
name="target"
|
||||
v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
|
||||
/>
|
||||
</div>
|
||||
<teleport to="#frappeui-popper-root">
|
||||
<div
|
||||
ref="popover"
|
||||
class="relative z-[100]"
|
||||
:class="[popoverContainerClass, popoverClass]"
|
||||
:style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
|
||||
@mouseover="pointerOverTargetOrPopup = true"
|
||||
@mouseleave="onMouseleave"
|
||||
>
|
||||
<transition v-bind="popupTransition">
|
||||
<div v-show="isOpen">
|
||||
<slot
|
||||
name="body"
|
||||
v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
|
||||
>
|
||||
<div class="rounded-lg border border-gray-100 bg-white shadow-xl">
|
||||
<slot
|
||||
name="body-main"
|
||||
v-bind="{
|
||||
togglePopover,
|
||||
updatePosition,
|
||||
open,
|
||||
close,
|
||||
isOpen,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createPopper } from '@popperjs/core'
|
||||
|
||||
export default {
|
||||
name: 'Popover',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
show: {
|
||||
default: undefined,
|
||||
},
|
||||
trigger: {
|
||||
type: String,
|
||||
default: 'click', // click, hover
|
||||
},
|
||||
hoverDelay: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
leaveDelay: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom-start',
|
||||
},
|
||||
popoverClass: [String, Object, Array],
|
||||
transition: {
|
||||
default: null,
|
||||
},
|
||||
hideOnBlur: {
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
emits: ['open', 'close', 'update:show'],
|
||||
expose: ['open', 'close'],
|
||||
data() {
|
||||
return {
|
||||
popoverContainerClass: 'body-container',
|
||||
showPopup: false,
|
||||
targetWidth: null,
|
||||
pointerOverTargetOrPopup: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(val) {
|
||||
if (val) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (typeof window === 'undefined') return
|
||||
if (!document.getElementById('frappeui-popper-root')) {
|
||||
const root = document.createElement('div')
|
||||
root.id = 'frappeui-popper-root'
|
||||
document.body.appendChild(root)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.listener = (e) => {
|
||||
const clickedElement = e.target
|
||||
const reference = this.$refs.reference
|
||||
const popoverBody = this.$refs.popover
|
||||
const insideClick =
|
||||
clickedElement === reference ||
|
||||
clickedElement === popoverBody ||
|
||||
reference?.contains(clickedElement) ||
|
||||
popoverBody?.contains(clickedElement)
|
||||
if (insideClick) {
|
||||
return
|
||||
}
|
||||
|
||||
const root = document.getElementById('frappeui-popper-root')
|
||||
const insidePopoverRoot = root.contains(clickedElement)
|
||||
if (!insidePopoverRoot) {
|
||||
return this.close()
|
||||
}
|
||||
|
||||
const bodyClass = `.${this.popoverContainerClass}`
|
||||
const clickedElementBody = clickedElement?.closest(bodyClass)
|
||||
const currentPopoverBody = reference?.closest(bodyClass)
|
||||
const isSiblingClicked =
|
||||
clickedElementBody &&
|
||||
currentPopoverBody &&
|
||||
clickedElementBody === currentPopoverBody
|
||||
|
||||
if (isSiblingClicked) {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
if (this.hideOnBlur) {
|
||||
document.addEventListener('click', this.listener)
|
||||
document.addEventListener('mousedown', this.listener)
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.targetWidth = this.$refs['target'].clientWidth
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.popper && this.popper.destroy()
|
||||
document.removeEventListener('click', this.listener)
|
||||
document.removeEventListener('mousedown', this.listener)
|
||||
},
|
||||
computed: {
|
||||
showPropPassed() {
|
||||
return this.show != null
|
||||
},
|
||||
isOpen: {
|
||||
get() {
|
||||
if (this.showPropPassed) {
|
||||
return this.show
|
||||
}
|
||||
return this.showPopup
|
||||
},
|
||||
set(val) {
|
||||
val = Boolean(val)
|
||||
if (this.showPropPassed) {
|
||||
this.$emit('update:show', val)
|
||||
} else {
|
||||
this.showPopup = val
|
||||
}
|
||||
if (val === false) {
|
||||
this.$emit('close')
|
||||
} else if (val === true) {
|
||||
this.$emit('open')
|
||||
}
|
||||
},
|
||||
},
|
||||
popupTransition() {
|
||||
let templates = {
|
||||
default: {
|
||||
enterActiveClass: 'transition duration-150 ease-out',
|
||||
enterFromClass: 'translate-y-1 opacity-0',
|
||||
enterToClass: 'translate-y-0 opacity-100',
|
||||
leaveActiveClass: 'transition duration-150 ease-in',
|
||||
leaveFromClass: 'translate-y-0 opacity-100',
|
||||
leaveToClass: 'translate-y-1 opacity-0',
|
||||
},
|
||||
}
|
||||
if (typeof this.transition === 'string') {
|
||||
return templates[this.transition]
|
||||
}
|
||||
return this.transition
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setupPopper() {
|
||||
if (!this.popper) {
|
||||
this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
|
||||
placement: this.placement,
|
||||
})
|
||||
} else {
|
||||
this.updatePosition()
|
||||
}
|
||||
},
|
||||
updatePosition() {
|
||||
this.popper && this.popper.update()
|
||||
},
|
||||
togglePopover(flag) {
|
||||
if (flag instanceof Event) {
|
||||
flag = null
|
||||
}
|
||||
if (flag == null) {
|
||||
flag = !this.isOpen
|
||||
}
|
||||
flag = Boolean(flag)
|
||||
if (flag) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
open() {
|
||||
this.isOpen = true
|
||||
this.$nextTick(() => this.setupPopper())
|
||||
},
|
||||
close() {
|
||||
this.isOpen = false
|
||||
},
|
||||
onMouseover() {
|
||||
this.pointerOverTargetOrPopup = true
|
||||
if (this.leaveTimer) {
|
||||
clearTimeout(this.leaveTimer)
|
||||
this.leaveTimer = null
|
||||
}
|
||||
if (this.trigger === 'hover') {
|
||||
if (this.hoverDelay) {
|
||||
this.hoverTimer = setTimeout(() => {
|
||||
if (this.pointerOverTargetOrPopup) {
|
||||
this.open()
|
||||
}
|
||||
}, Number(this.hoverDelay) * 1000)
|
||||
} else {
|
||||
this.open()
|
||||
}
|
||||
}
|
||||
},
|
||||
onMouseleave(e) {
|
||||
this.pointerOverTargetOrPopup = false
|
||||
if (this.hoverTimer) {
|
||||
clearTimeout(this.hoverTimer)
|
||||
this.hoverTimer = null
|
||||
}
|
||||
if (this.trigger === 'hover') {
|
||||
if (this.leaveTimer) {
|
||||
clearTimeout(this.leaveTimer)
|
||||
}
|
||||
if (this.leaveDelay) {
|
||||
this.leaveTimer = setTimeout(() => {
|
||||
if (!this.pointerOverTargetOrPopup) {
|
||||
this.close()
|
||||
}
|
||||
}, Number(this.leaveDelay) * 1000)
|
||||
} else {
|
||||
if (!this.pointerOverTargetOrPopup) {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -2,6 +2,7 @@ import { createResource } from 'frappe-ui'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
export const whatsappEnabled = ref(false)
|
||||
export const isWhatsappInstalled = ref(false)
|
||||
createResource({
|
||||
url: 'crm.api.whatsapp.is_whatsapp_enabled',
|
||||
cache: 'Is Whatsapp Enabled',
|
||||
@ -10,6 +11,15 @@ createResource({
|
||||
whatsappEnabled.value = Boolean(data)
|
||||
},
|
||||
})
|
||||
createResource({
|
||||
url: 'crm.api.whatsapp.is_whatsapp_installed',
|
||||
cache: 'Is Whatsapp Installed',
|
||||
auto: true,
|
||||
onSuccess: (data) => {
|
||||
isWhatsappInstalled.value = Boolean(data)
|
||||
},
|
||||
})
|
||||
|
||||
export const callEnabled = ref(false)
|
||||
createResource({
|
||||
url: 'crm.integrations.twilio.api.is_enabled',
|
||||
|
||||
@ -40,6 +40,8 @@ export const usersStore = defineStore('crm-users', () => {
|
||||
name: email,
|
||||
email: email,
|
||||
full_name: email.split('@')[0],
|
||||
first_name: email.split('@')[0],
|
||||
last_name: '',
|
||||
user_image: null,
|
||||
role: null,
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user