Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: Shopping list labels reordering dialog (#3540)

Browse Source 
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
This commit is contained in:
Arsène Reymond 2024-05-04 22:27:04 +02:00 committed by GitHub
parent 22d8c4d5dc
commit 9fad4a9dce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/pages/group/data/labels.vue
View File

@ -17,6 +17,7 @@
v-model="state.editDialog" v-model="state.editDialog"
:icon="$globals.icons.tags" :icon="$globals.icons.tags"
:title="$t('data-pages.labels.edit-label')" :title="$t('data-pages.labels.edit-label')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')" :submit-text="$tc('general.save')"
@submit="editSaveLabel" @submit="editSaveLabel"
> >

54
frontend/pages/shopping-lists/_id.vue
View File

@ -58,11 +58,18 @@
</div> </div>
<!-- Reorder Labels --> <!-- Reorder Labels -->
<BaseDialog v-model="reorderLabelsDialog" :icon="$globals.icons.tagArrowUp" :title="$t('shopping-list.reorder-labels')"> <BaseDialog
v-model="reorderLabelsDialog"
:icon="$globals.icons.tagArrowUp"
:title="$t('shopping-list.reorder-labels')"
:submit-icon="$globals.icons.save"
:submit-text="$tc('general.save')"
@submit="saveLabelOrder"
@close="cancelLabelOrder">
<v-card height="fit-content" max-height="70vh" style="overflow-y: auto;"> <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 v-if="localLabels" :value="localLabels" handle=".handle" class="my-2" @input="updateLabelOrder">
<div v-for="(labelSetting, index) in shoppingList.labelSettings" :key="labelSetting.id"> <div v-for="(labelSetting, index) in localLabels" :key="labelSetting.id">
<MultiPurposeLabelSection v-model="shoppingList.labelSettings[index]" use-color /> <MultiPurposeLabelSection v-model="localLabels[index]" use-color />
</div> </div>
</draggable> </draggable>
</v-card> </v-card>
@ -103,7 +110,9 @@
/> />
</div> </div>
<div v-else class="mt-4 d-flex justify-end"> <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"
@click="toggleReorderLabelsDialog">
<template #icon> {{ $globals.icons.tags }} </template> <template #icon> {{ $globals.icons.tags }} </template>
{{ $t('shopping-list.reorder-labels') }} {{ $t('shopping-list.reorder-labels') }}
</BaseButton> </BaseButton>
@ -492,6 +501,8 @@ export default defineComponent({
// Labels, Units, Foods // Labels, Units, Foods
// TODO: Extract to Composable // TODO: Extract to Composable
const localLabels = ref<ShoppingListMultiPurposeLabelOut[]>()
const { labels: allLabels } = useLabelStore(); const { labels: allLabels } = useLabelStore();
const { units: allUnits } = useUnitStore(); const { units: allUnits } = useUnitStore();
const { foods: allFoods } = useFoodStore(); const { foods: allFoods } = useFoodStore();
@ -505,7 +516,10 @@ export default defineComponent({
} }
function toggleReorderLabelsDialog() { function toggleReorderLabelsDialog() {
// stop polling and populate localLabels
loadingCounter.value += 1
reorderLabelsDialog.value = !reorderLabelsDialog.value reorderLabelsDialog.value = !reorderLabelsDialog.value
localLabels.value = shoppingList.value?.labelSettings
} }
async function toggleSettingsDialog() { async function toggleSettingsDialog() {
@ -515,7 +529,7 @@ export default defineComponent({
settingsDialog.value = !settingsDialog.value; settingsDialog.value = !settingsDialog.value;
} }
async function updateLabelOrder(labelSettings: ShoppingListMultiPurposeLabelOut[]) { function updateLabelOrder(labelSettings: ShoppingListMultiPurposeLabelOut[]) {
if (!shoppingList.value) { if (!shoppingList.value) {
return; return;
} }
@ -525,16 +539,31 @@ export default defineComponent({
return labelSetting; return labelSetting;
}); });
// setting this doesn't have any effect on the data since it's refreshed automatically, but it makes the ux feel smoother localLabels.value = labelSettings
shoppingList.value.labelSettings = labelSettings; }
updateListItemOrder();
function cancelLabelOrder() {
loadingCounter.value -= 1
if (!shoppingList.value) {
return;
}
// restore original state
localLabels.value = shoppingList.value.labelSettings
}
async function saveLabelOrder() {
if (!shoppingList.value || !localLabels.value || (localLabels.value === shoppingList.value.labelSettings)) {
return;
}
loadingCounter.value += 1; loadingCounter.value += 1;
const { data } = await userApi.shopping.lists.updateLabelSettings(shoppingList.value.id, labelSettings); const { data } = await userApi.shopping.lists.updateLabelSettings(shoppingList.value.id, localLabels.value);
loadingCounter.value -= 1; loadingCounter.value -= 1;
if (data) { if (data) {
refresh(); // update shoppingList labels using the API response
shoppingList.value.labelSettings = (data as ShoppingListOut).labelSettings;
updateItemsByLabel();
} }
} }
@ -940,7 +969,10 @@ export default defineComponent({
toggleReorderLabelsDialog, toggleReorderLabelsDialog,
settingsDialog, settingsDialog,
toggleSettingsDialog, toggleSettingsDialog,
localLabels,
updateLabelOrder, updateLabelOrder,
cancelLabelOrder,
saveLabelOrder,
saveListItem, saveListItem,
shoppingList, shoppingList,
showChecked, showChecked,