email da inviare ai clienti ...
This commit is contained in:
14
src/views/ecommerce/cash/cash.scss
Executable file
14
src/views/ecommerce/cash/cash.scss
Executable file
@@ -0,0 +1,14 @@
|
||||
$heightBtn: 100%;
|
||||
|
||||
.card .product-image {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.container{
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.prod_trov{
|
||||
font-style: italic;
|
||||
}
|
||||
116
src/views/ecommerce/cash/cash.ts
Executable file
116
src/views/ecommerce/cash/cash.ts
Executable file
@@ -0,0 +1,116 @@
|
||||
import { defineComponent, onMounted, ref, watch, computed } from 'vue'
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useProducts } from '@store/Products'
|
||||
import { useI18n } from '@/boot/i18n'
|
||||
import { toolsext } from '@store/Modules/toolsext'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { costanti } from '@costanti'
|
||||
|
||||
import { shared_consts } from '@/common/shared_vuejs'
|
||||
import { CProductCard } from '@src/components/CProductCard'
|
||||
import { IProduct } from '@src/model'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'cash',
|
||||
components: { CProductCard },
|
||||
props: {},
|
||||
setup() {
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
const productStore = useProducts()
|
||||
const $router = useRouter()
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const cosa = ref(0)
|
||||
const cat = ref('')
|
||||
const loadpage = ref(false)
|
||||
|
||||
watch(() => cosa.value, (newval, oldval) => {
|
||||
tools.setCookie(tools.COOK_COSA_PRODOTTI, cosa.value.toString())
|
||||
})
|
||||
|
||||
const getArrProducts = computed(() => {
|
||||
let arrprod = productStore.getProducts(cosa.value)
|
||||
let catstr = cat.value;
|
||||
let lowerSearchText = search.value.toLowerCase().trim();
|
||||
if ((!lowerSearchText || (lowerSearchText && lowerSearchText.length < 2)) && !catstr) {
|
||||
return arrprod
|
||||
}
|
||||
|
||||
return arrprod.filter((product: IProduct) => {
|
||||
let lowerName = product.productInfo.name!.toLowerCase();
|
||||
let hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
|
||||
|
||||
// Use a regular expression to match whole words
|
||||
let codeMatch = new RegExp(`\\b${lowerSearchText}\\b`, 'i');
|
||||
let nameMatch = new RegExp(`\\b${lowerSearchText}`, 'i');
|
||||
|
||||
// Check if any word in lowerName starts with lowerSearchText
|
||||
let anyWordStartsWithSearch = lowerName.split(/\s+/).some(word => nameMatch.test(word));
|
||||
|
||||
return (codeMatch.test(product.productInfo.code!) || anyWordStartsWithSearch) && hasCategoria;
|
||||
});
|
||||
})
|
||||
|
||||
/*function getProducts() {
|
||||
let arrprod = productStore.getProducts(cosa.value)
|
||||
if (!search.value) {
|
||||
return arrprod
|
||||
}
|
||||
|
||||
let lowerSearchText = search.value.toLowerCase();
|
||||
let catstr = cat.value;
|
||||
|
||||
return arrprod.filter((product: IProduct) => {
|
||||
let lowerName = product.productInfo.name!.toLowerCase();
|
||||
const hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
|
||||
return (product.productInfo.code!.includes(search.value) || lowerName.includes(lowerSearchText)) && hasCategoria
|
||||
});
|
||||
}*/
|
||||
|
||||
async function mounted() {
|
||||
loadpage.value = false
|
||||
await productStore.loadProducts()
|
||||
cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.BOTTEGA, true)
|
||||
// Inizializza
|
||||
loadpage.value = true
|
||||
}
|
||||
|
||||
function getCatProds() {
|
||||
let arrcat = productStore.getCatProds()
|
||||
let riscat: any = [{ label: 'Tutti', value: '', icon: undefined, color: undefined }]
|
||||
for (const rec of arrcat) {
|
||||
riscat.push({ label: rec.name, value: rec._id, icon: rec.icon, color: rec.color })
|
||||
}
|
||||
|
||||
return riscat
|
||||
}
|
||||
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
userStore,
|
||||
costanti,
|
||||
tools,
|
||||
toolsext,
|
||||
getArrProducts,
|
||||
search,
|
||||
cosa,
|
||||
shared_consts,
|
||||
getCatProds,
|
||||
cat,
|
||||
productStore,
|
||||
t,
|
||||
loadpage,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
116
src/views/ecommerce/cash/cash.vue
Executable file
116
src/views/ecommerce/cash/cash.vue
Executable file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<div class="text-center">
|
||||
<q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
|
||||
</div>
|
||||
<div v-if="loadpage" class="panel">
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<q-btn-toggle
|
||||
v-model="cosa"
|
||||
push
|
||||
:size="tools.isMobile() ? '0.75rem' : '1rem'"
|
||||
rounded
|
||||
glossy
|
||||
dense
|
||||
toggle-color="purple"
|
||||
:options="[
|
||||
{ value: shared_consts.PROD.BOTTEGA, slot: 'bottega' },
|
||||
{ value: shared_consts.PROD.GAS, slot: 'gas' },
|
||||
]"
|
||||
>
|
||||
<template v-slot:gas>
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="text-center">
|
||||
{{ t('gas.ordina_sul_gas') }}
|
||||
<br />
|
||||
{{
|
||||
t('gas.x_prodotti_gas', {
|
||||
qta: productStore.getNumQtaGas(),
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<q-icon right name="fas fa-user-friends" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:bottega>
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="text-center">
|
||||
{{ t('gas.bottega') }}
|
||||
<br />
|
||||
{{
|
||||
t('gas.x_prodotti_bottega', {
|
||||
qta: productStore.getNumQtaBottega(),
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<q-icon right name="fas fa-store" />
|
||||
</div>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div
|
||||
class="column text-center q-mx-auto q-py-sm q-mb-sm"
|
||||
style="width: 350px; max-width: 100%"
|
||||
>
|
||||
<q-input
|
||||
filled
|
||||
stack-label
|
||||
:dense="tools.isMobile() ? true : false"
|
||||
:label="t('ecomm.code_o_text_search')"
|
||||
v-model="search"
|
||||
debounce="500"
|
||||
class="q-ml-md"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="row q-gutter-xs justify-center q-mx-auto">
|
||||
<div v-for="(reccat, index) in getCatProds()" :key="index">
|
||||
<q-btn
|
||||
:push="cat === reccat.value"
|
||||
dense
|
||||
:size="tools.isMobile() ? '0.70rem' : '1rem'"
|
||||
:icon="reccat.icon ? reccat.icon : undefined"
|
||||
:color="cat === reccat.value ? 'primary' : undefined"
|
||||
:text-color="cat === reccat.value ? 'white' : 'black'"
|
||||
rounded
|
||||
:label="reccat.label"
|
||||
@click="cat = reccat.value"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center q-py-sm prod_trov">
|
||||
{{
|
||||
t('ecomm.prodotti_trovati', {
|
||||
qta: getArrProducts.length,
|
||||
qtatot: productStore.getNumProdTot(),
|
||||
})
|
||||
}}{{}}
|
||||
</div>
|
||||
<div class="row justify-around">
|
||||
<div
|
||||
class="q-pa-xs row items-start"
|
||||
v-for="(product, index) in getArrProducts"
|
||||
:key="index"
|
||||
>
|
||||
<CProductCard :id="product._id" :complete="false" :cosa="cosa" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./cash.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './cash';
|
||||
</style>
|
||||
1
src/views/ecommerce/cash/index.ts
Executable file
1
src/views/ecommerce/cash/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export {default as ProductsList} from './cash.vue'
|
||||
Reference in New Issue
Block a user