Page section: fix multiple status buttons

getkirby · Jun 8, 2024 · 24c46f9 · 24c46f9
1 parent c58147b
commit 24c46f9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 43 deletions.
diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
@@ -42,8 +42,8 @@
 		>
 			<!-- Buttons -->
 			<k-button
-				v-for="(button, buttonIndex) in buttons"
-				:key="'button-' + buttonIndex"
+				v-for="button in buttons"
+				:key="JSON.stringify(button)"
 				v-bind="button"
 			/>
 

diff --git a/panel/src/components/Sections/FilesSection.vue b/panel/src/components/Sections/FilesSection.vue
@@ -22,25 +22,22 @@ export default {
 			};
 		},
 		items() {
-			return this.data.map((file) => {
-				file.sortable = this.options.sortable;
-				file.column = this.column;
-				file.options = this.$dropdown(file.link, {
+			return this.data.map((file) => ({
+				...file,
+				column: this.column,
+				data: {
+					"data-id": file.id,
+					"data-template": file.template
+				},
+				options: this.$dropdown(file.link, {
 					query: {
 						view: "list",
 						update: this.options.sortable,
 						delete: this.data.length > this.options.min
 					}
-				});
-
-				// add data-attributes info for item
-				file.data = {
-					"data-id": file.id,
-					"data-template": file.template
-				};
-
-				return file;
-			});
+				}),
+				sortable: this.options.sortable
+			}));
 		},
 		type() {
 			return "files";

diff --git a/panel/src/components/Sections/PagesSection.vue b/panel/src/components/Sections/PagesSection.vue
@@ -1,4 +1,5 @@
 <script>
+import { toRaw } from "vue";
 import ModelsSection from "@/components/Sections/ModelsSection.vue";
 
 export default {
@@ -8,38 +9,34 @@ export default {
 			return this.options.add && this.$panel.permissions.pages.create;
 		},
 		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");
-
-				page.flag = {
-					status: page.status,
-					disabled: disabled,
-					click: () => this.$dialog(page.link + "/changeStatus")
-				};
-
-				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, {
+			return this.data.map((page) => ({
+				...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: this.data.length > this.options.min,
+				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;
-			});
+				}),
+				sortable: page.permissions.sort && this.options.sortable
+			}));
 		},
 		type() {
 			return "pages";