From 5b5e04ca12629f5161dd844c1a1edef9d88ce0ff Mon Sep 17 00:00:00 2001
From: dderbentsov <dderbentsov@gmail.com>
Date: Fri, 20 Oct 2023 00:51:47 +0300
Subject: [PATCH] add edit mode button

---
 src/components/TheRightMenu.vue | 55 +++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/components/TheRightMenu.vue b/src/components/TheRightMenu.vue
index 066ce67..1a0a803 100644
--- a/src/components/TheRightMenu.vue
+++ b/src/components/TheRightMenu.vue
@@ -10,13 +10,64 @@
       text-color="blue",
       size="xl"
     )
+    q-btn(
+      v-if="!editMode",
+      style="width: 48px; height: 48px",
+      id="edit",
+      rounded,
+      padding="0px",
+      icon="edit",
+      text-color="blue",
+      size="xl",
+      @click="toggleEditMode",
+    )
+    q-btn(
+      v-if="editMode",
+      style="width: 48px; height: 48px",
+      id="edit",
+      rounded,
+      padding="0px",
+      icon="check",
+      text-color="blue",
+      size="xl"
+      @click="save",
+    )
+    q-btn(
+      v-if="editMode",
+      style="width: 48px; height: 48px",
+      id="edit",
+      rounded,
+      padding="0px",
+      icon="cancel",
+      text-color="blue",
+      size="xl",
+      @click="cancel",
+    )
 </template>
 
 <script>
-import BaseButtonSidebar from "@/components/base/BaseSidebarButton";
 export default {
   name: "TheRightMenu",
-  components: { BaseButtonSidebar },
+  emits: ["save", "cancel", "update:editMode"],
+  data() {
+    return {
+      editMode: false,
+    };
+  },
+  methods: {
+    toggleEditMode() {
+      this.editMode = !this.editMode;
+      this.$emit("update:editMode", this.editMode);
+    },
+    save() {
+      this.toggleEditMode();
+      this.$emit("save");
+    },
+    cancel() {
+      this.toggleEditMode();
+      this.$emit("cancel");
+    },
+  },
 };
 </script>