@ozdao/prometheus-framework 0.2.30 → 0.2.31

package/src/modules/products/components/pages/ProductEdit.vue

@@ -1,128 +1,261 @@
 <template>
-	<div class="for-transition w-100">
+	<div class="for-transition w-100 cols-1 pd-thin gap-thin">
     
-    <div class="pd-b-zero pd-t-zero pd-thin">
-      <Breadcrumbs class="pd-medium bg-grey radius-big"/>
-    </div>
-
-    <div class="pd-thin">
-      <header class="flex-nowrap flex bg-grey pd-medium radius-big">
-        <h1 v-if="route.params.product" class="mn-r-auto">Edit Product</h1>
-        <h1 v-else class="mn-r-auto">Create Product</h1>
-
-        <section class="flex-nowrap flex pd-thin">
-          <Button :submit="onSubmit" :callback="redirectTo">Save Product</Button>
-        </section>
-
-      </header>
-    </div>
-
-    <div class="pd-b-zero pd-t-zero pd-thin cols-2 gap-thin">
-    	
-    	<div class="mn-b-thin bg-grey pd-medium o-hidden radius-big">
-    		<h3 class="mn-b-semi">Profile</h3>
+    <Block class="flex-nowrap flex-v-center flex">
+      
+      <h1 class="mn-r-auto">
+			  {{ route.params.product ? products.state.current.name : 'Create Product' }}
+			</h1>
+
+			<Button 
+				v-if="route.params.product"
+      	:submit="onDelete" 
+      	:callback="redirectTo"
+      	class="bg-red mn-r-thin"
+      >
+    		Delete 
+    	</Button>
+
+      <Button 
+      	:submit="onSubmit" 
+      	:callback="redirectTo"
+      	class="bg-main"
+      >
+    		Save
+    	</Button>
+    </Block>
+
+    <Block
+			placeholder="The product doesn't have any images yet."
+			class="h-min"
+		>
+			<EditImages 
+				:images="products.state.current.images"
+				:uploadPath="'photos'" 
+				@update:images="(imagesNew) => { products.state.current.images = imagesNew }" 
+			/>
+		</Block>
+
+    <div class="cols-2 gap-thin">
+
+    	<Block
+  			title="Profile"
+  		>
 				<EditProductInfo 		
 					:product="products.state.current"
 				/>
-				<div class="mn-b-semi">
-					<h5>Categories</h5>
-					<Checkbox 
-						v-for="(category, index) in categories.state.all"
-	          :label="category.name"
-	          name="categories"
-	          :value="category.url"
-	          class="w-100 mn-t-small bg-white radius-small pd-small"
-	          :radio="products.state.current.category"
-	        />
+			</Block>
+
+			<Block
+  			title="Categories"
+  		>
+				<Checkbox 
+					v-for="(category, index) in categories.state.all"
+          :label="category.name"
+          name="categories"
+          :value="category.url"
+          class="w-100 mn-t-small bg-white radius-small pd-small"
+          :radio="products.state.current.category"
+          @update:radio="event => products.state.current.category = event"
+        />
+			</Block>
+
+			<Block
+				title="Parameters"
+				placeholder="No parameters added yet"
+				:actions="[{
+					label: '+',
+					function: () => products.state.current.information.push({name: '', value: ''})
+				}]"
+				class="cols-1 gap-thin"
+			>
+        <div 
+        	class="gap-thin flex-nowrap flex" 
+        	v-for="(item, index) in products.state.current.information" 
+        	:key="index"
+        > 
+          <Field
+            v-model:field="item.name"
+            placeholder="Название параметра"
+            class="w-100 bg-white radius-small pd-medium"
+          />  
+          <Field
+            v-model:field="item.value"
+            placeholder="Значение параметра"
+            class="w-100 bg-white radius-small pd-medium"
+          />
+          <div class="radius-small h-100 i-big flex-center flex aspect-1x1 bg-red">
+	          <IconDelete 
+	          	@click="() => products.state.current.information.splice(index, 1)" 
+	          	class="i-medium"
+	          />
+	        </div>
         </div>
-				<EditParameters 		
-					:items="products.state.current.information"
-					title="Parameters"
-	        emptyMessage="No parameters"
-	        addButtonLabel="Add parameter"
-	        keyName="name"
-	        valueName="value"
-					@add-info="addInfo"
-					@delete-info="deleteInfo"
-				/>
-				<EditParameters 
-	        :items="products.state.current.localization"
-	        title="Localization" 
-	        emptyMessage="No localizations"
-	        addButtonLabel="Add localization"
-	        keyName="locale"
-	        valueName="text"
-					@add-info="addLocale"
-					@delete-info="deleteLocale"
-	      />
-				
-				
-			</div>
-
-			<div class="">
-				<div class="mn-b-thin bg-grey pd-medium o-hidden radius-big">
-					<h3 class="mn-b-semi">Images</h3>
-					<EditProductImages 
-						:product="products.state.current"
-					/>
-				</div>
-			</div>
-			
+			</Block>
+
+			<Block
+				title="Localization"
+				placeholder="No localizations added yet"
+				:actions="[{
+					label: '+',
+					function: () => products.state.current.localization.push({name: '', value: ''})
+				}]"
+			>
+        <div 
+        	class="gap-thin mn-b-thin flex-nowrap flex" 
+        	v-for="(item, index) in products.state.current.localization" 
+        	:key="index"
+        > 
+          <Field
+            v-model:field="item.name"
+            placeholder="Название параметра"
+            class="w-100 bg-white radius-small pd-medium"
+          />  
+          <Field
+            v-model:field="item.value"
+            placeholder="Значение параметра"
+            class="w-100 bg-white radius-small pd-medium"
+          />
+          <div class="radius-small pd-small flex-center flex aspect-1x1 bg-red">
+	          <IconDelete 
+	          	@click="() => products.state.current.localization.splice(index, 1)" 
+	          	class="i-medium"
+	          />
+          </div>
+        </div>
+			</Block>
+
 		</div> 
+		
+		<Block
+	    title="Quantity Discount"
+	    class="mn-b-semi"
+	    :actions="[{
+				label: '+',
+				function: () => products.state.current.quantityDiscount.push({name: '', value: ''})
+			}]"
+	  >
+	  	<div 
+      	class="gap-thin mn-b-thin flex-nowrap flex" 
+      	v-for="(item, index) in products.state.current.quantityDiscount" 
+      	:key="index"
+      > 
+        <Field
+          v-model:field="item.name"
+          placeholder="Quantity"
+          class="w-100 bg-white radius-small pd-medium"
+        />  
+        <Field
+          v-model:field="item.value"
+          placeholder="Discount"
+          class="w-100 bg-white radius-small pd-medium"
+        />
+        <div class="radius-small pd-small flex-center flex aspect-1x1 bg-red">
+          <IconDelete 
+          	@click="() => products.state.current.quantityDiscount.splice(index, 1)" 
+          	class="i-medium"
+          />
+        </div>
+      </div>
+		</Block>
+
+		<!-- <EditModifications
+			:product="products.state.current"
+		/> -->
+
+		<Block
+	    title="Add Ingridient"
+	    class="mn-b-semi"
+	  >
+	    <CardPosition 
+	      @add="(item) => globals.actions.add(
+	        products.state.current.ingridients,
+	        item 
+	      )"
+	      :products="Products"
+	    />
+
+	    <Block
+		    placeholder="No positions added yet"
+		    class="pd-zero mn-b-semi"
+		  >
+		    <CardPosition 
+		      v-for="(product, index) in products.state.current.ingridients" 
+		      :key="product._id" 
+		      :product="product"
+		      :array="products.state.current.ingridients"
+		      :products="Products"
+		      @add="(item) => globals.actions.add(
+		        products.state.current.ingridients,
+		        item 
+		      )"
+		      @update="(item) => globals.actions.update(
+		        products.state.current.ingridients,
+		        item,
+		        index
+		      )"
+		      @delete="(item) => globals.actions.delete(
+		        products.state.current.ingridients,
+		        item,
+		        index
+		      )"
+		    />
+		  </Block>
+	  </Block>
+
 </div>
 	
 </template>
 
 <script setup>
 	// Import libs
-	import { reactive, computed, onMounted, toRefs } from 'vue'
+	import { reactive, computed, onMounted, ref } from 'vue'
 	import { useRoute, useRouter } from 'vue-router'
 	// Import components
 	import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'
 
+	import Block from '@pf/src/components/Block/Block.vue';
 	import Tab from "@pf/src/components/Tab/Tab.vue";
 	import Field from "@pf/src/components/Field/Field.vue";
 	import Select from "@pf/src/components/Select/Select.vue";
 	import Checkbox from "@pf/src/components/Checkbox/Checkbox.vue";
 	import Button from "@pf/src/components/Button/Button.vue";
 	import Popup from "@pf/src/components/Popup/Popup.vue";
+	import EditImages           from '@pf/src/components/EditImages/EditImages.vue';
+
+	import IconDelete from '@pf/src/modules/icons/navigation/IconDelete.vue';
+
+ 	import CardPosition from '@pf/src/modules/products/components/blocks/CardPosition.vue';
+
 
 	import EditProductInfo from '@pf/src/modules/products/components/sections/EditProductInfo.vue';
-  import EditCategories  	from '@pf/src/modules/products/components/blocks/EditCategories.vue'
-  import EditParameters from '@pf/src/modules/products/components/sections/EditParameters.vue';
-  import EditProductImages from '@pf/src/modules/products/components/sections/EditProductImages.vue';
   import EditModifications from '@pf/src/modules/products/components/sections/EditModifications.vue';
   
 	// Accessing router and store
+	import * as globals from '@pf/src/modules/globals/store/globals';
  	import * as products from '@pf/src/modules/products/store/products';
   import * as categories from '@pf/src/modules/products/store/categories';
 
 	const route = useRoute()
 	const router = useRouter()
 
+  const Products = ref(products.state.all);
+
+  onMounted(async() => { 
+
   // Data prefetching
- 	await categories.actions.fetchCategories()
-
-  if (route.params.product) {
-	  await products.actions.read({ _id: route.params.product });
-  } else {
-  	// await commit('products/clearProductState')
-  }
-  // Accessing state
-	function addInfo() {
-		products.state.current.information.push({name: '', value: ''});
-	}
+	 	await categories.actions.fetchCategories()
 
-	function deleteInfo(index) {
-		products.state.current.information.splice(index, 1);
-	}
+	  if (route.params.product) {
+		  await products.actions.read({ _id: route.params.product });
+	  } else {
+	  	// await commit('products/clearProductState')
+	  }
 
-	function addLocale() {
-		products.state.current.localization.push({locale: '', text: ''});
-	}
+  })
 
-	function deleteLocale(index) {
-		products.state.current.localization.splice(index, 1);
+	function onImagesUpdate(newImages) {
+	  products.state.current.images = newImages;
 	}
 	
 	function onSubmit() {
@@ -133,8 +266,17 @@
 		}
 	}
 
+	function onDelete() {
+		products.actions.deleteProduct(products.state.current._id)
+	}
+
 	function redirectTo () {
-		router.push({name: 'ProductEdit', params: { _id: route.params._id, product: products.state.current._id } })
+		router.push({
+			name: 'Organization', 
+			params: { 
+				_id: route.params._id
+			} 
+		})
 	}
 </script>
 

package/src/modules/products/components/pages/ProductRecommmendation.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="product-recommendation" class="min-h-100vh t-white bg-black">
+    <div id="product-recommendation" class="h-min-100vh t-white bg-black">
         <Loader v-if="loading" :status="loadingText" class="pos-fixed"/>
 
         <div v-if="!loading && !showInput" class="section">

package/src/modules/products/components/pages/Products.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="cols-2-1_3 gap-thin pd-thin">
+  <div class="cols-2-1_3 bg-grey radius-big gap-thin pd-thin">
     <FilterProducts
 
     /> 
-
     <Feed
       :states="{
         empty: {
@@ -18,11 +17,15 @@
       :options="{
         limit: 15,
         organization: route.params._id,
+        categories: route.query.categories,
+        prices: route.query.prices,
+        delivery: route.query.delivery,
         // user: user
       }"
       v-slot="{ 
         items 
       }"
+      class="cols-3 gap-thin"
     >
       <CardProduct
         v-for="product in items"
@@ -51,7 +54,7 @@
   // Import components
   import FilterProducts from '@pf/src/modules/products/components/sections/FilterProducts.vue'
 
-  import Feed from '@pf/src/modules/globals/components/sections/Feed.vue'
+  import Feed from '@pf/src/components/Feed/Feed.vue'
   import CardProduct from '@pf/src/modules/products/components/blocks/CardProduct.vue'
 
   // Accessing router and store

package/src/modules/products/components/pages/ProductsBackoffice.vue

@@ -5,7 +5,7 @@
       @click="$router.push({
         name: 'AddProduct'
       })" 
-      class="radius-100p i-big hover-scale-1 cursor-pointer t-white bg-second">
+      class="radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second">
         +
     </button>
   </header>
@@ -47,10 +47,8 @@
       :key="product._id"
       :product="product"
       @click="$router.push({
-        name: 'Product Organization', 
+        name: 'ProductEdit', 
         params: { 
-          _id: 
-          route.params._id, 
           product: product._id 
         } 
       })" 
@@ -66,7 +64,7 @@ import { useRoute, useRouter } from 'vue-router'
 import * as products from '@pf/src/modules/products/store/products' // Путь к вашему стору
 
 // Import components
-import Feed from '@pf/src/modules/globals/components/sections/Feed.vue'
+import Feed from '@pf/src/components/Feed/Feed.vue'
 import CardProduct from '@pf/src/modules/products/components/blocks/CardProduct.vue'
 import Tab      from '@pf/src/components/Tab/Tab.vue'
 

package/src/modules/products/components/sections/EditModifications.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<!-- <p v-if="product.modifications.length == 0" class="mn-b-small w-100">У продукта еще не заданы модификации.</p>  -->
+		<p v-if="product.modifications.length == 0" class="mn-b-small w-100">У продукта еще не заданы модификации.</p> 
 		
 		<!-- Modification Info -->
 		<div class="mn-b-small flex-column flex-wrap block" v-for="(modification, index) in product.modifications" :key="index"> 
@@ -20,7 +20,7 @@
 				<button @click="deleteModification(index)" class="mn-l-small i-normal pd-regular button-delete button">
 					<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 						<rect width="24" height="24" transform="translate(1 1)" />
-						<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9996 10.8L22.8994 0.900244L25.0993 3.1002L15.1995 13L25.0993 22.8998L22.8994 25.0998L12.9996 15.2L3.09976 25.0998L0.899801 22.8998L10.7996 13L0.899801 3.1002L3.09976 0.900244L12.9996 10.8Z" fill="white"/>
+						<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9996 10.8L22.8994 0.900244L25.0993 3.1002L15.1995 13L25.0993 22.8998L22.8994 25.0998L12.9996 15.2L3.09976 25.0998L0.899801 22.8998L10.7996 13L0.899801 3.1002L3.09976 0.900244L12.9996 10.8Z" fill="rgb(var(--white))"/>
 					</svg>
 
 				</button>
@@ -41,7 +41,7 @@
 				<button @click="deleteCharacteristic(index, index2)"  class="mn-l-small i-normal pd-regular button-delete button">
 					<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 						<rect width="24" height="24" transform="translate(1 1)" />
-						<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9996 10.8L22.8994 0.900244L25.0993 3.1002L15.1995 13L25.0993 22.8998L22.8994 25.0998L12.9996 15.2L3.09976 25.0998L0.899801 22.8998L10.7996 13L0.899801 3.1002L3.09976 0.900244L12.9996 10.8Z" fill="white"/>
+						<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9996 10.8L22.8994 0.900244L25.0993 3.1002L15.1995 13L25.0993 22.8998L22.8994 25.0998L12.9996 15.2L3.09976 25.0998L0.899801 22.8998L10.7996 13L0.899801 3.1002L3.09976 0.900244L12.9996 10.8Z" fill="rgb(var(--white))"/>
 					</svg>
 
 				</button>

package/src/modules/products/components/sections/EditProductInfo.vue

@@ -1,70 +1,60 @@
 <template>
-    <div class="mn-b-big flex-column flex">
-    	<!-- {{
-    		store.products.current
-    	}}
+    <Select 
+      v-model:select="product.status"
+      label="Status"
+      :options="[
+        'unpublished', 
+        'published',
+        'archivied'
+      ]"
+      
+      placeholder="Display product"
+      class="pos-relative w-100 mn-b-small bg-white radius-small pd-medium"
+    />
+
+    <Field 
+      v-model:field="product.name" 
+      label="Name"
+      placeholder="Введите название"
+      class="w-100 mn-b-small bg-white radius-small pd-medium"
+    />
+    <Field 
+      v-model:field="product.price" 
+      label="Price"
+      placeholder="Введите цену" 
+      class="w-100 mn-b-small bg-white radius-small pd-medium"
+      type="number"
+    >
       <Select 
+        v-model:select="product.price.currency" 
+        placeholder="฿"
         :options="[
-            'unpublished', 
-            'published',
-            'archivied'
+          '฿'
         ]"
-        v-model:select="store.products.state.current.status"
-        placeholder="Display product"
-        class="w-100 mn-b-small bg-white radius-small pd-medium"
+        class="pos-relative bg-grey pd-thin radius-thin"
       />
+    </Field>
 
-      <Field 
-        v-model:field="store.products.state.current.name" 
-        placeholder="Введите название"
-        class="w-100 mn-b-small bg-white radius-small pd-medium"
-      />
-      <Field 
-        v-model:field="store.products.state.current.price" 
-        placeholder="Введите цену" 
-        class="w-100 mn-b-small bg-white radius-small pd-medium"
-        type="number"
-      />
 
-      <Field
-        v-model:field="store.products.state.current.description" 
-        placeholder="Введите описание" 
-        class="w-100 mn-b-small bg-white radius-small pd-medium"
-        type="textarea"
-      /> -->
-    </div>
+    <Field
+      v-model:field="product.description" 
+      label="Description"
+      placeholder="Введите описание" 
+      class="w-100 bg-white radius-small pd-medium"
+      type="textarea"
+    />
 </template>
 
-<script setup="props">
-import Button  from '@pf/src/components/Button/Button.vue'
+<script setup>
 
+import Button  from '@pf/src/components/Button/Button.vue'
 import Field from "@pf/src/components/Field/Field.vue";
 import Select from "@pf/src/components/Select/Select.vue";
 
-/////////////////////////////
-// COMPONENT DEPENDENCIES
-/////////////////////////////
-import { toRefs } from 'vue';
-// import { useStore } 	from "vuex";
-/////////////////////////////
-// HELPERS
-/////////////////////////////
-function functionReload () {
-	location.reload()
-}
 
-/////////////////////////////
-// CREATED
-/////////////////////////////
 const props = defineProps({
   product: Object,
 });
-
-const { product } = toRefs(props);
-
-/////////////////////////////
-// MOUNTED
-/////////////////////////////
 </script>
 
 <style lang="scss">