mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-06 14:48:02 -05:00
export recipes from saved filter
This commit is contained in:
smilerz
@@ -1,174 +1,174 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="app">
|
||||
<h2>{{ $t("Export") }}</h2>
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<br />
|
||||
<!-- TODO get option dynamicaly -->
|
||||
<select class="form-control" v-model="recipe_app">
|
||||
<option value="DEFAULT">Default</option>
|
||||
<option value="SAFFRON">Saffron</option>
|
||||
<option value="RECIPESAGE">Recipe Sage</option>
|
||||
<option value="PDF">PDF (experimental)</option>
|
||||
</select>
|
||||
|
||||
<h2>{{ $t('Export') }}</h2>
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<br />
|
||||
<b-form-checkbox v-model="export_all" @change="disabled_multiselect = $event" name="check-button" switch style="margin-top: 1vh">
|
||||
{{ $t("All recipes") }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<br/>
|
||||
<!-- TODO get option dynamicaly -->
|
||||
<select class="form-control" v-model="recipe_app">
|
||||
<option value="DEFAULT">Default</option>
|
||||
<option value="SAFFRON">Saffron</option>
|
||||
<option value="RECIPESAGE">Recipe Sage</option>
|
||||
<option value="PDF">PDF (experimental)</option>
|
||||
</select>
|
||||
<multiselect
|
||||
:searchable="true"
|
||||
:disabled="disabled_multiselect"
|
||||
v-model="recipe_list"
|
||||
:options="recipes"
|
||||
:close-on-select="false"
|
||||
:clear-on-select="true"
|
||||
:hide-selected="true"
|
||||
:preserve-search="true"
|
||||
placeholder="Select Recipes"
|
||||
:taggable="false"
|
||||
label="name"
|
||||
track-by="id"
|
||||
id="id_recipes"
|
||||
:multiple="true"
|
||||
:loading="recipes_loading"
|
||||
@search-change="searchRecipes"
|
||||
>
|
||||
</multiselect>
|
||||
<generic-multiselect
|
||||
@change="filter = $event.val"
|
||||
:model="Models.CUSTOM_FILTER"
|
||||
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
|
||||
:placeholder="$t('Custom Filter')"
|
||||
:multiple="false"
|
||||
:limit="50"
|
||||
/>
|
||||
|
||||
<br/>
|
||||
<b-form-checkbox v-model="export_all" @change="disabled_multiselect=$event" name="check-button" switch style="margin-top: 1vh">
|
||||
{{ $t('All recipes') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<multiselect
|
||||
:searchable="true"
|
||||
:disabled="disabled_multiselect"
|
||||
v-model="recipe_list"
|
||||
:options="recipes"
|
||||
:close-on-select="false"
|
||||
:clear-on-select="true"
|
||||
:hide-selected="true"
|
||||
:preserve-search="true"
|
||||
placeholder="Select Recipes"
|
||||
:taggable="false"
|
||||
label="name"
|
||||
track-by="id"
|
||||
id="id_recipes"
|
||||
:multiple="true"
|
||||
:loading="recipes_loading"
|
||||
@search-change="searchRecipes">
|
||||
</multiselect>
|
||||
|
||||
<br/>
|
||||
<button @click="exportRecipe()" class="btn btn-primary shadow-none"><i class="fas fa-file-export"></i> {{ $t('Export') }}
|
||||
</button>
|
||||
<br />
|
||||
<button @click="exportRecipe()" class="btn btn-primary shadow-none"><i class="fas fa-file-export"></i> {{ $t("Export") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import {BootstrapVue} from 'bootstrap-vue'
|
||||
import Vue from "vue"
|
||||
import { BootstrapVue } from "bootstrap-vue"
|
||||
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
import "bootstrap-vue/dist/bootstrap-vue.css"
|
||||
|
||||
import LoadingSpinner from "@/components/LoadingSpinner"
|
||||
|
||||
import LoadingSpinner from "@/components/LoadingSpinner";
|
||||
|
||||
import {StandardToasts, makeToast, resolveDjangoUrl} from "@/utils/utils";
|
||||
import Multiselect from "vue-multiselect";
|
||||
import {ApiApiFactory} from "@/utils/openapi/api.ts";
|
||||
import axios from "axios";
|
||||
|
||||
import { StandardToasts, makeToast, resolveDjangoUrl, ApiMixin } from "@/utils/utils"
|
||||
import Multiselect from "vue-multiselect"
|
||||
import GenericMultiselect from "@/components/GenericMultiselect"
|
||||
import { ApiApiFactory } from "@/utils/openapi/api.ts"
|
||||
import axios from "axios"
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
|
||||
export default {
|
||||
name: 'ExportView',
|
||||
/*mixins: [
|
||||
name: "ExportView",
|
||||
/*mixins: [
|
||||
ResolveUrlMixin,
|
||||
ToastMixin,
|
||||
],*/
|
||||
components: {Multiselect},
|
||||
data() {
|
||||
return {
|
||||
export_id: window.EXPORT_ID,
|
||||
loading: false,
|
||||
disabled_multiselect: false,
|
||||
components: { Multiselect, GenericMultiselect },
|
||||
mixins: [ApiMixin],
|
||||
data() {
|
||||
return {
|
||||
export_id: window.EXPORT_ID,
|
||||
loading: false,
|
||||
disabled_multiselect: false,
|
||||
|
||||
recipe_app: 'DEFAULT',
|
||||
recipe_list: [],
|
||||
recipes_loading: false,
|
||||
recipes: [],
|
||||
export_all: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.export_id)
|
||||
this.insertRequested()
|
||||
else
|
||||
this.searchRecipes('')
|
||||
},
|
||||
methods: {
|
||||
|
||||
insertRequested: function(){
|
||||
|
||||
let apiFactory = new ApiApiFactory()
|
||||
|
||||
this.recipes_loading = true
|
||||
|
||||
apiFactory.retrieveRecipe(this.export_id).then((response) => {
|
||||
this.recipes_loading = false
|
||||
this.recipe_list.push(response.data)
|
||||
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
|
||||
}).then(e => this.searchRecipes(''))
|
||||
recipe_app: "DEFAULT",
|
||||
recipe_list: [],
|
||||
recipes_loading: false,
|
||||
recipes: [],
|
||||
export_all: false,
|
||||
filter: undefined,
|
||||
}
|
||||
},
|
||||
|
||||
searchRecipes: function (query) {
|
||||
|
||||
let apiFactory = new ApiApiFactory()
|
||||
|
||||
this.recipes_loading = true
|
||||
|
||||
let maxResultLenght = 1000
|
||||
apiFactory.listRecipes(query, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, 1, maxResultLenght).then((response) => {
|
||||
this.recipes = response.data.results;
|
||||
this.recipes_loading = false
|
||||
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
|
||||
})
|
||||
mounted() {
|
||||
if (this.export_id) this.insertRequested()
|
||||
else this.searchRecipes("")
|
||||
},
|
||||
methods: {
|
||||
insertRequested: function () {
|
||||
let apiFactory = new ApiApiFactory()
|
||||
|
||||
exportRecipe: function () {
|
||||
this.recipes_loading = true
|
||||
|
||||
if (this.recipe_list.length < 1 && this.export_all == false) {
|
||||
makeToast(this.$t("Error"), this.$t("Select at least one recipe"), "danger")
|
||||
return;
|
||||
}
|
||||
apiFactory
|
||||
.retrieveRecipe(this.export_id)
|
||||
.then((response) => {
|
||||
this.recipes_loading = false
|
||||
this.recipe_list.push(response.data)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
|
||||
})
|
||||
.then((e) => this.searchRecipes(""))
|
||||
},
|
||||
|
||||
this.error = undefined
|
||||
this.loading = true
|
||||
let formData = new FormData();
|
||||
formData.append('type', this.recipe_app);
|
||||
formData.append('all', this.export_all)
|
||||
searchRecipes: function (query) {
|
||||
let apiFactory = new ApiApiFactory()
|
||||
|
||||
for (var i = 0; i < this.recipe_list.length; i++) {
|
||||
formData.append('recipes', this.recipe_list[i].id);
|
||||
}
|
||||
this.recipes_loading = true
|
||||
|
||||
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
|
||||
axios.post(resolveDjangoUrl('view_export',), formData).then((response) => {
|
||||
if (response.data['error'] !== undefined){
|
||||
makeToast(this.$t("Error"), response.data['error'],"warning")
|
||||
}else{
|
||||
window.location.href = resolveDjangoUrl('view_export_response', response.data['export_id'])
|
||||
}
|
||||
let maxResultLenght = 1000
|
||||
apiFactory
|
||||
.listRecipes(query, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, 1, maxResultLenght)
|
||||
.then((response) => {
|
||||
this.recipes = response.data.results
|
||||
this.recipes_loading = false
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
|
||||
})
|
||||
},
|
||||
|
||||
}).catch((err) => {
|
||||
this.error = err.data
|
||||
this.loading = false
|
||||
console.log(err)
|
||||
makeToast(this.$t("Error"), this.$t("There was an error loading a resource!"), "warning")
|
||||
})
|
||||
exportRecipe: function () {
|
||||
if (this.recipe_list.length < 1 && this.export_all == false && this.filter === undefined) {
|
||||
makeToast(this.$t("Error"), this.$t("Select at least one recipe"), "danger")
|
||||
return
|
||||
}
|
||||
|
||||
this.error = undefined
|
||||
this.loading = true
|
||||
let formData = new FormData()
|
||||
formData.append("type", this.recipe_app)
|
||||
formData.append("all", this.export_all)
|
||||
formData.append("filter", this.filter?.id)
|
||||
|
||||
for (var i = 0; i < this.recipe_list.length; i++) {
|
||||
formData.append("recipes", this.recipe_list[i].id)
|
||||
}
|
||||
|
||||
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"
|
||||
axios
|
||||
.post(resolveDjangoUrl("view_export"), formData)
|
||||
.then((response) => {
|
||||
if (response.data["error"] !== undefined) {
|
||||
makeToast(this.$t("Error"), response.data["error"], "warning")
|
||||
} else {
|
||||
window.location.href = resolveDjangoUrl("view_export_response", response.data["export_id"])
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.error = err.data
|
||||
this.loading = false
|
||||
console.log(err)
|
||||
makeToast(this.$t("Error"), this.$t("There was an error loading a resource!"), "warning")
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user