Save full width of page on server

appinfo/routes.php

@@ -61,6 +61,8 @@
 			'verb' => 'POST', 'requirements' => ['collectiveId' => '\d+', 'parentId' => '\d+']],
 		['name' => 'page#touch', 'url' => '/_api/{collectiveId}/_pages/{id}/touch',
 			'verb' => 'GET', 'requirements' => ['collectiveId' => '\d+', 'id' => '\d+']],
+		['name' => 'page#setFullWidth', 'url' => '/_api/{collectiveId}/_pages/{id}/fullWidth',
+			'verb' => 'PUT', 'requirements' => ['collectiveId' => '\d+', 'id' => '\d+']],
 		['name' => 'page#contentSearch', 'url' => '/_api/{collectiveId}/_pages/search',
 			'verb' => 'GET', 'requirements' => ['collectiveId' => '\d+', 'filterString' => '\s+']],
 		['name' => 'page#moveOrCopy', 'url' => '/_api/{collectiveId}/_pages/{id}',

cypress/e2e/pages.spec.js

@@ -259,7 +259,7 @@ describe('Pages', function() {
 				.invoke('outerWidth')
 				.should('be.greaterThan', 700)
 
-			// Reload to check persistence with browser storage
+			// Reload to check persistence
 			cy.reload()
 			cy.get('#titleform').should('have.css', 'max-width', 'none')
 			cy.getReadOnlyEditor()

lib/Controller/PageController.php

@@ -137,6 +137,17 @@ public function setEmoji(int $collectiveId, int $id, ?string $emoji = null): Dat
 		}, $this->logger);
 	}
 
+	#[NoAdminRequired]
+	public function setFullWidth(int $collectiveId, int $id, bool $fullWidth): DataResponse {
+		return $this->handleErrorResponse(function () use ($collectiveId, $id, $fullWidth): array {
+			$userId = $this->getUserId();
+			$pageInfo = $this->service->setFullWidth($collectiveId, $id, $userId, $fullWidth);
+			return [
+				"data" => $pageInfo,
+			];
+		}, $this->logger);
+	}
+
 	#[NoAdminRequired]
 	public function setSubpageOrder(int $collectiveId, int $id, ?string $subpageOrder = null): DataResponse {
 		return $this->handleErrorResponse(function () use ($collectiveId, $id, $subpageOrder): array {

lib/Db/Page.php

@@ -24,6 +24,8 @@
  * @method void setEmoji(?string $value)
  * @method string getSubpageOrder()
  * @method void setSubpageOrder(string $value)
+ * @method bool getFullWidth()
+ * @method void setFullWidth(bool $value)
  * @method int|null getTrashTimestamp()
  * @method void setTrashTimestamp(?int $trashTimestamp)
  */
@@ -32,15 +34,21 @@ class Page extends Entity implements JsonSerializable {
 	protected ?string $lastUserId = null;
 	protected ?string $emoji = null;
 	protected ?string $subpageOrder = null;
+	protected ?bool $fullWidth = null;
 	protected ?int $trashTimestamp = null;
 
+	public function __construct() {
+		$this->addType('fullWidth', 'bool');
+	}
+
 	public function jsonSerialize(): array {
 		return [
 			'id' => $this->id,
 			'fileId' => $this->fileId,
 			'lastUserId' => $this->lastUserId,
 			'emoji' => $this->emoji,
 			'subpageOrder' => json_decode($this->getSubpageOrder() ?? '[]', true, 512, JSON_THROW_ON_ERROR),
+			'fullWidth' => $this->fullWidth,
 			'trashTimestamp' => $this->trashTimestamp,
 		];
 	}

lib/Migration/Version021200Date20240725154232.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\Collectives\Migration;
+
+use Closure;
+use OCP\DB\ISchemaWrapper;
+use OCP\DB\Types;
+use OCP\Migration\IOutput;
+use OCP\Migration\SimpleMigrationStep;
+
+class Version021200Date20240725154232 extends SimpleMigrationStep {
+	public function changeSchema(IOutput $output, Closure $schemaClosure, array $options): ?ISchemaWrapper {
+		/** @var ISchemaWrapper $schema */
+		$schema = $schemaClosure();
+
+		$table = $schema->getTable('collectives_pages');
+		if (!$table->hasColumn('full_width')) {
+			$table->addColumn('full_width', Types::BOOLEAN, [
+				'notnull' => false,
+				'default' => false,
+			]);
+
+			return $schema;
+		}
+
+		return null;
+	}
+}

lib/Model/PageInfo.php

@@ -24,6 +24,7 @@ class PageInfo implements JsonSerializable {
 	private ?string $lastUserId = null;
 	private ?string $lastUserDisplayName = null;
 	private ?string $emoji = null;
+	private bool $fullWidth = false;
 	private ?string $subpageOrder = null;
 	private ?int $trashTimestamp = null;
 	private string $title;
@@ -67,6 +68,14 @@ public function setEmoji(?string $emoji): void {
 		$this->emoji = $emoji;
 	}
 
+	public function isFullWidth(): bool {
+		return $this->fullWidth;
+	}
+
+	public function setFullWidth(bool $fullWidth): void {
+		$this->fullWidth = $fullWidth;
+	}
+
 	public function getSubpageOrder(): ?string {
 		return $this->subpageOrder;
 	}
@@ -153,6 +162,7 @@ public function jsonSerialize(): array {
 			'lastUserId' => $this->lastUserId,
 			'lastUserDisplayName' => $this->lastUserDisplayName,
 			'emoji' => $this->emoji,
+			'isFullWidth' => $this->fullWidth,
 			'subpageOrder' => json_decode($this->subpageOrder ?? '[]', true, 512, JSON_THROW_ON_ERROR),
 			'trashTimestamp' => $this->trashTimestamp,
 			'title' => $this->title,
@@ -170,7 +180,7 @@ public function jsonSerialize(): array {
 	 * @throws InvalidPathException
 	 * @throws NotFoundException
 	 */
-	public function fromFile(File $file, int $parentId, ?string $lastUserId = null, ?string $lastUserDisplayName = null, ?string $emoji = null, ?string $subpageOrder = null): void {
+	public function fromFile(File $file, int $parentId, ?string $lastUserId = null, ?string $lastUserDisplayName = null, ?string $emoji = null, ?string $subpageOrder = null, bool $fullWidth = false): void {
 		$this->setId($file->getId());
 		// Set folder name as title for all index pages except the collective landing page
 		$dirName = dirname($file->getInternalPath());
@@ -197,6 +207,9 @@ public function fromFile(File $file, int $parentId, ?string $lastUserId = null,
 		if ($emoji !== null) {
 			$this->setEmoji($emoji);
 		}
+		if ($fullWidth !== null) {
+			$this->setFullWidth($fullWidth);
+		}
 		if ($subpageOrder !== null) {
 			$this->setSubpageOrder($subpageOrder);
 		}

lib/Service/PageService.php

@@ -198,14 +198,16 @@ private function getPageByFile(File $file, ?Node $parent = null): PageInfo {
 		$lastUserId = ($page !== null) ? $page->getLastUserId() : null;
 		$emoji = ($page !== null) ? $page->getEmoji() : null;
 		$subpageOrder = ($page !== null) ? $page->getSubpageOrder() : null;
+		$fullWidth = ($page !== null) ? $page->getFullWidth() : false;
 		$pageInfo = new PageInfo();
 		try {
 			$pageInfo->fromFile($file,
 				$this->getParentPageId($file, $parent),
 				$lastUserId,
 				$lastUserId ? $this->userManager->getDisplayName($lastUserId) : null,
 				$emoji,
-				$subpageOrder);
+				$subpageOrder,
+				$fullWidth);
 		} catch (FilesNotFoundException | InvalidPathException $e) {
 			throw new NotFoundException($e->getMessage(), 0, $e);
 		}
@@ -233,7 +235,8 @@ private function getTrashPageByFile(File $file, string $filename, string $timest
 				$lastUserId,
 				$lastUserId ? $this->userManager->getDisplayName($lastUserId) : null,
 				$emoji,
-				$subpageOrder);
+				$subpageOrder,
+				$page->getFullWidth());
 			$pageInfo->setTrashTimestamp($trashTimestamp);
 			$pageInfo->setFilePath('');
 			$pageInfo->setTitle(basename($filename, PageInfo::SUFFIX));
@@ -258,13 +261,16 @@ private function notifyPush(int $collectiveId): void {
 		}
 	}
 
-	private function updatePage(int $collectiveId, int $fileId, string $userId, ?string $emoji = null): void {
+	private function updatePage(int $collectiveId, int $fileId, string $userId, ?string $emoji = null, ?bool $fullWidth = null): void {
 		$page = new Page();
 		$page->setFileId($fileId);
 		$page->setLastUserId($userId);
 		if ($emoji !== null) {
 			$page->setEmoji($emoji);
 		}
+		if ($fullWidth !== null) {
+			$page->setFullWidth($fullWidth);
+		}
 		$this->pageMapper->updateOrInsert($page);
 		$this->notifyPush($collectiveId);
 	}
@@ -611,6 +617,23 @@ public function touch(int $collectiveId, int $id, string $userId): PageInfo {
 		return $pageInfo;
 	}
 
+	/**
+	 * @throws MissingDependencyException
+	 * @throws NotFoundException
+	 * @throws NotPermittedException
+	 */
+	public function setFullWidth(int $collectiveId, int $id, string $userId, bool $fullWidth): PageInfo {
+		$this->verifyEditPermissions($collectiveId, $userId);
+		$folder = $this->getCollectiveFolder($collectiveId, $userId);
+		$file = $this->nodeHelper->getFileById($folder, $id);
+		$pageInfo = $this->getPageByFile($file);
+		$pageInfo->setLastUserId($userId);
+		$pageInfo->setLastUserDisplayName($this->userManager->getDisplayName($userId));
+		$pageInfo->setFullWidth($fullWidth);
+		$this->updatePage($collectiveId, $pageInfo->getId(), $userId, fullWidth: $fullWidth);
+		return $pageInfo;
+	}
+
 	/**
 	 * @throws NotFoundException
 	 */

package.json

@@ -21,7 +21,6 @@
   "dependencies": {
     "@nextcloud/auth": "^2.4.0",
     "@nextcloud/axios": "^2.5.0",
-    "@nextcloud/browser-storage": "^0.4.0",
     "@nextcloud/capabilities": "^1.2.0",
     "@nextcloud/dialogs": "^5.3.5",
     "@nextcloud/event-bus": "^3.3.1",

src/apis/collectives/pages.js

@@ -157,6 +157,20 @@ export function setPageEmoji(context, pageId, emoji) {
 	)
 }
 
+/**
+ * Set full width for a page
+ *
+ * @param {object} context - either the current collective or a share context
+ * @param {number} pageId - Id of the page to update
+ * @param {boolean} fullWidth - Full width for the page
+ */
+export function setFullWidth(context, pageId, fullWidth) {
+	return axios.put(
+		pagesUrl(context, pageId, 'fullWidth'),
+		{ fullWidth },
+	)
+}
+
 /**
  * Set subpageOrder for a page
  *

src/components/Page.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div :class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
+	<div :class="[currentPage.isFullWidth ? 'full-width-view' : 'sheet-view']">
 		<h2 id="titleform" class="page-title">
 			<!-- Page emoji or icon -->
 			<div class="page-title-icon"
@@ -247,7 +247,6 @@ export default {
 	},
 
 	mounted() {
-		this.initFullWidthPageIds()
 		document.title = this.documentTitle
 		this.initTitleEntry()
 	},
@@ -261,7 +260,6 @@ export default {
 		...mapActions(usePagesStore, [
 			'getPages',
 			'renamePage',
-			'initFullWidthPageIds',
 		]),
 
 		initTitleEntry() {

src/components/Page/PageActionMenu.vue

@@ -41,7 +41,8 @@
 
 			<!-- Page view options: only displayed in page title menu -->
 			<NcActionCheckbox v-if="!inPageList && !isMobile"
-				:checked="isFullWidthView"
+				:checked="currentPage.isFullWidth"
+				:disabled="!currentCollectiveCanEdit"
 				@check="onCheckFullWidthView"
 				@uncheck="onUncheckFullWidthView">
 				{{ t('collectives', 'Full width') }}
@@ -230,7 +231,6 @@ export default {
 		]),
 		...mapState(usePagesStore, [
 			'hasSubpages',
-			'isFullWidthView',
 			'pagesTreeWalk',
 			'showTemplates',
 			'visibleSubpages',
@@ -313,11 +313,11 @@ export default {
 		...mapActions(usePagesStore, ['setFullWidthView']),
 
 		onCheckFullWidthView() {
-			this.setFullWidthView(true)
+			this.setFullWidthView({ pageId: this.currentPage.id, fullWidthView: true })
 		},
 
 		onUncheckFullWidthView() {
-			this.setFullWidthView(false)
+			this.setFullWidthView({ pageId: this.currentPage.id, fullWidthView: false })
 		},
 
 		openShareTab() {

src/components/Page/Version.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div :class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
+	<div :class="[currentPage.isFullWidth ? 'full-width-view' : 'sheet-view']">
 		<h2 id="titleform" class="page-title">
 			<div class="page-title-icon">
 				<div v-if="currentPage.emoji">