@ozdao/prometheus-framework 0.1.36 → 0.1.37

package/src/modules/products/components/blocks/LeftoverPositions.vue

@@ -1,153 +1,82 @@
 <template>
-  <div class="w-100">
-    <div class="flex">
-      <h5 class="mn-small">
-        Изменения остатков
-      </h5>
-      <div>
-        <a v-if="showAddNew === false" class="mn-r-small t-main h5" @click="changeAdd()">Добавить</a>
-        <a v-else class="t-main h5" @click="changeAdd()">Закрыть</a>
-        <a v-if="showAddNew === false" class="mn-r-small t-main h5" @click="reserOrderList()">Сбросить</a>
-      </div>
-
-    </div>
-     
-    <div  v-if="showAddNew !== false"  class="mn-small block">
-      <div class="w-100 flex-nowrap flex ">
-        <div class="w-100 flex-nowrap flex">
-          <vue-select :options="products"  v-model="techStack" :label-by="'name'"  searchable clear-on-close  :placeholder="'Выберите товар'" :close-on-select="true"> </vue-select>
-          <vue-select v-if="techStack && techStack.modifications.length > 0" :options="techStack.modifications"  :placeholder="'Выберите модификацию'"  v-model="techStack2" :label-by="'name'"  searchable clear-on-close :close-on-select="true"> </vue-select>
-        </div>
-        <input 
-          class="mn-r-regular w-20 input-text input" 
-          type="number"
-          v-model.number="techStack3" 
-          placeholder="Количество">
-        <button :disabled="isProductValid" @click="addProductToLeftover()" class=" w-20 button">Добавить</button>
-      </div>
-    </div>
-  
-    <ul  class="flex-column flex-wrap block">
-      <span v-if="order.positions.length < 1" class="w-100">Вы еще не добавили позиции</span> 
-
-      <li v-for="(product, index) in order.positions" :key="product._id" class="w-100">
-        <!-- <img v-if="product.images" :src="(FILE_SERVER_URL || '') + require( `@/assets/images/products/${product.images.links[0]}`)"> -->
-        <!-- <img v-if="!product.images" :src="(FILE_SERVER_URL || '') + require( `@/assets/icons/photo.svg`)"> -->
-        <div class="w-100 flex-center flex-nowrap flex">
-          <span class="mn-r-regular w-100">{{ product.name }}</span>
-          <input 
-            @input="updateInputText('leftovers', 'current.positions[' + index + '].quantity', $event)" 
-            :value="product.quantity" 
-            placeholder="Маргарита"
-            class="mn-r-regular w-20 input-text input" 
-          />
-          <a class="w-20 button" @click="deleteItem(product)">Удалить</a>
-        </div>
-        <hr v-if="!(index == order.positions.length - 1)" class="mn-t-small mn-small w-100 ">
+  <div>
+    <ul 
+      class="flex-column flex-wrap block"
+    >
+      <span 
+        v-if="order.positions.length === 0" 
+        class="w-100"
+      >
+        No positions added yet
+      </span> 
+
+      <li 
+        v-for="(product, index) in order.positions" 
+        :key="product._id" 
+        class="w-100 flex-center flex-nowrap flex"
+      >
+        <span 
+          class="mn-r-regular w-100"
+        >
+          {{ product.name }}
+        </span>
+
+        <Field 
+          v-model:field="product.price"
+          type="number"   
+          label="Price" 
+          :symbol="returnCurrency()"
+          class="bg-grey pd-medium radius-small" 
+        />
+
+        <Field 
+          v-model:field="product.quantity" 
+          type="number"  
+          label="Quantity" 
+          class="bg-grey pd-medium radius-small" 
+          :symbol="product.type"
+        />
+       
+        <a
+          class="button" 
+          @click="deleteProduct(index)"
+        >
+          Delete
+        </a>
+        <!-- <hr v-if="index < order.positions.length - 1" class="mn-t-small mn-small w-100 "> -->
       </li>
     </ul>
   </div>
 </template>
 
+<script setup>
+import { ref, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 
-<script setup="props">
-    // GLOBAL
-	import {ref,computed,reactive,toRefs } from 'vue'
-	import { useRouter,useRoute } from 'vue-router'
-
-	const router = useRouter()
-  const route = useRoute()
-
-	const props = defineProps({
-	  order: Object,
-    products: Array,
-	});
-
-  let data = reactive([])
-  let reactiveData = toRefs(data)
+import Field from '@pf/src/components/Field/Field.vue';
 
-  const techStack = ref(null)
-  const techStack2 = ref(null)
-  const techStack3 = ref(null)
-  function test () {
-     console.log(techStack)
-  }
-
- 
-  const isProductValid = computed(() => { 
-    if (techStack.value === null || techStack3.value === null || techStack3.value === '') {
-      return true;
-    } else {
-      if (techStack.value.modifications.length > 0) {
-        if (techStack2.value === null) {
-          return true 
-        } else {
-          return false 
-        }
-      }
-    }
-
-    })
-   //  if (techStack.value.modifications.length > 0) {
-   //    if (techStack2.value !== null) {
-   //      return true 
-   //    } else {
-   //      return false 
-   //    }
-   // } else {
-   //     if (techStack.value !== null) {
-   //      return true 
-   //    } else {
-   //      return false
-   //    }
-   // } })
+import * as leftovers from '@pf/src/modules/products/store/leftovers';
 
-  function addProductToLeftover () {
-     
-     if (techStack.value.modifications.length > 0) {
-        techStack2.value.quantity = techStack3.value
-     } else {
-        techStack.value.quantity = techStack3.value
-     } 
-     store.dispatch('leftovers/addProductToLeftover', techStack.value.modifications.length > 0 ? techStack2.value : techStack.value)
-     showAddNew.value = !showAddNew.value;
-  }
-
-  function deleteItem (item) {
-     store.commit('leftovers/deleteItemFromLeftover', item)
-  }
+const router = useRouter();
+const route = useRoute();
 
-  var showAddNew = ref(false)
+const props = defineProps({
+  order: Object
+});
 
-  function reserOrderList () {
-    if (route.params._id) store.dispatch('leftovers/fetch', route.params._id).then(
-
-      succes => { console.log(succes) },
-      error => {  
-        console.log('eror') 
-      }
-    ) 
-
-    if (!route.params._id) store.commit('leftovers/reset')
-      
-  }
-
-  function changeAdd () {
-   showAddNew.value = !showAddNew.value;
-  }
+function deleteProduct(index) {
+  leftovers.actions.deleteItemFromLeftover(props.order.positions[index]);
+}
 
-  function productSizes (product) { 
-    const productData = store.state.products.all.find(p => p._id === product._id)
-    var computedProduct = computed(() => store.getters['orders/getProductSizes'](productData))
-    return computedProduct.value
-  }
-  function productColors (product) { 
-    const productData = store.state.products.all.find(p => p._id === product._id)
-    var computedProduct = computed(() => store.getters['orders/getProductColors']({product, productData}))
-    return computedProduct.value
-  }
+function updateProductQuantity(index, event) {
+  props.order.positions[index].quantity = event.target.value;
+}
 
+function updateProductPrice(index, event) {
+  props.order.positions[index].price = event.target.value;
+}
 </script>
+  
 
 <style lang="scss" >
 .vue-select {

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

@@ -1,114 +1,159 @@
 <template>
-   <!-- Toolbar -->
-  <section class="br-bot-dark bg-white pd-big">
-    <header class="flex-nojustify flex-bottom flex-nowrap flex">
-      <h1 v-if="!route.params._id" class="mn-r-small">
-        Изменить остатки
-      </h1>
-
-      <h1 v-if="route.params._id" class="mn-r-small">
-        Изменить
-        <!-- {{leftover.type}} -->
-        <span v-if="leftover.type === 'loss'">списание</span>
-         <span v-if="leftover.type === 'inventory'">инвентаризацию</span>
-      </h1>
-    </header>
-  </section>
-
-
-  <section class="br-bot-dark bg-grey pd-big">
-
-    <div v-if="!route.params._id" class="mn-small flex-wrap block">
-      <InputSelect :obj="'leftovers'" :prop="'current.type'" :value="leftover.type" label="Выберите тип">
-        <option value="loss">Списание</option>
-        <option value="inventory">Остаток</option>
-      </InputSelect>
-    </div>
-
-    <LeftoverPositions :order="leftover" :products="Products" />
-      
-  </section>
-
-  <section class="pd-big flex-nojustify flex">
-    <a @click="onSubmit()" class="mn-r-small button">Сохранить</a> 
-    <a v-if="route.params._id" @click="onDelete()" class="t-main br-l-dark bg-white button">Удалить</a>
+   <header class="mn-medium flex-v-center flex-nowrap flex">
+    <h2 class="mn-r-medium">Inventory</h2>
+    <!-- <button 
+      @click="$router.push({
+        name: 'LeftoverAdd'
+      })" 
+      class="radius-100p i-big hover-scale-1 cursor-pointer t-white bg-second">
+        +
+    </button> -->
+  </header>
+  
+  <h5 class="mn-small">Select Type</h5>
+
+  <Select 
+    v-model:select="leftovers.state.current.type" 
+    :options="[
+      'stock-in',
+      'stock-out',
+      'write-off'
+    ]"
+    :placeholder="'Select type'"
+    class="mn-semi bg-grey pd-medium radius-small"
+  />
+
+
+  <h5 class="mn-small">Add Position</h5>
+
+  <div class="mn-semi gap-thin flex-nowrap flex">
+    <CardPosition 
+      @add="addProduct"
+      :products="Products"
+    />
+  </div>
+
+
+  <h5 
+    class="mn-small"
+  >
+    Invetory Sheet
+    <a 
+      class="mn-l-thin t-main" 
+      @click="resetOrderList"
+    >
+      Reset
+    </a>
+  </h5>
+
+
+
+  <LeftoverPositions 
+    :order="leftovers.state.current" 
+    :products="Products" 
+    class="mn-semi"
+  />
+
+  <section class="gap-thin flex-v-center flex-nojustify flex">
+    <h3 class="mn-r-auto">
+      In total: {{formatPrice(totalPrice)}}
+    </h3>
+    <a 
+      @click="onSubmit()" 
+      class="bg-main button"
+    >
+      Save
+    </a> 
+    <a 
+      v-if="route.params._id" 
+      @click="onDelete()" 
+      class="t-white bg-red button"
+    >
+      Delete
+    </a>
   </section>
 </template>
 
 
 <script setup>
-  import InputText    from '@/components/elements/InputText.vue'
-  import InputSelect  from '@/components/elements/InputSelect.vue'
-
-  import LeftoverPositions    from '@/components/blocks/LeftoverPositions.vue'
-
-  import { computed, onMounted, reactive, toRefs,ref } from 'vue'
-  import { useStore } from 'vuex'
-  import { useRoute,useRouter } from 'vue-router'
+  import Field from '@pf/src/components/Field/Field.vue';
+  import Select from '@pf/src/components/Select/Select.vue';
+  import SelectMulti from '@pf/src/components/SelectMulti/SelectMulti.vue';
+
+  import LeftoverPositions from '@pf/src/modules/products/components/blocks/LeftoverPositions.vue'
+  import CardPosition from '@pf/src/modules/products/components/blocks/CardPosition.vue';
+  import { computed, onMounted, ref, reactive } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
  
+  import * as leftovers from '@pf/src/modules/products/store/leftovers';
+  import * as products from '@pf/src/modules/products/store/products';
+
+  const route = useRoute();
+  const router = useRouter();
   
-  const store = useStore()
-  const route = useRoute()
-  const router = useRouter()
-  console.log( route.params._id)
-  
-  if (route.params._id) await store.dispatch('leftovers/fetch', route.params._id).then(
+  const Products = ref(products.state.all); // Обновите это значение соответствующим образом
+
+  const totalPrice = computed(() => {
+    return leftovers.state.current.positions.reduce((sum, position) => {
+      return sum + (position.price * (position.quantity || 1));
+    }, 0);
+  });
 
-    succes => { console.log(succes) },
-    error => {  
-      console.log('eror') 
+  onMounted(async () => {
+    if (route.params._id) {
+      try {
+        await leftovers.actions.fetch(route.params._id);
+      } catch (error) {
+        console.error('error');
+      }
+    } else {
+      leftovers.state.current = { type: "", order: "", positions: [] };
     }
-  ) 
 
-  if (!route.params._id) store.commit('leftovers/reset')
+    try {
+      const productsResponse = await products.actions.read({
+        organization: '65141c476cf9860013b49f6d'
+      });
+      Products.value = productsResponse;
+    } catch (error) {
+      console.error('error');
+    }
+  });
 
-  await store.dispatch('products/fetchProducts')
+  function resetOrderList() {
+    if (route.params._id) {
+      leftovers.actions.fetch(route.params._id);
+    } else {
+      leftovers.state.current = { type: "", order: "", positions: [] };
+    }
+  }
 
-  const leftover = computed(() => store.state.leftovers.current)
-  const Products = computed(() => store.state.products.all)
+  function addProduct(product) {
+    leftovers.actions.addProductToLeftover(product);
+  }
 
   function onSubmit() {
     if (route.params._id) {
-      store.dispatch('leftovers/update', store.state.leftovers.current)
+      leftovers.actions.update(leftovers.state.current).then(
+        () => router.push({ name: 'Backoffice Leftovers' }),
+        (error) => console.error('error')
+      );
     } else {
-      store.dispatch('leftovers/create', store.state.leftovers.current).then(
-        succes => { 
-          router.push({name: 'Leftovers'})
-        },
-        error => {  
-          console.log('error') 
-        }
-      )
+      leftovers.actions.create(leftovers.state.current).then(
+        () => router.push({ name: 'Backoffice Leftovers' }),
+        (error) => console.error('error')
+      );
     }
   }
 
   function onDelete() {
-    store.dispatch('leftovers/delete', route.params._id).then(
-        succes => { 
-          router.push({name: 'Leftovers'})
-        },
-        error => {  
-          console.log('error') 
-        }
-      )
-  }
-
-  function productSizes2 (_id) { 
-
-      const productData2 = store.state.products.all.find(product => product._id === _id);
-      
-
-      // console.log(productData2)
-      const computedProduct = computed(() => store.getters['leftovers/getProductSizes'](productData2))
-      return computedProduct.value
-  }
-  function productColors ({_id,size}) { 
-    const productData = store.state.products.all.find(product => product._id === _id);
-    var computedProduct = computed(() => store.getters['leftovers/getProductColors']({productData,size}))
-    return computedProduct.value
+    leftovers.actions.delete(route.params._id).then(
+      () => router.push({ name: 'Backoffice Leftovers' }),
+      (error) => console.error('error')
+    );
   }
+</script>
 
-  </script>
 
 <style lang="scss">
 

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

@@ -1,76 +1,103 @@
 <template>
-   <!-- Toolbar -->
-  <section class="br-bot-dark bg-white pd-big">
-    <header class="flex-nojustify flex-bottom flex-nowrap flex">
-      <h1 class="mn-r-small">Остатки</h1>
-      <router-link :to="'/admin/leftovers/add'"  class="i-regular pd-thin button-delete button"><img src="@/assets/icons/plus-white.svg"></router-link>
-     </header>
-  </section>
-
-   <div class="flex-nowrap flex product-tab-header">
-    <button @click="changeTab('all')" :class="{'product-tab-active':data.currentTab === 'all'}" 
-    class="br-right-dark w-100  bg-white flex-center pd-semi-big flex">
-      Все
-    </button>
-    <button @click="changeTab('loss')" :class="{'product-tab-active':data.currentTab === 'loss'}" 
-    class="br-right-dark w-100 bg-white flex-center pd-semi-big flex">
-      Списания
+  <header class="mn-medium flex-v-center flex-nowrap flex">
+    <h2 class="mn-r-medium">Inventory</h2>
+    <button 
+      @click="$router.push({
+        name: 'LeftoverAdd'
+      })" 
+      class="radius-100p i-big hover-scale-1 cursor-pointer t-white bg-second">
+        +
     </button>
+  </header>
+  
+  <section class="mn-semi pd-medium bg-grey radius-big">
+    <p class="mn-thin">Spended:</p>
+    <h3>{{formatPrice(totalPrice)}}</h3>
+  </section>
 
-    <button @click="changeTab('inventory')" :class="{'product-tab-active':data.currentTab === 'inventory'}" 
-   class="br-right-dark  w-100 bg-white  flex-center pd-semi-big flex">
-      Инвертаризация
-    </button>
+  <!-- <h3>Low Stock</h3>
+
+  <section class="mn-semi pd-medium bg-grey radius-big">
+    <div>
+      Name: Code Red
+      Left: 3
+      <button>add</button>
+    </div>
+    <div>
+      Name: Code Red
+      Left: 3
+      <button>add</button>
+    </div>
+    <div>
+      Name: Code Red
+      Left: 3
+      <button>add</button>
+    </div>
+  </section> -->
+
+  <Tab 
+    v-model:selected="tab"
+    :tabs="[
+      { name: 'All',        value: 'all' },
+      { name: 'Stock-In',   value: 'stock-in' },
+      { name: 'Stock-Out',  value: 'stock-out' }, 
+      { name: 'Write-Off',  value: 'write-off' }, 
+    ]"
+    class="mn-small o-hidden h5 radius-big bg-grey"
+  />
+
+  <Feed
+    :states="{
+      empty: {
+        title: 'No Leftovers Found',
+        description: 'Currently, there are no leftovers available.'
+      }
+    }"
+    :store="{
+      read: (options) => leftovers.actions.read(options)
+    }"
+    :options="{
+      limit: 15,
+      // user: user
+    }"
+    v-slot="{ 
+      items 
+    }"
+  >
+    <CardLeftover 
+      v-for="leftover in items" 
+      :leftover="leftover"
+    />
+  </Feed>
+</template>
 
-  </div>
 
+<script setup>
+  import { computed, onMounted, reactive, ref } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
 
-  <section class="cols-1 bg-grey pd-big">
-    <!-- Empty State -->
-    <p v-if="leftovers.length === 0">У вас еще нет списаний</p>
-    <!-- Objects -->
-    <Leftover v-for="leftover in leftovers" :leftover="leftover"/>
-  </section>
-</template>
+  import Tab      from '@pf/src/components/Tab/Tab.vue'
+  import Feed from '@pf/src/modules/globals/components/sections/Feed.vue'
+  import CardLeftover from '../blocks/CardLeftover.vue'
 
+  import * as leftovers from '@pf/src/modules/products/store/leftovers' // Убедитесь, что путь к вашему файлу стора верный
 
-<script setup>
-  import Leftover from '@/components/blocks/Leftover.vue'
-  
-  import { computed, onMounted, reactive, toRefs,ref } from 'vue'
-  import { useStore } from 'vuex'
-  import { useRoute,useRouter } from 'vue-router'
- 
-  
-  const store = useStore()
   const route = useRoute()
-   const router = useRouter()
-
-  await store.dispatch('leftovers/fetchAll').then(
-    succes => { console.log('sycces') },
-    error => {  
-      console.log('eror') 
-    }
-  )
-
-  let data = reactive({currentTab: 'all'})
-
-  const leftovers = computed(() => { 
-    if (data.currentTab === 'all') {
-      return store.state.leftovers.all
-    } else {
-
-      const filtered = store.state.leftovers.all.filter(function(leftover, index) {
-        if (leftover.type === data.currentTab) return true; 
-      })
-      
-      return filtered
-    } 
-   
-  }) 
-
-  function changeTab (tab) {data.currentTab = tab; console.log(data.currentTab) }
-  </script>
+  const router = useRouter()
+
+  // Tab logic
+  const tab = ref(route.query.tab ? route.query.tab : 'all')
+  // await leftovers.actions.read()
+  const totalPrice = computed(() => {
+    return leftovers.state.all.reduce((totalSum, item) => {
+      const itemTotal = item.positions.reduce((sum, position) => {
+        return sum + (position.price * (position.quantity || 1));
+      }, 0);
+      return totalSum + itemTotal;
+    }, 0);
+  });
+
+</script>
 
 <style lang="scss">
 

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

@@ -51,9 +51,9 @@
 		}
 	};
 	
-	products.state.current.localization.forEach(localization => {
-  	text.messages[localization.locale].description = localization.text
-	})
+	// products.state.current.localization.forEach(localization => {
+  	// if (localization) text.messages[localization.locale].description = localization.text
+	// })
 
   const { t } = useI18n(text)