fixes: remove contacts button & Import csv (#1988)

* Disable button when no selection & Remove tooltip workarounds

The tooltip not working when component is `disabled` seems to be fixed by PrimeVue

* more package.json consistency

* fix i18n: select at least one contacto to {action}

* import csv goes to stepper 2 only on start mining

on click "import csv or excel" and closing the window, the stepper should be at stepper 1 not 2

* frontend: run prettier

* Update ImportFileDialog.vue

Author: J43fura

backend/package.json

@@ -7,10 +7,10 @@
     "test:unit": "jest ./test/unit",
     "test:integration": "jest ./test/integration",
     "test-ci:unit": "jest ./test/unit --coverage",
-    "dev-api": "nodemon src/server.ts",
-    "dev-mock-external-services": "nodemon src/mocks/enrichment/server.ts",
-    "dev-worker": "nodemon src/messageWorker.ts",
-    "dev-email-worker": "nodemon src/emailVerificationWorker.ts",
+    "dev:api": "nodemon src/server.ts",
+    "dev:mock-external-services": "nodemon src/mocks/enrichment/server.ts",
+    "dev:worker": "nodemon src/messageWorker.ts",
+    "dev:email-worker": "nodemon src/emailVerificationWorker.ts",
     "dev:webhook-listener": "stripe listen --forward-to http://localhost:8081/api/payment/stripe/webhook",
     "dev:inspect": "node --inspect -r ts-node/register src/server.ts",
     "lint": "eslint src test",

frontend/nuxt.config.ts

@@ -164,7 +164,7 @@ export default defineNuxtConfig({
           src: 'icons/pickaxe-512-512.png',
           sizes: '512x512',
           type: 'image/png',
-          purpose: 'any'
+          purpose: 'any',
         },
         {
           src: 'icons/pickaxe-512-512.png',
@@ -175,7 +175,7 @@ export default defineNuxtConfig({
       ],
     },
     workbox: {
-      navigateFallback: "/",
+      navigateFallback: '/',
     },
     devOptions: {
       enabled: true,

frontend/src/components/Mining/Buttons/RemoveContactButton.vue

@@ -1,11 +1,13 @@
 <template>
   <Button
     id="remove-contact"
-    v-tooltip.top="t('remove_contacts', contactsToDeleteLength)"
+    v-tooltip.top="
+      !isRemoveDisabled && t('remove_contacts', contactsToDeleteLength)
+    "
     icon="pi pi-times"
     :label="$screenStore.size.md ? t('remove') : undefined"
     severity="danger"
-    :disabled="isRemoveDisabled || isRemovingContacts"
+    :disabled="isRemoveDisabled"
     :loading="isRemovingContacts"
     @click="showWarning()"
   />
@@ -57,10 +59,12 @@ const { deselectContacts } = props;
 
 const contactsToDelete = computed(() => props.contactsToDelete);
 const contactsToDeleteLength = computed(() => props.contactsToDeleteLength);
-const isRemoveDisabled = computed(() => props.isRemoveDisabled);
+const isRemovingContacts = ref(false);
+const isRemoveDisabled = computed(
+  () => props.isRemoveDisabled || isRemovingContacts.value,
+);
 
 const showRemoveContactModal = ref(false);
-const isRemovingContacts = ref(false);
 
 function showWarning() {
   showRemoveContactModal.value = true;

frontend/src/components/Mining/ImportFileDialog.vue

@@ -118,20 +118,16 @@
         icon="pi pi-arrow-left"
         @click="reset()"
       />
-      <!-- This is a workaround as tooltip doesn't work when component is `disabled`-->
-      <div
+      <Button
         v-tooltip.top="
           !selectedHeaders.includes('email') && t('email_column_required')
         "
-      >
-        <Button
-          class="border-solid border-2 border-black"
-          :label="t('start_mining')"
-          severity="contrast"
-          :disabled="!selectedHeaders.includes('email')"
-          @click="startMining"
-        />
-      </div>
+        class="border-solid border-2 border-black"
+        :label="t('start_mining')"
+        severity="contrast"
+        :disabled="!selectedHeaders.includes('email')"
+        @click="startMining"
+      />
     </template>
   </Dialog>
 </template>
@@ -147,6 +143,7 @@ const { t } = useI18n({
   useScope: 'local',
 });
 const $leadminerStore = useLeadminerStore();
+const $stepper = useMiningStepper();
 
 const dialog = ref();
 const visible = ref(false);
@@ -207,7 +204,7 @@ const $screenStore = useScreenStore();
 
 const DELIMITERS = [',', ';', '|', '\t'];
 function getLocalDelimiter() {
-  const language = navigator.language?.substring(0, 2);
+  const language = navigator?.language?.substring(0, 2);
   switch (language) {
     case 'fr':
     case 'de':
@@ -229,7 +226,7 @@ function getOrderedDelimiters() {
 const orderedDelimiters = getOrderedDelimiters();
 
 function reset() {
-  fileUpload.value.clear();
+  fileUpload.value?.clear();
   contentJson.value = null;
   columns.value = [];
   fileName.value = undefined;
@@ -414,6 +411,7 @@ function startMining() {
     name: fileName.value ?? '',
     contacts: parsedDataWithMappedHeaders,
   };
+  $stepper.next();
   $leadminerStore.startMining(SOURCE);
   visible.value = false;
 }

frontend/src/components/Mining/StepperPanels/MinePanel.vue

@@ -204,7 +204,6 @@ const progressTooltip = computed(() =>
 
 onMounted(async () => {
   if (source.value === 'file') {
-    importFileDialogRef.value.openModal();
     return;
   }
 

frontend/src/components/Mining/StepperPanels/SourcePanel.vue

@@ -60,12 +60,13 @@
           v-model:show="$imapDialogStore.showImapDialog"
         />
         <Button
-          id="import-csv"
+          id="import-file"
           outlined
           icon="pi pi-upload"
           :label="t('import_csv_excel')"
-          @click="importTable()"
+          @click="importFileDialogRef.openModal()"
         />
+        <importFileDialog ref="importFileDialogRef" />
       </div>
     </div>
   </div>
@@ -76,7 +77,9 @@ import ImapSource from '@/components/Mining/AddSourceImap.vue';
 import OauthSource from '@/components/Mining/AddSourceOauth.vue';
 import { FetchError } from 'ofetch';
 import type { MiningSource } from '~/types/mining';
+import importFileDialog from '../ImportFileDialog.vue';
 
+const importFileDialogRef = ref();
 const { t } = useI18n({
   useScope: 'local',
 });
@@ -138,11 +141,6 @@ onMounted(async () => {
 defineExpose({
   onSourceChange,
 });
-
-function importTable() {
-  //miningSource would be undefined
-  $stepper.next();
-}
 </script>
 
 <i18n lang="json">

frontend/src/components/Mining/Table/MiningTable.vue

@@ -58,24 +58,31 @@
     </template>
     <template #header>
       <div class="flex items-center gap-1">
-        <!-- This is a workaround as tooltip doesn't work when component is `disabled`-->
-        <div
-          v-tooltip.top="isExportDisabled && t('select_at_least_one_contact')"
-          class="flex items-center gap-1"
-        >
+        <div class="flex items-center gap-1">
           <Button
             id="export-csv"
+            v-tooltip.top="
+              isExportDisabled &&
+              t('select_at_least_one_contact', { action: t('export') })
+            "
             icon="pi pi-external-link"
             :label="$screenStore.size.md ? t('export_csv') : undefined"
             :disabled="isExportDisabled"
             @click="exportTable()"
           />
-          <RemoveContactButton
-            :contacts-to-delete="contactsToTreat"
-            :contacts-to-delete-length="implicitlySelectedContactsLength"
-            :is-remove-disabled="isExportDisabled"
-            :deselect-contacts="deselectContacts"
-          />
+          <div
+            v-tooltip.top="
+              (isExportDisabled || !selectedContactsLength) &&
+              t('select_at_least_one_contact', { action: t('remove') })
+            "
+          >
+            <RemoveContactButton
+              :contacts-to-delete="contactsToTreat"
+              :contacts-to-delete-length="selectedContactsLength"
+              :is-remove-disabled="isExportDisabled || !selectedContactsLength"
+              :deselect-contacts="deselectContacts"
+            />
+          </div>
         </div>
         <div>
           <EnrichButton
@@ -1115,8 +1122,10 @@ table.p-datatable-table {
     "of": "of",
     "no_contacts_found": "No contacts found",
     "try_clearing_filters": "Try clearing filters",
-    "select_at_least_one_contact": "Select at least one contact to export",
+    "select_at_least_one_contact": "Select at least one contact to {action}",
     "export_csv": "Export CSV",
+    "export": "export",
+    "remove": "remove",
     "clear": "Clear",
     "filter": "Filter",
     "toggle_valid_tooltip": "Ensure the deliverability of your campaign",
@@ -1161,7 +1170,9 @@ table.p-datatable-table {
     "of": "sur",
     "no_contacts_found": "Aucun contact trouvé",
     "try_clearing_filters": "Essayez de vider les filtres",
-    "select_at_least_one_contact": "Sélectionnez au moins un contact à exporter",
+    "select_at_least_one_contact": "Sélectionnez au moins un contact à {action}",
+    "export": "exporter",
+    "remove": "supprimer",
     "export_csv": "Export CSV",
     "clear": "Vider",
     "filter": "Filtrer",

package.json

@@ -12,10 +12,10 @@
     "dev:supabase": "supabase start",
     "dev:supabase-functions": "supabase functions serve",
     "dev:frontend": "npm run dev --prefix ./frontend",
-    "dev:backend-api": "npm run dev-api --prefix ./backend",
-    "dev:backend-worker": "npm run dev-worker --prefix ./backend",
-    "dev:backend-email-worker": "npm run dev-email-worker --prefix ./backend",
-    "dev:backend-mock-external-services": "npm run dev-mock-external-services --prefix ./backend"
+    "dev:backend-api": "npm run dev:api --prefix ./backend",
+    "dev:backend-worker": "npm run dev:worker --prefix ./backend",
+    "dev:backend-email-worker": "npm run dev:email-worker --prefix ./backend",
+    "dev:backend-mock-external-services": "npm run dev:mock-external-services --prefix ./backend"
   },
   "author": "ankaboot",
   "license": "AGPL-3.0",