Merge pull request #6480 from getkirby/v5/refactor/nonmutating-models…

…section-items-computed Models sections: non-mutating `items` computed
getkirby · Jun 12, 2024 · 932cf27 · 932cf27
2 parents fddd1d7 + 1c47d24
commit 932cf27
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 43 deletions.
diff --git 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
@@ -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() {