diff --git a/app/Http/Controllers/Fo/NewsController.php b/app/Http/Controllers/Fo/NewsController.php index a296201..f6035bd 100644 --- a/app/Http/Controllers/Fo/NewsController.php +++ b/app/Http/Controllers/Fo/NewsController.php @@ -4,6 +4,7 @@ namespace App\Http\Controllers\Fo; use App\Enums\StaticPageType; use App\Http\Controllers\Controller; +use App\Lib\Helpers\CollectionHelper; use App\Lib\Helpers\ToolboxHelper; use App\Models\News; use App\Models\StaticPage; @@ -22,7 +23,7 @@ class NewsController extends Controller $staticPageModel = StaticPage::query()->where('type', StaticPageType::news)->firstOrFail(); /** @var \App\Models\News $newsModels */ - $newsModels = News::query()->where('published', true)->orderBy('publish_at', 'desc')->get(); + $newsModels = News::query()->where('published', true)->orderBy('publish_at', 'desc')->paginate(12); return view('fo.pages.news.index', \compact('staticPageModel', 'newsModels')); } @@ -61,6 +62,7 @@ class NewsController extends Controller }) ->orderBy('publish_at', 'desc') ->get(); + $newsModels = CollectionHelper::paginateManually($newsModels, 12, request()->page); return response()->json($newsModels); } } diff --git a/resources/sass/fo/pages/_news.scss b/resources/sass/fo/pages/_news.scss index 3b10e78..ed281ad 100644 --- a/resources/sass/fo/pages/_news.scss +++ b/resources/sass/fo/pages/_news.scss @@ -16,13 +16,6 @@ &-content { width: auto; } - - &-news-container{ - background-image: url('@/images/global/bg-white-desktop.png'); - background-position: center; - background-repeat: no-repeat; - background-size: 100% 100%; - } } &-category-arrow{ diff --git a/resources/sass/fo/vendor/_bootstrap.scss b/resources/sass/fo/vendor/_bootstrap.scss index 15e8f10..b217ae1 100644 --- a/resources/sass/fo/vendor/_bootstrap.scss +++ b/resources/sass/fo/vendor/_bootstrap.scss @@ -38,6 +38,7 @@ @import "bootstrap/scss/breadcrumb"; @import "bootstrap/scss/offcanvas"; @import "bootstrap/scss/card"; +@import "bootstrap/scss/placeholders"; // 6. Overload bootstrap classes @import "./../utilities/bootstrap-custom"; diff --git a/resources/ts/fo/components/NewsListComponent.vue b/resources/ts/fo/components/NewsListComponent.vue index 4762df1..11ae47f 100644 --- a/resources/ts/fo/components/NewsListComponent.vue +++ b/resources/ts/fo/components/NewsListComponent.vue @@ -1,5 +1,6 @@ @@ -157,6 +250,10 @@ export default defineComponent({ selectedValue: number, swiper: Swiper|null, intLoading: boolean, + intLoadingMore: boolean, + concatNewsFiltered: boolean, + page: number; + paginator: LaravelPaginator; } { return { newsModels: [], @@ -165,34 +262,39 @@ export default defineComponent({ selectedValue: 0, swiper: null, intLoading: false, + intLoadingMore: false, + concatNewsFiltered: false, + page: 1, + paginator: { + current_page: 1, + first_page_url: "", + from: 1, + last_page: 1, + last_page_url: "", + links: [], + next_page_url: null, + path: "", + per_page: 12, + prev_page_url: null, + to: 1, + total: 1, + }, }; }, computed: {}, mounted() { const json = String(this.$attrs.json ?? "{}"), data = JSON.parse(json); - this.newsModels = data.newsModels; + this.newsModels = data.newsModels.data; + this.paginator = data.newsModels; this.categoryEnums = data.categoryEnums; this.initSelect(); this.initSwiper(); }, methods: { - showNews (slug: string): string { - const route = this.route("fo.news.show", { - SLUG: slug, - }); - if (!route) { - throw new Error("Undefined route fo.news.show"); - } - return route; - }, - formatDate (formDate: string | Date) { - const date = new Date(formDate); - return date.toLocaleDateString; - }, - initSelect() { - // * Toggle la dropdown Arrow du select. - const contactFormSelectList = document.querySelectorAll(".news-list select") as NodeListOf; + /** Init select ::after animation */ + initSelect(): void { + const contactFormSelectList = document.querySelectorAll(".news-list .select-form select") as NodeListOf; document.body.addEventListener("click", function (e: MouseEvent) { const target = e.target as HTMLElement | null; contactFormSelectList.forEach(select => { @@ -205,7 +307,7 @@ export default defineComponent({ }); }, /** Init news slider */ - initSwiper() { + initSwiper(): void { this.swiper = new Swiper(".swiper-news", { modules: [Navigation], grabCursor: true, @@ -218,8 +320,8 @@ export default defineComponent({ }); }, /** Get selected value */ - getSelectedValue(e: Event): number { - let target = e.target as HTMLSelectElement | null; + getSelectedValue(): number { + let target = document.querySelector(".news-list .select-form select") as HTMLSelectElement | null; return Number(target?.value); }, /** Get filtered news route */ @@ -228,23 +330,39 @@ export default defineComponent({ if (!route) { throw new Error("Undefined route fo.news.filtered"); } - return route + "?category=" + this.selectedValue; + return route + "?page=" + this.page + "&category=" + this.selectedValue; + }, + /** Get show news route */ + getShowNewsRoute(slug: string): string { + const route = this.route("fo.news.show", { + SLUG: slug, + }); + if (!route) { + throw new Error("Undefined route fo.news.show"); + } + return route; }, /** Get filtered news */ - getFilteredNews() { + getFilteredNews(): void { window.axios .get(this.newsFilteredRoute) - .then((reponse) => { - this.newsModels = reponse.data; + .then((response) => { + if (this.intLoadingMore && this.concatNewsFiltered) { + this.newsModels = this.newsModels.concat(Object.values(response.data.data)); + } else { + this.newsModels = Object.values(response.data.data); + } + this.paginator = response.data; + this.intLoading = false; + this.intLoadingMore = false; this.$nextTick(() => { this.swiper?.update(); - this.intLoading = false; }); }) .catch(this.ajaxErrorHandler); }, /** Return error message after the ajax call */ - ajaxErrorHandler(e: any) { + ajaxErrorHandler(e: any): void { this.intLoading = false; let message = this.__("Une erreur est survenue"); if (e.response.status === 422) { @@ -271,20 +389,40 @@ export default defineComponent({ console.log(message); }, /** Update news with filtered news */ - updateNews(e: Event) { + updateNews(page: number, concat = false as boolean): void { + this.concatNewsFiltered = concat; + this.page = page; this.intLoading = true; - this.selectedValue = this.getSelectedValue(e); + this.selectedValue = this.getSelectedValue(); this.newsFilteredRoute = this.getFilteredNewsRoute(); this.getFilteredNews(); }, + /** Get all links from the paginator */ + navigateOnPage(pageUrl: string): void { + new URLSearchParams(pageUrl).get("page"); + this.page = Number.parseInt( + String(new URL(pageUrl).searchParams.get("page") ?? 1) + ); + this.updateNews(this.page); + }, + /** Check if it's the last slide is activated */ + checkActiveSlide(): void { + setTimeout(() => { + this.intLoadingMore = ( + this.swiper?.activeIndex !== undefined && + this.paginator.last_page > this.page && + this.paginator.current_page * this.paginator.per_page <= (this.swiper?.activeIndex + 1) + ) ? true : false; + }, 300); + }, }, }); diff --git a/resources/views/fo/pages/news/cards.blade.php b/resources/views/fo/pages/news/cards.blade.php deleted file mode 100644 index 970c481..0000000 --- a/resources/views/fo/pages/news/cards.blade.php +++ /dev/null @@ -1,39 +0,0 @@ -
-
-
- {{ $newsModel->picture_thumbnail_alt }} -
-

- {{ \Carbon\Carbon::parse($newsModel->publish_at)->locale('fr_FR')->isoFormat('D MMM Y') }}

-

{{ $newsModel->title }}

- {{ __('> Lire la suite') }} -
-
-
-
- {{ __('flèche vers la gauche') }} -
-
- {{ __('flèche vers la droite') }} -
-
-
-
-
-
-
- {{ $newsModel->picture_thumbnail_alt }} -
-
-

{{ \Carbon\Carbon::parse($newsModel->publish_at)->locale('fr_FR')->isoFormat('D MMM Y') }}

-
{{ $newsModel->title }}
- {{ __('> Lire la suite') }} -

{{ $newsModel->category->label() }}

-
-
-
diff --git a/resources/views/fo/pages/news/index.blade.php b/resources/views/fo/pages/news/index.blade.php index a64c601..2b2a108 100644 --- a/resources/views/fo/pages/news/index.blade.php +++ b/resources/views/fo/pages/news/index.blade.php @@ -9,7 +9,7 @@
@php $data = [ - 'newsModels' => $newsModels, + 'newsModels' => json_decode(json_encode($newsModels)), 'categoryEnums' => \App\Enums\News\CategoryEnum::toArray(), ]; @endphp