[pinia] use pinia for pricelist

This commit is contained in:
Ferdinand Thiessen 2021-03-14 15:12:41 +01:00
parent 76978e8883
commit 98375f81be
7 changed files with 107 additions and 145 deletions

View File

@ -63,4 +63,35 @@ declare namespace FG {
userid: string; userid: string;
value: number; value: number;
} }
interface Drink {
id: number;
name: string;
volume: number;
cost_price: number;
discount: number;
extra_charge?: any;
prices: Array<DrinkPrice>;
ingredients: Array<Ingredient>;
}
interface DrinkPrice {
id: number;
volume: number;
price: number;
description?: any;
round_step: number;
}
interface DrinkType {
id: number;
name: string;
}
interface Ingredient {
id: number;
volume: number;
parent_id: number;
ingredient_id: number;
}
interface Tag {
id: number;
name: string;
}
} }

View File

@ -120,18 +120,18 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
import { useStore } from 'vuex'; import { usePricelistStore } from '../store';
export default defineComponent({ export default defineComponent({
name: 'Drink', name: 'Drink',
setup() { setup() {
const store = useStore(); const store = usePricelistStore();
const drink = ref({ const drink = ref<FG.Drink>({
id: -1,
name: '', name: '',
volume: '', volume: -1,
cost_price: '', cost_price: -1,
discount: '', discount: -1,
extra_charge: '',
prices: [], prices: [],
ingredients: [], ingredients: [],
}); });
@ -145,14 +145,14 @@ export default defineComponent({
}; };
function addPrice() { function addPrice() {
drink.value.prices.unshift({ ...emptyPrice }); //drink.value.prices.unshift({ ...emptyPrice });
} }
function save() { async function save() {
console.log(drink); console.log(drink);
drink.value.prices.forEach((price: FG.DrinkPrice) => { drink.value.prices.forEach((price: FG.DrinkPrice) => {
price.no_auto = !price.no_auto; //price.no_auto = !price.no_auto;
}); });
void store.dispatch('drink/createDrink', drink.value); await store.createDrink(drink.value);
} }
return { drink, addPrice, save }; return { drink, addPrice, save };
}, },

View File

@ -47,14 +47,12 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onBeforeMount, ref } from 'vue'; import { computed, defineComponent, onBeforeMount, ref } from 'vue';
import { useStore } from 'vuex'; import { usePricelistStore } from '../store';
import { DrinkInterface } from 'src/plugins/pricelist/store/drinks';
export default defineComponent({ export default defineComponent({
name: 'DrinkTypes', name: 'DrinkTypes',
setup() { setup() {
const store = useStore(); const store = usePricelistStore();
const state = <DrinkInterface>store.state.drink;
const newDrinkType = ref(''); const newDrinkType = ref('');
const newDrinkTypeName = ref(''); const newDrinkTypeName = ref('');
const edittype = ref(false); const edittype = ref(false);
@ -63,10 +61,10 @@ export default defineComponent({
onBeforeMount(() => { onBeforeMount(() => {
console.log(store); console.log(store);
void store.dispatch('drink/getDrinkTypes'); void store.getDrinkTypes();
}); });
const rows = computed(() => state.drinkTypes); const rows = computed(() => store.drinkTypes);
const columns = [ const columns = [
{ {
name: 'drinkTypeName', name: 'drinkTypeName',
@ -83,8 +81,8 @@ export default defineComponent({
}, },
]; ];
function addType() { async function addType() {
void store.dispatch('drink/addDrinkType', { name: newDrinkType.value }); await store.addDrinkType(newDrinkType.value);
newDrinkType.value = ''; newDrinkType.value = '';
} }
@ -93,13 +91,14 @@ export default defineComponent({
actualDrinkType.value = drinkType; actualDrinkType.value = drinkType;
} }
function saveChanges() { async function saveChanges() {
void store try {
.dispatch('drink/changeDrinkTypeName', { await store.changeDrinkTypeName({
id: actualDrinkType.value.id, id: actualDrinkType.value.id,
name: newDrinkTypeName.value, name: newDrinkTypeName.value,
}) });
.finally(() => discardChanges()); } catch (e) {}
discardChanges();
} }
function discardChanges() { function discardChanges() {
@ -109,7 +108,7 @@ export default defineComponent({
} }
function deleteType(id: number) { function deleteType(id: number) {
void store.dispatch('drink/removeDrinkType', id); void store.removeDrinkType(id);
} }
return { return {

View File

@ -20,10 +20,8 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, onBeforeMount, ref } from 'vue'; import { defineComponent, onBeforeMount, computed } from 'vue';
import { StateInterface } from 'src/store'; import { usePricelistStore } from '../store';
import { DrinkInterface } from '../store/drinks';
import { useStore } from 'vuex';
export default defineComponent({ export default defineComponent({
name: 'Pricelist', name: 'Pricelist',
@ -39,12 +37,12 @@ export default defineComponent({
}, },
}, },
setup() { setup() {
const store = useStore(); const store = usePricelistStore();
const state = <DrinkInterface>store.state.drink;
const drinks = ref(state.drinks);
onBeforeMount(() => { onBeforeMount(() => {
void store.dispatch('drink/getDrinks'); void store.getDrinks();
}); });
const drinks = computed(() => store.drinks);
const columns = [ const columns = [
{ {
name: 'name', name: 'name',

View File

@ -1,7 +1,4 @@
import { Module } from 'vuex';
import routes from './routes'; import routes from './routes';
import { StateInterface } from 'src/store';
import drink, { DrinkInterface } from 'src/plugins/pricelist/store/drinks';
import { FG_Plugin } from 'src/plugins'; import { FG_Plugin } from 'src/plugins';
const plugin: FG_Plugin.Plugin = { const plugin: FG_Plugin.Plugin = {
@ -10,7 +7,6 @@ const plugin: FG_Plugin.Plugin = {
requiredModules: [], requiredModules: [],
requiredBackendModules: ['pricelist'], requiredBackendModules: ['pricelist'],
version: '0.0.1', version: '0.0.1',
store: new Map<string, Module<DrinkInterface, StateInterface>>([['drink', drink]]),
widgets: [], widgets: [],
// widgets: [ // widgets: [
// { // {

View File

@ -0,0 +1,46 @@
import { api } from 'src/boot/axios';
import { defineStore } from 'pinia';
export const usePricelistStore = defineStore({
id: 'pricelist',
state: () => ({
drinkTypes: [] as Array<FG.DrinkType>,
drinks: [] as Array<FG.Drink>,
}),
actions: {
async getDrinkTypes(force = false) {
if (force || this.drinks.length == 0) {
const { data } = await api.get<Array<FG.DrinkType>>('/pricelist/drink-types');
this.drinkTypes = data;
}
return this.drinkTypes;
},
async addDrinkType(name: string) {
const { data } = await api.post<FG.DrinkType>('/pricelist/drink-types', { name: name });
this.drinkTypes.push(data);
},
async removeDrinkType(id: number) {
await api.delete(`/pricelist/drink-types/${id}`);
const idx = this.drinkTypes.findIndex((val) => val.id == id);
if (idx >= 0) this.drinkTypes.splice(idx, 1);
},
async changeDrinkTypeName(drinkType: FG.DrinkType) {
await api.put(`/pricelist/drink-types/${drinkType.id}`, drinkType);
const itm = this.drinkTypes.filter((val) => val.id == drinkType.id);
if (itm.length > 0) itm[0].name = drinkType.name;
},
async getDrinks(force = false) {
if (force || this.drinks.length == 0) {
const { data } = await api.get<Array<FG.Drink>>('/pricelist/drinks');
this.drinks = data;
}
return this.drinks;
},
async createDrink(drink: FG.Drink) {
await api.post('/pricelist/drinks', drink);
this.drinks.push(drink);
},
},
});

View File

@ -1,108 +0,0 @@
import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
import { StateInterface } from 'src/store';
import { axios } from 'src/boot/axios';
import { AxiosResponse } from 'axios';
export interface DrinkInterface {
drinkTypes: FG.DrinkType[];
drinks: FG.Drink[];
}
const state: DrinkInterface = {
drinkTypes: [],
drinks: [],
};
const mutations: MutationTree<DrinkInterface> = {
setDrinkTypes(state, drinkTypes: FG.DrinkType[]) {
state.drinkTypes = drinkTypes;
},
setDrinkType(state, drinkType: FG.DrinkType) {
const item = state.drinkTypes.find((item) => item.id == drinkType.id);
if (item) {
item.name = drinkType.name;
}
},
addDrinkType(state, drinkType: FG.DrinkType) {
state.drinkTypes.unshift(drinkType);
},
removeDrinkType(state, id: number) {
const index = state.drinkTypes.findIndex((item) => item.id == id);
state.drinkTypes.splice(index, 1);
},
setDrinks(state, drinks: FG.Drink[]) {
state.drinks = drinks;
},
setDrink(state, drink: FG.Drink) {
const index = state.drinks.findIndex((item) => (item.id = drink.id));
if (index) {
state.drinks[index] = drink;
} else {
state.drinks.push(drink);
}
},
};
const actions: ActionTree<DrinkInterface, StateInterface> = {
getDrinkTypes({ commit }) {
axios
.get('/pricelist/drink-types')
.then((response: AxiosResponse<FG.DrinkType[]>) => {
commit('setDrinkTypes', response.data);
})
.catch((err) => console.warn(err));
},
addDrinkType({ commit }, data) {
axios
.post('/pricelist/drink-types', data)
.then((response: AxiosResponse<FG.DrinkType>) => {
commit('addDrinkType', response.data);
})
.catch((err) => {
console.warn(err);
});
},
removeDrinkType({ commit }, data: number) {
axios
.delete(`/pricelist/drink-types/${data}`)
.then(() => {
commit('removeDrinkType', data);
})
.catch((err) => console.warn(err));
},
changeDrinkTypeName({ commit }, drinkType: FG.DrinkType) {
axios
.put(`/pricelist/drink-types/${drinkType.id}`, drinkType)
.then(() => {
commit('setDrinkType', drinkType);
})
.catch((err) => console.warn(err));
},
getDrinks({ commit }) {
axios
.get('/pricelist/drinks')
.then((response: AxiosResponse<FG.Drink[]>) => {
commit('setDrinks', response.data);
})
.catch((err) => console.warn(err));
},
createDrink({ commit }, data) {
axios
.post('/pricelist/drinks', data)
.then((response: AxiosResponse<FG.Drink>) => {
commit('setDrink', response.data);
})
.catch((err) => console.warn(err));
},
};
const getters: GetterTree<DrinkInterface, StateInterface> = {};
const schedule: Module<DrinkInterface, StateInterface> = {
namespaced: true,
state,
mutations,
actions,
getters,
};
export default schedule;