|
|
|
@@ -112,24 +112,43 @@ |
|
|
|
<BCol v-if="pageType === 'category' && pannel === 'web'" md="6"> |
|
|
|
<div class="form-group"> |
|
|
|
<label class="form-label">صفحه دسته</label> |
|
|
|
<select |
|
|
|
|
|
|
|
<VueSelect |
|
|
|
style="--vs-min-height: 48px; --vs-border-radius: 8px" |
|
|
|
v-model="selectedCatPage" |
|
|
|
class="form-select" |
|
|
|
:class="{ 'is-invalid': errors.selectedCatPage }" |
|
|
|
aria-label="Default select example" |
|
|
|
@change="clearError('selectedCatPage')" |
|
|
|
placeholder="انخاب صفحه دسته" |
|
|
|
> |
|
|
|
<option :value="cat.id" v-for="cat in cats" :key="cat.id"> |
|
|
|
{{ cat.title }} |
|
|
|
</option> |
|
|
|
</select> |
|
|
|
:isLoading="categoryPageSelectorLoader" |
|
|
|
:reduce="(option) => option.value" |
|
|
|
:options="formattedCatPages" |
|
|
|
@search="handleCategoryPageSearch" |
|
|
|
placeholder="دسته ای را انتخاب کنید" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<small v-if="errors.selectedCatPage" class="text-danger"> |
|
|
|
{{ errors.selectedCatPage }} |
|
|
|
</small> |
|
|
|
</BCol> |
|
|
|
|
|
|
|
<BCol v-if="pageType === 'brand' && pannel === 'web'" md="6"> |
|
|
|
<div class="form-group"> |
|
|
|
<label class="form-label">صفحه برند</label> |
|
|
|
|
|
|
|
<VueSelect |
|
|
|
style="--vs-min-height: 48px; --vs-border-radius: 8px" |
|
|
|
v-model="selectedBrandPage" |
|
|
|
:isLoading="brandSelectorLoader" |
|
|
|
:reduce="(option) => option.value" |
|
|
|
:options="formattedBrands" |
|
|
|
@change="clearError(`selectedBrandPage`)" |
|
|
|
placeholder="برندی را انتخاب کنید" |
|
|
|
@search="handleBrandSearch" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<small v-if="errors.selectedBrandPage" class="text-danger"> |
|
|
|
{{ errors.selectedBrandPage }} |
|
|
|
</small> |
|
|
|
</BCol> |
|
|
|
|
|
|
|
<BCol v-if="pannel == 'web' && pannel" md="6"> |
|
|
|
<div class="form-group"> |
|
|
|
<label class="form-label">انتخاب صفحه فرود</label> |
|
|
|
@@ -165,7 +184,10 @@ |
|
|
|
margin-top: 7px; |
|
|
|
" |
|
|
|
v-model="selectedLandingProduct" |
|
|
|
:reduce="(option) => option.value" |
|
|
|
:isLoading="productSelectorLoader" |
|
|
|
:options="formattedProducts" |
|
|
|
@search="handleProductSearch" |
|
|
|
placeholder="محصولی را انتخاب کنید" |
|
|
|
/> |
|
|
|
<small v-if="errors.selectedLandingProduct" class="text-danger"> |
|
|
|
@@ -176,18 +198,17 @@ |
|
|
|
<BCol v-if="landingType === 'cat'" md="6"> |
|
|
|
<div class="form-group"> |
|
|
|
<label class="form-label">صفحه کدام دسته ؟</label> |
|
|
|
<select |
|
|
|
class="form-select" |
|
|
|
aria-label="Default select example" |
|
|
|
v-model="selectedLandingCat" |
|
|
|
|
|
|
|
<VueSelect |
|
|
|
style="--vs-min-height: 48px; --vs-border-radius: 8px" |
|
|
|
:isLoading="categorySelectorLoader" |
|
|
|
@change="clearError('selectedLandingCat')" |
|
|
|
:class="{ 'is-invalid': errors.selectedLandingCat }" |
|
|
|
placeholder="انتخاب صفحه دسته" |
|
|
|
> |
|
|
|
<option :value="cat.id" v-for="cat in cats" :key="cat.id"> |
|
|
|
{{ cat.title }} |
|
|
|
</option> |
|
|
|
</select> |
|
|
|
v-model="selectedLandingCat" |
|
|
|
:reduce="(option) => option.value" |
|
|
|
:options="formattedCategories" |
|
|
|
placeholder="دسته ای را انتخاب کنید" |
|
|
|
@search="handleSearch" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<small v-if="errors.selectedLandingCat" class="text-danger"> |
|
|
|
{{ errors.selectedLandingCat }} |
|
|
|
@@ -262,17 +283,9 @@ |
|
|
|
@change="clearError('selectedLoc')" |
|
|
|
:class="{ 'is-invalid': errors.selectedLoc }" |
|
|
|
placeholder="موقعیت بنر" |
|
|
|
:value="(selectedLoc = 'A')" |
|
|
|
> |
|
|
|
<option value="A">َA-Slideshow</option> |
|
|
|
<option value="B">B-Banner</option> |
|
|
|
<option value="C">C-Banner</option> |
|
|
|
<option value="D">D-Banner</option> |
|
|
|
<option value="F">E-Banner</option> |
|
|
|
<option value="G">F-Banner</option> |
|
|
|
<option value="H">G-Banner</option> |
|
|
|
<option value="G">H-Banner</option> |
|
|
|
<option value="I">I-Banner</option> |
|
|
|
<option value="J">J-Banner</option> |
|
|
|
<option value="A">A-Slideshow</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
<small v-if="errors.selectedLoc" class="text-danger"> |
|
|
|
@@ -384,9 +397,10 @@ export default { |
|
|
|
const route = useRoute(); |
|
|
|
const title = ref(); |
|
|
|
const pageType = ref(); |
|
|
|
const products = ref([]); |
|
|
|
const brands = ref([]); |
|
|
|
const cats = ref([]); |
|
|
|
const products = ref([{ id: null, title: "" }]); |
|
|
|
const brands = ref([{ id: null, title: "" }]); |
|
|
|
const cats = ref([{ id: null, title: "" }]); |
|
|
|
const catPages = ref([{ id: null, title: "" }]); |
|
|
|
const landingType = ref(); |
|
|
|
const selectedCatPage = ref(); |
|
|
|
const selectedLandingCat = ref(); |
|
|
|
@@ -399,35 +413,105 @@ export default { |
|
|
|
const loading = ref(false); |
|
|
|
const errors = ref({}); |
|
|
|
|
|
|
|
const getCats = () => { |
|
|
|
ApiServiece.get(`admin/categories`) |
|
|
|
.then((resp) => { |
|
|
|
cats.value = resp.data.data; |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
const categorySelectorLoader = ref(false); |
|
|
|
const productSelectorLoader = ref(false); |
|
|
|
const categoryPageSelectorLoader = ref(false); |
|
|
|
const brandSelectorLoader = ref(false); |
|
|
|
|
|
|
|
const formattedCategories = computed(() => |
|
|
|
Array.isArray(cats.value) |
|
|
|
? cats.value.map((cat) => ({ |
|
|
|
value: cat.id, |
|
|
|
label: cat.title, |
|
|
|
})) |
|
|
|
: [] |
|
|
|
); |
|
|
|
|
|
|
|
const handleSearch = async (searchTerm) => { |
|
|
|
if (searchTerm.length < 3) return; |
|
|
|
categorySelectorLoader.value = true; |
|
|
|
try { |
|
|
|
const response = await ApiServiece.get( |
|
|
|
`admin/categories?title=${searchTerm}` |
|
|
|
); |
|
|
|
cats.value = response.data.data; |
|
|
|
categorySelectorLoader.value = false; |
|
|
|
} catch (error) { |
|
|
|
categorySelectorLoader.value = false; |
|
|
|
cats.value = []; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const getBrands = () => { |
|
|
|
ApiServiece.get(`admin/brands`) |
|
|
|
.then((resp) => { |
|
|
|
brands.value = resp.data.data; |
|
|
|
console.log(brands.value, "brands"); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
const formattedProducts = computed(() => |
|
|
|
Array.isArray(products.value) |
|
|
|
? products.value.map((product) => ({ |
|
|
|
value: product.id, |
|
|
|
label: product.title, |
|
|
|
})) |
|
|
|
: [] |
|
|
|
); |
|
|
|
|
|
|
|
const handleProductSearch = async (searchTerm) => { |
|
|
|
if (searchTerm.length < 3) return; |
|
|
|
productSelectorLoader.value = true; |
|
|
|
try { |
|
|
|
const response = await ApiServiece.get( |
|
|
|
`admin/products?title=${searchTerm}` |
|
|
|
); |
|
|
|
products.value = response.data.data; |
|
|
|
productSelectorLoader.value = false; |
|
|
|
} catch (error) { |
|
|
|
productSelectorLoader.value = false; |
|
|
|
products.value = []; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const getProduct = () => { |
|
|
|
ApiServiece.get(`admin/products`) |
|
|
|
.then((resp) => { |
|
|
|
products.value = resp.data.data; |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
const formattedCatPages = computed(() => |
|
|
|
Array.isArray(catPages.value) |
|
|
|
? catPages.value.map((catPage) => ({ |
|
|
|
value: catPage.id, |
|
|
|
label: catPage.title, |
|
|
|
})) |
|
|
|
: [] |
|
|
|
); |
|
|
|
|
|
|
|
const handleCategoryPageSearch = async (searchTerm) => { |
|
|
|
if (searchTerm.length < 3) return; |
|
|
|
categoryPageSelectorLoader.value = true; |
|
|
|
try { |
|
|
|
const response = await ApiServiece.get( |
|
|
|
`admin/categories?title=${searchTerm}` |
|
|
|
); |
|
|
|
catPages.value = response.data.data; |
|
|
|
categoryPageSelectorLoader.value = false; |
|
|
|
} catch (error) { |
|
|
|
categoryPageSelectorLoader.value = false; |
|
|
|
catPages.value = []; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const formattedBrands = computed(() => |
|
|
|
Array.isArray(brands.value) |
|
|
|
? brands.value.map((brand) => ({ |
|
|
|
value: brand.id, |
|
|
|
label: brand.title, |
|
|
|
})) |
|
|
|
: [] |
|
|
|
); |
|
|
|
|
|
|
|
const handleBrandSearch = async (searchTerm) => { |
|
|
|
if (searchTerm.length < 3) return; |
|
|
|
brandSelectorLoader.value = true; |
|
|
|
try { |
|
|
|
const response = await ApiServiece.get( |
|
|
|
`admin/brands?title=${searchTerm}` |
|
|
|
); |
|
|
|
brands.value = response.data.data; |
|
|
|
brandSelectorLoader.value = false; |
|
|
|
} catch (error) { |
|
|
|
brandSelectorLoader.value = false; |
|
|
|
brands.value = []; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const handleImageUpload = (event) => { |
|
|
|
@@ -446,13 +530,6 @@ export default { |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const formattedProducts = computed(() => { |
|
|
|
return products.value.map((product) => ({ |
|
|
|
value: product.id, |
|
|
|
label: product.title, |
|
|
|
})); |
|
|
|
}); |
|
|
|
|
|
|
|
const validateForm = () => { |
|
|
|
errors.value = {}; |
|
|
|
if (!title.value) errors.value.title = "وارد کردن عنوان بنر الزامی است"; |
|
|
|
@@ -488,6 +565,18 @@ export default { |
|
|
|
ApiServiece.get(`admin/banners/${route.params.id}`) |
|
|
|
.then((resp) => { |
|
|
|
const data = resp.data.data; |
|
|
|
cats.value[0].id = resp?.data?.data?.category?.id; |
|
|
|
cats.value[0].title = resp?.data?.data?.category?.title; |
|
|
|
|
|
|
|
products.value[0].id = resp?.data?.data?.product?.id; |
|
|
|
products.value[0].title = resp?.data?.data?.product?.title; |
|
|
|
|
|
|
|
catPages.value[0].id = resp?.data?.data?.category_page?.id; |
|
|
|
catPages.value[0].title = resp?.data?.data?.category_page?.title; |
|
|
|
|
|
|
|
brands.value[0].id = resp?.data?.data?.brand_page?.id; |
|
|
|
brands.value[0].title = resp?.data?.data?.brand_page?.title; |
|
|
|
|
|
|
|
title.value = data?.title; |
|
|
|
pannel.value = data?.panel; |
|
|
|
imagePreview.value = data?.image; |
|
|
|
@@ -495,15 +584,13 @@ export default { |
|
|
|
selectedLandingCat.value = data?.category_id; |
|
|
|
selectedLandingProduct.value = data?.product_id; |
|
|
|
pageType.value = data.page_type; |
|
|
|
if (data.page_id && pageType.value === 'category') { |
|
|
|
if (data.page_id && pageType.value === "category") { |
|
|
|
selectedCatPage.value = data?.page_id; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (data.page_id && pageType.value === 'barnd') { |
|
|
|
if (data.page_id && pageType.value === "brand") { |
|
|
|
selectedBrandPage.value = data?.page_id; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (selectedLandingProduct.value) { |
|
|
|
landingType.value = "product"; |
|
|
|
@@ -512,10 +599,6 @@ export default { |
|
|
|
if (selectedLandingCat.value) { |
|
|
|
landingType.value = "cat"; |
|
|
|
} |
|
|
|
|
|
|
|
if (!selectedCatPage.value && !selectedLandingProduct.value) { |
|
|
|
pannel.value = "wholesale"; |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
@@ -523,9 +606,6 @@ export default { |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getCats(); |
|
|
|
getBrands(); |
|
|
|
getProduct(); |
|
|
|
getBanner(); |
|
|
|
}); |
|
|
|
|
|
|
|
@@ -623,6 +703,18 @@ export default { |
|
|
|
imagePreview, |
|
|
|
loading, |
|
|
|
brands, |
|
|
|
handleSearch, |
|
|
|
formattedCategories, |
|
|
|
categorySelectorLoader, |
|
|
|
handleProductSearch, |
|
|
|
productSelectorLoader, |
|
|
|
formattedCatPages, |
|
|
|
handleCategoryPageSearch, |
|
|
|
categoryPageSelectorLoader, |
|
|
|
formattedBrands, |
|
|
|
brandSelectorLoader, |
|
|
|
handleBrandSearch, |
|
|
|
selectedBrandPage, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}; |
|
|
|
|