cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shopping list and import view ux

Browse Source
This commit is contained in:
Kaibu
2022-04-23 14:47:10 +02:00
parent 161ae9879a
commit 8149192455
5 changed files with 375 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
vue/src/apps/ImportResponseView/ImportResponseView.vue
View File

@ -1,44 +1,158 @@
<template> <template>
<div id="app"> <div id="app">
<template v-if="import_info !== undefined">
<br/> <template v-if="import_info.running">
<h5 style="text-align: center">{{ $t('Importing') }}...</h5>
<template v-if="import_info !== undefined"> <b-progress :max="import_info.total_recipes" height="2rem">
<b-progress-bar :value="import_info.imported_recipes"
:label="`${import_info.imported_recipes}/${import_info.total_recipes}`"></b-progress-bar>
</b-progress>
<template v-if="import_info.running"> <loading-spinner :size="25"></loading-spinner>
<h5 style="text-align: center">{{ $t('Importing') }}...</h5> </template>
<b-row>
<b-col>
<b-card no-body>
<b-card-header>
<h4>{{ $t('Information') }}
<b-badge variant="success" class="float-right" v-if="!import_info.running">{{
$t('Import_finished')
}}!
</b-badge>
<b-badge variant="primary" v-else class="float-right">
{{ $t('Import_running') }}
<b-spinner small class="d-inline-block"></b-spinner>
</b-badge>
</h4>
<b-alert variant="danger" show v-if="imported_recipes.error">{{
$t('Import_Error')
}}
</b-alert>
<b-alert variant="warning" show v-if="imported_recipes.duplicates_total > 0">{{
$t("Import_Result_Info", {
imported: imported_recipes.imported_total,
total: imported_recipes.recipes.length
})
}}
</b-alert>
<b-alert variant="success" show v-if="imported_recipes.duplicates_total === 0">{{
$t("Import_Result_Info", {
imported: imported_recipes.imported_total,
total: imported_recipes.recipes.length
})
}}
</b-alert>
<b-row>
<b-col cols="12" class="text-center">
<h5><a
:href="`${resolveDjangoUrl('view_search') }?keyword=${import_info.keyword.id}`"
v-if="import_info.keyword !== null">{{ $t('View_Recipes') }}</a></h5>
</b-col>
</b-row>
</b-card-header>
<b-card-body>
<transition-group name="slide" tag="div" class="row">
<b-media v-for="(recipe, index) in imported_recipes.recipes"
v-bind:key="recipe.id"
class="p-3 mt-2 col-md-6 col-12 shadow-sm" v-hover>
<template #aside>
<b-avatar target="_blank"
:href="resolveDjangoUrl('view_recipe', recipe.id)"
v-if="recipe.imported !== undefined && recipe.imported"
class="mr-3"><i :class="recipe.icon"></i></b-avatar>
<b-avatar v-else class="mr-3"><i :class="recipe.icon"></i></b-avatar>
</template>
<h5 class="mt-0 mb-1">
<a :href="resolveDjangoUrl('view_recipe', recipe.id)"
v-if="recipe.imported !== undefined && recipe.imported"
target="_blank">{{
recipe.recipe_name
}}</a> <span v-else>{{ recipe.recipe_name }}</span>
<b-badge class="float-right text-white">{{ index + 1 }}</b-badge>
</h5>
<p class="mb-0">
<b-badge v-if="recipe.imported !== undefined && recipe.imported"
variant="success">{{ $t('Imported') }}
</b-badge>
<b-badge v-if="recipe.imported !== undefined && !recipe.imported"
variant="warning">{{ $t('Duplicate') }}
</b-badge>
<b-badge v-if="recipe.imported === undefined">
<b-spinner small class="d-inline-block"></b-spinner>
</b-badge>
</p>
</b-media>
</transition-group>
</b-card-body>
<b-card-footer>
<h4>{{ $t('Information') }}
<b-badge variant="success" class="float-right" v-if="!import_info.running">{{
$t('Import_finished')
}}!
</b-badge>
<b-badge variant="primary" v-else class="float-right">
{{ $t('Import_running') }}
<b-spinner small class="d-inline-block"></b-spinner>
</b-badge>
</h4>
<b-alert variant="danger" show v-if="imported_recipes.error">{{
$t('Import_Error')
}}
</b-alert>
<b-alert variant="warning" show v-if="imported_recipes.duplicates_total > 0">{{
$t("Import_Result_Info", {
imported: imported_recipes.imported_total,
total: imported_recipes.recipes.length
})
}}
</b-alert>
<b-alert variant="success" show v-if="imported_recipes.duplicates_total === 0">{{
$t("Import_Result_Info", {
imported: imported_recipes.imported_total,
total: imported_recipes.recipes.length
})
}}
</b-alert>
<b-row>
<b-col cols="12" class="text-center">
<h5><a
:href="`${resolveDjangoUrl('view_search') }?keyword=${import_info.keyword.id}`"
v-if="import_info.keyword !== null">{{ $t('View_Recipes') }}</a></h5>
</b-col>
</b-row>
</b-card-footer>
</b-card>
</b-col>
</b-row>
<b-progress :max="import_info.total_recipes"> <b-row>
<b-progress-bar :value="import_info.imported_recipes" :label="`${import_info.imported_recipes}/${import_info.total_recipes}`"></b-progress-bar> <b-col cols="12">
</b-progress> <b-card no-body>
<b-card-header>
<h4>{{ $t('Details') }}
<b-button v-b-toggle.collapse-details variant="primary" class="float-right">
{{ $t('Toggle') }}
</b-button>
</h4>
</b-card-header>
<b-card-body>
<loading-spinner :size="25"></loading-spinner> <b-collapse id="collapse-details" class="mt-2">
</template> <b-card>
<textarea id="id_textarea" ref="output_text" class="form-control"
<div class="row"> style="height: 50vh"
<div class="col col-md-12" v-if="!import_info.running"> v-html="import_info.msg"
<span>{{ $t('Import_finished') }}! </span> disabled></textarea>
<a :href="`${resolveDjangoUrl('view_search') }?keyword=${import_info.keyword.id}`" </b-card>
v-if="import_info.keyword !== null">{{ $t('View_Recipes') }}</a> </b-collapse>
</b-card-body>
</div> </b-card>
</div> </b-col>
</b-row>
<br/> </template>
</div>
<div class="row">
<div class="col col-md-12">
<label for="id_textarea">{{ $t('Information') }}</label>
<textarea id="id_textarea" ref="output_text" class="form-control" style="height: 50vh"
v-html="import_info.msg"
disabled></textarea>
</div>
</div>
<br/>
<br/>
</template>
</div>
</template> </template>
@ -49,7 +163,7 @@ import {BootstrapVue} from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css' import 'bootstrap-vue/dist/bootstrap-vue.css'
import {ResolveUrlMixin, ToastMixin} from "@/utils/utils"; import {ResolveUrlMixin, ToastMixin, RandomIconMixin} from "@/utils/utils";
import LoadingSpinner from "@/components/LoadingSpinner"; import LoadingSpinner from "@/components/LoadingSpinner";
@ -58,47 +172,131 @@ import {ApiApiFactory} from "@/utils/openapi/api.ts";
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
export default { export default {
name: 'ImportResponseView', name: 'ImportResponseView',
mixins: [ mixins: [
ResolveUrlMixin, ResolveUrlMixin,
ToastMixin, ToastMixin,
], RandomIconMixin
components: { ],
LoadingSpinner components: {
}, LoadingSpinner
data() { },
return { computed: {
import_id: window.IMPORT_ID, imported_recipes: function () {
import_info: undefined, let msg = this.import_info.msg.split(/\r?\n/)
} let out = {recipes: [], imported_total: 0, duplicates_total: 0, info: '', error: false}
}, if (this.import_info.msg.includes("--------------------")) {
mounted() { out.error = true
this.refreshData() }
this.$i18n.locale = window.CUSTOM_LOCALE msg.forEach((cur, i) => {
setInterval(() => { let line = cur.trim()
if ((this.import_id !== null) && window.navigator.onLine && this.import_info.running) { if (line === '') {
return
}
if (this.isNumber(line.charAt(0))) {
let recipe = line.split(/-(.*)/s)
out.recipes.push({
id: recipe[0].trim(),
recipe_name: recipe[1].trim(),
icon: this.getRandomFoodIcon()
})
} else {
if (i === msg.length - 4) {
out.info = line
}
if (i === msg.length - 2) {
out.imported_total = parseInt(line.match(/\d+/)[0])
}
}
if (out.info !== '') {
let items = out.info.split(/:(.*)/s)[1]
items = items.split(",")
out.duplicates_total = items.length
out.recipes.forEach((recipe) => {
recipe.imported = true
items.forEach((item) => {
if (recipe.recipe_name === item.trim()) {
recipe.imported = false
}
})
})
} else {
if (out.imported_total > 0) {
out.recipes.forEach((recipe) => {
recipe.imported = true
})
}
}
})
return out
}
},
data() {
return {
import_id: window.IMPORT_ID,
import_info: undefined,
}
},
mounted() {
this.refreshData() this.refreshData()
let el = this.$refs.output_text this.$i18n.locale = window.CUSTOM_LOCALE
el.scrollTop = el.scrollHeight; setInterval(() => {
} if ((this.import_id !== null) && window.navigator.onLine && this.import_info.running) {
}, 5000) this.refreshData()
let el = this.$refs.output_text
el.scrollTop = el.scrollHeight;
}
}, 5000)
}, },
methods: { methods: {
refreshData: function () { refreshData: function () {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient.retrieveImportLog(this.import_id).then(result => { apiClient.retrieveImportLog(this.import_id).then(result => {
this.import_info = result.data this.import_info = result.data
})
},
isNumber: function (char) {
if (typeof char !== 'string') {
return false;
}
}) if (char.trim() === '') {
} return false;
} }
return !isNaN(char);
}
}, directives: {
hover: {
inserted: function (el) {
el.addEventListener("mouseenter", () => {
el.classList.add("shadow")
})
el.addEventListener("mouseleave", () => {
el.classList.remove("shadow")
})
},
},
},
} }
</script> </script>
<style> <style>
.slide-leave-active,
.slide-enter-active {
transition: 1s;
}
.slide-enter {
transform: translate(100%, 0);
}
.slide-leave-to {
transform: translate(-100%, 0);
}
</style> </style>

43
vue/src/apps/ImportView/ImportView.vue
View File

@ -1,12 +1,6 @@
<template> <template>
<div id="app"> <div id="app">
<div> <div>
<div class="row">
<div class="col col-md-12">
<h2>{{ $t('Import') }}</h2>
</div>
</div>
<div class="row"> <div class="row">
<div class="col col-md-12"> <div class="col col-md-12">
<b-tabs content-class="mt-3" v-model="tab_index"> <b-tabs content-class="mt-3" v-model="tab_index">
@ -282,13 +276,13 @@
<b-badge variant="success" class="ml-1" v-b-tooltip:top <b-badge variant="success" class="ml-1" v-b-tooltip:top
:title="$t('Import_Supported')"><i :title="$t('Import_Supported')"><i
class="fas fa-file-import fa-fw" v-if="i.import"></i></b-badge> class="fas fa-file-import fa-fw" v-if="i.import"></i></b-badge>
<b-badge variant="warning" class="ml-1" v-b-tooltip:top <b-badge variant="warning" class="ml-1 text-muted" v-b-tooltip:top
:title="$t('Import_Not_Yet_Supported')"><i :title="$t('Import_Not_Yet_Supported')"><i
class="fas fa-file-import fa-fw" v-if="!i.import"></i></b-badge> class="fas fa-file-import fa-fw" v-if="!i.import"></i></b-badge>
<b-badge variant="success" class="ml-1" v-b-tooltip:top <b-badge variant="success" class="ml-1" v-b-tooltip:top
:title="$t('Export_Supported')"><i :title="$t('Export_Supported')"><i
class="fas fa-file-export fa-fw" v-if="i.export"></i></b-badge> class="fas fa-file-export fa-fw" v-if="i.export"></i></b-badge>
<b-badge variant="warning" class="ml-1" v-b-tooltip:top <b-badge variant="warning" class="ml-1 text-muted" v-b-tooltip:top
:title="$t('Export_Not_Yet_Supported')"><i :title="$t('Export_Not_Yet_Supported')"><i
class="fas fa-file-export fa-fw" v-if="!i.export"></i></b-badge> class="fas fa-file-export fa-fw" v-if="!i.export"></i></b-badge>
</b-list-group-item> </b-list-group-item>
@ -311,13 +305,13 @@
<b-badge variant="success" class="ml-1" v-b-tooltip:top <b-badge variant="success" class="ml-1" v-b-tooltip:top
:title="$t('Import_Supported')"><i :title="$t('Import_Supported')"><i
class="fas fa-file-import fa-fw" v-if="i.import"></i></b-badge> class="fas fa-file-import fa-fw" v-if="i.import"></i></b-badge>
<b-badge variant="warning" class="ml-1" v-b-tooltip:top <b-badge variant="warning" class="ml-1 text-muted" v-b-tooltip:top
:title="$t('Import_Not_Yet_Supported')"><i :title="$t('Import_Not_Yet_Supported')"><i
class="fas fa-file-import fa-fw" v-if="!i.import"></i></b-badge> class="fas fa-file-import fa-fw" v-if="!i.import"></i></b-badge>
<b-badge variant="success" class="ml-1" v-b-tooltip:top <b-badge variant="success" class="ml-1" v-b-tooltip:top
:title="$t('Export_Supported')"><i :title="$t('Export_Supported')"><i
class="fas fa-file-export fa-fw" v-if="i.export"></i></b-badge> class="fas fa-file-export fa-fw" v-if="i.export"></i></b-badge>
<b-badge variant="warning" class="ml-1" v-b-tooltip:top <b-badge variant="warning" class="ml-1 text-muted" v-b-tooltip:top
:title="$t('Export_Not_Yet_Supported')"><i :title="$t('Export_Not_Yet_Supported')"><i
class="fas fa-file-export fa-fw" v-if="!i.export"></i></b-badge> class="fas fa-file-export fa-fw" v-if="!i.export"></i></b-badge>
</b-list-group-item> </b-list-group-item>
@ -361,7 +355,7 @@
:placeholder="$t('paste_json')" style="font-size: 12px"> :placeholder="$t('paste_json')" style="font-size: 12px">
</b-textarea> </b-textarea>
</div> </div>
<b-button @click="loadRecipe('',false, undefined)" variant="primary"><i <b-button class="mt-2" @click="loadRecipe('',false, undefined)" variant="primary"><i
class="fas fa-code"></i> class="fas fa-code"></i>
{{ $t('Import') }} {{ $t('Import') }}
</b-button> </b-button>
@ -369,16 +363,23 @@
</b-tab> </b-tab>
<!-- Bookmarklet Tab --> <!-- Bookmarklet Tab -->
<b-tab v-bind:title="$t('Bookmarklet')"> <b-tab v-bind:title="$t('Bookmarklet')">
<!-- TODO localize --> <b-container>
Some pages cannot be imported from their URL, the Bookmarklet can be used to import from <b-row class="mt-4">
some of them anyway.<br/> <b-col cols="12">
1. Drag the following button to your bookmarks bar <a class="btn btn-outline-info btn-sm" <!-- TODO localize -->
:href="makeBookmarklet()">Import into Some pages cannot be imported from their URL, the Bookmarklet can be used to
Tandoor</a> <br/> import from
some of them anyway.<br/>
2. Open the page you want to import from <br/> 1. Drag the following button to your bookmarks bar: <br/> <a
3. Click on the bookmark to perform the import <br/> class="btn btn-outline-info btn-sm"
:href="makeBookmarklet()">Import into
Tandoor</a> <br/>
2. Open the page you want to import from <br/>
3. Click on the bookmark to perform the import <br/>
</b-col>
</b-row>
</b-container>
</b-tab> </b-tab>
</b-tabs> </b-tabs>
@ -446,7 +447,7 @@ export default {
}, },
data() { data() {
return { return {
tab_index: 1, tab_index: 0,
collapse_visible: { collapse_visible: {
url: true, url: true,
options: false, options: false,

106
vue/src/apps/ShoppingListView/ShoppingListView.vue
View File

@ -22,7 +22,7 @@
:label="$t('copy_markdown_table')" icon="fab fa-markdown"/> :label="$t('copy_markdown_table')" icon="fab fa-markdown"/>
</div> </div>
</b-button> </b-button>
<i id="id_filters_button" class="fas fa-filter fa-fw mt-1" style="font-size: 16px" <i id="id_filters_button" class="fas fa-filter fa-fw mt-1" style="font-size: 16px; cursor: pointer"
:class="filterApplied ? 'text-danger' : 'text-primary'"/> :class="filterApplied ? 'text-danger' : 'text-primary'"/>
</div> </div>
</div> </div>
@ -35,7 +35,7 @@
<i v-if="!loading" class="fas fa-shopping-cart fa-fw d-inline-block d-md-none"></i> <i v-if="!loading" class="fas fa-shopping-cart fa-fw d-inline-block d-md-none"></i>
<span class="d-none d-md-block">{{ $t('Shopping_list') }}</span> <span class="d-none d-md-block">{{ $t('Shopping_list') }}</span>
</template> </template>
<div class="container p-0" id="shoppinglist"> <div class="container p-0 p-md-3" id="shoppinglist">
<div class="row"> <div class="row">
<div class="col col-md-12 p-0 p-lg-3"> <div class="col col-md-12 p-0 p-lg-3">
<div role="tablist"> <div role="tablist">
@ -52,6 +52,7 @@
:description="$t('Amount')" :description="$t('Amount')"
v-model="new_item.amount" v-model="new_item.amount"
style="font-size: 16px; border-radius: 5px !important; border: 1px solid #e8e8e8 !important" style="font-size: 16px; border-radius: 5px !important; border: 1px solid #e8e8e8 !important"
ref="amount_input_complex"
></b-form-input> ></b-form-input>
</b-col> </b-col>
<b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1"> <b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1">
@ -67,10 +68,11 @@
<b-col cols="12" md="11" v-if="ui.entry_mode_simple" class="mt-1"> <b-col cols="12" md="11" v-if="ui.entry_mode_simple" class="mt-1">
<b-form-input size="lg" type="text" :placeholder="$t('QuickEntry')" <b-form-input size="lg" type="text" :placeholder="$t('QuickEntry')"
v-model="new_item.ingredient" v-model="new_item.ingredient"
@keyup.enter="addItem"></b-form-input> @keyup.enter="addItem"
ref="amount_input_simple"></b-form-input>
</b-col> </b-col>
<b-col cols="12" md="1" class="d-none d-md-block mt-1"> <b-col cols="12" md="1" class="d-none d-md-block mt-1">
<b-button variant="link" class="px-0"> <b-button variant="link" class="px-0" type="submit">
<i class="btn fas fa-cart-plus fa-lg px-0 text-success" <i class="btn fas fa-cart-plus fa-lg px-0 text-success"
@click="addItem"/> @click="addItem"/>
</b-button> </b-button>
@ -861,7 +863,7 @@ export default {
delay: 0, delay: 0,
clear: Math.random(), clear: Math.random(),
ui: { ui: {
entry_mode_simple: false, entry_mode_simple: true,
selected_supermarket: undefined, selected_supermarket: undefined,
}, },
settings: { settings: {
@ -1019,14 +1021,23 @@ export default {
watch: { watch: {
ui: { ui: {
handler() { handler() {
this.$cookies.set(SETTINGS_COOKIE_NAME, this.ui) this.$cookies.set(SETTINGS_COOKIE_NAME, {ui: this.ui, settings: {entrymode: this.entrymode}})
if (this.entrymode) {
this.$nextTick(function () {
this.setFocus()
})
}
}, },
deep: true, deep: true,
}, },
entrymode: { entrymode: {
handler() { handler() {
this.$cookies.set(SETTINGS_COOKIE_NAME, {ui: this.ui, settings: {entrymode: this.entrymode}})
if (this.entrymode) { if (this.entrymode) {
document.getElementById('shoppinglist').scrollTop = 0 document.getElementById('shoppinglist').scrollTop = 0
this.$nextTick(function () {
this.setFocus()
})
} }
} }
}, },
@ -1078,13 +1089,23 @@ export default {
} }
this.$nextTick(function () { this.$nextTick(function () {
if (this.$cookies.isKey(SETTINGS_COOKIE_NAME)) { if (this.$cookies.isKey(SETTINGS_COOKIE_NAME)) {
this.ui = Object.assign({}, this.ui, this.$cookies.get(SETTINGS_COOKIE_NAME)) this.ui = Object.assign({}, this.ui, this.$cookies.get(SETTINGS_COOKIE_NAME).ui)
this.entrymode = this.$cookies.get(SETTINGS_COOKIE_NAME).settings.entrymode
} }
}) })
this.$i18n.locale = window.CUSTOM_LOCALE this.$i18n.locale = window.CUSTOM_LOCALE
console.log(window.CUSTOM_LOCALE) console.log(window.CUSTOM_LOCALE)
}, },
methods: { methods: {
setFocus() {
if (this.ui.entry_mode_simple) {
this.$refs['amount_input_simple'].focus()
} else {
if (this.$refs['amount_input_complex']) {
this.$refs['amount_input_complex'].focus()
}
}
},
// this.genericAPI inherited from ApiMixin // this.genericAPI inherited from ApiMixin
addItem: function () { addItem: function () {
if (this.ui.entry_mode_simple) { if (this.ui.entry_mode_simple) {
@ -1106,6 +1127,7 @@ export default {
} else { } else {
this.addEntry() this.addEntry()
} }
this.setFocus()
}, },
addEntry: function (x) { addEntry: function (x) {
let api = new ApiApiFactory() let api = new ApiApiFactory()
@ -1113,7 +1135,7 @@ export default {
.then((results) => { .then((results) => {
if (results?.data) { if (results?.data) {
this.items.push(results.data) this.items.push(results.data)
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
} else { } else {
console.log("no data returned") console.log("no data returned")
} }
@ -1121,7 +1143,7 @@ export default {
this.clear += 1 this.clear += 1
}) })
.catch((err) => { .catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
}) })
}, },
deleteSupermarket: function (s) { deleteSupermarket: function (s) {
@ -1129,10 +1151,10 @@ export default {
api.destroySupermarket(s.id) api.destroySupermarket(s.id)
.then(() => { .then(() => {
this.getSupermarkets() this.getSupermarkets()
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
}) })
.catch((err) => { .catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
}) })
}, },
deleteCategory: function (c) { deleteCategory: function (c) {
@ -1144,10 +1166,10 @@ export default {
this.getSupermarkets() this.getSupermarkets()
this.getShoppingCategories() this.getShoppingCategories()
this.new_supermarket.value.category_to_supermarket = this.new_supermarket.value.category_to_supermarket.filter((x) => x.category.id != c_id) this.new_supermarket.value.category_to_supermarket = this.new_supermarket.value.category_to_supermarket.filter((x) => x.category.id != c_id)
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
}) })
.catch((err) => { .catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
}) })
}, },
resetFilters: function () { resetFilters: function () {
@ -1176,7 +1198,7 @@ export default {
promises.push(this.saveThis({id: entry, delay_until: delay_date}, false)) promises.push(this.saveThis({id: entry, delay_until: delay_date}, false))
}) })
Promise.all(promises).then(() => { Promise.all(promises).then(() => {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
this.items = this.items.filter((x) => !entries.includes(x.id)) this.items = this.items.filter((x) => !entries.includes(x.id))
this.delay = this.defaultDelay this.delay = this.defaultDelay
}) })
@ -1186,10 +1208,10 @@ export default {
api.destroyShoppingListRecipe(recipe) api.destroyShoppingListRecipe(recipe)
.then((x) => { .then((x) => {
this.items = this.items.filter((x) => x.list_recipe !== recipe) this.items = this.items.filter((x) => x.list_recipe !== recipe)
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
}) })
.catch((err) => { .catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
}) })
}, },
deleteThis: function (item) { deleteThis: function (item) {
@ -1205,14 +1227,14 @@ export default {
entries.forEach((x) => { entries.forEach((x) => {
promises.push( promises.push(
api.destroyShoppingListEntry(x).catch((err) => { api.destroyShoppingListEntry(x).catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
}) })
) )
}) })
Promise.all(promises).then((result) => { Promise.all(promises).then((result) => {
this.items = this.items.filter((x) => !entries.includes(x.id)) this.items = this.items.filter((x) => !entries.includes(x.id))
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
}) })
}, },
editSupermarket(s) { editSupermarket(s) {
@ -1261,7 +1283,7 @@ export default {
}) })
.catch((err) => { .catch((err) => {
if (!autosync) { if (!autosync) {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_FETCH, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
} }
}) })
}, },
@ -1347,10 +1369,10 @@ export default {
let api = ApiApiFactory() let api = ApiApiFactory()
api.partialUpdateUserPreference(this.settings.user, this.settings) api.partialUpdateUserPreference(this.settings.user, this.settings)
.then((result) => { .then((result) => {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}) })
.catch((err) => { .catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
}) })
}, },
saveThis: function (thisItem, toast = true) { saveThis: function (thisItem, toast = true) {
@ -1361,22 +1383,22 @@ export default {
.createShoppingListEntry(thisItem) .createShoppingListEntry(thisItem)
.then((result) => { .then((result) => {
if (toast) { if (toast) {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
} }
}) })
.catch((err) => { .catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
}) })
} else { } else {
return api return api
.partialUpdateShoppingListEntry(thisItem.id, thisItem) .partialUpdateShoppingListEntry(thisItem.id, thisItem)
.then((result) => { .then((result) => {
if (toast) { if (toast) {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
} }
}) })
.catch((err) => { .catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
}) })
} }
}, },
@ -1406,7 +1428,7 @@ export default {
}) })
.catch((err) => { .catch((err) => {
this.auto_sync_blocked = false this.auto_sync_blocked = false
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
}) })
}, },
updateFood: function (food, field) { updateFood: function (food, field) {
@ -1419,13 +1441,13 @@ export default {
return api return api
.partialUpdateFood(food.id, food) .partialUpdateFood(food.id, food)
.then((result) => { .then((result) => {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
if (food?.numchild > 0) { if (food?.numchild > 0) {
this.getShoppingList() // if food has children, just get the whole list. probably could be more efficient this.getShoppingList() // if food has children, just get the whole list. probably could be more efficient
} }
}) })
.catch((err) => { .catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
}) })
}, },
updateServings(e, plan) { updateServings(e, plan) {
@ -1439,26 +1461,26 @@ export default {
let api = new ApiApiFactory() let api = new ApiApiFactory()
api.createSupermarketCategory({name: this.new_category.value}) api.createSupermarketCategory({name: this.new_category.value})
.then((result) => { .then((result) => {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
this.shopping_categories.push(result.data) this.shopping_categories.push(result.data)
this.new_category.value = undefined this.new_category.value = undefined
}) })
.catch((err) => { .catch((err) => {
console.log(err, Object.keys(err)) console.log(err, Object.keys(err))
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE)
}) })
}, },
addSupermarket: function () { addSupermarket: function () {
let api = new ApiApiFactory() let api = new ApiApiFactory()
api.createSupermarket({name: this.new_supermarket.value}) api.createSupermarket({name: this.new_supermarket.value})
.then((result) => { .then((result) => {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
this.supermarkets.push(result.data) this.supermarkets.push(result.data)
this.new_supermarket.value = undefined this.new_supermarket.value = undefined
}) })
.catch((err) => { .catch((err) => {
console.log(err, Object.keys(err)) console.log(err, Object.keys(err))
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE)
}) })
}, },
saveSupermarketCategoryOrder(e) { saveSupermarketCategoryOrder(e) {
@ -1484,11 +1506,11 @@ export default {
apiClient apiClient
.destroySupermarketCategoryRelation(e.removed.element.id) .destroySupermarketCategoryRelation(e.removed.element.id)
.then((result) => { .then((result) => {
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}) })
.catch((err) => { .catch((err) => {
console.log(err, Object.keys(err)) console.log(err, Object.keys(err))
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE)
this.supermarkets = temp_supermarkets this.supermarkets = temp_supermarkets
}) })
} }
@ -1511,11 +1533,11 @@ export default {
.then((updated_supermarket) => { .then((updated_supermarket) => {
let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id) let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id)
Vue.set(this.supermarkets, idx, updated_supermarket) Vue.set(this.supermarkets, idx, updated_supermarket)
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}) })
.catch((err) => { .catch((err) => {
console.log(err, Object.keys(err)) console.log(err, Object.keys(err))
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE)
this.supermarkets = temp_supermarkets this.supermarkets = temp_supermarkets
}) })
} }
@ -1525,11 +1547,11 @@ export default {
.then((updated_supermarket) => { .then((updated_supermarket) => {
let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id) let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id)
Vue.set(this.supermarkets, idx, updated_supermarket) Vue.set(this.supermarkets, idx, updated_supermarket)
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}) })
.catch((err) => { .catch((err) => {
console.log(err, Object.keys(err)) console.log(err, Object.keys(err))
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE)
this.supermarkets = temp_supermarkets this.supermarkets = temp_supermarkets
}) })
} }
@ -1646,7 +1668,13 @@ export default {
padding-left: 5px; padding-left: 5px;
} }
@media (min-width: 768px) { @media (max-width: 991.9px) {
#shoppinglist {
max-width: none;
}
}
@media (min-width: 992px) {
#shoppinglist { #shoppinglist {
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;

18
vue/src/components/ShoppingLineItem.vue
View File

@ -20,7 +20,7 @@
aria-expanded="false" aria-expanded="false"
type="button" type="button"
:class="settings.left_handed ? 'dropdown-spacing' : ''" :class="settings.left_handed ? 'dropdown-spacing' : ''"
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-0 pl-1 dropdown-toggle-no-caret"> class="btn dropdown-toggle btn-link text-decoration-none text-body pr-0 pl-1 pr-md-3 pl-md-3 dropdown-toggle-no-caret">
<i class="fas fa-ellipsis-v"></i> <i class="fas fa-ellipsis-v"></i>
</button> </button>
</div> </div>
@ -53,7 +53,7 @@
class="p-0 mr-0 mr-md-2 p-md-2 text-decoration-none" variant="link"> class="p-0 mr-0 mr-md-2 p-md-2 text-decoration-none" variant="link">
<div class="text-nowrap"> <div class="text-nowrap">
<i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i> <i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
<span class="d-none d-md-inline-block">{{ $t("Details") }}</span> <span class="d-none d-md-inline-block"><span class="ml-2">{{ $t("Details") }}</span></span>
</div> </div>
</b-button> </b-button>
</b-col> </b-col>
@ -112,7 +112,7 @@
aria-expanded="false" aria-expanded="false"
type="button" type="button"
:class="settings.left_handed ? 'dropdown-spacing' : ''" :class="settings.left_handed ? 'dropdown-spacing' : ''"
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret" class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 pr-md-3 pl-md-3 dropdown-toggle-no-caret"
> >
<i class="fas fa-ellipsis-v fa-lg"></i> <i class="fas fa-ellipsis-v fa-lg"></i>
</button> </button>
@ -453,4 +453,16 @@ export default {
.invis-border { .invis-border {
border: 1px solid transparent; border: 1px solid transparent;
} }
@media (min-width: 992px) {
.fa-ellipsis-v {
font-size: 20px;
}
}
@media (min-width: 576px) {
.fa-ellipsis-v {
font-size: 16px;
}
}
</style> </style>

6
vue/src/locales/en.json
View File

@ -400,5 +400,9 @@
"Import_Supported": "Import supported", "Import_Supported": "Import supported",
"Export_Supported": "Export supported", "Export_Supported": "Export supported",
"Import_Not_Yet_Supported": "Import not yet supported", "Import_Not_Yet_Supported": "Import not yet supported",
"Export_Not_Yet_Supported": "Export not yet supported" "Export_Not_Yet_Supported": "Export not yet supported",
"Import_Result_Info": "{imported} of {total} recipes were imported",
"Recipes_In_Import": "Recipes in your import file",
"Toggle": "Toggle",
"Import_Error": "An Error occurred during your import. Please expand the Details at the bottom of the page to view it."
} }