From 1c47d24ed8fb5f56d4a7d377753a0c93cc7ca586 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sun, 9 Jun 2024 11:17:51 +0200
Subject: [PATCH] Models sections: non-mutating `items` computed

---
 .../src/components/Sections/FilesSection.vue  | 31 +++++-----
 .../src/components/Sections/PagesSection.vue  | 57 ++++++++++---------
 2 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/panel/src/components/Sections/FilesSection.vue b/panel/src/components/Sections/FilesSection.vue
index 468438ecf5..4cc37ab833 100644
--- a/panel/src/components/Sections/FilesSection.vue
+++ b/panel/src/components/Sections/FilesSection.vue
@@ -23,23 +23,24 @@ export default {
 		},
 		items() {
 			return this.data.map((file) => {
-				file.sortable = this.options.sortable;
-				file.column = this.column;
-				file.options = this.$dropdown(file.link, {
-					query: {
-						view: "list",
-						update: this.options.sortable,
-						delete: this.data.length > this.options.min
-					}
-				});
+				const sortable = this.options.sortable;
 
-				// add data-attributes info for item
-				file.data = {
-					"data-id": file.id,
-					"data-template": file.template
+				return {
+					...file,
+					column: this.column,
+					data: {
+						"data-id": file.id,
+						"data-template": file.template
+					},
+					options: this.$dropdown(file.link, {
+						query: {
+							view: "list",
+							update: sortable,
+							delete: this.data.length > this.options.min
+						}
+					}),
+					sortable
 				};
-
-				return file;
 			});
 		},
 		type() {
diff --git a/panel/src/components/Sections/PagesSection.vue b/panel/src/components/Sections/PagesSection.vue
index d960bcf4c8..2dcf77b91e 100644
--- a/panel/src/components/Sections/PagesSection.vue
+++ b/panel/src/components/Sections/PagesSection.vue
@@ -9,36 +9,37 @@ export default {
 		},
 		items() {
 			return this.data.map((page) => {
-				const disabled = page.permissions.changeStatus === false;
-				const status = this.$helper.page.status(page.status, disabled);
-				status.click = () => this.$dialog(page.link + "/changeStatus");
+				const sortable = page.permissions.sort && this.options.sortable;
+				const deletable = this.data.length > this.options.min;
 
-				page.flag = {
-					status: page.status,
-					disabled: disabled,
-					click: () => this.$dialog(page.link + "/changeStatus")
+				return {
+					...page,
+					buttons: [
+						{
+							...this.$helper.page.status(
+								page.status,
+								page.permissions.changeStatus === false
+							),
+							click: () => this.$dialog(page.link + "/changeStatus")
+						},
+						...(page.buttons ?? [])
+					],
+					column: this.column,
+					data: {
+						"data-id": page.id,
+						"data-status": page.status,
+						"data-template": page.template
+					},
+					deletable,
+					options: this.$dropdown(page.link, {
+						query: {
+							view: "list",
+							delete: deletable,
+							sort: sortable
+						}
+					}),
+					sortable
 				};
-
-				page.sortable = page.permissions.sort && this.options.sortable;
-				page.deletable = this.data.length > this.options.min;
-				page.column = this.column;
-				page.buttons = [status, ...(page.buttons ?? [])];
-				page.options = this.$dropdown(page.link, {
-					query: {
-						view: "list",
-						delete: page.deletable,
-						sort: page.sortable
-					}
-				});
-
-				// add data-attributes info for item
-				page.data = {
-					"data-id": page.id,
-					"data-status": page.status,
-					"data-template": page.template
-				};
-
-				return page;
 			});
 		},
 		type() {