From 0882091bf24e26c7a810c6cc7ae619f6e8214903 Mon Sep 17 00:00:00 2001
From: ildyria <beviguier@gmail.com>
Date: Wed, 13 Nov 2024 12:57:35 +0100
Subject: [PATCH] squash

---
 app/Actions/Photo/Timeline.php                |  44 ++++
 .../Gallery/TimelineController.php            |  40 +++
 .../Requests/Photo/GetTimelineRequest.php     |  22 ++
 app/Http/Resources/Timeline/InitResource.php  |  22 ++
 .../Resources/Timeline/TimelineResource.php   |  77 ++++++
 resources/js/lychee.d.ts                      |  14 ++
 resources/js/router/routes.ts                 |   6 +
 resources/js/services/timeline-service.ts     |  14 ++
 .../js/views/gallery-panels/Timeline.vue      | 229 ++++++++++++++++++
 routes/api_v2.php                             |   5 +-
 routes/web_v2.php                             |   2 +
 11 files changed, 474 insertions(+), 1 deletion(-)
 create mode 100644 app/Actions/Photo/Timeline.php
 create mode 100644 app/Http/Controllers/Gallery/TimelineController.php
 create mode 100644 app/Http/Requests/Photo/GetTimelineRequest.php
 create mode 100644 app/Http/Resources/Timeline/InitResource.php
 create mode 100644 app/Http/Resources/Timeline/TimelineResource.php
 create mode 100644 resources/js/services/timeline-service.ts
 create mode 100644 resources/js/views/gallery-panels/Timeline.vue

diff --git a/app/Actions/Photo/Timeline.php b/app/Actions/Photo/Timeline.php
new file mode 100644
index 00000000000..240e0bc10f5
--- /dev/null
+++ b/app/Actions/Photo/Timeline.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Actions\Photo;
+
+use App\Eloquent\FixedQueryBuilder;
+use App\Enum\ColumnSortingPhotoType;
+use App\Enum\OrderSortingType;
+use App\Models\Configs;
+use App\Models\Photo;
+use App\Policies\PhotoQueryPolicy;
+use Illuminate\Database\Eloquent\Builder;
+
+class Timeline
+{
+	protected PhotoQueryPolicy $photoQueryPolicy;
+
+	public function __construct(PhotoQueryPolicy $photoQueryPolicy)
+	{
+		$this->photoQueryPolicy = $photoQueryPolicy;
+	}
+
+	/**
+	 * Create the query manually.
+	 *
+	 * @return FixedQueryBuilder<Photo>
+	 */
+	public function do(): Builder
+	{
+		$order = Configs::getValueAsEnum('timeline_photos_order', ColumnSortingPhotoType::class);
+
+		// Safe default (should not be needed).
+		// @codeCoverageIgnoreStart
+		if (!in_array($order, [ColumnSortingPhotoType::CREATED_AT, ColumnSortingPhotoType::TAKEN_AT], true)) {
+			$order = ColumnSortingPhotoType::TAKEN_AT;
+		}
+		// @codeCoverageIgnoreEnd
+
+		return $this->photoQueryPolicy->applySearchabilityFilter(
+			query: Photo::query()->with(['album', 'size_variants', 'size_variants.sym_links']),
+			origin: null,
+			include_nsfw: !Configs::getValueAsBool('hide_nsfw_in_timeline')
+		)->orderBy($order->value, OrderSortingType::DESC->value);
+	}
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Gallery/TimelineController.php b/app/Http/Controllers/Gallery/TimelineController.php
new file mode 100644
index 00000000000..d12d2484bd1
--- /dev/null
+++ b/app/Http/Controllers/Gallery/TimelineController.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Controllers\Gallery;
+
+use App\Actions\Photo\Timeline;
+use App\Http\Requests\Photo\GetTimelineRequest;
+use App\Http\Resources\Timeline\InitResource;
+use App\Http\Resources\Timeline\TimelineResource;
+use App\Models\Configs;
+use App\Models\Photo;
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Routing\Controller;
+use Spatie\LaravelData\Data;
+
+/**
+ * Controller responsible for the Timeline data.
+ */
+class TimelineController extends Controller
+{
+	public function __invoke(GetTimelineRequest $request, Timeline $timeline): Data
+	{
+		/** @var LengthAwarePaginator<Photo> $photoResults */
+		/** @disregard P1013 Undefined method withQueryString() (stupid intelephense) */
+		$photoResults = $timeline->do()->paginate(Configs::getValueAsInt('timeline_photos_pagination_limit'));
+
+		return TimelineResource::fromData($photoResults);
+	}
+
+	/**
+	 * Return init Search.
+	 *
+	 * @param GetTimelineRequest $request
+	 *
+	 * @return InitResource
+	 */
+	public function init(GetTimelineRequest $request): Data
+	{
+		return new InitResource();
+	}
+}
\ No newline at end of file
diff --git a/app/Http/Requests/Photo/GetTimelineRequest.php b/app/Http/Requests/Photo/GetTimelineRequest.php
new file mode 100644
index 00000000000..ebbd486536e
--- /dev/null
+++ b/app/Http/Requests/Photo/GetTimelineRequest.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Requests\Photo;
+
+use App\Http\Requests\AbstractEmptyRequest;
+use App\Models\Configs;
+use Illuminate\Support\Facades\Auth;
+
+class GetTimelineRequest extends AbstractEmptyRequest
+{
+	/**
+	 * {@inheritDoc}
+	 */
+	public function authorize(): bool
+	{
+		if (!Auth::check() && !Configs::getValueAsBool('timeline_photos_public')) {
+			return false;
+		}
+
+		return Configs::getValueAsBool('timeline_photos_enabled');
+	}
+}
\ No newline at end of file
diff --git a/app/Http/Resources/Timeline/InitResource.php b/app/Http/Resources/Timeline/InitResource.php
new file mode 100644
index 00000000000..623f52215c0
--- /dev/null
+++ b/app/Http/Resources/Timeline/InitResource.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Resources\Timeline;
+
+use App\Enum\PhotoLayoutType;
+use App\Models\Configs;
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+/**
+ * Initialization resource for the search.
+ */
+#[TypeScript()]
+class InitResource extends Data
+{
+	public PhotoLayoutType $photo_layout;
+
+	public function __construct()
+	{
+		$this->photo_layout = Configs::getValueAsEnum('timeline_photos_layout', PhotoLayoutType::class);
+	}
+}
\ No newline at end of file
diff --git a/app/Http/Resources/Timeline/TimelineResource.php b/app/Http/Resources/Timeline/TimelineResource.php
new file mode 100644
index 00000000000..c0b403920c3
--- /dev/null
+++ b/app/Http/Resources/Timeline/TimelineResource.php
@@ -0,0 +1,77 @@
+<?php
+
+namespace App\Http\Resources\Timeline;
+
+use App\Enum\TimelinePhotoGranularity;
+use App\Http\Resources\Models\PhotoResource;
+use App\Http\Resources\Models\Utils\TimelineData;
+use App\Http\Resources\Traits\HasPrepPhotoCollection;
+use App\Models\Configs;
+use App\Models\Photo;
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Contracts\Pagination\Paginator;
+use Illuminate\Support\Collection;
+use Spatie\LaravelData\Data;
+use Spatie\TypeScriptTransformer\Attributes\LiteralTypeScriptType;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+/**
+ * Result of a Search query.
+ */
+#[TypeScript()]
+class TimelineResource extends Data
+{
+	use HasPrepPhotoCollection;
+
+	/** @var Collection<int,PhotoResource> */
+	#[LiteralTypeScriptType('App.Http.Resources.Models.PhotoResource[]')]
+	public Collection $photos;
+
+	public int $current_page;
+	public int $from;
+	public int $last_page;
+	public int $per_page;
+	public int $to;
+	public int $total;
+
+	/**
+	 * @param LengthAwarePaginator<PhotoResource>&Paginator<PhotoResource> $photos
+	 *
+	 * @return void
+	 */
+	public function __construct(
+		LengthAwarePaginator $photos,
+	) {
+		$this->photos = collect($photos->items());
+		$this->current_page = $photos->currentPage();
+		$this->from = $photos->firstItem() ?? 0;
+		$this->last_page = $photos->lastPage();
+		$this->per_page = $photos->perPage();
+		$this->to = $photos->lastItem() ?? 0;
+		$this->total = $photos->total();
+
+		// We do it manually this time.
+		$previous_photo = null;
+		$this->photos->each(function (PhotoResource &$photo) use (&$previous_photo) {
+			if ($previous_photo !== null) {
+				$previous_photo->next_photo_id = $photo->id;
+			}
+			$photo->previous_photo_id = $previous_photo?->id;
+			$previous_photo = $photo;
+		});
+		$photo_granularity = Configs::getValueAsEnum('timeline_photos_granularity', TimelinePhotoGranularity::class);
+		$this->photos = TimelineData::setTimeLineDataForPhotos($this->photos, $photo_granularity);
+	}
+
+	/**
+	 * @param LengthAwarePaginator<Photo> $photos
+	 *
+	 * @return TimelineResource
+	 */
+	public static function fromData(LengthAwarePaginator $photos): self
+	{
+		return new self(
+			photos: PhotoResource::collect($photos), // @phpstan-ignore-line
+		);
+	}
+}
\ No newline at end of file
diff --git a/resources/js/lychee.d.ts b/resources/js/lychee.d.ts
index 0c12d52b63b..d4fe36f8898 100644
--- a/resources/js/lychee.d.ts
+++ b/resources/js/lychee.d.ts
@@ -628,3 +628,17 @@ declare namespace App.Http.Resources.Statistics {
 		size: number;
 	};
 }
+declare namespace App.Http.Resources.Timeline {
+	export type InitResource = {
+		photo_layout: App.Enum.PhotoLayoutType;
+	};
+	export type TimelineResource = {
+		photos: App.Http.Resources.Models.PhotoResource[] | Array<any>;
+		current_page: number;
+		from: number;
+		last_page: number;
+		per_page: number;
+		to: number;
+		total: number;
+	};
+}
diff --git a/resources/js/router/routes.ts b/resources/js/router/routes.ts
index b67a32d06f1..50e09f05e85 100644
--- a/resources/js/router/routes.ts
+++ b/resources/js/router/routes.ts
@@ -3,6 +3,7 @@ import Albums from "@/views/gallery-panels/Albums.vue";
 import Photo from "@/views/gallery-panels/Photo.vue";
 
 const Landing = () => import("@/views/Landing.vue");
+const Timeline = () => import("@/views/gallery-panels/Timeline.vue");
 const Frame = () => import("@/views/gallery-panels/Frame.vue");
 const Search = () => import("@/views/gallery-panels/Search.vue");
 const MapView = () => import("@/views/gallery-panels/Map.vue");
@@ -45,6 +46,11 @@ const routes_ = [
 		component: Frame,
 		props: true,
 	},
+	{
+		name: "timeline",
+		path: "/timeline",
+		component: Timeline,
+	},
 	{
 		name: "frame",
 		path: "/frame",
diff --git a/resources/js/services/timeline-service.ts b/resources/js/services/timeline-service.ts
new file mode 100644
index 00000000000..dc778702878
--- /dev/null
+++ b/resources/js/services/timeline-service.ts
@@ -0,0 +1,14 @@
+import axios, { type AxiosResponse } from "axios";
+import Constants from "./constants";
+
+const TimelineService = {
+	timeline(page: number = 1): Promise<AxiosResponse<App.Http.Resources.Timeline.TimelineResource>> {
+		return axios.get(`${Constants.getApiUrl()}Timeline`, { params: { page: page }, data: {} });
+	},
+
+	init(): Promise<AxiosResponse<App.Http.Resources.Timeline.InitResource>> {
+		return axios.get(`${Constants.getApiUrl()}Timeline::init`, { data: {} });
+	},
+};
+
+export default TimelineService;
diff --git a/resources/js/views/gallery-panels/Timeline.vue b/resources/js/views/gallery-panels/Timeline.vue
new file mode 100644
index 00000000000..fa165304fa3
--- /dev/null
+++ b/resources/js/views/gallery-panels/Timeline.vue
@@ -0,0 +1,229 @@
+<template>
+	<KeybindingsHelp v-model:visible="isKeybindingsHelpOpen" v-if="user?.id" />
+	<!-- <div v-if="rootConfig && rootRights" @click="unselect" class="h-svh overflow-y-auto"> -->
+	<div v-if="rootConfig && rootRights" class="h-svh overflow-y-auto">
+		<Collapse :when="!is_full_screen">
+			<AlbumsHeader
+				v-if="user"
+				:user="user"
+				:title="title"
+				:rights="rootRights"
+				@refresh="refresh"
+				@help="isKeybindingsHelpOpen = true"
+				:config="rootConfig"
+			/>
+		</Collapse>
+		<PhotoThumbPanel
+			v-if="layoutConfig !== null && photos !== null && photos.length > 0"
+			header="lychee.PHOTOS"
+			:photos="photos"
+			:album="undefined"
+			:gallery-config="layoutConfig"
+			:photo-layout="layout"
+			:selected-photos="selectedPhotosIds"
+			@clicked="photoClick"
+			@contexted="photoMenuOpen"
+			:is-timeline="true"
+		/>
+		<div class="sentinel" ref="sentinel"></div>
+		<ScrollTop target="parent" :threshold="50" />
+		<!-- Dialogs -->
+		<PhotoTagDialog
+			v-model:visible="isTagVisible"
+			:parent-id="undefined"
+			:photo="selectedPhoto"
+			:photo-ids="selectedPhotosIds"
+			@tagged="refresh"
+		/>
+		<PhotoCopyDialog
+			v-model:visible="isCopyVisible"
+			:parent-id="undefined"
+			:photo="selectedPhoto"
+			:photo-ids="selectedPhotosIds"
+			@copied="refresh"
+		/>
+		<MoveDialog
+			v-model:visible="isMoveVisible"
+			:parent-id="undefined"
+			:photo="selectedPhoto"
+			:photo-ids="selectedPhotosIds"
+			:album="undefined"
+			:album-ids="[]"
+			@moved="refresh"
+		/>
+		<DeleteDialog
+			v-model:visible="isDeleteVisible"
+			:parent-id="undefined"
+			:photo="selectedPhoto"
+			:photo-ids="selectedPhotosIds"
+			:album="undefined"
+			:album-ids="[]"
+			@deleted="refresh"
+		/>
+		<RenameDialog v-model:visible="isRenameVisible" :parent-id="undefined" :album="undefined" :photo="selectedPhoto" @renamed="refresh" />
+
+		<ContextMenu ref="menu" :model="Menu" :class="Menu.length === 0 ? 'hidden' : ''">
+			<template #item="{ item, props }">
+				<Divider v-if="item.is_divider" />
+				<a v-else v-ripple v-bind="props.action" @click="item.callback">
+					<span :class="item.icon" />
+					<span class="ml-2">
+						<!-- @vue-ignore -->
+						{{ $t(item.label) }}
+					</span>
+				</a>
+			</template>
+		</ContextMenu>
+		<GalleryFooter v-once />
+	</div>
+</template>
+<script setup lang="ts">
+import { useAuthStore } from "@/stores/Auth";
+import { computed, ref } from "vue";
+import AlbumsHeader from "@/components/headers/AlbumsHeader.vue";
+import { useLycheeStateStore } from "@/stores/LycheeState";
+import { storeToRefs } from "pinia";
+import { onKeyStroke, useIntersectionObserver } from "@vueuse/core";
+import { getModKey, shouldIgnoreKeystroke } from "@/utils/keybindings-utils";
+import KeybindingsHelp from "@/components/modals/KeybindingsHelp.vue";
+import { useSelection } from "@/composables/selections/selections";
+import { useContextMenu } from "@/composables/contextMenus/contextMenu";
+import ContextMenu from "primevue/contextmenu";
+import { useAlbumsRefresher } from "@/composables/album/albumsRefresher";
+import MoveDialog from "@/components/forms/gallery-dialogs/MoveDialog.vue";
+import DeleteDialog from "@/components/forms/gallery-dialogs/DeleteDialog.vue";
+import RenameDialog from "@/components/forms/gallery-dialogs/RenameDialog.vue";
+import { useGalleryModals } from "@/composables/modalsTriggers/galleryModals";
+import Divider from "primevue/divider";
+import { Collapse } from "vue-collapsed";
+import AlbumService from "@/services/album-service";
+import { useRouter } from "vue-router";
+import { useMouseEvents } from "@/composables/album/uploadEvents";
+import GalleryFooter from "@/components/footers/GalleryFooter.vue";
+import PhotoService from "@/services/photo-service";
+import { useGetLayoutConfig } from "@/layouts/PhotoLayout";
+import PhotoThumbPanel from "@/components/gallery/PhotoThumbPanel.vue";
+import PhotoTagDialog from "@/components/forms/photo/PhotoTagDialog.vue";
+import PhotoCopyDialog from "@/components/forms/photo/PhotoCopyDialog.vue";
+import ScrollTop from "primevue/scrolltop";
+import TimelineService from "@/services/timeline-service";
+import { EmptyAlbumCallbacks } from "@/utils/Helpers";
+
+const auth = useAuthStore();
+const router = useRouter();
+const lycheeStore = useLycheeStateStore();
+lycheeStore.init();
+lycheeStore.resetSearch();
+
+const { are_nsfw_visible, is_full_screen, is_login_open, title, is_upload_visible, list_upload_files } = storeToRefs(lycheeStore);
+
+const photos = ref([] as App.Http.Resources.Models.PhotoResource[]); // unused.
+const albums = ref([]); // unused.
+
+const { layout, layoutConfig, loadLayoutConfig, loadLayoutTimeline } = useGetLayoutConfig();
+const { user, isKeybindingsHelpOpen, rootConfig, rootRights, refresh } = useAlbumsRefresher(auth, lycheeStore, is_login_open);
+
+const { selectedPhotosIdx, selectedPhoto, selectedPhotos, selectedPhotosIds, photoClick, hasSelection, unselect, selectEverything } = useSelection(
+	photos,
+	albums,
+);
+
+loadLayoutConfig();
+loadLayoutTimeline();
+
+const page = ref(0);
+const lastPage = ref(0);
+
+const sentinel = ref(null);
+
+const { stop } = useIntersectionObserver(sentinel, ([{ isIntersecting }]) => {
+	if (isIntersecting) {
+		loadMore();
+	}
+});
+
+function loadMore() {
+	if (page.value > lastPage.value) {
+		return;
+	}
+	page.value += 1;
+	TimelineService.timeline(page.value).then((response) => {
+		console.log(response.data.last_page);
+		console.log(page.value);
+		photos.value.push(...response.data.photos);
+		lastPage.value = response.data.last_page;
+	});
+}
+
+// Modals for Albums
+const {
+	isDeleteVisible,
+	toggleDelete,
+	isMoveVisible,
+	toggleMove,
+	isRenameVisible,
+	toggleRename,
+	isTagVisible,
+	toggleTag,
+	isCopyVisible,
+	toggleCopy,
+} = useGalleryModals(is_upload_visible);
+
+const photoCallbacks = {
+	star: () => {
+		PhotoService.star(selectedPhotosIds.value, true);
+		AlbumService.clearCache();
+		refresh();
+	},
+	unstar: () => {
+		PhotoService.star(selectedPhotosIds.value, false);
+		AlbumService.clearCache();
+		refresh();
+	},
+	setAsCover: () => {},
+	setAsHeader: () => {},
+	toggleTag: toggleTag,
+	toggleRename: toggleRename,
+	toggleCopyTo: toggleCopy,
+	toggleMove: toggleMove,
+	toggleDelete: toggleDelete,
+	toggleDownload: () => {},
+};
+
+const { menu, Menu, photoMenuOpen } = useContextMenu(
+	{
+		selectedPhoto: selectedPhoto,
+		selectedPhotos: selectedPhotos,
+		selectedPhotosIdx: selectedPhotosIdx,
+	},
+	photoCallbacks,
+	EmptyAlbumCallbacks,
+);
+
+refresh();
+
+onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
+onKeyStroke("f", () => !shouldIgnoreKeystroke() && lycheeStore.toggleFullScreen());
+onKeyStroke(" ", () => !shouldIgnoreKeystroke() && unselect());
+onKeyStroke("m", () => !shouldIgnoreKeystroke() && rootRights.value?.can_edit && hasSelection() && toggleMove());
+onKeyStroke(["Delete", "Backspace"], () => !shouldIgnoreKeystroke() && rootRights.value?.can_edit && hasSelection() && toggleDelete());
+
+onKeyStroke([getModKey(), "a"], () => !shouldIgnoreKeystroke() && selectEverything());
+
+const { onPaste, dragEnd, dropUpload } = useMouseEvents(rootRights, is_upload_visible, list_upload_files);
+
+window.addEventListener("paste", onPaste);
+window.addEventListener("dragover", dragEnd);
+window.addEventListener("drop", dropUpload);
+router.afterEach(() => {
+	window.removeEventListener("paste", onPaste);
+	window.removeEventListener("dragover", dragEnd);
+	window.removeEventListener("drop", dropUpload);
+});
+</script>
+<style lang="css">
+/* Kill the border of ScrollTop */
+.p-scrolltop {
+	border: none;
+}
+</style>
diff --git a/routes/api_v2.php b/routes/api_v2.php
index fb1ad1917af..999747f153d 100644
--- a/routes/api_v2.php
+++ b/routes/api_v2.php
@@ -16,7 +16,7 @@
 |
 */
 
-Route::get('/LandingPage', [LandingPageController::class, '__invoke']);
+Route::get('/LandingPage', [LandingPageController::class, '__invoke'])->middleware(['cache_control']);
 Route::get('/Frame', [Gallery\FrameController::class, 'get']);
 
 Route::get('/Gallery::Init', [Gallery\ConfigController::class, 'getInit']);
@@ -24,6 +24,9 @@
 Route::get('/Gallery::getLayout', [Gallery\ConfigController::class, 'getGalleryLayout'])->middleware(['cache_control']);
 Route::get('/Gallery::getUploadLimits', [Gallery\ConfigController::class, 'getUploadCOnfig'])->middleware(['cache_control']);
 
+Route::get('/Timeline', [Gallery\TimelineController::class, '__invoke'])->middleware(['cache_control']);
+Route::get('/Timeline::init', [Gallery\TimelineController::class, 'init'])->middleware(['cache_control']);
+
 /**
  * ALBUMS.
  */
diff --git a/routes/web_v2.php b/routes/web_v2.php
index 7630d99daae..553cb87ba46 100644
--- a/routes/web_v2.php
+++ b/routes/web_v2.php
@@ -27,6 +27,8 @@
 Route::get('/frame', [VueController::class, 'view'])->name('frame')->middleware(['migration:complete']);
 Route::get('/frame/{albumId}', [VueController::class, 'view'])->name('frame')->middleware(['migration:complete']);
 
+Route::get('/timeline', [VueController::class, 'view'])->name('map')->middleware(['migration:complete']);
+
 Route::get('/map', [VueController::class, 'view'])->name('map')->middleware(['migration:complete']);
 Route::get('/map/{albumId}', [VueController::class, 'view'])->name('map')->middleware(['migration:complete']);