Page section: fix multiple status buttons

getkirby · Jun 8, 2024 · 38a3044 · 38a3044
1 parent c58147b
commit 38a3044
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 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/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 {
@@ -9,20 +10,20 @@ 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");
-
-				page.flag = {
-					status: page.status,
-					disabled: disabled,
-					click: () => this.$dialog(page.link + "/changeStatus")
-				};
-
+				page = toRaw(page);
 				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.buttons = [
+					{
+						...this.$helper.page.status(
+							page.status,
+							page.permissions.changeStatus === false
+						),
+						click: () => this.$dialog(page.link + "/changeStatus")
+					},
+					...(page.buttons ?? [])
+				];
 				page.options = this.$dropdown(page.link, {
 					query: {
 						view: "list",