Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI declutter stepper #2017

Merged
merged 12 commits into from
Jan 30, 2025
Merged

UI declutter stepper #2017

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a73af93
stepper ui changes
maleksal Jan 28, 2025
fd07aca
refine in background when done extracting
maleksal Jan 28, 2025
dfbcdd3
fix updating person & drop temp tables manually
maleksal Jan 29, 2025
fcd4903
move refine reload logic to mining panel
maleksal Jan 29, 2025
03a7d2b
await function refineReloadContacts
maleksal Jan 29, 2025
2b981e2
remove async keyword
maleksal Jan 29, 2025
d3eab5b
ui changes: remove title, remove button, bigger title,
maleksal Jan 29, 2025
35f92da
remove unused code
maleksal Jan 29, 2025
6a77674
improve ui styling, spacing
maleksal Jan 29, 2025
e79e14a
refactor: reduce cognitive complexity
maleksal Jan 29, 2025
ae656be
Merge branch 'main' into ui-declutter-stepper
maleksal Jan 29, 2025
a08b432
refactor, fix ui
maleksal Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 42 additions & 34 deletions frontend/src/components/Mining/StepperPanels/SourcePanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<div class="flex flex-col items-center space-y-6 p-6">
<span class="text-xl">{{ t('title') }}</span>
<template v-if="!showOtherSources">
<div class="flex flex-col items-center gap-8">
<h2 class="text-xl">{{ t('title_add_existing') }}</h2>

<template v-if="!showOtherSources">
<Select
v-model="sourceModel"
:options="sourceOptions"
class="w-full max-w-lg"
class="w-full max-w-xl"
option-label="email"
:placeholder="t('email_address')"
:pt="{
Expand All @@ -30,11 +30,10 @@
</template>
</Select>

<div class="flex flex-col min-[1129px]:flex-row gap-2 w-full max-w-lg">
<div class="flex flex-col min-[1129px]:flex-row gap-2 w-full max-w-xl">
<Button
id="mine-source"
class="w-full"
severity="secondary"
:disabled="!sourceModel"
:label="t('mine_new_source')"
outlined
Expand All @@ -49,12 +48,13 @@
@click="extractContacts"
/>
</div>
</template>
</div>
</template>

<template v-else>
<div
class="flex flex-col min-[1129px]:flex-row flex-wrap gap-2 w-full max-w-4xl justify-center"
>
<template v-else>
<div class="flex flex-col items-center gap-8">
<h2 class="text-xl">{{ t('title_add_new') }}</h2>
<div class="flex flex-col min-[1129px]:flex-row flex-wrap gap-2">
<oauth-source icon="pi pi-google" label="Google" source="google" />
<oauth-source
icon="pi pi-microsoft"
Expand All @@ -74,8 +74,8 @@
/>
<importFileDialog ref="importFileDialogRef" />
</div>
</template>
</div>
</div>
</template>
</template>

<script setup lang="ts">
Expand Down Expand Up @@ -122,28 +122,34 @@ function getIcon(type: string) {
}
}

async function fetchMiningSourcesAndHandleSource() {
await $leadminerStore.fetchMiningSources();

const selectedSource = source
? $leadminerStore.getMiningSourceByEmail(source as string)
: null;

if (selectedSource) {
const newQuery = { ...useRoute().query };
delete newQuery.source;
useRouter().replace({ query: newQuery });
onSourceChange(selectedSource);
} else {
sourceModel.value = sourceOptions?.value[0];
}
}

onMounted(async () => {
try {
await $leadminerStore.fetchMiningSources();

const selectedSource = source
? $leadminerStore.getMiningSourceByEmail(source as string)
: null;

if (selectedSource) {
const newQuery = { ...useRoute().query };
delete newQuery.source;
useRouter().replace({ query: newQuery });
onSourceChange(selectedSource);
} else {
sourceModel.value = sourceOptions?.value[0];
}
await fetchMiningSourcesAndHandleSource();
} catch (error) {
if (error instanceof FetchError && error.response?.status === 401) {
throw error;
} else {
throw new Error(t('fetch_sources_failed'));
}
throw error instanceof FetchError && error.response?.status === 401
? error
: new Error(t('fetch_sources_failed'));
}

if (sourceOptions.value.length === 0) {
showOtherSources.value = true;
}

watch(sourceModel, (miningSource) => {
Expand All @@ -163,7 +169,8 @@ defineExpose({
<i18n lang="json">
{
"en": {
"title": "Mine contacts from",
"title_add_new": "Choose your mining source",
"title_add_existing": "Mine from",
"mine_existing_source": "Mine from existing source",
"mine_new_source": "Mine from another source",
"fetch_sources_failed": "Failed to fetch mining sources",
Expand All @@ -173,7 +180,8 @@ defineExpose({
"import_csv_excel": "Import CSV or Excel"
},
"fr": {
"title": "Extraire des contacts depuis",
"title_add_new": "Extraire des contacts depuis",
"title_add_existing": "Extraire depuis",
"mine_existing_source": "Extraire depuis une source existante",
"mine_new_source": "Extraire depuis une autre source",
"fetch_sources_failed": "Échec de la récupération des sources de minage",
Expand Down
Loading