Feat: Assign Seller (Transcoding) (adempiere#1582)

src/api/ADempiere/form/VPOS/index.js

@@ -146,11 +146,15 @@ export function listAvailableDiscounts({
  */
 
 export function listAvailableSellers({
-  posId
+  posId,
+  searchValue
 }) {
   return request({
     url: `/point-of-sales/${posId}/sellers`,
-    method: 'get'
+    method: 'get',
+    params: {
+      search_value: searchValue
+    }
   })
 }
 
@@ -1534,12 +1538,27 @@ export function listCashMovements({
  * List Available Cash
  * @param {int32} posId
  */
-
 export function listAvailableCash({
   posId
 }) {
   return request({
-    url: `/point-of-sales/terminals/${posId}/cash`,
+    url: `/point-of-sales/terminals/${posId}/cashs`,
     method: 'get'
   })
 }
+
+/**
+ * Allocate Seller
+ */
+export function allocateSeller({
+  posId,
+  salesRepresentativeId
+}) {
+  return request({
+    url: `/point-of-sales/terminals/${posId}/allocate-seller`,
+    method: 'put',
+    data: {
+      sales_representative_id: salesRepresentativeId
+    }
+  })
+}

src/components/ADempiere/Form/VPOS2/Options/cashManagement/cashOpening/fields/collectionAgent.vue

@@ -23,6 +23,10 @@ along with this program. If not, see <https:www.gnu.org/licenses/>.
     <el-select
       v-model="collectionAgent"
       style="width: 100%;"
+      filterable
+      clearable
+      remote
+      :remote-method="remoteMethod"
       @visible-change="findSeller"
     >
       <el-option
@@ -96,11 +100,30 @@ export default defineComponent({
         })
     }
 
+    function remoteMethod(query) {
+      const currentPos = store.getters.getVPOS
+      listAvailableSellers({
+        posId: currentPos.id,
+        searchValue: query
+      })
+        .then(response => {
+          const { sellers } = response
+          listSellers.value = sellers
+        })
+        .catch(error => {
+          showMessage({
+            message: error.message,
+            type: 'error'
+          })
+        })
+    }
+
     return {
       collectionAgent,
       listSellers,
       // Methods
-      findSeller
+      findSeller,
+      remoteMethod
     }
   }
 })

src/components/ADempiere/Form/VPOS2/Options/cashManagement/cashOpening/info.vue

@@ -16,35 +16,22 @@ along with this program. If not, see <https:www.gnu.org/licenses/>.
 
 <template>
   <el-card
-    shadow="never"
-    :body-style="{ padding: '5px' }"
+    shadow="hover"
+    :body-style="{ padding: '20px' }"
+    class="border-info"
   >
-    <el-row v-if="!isEmptyValue(listPaymentsOpenst)" :gutter="10">
-      <el-col
-        v-for="(payment, key) in listPaymentsOpenst"
-        :key="key"
-        :span="12"
-        style="margin: 10px 0px;"
-      >
-        <card-payments
-          :payment="payment"
-          :readonly="true"
-        />
-      </el-col>
-    </el-row>
     <el-row>
       <el-col
         :span="24"
         style="margin-top: 0px;"
-        class="border-info"
       >
         <p class="line-info">
           <b
             style="float: left"
           >
             {{ $t('form.pos.collect.collectionAgent') }}:
           </b>
-          <b v-if="!isEmptyValue(collectionAgent)" style="float: right">
+          <b v-if="!isEmptyValue(collectionAgent)" style="float: left; padding-left: 10px;">
             {{ collectionAgent.name }}
           </b>
         </p>
@@ -54,12 +41,26 @@ along with this program. If not, see <https:www.gnu.org/licenses/>.
           >
             {{ $t('pointOfSales.collection.field.description') }}:
           </b>
-          <b style="float: right">
+          <b style="float: left; padding-left: 10px;">
             {{ description }}
           </b>
         </p>
       </el-col>
     </el-row>
+    <el-divider />
+    <el-row v-if="!isEmptyValue(listPaymentsOpenst)" :gutter="10">
+      <el-col
+        v-for="(payment, key) in listPaymentsOpenst"
+        :key="key"
+        :span="8"
+        style="margin: 10px 0px;"
+      >
+        <card-payments
+          :payment="payment"
+          :readonly="true"
+        />
+      </el-col>
+    </el-row>
   </el-card>
 </template>
 

src/components/ADempiere/Form/VPOS2/Options/cashManagement/cashOpening/panel.vue

@@ -85,7 +85,7 @@
       <el-col
         v-for="(payment, key) in listPaymentsOpenst"
         :key="key"
-        :span="12"
+        :span="8"
         style="margin: 10px 0px;"
       >
         <card-payments

src/components/ADempiere/Form/VPOS2/Options/cashManagement/index.vue

@@ -45,7 +45,7 @@ import cashOpening from './cashOpening/index.vue'
 import cashWithdrawal from './cashWithdrawal'
 import cashClosing from './cashClosing/index.vue'
 import cashDetailClosing from './cashDetailClosing'
-import seller from './seller'
+import seller from '@/components/ADempiere/Form/VPOS2/Options/cashManagement/seller/index.vue'
 import unassignSeller from './unassignSeller'
 
 export default defineComponent({

src/components/ADempiere/Form/VPOS2/Options/cashManagement/seller/index.vue

@@ -0,0 +1,80 @@
+<!--
+ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+Contributor(s): Elsio Sanchez [email protected] https://github.com/elsiosanchez
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <el-row :gutter="10">
+    <el-col :span="8" style="width: 100% !important;">
+      <div @click="openSeller">
+        <el-card
+          shadow="never"
+          class="custom-card-options"
+          :body-style="{ padding: '10px' }"
+        >
+          <p
+            class="card-options-buttons"
+          >
+            <svg-icon icon-class="peoples" />
+            <i class="el-icon-bottom-right" />
+            <br>
+            {{ $t('form.pos.optionsPoinSales.cashManagement.assignSeller') }}
+          </p>
+        </el-card>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+import lang from '@/lang'
+import store from '@/store'
+export default defineComponent({
+  name: 'Seller',
+  setup() {
+    function openSeller() {
+      store.dispatch('listAvailableSellers')
+      store.dispatch('setModalDialogVPOS', {
+        title: lang.t('form.pos.optionsPoinSales.cashManagement.assignSeller'),
+        doneMethod: () => {
+          store.dispatch('allocateSeller')
+        },
+        componentPath: () => import('@/components/ADempiere/Form/VPOS2/Options/cashManagement/seller/panel.vue'),
+        isShowed: true
+      })
+    }
+    return {
+      openSeller
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.card-options-buttons {
+  cursor: pointer;
+  text-align: center !important;
+  color: black;
+  min-height: 50px;
+}
+.custom-card-options {
+  margin: 1px;
+  cursor: pointer;
+}
+.custom-card-options:hover {
+  background-color: #eaf5fe;
+  border: 1px solid #36a3f7;
+}
+</style>