Merge branch 'front-styles' of ssh://git.ma-al.com:8822/goc_daniel/b2b into translate
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<<<<<<< HEAD
|
||||
<div class="flex flex-col gap-5 md:gap-10">
|
||||
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Cart') }}</h1>
|
||||
<div class="flex flex-col lg:flex-row gap-5 md:gap-10">
|
||||
@@ -20,48 +21,88 @@
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
=======
|
||||
<div class="flex flex-col gap-5 md:gap-10">
|
||||
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Cart') }}</h1>
|
||||
<div class="flex flex-col lg:flex-row gap-5 md:gap-10">
|
||||
<div class="flex-1">
|
||||
>>>>>>> bfcfbb36c83a49ea2e6f8844beb674b845c6acdb
|
||||
<div
|
||||
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
|
||||
<h2
|
||||
class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
|
||||
{{ t('Your Carts') }}
|
||||
{{ t('Selected Products') }}
|
||||
</h2>
|
||||
<div v-if="cartStore.carts?.length > 0"
|
||||
class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
|
||||
<div v-for="cart in cartStore.carts" :key="cart.cart_id"
|
||||
@click="cartStore.setActiveCart(cart.cart_id)"
|
||||
class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
|
||||
? 'bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
|
||||
<p class="text-black dark:text-white font-medium truncate cursor-pointer"
|
||||
@click="openCart(cart)">{{
|
||||
cart.name }}</p>
|
||||
<div v-if="cartStore.items.length > 0">
|
||||
<div v-for="item in cartStore.items" :key="item.id"
|
||||
class="grid grid-cols-5 items-center p-4 border-b border-(--border-light) dark:border-(--border-dark) w-[100%]">
|
||||
<div
|
||||
class="bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
|
||||
<img v-if="item.image" :src="item.image" :alt="item.name"
|
||||
class="w-full h-full object-cover" />
|
||||
<UIcon v-else name="mdi:package-variant" class="text-2xl text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
|
||||
<h2
|
||||
class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
|
||||
{{ t('Your Carts') }}
|
||||
</h2>
|
||||
<div v-if="cartStore.carts?.length > 0"
|
||||
class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
|
||||
<div v-for="cart in cartStore.carts" :key="cart.cart_id"
|
||||
@click="cartStore.setActiveCart(cart.cart_id)"
|
||||
class="p-4 cursor-pointer flex gap-2 items-center justify-between" :class="cartStore.activeCartId === cart.cart_id
|
||||
? 'bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-800 border-l-4 border-transparent'">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="text-red-600 font-medium truncate">{{ cart.cart_id }}</p>
|
||||
<p class="text-black dark:text-white font-medium truncate cursor-pointer"
|
||||
@click="openCart(cart)">{{
|
||||
cart.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
|
||||
@change="toggleCart(cart.cart_id)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="p-8 text-center">
|
||||
<UIcon name="mdi:cart-outline"
|
||||
class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
|
||||
<p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" :checked="cartStore.activeCartId === cart.cart_id"
|
||||
@change="toggleCart(cart.cart_id)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="p-8 text-center">
|
||||
<UIcon name="mdi:cart-outline" class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
|
||||
<p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UModal v-model:open="showCreateModal">
|
||||
<template #header>
|
||||
<h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="flex flex-col gap-4">
|
||||
<UInput v-model="newCartName" :placeholder="t('Cart name')"
|
||||
class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
|
||||
<UModal v-model:open="showCreateModal">
|
||||
<template #header>
|
||||
<h3 class="text-lg font-semibold text-black dark:text-white">{{ t('Create New Cart') }}</h3>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="flex flex-col gap-4">
|
||||
<UInput v-model="newCartName" :placeholder="t('Cart name')"
|
||||
class="w-full bg-white dark:bg-gray-800 text-black dark:text-white" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton variant="outline" color="neutral" @click="showCreateModal = false">
|
||||
{{ t('Cancel') }}
|
||||
</UButton>
|
||||
<UButton color="primary" @click="createCart" :disabled="!newCartName.trim()"
|
||||
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
|
||||
{{ t('Create') }}
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
<<<<<<< HEAD
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
@@ -74,26 +115,28 @@
|
||||
</UButton>
|
||||
</div>
|
||||
</label>
|
||||
=======
|
||||
>>>>>>> bfcfbb36c83a49ea2e6f8844beb674b845c6acdb
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<<<<<<< HEAD
|
||||
</template>
|
||||
=======
|
||||
</template>
|
||||
>>>>>>> bfcfbb36c83a49ea2e6f8844beb674b845c6acdb
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useCartStore } from '@/stores/customer/cart'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAddressStore } from '@/stores/customer/address'
|
||||
const cartStore = useCartStore()
|
||||
const addressStore = useAddressStore()
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
|
||||
const cartStore = useCartStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const showCreateModal = ref(false)
|
||||
const newCartName = ref('')
|
||||
|
||||
|
||||
Reference in New Issue
Block a user