[pinia] use pinia for pricelist

src/flaschengeist.d.ts

@@ -63,4 +63,35 @@ declare namespace FG {
     userid: string;
     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;
+  }
 }

src/plugins/pricelist/components/Drink.vue

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

src/plugins/pricelist/components/DrinkTypes.vue

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

src/plugins/pricelist/components/Pricelist.vue

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

src/plugins/pricelist/plugin.ts

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

src/plugins/pricelist/store.ts

@@ -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);
+    },
+  },
+});

src/plugins/pricelist/store/drinks.ts

@@ -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;