fix: added translation in all modals

This commit is contained in:
Shariq Ansari 2024-04-15 17:51:32 +05:30
parent ad51be1445
commit d53271d002
10 changed files with 103 additions and 91 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block" :class="labelClasses" v-if="attrs.label"> <label class="block" :class="labelClasses" v-if="attrs.label">
{{ attrs.label }} {{ __(attrs.label) }}
</label> </label>
<Autocomplete <Autocomplete
ref="autocomplete" ref="autocomplete"
@ -33,7 +33,7 @@
<Button <Button
variant="ghost" variant="ghost"
class="w-full !justify-start" class="w-full !justify-start"
label="Create New" :label="__('Create New')"
@click="attrs.onCreate(value, close)" @click="attrs.onCreate(value, close)"
> >
<template #prefix> <template #prefix>
@ -45,7 +45,7 @@
<Button <Button
variant="ghost" variant="ghost"
class="w-full !justify-start" class="w-full !justify-start"
label="Clear" :label="__('Clear')"
@click="() => clearValue(close)" @click="() => clearValue(close)"
> >
<template #prefix> <template #prefix>

View File

@ -2,11 +2,11 @@
<Dialog <Dialog
v-model="show" v-model="show"
:options="{ :options="{
title: 'Assign To', title: __('Assign To'),
size: 'xl', size: 'xl',
actions: [ actions: [
{ {
label: 'Cancel', label: __('Cancel'),
variant: 'subtle', variant: 'subtle',
onClick: () => { onClick: () => {
assignees = oldAssignees assignees = oldAssignees
@ -14,7 +14,7 @@
}, },
}, },
{ {
label: 'Update', label: __('Update'),
variant: 'solid', variant: 'solid',
onClick: () => updateAssignees(), onClick: () => updateAssignees(),
}, },
@ -65,7 +65,7 @@
</Button> </Button>
</Tooltip> </Tooltip>
</div> </div>
<ErrorMessage class="mt-2" v-if="error" :message="error" /> <ErrorMessage class="mt-2" v-if="error" :message="__(error)" />
</template> </template>
</Dialog> </Dialog>
</template> </template>

View File

@ -5,7 +5,7 @@
<div class="mb-5 flex items-center justify-between"> <div class="mb-5 flex items-center justify-between">
<div> <div>
<h3 class="text-2xl font-semibold leading-6 text-gray-900"> <h3 class="text-2xl font-semibold leading-6 text-gray-900">
{{ dialogOptions.title || 'Untitled' }} {{ __(dialogOptions.title) || __('Untitled') }}
</h3> </h3>
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
@ -64,14 +64,14 @@
v-if="field.type === 'link'" v-if="field.type === 'link'"
variant="outline" variant="outline"
size="md" size="md"
:label="field.label" :label="__(field.label)"
v-model="_contact[field.name]" v-model="_contact[field.name]"
:doctype="field.doctype" :doctype="field.doctype"
:placeholder="field.placeholder" :placeholder="field.placeholder"
/> />
<div class="space-y-1.5" v-if="field.type === 'dropdown'"> <div class="space-y-1.5" v-if="field.type === 'dropdown'">
<label class="block text-base text-gray-600"> <label class="block text-base text-gray-600">
{{ field.label }} {{ __(field.label) }}
</label> </label>
<NestedPopover> <NestedPopover>
<template #target="{ open }"> <template #target="{ open }">
@ -101,7 +101,7 @@
/> />
<div v-else> <div v-else>
<div class="p-1.5 px-7 text-base text-gray-500"> <div class="p-1.5 px-7 text-base text-gray-500">
No {{ field.label }} Available {{ __('No {0} Available', [field.label]) }}
</div> </div>
</div> </div>
</div> </div>
@ -109,7 +109,7 @@
<Button <Button
variant="ghost" variant="ghost"
class="w-full !justify-start" class="w-full !justify-start"
label="Create New" :label="__('Create New')"
@click="field.create()" @click="field.create()"
> >
<template #prefix> <template #prefix>
@ -126,7 +126,7 @@
variant="outline" variant="outline"
size="md" size="md"
type="text" type="text"
:label="field.label" :label="__(field.label)"
:placeholder="field.placeholder" :placeholder="field.placeholder"
v-model="_contact[field.name]" v-model="_contact[field.name]"
/> />
@ -143,7 +143,7 @@
:key="action.label" :key="action.label"
v-bind="action" v-bind="action"
> >
{{ action.label }} {{ __(action.label) }}
</Button> </Button>
</div> </div>
</div> </div>

View File

@ -1,23 +1,23 @@
<template> <template>
<Dialog v-model="show" :options="{ title: 'Bulk Edit' }"> <Dialog v-model="show" :options="{ title: __('Bulk Edit') }">
<template #body-content> <template #body-content>
<div class="mb-4"> <div class="mb-4">
<div class="mb-1.5 text-sm text-gray-600">Field</div> <div class="mb-1.5 text-sm text-gray-600">{{ __('Field') }}</div>
<Autocomplete <Autocomplete
:value="field.label" :value="field.label"
:options="fields.data" :options="fields.data"
@change="(e) => changeField(e)" @change="(e) => changeField(e)"
placeholder="Select Field..." :placeholder="__('Source')"
/> />
</div> </div>
<div> <div>
<div class="mb-1.5 text-sm text-gray-600">Value</div> <div class="mb-1.5 text-sm text-gray-600">{{ __('Value') }}</div>
<component <component
:is="getValueComponent(field)" :is="getValueComponent(field)"
:value="newValue" :value="newValue"
size="md" size="md"
@change="(v) => updateValue(v)" @change="(v) => updateValue(v)"
placeholder="Value" :placeholder="__('Contact Us')"
/> />
</div> </div>
</template> </template>
@ -27,7 +27,7 @@
variant="solid" variant="solid"
@click="updateValues" @click="updateValues"
:loading="loading" :loading="loading"
:label="`Update ${recordCount} Records`" :label="__('Update {0} Records', [recordCount])"
/> />
</template> </template>
</Dialog> </Dialog>

View File

@ -2,11 +2,11 @@
<Dialog <Dialog
v-model="show" v-model="show"
:options="{ :options="{
title: editMode ? emailTemplate.name : 'Create Email Template', title: editMode ? __(emailTemplate.name) : __('Create Email Template'),
size: 'xl', size: 'xl',
actions: [ actions: [
{ {
label: editMode ? 'Update' : 'Create', label: editMode ? __('Update') : __('Create'),
variant: 'solid', variant: 'solid',
onClick: () => (editMode ? updateEmailTemplate() : callInsertDoc()), onClick: () => (editMode ? updateEmailTemplate() : callInsertDoc()),
}, },
@ -18,41 +18,41 @@
<div class="flex gap-4"> <div class="flex gap-4">
<div class="flex-1"> <div class="flex-1">
<div class="mb-1.5 text-sm text-gray-600"> <div class="mb-1.5 text-sm text-gray-600">
Name {{ __('Name') }}
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</div> </div>
<TextInput <TextInput
ref="nameRef" ref="nameRef"
variant="outline" variant="outline"
v-model="_emailTemplate.name" v-model="_emailTemplate.name"
placeholder="Add name" :placeholder="__('Payment Reminder')"
/> />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="mb-1.5 text-sm text-gray-600">Doctype</div> <div class="mb-1.5 text-sm text-gray-600">{{ __('Doctype') }}</div>
<Select <Select
variant="outline" variant="outline"
v-model="_emailTemplate.reference_doctype" v-model="_emailTemplate.reference_doctype"
:options="['CRM Deal', 'CRM Lead']" :options="['CRM Deal', 'CRM Lead']"
placeholder="Select Doctype" :placeholder="__('CRM Deal')"
/> />
</div> </div>
</div> </div>
<div> <div>
<div class="mb-1.5 text-sm text-gray-600"> <div class="mb-1.5 text-sm text-gray-600">
Subject {{ __('Subject') }}
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</div> </div>
<TextInput <TextInput
ref="subjectRef" ref="subjectRef"
variant="outline" variant="outline"
v-model="_emailTemplate.subject" v-model="_emailTemplate.subject"
placeholder="Add subject" :placeholder="__('Payment Reminder from Frappé - (#{{ name }})')"
/> />
</div> </div>
<div> <div>
<div class="mb-1.5 text-sm text-gray-600"> <div class="mb-1.5 text-sm text-gray-600">
Content {{ __('Content') }}
<span class="text-red-500">*</span> <span class="text-red-500">*</span>
</div> </div>
<TextEditor <TextEditor
@ -62,13 +62,13 @@
:bubbleMenu="true" :bubbleMenu="true"
:content="_emailTemplate.response" :content="_emailTemplate.response"
@change="(val) => (_emailTemplate.response = val)" @change="(val) => (_emailTemplate.response = val)"
placeholder="Type a Content" :placeholder="__('Dear {{ lead_name }}, \n\nThis is a reminder for the payment of {{ grand_total }}. \n\nThanks, \nFrappé')"
/> />
</div> </div>
<div> <div>
<Checkbox v-model="_emailTemplate.enabled" label="Enabled" /> <Checkbox v-model="_emailTemplate.enabled" :label="__('Enabled')" />
</div> </div>
<ErrorMessage :message="errorMessage" /> <ErrorMessage :message="__(errorMessage)" />
</div> </div>
</template> </template>
</Dialog> </Dialog>

View File

@ -1,16 +1,22 @@
<template> <template>
<Dialog v-model="show" :options="{ title: 'Email Templates', size: '4xl' }"> <Dialog
v-model="show"
:options="{ title: __('Email Templates'), size: '4xl' }"
>
<template #body-content> <template #body-content>
<TextInput <TextInput
ref="searchInput" ref="searchInput"
v-model="search" v-model="search"
type="text" type="text"
class="mb-2 w-full" :placeholder="__('Payment Reminder')"
placeholder="Search" >
/> <template #prefix>
<FeatherIcon name="search" class="h-4 w-4 text-gray-500" />
</template>
</TextInput>
<div <div
v-if="filteredTemplates.length" v-if="filteredTemplates.length"
class="grid max-h-[560px] grid-cols-3 gap-2 overflow-y-auto" class="mt-2 grid max-h-[560px] grid-cols-3 gap-2 overflow-y-auto"
> >
<div <div
v-for="template in filteredTemplates" v-for="template in filteredTemplates"
@ -22,7 +28,7 @@
{{ template.name }} {{ template.name }}
</div> </div>
<div v-if="template.subject" class="text-sm text-gray-600"> <div v-if="template.subject" class="text-sm text-gray-600">
Subject: {{ template.subject }} {{ __('Subject: {0}', [template.subject]) }}
</div> </div>
<TextEditor <TextEditor
v-if="template.response" v-if="template.response"
@ -33,11 +39,13 @@
/> />
</div> </div>
</div> </div>
<div v-else> <div v-else class="mt-2">
<div class="flex h-56 flex-col items-center justify-center"> <div class="flex h-56 flex-col items-center justify-center">
<div class="text-lg text-gray-500">No templates found</div> <div class="text-lg text-gray-500">
{{ __('No templates found') }}
</div>
<Button <Button
label="Create New" :label="__('Create New')"
class="mt-4" class="mt-4"
@click=" @click="
() => { () => {

View File

@ -5,7 +5,7 @@
size: 'xl', size: 'xl',
actions: [ actions: [
{ {
label: editMode ? 'Update' : 'Create', label: editMode ? __('Update') : __('Create'),
variant: 'solid', variant: 'solid',
onClick: () => updateNote(), onClick: () => updateNote(),
}, },
@ -15,14 +15,16 @@
<template #body-title> <template #body-title>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<h3 class="text-2xl font-semibold leading-6 text-gray-900"> <h3 class="text-2xl font-semibold leading-6 text-gray-900">
{{ editMode ? 'Edit Note' : 'Create Note' }} {{ editMode ? __('Edit Note') : __('Create Note') }}
</h3> </h3>
<Button <Button
v-if="_note?.reference_docname" v-if="_note?.reference_docname"
variant="outline" variant="outline"
size="sm" size="sm"
:label=" :label="
_note.reference_doctype == 'CRM Deal' ? 'Open Deal' : 'Open Lead' _note.reference_doctype == 'CRM Deal'
? __('Open Deal')
: __('Open Lead')
" "
@click="redirect()" @click="redirect()"
> >
@ -35,16 +37,16 @@
<template #body-content> <template #body-content>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div> <div>
<div class="mb-1.5 text-sm text-gray-600">Title</div> <div class="mb-1.5 text-sm text-gray-600">{{ __('Title') }}</div>
<TextInput <TextInput
ref="title" ref="title"
variant="outline" variant="outline"
v-model="_note.title" v-model="_note.title"
placeholder="Add title" :placeholder="__('Call with John Doe')"
/> />
</div> </div>
<div> <div>
<div class="mb-1.5 text-sm text-gray-600">Content</div> <div class="mb-1.5 text-sm text-gray-600">{{ __('Content') }}</div>
<TextEditor <TextEditor
variant="outline" variant="outline"
ref="content" ref="content"
@ -52,7 +54,9 @@
:bubbleMenu="true" :bubbleMenu="true"
:content="_note.content" :content="_note.content"
@change="(val) => (_note.content = val)" @change="(val) => (_note.content = val)"
placeholder="Type a Content" :placeholder="
__('Took a call with John Doe and discussed the new project.')
"
/> />
</div> </div>
</div> </div>
@ -64,7 +68,7 @@
import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue' import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
import { TextEditor, call } from 'frappe-ui' import { TextEditor, call } from 'frappe-ui'
import { ref, nextTick, watch } from 'vue' import { ref, nextTick, watch } from 'vue'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router'
const props = defineProps({ const props = defineProps({
note: { note: {

View File

@ -5,7 +5,7 @@
<div class="mb-5 flex items-center justify-between"> <div class="mb-5 flex items-center justify-between">
<div> <div>
<h3 class="text-2xl font-semibold leading-6 text-gray-900"> <h3 class="text-2xl font-semibold leading-6 text-gray-900">
{{ dialogOptions.title || 'Untitled' }} {{ __(dialogOptions.title) || __('Untitled') }}
</h3> </h3>
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
@ -41,67 +41,68 @@
type="text" type="text"
ref="title" ref="title"
size="md" size="md"
label="Organization Name" :label="__('Organization Name')"
variant="outline" variant="outline"
v-model="_organization.organization_name" v-model="_organization.organization_name"
placeholder="Add Organization Name" placeholder="Frappé Technologies"
/> />
<div class="flex gap-4"> <div class="flex gap-4">
<FormControl <FormControl
class="flex-1" class="flex-1"
type="text" type="text"
size="md" size="md"
label="Website" :label="__('Website')"
variant="outline" variant="outline"
v-model="_organization.website" v-model="_organization.website"
placeholder="Add Website" placeholder="https://example.com"
/> />
<FormControl <FormControl
class="flex-1" class="flex-1"
type="text" type="text"
size="md" size="md"
label="Annual Revenue" :label="__('Annual Revenue')"
variant="outline" variant="outline"
v-model="_organization.annual_revenue" v-model="_organization.annual_revenue"
placeholder="Add Annual Revenue" :placeholder="__('9,999,999')"
/> />
</div> </div>
<Link <Link
class="flex-1" class="flex-1"
size="md" size="md"
label="Territory" :label="__('Territory')"
variant="outline" variant="outline"
v-model="_organization.territory" v-model="_organization.territory"
doctype="CRM Territory" doctype="CRM Territory"
placeholder="Add Territory" placeholder="India"
/> />
<div class="flex gap-4"> <div class="flex gap-4">
<FormControl <FormControl
class="flex-1" class="flex-1"
type="select" type="select"
:options="[ :options="[
'1-10', { label: __('1-10'), value: '1-10' },
'11-50', { label: __('11-50'), value: '11-50' },
'51-200', { label: __('51-200'), value: '51-200' },
'201-500', { label: __('201-500'), value: '201-500' },
'501-1000', { label: __('501-1000'), value: '501-1000' },
'1001-5000', { label: __('1001-5000'), value: '1001-5000' },
'5001-10000', { label: __('5001-10000'), value: '5001-10000' },
'10001+', { label: __('10001+'), value: '10001+' },
]" ]"
size="md" size="md"
label="No. of Employees" :label="__('No of Employees')"
variant="outline" variant="outline"
:placeholder="__('1-10')"
v-model="_organization.no_of_employees" v-model="_organization.no_of_employees"
/> />
<Link <Link
class="flex-1" class="flex-1"
size="md" size="md"
label="Industry" :label="__('Industry')"
variant="outline" variant="outline"
v-model="_organization.industry" v-model="_organization.industry"
doctype="CRM Industry" doctype="CRM Industry"
placeholder="Add Industry" :placeholder="__('Technology')"
/> />
</div> </div>
</div> </div>
@ -115,7 +116,7 @@
v-for="action in dialogOptions.actions" v-for="action in dialogOptions.actions"
:key="action.label" :key="action.label"
v-bind="action" v-bind="action"
:label="action.label" :label="__(action.label)"
:loading="loading" :loading="loading"
/> />
</div> </div>
@ -236,14 +237,14 @@ function handleOrganizationUpdate(doc, renamed = false) {
const dialogOptions = computed(() => { const dialogOptions = computed(() => {
let title = !editMode.value let title = !editMode.value
? 'New Organization' ? __('New Organization')
: _organization.value.organization_name : __(_organization.value.organization_name)
let size = detailMode.value ? '' : 'xl' let size = detailMode.value ? '' : 'xl'
let actions = detailMode.value let actions = detailMode.value
? [] ? []
: [ : [
{ {
label: editMode.value ? 'Save' : 'Create', label: editMode.value ? __('Save') : __('Create'),
variant: 'solid', variant: 'solid',
onClick: () => onClick: () =>
editMode.value ? updateOrganization() : callInsertDoc(), editMode.value ? updateOrganization() : callInsertDoc(),

View File

@ -5,7 +5,7 @@
size: 'xl', size: 'xl',
actions: [ actions: [
{ {
label: editMode ? 'Update' : 'Create', label: editMode ? __('Update') : __('Create'),
variant: 'solid', variant: 'solid',
onClick: () => updateTask(), onClick: () => updateTask(),
}, },
@ -15,14 +15,14 @@
<template #body-title> <template #body-title>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<h3 class="text-2xl font-semibold leading-6 text-gray-900"> <h3 class="text-2xl font-semibold leading-6 text-gray-900">
{{ editMode ? 'Edit Task' : 'Create Task' }} {{ editMode ? __('Edit Task') : __('Create Task') }}
</h3> </h3>
<Button <Button
v-if="task?.reference_docname" v-if="task?.reference_docname"
variant="outline" variant="outline"
size="sm" size="sm"
:label=" :label="
task.reference_doctype == 'CRM Deal' ? 'Open Deal' : 'Open Lead' task.reference_doctype == 'CRM Deal' ? __('Open Deal') : __('Open Lead')
" "
@click="redirect()" @click="redirect()"
> >
@ -35,16 +35,16 @@
<template #body-content> <template #body-content>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div> <div>
<div class="mb-1.5 text-sm text-gray-600">Title</div> <div class="mb-1.5 text-sm text-gray-600">{{ __('Title') }}</div>
<TextInput <TextInput
ref="title" ref="title"
variant="outline" variant="outline"
v-model="_task.title" v-model="_task.title"
placeholder="Add Title" :placeholder="__('Call with John Doe')"
/> />
</div> </div>
<div> <div>
<div class="mb-1.5 text-sm text-gray-600">Description</div> <div class="mb-1.5 text-sm text-gray-600">{{ __('Description') }}</div>
<TextEditor <TextEditor
variant="outline" variant="outline"
ref="description" ref="description"
@ -52,7 +52,7 @@
:bubbleMenu="true" :bubbleMenu="true"
:content="_task.description" :content="_task.description"
@change="(val) => (_task.description = val)" @change="(val) => (_task.description = val)"
placeholder="Type a Description" :placeholder="__('Took a call with John Doe and discussed the new project.')"
/> />
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@ -68,7 +68,7 @@
:value="getUser(_task.assigned_to).full_name" :value="getUser(_task.assigned_to).full_name"
doctype="User" doctype="User"
@change="(option) => (_task.assigned_to = option)" @change="(option) => (_task.assigned_to = option)"
placeholder="Assignee" :placeholder="__('John Doe')"
:hideMe="true" :hideMe="true"
> >
<template #prefix> <template #prefix>
@ -90,7 +90,7 @@
icon-left="calendar" icon-left="calendar"
:value="_task.due_date" :value="_task.due_date"
@change="(val) => (_task.due_date = val)" @change="(val) => (_task.due_date = val)"
placeholder="Due Date" :placeholder="__('01/04/2024 11:30 PM')"
input-class="border-none" input-class="border-none"
/> />
<Dropdown :options="taskPriorityOptions(updateTaskPriority)"> <Dropdown :options="taskPriorityOptions(updateTaskPriority)">

View File

@ -3,17 +3,17 @@
v-model="show" v-model="show"
:options="{ :options="{
title: editMode title: editMode
? 'Edit View' ? __('Edit View')
: duplicateMode : duplicateMode
? 'Duplicate View' ? __('Duplicate View')
: 'Create View', : __('Create View'),
actions: [ actions: [
{ {
label: editMode label: editMode
? 'Save Changes' ? __('Save Changes')
: duplicateMode : duplicateMode
? 'Duplicate' ? __('Duplicate')
: 'Create', : __('Create'),
variant: 'solid', variant: 'solid',
onClick: () => (editMode ? update() : create()), onClick: () => (editMode ? update() : create()),
}, },
@ -25,8 +25,8 @@
variant="outline" variant="outline"
size="md" size="md"
type="text" type="text"
label="View Name" :label="__('View Name')"
placeholder="View Name" :placeholder="__('My Open Deals')"
v-model="view.label" v-model="view.label"
/> />
</template> </template>
@ -51,7 +51,6 @@ const props = defineProps({
}, },
}) })
const show = defineModel() const show = defineModel()
const view = defineModel('view') const view = defineModel('view')