@ozdao/prometheus-framework 0.2.53 → 0.2.55

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

@@ -1,79 +1,104 @@
 <template>
-  <header class="mn-b-medium flex-v-center flex-nowrap flex">
-    <h2 class="mn-r-medium">Edit Order</h2>
-  </header>
-
-	<section class="gap-thin flex-nowrap flex mn-b-semi">
-	    
-	  <div class="w-100 br-solid br-1px br-black-transp-10 radius-big pd-medium">
-	    <p class=" mn-b-small p-big">
-	      Статус заказа:<br>{{order.status}}
-	    </p>
-	    <button class="button">Подтвердить заказ</button>
-	  </div>
-
-	  <div class="w-100 br-solid br-1px br-black-transp-10 radius-big pd-medium">
-	    <p class="mn-b-semi p-big">Статус оплаты:<br>{{order.payment?.status}}</p>
-	    <button class="button">Изменить статус оплаты</button>
-	  </div>
-
-	   
-	</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"
+  <div>
+    <header class="mn-b-medium flex-v-center flex-nowrap flex">
+      <h2 class="mn-r-medium">Create Order</h2>
+    </header>
+
+    <Popup 
+      title="Добавить участника" 
+      @close-popup="closeProductsPopup" 
+      :isPopupOpen="isOpenProductsPopup"
+      class="bg-white w-min-30r w-max-30r radius-big pd-medium"
     >
-      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-thinw-100 flex-v-center flex block">
-	<p class="p-big">Сумма к оплате:
-		<span v-if="order.info?.delivery === 'Самовывоз'" class="p-big t-semi">{{ orderTotalPrice / 100 }} ₽</span>
-		<span v-if="order.info?.delivery === 'Курьером'" class="p-big t-semi">{{ orderTotalPrice / 100 + 350 }} ₽</span>
-		<span v-if="order.info?.delivery === 'Почтой'" class="p-big t-semi">{{ orderTotalPrice / 100 + 550 }} ₽</span>
-		(Заказ {{orderTotalPrice / 100}} ₽ + доставка
-		<span v-if="order.info?.delivery === 'Самовывоз'" >0</span>
-		<span v-if="order.info?.delivery === 'Курьером'" >350</span>
-		<span v-if="order.info?.delivery === 'Почтой'">550</span>
-	    ₽)  
-	</p>
-
-	<button class="mn-l-auto button">Запросить онлайн</button>
-</div>
 
+      <h3 class="mn-b-small">Add to order</h3>
+
+      <div class="bg-grey mn-b-thin h-min-20r h-max-20r o-scroll pd-medium radius-big">
+        <Feed
+          :search="true"
+          :states="{
+            empty: {
+              title: 'No Products Found',
+              description: 'Currently, there are no such products available.'
+            }
+          }"
+          :store="{
+            read: (options) => products.actions.read(options),
+            state: null
+          }"
+          :options="{
+            organization: route.params._id
+          }"
+          v-slot="{ 
+            items 
+          }"
+          class=""
+        >
+          <CardOrderItem
+            v-for="(product, index) in items" :key="product._id"
+            :editable="false" 
+            :product="product" 
+            @click="() => { 
+              let p = { ...product };
+              p.quantity = 1;
+              globals.actions.add(orders.state.current.positions, p) 
+              closeProductsPopup();
+            }"
+            class="bg-white pd-thin radius-medium w-100 mn-b-thin"
+          />
+        </Feed>
+      </div>
+    </Popup>
+
+    <Block
+      title="Invetory Sheet"
+      :actions="[{
+        label: '+',
+        function: () => openProductsPopup()
+      }]"
+      class="mn-b-semi"
+    >
+      <span 
+        v-if="orders.state.current.positions.length === 0" 
+        class="w-100"
+      >
+        No positions added yet
+      </span> 
+
+      <CardOrderItem
+        v-for="(product, index) in orders.state.current.positions" 
+        :key="product._id"
+        :editable="true" 
+        :product="product" 
+        @increase="() => { globals.actions.increment(orders.state.current.positions, product) }"
+        @decrease="() => { globals.actions.decrement(orders.state.current.positions, product) }"
+        @remove="() => { globals.actions.delete(orders.state.current.positions, product) }"
+        class="mn-b-thin pd-thin radius-medium bg-white"
+      /> 
+    </Block>
+  <!-- 
+    <FormOrderDetails 	
+  		:order="orders.state.current"  
+  		@create="handleCreate"
+  		class="bg-grey pd-medium radius-big mn-b-semi"
+  	/> -->
+
+
+  <div class="mn-thinw-100 flex-v-center flex block">
+  	<p class="p-big">Сумма к оплате:
+  		<span v-if="order?.info?.delivery === 'Самовывоз'" class="p-big t-semi">{{ orderTotalPrice / 100 }} ₽</span>
+  		<span v-if="order?.info?.delivery === 'Курьером'" class="p-big t-semi">{{ orderTotalPrice / 100 + 350 }} ₽</span>
+  		<span v-if="order?.info?.delivery === 'Почтой'" class="p-big t-semi">{{ orderTotalPrice / 100 + 550 }} ₽</span>
+  		(Заказ {{orderTotalPrice / 100}} ₽ + доставка
+  		<span v-if="order?.info?.delivery === 'Самовывоз'" >0</span>
+  		<span v-if="order?.info?.delivery === 'Курьером'" >350</span>
+  		<span v-if="order?.info?.delivery === 'Почтой'">550</span>
+  	    ₽)  
+  	</p>
+
+  	<button class="mn-l-auto button">Запросить онлайн</button>
+  </div>
+</div>
 
 
 </template>
@@ -83,79 +108,43 @@
   import { computed, ref, defineProps, onMounted, reactive, toRefs, watch } from 'vue'
   import { useRoute } from 'vue-router'
 
+  import Feed from '@pf/src/components/Feed/Feed.vue'
+  import Popup from '@pf/src/components/Popup/Popup.vue';
 	import Block from '@pf/src/components/Block/Block.vue';
 
-  import ListPositions from '@pf/src/modules/products/components/blocks/ListPositions.vue'
+  import CardOrderItem  from '@pf/src/modules/orders/components/blocks/CardOrderItem.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 * as globals from '@pf/src/modules/globals/store/globals';
   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()
 
-  // Define props
-  const props = defineProps(['showProduct'])
-  props.showProduct = [];
+  // Popup
+  const isOpenProductsPopup = ref(false);
 
-  function addProduct(product) {
-    orders.actions.addProduct(product);
+  function openProductsPopup() {
+    isOpenProductsPopup.value = true;
   }
 
-  function deleteProduct(product) {
-    orders.actions.deleteProduct(product) 
+  function closeProductsPopup() {
+    isOpenProductsPopup.value = false;
   }
 
-  // Reactive data
-  let data = reactive([])
-  let reactiveData = toRefs(data)
-  var showAddNew = ref(false)
-	const Products = ref([])
+  // Data
+  let order = ref(null)
 
-  // Initialize order and products
-  let order = ref({})
-  // Replace store orders.actions with your orders.actions
   onMounted(async () => {
-    // Replace Vuex orders.actions with your orders.actions
-    try {
-      const productsResponse = await products.actions.read({
-        organization: '65141c476cf9860013b49f6d'
-      });
-      console.log(productsResponse)
-      Products.value = productsResponse;
-    } catch (error) {
-      console.error('error');
-    }
-
-    await orders.actions.fetchOrder(route.params.id) // Implement this action in your store
-
-    order.value = orders.state.current
-  })
-
-
-  function saveItemList() {
-    orders.actions.updateOrderpositions(route.params.id) // Replace Vuex action with your action
-  }
-
-  function changeEdit(index) {
-    data[index] = !data[index]
-  }
+    // await orders.actions.fetchOrder(route.params.id) // Implement this action in your store
 
-  function resetOrderList() {
-    orders.actions.fetchOrder(route.params.id) // Replace Vuex action with your action
-  }
-
-  function changeAdd() {
-    showAddNew.value = !showAddNew.value
-  }
+    // order.value = orders.state.current
+  })
 
-  // 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

@@ -10,15 +10,29 @@
 		<!-- 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 Form -->
+		<div
+			v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0" 
+			class="order-form col"
+		>
+			<FormClientDetails
+				:order="orders.state.current"  
+			/>
+			<FormDelivery 	
+				v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0"
+				:order="orders.state.current"  
+			/>
+			<FormPayment 	
+				v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0"
+				:order="orders.state.current"  
+			/>
+		</div>
 
 		<!-- Order positions -->
 		<div 
@@ -41,13 +55,33 @@
 			<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: {{returnCurrency()}} {{ Math.trunc(100 + 20 * orderOrganization[0]?.distance - 7,5 * (orderOrganization[0]?.distance  / 10))}} </p>
-				<p class="h3">Total: {{returnCurrency()}} {{ Math.trunc(100 + 20 * orderOrganization[0]?.distance - 7,5 * (orderOrganization[0]?.distance  / 10)) + cartTotalPrice.value }}  </p>
+				<p class="mn-b-thin">
+					Subtotal: 
+					{{ returnCurrency() }} 
+					{{ cartTotalPrice }}
+				</p>
+				<p class="mn-b-thin">
+					Delivery: 
+					{{ returnCurrency() }} 
+					{{ 
+						Math.trunc(100 + 20 * orderOrganization[0]?.distance - 7,5 * (orderOrganization[0]?.distance  / 10))
+					}} 
+				</p>
+				<p class="h3">
+					Total: 
+					{{ returnCurrency() }} 
+					{{ 
+						Math.trunc(100 + 20 * orderOrganization[0]?.distance - 7,5 * (orderOrganization[0]?.distance  / 10)) + cartTotalPrice.value 
+					}}  
+				</p>
 			</div>
 
-			<p class='mn-b-thin'>By making this purchase you agree to the General 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>
+			<p class='mn-b-thin'>
+				By making this purchase you agree to the General 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"
@@ -85,7 +119,10 @@ import CardOrderItem from '@pf/src/modules/orders/components/blocks/CardOrderIte
 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 FormClientDetails from '@pf/src/modules/orders/components/sections/FormClientDetails.vue'
+import FormDelivery from '@pf/src/modules/orders/components/sections/FormDelivery.vue'
+import FormPayment from '@pf/src/modules/orders/components/sections/FormPayment.vue'
 ///////////////////////////////////////////////////////////////////////////////////////////////////
 // Import libs
 ///////////////////////////////////////////////////////////////////////////////////////////////////
@@ -110,6 +147,7 @@ const user = computed(() => users.state.current)
 const cartTotalPrice = computed(() => shopcart.getters.cartTotalPrice)
 // Organization
 const orderOrganization = ref([])
+
 onMounted(async()=> {
 	orderOrganization.value = await organizations.actions.read({
 	  _id: shopcart.state.organization,
@@ -129,13 +167,13 @@ watch(() => orders.state.current.delivery.address, async (newFilterValue, oldFil
 // Store Verification
 /////////////////////////////
 const errorName = computed(() => {
-  if (orders.state.current.user.name?.length < 2) { return true } else { return false }
+  if (orders.state.current.client.name?.length < 2) { return true } else { return false }
 });
 
 const errorPhoneOrMessenger = computed(() => {
-  const hasMessengerType = orders.state.current.user.messenger?.type;
-  const hasMessengerValue = orders.state.current.user.messenger?.value?.length >	 2;
-  const hasPhone = orders.state.current.user.number?.length > 0;
+  const hasMessengerType = orders.state.current.client.messenger?.type;
+  const hasMessengerValue = orders.state.current.client.messenger?.value?.length >	 2;
+  const hasPhone = orders.state.current.client.number?.length > 0;
   // Ошибка, если нет ни номера телефона, ни корректного типа и значения мессенджера
   return !hasPhone && !(hasMessengerType && hasMessengerValue);
 });

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

@@ -77,7 +77,7 @@
 	    <div class="w-100">
 
 		    <CardOrganization 
-		    	v-if="orderOrganization"
+		    	v-if="orderOrganization[0]"
 		      :organization="orderOrganization[0]"
 		      :showRating="true"
 		      :showFollowers="false"
@@ -239,7 +239,7 @@
 
 	  orderOrganization.value = await organizations.actions.read({
 	    _id: order.value.organization,
-	    location: globals.state.position?.location,
+	    // location: globals.state.position?.location,
 	  });
 
 	})

package/src/modules/orders/components/sections/FormClientDetails.vue

@@ -0,0 +1,63 @@
+<template>
+  <Block title="Personal Data" class="mn-b-thin">
+    <Field 
+      v-model="order.client.name"     
+      label="Name*"    
+      placeholder="Enter your name"  
+      class="bg-white pd-medium radius-small mn-b-thin"
+    />
+    
+    <FieldPhone
+      v-model="order.client.phone"  
+      @country="(country) => { order.client.number = country }"
+      :inputOptions="{
+        placeholder: 'Enter contact phone number',
+        type: 'tel',
+      }"
+      :defaultCountry="'TH'"
+      :validCharactersOnly="true"
+      :dropdownOptions="{
+        showDialCodeInSelection: true,
+        showFlags: true,
+        showDialCodeInList: true
+      }" 
+      mode="national"
+      class="bg-white pd-small radius-small mn-b-thin" 
+    />
+
+    <p class="mn-b-small">
+     Prefer to chat instead of calling? Just drop your messenger info here:
+    </p>
+
+    <div class="flex-nowrap flex">
+      <Select 
+        :options="[
+          {name: 'Telegram',        value: 'telegram'}, 
+          {name: 'WhatsApp',        value: 'whatsapp'},
+          {name: 'Line',            value: 'line'}, 
+        ]"
+        @update:select="(option) => order.client.messenger.type = option.value"
+        placeholder="Messenger" 
+        size="small"
+        class="bg-white pd-medium radius-small mn-r-small"
+      />
+
+      <Field 
+        v-model="order.client.messenger.value"     
+        placeholder="Enter your contact here"  
+        class="bg-white pd-medium radius-small w-100"
+      />
+    </div>
+  </Block>
+</template>
+
+<script setup>
+import Block from '@pf/src/components/Block/Block.vue'
+import Field from '@pf/src/components/Field/Field.vue'
+import FieldPhone from '@pf/src/components/FieldPhone/FieldPhone2.vue'
+import Select from '@pf/src/components/Select/Select.vue'
+
+defineProps({
+  order: Object,
+});
+</script>

package/src/modules/orders/components/sections/FormDelivery.vue

@@ -0,0 +1,72 @@
+<template>
+  <Block title="Delivery" class="mn-b-thin" :tooltip="'Delivery by mail takes 3-5 days.'">
+    <div class="mn-b-small flex-nowrap flex">
+      <Radio 
+        v-model="order.delivery.type"
+        label="Courier"
+        value="courier"
+        class="bg-white pd-medium radius-small w-100 mn-r-small"
+      />
+      <Radio 
+        v-model="order.delivery.type"
+        label="Post"
+        value="Post"
+        class="bg-white pd-medium radius-small w-100 mn-r-small"
+      />
+    </div>
+    
+    <Address
+      label="Address"    
+      :apiKey="GOOGLE_MAPS_API_KEY" 
+      :address="order.delivery.address" 
+      :location="order.delivery.location"  
+      placeholder="Enter your address"  
+      class="bg-white radius-tl-medium radius-tr-medium t-black br-grey br-solid br-2px pd-medium"
+      @update:location="newLocation => {
+        order.delivery.location = newLocation;
+      }"
+      @update:address="newAddress => {
+        order.delivery.address = newAddress;
+      }"
+    />
+
+    <LocationMarker 
+      :apiKey="GOOGLE_MAPS_API_KEY" 
+      :address="order.delivery.address" 
+      :location="order.delivery.location"
+      class="mn-b-thin radius-bl-medium radius-br-medium h-15r o-hidden"
+      @update:location="newLocation => {
+        order.delivery.location = newLocation;
+      }"
+      @update:address="newAddress => {
+        order.delivery.address = newAddress;
+      }"
+    />
+
+    <Field 
+      v-model="order.comment"     
+      placeholder="Comments regarding the address (apartment unit, floor level, building section)"
+      type="textarea"  
+      class="bg-white pd-medium radius-small"
+    />
+  </Block>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import * as globals from '@pf/src/modules/globals/store/globals';
+import Block from '@pf/src/components/Block/Block.vue'
+import Address from '@pf/src/components/Address/Address.vue'
+import LocationMarker from "@pf/src/components/LocationMarker/LocationMarker.vue";
+import Radio from '@pf/src/components/Radio/Radio.vue'
+import Field from '@pf/src/components/Field/Field.vue'
+
+const props = defineProps({
+  order: Object,
+});
+
+onMounted(() => {
+  if (globals.state.position) props.order.delivery.address = globals.state.position.address
+  if (globals.state.position) props.order.delivery.location = globals.state.position.location
+})
+</script>

package/src/modules/orders/components/sections/FormPayment.vue

@@ -0,0 +1,27 @@
+<template>
+  <Block title="Payment">
+    <div class="mn-b-small flex-nowrap flex">
+      <Select 
+        v-model="order.payment.type"
+        :property="'value'"
+        :options="[
+          {name: 'Cash On Delivery',  value: 'cash'}, 
+          {name: 'Bank Transfer',     value: 'bank'},
+          {name: 'Crypto',            value: 'crypto'}, 
+        ]"
+        placeholder="Select type of payment" 
+        size="small"
+        class="bg-white pd-medium radius-small w-100"
+      />
+    </div>
+  </Block>
+</template>
+
+<script setup>
+import Block from '@pf/src/components/Block/Block.vue'
+import Select from '@pf/src/components/Select/Select.vue'
+
+defineProps({
+  order: Object,
+});
+</script>