Code updates for the v1.3.0 branch

src/components/menus/ProfileMenu.vue

@@ -15,7 +15,6 @@ export default defineComponent({
 	name: 'ProfileMenu',
 	computed: {
 		getUserId(): number {
-			console.log(this.$store.state.user.userId)
 			return this.$store.state.user.userId
 		} 
 	}

src/components/pos/CartTable.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="bg-white rounded-md">
 			<table class="divide-y divide-gray-200 border-collapse w-full text-left">
-				<thead class="bg-blue-800 text-white">
+				<thead class="bg-blue-900 text-white">
 					<tr>
 						<th class="px-6 py-3 text-sm">Item</th>
 						<th class="px-6 py-3 text-sm">Unit</th>
@@ -13,139 +13,117 @@
 					</tr>
 				</thead>
 				<tbody class="divide-y divide-gray-200">
-					<tr v-for="(item) in cart.items" :key="item.item_id">
-						<td class="w-full lg:w-auto px-6 py-4 whitespace-nowrap">{{ item.name }}</td>
+					<tr v-for="(item) in cart.cartItems" :key="item.item_id">
+						<td class="w-full lg:w-auto px-6 py-4 whitespace-nowrap">{{ item.item_name }}</td>
 						<td class="w-full lg:w-auto px-6 py-4 whitespace-nowrap">{{ item.unit }}</td>
-						<td class="w-full lg:w-auto px-6 py-4 whitespace-nowrap">{{ item.price }}</td>
-						<td class="w-full lg:w-auto px-6 py-4 whitespace-nowrap flex justify-start">
+						<td class="w-full lg:w-auto px-6 py-4 whitespace-nowrap">{{ item.unit_price }}</td>
+						<td class="w-full lg:w-auto px-6 py-4 whitespace-nowrap flex justify-around">
 							<button 
-								@click="reduceItemQuantity(item.item_id, item.quantity)" 
-								class="text-4xl self-center font-mono bg-blue-800 hover:bg-blue-900 text-white rounded m-0 mr-4">
-								<MinusIcon class="w-8 h-8 m-2" />
+								@click="reduceItemQuantity(item.qty, item.item_id)" 
+								class="text-4xl self-center font-mono bg-blue-900 hover:bg-blue-500 text-white rounded-full mr-2">
+								<MinusIcon class="w-6 h-6" />
 							</button>
-							<input v-model.lazy="item.quantity" @input="changeItemQuantity($event, item.item_id)" type="number" class="text-lg mt-2 w-20 text-right" />
+							<span class="text-lg mt-2">{{ item.qty }}</span>
 							<button 
-								@click="augmentItemQuantity(item.item_id)" 
-								class="text-4xl self-center font-mono bg-blue-800 hover:bg-blue-900 text-white rounded m-0 ml-4">
-								<PlusIcon class="w-8 h-8 m-2" />
+								@click="augmentItemQuantity(item.qty, item.item_id)" 
+								class="text-4xl self-center font-mono bg-blue-900 hover:bg-blue-500 text-white rounded-full ml-2">
+								<PlusIcon class="w-6 h-6" />
 							</button>
 						</td>
-						<td class="w-full lg:w-auto px-6  whitespace-nowrap">{{ item.price * item.quantity }}</td>
+						<td class="w-full lg:w-auto px-6  whitespace-nowrap">{{ item.unit_price * item.qty }}</td>
 						<td class="w-full lg:w-auto p-3 whitespace-nowrap bg-red-800 text-center">
-							<DeleteIcon @click="deleteItem(item.item_id)" class="cursor-pointer text-white transform hover:scale-125 w-full h-5" />
+							<DeleteIcon @click="deleteItem(item.item_id)" class="cursor-pointer text-white hover:text-blue-700 w-5 h-5" />
 						</td>
 					</tr>
 				</tbody>
-				<tfoot class="text-left bg-blue-800 text-white shadow-md">
+				<tfoot class="text-left bg-blue-900 text-white shadow-md">
 					<tr>
 						<th class="px-6 py-2">Subtotal</th>
 						<td></td>
 						<td></td>
 						<td></td>
-						<td colspan="2" class="px-6 text-right">{{ getSubtotal }} {{ getCurrency }}</td>
+						<td colspan="2" class="px-6 text-right">{{ getCartSubtotal }} {{ $store.getters.cartCurrency(cart.payment_method) }}</td>
 					</tr>
 					<tr>
 						<th class="px-6 py-2">Discount</th>
 						<td></td>
 						<td></td>
 						<td></td>
-						<td colspan="2" class="px-6 text-right">- {{ getDiscount }} {{ getCurrency }}</td>
+						<td colspan="2" class="px-6 text-right">{{ cart.discount }} {{ $store.getters.cartCurrency(cart.payment_method) }}</td>
 					</tr>
 					<tr>
 						<th class="px-6 py-2">Tax</th>
 						<td></td>
 						<td></td>
 						<td></td>
-						<td colspan="2" class="px-6 text-right">{{ getTax }} {{ getCurrency }}</td>
+						<td colspan="2" class="px-6 text-right">{{ getCartTax }} {{ $store.getters.cartCurrency(cart.payment_method) }}</td>
 					</tr>
 					<tr>
 						<th class="px-6 py-2">Total</th>
 						<td></td>
 						<td></td>
 						<td></td>
-						<td colspan="2" class="px-6 text-right">{{ getTotal }} {{ getCurrency }}</td>
+						<td colspan="2" class="px-6 text-right">{{ getCartTotal }} {{ $store.getters.cartCurrency(cart.payment_method) }}</td>
 					</tr>
 				</tfoot>
 			</table>
 		</div>
 		<div class="bg-red-800 text-white flex flex-nowrap justify-between px-6 py-4 rounded-b-md shadow-md">
 			<p>Total Payment</p>
-			<p>{{ getTotal }} {{ getCurrency }}</p>
+			<p>{{ getCartTotal }} {{ $store.getters.cartCurrency('tnbc') }}</p>
 		</div>
 	</div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
+
+/** Components */
 import DeleteIcon from "@/components/icons/DeleteIcon.vue"
 import CartService from '@/services/pos/CartService';
 import PlusIcon from "@/components/icons/PlusIcon.vue"
 import MinusIcon from "@/components/icons/MinusIcon.vue"
 
+/** Types */
+import { Cart } from '@/types/pos/Cart'
+
 export default defineComponent({
 	name: 'CartTable',
 	components: { DeleteIcon, PlusIcon, MinusIcon },
-	props: {
-		cart: {
-			required: false,
-			type: Object
-        },
-	},
+	data(){
+        return {
+            cart: this.$store.state.pos.cart as Cart
+        }
+    },
 	methods: {
-		deleteItem(id: number): void {
-			this.$store.dispatch('pos/deleteCartItem', id)
-
+		async deleteItem(item_id: number): Promise<any> {
+			this.$store.dispatch('pos/removeItemFromCart', item_id)
 		},
-		augmentItemQuantity(id: number): void {
-			this.$store.dispatch('pos/addQuantityToItem', id)
+		async reduceItemQuantity(qty: number, id: number): Promise<any> {
 
-		},		
-		reduceItemQuantity(id: number, quantity: number): void {
-			this.$store.dispatch('pos/removeQuantityToItem', { id: id, quantity: quantity })
-
+			if (qty > 1) {
+				this.$store.dispatch('pos/removeQuantityFromCartItem', id)
+			} else if (qty = 1) {
+				this.deleteItem(id)
+			}
 		},
-		changeItemQuantity(event: any, id: number): void {
-			let quantity = parseInt(event.target.value) as number | null
-
-			// check if input is empty
-			// in the case that's it's empty, assign null
-			// otherwise assign the same quantity
-			quantity = quantity == NaN ? null : quantity
-			if (quantity !== 0) {
-				this.$store.dispatch('pos/updateQuantityOfItem', { id: id, quantity: quantity })
-
-			// if the quantity is EXACTLY 0, then delete the product
-			} else if (quantity === 0) {
-				console.log('eq 0')
-				this.$store.dispatch('pos/deleteCartItem', id )
-
+		async augmentItemQuantity(qty: number, id: number): Promise<any> {
+			if (qty > 0) {
+				this.$store.dispatch('pos/addQuantityToCartItem', id)
 			}
-
+			
 		}
 	},
 	computed: {
-		getCurrency(): string {
-			return this.$store.getters['settings/currency']
+		getCartSubtotal() {
+			return this.$store.getters['pos/cartSubtotal']
 		},
-		getSubtotal(): number {
-			return this.$store.getters['pos/subtotal'] ? this.$store.getters['pos/subtotal'] : 0
+		getCartTax() {
+			return this.$store.getters['pos/cartTax']
 		},
-		getDiscount(): number {
-			return this.$store.getters['pos/discount'] ? this.$store.getters['pos/discount'] : 0
+		getCartTotal() {
+			return this.$store.getters['pos/cartTotal']
 		},
-		getTax(): number {
-			const taxRate = this.$store.state.settings.taxRate ? this.$store.state.settings.taxRate : 0
-			const subtotal = this.getSubtotal
-			const discount = this.getDiscount
-
-			return Math.ceil((subtotal - discount) * (taxRate / 100))
-		},
-		getTotal(): any {
-			const subtotal = this.getSubtotal
-			const discount = this.getDiscount
-			const tax = this.getTax
-
-			return subtotal - discount + tax
-		}
+
 	}
 })
 </script>

src/components/pos/ItemCard.vue

@@ -5,22 +5,29 @@
 		<div class="py-2 text-blue-900">
 			<p class="mb-2 font-semibold">{{ item.name }}</p>
 			<p>
-				<span>{{ $store.getters['settings/currency'] }}</span>
-				{{ item.price }}</p>
+				<span>{{ getCurrency }}</span>
+				{{ item.price }}
+			</p>
 		</div>
 	</div>
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { ItemObject } from '@/types/items/Items'
+import { SingleItem } from '@/types/items/Items'
 
 export default defineComponent({
 	name: 'ProductCard',
 	props: {
 		item: {
-			type: Object as PropType<ItemObject>,
+			type: Object as PropType<SingleItem>,
 			required: true
 		}
+	},
+	computed: {
+		getCurrency() {
+			return this.$store.getters.currency
+		},
 	}
+
 })
 </script>

src/components/pos/Payments.vue

@@ -70,8 +70,7 @@ export default defineComponent({
 	},
 	computed: {
 		isTNBCSelected(): boolean {
-			const method = this.$store.state.pos.paymentType
-			console.log('method', method)
+			const method = this.$store.state.pos.cart.payment_method
 			if (method === 'tnbc'){
 				return true
 			}

src/http-common.ts

@@ -4,8 +4,8 @@ import router from '@/router';
 process.env.NODE_ENV
 
 const apiClient: AxiosInstance = axios.create({
-  baseURL: process.env.NODE_ENV === 'development' ? "https://tnbposapi.nathanaeljageni.fr/api" : "https://tnbposapi.nathanaeljageni.fr/api",
-  // baseURL: process.env.NODE_ENV === 'development' ? "http://127.0.0.1:8000/api" : "https://tnbposapi.nathanaeljageni.fr/api",
+  // baseURL: process.env.NODE_ENV === 'development' ? "https://tnbposapi.nathanaeljageni.fr/api" : "https://tnbposapi.nathanaeljageni.fr/api",
+  baseURL: process.env.NODE_ENV === 'development' ? "http://127.0.0.1:8000/api" : "https://tnbposapi.nathanaeljageni.fr/api",
   withCredentials: true,
   headers: {
     "Content-type": "application/json",

src/store/index.ts

@@ -0,0 +1,24 @@
+import { createStore } from 'vuex'
+import createPersistedState from 'vuex-persistedstate'
+import { UserModule } from './modules/user'
+import { SessionModule } from './modules/session'
+import { PosModule } from './modules/pos'
+import { SettingsModule } from './modules/settings'
+
+export default createStore({
+    state: {},
+    mutations: {
+        initializeStore(state) {}
+    },
+    actions: {},
+    getters: {},
+    modules: {
+        user: UserModule,
+        session: SessionModule,
+        pos: PosModule,
+        settings: SettingsModule,
+    },
+    plugins: [createPersistedState({
+        paths: ['user', 'session', 'pos', 'settings'],
+    })]
+})