shopping list and import view ux
This commit is contained in:
Kaibu
@ -1,44 +1,158 @@
|
||||
<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">
|
||||
<h5 style="text-align: center">{{ $t('Importing') }}...</h5>
|
||||
<loading-spinner :size="25"></loading-spinner>
|
||||
</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-progress-bar :value="import_info.imported_recipes" :label="`${import_info.imported_recipes}/${import_info.total_recipes}`"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-12" v-if="!import_info.running">
|
||||
<span>{{ $t('Import_finished') }}! </span>
|
||||
<a :href="`${resolveDjangoUrl('view_search') }?keyword=${import_info.keyword.id}`"
|
||||
v-if="import_info.keyword !== null">{{ $t('View_Recipes') }}</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<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>
|
||||
<b-collapse id="collapse-details" class="mt-2">
|
||||
<b-card>
|
||||
<textarea id="id_textarea" ref="output_text" class="form-control"
|
||||
style="height: 50vh"
|
||||
v-html="import_info.msg"
|
||||
disabled></textarea>
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
@ -49,7 +163,7 @@ import {BootstrapVue} from 'bootstrap-vue'
|
||||
|
||||
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";
|
||||
|
||||
@ -58,47 +172,131 @@ import {ApiApiFactory} from "@/utils/openapi/api.ts";
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
export default {
|
||||
name: 'ImportResponseView',
|
||||
mixins: [
|
||||
ResolveUrlMixin,
|
||||
ToastMixin,
|
||||
],
|
||||
components: {
|
||||
LoadingSpinner
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
import_id: window.IMPORT_ID,
|
||||
import_info: undefined,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.refreshData()
|
||||
this.$i18n.locale = window.CUSTOM_LOCALE
|
||||
setInterval(() => {
|
||||
if ((this.import_id !== null) && window.navigator.onLine && this.import_info.running) {
|
||||
name: 'ImportResponseView',
|
||||
mixins: [
|
||||
ResolveUrlMixin,
|
||||
ToastMixin,
|
||||
RandomIconMixin
|
||||
],
|
||||
components: {
|
||||
LoadingSpinner
|
||||
},
|
||||
computed: {
|
||||
imported_recipes: function () {
|
||||
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("--------------------")) {
|
||||
out.error = true
|
||||
}
|
||||
msg.forEach((cur, i) => {
|
||||
let line = cur.trim()
|
||||
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()
|
||||
let el = this.$refs.output_text
|
||||
el.scrollTop = el.scrollHeight;
|
||||
}
|
||||
}, 5000)
|
||||
this.$i18n.locale = window.CUSTOM_LOCALE
|
||||
setInterval(() => {
|
||||
if ((this.import_id !== null) && window.navigator.onLine && this.import_info.running) {
|
||||
this.refreshData()
|
||||
let el = this.$refs.output_text
|
||||
el.scrollTop = el.scrollHeight;
|
||||
}
|
||||
}, 5000)
|
||||
|
||||
},
|
||||
methods: {
|
||||
refreshData: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
},
|
||||
methods: {
|
||||
refreshData: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
|
||||
apiClient.retrieveImportLog(this.import_id).then(result => {
|
||||
this.import_info = result.data
|
||||
apiClient.retrieveImportLog(this.import_id).then(result => {
|
||||
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>
|
||||
|
||||
<style>
|
||||
|
||||
.slide-leave-active,
|
||||
.slide-enter-active {
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.slide-enter {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
.slide-leave-to {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<h2>{{ $t('Import') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<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
|
||||
:title="$t('Import_Supported')"><i
|
||||
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
|
||||
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
|
||||
:title="$t('Export_Supported')"><i
|
||||
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
|
||||
class="fas fa-file-export fa-fw" v-if="!i.export"></i></b-badge>
|
||||
</b-list-group-item>
|
||||
@ -311,13 +305,13 @@
|
||||
<b-badge variant="success" class="ml-1" v-b-tooltip:top
|
||||
:title="$t('Import_Supported')"><i
|
||||
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
|
||||
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
|
||||
:title="$t('Export_Supported')"><i
|
||||
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
|
||||
class="fas fa-file-export fa-fw" v-if="!i.export"></i></b-badge>
|
||||
</b-list-group-item>
|
||||
@ -361,7 +355,7 @@
|
||||
:placeholder="$t('paste_json')" style="font-size: 12px">
|
||||
</b-textarea>
|
||||
</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>
|
||||
{{ $t('Import') }}
|
||||
</b-button>
|
||||
@ -369,16 +363,23 @@
|
||||
</b-tab>
|
||||
<!-- Bookmarklet Tab -->
|
||||
<b-tab v-bind:title="$t('Bookmarklet')">
|
||||
<!-- TODO localize -->
|
||||
Some pages cannot be imported from their URL, the Bookmarklet can be used to import from
|
||||
some of them anyway.<br/>
|
||||
1. Drag the following button to your bookmarks bar <a 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-container>
|
||||
<b-row class="mt-4">
|
||||
<b-col cols="12">
|
||||
<!-- TODO localize -->
|
||||
Some pages cannot be imported from their URL, the Bookmarklet can be used to
|
||||
import from
|
||||
some of them anyway.<br/>
|
||||
1. Drag the following button to your bookmarks bar: <br/> <a
|
||||
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-tabs>
|
||||
@ -446,7 +447,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tab_index: 1,
|
||||
tab_index: 0,
|
||||
collapse_visible: {
|
||||
url: true,
|
||||
options: false,
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
:label="$t('copy_markdown_table')" icon="fab fa-markdown"/>
|
||||
</div>
|
||||
</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'"/>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,7 +35,7 @@
|
||||
<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>
|
||||
</template>
|
||||
<div class="container p-0" id="shoppinglist">
|
||||
<div class="container p-0 p-md-3" id="shoppinglist">
|
||||
<div class="row">
|
||||
<div class="col col-md-12 p-0 p-lg-3">
|
||||
<div role="tablist">
|
||||
@ -52,6 +52,7 @@
|
||||
:description="$t('Amount')"
|
||||
v-model="new_item.amount"
|
||||
style="font-size: 16px; border-radius: 5px !important; border: 1px solid #e8e8e8 !important"
|
||||
ref="amount_input_complex"
|
||||
></b-form-input>
|
||||
</b-col>
|
||||
<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-form-input size="lg" type="text" :placeholder="$t('QuickEntry')"
|
||||
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 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"
|
||||
@click="addItem"/>
|
||||
</b-button>
|
||||
@ -861,7 +863,7 @@ export default {
|
||||
delay: 0,
|
||||
clear: Math.random(),
|
||||
ui: {
|
||||
entry_mode_simple: false,
|
||||
entry_mode_simple: true,
|
||||
selected_supermarket: undefined,
|
||||
},
|
||||
settings: {
|
||||
@ -1019,14 +1021,23 @@ export default {
|
||||
watch: {
|
||||
ui: {
|
||||
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,
|
||||
},
|
||||
entrymode: {
|
||||
handler() {
|
||||
this.$cookies.set(SETTINGS_COOKIE_NAME, {ui: this.ui, settings: {entrymode: this.entrymode}})
|
||||
if (this.entrymode) {
|
||||
document.getElementById('shoppinglist').scrollTop = 0
|
||||
this.$nextTick(function () {
|
||||
this.setFocus()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -1078,13 +1089,23 @@ export default {
|
||||
}
|
||||
this.$nextTick(function () {
|
||||
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
|
||||
console.log(window.CUSTOM_LOCALE)
|
||||
},
|
||||
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
|
||||
addItem: function () {
|
||||
if (this.ui.entry_mode_simple) {
|
||||
@ -1106,6 +1127,7 @@ export default {
|
||||
} else {
|
||||
this.addEntry()
|
||||
}
|
||||
this.setFocus()
|
||||
},
|
||||
addEntry: function (x) {
|
||||
let api = new ApiApiFactory()
|
||||
@ -1113,7 +1135,7 @@ export default {
|
||||
.then((results) => {
|
||||
if (results?.data) {
|
||||
this.items.push(results.data)
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
|
||||
} else {
|
||||
console.log("no data returned")
|
||||
}
|
||||
@ -1121,7 +1143,7 @@ export default {
|
||||
this.clear += 1
|
||||
})
|
||||
.catch((err) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE, err)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
|
||||
})
|
||||
},
|
||||
deleteSupermarket: function (s) {
|
||||
@ -1129,10 +1151,10 @@ export default {
|
||||
api.destroySupermarket(s.id)
|
||||
.then(() => {
|
||||
this.getSupermarkets()
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
|
||||
})
|
||||
.catch((err) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
|
||||
})
|
||||
},
|
||||
deleteCategory: function (c) {
|
||||
@ -1144,10 +1166,10 @@ export default {
|
||||
this.getSupermarkets()
|
||||
this.getShoppingCategories()
|
||||
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) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
|
||||
})
|
||||
},
|
||||
resetFilters: function () {
|
||||
@ -1176,7 +1198,7 @@ export default {
|
||||
promises.push(this.saveThis({id: entry, delay_until: delay_date}, false))
|
||||
})
|
||||
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.delay = this.defaultDelay
|
||||
})
|
||||
@ -1186,10 +1208,10 @@ export default {
|
||||
api.destroyShoppingListRecipe(recipe)
|
||||
.then((x) => {
|
||||
this.items = this.items.filter((x) => x.list_recipe !== recipe)
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
|
||||
})
|
||||
.catch((err) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
|
||||
})
|
||||
},
|
||||
deleteThis: function (item) {
|
||||
@ -1205,14 +1227,14 @@ export default {
|
||||
entries.forEach((x) => {
|
||||
promises.push(
|
||||
api.destroyShoppingListEntry(x).catch((err) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
Promise.all(promises).then((result) => {
|
||||
this.items = this.items.filter((x) => !entries.includes(x.id))
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
|
||||
})
|
||||
},
|
||||
editSupermarket(s) {
|
||||
@ -1261,7 +1283,7 @@ export default {
|
||||
})
|
||||
.catch((err) => {
|
||||
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()
|
||||
api.partialUpdateUserPreference(this.settings.user, this.settings)
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
||||
})
|
||||
.catch((err) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
||||
})
|
||||
},
|
||||
saveThis: function (thisItem, toast = true) {
|
||||
@ -1361,22 +1383,22 @@ export default {
|
||||
.createShoppingListEntry(thisItem)
|
||||
.then((result) => {
|
||||
if (toast) {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE, err)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
|
||||
})
|
||||
} else {
|
||||
return api
|
||||
.partialUpdateShoppingListEntry(thisItem.id, thisItem)
|
||||
.then((result) => {
|
||||
if (toast) {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -1406,7 +1428,7 @@ export default {
|
||||
})
|
||||
.catch((err) => {
|
||||
this.auto_sync_blocked = false
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
||||
})
|
||||
},
|
||||
updateFood: function (food, field) {
|
||||
@ -1419,13 +1441,13 @@ export default {
|
||||
return api
|
||||
.partialUpdateFood(food.id, food)
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
||||
if (food?.numchild > 0) {
|
||||
this.getShoppingList() // if food has children, just get the whole list. probably could be more efficient
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
||||
})
|
||||
},
|
||||
updateServings(e, plan) {
|
||||
@ -1439,26 +1461,26 @@ export default {
|
||||
let api = new ApiApiFactory()
|
||||
api.createSupermarketCategory({name: this.new_category.value})
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
|
||||
this.shopping_categories.push(result.data)
|
||||
this.new_category.value = undefined
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE)
|
||||
})
|
||||
},
|
||||
addSupermarket: function () {
|
||||
let api = new ApiApiFactory()
|
||||
api.createSupermarket({name: this.new_supermarket.value})
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
|
||||
this.supermarkets.push(result.data)
|
||||
this.new_supermarket.value = undefined
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE)
|
||||
})
|
||||
},
|
||||
saveSupermarketCategoryOrder(e) {
|
||||
@ -1484,11 +1506,11 @@ export default {
|
||||
apiClient
|
||||
.destroySupermarketCategoryRelation(e.removed.element.id)
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE)
|
||||
this.supermarkets = temp_supermarkets
|
||||
})
|
||||
}
|
||||
@ -1511,11 +1533,11 @@ export default {
|
||||
.then((updated_supermarket) => {
|
||||
let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id)
|
||||
Vue.set(this.supermarkets, idx, updated_supermarket)
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE)
|
||||
this.supermarkets = temp_supermarkets
|
||||
})
|
||||
}
|
||||
@ -1525,11 +1547,11 @@ export default {
|
||||
.then((updated_supermarket) => {
|
||||
let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id)
|
||||
Vue.set(this.supermarkets, idx, updated_supermarket)
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE)
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE)
|
||||
this.supermarkets = temp_supermarkets
|
||||
})
|
||||
}
|
||||
@ -1646,7 +1668,13 @@ export default {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (max-width: 991.9px) {
|
||||
#shoppinglist {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#shoppinglist {
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
: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>
|
||||
</button>
|
||||
</div>
|
||||
@ -53,7 +53,7 @@
|
||||
class="p-0 mr-0 mr-md-2 p-md-2 text-decoration-none" variant="link">
|
||||
<div class="text-nowrap">
|
||||
<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>
|
||||
</b-button>
|
||||
</b-col>
|
||||
@ -112,7 +112,7 @@
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
: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>
|
||||
</button>
|
||||
@ -453,4 +453,16 @@ export default {
|
||||
.invis-border {
|
||||
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>
|
||||
|
||||
@ -400,5 +400,9 @@
|
||||
"Import_Supported": "Import supported",
|
||||
"Export_Supported": "Export 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."
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user