Unclutter UI (#2040)

- remove the collapsable panel - make "stop" buttons outlined and of a danger severity - fix previous step number size - a title while mining - when finished cleaning, go to `/contacts` after 10 seconds - remove start a new mining button - Disable navbar's "Start mining" button when `isLoadingStartMining` too
ankaboot-source · Feb 4, 2025 · 77e0bf1 · 77e0bf1
1 parent 968b637
commit 77e0bf1
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 91 deletions.
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
@@ -17,7 +17,10 @@
         <Button
           type="button"
           :label="$t('common.start_mining')"
-          :disabled="$leadminerStore.activeMiningTask"
+          :disabled="
+            $leadminerStore.activeMiningTask ||
+            $leadminerStore.isLoadingStartMining
+          "
           @click="navigateToMine()"
         />
         <component :is="CreditsCounter" />

diff --git a/frontend/src/components/Mining/MiningStepper.vue b/frontend/src/components/Mining/MiningStepper.vue
@@ -1,59 +1,45 @@
 <template>
-  <Panel
-    v-model:collapsed="collapsePanel"
-    class="mb-4 flex flex-col grow"
-    :class="{ 'max-h-fit': $stepper.index !== 1 }"
-    :toggleable="isToggleable"
-    pt:content:class="flex grow"
-    pt:content-container:class="flex grow"
-  >
-    <template #header>
-      <Button
-        severity="secondary"
-        unstyled
-        @click="collapsePanel = !collapsePanel"
-      />
-    </template>
-    <Stepper v-model:value="$stepper.index" linear class="flex flex-col grow">
-      <StepList>
-        <Step v-slot="{ active, value }" as-child :value="1">
-          <StepWithPopover
-            :step-number="Number(value)"
-            :is-active="active"
-            :title="t('source')"
-          />
-        </Step>
-        <Step v-slot="{ active, value }" as-child :value="2">
-          <StepWithPopover
-            :step-number="Number(value)"
-            :is-active="active"
-            :title="$t('common.mine')"
-          />
-        </Step>
-        <Step v-slot="{ active, value }" as-child :value="3">
-          <StepWithPopover
-            :step-number="Number(value)"
-            :is-active="active"
-            :title="$t('common.clean')"
-          />
-        </Step>
-      </StepList>
-      <StepPanels class="flex flex-col grow">
-        <StepPanel v-slot="{ active }" :value="1" class="flex grow">
-          <SourcePanel v-if="active" ref="sourcePanel" />
-        </StepPanel>
-        <StepPanel v-slot="{ active }" :value="2">
-          <MinePanel
-            v-if="active"
-            :mining-source="$leadminerStore.activeMiningSource!"
-          />
-        </StepPanel>
-        <StepPanel v-slot="{ active }" :value="3">
-          <CleanPanel v-if="active" />
-        </StepPanel>
-      </StepPanels>
-    </Stepper>
-  </Panel>
+  <Stepper v-model:value="$stepper.index" linear class="flex flex-col grow">
+    <StepList>
+      <Step v-slot="{ active, value }" as-child :value="1">
+        <StepWithPopover
+          :step-number="Number(value)"
+          :is-active="active"
+          :title="t('source')"
+        />
+      </Step>
+      <Step v-slot="{ active, value }" as-child :value="2">
+        <StepWithPopover
+          :step-number="Number(value)"
+          :is-active="active"
+          :title="$t('common.mine')"
+        />
+      </Step>
+      <Step v-slot="{ active, value }" as-child :value="3">
+        <StepWithPopover
+          :step-number="Number(value)"
+          :is-active="active"
+          :title="$t('common.clean')"
+        />
+      </Step>
+    </StepList>
+
+    <StepPanels class="flex flex-col grow">
+      <StepPanel v-slot="{ active }" :value="1" class="flex grow">
+        <SourcePanel v-if="active" ref="sourcePanel" />
+      </StepPanel>
+      <StepPanel v-slot="{ active }" :value="2">
+        <MinePanel
+          v-if="active"
+          :mining-source="$leadminerStore.activeMiningSource!"
+        />
+      </StepPanel>
+      <StepPanel v-slot="{ active }" :value="3">
+        <CleanPanel v-if="active" />
+      </StepPanel>
+    </StepPanels>
+  </Stepper>
+
   <MiningConsentSidebar
     v-model:show="$consentSidebar.status"
     v-model:provider="$consentSidebar.provider"
@@ -82,16 +68,10 @@ const { t } = useI18n({
   useScope: 'local',
 });
 
-const { isToggleable } = defineProps<{
-  isToggleable: boolean;
-}>();
-
 const $route = useRoute();
 const $stepper = useMiningStepper();
 const $consentSidebar = useMiningConsentSidebar();
 const $leadminerStore = useLeadminerStore();
-
-const collapsePanel = defineModel<boolean>('collapsed');
 const sourcePanel = ref<InstanceType<typeof SourcePanel>>();
 
 const { error, provider } = $route.query;
@@ -111,18 +91,14 @@ onNuxtReady(() => {
 <i18n lang="json">
 {
   "en": {
-    "mine_contacts": "Mine, clean and enrich your contacts",
     "source": "Source",
     "mining": "Mining",
-    "cleaning": "Cleaning",
-    "retrieving_mailboxes": "Retrieving mailboxes..."
+    "cleaning": "Cleaning"
   },
   "fr": {
-    "mine_contacts": "Extraire, nettoyer et enrichir vos contacts",
     "source": "Source",
     "mining": "Extraction",
-    "cleaning": "Nettoyage",
-    "retrieving_mailboxes": "Récupération des boîtes aux lettres..."
+    "cleaning": "Nettoyage"
   }
 }
 </i18n>
diff --git a/frontend/src/components/Mining/StepperPanels/CleanPanel.vue b/frontend/src/components/Mining/StepperPanels/CleanPanel.vue
@@ -22,15 +22,11 @@
       class="w-full md:w-max"
       icon="pi pi-stop"
       icon-pos="right"
+      severity="danger"
+      outlined
       :label="t('halt_cleaning')"
       @click="haltCleaning"
     />
-    <Button
-      class="w-full md:w-max"
-      severity="secondary"
-      :label="t('start_new_mining')"
-      @click="startNewMining"
-    />
   </div>
 </template>
 <script setup lang="ts">
@@ -43,7 +39,6 @@ const { t } = useI18n({
 });
 
 const $toast = useToast();
-const $stepper = useMiningStepper();
 const $leadminerStore = useLeadminerStore();
 const taskStartedAt = computed(() => $leadminerStore.miningStartedAt);
 const contactsToVerify = computed(() => $leadminerStore.createdContacts);
@@ -75,12 +70,12 @@ function cleaningDoneNotification() {
 onMounted(() => {
   if (verificationFinished.value) {
     cleaningDoneNotification();
-    navigateTo('/contacts');
+    setTimeout(() => navigateTo('/contacts'), 10000);
   } else {
     watch(verificationFinished, (finished) => {
       if (finished) {
         cleaningDoneNotification();
-        navigateTo('/contacts');
+        setTimeout(() => navigateTo('/contacts'), 10000);
       }
     });
   }
@@ -114,11 +109,6 @@ async function haltCleaning() {
     }
   }
 }
-
-function startNewMining() {
-  $leadminerStore.$resetMining();
-  $stepper.$reset();
-}
 </script>
 
 <i18n lang="json">

diff --git a/frontend/src/components/Mining/StepperPanels/MinePanel.vue b/frontend/src/components/Mining/StepperPanels/MinePanel.vue
@@ -13,14 +13,18 @@
         <i class="pi pi-spin pi-spinner mr-1.5" />
         {{ t('retrieving_mailboxes') }}
       </div>
-      <div v-else-if="!$leadminerStore.miningTask">
+      <div v-else-if="!$leadminerStore.activeMiningTask">
         {{ totalEmails.toLocaleString() }}
         {{
           extractionProgress < 1
             ? t('emails_to_mine', totalEmails)
             : t('emails_mined', totalEmails)
         }}
       </div>
+      <div v-else>
+        <i class="pi pi-spin pi-spinner mr-1.5" />
+        {{ t('is_mining') }}
+      </div>
     </template>
   </ProgressCard>
 
@@ -57,6 +61,8 @@
       :loading="$leadminerStore?.isLoadingStartMining"
       icon="pi pi-stop"
       icon-pos="right"
+      severity="danger"
+      outlined
       :label="t('halt_mining')"
       @click="haltMining"
     />
@@ -330,7 +336,8 @@ async function haltMining() {
     "mining_issue": "Oops! We encountered an issue while trying to start your mining process.",
     "mining_stopped": "Mining Stopped",
     "mining_canceled": "Your mining is successfully canceled.",
-    "mining_already_canceled": "It seems you are trying to cancel a mining operation that is already canceled."
+    "mining_already_canceled": "It seems you are trying to cancel a mining operation that is already canceled.",
+    "is_mining": "Contact extraction in progress..."
   },
   "fr": {
     "retrieving_mailboxes": "Récupération des boîtes aux lettres...",
@@ -349,7 +356,8 @@ async function haltMining() {
     "mining_issue": "Oups! Nous avons rencontré un problème lors du démarrage de votre processus d'extraction.",
     "mining_stopped": "Extraction arrêtée",
     "mining_canceled": "Votre extraction a été annulée avec succès.",
-    "mining_already_canceled": "Il semble que vous essayez d'annuler une opération de minage qui est déjà annulée."
+    "mining_already_canceled": "Il semble que vous essayez d'annuler une opération de minage qui est déjà annulée.",
+    "is_mining": "Extraction des contacts en cours..."
   }
 }
 </i18n>
diff --git a/frontend/src/components/Mining/StepperPanels/StepWithPopover.vue b/frontend/src/components/Mining/StepperPanels/StepWithPopover.vue
@@ -10,7 +10,7 @@
       <button class="p-step-header">
         <i
           v-if="$stepper.isPastStep(stepNumber)"
-          class="pi pi-check bg-primary text-white rounded-full p-1"
+          class="pi pi-check bg-primary text-white rounded-full p-2"
         />
         <span v-else v class="p-step-number">{{ stepNumber }}</span>
         <span class="p-step-title hidden md:block">

diff --git a/frontend/src/layouts/default.vue b/frontend/src/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-screen px-4">
+  <div class="flex flex-col h-screen px-4 pb-4">
     <app-header />
     <slot />
   </div>

diff --git a/frontend/src/pages/mine.vue b/frontend/src/pages/mine.vue
@@ -1,12 +1,15 @@
 <template>
   <div class="flex flex-col grow">
-    <MiningStepper
-      v-model:collapsed="$stepper.collapsed"
-      :is-toggleable="showTable"
-    />
+    <div
+      class="flex flex-col grow border-x border-t rounded-md px-2 pt-6"
+      :class="{ 'max-h-fit': $stepper.index !== 1 }"
+    >
+      <MiningStepper />
+    </div>
     <MiningTable :show-table="showTable" />
   </div>
 </template>
+
 <script setup lang="ts">
 const $stepper = useMiningStepper();
 const showTable = computed(() => $stepper.index !== 1);