fix(web): revert smart merge (#6504)

* revert smart merge

* fix test

* fix test

* Remove Slider file
This commit is contained in:
Alex 2024-01-19 11:34:20 -06:00 committed by GitHub
parent df27460f1c
commit 07b874edda
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 74 additions and 147 deletions

View file

@ -2,7 +2,6 @@
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { createEventDispatcher } from 'svelte';
import Slider from '$lib/components/elements/slider.svelte';
export let title: string;
export let subtitle = '';
@ -11,6 +10,7 @@
export let isEdited = false;
const dispatch = createEventDispatcher<{ toggle: boolean }>();
const onToggle = (event: Event) => dispatch('toggle', (event.target as HTMLInputElement).checked);
</script>
<div class="flex place-items-center justify-between">
@ -31,5 +31,67 @@
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
</div>
<Slider bind:checked {disabled} on:toggle={() => dispatch('toggle', checked)} />
<label class="relative inline-block h-[10px] w-[36px] flex-none">
<input
class="disabled::cursor-not-allowed h-0 w-0 opacity-0"
type="checkbox"
bind:checked
on:click={onToggle}
{disabled}
/>
{#if disabled}
<span class="slider slider-disabled cursor-not-allowed" />
{:else}
<span class="slider slider-enabled cursor-pointer" />
{/if}
</label>
</div>
<style>
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 34px;
}
input:disabled {
cursor: not-allowed;
}
.slider:before {
position: absolute;
content: '';
height: 20px;
width: 20px;
left: 0px;
right: 0px;
bottom: -4px;
background-color: gray;
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider:before {
-webkit-transform: translateX(18px);
-ms-transform: translateX(18px);
transform: translateX(18px);
background-color: #4250af;
}
input:checked + .slider-disabled {
background-color: gray;
}
input:checked + .slider-enabled {
background-color: #adcbfa;
}
</style>

View file

@ -1,72 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let checked = false;
export let disabled = false;
const dispatch = createEventDispatcher<{ toggle: boolean }>();
const onToggle = (event: Event) => dispatch('toggle', (event.target as HTMLInputElement).checked);
</script>
<label class="relative inline-block h-[10px] w-[36px] flex-none">
<input
class="disabled::cursor-not-allowed h-0 w-0 opacity-0"
type="checkbox"
bind:checked
on:click={onToggle}
{disabled}
/>
{#if disabled}
<span class="slider slider-disabled cursor-not-allowed" />
{:else}
<span class="slider slider-enabled cursor-pointer" />
{/if}
</label>
<style>
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 34px;
}
input:disabled {
cursor: not-allowed;
}
.slider:before {
position: absolute;
content: '';
height: 20px;
width: 20px;
left: 0px;
right: 0px;
bottom: -4px;
background-color: gray;
-webkit-transition: 0.4s;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider:before {
-webkit-transform: translateX(18px);
-ms-transform: translateX(18px);
transform: translateX(18px);
background-color: #4250af;
}
input:checked + .slider-disabled {
background-color: gray;
}
input:checked + .slider-enabled {
background-color: #adcbfa;
}
</style>

View file

@ -26,7 +26,7 @@
let dispatch = createEventDispatcher<{
back: void;
merge: PersonResponseDto;
merge: void;
}>();
$: hasSelection = selectedPeople.length > 0;
@ -68,17 +68,16 @@
const handleMerge = async () => {
try {
let { data: results } = await api.personApi.mergePerson({
const { data: results } = await api.personApi.mergePerson({
id: person.id,
mergePersonDto: { ids: selectedPeople.map(({ id }) => id) },
});
const { data: mergedPerson } = await api.personApi.getPerson({ id: person.id });
const count = results.filter(({ success }) => success).length;
notificationController.show({
message: `Merged ${count} ${count === 1 ? 'person' : 'people'}`,
type: NotificationType.Info,
});
dispatch('merge', mergedPerson);
dispatch('merge');
} catch (error) {
handleError(error, 'Cannot merge people');
} finally {

View file

@ -165,12 +165,8 @@
id: personMerge2.id,
mergePersonDto: { ids: [personToMerge.id] },
});
const { data: mergedPerson } = await api.personApi.getPerson({ id: personToMerge.id });
countVisiblePeople--;
people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
people = people.map((person: PersonResponseDto) => (person.id === personMerge2.id ? mergedPerson : person));
notificationController.show({
message: 'Merge people succesfully',

View file

@ -185,13 +185,8 @@
}
};
const handleMerge = async (person: PersonResponseDto) => {
const { data: statistics } = await api.personApi.getPersonStatistics({ id: person.id });
numberOfAssets = statistics.assets;
const handleMerge = () => {
handleGoBack();
data.person = person;
refreshAssetGrid = !refreshAssetGrid;
};
@ -379,7 +374,7 @@
{/if}
{#if viewMode === ViewMode.MERGE_PEOPLE}
<MergeFaceSelector person={data.person} on:back={handleGoBack} on:merge={({ detail }) => handleMerge(detail)} />
<MergeFaceSelector person={data.person} on:back={handleGoBack} on:merge={handleMerge} />
{/if}
<header>