mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 20:28:46 -05:00
remove Supermarket view and template
This commit is contained in:
smilerz
@@ -1,177 +0,0 @@
|
||||
<template>
|
||||
<!-- TODO: Deprecate -->
|
||||
<div id="app">
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<h2>{{ $t("Supermarket") }}</h2>
|
||||
|
||||
<multiselect v-model="selected_supermarket" track-by="id" label="name" :options="supermarkets" @input="selectedSupermarketChanged"> </multiselect>
|
||||
|
||||
<b-button class="btn btn-primary btn-block" style="margin-top: 1vh" v-b-modal.modal-supermarket>
|
||||
{{ $t("Edit") }}
|
||||
</b-button>
|
||||
<b-button class="btn btn-success btn-block" @click="selected_supermarket = { new: true, name: '' }" v-b-modal.modal-supermarket>{{ $t("New") }} </b-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-6">
|
||||
<h4>
|
||||
{{ $t("Categories") }}
|
||||
<button class="btn btn-success btn-sm" @click="selected_category = { new: true, name: '' }" v-b-modal.modal-category>{{ $t("New") }}</button>
|
||||
</h4>
|
||||
|
||||
<draggable :list="selectable_categories" group="supermarket_categories" :empty-insert-threshold="10">
|
||||
<div v-for="c in selectable_categories" :key="c.id">
|
||||
<button class="btn btn-block btn-sm btn-primary" style="margin-top: 0.5vh">{{ c.name }}</button>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="col col-md-6">
|
||||
<h4>{{ $t("Selected") }} {{ $t("Categories") }}</h4>
|
||||
|
||||
<draggable :list="supermarket_categories" group="supermarket_categories" :empty-insert-threshold="10" @change="selectedCategoriesChanged">
|
||||
<div v-for="c in supermarket_categories" :key="c.id">
|
||||
<button class="btn btn-block btn-sm btn-primary" style="margin-top: 0.5vh">{{ c.name }}</button>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDIT MODALS -->
|
||||
<b-modal id="modal-supermarket" v-bind:title="$t('Supermarket')" @ok="supermarketModalOk()">
|
||||
<label v-if="selected_supermarket !== undefined">
|
||||
{{ $t("Name") }}
|
||||
<b-input v-model="selected_supermarket.name"></b-input>
|
||||
</label>
|
||||
</b-modal>
|
||||
|
||||
<b-modal id="modal-category" v-bind:title="$t('Category')" @ok="categoryModalOk()">
|
||||
<label v-if="selected_category !== undefined">
|
||||
{{ $t("Name") }}
|
||||
<b-input v-model="selected_category.name"></b-input>
|
||||
</label>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue"
|
||||
import { BootstrapVue } from "bootstrap-vue"
|
||||
|
||||
import "bootstrap-vue/dist/bootstrap-vue.css"
|
||||
|
||||
import { ResolveUrlMixin, ToastMixin } from "@/utils/utils"
|
||||
|
||||
import { ApiApiFactory } from "@/utils/openapi/api.ts"
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
import draggable from "vuedraggable"
|
||||
|
||||
import axios from "axios"
|
||||
import Multiselect from "vue-multiselect"
|
||||
|
||||
axios.defaults.xsrfHeaderName = "X-CSRFToken"
|
||||
axios.defaults.xsrfCookieName = "csrftoken"
|
||||
|
||||
export default {
|
||||
name: "SupermarketView",
|
||||
mixins: [ResolveUrlMixin, ToastMixin],
|
||||
components: {
|
||||
Multiselect,
|
||||
draggable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
supermarkets: [],
|
||||
categories: [],
|
||||
|
||||
selected_supermarket: {},
|
||||
selected_category: {},
|
||||
|
||||
selectable_categories: [],
|
||||
supermarket_categories: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$i18n.locale = window.CUSTOM_LOCALE
|
||||
this.loadInitial()
|
||||
},
|
||||
methods: {
|
||||
loadInitial: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
apiClient.listSupermarkets().then((results) => {
|
||||
this.supermarkets = results.data
|
||||
})
|
||||
apiClient.listSupermarketCategorys().then((results) => {
|
||||
this.categories = results.data
|
||||
this.selectable_categories = this.categories
|
||||
})
|
||||
},
|
||||
selectedCategoriesChanged: function (data) {
|
||||
let apiClient = new ApiApiFactory()
|
||||
|
||||
if ("removed" in data) {
|
||||
let relation = this.selected_supermarket.category_to_supermarket.filter((el) => el.category.id === data.removed.element.id)[0]
|
||||
apiClient.destroySupermarketCategoryRelation(relation.id)
|
||||
}
|
||||
|
||||
if ("added" in data) {
|
||||
apiClient
|
||||
.createSupermarketCategoryRelation({
|
||||
category: data.added.element,
|
||||
supermarket: this.selected_supermarket.id,
|
||||
order: 0,
|
||||
})
|
||||
.then((results) => {
|
||||
this.selected_supermarket.category_to_supermarket.push(results.data)
|
||||
})
|
||||
}
|
||||
|
||||
if ("moved" in data || "added" in data) {
|
||||
this.supermarket_categories.forEach((element, index) => {
|
||||
let relation = this.selected_supermarket.category_to_supermarket.filter((el) => el.category.id === element.id)[0]
|
||||
apiClient.partialUpdateSupermarketCategoryRelation(relation.id, { order: index })
|
||||
})
|
||||
}
|
||||
},
|
||||
selectedSupermarketChanged: function (supermarket, id) {
|
||||
this.supermarket_categories = []
|
||||
this.selectable_categories = this.categories
|
||||
|
||||
for (let i of supermarket.category_to_supermarket) {
|
||||
this.supermarket_categories.push(i.category)
|
||||
this.selectable_categories = this.selectable_categories.filter(function (el) {
|
||||
return el.id !== i.category.id
|
||||
})
|
||||
}
|
||||
},
|
||||
supermarketModalOk: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
if (this.selected_supermarket.new) {
|
||||
apiClient.createSupermarket({ name: this.selected_supermarket.name }).then((results) => {
|
||||
this.selected_supermarket = undefined
|
||||
this.loadInitial()
|
||||
})
|
||||
} else {
|
||||
apiClient.partialUpdateSupermarket(this.selected_supermarket.id, { name: this.selected_supermarket.name })
|
||||
}
|
||||
},
|
||||
categoryModalOk: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
if (this.selected_category.new) {
|
||||
apiClient.createSupermarketCategory({ name: this.selected_category.name }).then((results) => {
|
||||
this.selected_category = {}
|
||||
this.loadInitial()
|
||||
})
|
||||
} else {
|
||||
apiClient.partialUpdateSupermarketCategory(this.selected_category.id, { name: this.selected_category.name })
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,22 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import App from './SupermarketView.vue'
|
||||
import i18n from '@/i18n'
|
||||
import {createPinia, PiniaVuePlugin} from "pinia";
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
// TODO move this and other default stuff to centralized JS file (verify nothing breaks)
|
||||
let publicPath = localStorage.STATIC_URL + 'vue/'
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
publicPath = 'http://localhost:8080/'
|
||||
}
|
||||
export default __webpack_public_path__ = publicPath // eslint-disable-line
|
||||
|
||||
Vue.use(PiniaVuePlugin)
|
||||
const pinia = createPinia()
|
||||
|
||||
new Vue({
|
||||
pinia,
|
||||
i18n,
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
Reference in New Issue
Block a user