From d53271d002b9596f4bdc2747168434ed2713f502 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 15 Apr 2024 17:51:32 +0530
Subject: [PATCH] fix: added translation in all modals

---
 frontend/src/components/Controls/Link.vue     |  6 +--
 .../src/components/Modals/AssignmentModal.vue |  8 +--
 .../src/components/Modals/ContactModal.vue    | 14 +++---
 .../src/components/Modals/EditValueModal.vue  | 12 ++---
 .../components/Modals/EmailTemplateModal.vue  | 24 ++++-----
 .../Modals/EmailTemplateSelectorModal.vue     | 26 ++++++----
 frontend/src/components/Modals/NoteModal.vue  | 20 +++++---
 .../components/Modals/OrganizationModal.vue   | 49 ++++++++++---------
 frontend/src/components/Modals/TaskModal.vue  | 18 +++----
 frontend/src/components/Modals/ViewModal.vue  | 17 +++----
 10 files changed, 103 insertions(+), 91 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index cad13609..30b0b282 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-1.5">
     <label class="block" :class="labelClasses" v-if="attrs.label">
-      {{ attrs.label }}
+      {{ __(attrs.label) }}
     </label>
     <Autocomplete
       ref="autocomplete"
@@ -33,7 +33,7 @@
           <Button
             variant="ghost"
             class="w-full !justify-start"
-            label="Create New"
+            :label="__('Create New')"
             @click="attrs.onCreate(value, close)"
           >
             <template #prefix>
@@ -45,7 +45,7 @@
           <Button
             variant="ghost"
             class="w-full !justify-start"
-            label="Clear"
+            :label="__('Clear')"
             @click="() => clearValue(close)"
           >
             <template #prefix>
diff --git a/frontend/src/components/Modals/AssignmentModal.vue b/frontend/src/components/Modals/AssignmentModal.vue
index 2bafdbcd..d9c3b9fa 100644
--- a/frontend/src/components/Modals/AssignmentModal.vue
+++ b/frontend/src/components/Modals/AssignmentModal.vue
@@ -2,11 +2,11 @@
   <Dialog
     v-model="show"
     :options="{
-      title: 'Assign To',
+      title: __('Assign To'),
       size: 'xl',
       actions: [
         {
-          label: 'Cancel',
+          label: __('Cancel'),
           variant: 'subtle',
           onClick: () => {
             assignees = oldAssignees
@@ -14,7 +14,7 @@
           },
         },
         {
-          label: 'Update',
+          label: __('Update'),
           variant: 'solid',
           onClick: () => updateAssignees(),
         },
@@ -65,7 +65,7 @@
           </Button>
         </Tooltip>
       </div>
-      <ErrorMessage class="mt-2" v-if="error" :message="error" />
+      <ErrorMessage class="mt-2" v-if="error" :message="__(error)" />
     </template>
   </Dialog>
 </template>
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index 2024eb94..4682ef58 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -5,7 +5,7 @@
         <div class="mb-5 flex items-center justify-between">
           <div>
             <h3 class="text-2xl font-semibold leading-6 text-gray-900">
-              {{ dialogOptions.title || 'Untitled' }}
+              {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
           </div>
           <div class="flex items-center gap-1">
@@ -64,14 +64,14 @@
                   v-if="field.type === 'link'"
                   variant="outline"
                   size="md"
-                  :label="field.label"
+                  :label="__(field.label)"
                   v-model="_contact[field.name]"
                   :doctype="field.doctype"
                   :placeholder="field.placeholder"
                 />
                 <div class="space-y-1.5" v-if="field.type === 'dropdown'">
                   <label class="block text-base text-gray-600">
-                    {{ field.label }}
+                    {{ __(field.label) }}
                   </label>
                   <NestedPopover>
                     <template #target="{ open }">
@@ -101,7 +101,7 @@
                           />
                           <div v-else>
                             <div class="p-1.5 px-7 text-base text-gray-500">
-                              No {{ field.label }} Available
+                              {{ __('No {0} Available', [field.label]) }}
                             </div>
                           </div>
                         </div>
@@ -109,7 +109,7 @@
                           <Button
                             variant="ghost"
                             class="w-full !justify-start"
-                            label="Create New"
+                            :label="__('Create New')"
                             @click="field.create()"
                           >
                             <template #prefix>
@@ -126,7 +126,7 @@
                   variant="outline"
                   size="md"
                   type="text"
-                  :label="field.label"
+                  :label="__(field.label)"
                   :placeholder="field.placeholder"
                   v-model="_contact[field.name]"
                 />
@@ -143,7 +143,7 @@
             :key="action.label"
             v-bind="action"
           >
-            {{ action.label }}
+            {{ __(action.label) }}
           </Button>
         </div>
       </div>
diff --git a/frontend/src/components/Modals/EditValueModal.vue b/frontend/src/components/Modals/EditValueModal.vue
index 560f598f..3d918d96 100644
--- a/frontend/src/components/Modals/EditValueModal.vue
+++ b/frontend/src/components/Modals/EditValueModal.vue
@@ -1,23 +1,23 @@
 <template>
-  <Dialog v-model="show" :options="{ title: 'Bulk Edit' }">
+  <Dialog v-model="show" :options="{ title: __('Bulk Edit') }">
     <template #body-content>
       <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
           :value="field.label"
           :options="fields.data"
           @change="(e) => changeField(e)"
-          placeholder="Select Field..."
+          :placeholder="__('Source')"
         />
       </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
           :is="getValueComponent(field)"
           :value="newValue"
           size="md"
           @change="(v) => updateValue(v)"
-          placeholder="Value"
+          :placeholder="__('Contact Us')"
         />
       </div>
     </template>
@@ -27,7 +27,7 @@
         variant="solid"
         @click="updateValues"
         :loading="loading"
-        :label="`Update ${recordCount} Records`"
+        :label="__('Update {0} Records', [recordCount])"
       />
     </template>
   </Dialog>
diff --git a/frontend/src/components/Modals/EmailTemplateModal.vue b/frontend/src/components/Modals/EmailTemplateModal.vue
index 2b13862b..2cee3742 100644
--- a/frontend/src/components/Modals/EmailTemplateModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateModal.vue
@@ -2,11 +2,11 @@
   <Dialog
     v-model="show"
     :options="{
-      title: editMode ? emailTemplate.name : 'Create Email Template',
+      title: editMode ? __(emailTemplate.name) : __('Create Email Template'),
       size: 'xl',
       actions: [
         {
-          label: editMode ? 'Update' : 'Create',
+          label: editMode ? __('Update') : __('Create'),
           variant: 'solid',
           onClick: () => (editMode ? updateEmailTemplate() : callInsertDoc()),
         },
@@ -18,41 +18,41 @@
         <div class="flex gap-4">
           <div class="flex-1">
             <div class="mb-1.5 text-sm text-gray-600">
-              Name
+              {{ __('Name') }}
               <span class="text-red-500">*</span>
             </div>
             <TextInput
               ref="nameRef"
               variant="outline"
               v-model="_emailTemplate.name"
-              placeholder="Add name"
+              :placeholder="__('Payment Reminder')"
             />
           </div>
           <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
               variant="outline"
               v-model="_emailTemplate.reference_doctype"
               :options="['CRM Deal', 'CRM Lead']"
-              placeholder="Select Doctype"
+              :placeholder="__('CRM Deal')"
             />
           </div>
         </div>
         <div>
           <div class="mb-1.5 text-sm text-gray-600">
-            Subject
+            {{ __('Subject') }}
             <span class="text-red-500">*</span>
           </div>
           <TextInput
             ref="subjectRef"
             variant="outline"
             v-model="_emailTemplate.subject"
-            placeholder="Add subject"
+            :placeholder="__('Payment Reminder from Frappé - (#{{ name }})')"
           />
         </div>
         <div>
           <div class="mb-1.5 text-sm text-gray-600">
-            Content
+            {{ __('Content') }}
             <span class="text-red-500">*</span>
           </div>
           <TextEditor
@@ -62,13 +62,13 @@
             :bubbleMenu="true"
             :content="_emailTemplate.response"
             @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>
-          <Checkbox v-model="_emailTemplate.enabled" label="Enabled" />
+          <Checkbox v-model="_emailTemplate.enabled" :label="__('Enabled')" />
         </div>
-        <ErrorMessage :message="errorMessage" />
+        <ErrorMessage :message="__(errorMessage)" />
       </div>
     </template>
   </Dialog>
diff --git a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
index eb40834d..77179dd3 100644
--- a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
@@ -1,16 +1,22 @@
 <template>
-  <Dialog v-model="show" :options="{ title: 'Email Templates', size: '4xl' }">
+  <Dialog
+    v-model="show"
+    :options="{ title: __('Email Templates'), size: '4xl' }"
+  >
     <template #body-content>
       <TextInput
         ref="searchInput"
         v-model="search"
         type="text"
-        class="mb-2 w-full"
-        placeholder="Search"
-      />
+        :placeholder="__('Payment Reminder')"
+      >
+        <template #prefix>
+          <FeatherIcon name="search" class="h-4 w-4 text-gray-500" />
+        </template>
+      </TextInput>
       <div
         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
           v-for="template in filteredTemplates"
@@ -22,7 +28,7 @@
             {{ template.name }}
           </div>
           <div v-if="template.subject" class="text-sm text-gray-600">
-            Subject: {{ template.subject }}
+            {{ __('Subject: {0}', [template.subject]) }}
           </div>
           <TextEditor
             v-if="template.response"
@@ -33,11 +39,13 @@
           />
         </div>
       </div>
-      <div v-else>
+      <div v-else class="mt-2">
         <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
-            label="Create New"
+            :label="__('Create New')"
             class="mt-4"
             @click="
               () => {
diff --git a/frontend/src/components/Modals/NoteModal.vue b/frontend/src/components/Modals/NoteModal.vue
index 05defd4c..8597b461 100644
--- a/frontend/src/components/Modals/NoteModal.vue
+++ b/frontend/src/components/Modals/NoteModal.vue
@@ -5,7 +5,7 @@
       size: 'xl',
       actions: [
         {
-          label: editMode ? 'Update' : 'Create',
+          label: editMode ? __('Update') : __('Create'),
           variant: 'solid',
           onClick: () => updateNote(),
         },
@@ -15,14 +15,16 @@
     <template #body-title>
       <div class="flex items-center gap-3">
         <h3 class="text-2xl font-semibold leading-6 text-gray-900">
-          {{ editMode ? 'Edit Note' : 'Create Note' }}
+          {{ editMode ? __('Edit Note') : __('Create Note') }}
         </h3>
         <Button
           v-if="_note?.reference_docname"
           variant="outline"
           size="sm"
           :label="
-            _note.reference_doctype == 'CRM Deal' ? 'Open Deal' : 'Open Lead'
+            _note.reference_doctype == 'CRM Deal'
+              ? __('Open Deal')
+              : __('Open Lead')
           "
           @click="redirect()"
         >
@@ -35,16 +37,16 @@
     <template #body-content>
       <div class="flex flex-col gap-4">
         <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
             ref="title"
             variant="outline"
             v-model="_note.title"
-            placeholder="Add title"
+            :placeholder="__('Call with John Doe')"
           />
         </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
             variant="outline"
             ref="content"
@@ -52,7 +54,9 @@
             :bubbleMenu="true"
             :content="_note.content"
             @change="(val) => (_note.content = val)"
-            placeholder="Type a Content"
+            :placeholder="
+              __('Took a call with John Doe and discussed the new project.')
+            "
           />
         </div>
       </div>
@@ -64,7 +68,7 @@
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import { TextEditor, call } from 'frappe-ui'
 import { ref, nextTick, watch } from 'vue'
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router'
 
 const props = defineProps({
   note: {
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index e3595636..59aad934 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -5,7 +5,7 @@
         <div class="mb-5 flex items-center justify-between">
           <div>
             <h3 class="text-2xl font-semibold leading-6 text-gray-900">
-              {{ dialogOptions.title || 'Untitled' }}
+              {{ __(dialogOptions.title) || __('Untitled') }}
             </h3>
           </div>
           <div class="flex items-center gap-1">
@@ -41,67 +41,68 @@
                 type="text"
                 ref="title"
                 size="md"
-                label="Organization Name"
+                :label="__('Organization Name')"
                 variant="outline"
                 v-model="_organization.organization_name"
-                placeholder="Add Organization Name"
+                placeholder="Frappé Technologies"
               />
               <div class="flex gap-4">
                 <FormControl
                   class="flex-1"
                   type="text"
                   size="md"
-                  label="Website"
+                  :label="__('Website')"
                   variant="outline"
                   v-model="_organization.website"
-                  placeholder="Add Website"
+                  placeholder="https://example.com"
                 />
                 <FormControl
                   class="flex-1"
                   type="text"
                   size="md"
-                  label="Annual Revenue"
+                  :label="__('Annual Revenue')"
                   variant="outline"
                   v-model="_organization.annual_revenue"
-                  placeholder="Add Annual Revenue"
+                  :placeholder="__('9,999,999')"
                 />
               </div>
               <Link
                 class="flex-1"
                 size="md"
-                label="Territory"
+                :label="__('Territory')"
                 variant="outline"
                 v-model="_organization.territory"
                 doctype="CRM Territory"
-                placeholder="Add Territory"
+                placeholder="India"
               />
               <div class="flex gap-4">
                 <FormControl
                   class="flex-1"
                   type="select"
                   :options="[
-                    '1-10',
-                    '11-50',
-                    '51-200',
-                    '201-500',
-                    '501-1000',
-                    '1001-5000',
-                    '5001-10000',
-                    '10001+',
+                    { label: __('1-10'), value: '1-10' },
+                    { label: __('11-50'), value: '11-50' },
+                    { label: __('51-200'), value: '51-200' },
+                    { label: __('201-500'), value: '201-500' },
+                    { label: __('501-1000'), value: '501-1000' },
+                    { label: __('1001-5000'), value: '1001-5000' },
+                    { label: __('5001-10000'), value: '5001-10000' },
+                    { label: __('10001+'), value: '10001+' },
                   ]"
                   size="md"
-                  label="No. of Employees"
+                  :label="__('No of Employees')"
                   variant="outline"
+                  :placeholder="__('1-10')"
                   v-model="_organization.no_of_employees"
                 />
                 <Link
                   class="flex-1"
                   size="md"
-                  label="Industry"
+                  :label="__('Industry')"
                   variant="outline"
                   v-model="_organization.industry"
                   doctype="CRM Industry"
-                  placeholder="Add Industry"
+                  :placeholder="__('Technology')"
                 />
               </div>
             </div>
@@ -115,7 +116,7 @@
             v-for="action in dialogOptions.actions"
             :key="action.label"
             v-bind="action"
-            :label="action.label"
+            :label="__(action.label)"
             :loading="loading"
           />
         </div>
@@ -236,14 +237,14 @@ function handleOrganizationUpdate(doc, renamed = false) {
 
 const dialogOptions = computed(() => {
   let title = !editMode.value
-    ? 'New Organization'
-    : _organization.value.organization_name
+    ? __('New Organization')
+    : __(_organization.value.organization_name)
   let size = detailMode.value ? '' : 'xl'
   let actions = detailMode.value
     ? []
     : [
         {
-          label: editMode.value ? 'Save' : 'Create',
+          label: editMode.value ? __('Save') : __('Create'),
           variant: 'solid',
           onClick: () =>
             editMode.value ? updateOrganization() : callInsertDoc(),
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index e99b4c1a..0e1f8446 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -5,7 +5,7 @@
       size: 'xl',
       actions: [
         {
-          label: editMode ? 'Update' : 'Create',
+          label: editMode ? __('Update') : __('Create'),
           variant: 'solid',
           onClick: () => updateTask(),
         },
@@ -15,14 +15,14 @@
     <template #body-title>
       <div class="flex items-center gap-3">
         <h3 class="text-2xl font-semibold leading-6 text-gray-900">
-          {{ editMode ? 'Edit Task' : 'Create Task' }}
+          {{ editMode ? __('Edit Task') : __('Create Task') }}
         </h3>
         <Button
           v-if="task?.reference_docname"
           variant="outline"
           size="sm"
           :label="
-            task.reference_doctype == 'CRM Deal' ? 'Open Deal' : 'Open Lead'
+            task.reference_doctype == 'CRM Deal' ? __('Open Deal') : __('Open Lead')
           "
           @click="redirect()"
         >
@@ -35,16 +35,16 @@
     <template #body-content>
       <div class="flex flex-col gap-4">
         <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
             ref="title"
             variant="outline"
             v-model="_task.title"
-            placeholder="Add Title"
+            :placeholder="__('Call with John Doe')"
           />
         </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
             variant="outline"
             ref="description"
@@ -52,7 +52,7 @@
             :bubbleMenu="true"
             :content="_task.description"
             @change="(val) => (_task.description = val)"
-            placeholder="Type a Description"
+            :placeholder="__('Took a call with John Doe and discussed the new project.')"
           />
         </div>
         <div class="flex items-center gap-2">
@@ -68,7 +68,7 @@
             :value="getUser(_task.assigned_to).full_name"
             doctype="User"
             @change="(option) => (_task.assigned_to = option)"
-            placeholder="Assignee"
+            :placeholder="__('John Doe')"
             :hideMe="true"
           >
             <template #prefix>
@@ -90,7 +90,7 @@
             icon-left="calendar"
             :value="_task.due_date"
             @change="(val) => (_task.due_date = val)"
-            placeholder="Due Date"
+            :placeholder="__('01/04/2024 11:30 PM')"
             input-class="border-none"
           />
           <Dropdown :options="taskPriorityOptions(updateTaskPriority)">
diff --git a/frontend/src/components/Modals/ViewModal.vue b/frontend/src/components/Modals/ViewModal.vue
index eeb090e9..0f3ac126 100644
--- a/frontend/src/components/Modals/ViewModal.vue
+++ b/frontend/src/components/Modals/ViewModal.vue
@@ -3,17 +3,17 @@
     v-model="show"
     :options="{
       title: editMode
-        ? 'Edit View'
+        ? __('Edit View')
         : duplicateMode
-        ? 'Duplicate View'
-        : 'Create View',
+        ? __('Duplicate View')
+        : __('Create View'),
       actions: [
         {
           label: editMode
-            ? 'Save Changes'
+            ? __('Save Changes')
             : duplicateMode
-            ? 'Duplicate'
-            : 'Create',
+            ? __('Duplicate')
+            : __('Create'),
           variant: 'solid',
           onClick: () => (editMode ? update() : create()),
         },
@@ -25,8 +25,8 @@
         variant="outline"
         size="md"
         type="text"
-        label="View Name"
-        placeholder="View Name"
+        :label="__('View Name')"
+        :placeholder="__('My Open Deals')"
         v-model="view.label"
       />
     </template>
@@ -51,7 +51,6 @@ const props = defineProps({
   },
 })
 
-
 const show = defineModel()
 const view = defineModel('view')