Implemented: support to copy the order identification when clicked on…

… order identification chip(#175)
hotwax · Jul 12, 2023 · 89ca0b4 · 89ca0b4
1 parent 7b207b8
commit 89ca0b4
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 9 deletions.
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -27,11 +27,11 @@ const i18n = createI18n({
 
 // TODO Check if this is needed in updated versions
 // Currently this method is added to be used in ts files
-const translate = (key: string) => {
+const translate = (key: string, named?: any) => {
   if (!key) {
     return '';
   }
-  return i18n.global.t(key);
+  return i18n.global.t(key, named);
 };
 
 export { i18n as default, translate }
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -16,6 +16,7 @@
   "Completed": "Completed",
   "Configuration Missing": "Configuration Missing",
   "Confirm": "Confirm",
+  "Copied": "Copied { value }",
   "Custom Label": "Custom Label",
   "Customer letter": "Customer letter",
   "Damaged": "Damaged",
@@ -50,6 +51,7 @@
   "Import shipped order details from an external system based on tracking codes. Orders that have tracking codes will automatically be shipped at the end of the day.": "Import shipped order details from an external system based on tracking codes. Orders that have tracking codes will automatically be shipped at the end of the day.",
   "Import shipped orders": "Import shipped orders",
   "In Progress": "In Progress",
+  "Internal Id copied to clipboard": "Internal Id copied to clipboard",
   "Last brokered": "Last brokered",
   "Loading": "Loading",
   "Login": "Login",

diff --git a/src/locales/es.json b/src/locales/es.json
@@ -16,6 +16,7 @@
   "Completed": "Completado",
   "Configuration Missing": "Configuration Missing",
   "Confirm": "Confirm",
+  "Copied": "Copied { value }",
   "Custom Label": "Custom Label",
   "Customer letter": "Customer letter",
   "Damaged": "Damaged",
@@ -50,6 +51,7 @@
   "Import shipped order details from an external system based on tracking codes. Orders that have tracking codes will automatically be shipped at the end of the day.": "Import shipped order details from an external system based on tracking codes. Orders that have tracking codes will automatically be shipped at the end of the day.",
   "Import shipped orders": "Import shipped orders",
   "In Progress": "En curso",
+  "Internal Id copied to clipboard": "Internal Id copied to clipboard",
   "Last brokered": "Última intermediación",
   "Loading": "Loading",
   "Login": "Acceso",

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,5 +1,7 @@
+import { translate } from '@/i18n';
 import store from '@/store';
 import { JsonToCsvOption } from '@/types';
+import { Plugins } from '@capacitor/core';
 import { toastController } from '@ionic/vue';
 import { saveAs } from 'file-saver';
 import { DateTime } from 'luxon';
@@ -89,4 +91,14 @@ const jsonToCsv = (file: any, options: JsonToCsvOption = {}) => {
   return blob;
 }
 
-export { formatDate, formatUtcDate, getFeature, handleDateTimeInput, showToast, hasError, parseCsv, jsonToCsv}
+const copyToClipboard = async (value: string, text?: string) => {
+  const { Clipboard } = Plugins;
+
+  await Clipboard.write({
+    string: value,
+  }).then(() => {
+    text ? showToast(translate(text)) : showToast(translate("Copied", { value }));
+  });
+}
+
+export { copyToClipboard, formatDate, formatUtcDate, getFeature, handleDateTimeInput, showToast, hasError, parseCsv, jsonToCsv}
diff --git a/src/views/Completed.vue b/src/views/Completed.vue
@@ -55,7 +55,7 @@
               </div>
 
               <div class="order-tags">
-                <ion-chip outline>
+                <ion-chip @click="copyToClipboard(order.orderId, 'Internal Id copied to clipboard')" outline>
                   <ion-icon :icon="pricetagOutline" />
                   <ion-label>{{ order.orderId }}</ion-label>
                 </ion-chip>
@@ -157,7 +157,7 @@ import { printOutline, downloadOutline, pricetagOutline, ellipsisVerticalOutline
 import Popover from '@/views/ShippingPopover.vue'
 import { useRouter } from 'vue-router';
 import { mapGetters, useStore } from 'vuex'
-import { formatUtcDate, getFeature, showToast } from '@/utils'
+import { copyToClipboard, formatUtcDate, getFeature, showToast } from '@/utils'
 import { hasError } from '@/adapter'
 import Image from '@/components/Image.vue'
 import { UtilService } from '@/services/UtilService';
@@ -552,6 +552,7 @@ export default defineComponent({
     const router = useRouter();
 
     return {
+      copyToClipboard,
       checkmarkDoneOutline,
       downloadOutline,
       ellipsisVerticalOutline,

diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue
@@ -44,7 +44,7 @@
               </div>
 
               <div class="order-tags">
-                <ion-chip outline>
+                <ion-chip @click="copyToClipboard(order.orderId, 'Internal Id copied to clipboard')" outline>
                   <ion-icon :icon="pricetagOutline" />
                   <ion-label>{{ order.orderId }}</ion-label>
                 </ion-chip>
@@ -191,7 +191,7 @@ import { defineComponent } from 'vue';
 import { printOutline, addOutline, ellipsisVerticalOutline, checkmarkDoneOutline, pricetagOutline, optionsOutline } from 'ionicons/icons'
 import Popover from "@/views/PackagingPopover.vue";
 import { mapGetters, useStore } from 'vuex';
-import { formatUtcDate, getFeature, showToast } from '@/utils';
+import { copyToClipboard, formatUtcDate, getFeature, showToast } from '@/utils';
 import { hasError } from '@/adapter';
 import Image from '@/components/Image.vue'
 import ViewSizeSelector from '@/components/ViewSizeSelector.vue';
@@ -773,6 +773,7 @@ export default defineComponent({
     const store = useStore();
 
     return {
+      copyToClipboard,
       addOutline,
       printOutline,
       ellipsisVerticalOutline,

diff --git a/src/views/OpenOrders.vue b/src/views/OpenOrders.vue
@@ -42,7 +42,7 @@
               </div>
 
               <div class="order-tags">
-                <ion-chip outline>
+                <ion-chip @click="copyToClipboard(orders.doclist.docs[0].orderId, 'Internal Id copied to clipboard')" outline>
                   <ion-icon :icon="pricetagOutline" />
                   <ion-label>{{ orders.doclist.docs[0].orderId }}</ion-label>
                 </ion-chip>
@@ -129,7 +129,7 @@ import { optionsOutline, pricetagOutline, printOutline, refreshCircleOutline } f
 import AssignPickerModal from '@/views/AssignPickerModal.vue';
 import { mapGetters, useStore } from 'vuex';
 import Image from '@/components/Image.vue'
-import { formatUtcDate, getFeature } from '@/utils'
+import { copyToClipboard, formatUtcDate, getFeature } from '@/utils'
 import { hasError } from '@/adapter';
 import { UtilService } from '@/services/UtilService';
 import { prepareOrderQuery } from '@/utils/solrHelper';
@@ -288,6 +288,7 @@ export default defineComponent({
     const store = useStore();
 
     return{
+      copyToClipboard,
       formatUtcDate,
       getFeature,
       optionsOutline,