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

fix: Shopping list labels reordering dialog #3540

Merged
merged 6 commits into from
May 4, 2024
Merged

fix: Shopping list labels reordering dialog #3540

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4e4d57a
add save button and split function
p0lycarpio May 1, 2024
d9bf522
fix: save icon
p0lycarpio May 1, 2024
d8c2eaa
lint
p0lycarpio May 3, 2024
7e856f1
implement local copy of labelSettings for reordering
p0lycarpio May 4, 2024
182b120
Update frontend/pages/shopping-lists/_id.vue
p0lycarpio May 4, 2024
ae4c9fb
Merge branch 'mealie-next' into fix/shopping-list-labels-order
michael-genson May 4, 2024
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
1 change: 1 addition & 0 deletions frontend/pages/group/data/labels.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
v-model="state.editDialog"
:icon="$globals.icons.tags"
:title="$t('data-pages.labels.edit-label')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')"
@submit="editSaveLabel"
>
Expand Down
30 changes: 22 additions & 8 deletions frontend/pages/shopping-lists/_id.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,15 @@
</div>

<!-- Reorder Labels -->
<BaseDialog v-model="reorderLabelsDialog" :icon="$globals.icons.tagArrowUp" :title="$t('shopping-list.reorder-labels')">
<BaseDialog v-model="reorderLabelsDialog"

Check warning on line 61 in frontend/pages/shopping-lists/_id.vue

View workflow job for this annotation

GitHub Actions / Frontend and End-to-End Tests / lint 

Expected a linebreak before this attribute
p0lycarpio marked this conversation as resolved.
Show resolved Hide resolved
:icon="$globals.icons.tagArrowUp"
:title="$t('shopping-list.reorder-labels')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')"
@submit="saveLabelOrder"
@close="loadingCounter -= 1">
<v-card height="fit-content" max-height="70vh" style="overflow-y: auto;">
<draggable :value="shoppingList.labelSettings" handle=".handle" class="my-2" @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateLabelOrder">
<draggable :value="shoppingList.labelSettings" handle=".handle" class="my-2" @input="updateLabelOrder">
<div v-for="(labelSetting, index) in shoppingList.labelSettings" :key="labelSetting.id">
<MultiPurposeLabelSection v-model="shoppingList.labelSettings[index]" use-color />
</div>
Expand Down Expand Up @@ -103,7 +109,8 @@
/>
</div>
<div v-else class="mt-4 d-flex justify-end">
<BaseButton v-if="preferences.viewByLabel" edit class="mr-2" @click="reorderLabelsDialog = true">
<BaseButton v-if="preferences.viewByLabel" edit class="mr-2"

Check warning on line 112 in frontend/pages/shopping-lists/_id.vue

View workflow job for this annotation

GitHub Actions / Frontend and End-to-End Tests / lint 

Expected a linebreak before this attribute
p0lycarpio marked this conversation as resolved.
Show resolved Hide resolved
@click="reorderLabelsDialog = true; loadingCounter +=1">
<template #icon> {{ $globals.icons.tags }} </template>
{{ $t('shopping-list.reorder-labels') }}
</BaseButton>
Expand Down Expand Up @@ -515,7 +522,7 @@
settingsDialog.value = !settingsDialog.value;
}

async function updateLabelOrder(labelSettings: ShoppingListMultiPurposeLabelOut[]) {
function updateLabelOrder(labelSettings: ShoppingListMultiPurposeLabelOut[]) {
if (!shoppingList.value) {
return;
}
Expand All @@ -525,16 +532,22 @@
return labelSetting;
});

// setting this doesn't have any effect on the data since it's refreshed automatically, but it makes the ux feel smoother
// setting this doesn't have any effect on the data until saveLabelOrder() is called
shoppingList.value.labelSettings = labelSettings;
updateListItemOrder();
}

async function saveLabelOrder() {
if (!shoppingList.value) {
return;
}

loadingCounter.value += 1;
const { data } = await userApi.shopping.lists.updateLabelSettings(shoppingList.value.id, labelSettings);
const { data } = await userApi.shopping.lists.updateLabelSettings(shoppingList.value.id, shoppingList.value.labelSettings);
loadingCounter.value -= 1;

if (data) {
refresh();
// update locally before the next poll
updateListItemOrder();
}
}

Expand Down Expand Up @@ -941,6 +954,7 @@
settingsDialog,
toggleSettingsDialog,
updateLabelOrder,
saveLabelOrder,
saveListItem,
shoppingList,
showChecked,
Expand Down
Loading