@ozdao/prometheus-framework 0.2.30 → 0.2.31

package/src/modules/orders/components/pages/EditOrder.vue

@@ -1,14 +1,6 @@
 <template>
   <header class="mn-b-medium flex-v-center flex-nowrap flex">
     <h2 class="mn-r-medium">Edit Order</h2>
-
-    <!-- <button 
-      @click="$router.push({
-        name: 'AdminOrder'
-      })" 
-      class="radius-100p i-big hover-scale-1 cursor-pointer t-white bg-second">
-        +
-    </button> -->
   </header>
 
 	<section class="gap-thin flex-nowrap flex mn-b-semi">
@@ -28,109 +20,44 @@
 	   
 	</section>
 
+	<Block
+    title="Add Position"
+    class="mn-b-semi"
+  >
+    <CardPosition 
+      @add="addProduct"
+      :products="Products"
+    />
+  </Block>
+
+  <Block
+    title="Invetory Sheet"
+    class="mn-b-semi"
+  >
+    <span 
+      v-if="orders.state.current.positions.length === 0" 
+      class="w-100"
+    >
+      No positions added yet
+    </span> 
+
+    <CardPosition 
+     v-for="(product, index) in orders.state.current.positions" 
+      :key="product._id" 
+      :product="product"
+      :products="Products"
+      @add="addProduct"
+      @delete="deleteProduct"
+      @update="updateProduct"
+    />
+  </Block>
+
+  <FormOrderDetails 	
+		:order="orders.state.current"  
+		@create="handleCreate"
+		class="bg-grey pd-medium radius-big mn-b-semi"
+	/>
 
-<div class="mn-b-thin cols-2">
-	<section class="">
-
-	    <h5 class="w-100 mn-b-small">Информация о заказе
-
-	         <a v-if="showAddNew === false" class="mn-l-small t-main h5" @click="reserOrderList()">Редактировать</a>
-
-	    </h5>
-
-	    <div class="cols-2 mn-b-medium ">
-	       <!-- <p class="w-100">Время создания: {{DateToFormattedString(order.createdAt)}}</p> -->
-	      <div class="col flex block">
-	        <p class="mn-b-small w-100">
-	          Номер клиента:  {{order.info?.phone}}<br>
-	        </p>
-	        <p class="mn-b-small w-100">
-	          Имя клиента: {{order.info?.name}} {{order.info?.surname}}
-	        </p>
-	        <p class="mn-b-small w-100">
-	          Контактный email: {{order.info?.email}} 
-	        </p>
-	      </div>
-	       <div class="col flex block">
-	      <p class="mn-b-small w-100">
-	        Тип доставки: {{order.info?.delivery}} 
-	      </p>
-	      <p class="mn-b-small w-100">
-	        Город: {{order.info?.city}} 
-	      </p>
-	      <p class="mn-b-small w-100">
-	        Адресс: {{order.info?.adress}} 
-	      </p>
-	    </div>
-	      
-	    </div> 
-	     <div class="block">
-	      <p class="w-100">
-	        Комментарий: {{order.info?.comment}} 
-	      </p>
-	    </div>
-
-	</section>
-
-	<section class="">
-	    
-	 
-
-	    <div class="order-list">
-	      	<div class="flex">
-		      	<h5 class="mn-b-small">
-		        	Состав заказа
-		      	</h5>
-	        	<div>
-			       	<a v-if="showAddNew === false" class="t-main h5" @click="changeAdd()">Добавить</a>
-			       	<a v-else class="t-main h5" @click="changeAdd()">Закрыть</a>
-			        <a v-if="showAddNew === false" class="mn-l-small t-main h5" @click="reserOrderList()">Сбросить</a>
-			       	<a v-if="showAddNew === false" class="mn-l-small t-main h5" @click="saveItemList()">Сохранить</a> 
-	     		</div>
-	     	 </div>
-
-	      	<div v-if="showAddNew !== false" class="mn-b-small w-100 block">
-	        	<vue-select :options="Products"  v-model="techStack" :label-by="'name'"  searchable clear-on-close :close-on-select="true"> </vue-select>
-	         	<button @click="addProductToOrder()" class="w-25 button">Добавить в заказ</button>
-	      	</div>
-
-	      	<ul class="mn-b-semi">
-	      		<li v-for="(product, index) in orderProducts" :key="product.id" class="shop-cart-item mn-b-small block">
-	      			<!-- <img :src="require( `@/assets/images/products/${product.images}`)"> -->
-	      			<div class="text-left">
-	      				<p class="name">{{ product.name }}</p>
-
-	      				<div class="mn-b-small flex">
-	      					<div class="small-underline variant">
-	      						<span v-if="!product.size && !product.color" class="">One-size</span>
-	      						<span v-if="product.size" class="">{{ product.size}}</span>
-	      						<span v-if="product.color && product.size" class="">, </span>
-	      						<span v-if="product.color" class="">{{ product.color}}</span>
-	      						<div v-if="product.edit">{{product.edit}}</div>
-	      					</div>
-
-
-
-	      					<p  class="t-demi">{{product.quantity}} x {{product.price / 100}} ₽ </p>
-	      				</div>
-	      				<div v-if="data[index]" class="flex-nowrap flex w-100">
-
-	      					<input 
-	      					@input="updateInputText('orders', 'current.items[' + index + '].quantity', $event)" 
-	      					:value="product.quantity" 
-	      					placeholder="Маргарита"
-	      					class="mn-b-small input-text input" 
-	      					/>
-	      				</div>
-	      				<a v-if="!data[index]" @click="changeEdit(index)">Редактировать</a>
-	      				<a v-if="data[index]" @click="deleteItem(product)">Удалить</a>
-	      				<a v-if="data[index]" @click="changeEdit(index)">Закрыть</a>
-	      			</div>
-	      		</li>
-	      	</ul>
-	    </div>
-	</section>
-</div>
 
 <div class="mn-thinw-100 flex-v-center flex block">
 	<p class="p-big">Сумма к оплате:
@@ -156,8 +83,16 @@
   import { computed, ref, defineProps, onMounted, reactive, toRefs, watch } from 'vue'
   import { useRoute } from 'vue-router'
 
+	import Block from '@pf/src/components/Block/Block.vue';
+
+  import ListPositions from '@pf/src/modules/products/components/blocks/ListPositions.vue'
+  import CardPosition from '@pf/src/modules/products/components/blocks/CardPosition.vue';
+  
+  import FormOrderDetails from '@pf/src/modules/orders/components/sections/FormOrderDetails.vue'
+
   // Import your store
-  import { state, actions } from '@pf/src/modules/orders/store/orders';
+  import * as orders from '@pf/src/modules/orders/store/orders';
+	import * as products from '@pf/src/modules/products/store/products';
 
   // Accessing router
   const route = useRoute()
@@ -166,44 +101,45 @@
   const props = defineProps(['showProduct'])
   props.showProduct = [];
 
+  function addProduct(product) {
+    orders.actions.addProduct(product);
+  }
+
+  function deleteProduct(product) {
+    orders.actions.deleteProduct(product) 
+  }
+
   // Reactive data
   let data = reactive([])
   let reactiveData = toRefs(data)
   var showAddNew = ref(false)
+	const Products = ref([])
 
   // Initialize order and products
   let order = ref({})
-  let products = ref([])
-
-  // Function declarations
-  function test() {
-    console.log('Test Function')
-  }
-
-  function addProductToOrder() {
-    // Update your order state
-    actions.addProductToOrder() // Add your parameters here
-    showAddNew.value = !showAddNew.value
-  }
-
-  // ... [Continue with other function definitions]
-
-  // Replace store actions with your actions
+  // Replace store orders.actions with your orders.actions
   onMounted(async () => {
-    // Replace Vuex actions with your actions
-    await actions.fetchProducts() // Implement this action in your store
-    await actions.fetchOrder(route.params.id) // Implement this action in your store
-
-    order.value = state.current // Replace Vuex state with your state
-    products.value = state.all // Replace Vuex state with your state
+   
+
+    await orders.actions.fetchOrder(route.params.order) // Implement this action in your store
+
+    order.value = orders.state.current
+
+     // Replace Vuex orders.actions with your orders.actions
+    try {
+      const productsResponse = await products.actions.read({
+        organization: orders.state.current.organization
+      });
+      console.log(productsResponse)
+      Products.value = productsResponse;
+    } catch (error) {
+      console.error('error');
+    }
   })
 
-  function deleteItem(item) {
-    actions.deleteItemFromOrder(item) // Replace Vuex mutation with your action
-  }
 
   function saveItemList() {
-    actions.updateOrderItems(route.params.id) // Replace Vuex action with your action
+    orders.actions.updateOrderpositions(route.params.order) // Replace Vuex action with your action
   }
 
   function changeEdit(index) {
@@ -211,17 +147,17 @@
   }
 
   function resetOrderList() {
-    actions.fetchOrder(route.params.id) // Replace Vuex action with your action
+    orders.actions.fetchOrder(route.params.order) // Replace Vuex action with your action
   }
 
   function changeAdd() {
     showAddNew.value = !showAddNew.value
   }
 
-  // Replace computed properties with reactive state
-  const Products = computed(() => state.products.all) // Update this line to match your state structure
-  const orderTotalPrice = computed(() => 100) // Implement this getter in your actions
-  const orderProducts = computed(() => []) // Implement this getter in your actions
+  // Replace computed properties with reactive orders.state
+  // Update this line to match your orders.state structure
+  const orderTotalPrice = computed(() => 100) // Implement this getter in your orders.actions
+  const orderProducts = computed(() => []) // Implement this getter in your orders.actions
 </script>
 
 

package/src/modules/orders/components/pages/FormOrder.vue

@@ -0,0 +1,192 @@
+<template>
+
+<section class="pd-thin">
+
+	<!-- Ask to login  -->
+	<AskToLogin class="mn-b-big" v-if="auth.state.access.status === false" /> 
+
+	<!-- Order form -->
+	<div class="gap-small mn-b-thin cols-2">
+		<!-- Empty State   -->
+		<EmptyState  
+			v-if="shopcart.state.positions < 1" 
+		/>
+		<Succes 
+			v-if="order.status === true && shopcart.state.positions.length > 0" 
+			:order="order" 
+		/>
+		<FormOrderDetails 	
+			v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0"
+			:order="orders.state.current"  
+		/>
+
+		<!-- Order positions -->
+		<div 
+			v-if="shopcart.state.positions.length > 0" 
+		>
+			<p class="p-big mn-b-small">Your Order</p>
+			
+			<ul class="mn-b-semi">
+				<CardOrderItem v-for="product in shopcart.state.positions" :key="product._id" editable="true" :product="product" 
+	        :increase="product => shopcart.actions.incrementItemQuantity(product._id)"
+	        :decrease="product => shopcart.actions.decrementItemQuantity(product._id)"
+	        :remove="product => shopcart.actions.removeProduct(product._id)"
+	      />
+			</ul>
+
+			<div 
+				style="border-bottom: 1px solid #f7f7f7; border-top: 1px solid #f7f7f7;" class="pd-b-medium pd-t-medium  mn-b-medium"
+			>
+				<p class="mn-b-thin">Subtotal: {{returnCurrency()}} {{ cartTotalPrice }} </p>
+				<p class="mn-b-thin">Delivery: {{ order.delivery.type === 'pickup' ? 'Free' : '30'}} </p>
+				<p class="h3">Total: {{returnCurrency()}} {{ cartTotalPrice }}  </p>
+			</div>
+
+			<p class='mn-b-thin'>By making this purchase you agree to our terms and conditions.</p>
+			<p class='mn-b-small'>I agree that placing the order places me under an obligation to make a payment in accordance with the General Terms and Conditions.</p>
+			<!-- Send order -->
+		  <button 
+		  	v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0"
+		    :disabled="
+		      errorName 
+		      || errorPhoneOrMessenger 
+		      || errorCity 
+		      || errorAdress 
+		      || errorDelivery 
+		      || errorPayment
+		    "
+		    @click="handleCreate()" 
+		    class="bg-main pd-small radius-big w-100 button"
+		  >
+		    Place an Order
+		  </button>
+		</div>
+
+	</div>
+
+	
+	
+</section>
+
+</template>
+
+
+<script setup>
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Import components
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Block
+import CardOrderItem  from '@pf/src/modules/orders/components/blocks/CardOrderItem.vue'
+// Sections
+import AskToLogin     from '@pf/src/modules/orders/components/sections/AskToLogin.vue'
+import Succes         from '@pf/src/modules/orders/components/sections/Succes.vue'
+import EmptyState     from '@pf/src/modules/orders/components/sections/EmptyState.vue'
+import FormOrderDetails         	from '@pf/src/modules/orders/components/sections/FormOrderDetails.vue'
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Import libs
+///////////////////////////////////////////////////////////////////////////////////////////////////
+import { computed, onMounted } from 'vue'
+import { useRoute,useRouter } from 'vue-router'
+
+import * as auth from '@pf/src/modules/auth/store/auth';
+import * as shopcart from '@pf/src/modules/orders/store/shopcart';
+import * as orders from '@pf/src/modules/orders/store/orders';
+import * as users from '@pf/src/modules/users/store/users';
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Variables and computed
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Accessing router and store
+
+const route = useRoute()
+const router = useRouter()
+const cartTotalPrice = computed(() => shopcart.getters.cartTotalPrice)
+
+const order = computed(() => orders.state.current)
+const user = computed(() => users.state.current)
+
+/////////////////////////////
+// Store Verification
+/////////////////////////////
+const errorName = computed(() => {
+  return orders.state.current.user.name.length < 2 ? "Fill the name field" : false
+})
+
+const errorPhoneOrMessenger = computed(() => {
+  const phoneError = orders.state.current.user.phone.number;
+  const messengerError = (orders.state.current.user.messenger.type && orders.state.current.user.messenger.value); // Пример 
+
+  if (!phoneError && messengerError) {
+    return true;
+  } else {
+  	return false	;
+  }
+});
+
+const errorAdress = computed(() => {
+  if (orders.state.current.delivery !== "Pickup") { 
+    return orders.state.current.delivery.address < 2 ? "Заполните поле адреса" : false
+  } else {
+    return false
+  }
+})
+
+const errorDelivery = computed(() => {
+  if (orders.state.current.delivery.type) { 
+    return false
+  } else {
+    return true
+  }
+})
+
+const errorPayment = computed(() => {
+  if (orders.state.current.payment.type) { 
+    return false
+  } else {
+    return true
+  }
+})
+
+
+async function handleCreate() {
+  let order = await orders.actions.create(shopcart.state.positions, shopcart.state.organization);
+
+  if (order) {
+  	router.push({
+  		name: 'Order Status',
+  		params: {
+  			order: order._id
+  		}
+  	})
+  } else {
+  	alert('something wrong')
+  }
+}
+</script>
+
+<style lang="scss">
+
+.round-wrapper {
+	position: relative;
+
+	.round {
+		margin: 0;
+		margin-right: 1rem;
+	}
+
+	input:checked {
+		background: #00ff88;
+	}
+
+	.round-checkmark {
+		position: absolute;
+		width: 0.5rem;
+		height: 0.5rem;
+		background: white;
+
+		left: 0.5rem;
+		top:  0.5rem;
+
+		opacity: 1;
+	}
+}
+</style>