first commit
This commit is contained in:
Beyhan Oğur
223
app/pages/portfolio/index.vue
Normal file
223
app/pages/portfolio/index.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import MainMenuArea from "~/components/home/MainMenuArea.vue";
|
||||
import type {Home, Setting, Category, PortfolioCategory, MainMenu, OpenClose} from "~/types";
|
||||
|
||||
// jQuery ve Magnific Popup için window tipini genişlet
|
||||
interface WindowWithJQuery extends Window {
|
||||
$?: any;
|
||||
}
|
||||
|
||||
declare const window: WindowWithJQuery;
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const apiUrl = computed(() => config.public.BASE_API_URL || 'http://127.0.0.1:8000')
|
||||
const {data: openClose} = await useFetch<OpenClose>(`${apiUrl.value}/api/v1/open-close/`)
|
||||
|
||||
const {data: setting} = await useFetch<Setting>(`${apiUrl.value}/api/v1/settings/`)
|
||||
const {data: home} = await useFetch<Home>(`${apiUrl.value}/api/v1/home/`)
|
||||
const {data: menu} = await useFetch<MainMenu>(`${apiUrl.value}/api/v1/main-menu/`)
|
||||
const {data: categories} = await useFetch<Category[]>(`${apiUrl.value}/api/v1/categories/`)
|
||||
|
||||
|
||||
// Tüm portfolioları toplama
|
||||
const allPortfolios = computed(() => {
|
||||
if (!categories.value) return []
|
||||
const portfolios: PortfolioCategory[] = []
|
||||
categories.value.forEach(category => {
|
||||
category.portfolio_categories.forEach(portfolio => {
|
||||
if (!portfolios.find(p => p.id === portfolio.id)) {
|
||||
portfolios.push(portfolio)
|
||||
}
|
||||
})
|
||||
})
|
||||
return portfolios
|
||||
})
|
||||
|
||||
// Seçili kategori
|
||||
const selectedCategory = ref<number | null>(null)
|
||||
|
||||
// Filtrelenmiş portfoliolar
|
||||
const filteredPortfolios = computed(() => {
|
||||
if (!selectedCategory.value || !categories.value) return allPortfolios.value
|
||||
const category = categories.value.find(c => c.id === selectedCategory.value)
|
||||
return category ? category.portfolio_categories : []
|
||||
})
|
||||
|
||||
// Pagination
|
||||
const currentPage = ref(1)
|
||||
const itemsPerPage = 8
|
||||
const totalPages = computed(() => Math.ceil(filteredPortfolios.value.length / itemsPerPage))
|
||||
|
||||
const paginatedPortfolios = computed(() => {
|
||||
const start = (currentPage.value - 1) * itemsPerPage
|
||||
const end = start + itemsPerPage
|
||||
return filteredPortfolios.value.slice(start, end)
|
||||
})
|
||||
|
||||
// Kategori seçme
|
||||
const selectCategory = (categoryId: number | null) => {
|
||||
selectedCategory.value = categoryId
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
// Sayfa değiştirme
|
||||
const changePage = (page: number) => {
|
||||
if (page >= 1 && page <= totalPages.value) {
|
||||
currentPage.value = page
|
||||
}
|
||||
}
|
||||
|
||||
// Magnific Popup'ı başlat
|
||||
const initMagnificPopup = () => {
|
||||
if (typeof window !== 'undefined' && window.$) {
|
||||
window.$('.img-popup').magnificPopup({
|
||||
type: 'image',
|
||||
gallery: {
|
||||
enabled: false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Component mount olduğunda ve sayfa değiştiğinde popup'ı yeniden başlat
|
||||
onMounted(() => {
|
||||
// jQuery ve Magnific Popup'ın yüklenmesi için biraz bekliyoruz
|
||||
setTimeout(() => {
|
||||
initMagnificPopup()
|
||||
}, 100)
|
||||
})
|
||||
|
||||
// Sayfa veya kategori değiştiğinde popup'ı yeniden başlat
|
||||
watch([currentPage, selectedCategory], () => {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
initMagnificPopup()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template >
|
||||
<div v-if="openClose?.site_active">
|
||||
<main-menu-area :home="home" :setting="setting" :menu="menu"/>
|
||||
<!-- Main Content Area Start -->
|
||||
<div class="main-content">
|
||||
<div class="main-content-inner">
|
||||
<!-- Portfolios Area Start -->
|
||||
<section class="portfolios-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="row">
|
||||
<div v-for="portfolio in paginatedPortfolios" :key="portfolio.id" class="col-lg-6 col-md-6">
|
||||
<div class="gallery-item-content">
|
||||
<div class="item-thumbnail">
|
||||
<img :src="`${apiUrl}${portfolio.image}`" :alt="portfolio.url">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a :href="portfolio.url" target="_blank" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
:href="`${apiUrl}${portfolio.image}`">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<nav v-if="totalPages > 1" aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item" :class="{ disabled: currentPage === 1 }">
|
||||
<a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)" aria-label="Previous">
|
||||
<span aria-hidden="true"><i class="fas fa-angle-double-left"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-for="page in totalPages" :key="page" class="page-item">
|
||||
<a class="page-link" :class="{ active: currentPage === page }" href="#" @click.prevent="changePage(page)">{{ page }}</a>
|
||||
</li>
|
||||
<li class="page-item" :class="{ disabled: currentPage === totalPages }">
|
||||
<a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)" aria-label="Next">
|
||||
<span aria-hidden="true"><i class="fas fa-angle-double-right"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
|
||||
<div class="categori-widget">
|
||||
<h4 class="title">
|
||||
Kategoriler
|
||||
</h4>
|
||||
<ul class="cat-list">
|
||||
<li>
|
||||
<a href="#" @click.prevent="selectCategory(null)" :class="{ active: selectedCategory === null }">
|
||||
<p>
|
||||
All
|
||||
</p>
|
||||
<span class="count">
|
||||
{{ allPortfolios.length }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-for="category in categories" :key="category.id">
|
||||
<a href="#" @click.prevent="selectCategory(category.id)" :class="{ active: selectedCategory === category.id }">
|
||||
<p>
|
||||
{{ category.title }}
|
||||
</p>
|
||||
<span class="count">
|
||||
{{ category.portfolio_categories.length }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <div class="latest-post-widget">
|
||||
<h4 class="title">
|
||||
Latest Projects
|
||||
</h4>
|
||||
<ul class="post-list">
|
||||
<li v-for="project in latestProjects" :key="project.id">
|
||||
<div class="post">
|
||||
<div class="post-img">
|
||||
<img :src="`${apiUrl}${project.image}`" alt="">
|
||||
</div>
|
||||
<div class="post-details">
|
||||
<a :href="project.url" target="_blank" class="post-title">
|
||||
{{ project.url }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Portfolios Area End -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Content Area End -->
|
||||
|
||||
|
||||
<!-- Back to Top Start -->
|
||||
<div class="bottomtotop">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
<!-- Back to Top End -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user