fix cluttered ui (#2005)

* set progress bar color to primary

* remove enrich from stepper

* remove notification when enrich started

* add success icon when step is done

* show table only when there is contacts

* remove border

* delete enrich panel

* change button to outlined with red border

* fix google credentials & redirect url

* fix formatting, linting

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

Co-authored-by: Jaafoura <73950268+J43fura@users.noreply.github.com>

* refactored by @J43fura

Co-authored-by: Jaafoura <73950268+J43fura@users.noreply.github.com>

* collapse stepper when cleaning is done

* fix linting

* revert: collapse stepper when cleaning is done

---------

Co-authored-by: Jaafoura <73950268+J43fura@users.noreply.github.com>

Author: malek10xdev

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

@@ -214,11 +214,6 @@ async function enrichPerson(
   updateEmptyFieldsOnly: boolean,
   contacts: Partial<Contact>,
 ) {
-  showNotification(
-    'success',
-    t('notification.summary'),
-    t('notification.enrichment_started_one', { toEnrich: 1 }),
-  );
   totalTasks.value = 1;
   await $api<EnrichContactResponse>('/enrich/person/', {
     method: 'POST',

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

@@ -7,6 +7,7 @@
     icon="pi pi-times"
     :label="$screenStore.size.md ? t('remove') : undefined"
     severity="danger"
+    outlined
     :disabled="isRemoveDisabled"
     :loading="isRemovingContacts"
     @click="showWarning()"

frontend/src/components/Mining/MiningStepper.vue

@@ -60,9 +60,6 @@
         <StepPanel v-slot="{ active }" :value="3">
           <CleanPanel v-if="active" />
         </StepPanel>
-        <StepPanel v-slot="{ active }" :value="4">
-          <EnrichPanel v-if="active" />
-        </StepPanel>
       </StepPanels>
     </Stepper>
   </Panel>
@@ -85,9 +82,6 @@ const MinePanel = defineAsyncComponent(
 const CleanPanel = defineAsyncComponent(
   () => import('./StepperPanels/CleanPanel.vue'),
 );
-const EnrichPanel = defineAsyncComponent(
-  () => import('./StepperPanels/EnrichPanel.vue'),
-);
 
 const StepWithPopover = defineAsyncComponent(
   () => import('./StepperPanels/StepWithPopover.vue'),
@@ -118,9 +112,6 @@ const spinnerText = computed(() => {
   if (!$leadminerStore.cleaningFinished) {
     return t('cleaning');
   }
-  if ($leadminerStore.activeEnrichment) {
-    return t('enriching');
-  }
   return undefined;
 });
 
@@ -143,15 +134,13 @@ onNuxtReady(() => {
     "source": "Source",
     "mining": "Mining",
     "cleaning": "Cleaning",
-    "enriching": "Enriching",
     "retrieving_mailboxes": "Retrieving mailboxes..."
   },
   "fr": {
     "mine_contacts": "Extraire, nettoyer et enrichir vos contacts",
     "source": "Source",
     "mining": "Extraction",
     "cleaning": "Nettoyage",
-    "enriching": "Enrichissement",
     "retrieving_mailboxes": "Récupération des boîtes aux lettres..."
   }
 }

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

@@ -19,7 +19,7 @@
   <div class="flex flex-col gap-2 pt-6 justify-end md:flex-row">
     <Button
       v-if="activeTask"
-      class="w-full md:w-max border-solid border-2 border-black"
+      class="w-full md:w-max"
       severity="contrast"
       icon="pi pi-stop"
       icon-pos="right"
@@ -33,21 +33,6 @@
         :label="t('start_new_mining')"
         @click="startNewMining"
       />
-      <Button
-        v-tooltip="t('enrich_button_tooltip')"
-        class="w-full md:w-max border-solid border-2 border-black"
-        severity="contrast"
-        :label="t('enrich_contacts', $contactsStore.selectedContactsCount)"
-        :disabled="
-          $contactsStore.selectedContactsCount === 0 ||
-          !$leadminerStore.cleaningFinished
-        "
-        @click="$stepper.next()"
-      >
-        <template #icon>
-          <span class="p-button-icon p-button-icon-right">💎</span>
-        </template>
-      </Button>
     </div>
   </div>
 </template>
@@ -63,7 +48,6 @@ const { t } = useI18n({
 const $toast = useToast();
 const $stepper = useMiningStepper();
 const $leadminerStore = useLeadminerStore();
-const $contactsStore = useContactsStore();
 const activeTask = computed(() => $leadminerStore.miningTask !== undefined);
 const taskStartedAt = computed(() => $leadminerStore.miningStartedAt);
 const contactsToVerify = computed(() => $leadminerStore.createdContacts);

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

@@ -40,14 +40,12 @@
       "
       :loading="$leadminerStore.isLoadingStartMining"
       severity="contrast"
-      class="border-solid border-2 border-black"
       :label="t('start_mining_now')"
       @click="startMining"
     />
     <Button
       v-else
       :loading="$leadminerStore?.isLoadingStartMining"
-      class="border-solid border-2 border-black"
       severity="contrast"
       icon="pi pi-stop"
       icon-pos="right"
@@ -104,14 +102,12 @@
         "
         :loading="$leadminerStore.isLoadingStartMining"
         severity="contrast"
-        class="border-solid border-2 border-black"
         :label="t('start_mining_now')"
         @click="startMining"
       />
       <Button
         v-else
         :loading="$leadminerStore?.isLoadingStartMining"
-        class="border-solid border-2 border-black"
         severity="contrast"
         icon="pi pi-stop"
         icon-pos="right"

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

@@ -28,7 +28,7 @@
           id="extract-source"
           :disabled="!sourceModel"
           severity="contrast"
-          class="font-semibold flex-shrink-0 border-solid border-2 border-black"
+          class="font-semibold flex-shrink-0"
           :label="t('extract_contacts')"
           @click="extractContacts()"
         />

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

@@ -9,7 +9,10 @@
     <div :class="`${isActive ? 'p-step-active' : 'p-disabled'}`">
       <button class="p-step-header">
         <span class="p-step-number">{{ stepNumber }}</span>
-        <span class="p-step-title hidden md:block"> {{ title }} </span>
+        <span class="p-step-title hidden md:block">
+          {{ title }}
+          <template v-if="isPastStep">✅</template>
+        </span>
       </button>
     </div>
     <span class="p-stepper-separator" />

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

@@ -35,11 +35,6 @@
     <ProgressBar
       v-tooltip.bottom="{ value: props.progressTooltip, escape: false }"
       :value="progressValue"
-      :pt="{
-        value: {
-          class: [progressColor],
-        },
-      }"
     />
   </div>
 </template>
@@ -66,9 +61,6 @@ const props = defineProps({
 const progressStartedAt = computed(() => props.started);
 const progressValue = computed(() => Math.round(props.progress * 100));
 const progressPercentage = computed(() => Math.floor(progressValue.value));
-const progressColor = computed(() =>
-  progressPercentage.value < 100 ? 'bg-amber-400' : 'bg-green-600',
-);
 
 const finishedTime = ref(0);
 

frontend/src/components/ProgressCard.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="flex flex-col grow">
     <mining-stepper v-model:collapsed="$stepper.collapsed" />
-    <MiningTable />
+    <div v-show="showTable">
+      <MiningTable />
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-const MiningTable = defineAsyncComponent(
-  () => import('../components/Mining/Table/MiningTable.vue'),
-);
-
 const $stepper = useMiningStepper();
+const $contactsStore = useContactsStore();
+const showTable = computed(() => Boolean($contactsStore.contactsList));
 $stepper.open();
 </script>