initial: bootstrap from BukidBountyApp base
This commit is contained in:
Jonathan Sykes
954
resources/js/Pages/CreateProductUltimate.vue
Normal file
954
resources/js/Pages/CreateProductUltimate.vue
Normal file
@@ -0,0 +1,954 @@
|
||||
<script setup>
|
||||
import { usePageTitle } from '../composables/Core/usePageTitle';
|
||||
usePageTitle('Create Product Ultimate');
|
||||
|
||||
import { ref, onMounted, watch, computed } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { useNavigate } from '../composables/Core/useNavigate'
|
||||
import { useModal } from '../composables/Core/useModal'
|
||||
import LoadingSpinner from '../Components/LoadingSpinner.vue'
|
||||
import CardSimple from '../Components/Core/CardSimple.vue'
|
||||
import Dropzone from '../Components/Core/Dropzone.vue'
|
||||
import FileImage from '../Components/Core/FileImage.vue'
|
||||
import StockPhotoPicker from '../Components/Core/StockPhotoPicker.vue'
|
||||
import { useFileUpload } from '../composables/useFileUpload.js'
|
||||
import { useProductStore } from '../stores/product'
|
||||
import { useAuth } from '../composables/Core/useAuth'
|
||||
|
||||
const productStore = useProductStore()
|
||||
|
||||
const { navigate } = useNavigate()
|
||||
const modal = useModal()
|
||||
const { isUltimate, isSuperOperator, isOperator } = useAuth()
|
||||
const isBig3 = computed(() => isUltimate.value || isSuperOperator.value || isOperator.value)
|
||||
const { uploadFile, removeHash, photoHashes, isUploading: isFileUploading } = useFileUpload({
|
||||
category: 'ProductMarket',
|
||||
maxSizeMB: 10
|
||||
})
|
||||
|
||||
// Form state
|
||||
const productName = ref('')
|
||||
const productDescription = ref('')
|
||||
const productCategory = ref('')
|
||||
const productSubcategory = ref('')
|
||||
const productPrice = ref(1)
|
||||
const productUnitName = ref('')
|
||||
const productAvailable = ref(1)
|
||||
const productBarcode = ref('')
|
||||
const selectedStore = ref('')
|
||||
const selectableStores = ref([])
|
||||
|
||||
// Data lists
|
||||
const categoryList = ref([])
|
||||
const subcategoryList = ref([])
|
||||
|
||||
// Loading state
|
||||
const isLoading = ref(false)
|
||||
const showSuccessState = ref(false)
|
||||
const showSuccessAnimation = ref(false)
|
||||
const successMessage = ref('')
|
||||
const error = ref(null)
|
||||
|
||||
|
||||
// Initialize component
|
||||
onMounted(() => {
|
||||
document.title = 'New Product'
|
||||
loadCategories()
|
||||
fetchSelectableStores()
|
||||
})
|
||||
|
||||
const fetchSelectableStores = async () => {
|
||||
try {
|
||||
const response = await axios.post('/Admin/Stores/Selectable')
|
||||
if (response.data && response.data.success) {
|
||||
selectableStores.value = response.data.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading stores:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Load categories
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
const response = await axios.post('/Products/New/Category/Datalist', {})
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
categoryList.value = response.data.map(item => ({
|
||||
value: typeof item === 'string' ? item : item[0],
|
||||
label: typeof item === 'string' ? item : (item[1] || item[0])
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading categories:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Load subcategories when category changes
|
||||
const loadSubcategories = async () => {
|
||||
if (!productCategory.value) {
|
||||
subcategoryList.value = []
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post('/Products/New/SubCategory/Datalist', {
|
||||
category: productCategory.value
|
||||
})
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
subcategoryList.value = response.data.map(item => ({
|
||||
value: typeof item === 'string' ? item : item[0],
|
||||
label: typeof item === 'string' ? item : (item[1] || item[0])
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading subcategories:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Dropzone handling
|
||||
const dropzoneRef = ref(null)
|
||||
const dropzoneFiles = ref([])
|
||||
|
||||
// Stock photo picker
|
||||
const showPhotoPicker = ref(false)
|
||||
const onStockPhotoSelected = ({ hashkey, url }) => {
|
||||
// Mirror the entry shape Dropzone produces: preview drives the thumbnail,
|
||||
// hashkey is what handleSubmit filters on for the photourl payload.
|
||||
dropzoneFiles.value.push({ file: null, name: 'stock-photo.jpg', preview: url, hashkey, uploading: false, progress: 100, error: null })
|
||||
}
|
||||
|
||||
// Watch for new files in dropzone and upload them
|
||||
watch(() => dropzoneFiles.value, async (newFiles, oldFiles) => {
|
||||
// Find files that are not yet uploading and don't have a hashkey
|
||||
const filesToUpload = newFiles.filter(f => !f.uploading && !f.hashkey && !f.error);
|
||||
|
||||
for (const fileObj of filesToUpload) {
|
||||
const index = newFiles.indexOf(fileObj);
|
||||
if (index === -1) continue;
|
||||
|
||||
// Set uploading status
|
||||
dropzoneRef.value.setFileStatus(index, { uploading: true, progress: 30 });
|
||||
|
||||
const result = await uploadFile(fileObj.file);
|
||||
|
||||
if (result && result.hashkey) {
|
||||
dropzoneRef.value.setFileStatus(index, {
|
||||
uploading: false,
|
||||
progress: 100,
|
||||
hashkey: result.hashkey
|
||||
});
|
||||
} else {
|
||||
dropzoneRef.value.setFileStatus(index, {
|
||||
uploading: false,
|
||||
progress: 0,
|
||||
error: 'Upload failed'
|
||||
});
|
||||
}
|
||||
}
|
||||
}, { deep: true });
|
||||
|
||||
const handlePhotoRemoved = (hashkey) => {
|
||||
if (hashkey) {
|
||||
removeHash(hashkey);
|
||||
}
|
||||
};
|
||||
|
||||
// Update subcategory list when category changes
|
||||
const handleCategoryChange = () => {
|
||||
loadSubcategories()
|
||||
}
|
||||
|
||||
// Validate form
|
||||
const validateForm = () => {
|
||||
if (!productName.value) {
|
||||
error.value = 'Product name is required'
|
||||
return false
|
||||
}
|
||||
if (!productDescription.value) {
|
||||
error.value = 'Product description is required'
|
||||
return false
|
||||
}
|
||||
if (!productCategory.value) {
|
||||
error.value = 'Category is required'
|
||||
return false
|
||||
}
|
||||
if (!productSubcategory.value) {
|
||||
error.value = 'Subcategory is required'
|
||||
return false
|
||||
}
|
||||
if (!productPrice.value || parseFloat(productPrice.value) <= 0) {
|
||||
error.value = 'Valid price is required'
|
||||
return false
|
||||
}
|
||||
if (!productUnitName.value) {
|
||||
error.value = 'Unit name is required'
|
||||
return false
|
||||
}
|
||||
const hasFiles = dropzoneFiles.value.length > 0;
|
||||
const hasHashes = photoHashes.value.length > 0 || dropzoneFiles.value.some(f => !!f.hashkey);
|
||||
|
||||
if (!hasFiles && !hasHashes) {
|
||||
error.value = 'At least one photo is required'
|
||||
return false
|
||||
}
|
||||
if (productBarcode.value && !/^\d{12}$/.test(productBarcode.value)) {
|
||||
error.value = 'Barcode must be exactly 12 digits'
|
||||
return false
|
||||
}
|
||||
|
||||
error.value = null
|
||||
return true
|
||||
}
|
||||
|
||||
// Submit product
|
||||
const handleSubmit = async () => {
|
||||
if (!validateForm()) return
|
||||
|
||||
try {
|
||||
isLoading.value = true
|
||||
|
||||
const response = await axios.post('/Products/Admin/New/', {
|
||||
NewProductName: productName.value,
|
||||
NewProductDescription: productDescription.value,
|
||||
NewProductCategory: productCategory.value,
|
||||
NewProductSubCategory: productSubcategory.value,
|
||||
NewProductPrice: parseFloat(productPrice.value),
|
||||
NewProductUnitName: productUnitName.value,
|
||||
NewProductAvailable: parseInt(productAvailable.value),
|
||||
NewProductBarcode: productBarcode.value,
|
||||
TargetStore: selectedStore.value,
|
||||
photourl: dropzoneFiles.value
|
||||
.filter(f => f.hashkey)
|
||||
.map(f => f.hashkey)
|
||||
})
|
||||
|
||||
if (response.data && (response.data.success || typeof response.data === 'string')) {
|
||||
showSuccessState.value = true;
|
||||
showSuccessAnimation.value = true;
|
||||
successMessage.value = 'Product created successfully!'
|
||||
|
||||
// Proactively prefetch products list
|
||||
productStore.fetchProducts()
|
||||
|
||||
setTimeout(() => {
|
||||
navigate({ page: 'ManageProductsAdmin' })
|
||||
}, 1500)
|
||||
} else {
|
||||
error.value = response.data?.message || 'Failed to create product'
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error creating product:', err)
|
||||
error.value = err.response?.data?.message || 'Failed to create product'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const isButtonDisabled = computed(() => {
|
||||
return !!(isLoading.value || successMessage.value || isFileUploading.value);
|
||||
});
|
||||
|
||||
// --- Fuzzy duplicate check + store-picker flow ---------------------------------
|
||||
|
||||
const fuzzyMatches = ref([])
|
||||
const showMatchesModal = ref(false)
|
||||
const showStorePickerModal = ref(false)
|
||||
const isCheckingDuplicates = ref(false)
|
||||
const isImporting = ref(false)
|
||||
const pickerStore = ref('')
|
||||
|
||||
const checkDuplicatesAndProceed = async () => {
|
||||
if (!validateForm()) return
|
||||
isCheckingDuplicates.value = true
|
||||
try {
|
||||
const { data } = await axios.post('/Products/Admin/FuzzySearch', {
|
||||
name: productName.value,
|
||||
TargetStore: selectedStore.value || pickerStore.value || ''
|
||||
})
|
||||
const matches = (data && data.success && Array.isArray(data.data)) ? data.data : []
|
||||
if (matches.length > 0) {
|
||||
fuzzyMatches.value = matches
|
||||
showMatchesModal.value = true
|
||||
} else {
|
||||
openStorePicker()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fuzzy search failed:', err)
|
||||
openStorePicker()
|
||||
} finally {
|
||||
isCheckingDuplicates.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const openStorePicker = () => {
|
||||
showMatchesModal.value = false
|
||||
pickerStore.value = isBig3.value ? '' : (selectedStore.value || (selectableStores.value[0]?.hashkey ?? ''))
|
||||
showStorePickerModal.value = true
|
||||
}
|
||||
|
||||
const confirmAndCreate = async () => {
|
||||
if (!isBig3.value && selectableStores.value.length > 0 && !pickerStore.value) {
|
||||
error.value = 'Please select a store to assign this product to.'
|
||||
return
|
||||
}
|
||||
selectedStore.value = pickerStore.value
|
||||
showStorePickerModal.value = false
|
||||
await handleSubmit()
|
||||
}
|
||||
|
||||
const importExistingProduct = async (match) => {
|
||||
if (match.already_in_store) return
|
||||
const targetStore = selectedStore.value || pickerStore.value
|
||||
if (!targetStore) {
|
||||
// Need to pick a store first.
|
||||
showMatchesModal.value = false
|
||||
pickerStore.value = selectableStores.value[0]?.hashkey ?? ''
|
||||
showStorePickerModal.value = true
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
isImporting.value = true
|
||||
const { data } = await axios.post('/Products/AssignToStore/', {
|
||||
target: match.hashkey,
|
||||
TargetStore: targetStore,
|
||||
price: parseFloat(productPrice.value) || match.price,
|
||||
available: parseInt(productAvailable.value) || 0,
|
||||
})
|
||||
if (data && data.success) {
|
||||
showMatchesModal.value = false
|
||||
showSuccessState.value = true
|
||||
showSuccessAnimation.value = true
|
||||
successMessage.value = `${match.name} imported to your store.`
|
||||
productStore.fetchProducts()
|
||||
setTimeout(() => navigate({ page: 'ManageProductsAdmin' }), 1500)
|
||||
} else {
|
||||
error.value = data?.message || 'Failed to import product.'
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Import failed:', err)
|
||||
error.value = err.response?.data?.message || 'Failed to import product.'
|
||||
} finally {
|
||||
isImporting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="create-product-page pb-5">
|
||||
<div class="tf-container mt-5 mb-4 text-center">
|
||||
<h1 class="fw_8 premium-title">Create New Product</h1>
|
||||
<p class="text-muted">Fill in the details to list your product in the market</p>
|
||||
</div>
|
||||
|
||||
<div v-if="successMessage" class="tf-container mb-4">
|
||||
<div class="glass-alert alert-success animate-fade-in">
|
||||
<i class="fas fa-check-circle me-2"></i>
|
||||
{{ successMessage }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="tf-container mb-4">
|
||||
<div class="glass-alert alert-danger animate-shake">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tf-container">
|
||||
<div class="form-grid">
|
||||
<!-- Left Column: Basic Info -->
|
||||
<div class="form-section">
|
||||
<CardSimple title="Product Details">
|
||||
<div class="premium-input-group mb-4">
|
||||
<label for="productName" class="form-label">Product Name <span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="productName"
|
||||
v-model="productName"
|
||||
class="premium-input"
|
||||
placeholder="e.g., Premium Rice"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="premium-input-group mb-4">
|
||||
<label for="productDescription" class="form-label">Description <span class="required">*</span></label>
|
||||
<textarea
|
||||
id="productDescription"
|
||||
v-model="productDescription"
|
||||
class="premium-input"
|
||||
rows="4"
|
||||
placeholder="Describe your product..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="premium-input-group mb-4">
|
||||
<label for="category" class="form-label">Category <span class="required">*</span></label>
|
||||
<select
|
||||
id="category"
|
||||
v-model="productCategory"
|
||||
class="premium-select"
|
||||
@change="handleCategoryChange"
|
||||
>
|
||||
<option value="" disabled>Select Category</option>
|
||||
<option v-for="cat in categoryList" :key="cat.value" :value="cat.value">
|
||||
{{ cat.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="premium-input-group mb-4">
|
||||
<label for="subcategory" class="form-label">Subcategory <span class="required">*</span></label>
|
||||
<select
|
||||
id="subcategory"
|
||||
v-model="productSubcategory"
|
||||
class="premium-select"
|
||||
:disabled="subcategoryList.length === 0"
|
||||
>
|
||||
<option value="" disabled>Select Subcategory</option>
|
||||
<option v-for="sub in subcategoryList" :key="sub.value" :value="sub.value">
|
||||
{{ sub.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectableStores.length > 0" class="premium-input-group mb-4 mt-2 border-top pt-4">
|
||||
<label for="targetStore" class="form-label">Assign to Store (Optional)</label>
|
||||
<select
|
||||
id="targetStore"
|
||||
v-model="selectedStore"
|
||||
class="premium-select shadow-sm"
|
||||
>
|
||||
<option value="">No Store (Global Product Template)</option>
|
||||
<option v-for="store in selectableStores" :key="store.hashkey" :value="store.hashkey">
|
||||
{{ store.name }} ({{ store.role }})
|
||||
</option>
|
||||
</select>
|
||||
<p class="smallest text-muted mt-2">
|
||||
<i class="fas fa-info-circle me-1"></i>
|
||||
Select a store to list this product immediately after creation.
|
||||
</p>
|
||||
</div>
|
||||
</CardSimple>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Inventory & Photos -->
|
||||
<div class="form-section">
|
||||
<CardSimple title="Inventory & Pricing">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="premium-input-group mb-4">
|
||||
<label for="price" class="form-label">Price (PHP) <span class="required">*</span></label>
|
||||
<input
|
||||
type="number"
|
||||
id="price"
|
||||
v-model="productPrice"
|
||||
class="premium-input"
|
||||
min="1"
|
||||
step="0.01"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="premium-input-group mb-4">
|
||||
<label for="unit" class="form-label">Unit <span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="unit"
|
||||
v-model="productUnitName"
|
||||
class="premium-input"
|
||||
placeholder="e.g., 25kg"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="premium-input-group mb-4">
|
||||
<label for="available" class="form-label">Available Stock <span class="required">*</span></label>
|
||||
<input
|
||||
type="number"
|
||||
id="available"
|
||||
v-model="productAvailable"
|
||||
class="premium-input"
|
||||
min="1"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="premium-input-group mb-4">
|
||||
<label for="barcode" class="form-label">Barcode (12 Digits)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="barcode"
|
||||
v-model="productBarcode"
|
||||
class="premium-input"
|
||||
maxlength="12"
|
||||
placeholder="Optional"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="premium-input-group mb-2">
|
||||
<label class="form-label">Product Photos <span class="required">*</span></label>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm rounded-pill mb-2"
|
||||
@click="showPhotoPicker = true">
|
||||
<i class="fas fa-images me-1"></i> Search Stock Photos
|
||||
</button>
|
||||
<Dropzone
|
||||
ref="dropzoneRef"
|
||||
v-model:files="dropzoneFiles"
|
||||
@removed="handlePhotoRemoved"
|
||||
/>
|
||||
<StockPhotoPicker v-model="showPhotoPicker" :product-name="productName"
|
||||
@photo-selected="onStockPhotoSelected" />
|
||||
</div>
|
||||
</CardSimple>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-bar mt-5 text-center">
|
||||
<AnimatedButton
|
||||
@click="checkDuplicatesAndProceed"
|
||||
:disabled="isButtonDisabled || isCheckingDuplicates"
|
||||
btnClass="btn-premium-launch"
|
||||
:loading="isLoading || isCheckingDuplicates"
|
||||
:success="showSuccessState"
|
||||
>
|
||||
Create Product
|
||||
</AnimatedButton>
|
||||
|
||||
<div class="mt-4">
|
||||
<button
|
||||
@click="navigate({ page: 'ManageProductsAdmin' })"
|
||||
class="btn-text"
|
||||
>
|
||||
<i class="fas fa-chevron-left me-2"></i> Cancel and Return
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fuzzy Match Modal -->
|
||||
<div v-if="showMatchesModal" class="bb-modal-backdrop" @click.self="showMatchesModal = false">
|
||||
<div class="bb-modal">
|
||||
<div class="bb-modal-header">
|
||||
<div>
|
||||
<h4 class="fw_7 mb-1">Similar products already exist</h4>
|
||||
<p class="text-muted small mb-0">Import one of these into your store instead of creating a duplicate, or continue creating a new product.</p>
|
||||
</div>
|
||||
<button class="bb-modal-close" @click="showMatchesModal = false" aria-label="Close">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bb-modal-body">
|
||||
<div v-for="m in fuzzyMatches" :key="m.hashkey" class="match-row">
|
||||
<div class="match-row-top">
|
||||
<FileImage
|
||||
:src="m.photourl && m.photourl[0] ? m.photourl[0] : ''"
|
||||
:alt="m.name"
|
||||
class="match-thumb"
|
||||
fallback="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/146710fe9ece.bin"
|
||||
/>
|
||||
<div class="match-info">
|
||||
<div class="fw_6">{{ m.name }}</div>
|
||||
<div class="text-muted small">
|
||||
<span v-if="m.category">{{ m.category }}<span v-if="m.subcategory"> · {{ m.subcategory }}</span> · </span>
|
||||
<span>₱{{ m.price }} / {{ m.unitname }}</span>
|
||||
</div>
|
||||
<div v-if="m.already_in_store" class="text-success smallest mt-1">
|
||||
<i class="fas fa-check-circle me-1"></i> Already in your store
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm btn-primary rounded-pill w-100"
|
||||
:disabled="m.already_in_store || isImporting"
|
||||
@click="importExistingProduct(m)"
|
||||
>
|
||||
<span v-if="isImporting"><LoadingSpinner size="small" /></span>
|
||||
<span v-else-if="m.already_in_store">In Store</span>
|
||||
<span v-else>Import to Store</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bb-modal-footer">
|
||||
<button class="btn btn-link text-muted" @click="showMatchesModal = false">Cancel</button>
|
||||
<button class="btn btn-outline-primary rounded-pill px-4" @click="openStorePicker">
|
||||
None of these — Create new
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Store Picker Modal -->
|
||||
<div v-if="showStorePickerModal" class="bb-modal-backdrop" @click.self="showStorePickerModal = false">
|
||||
<div class="bb-modal bb-modal-small">
|
||||
<div class="bb-modal-header">
|
||||
<div>
|
||||
<h4 class="fw_7 mb-1">Assign new product to a store</h4>
|
||||
<p class="text-muted small mb-0">
|
||||
Pick the store this product will be listed in.
|
||||
<span v-if="isBig3" class="ms-1 badge bg-info-subtle text-info rounded-pill" style="font-size:0.7em">Optional for your account</span>
|
||||
</p>
|
||||
</div>
|
||||
<button class="bb-modal-close" @click="showStorePickerModal = false" aria-label="Close">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bb-modal-body">
|
||||
<div v-if="selectableStores.length === 0" class="text-muted">
|
||||
You don't have any stores yet. Create one first.
|
||||
</div>
|
||||
<div v-else class="store-picker-list">
|
||||
<label
|
||||
v-for="store in selectableStores"
|
||||
:key="store.hashkey"
|
||||
class="store-picker-row"
|
||||
:class="{ 'is-selected': pickerStore === store.hashkey }"
|
||||
>
|
||||
<input type="radio" :value="store.hashkey" v-model="pickerStore" />
|
||||
<div>
|
||||
<div class="fw_6">{{ store.name }}</div>
|
||||
<div class="text-muted smallest">{{ store.role }}<span v-if="store.category"> · {{ store.category }}</span></div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<p v-if="isBig3 && !pickerStore" class="text-muted small mt-2 mb-0">
|
||||
<i class="fas fa-info-circle me-1"></i>No store selected — product will be created as a global listing only.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bb-modal-footer">
|
||||
<button class="btn btn-link text-muted" @click="showStorePickerModal = false">Cancel</button>
|
||||
<button
|
||||
class="btn btn-primary rounded-pill px-4"
|
||||
:disabled="isLoading || (!isBig3 && selectableStores.length > 0 && !pickerStore)"
|
||||
@click="confirmAndCreate"
|
||||
>
|
||||
<span v-if="isLoading"><LoadingSpinner size="small" class="me-2" /> Creating...</span>
|
||||
<span v-else>Confirm & Create</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Animation Overlay -->
|
||||
<div v-if="showSuccessAnimation" class="success-overlay">
|
||||
<div class="text-center animate-bounce-in">
|
||||
<LottiePlayer
|
||||
path="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/11999b7bb57c.json"
|
||||
:loop="false"
|
||||
width="250px"
|
||||
height="250px"
|
||||
/>
|
||||
<h2 class="fw_8 mt-4 text-primary headline-gradient">Product Created!</h2>
|
||||
<p class="text-muted">Your product is now listed in the market.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.premium-title {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.premium-input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: #475569;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ef4444;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.premium-input, .premium-select {
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.premium-input:focus, .premium-select:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.premium-select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
.glass-alert {
|
||||
padding: 16px 20px;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(8px);
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.btn-premium-launch {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 16px 48px;
|
||||
border-radius: 14px;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.btn-premium-launch:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.4);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn-premium-launch:disabled {
|
||||
background: #cbd5e1;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-loading {
|
||||
padding: 12px 48px;
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.btn-text:hover {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
10%, 90% { transform: translate3d(-1px, 0, 0); }
|
||||
20%, 80% { transform: translate3d(2px, 0, 0); }
|
||||
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
|
||||
40%, 60% { transform: translate3d(4px, 0, 0); }
|
||||
}
|
||||
|
||||
:global(.dark-mode) .premium-input, :global(.dark-mode) .premium-select {
|
||||
background: #1e293b;
|
||||
border-color: #334155;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
:global(.dark-mode) .premium-title {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
:global(.dark-mode) .form-label {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.success-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
:global(.dark-mode) .success-overlay {
|
||||
background: rgba(18, 20, 24, 0.98);
|
||||
}
|
||||
|
||||
.animate-bounce-in {
|
||||
animation: bounce-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
@keyframes bounce-in {
|
||||
0% { transform: scale(0.3); opacity: 0; }
|
||||
50% { transform: scale(1.05); opacity: 1; }
|
||||
70% { transform: scale(0.9); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.bb-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
backdrop-filter: blur(6px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
padding: 16px;
|
||||
}
|
||||
.bb-modal {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
|
||||
}
|
||||
.bb-modal-small { max-width: 480px; }
|
||||
.bb-modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
.bb-modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.bb-modal-body {
|
||||
padding: 16px 24px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.bb-modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
.match-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
.match-row-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.match-row:last-child { border-bottom: none; }
|
||||
.match-thumb {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.match-info { flex: 1; min-width: 0; }
|
||||
.store-picker-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.store-picker-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.store-picker-row:hover { border-color: #93c5fd; }
|
||||
.store-picker-row.is-selected {
|
||||
border-color: #2563eb;
|
||||
background: rgba(37, 99, 235, 0.06);
|
||||
}
|
||||
:global(.dark-mode) .bb-modal {
|
||||
background: #1e293b;
|
||||
color: #f8fafc;
|
||||
}
|
||||
:global(.dark-mode) .bb-modal-header,
|
||||
:global(.dark-mode) .bb-modal-footer { border-color: #334155; }
|
||||
:global(.dark-mode) .store-picker-row { border-color: #334155; }
|
||||
:global(.dark-mode) .match-row { border-bottom-color: #334155; }
|
||||
|
||||
.headline-gradient {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user