From b5d7a641dc4ef0dc8024c2248c422dd13560e444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 10 Aug 2024 12:34:30 +0500
Subject: [PATCH] change EditTextEntityMenu

---
 src/components/EditTextEntityMenu.vue | 182 ++++++++++++++++++++++++++
 src/components/entities/TextItem.vue  |  59 +++------
 2 files changed, 202 insertions(+), 39 deletions(-)
 create mode 100644 src/components/EditTextEntityMenu.vue

diff --git a/src/components/EditTextEntityMenu.vue b/src/components/EditTextEntityMenu.vue
new file mode 100644
index 0000000..a02b908
--- /dev/null
+++ b/src/components/EditTextEntityMenu.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { changeOrderHomeEntity, deleteEntity } from '@/helpers';
+import type { IText } from '@/interfaces/entities';
+import { useDataStore } from '@/stores/data';
+import type { IEntity } from '@/interfaces/environment';
+
+interface Props {
+  entityData: IText;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits([
+  'deleteEntity',
+  'addTitle',
+  'removeTitle'
+  // 'toLeftPosition',
+  // 'toCenterPosition',
+  // 'toRightPosition',
+  // 'toggleIsResizable'
+]);
+
+// const isResizable = computed(() => props.isResizable);
+// const position = computed(() => props.entityData.position);
+
+const speedDialState = computed(() => {
+  const state = [];
+  if (!props.entityData?.title && props.entityData?.title !== '') {
+    state.push({
+      label: 'Add title',
+      icon: 'pi pi-pencil',
+      command: () => emit('addTitle')
+    });
+  }
+  if (props.entityData?.title || props.entityData?.title === '') {
+    state.push({
+      label: 'Remove title',
+      icon: 'pi pi-trash',
+      command: () => emit('removeTitle')
+    });
+  }
+  // state.push({
+  //   label: !isResizable.value ? 'Resize' : 'Stop resize',
+  //   icon: 'pi pi-arrow-up-right-and-arrow-down-left-from-center',
+  //   command: () => emit('toggleIsResizable')
+  // });
+  // switch (position.value) {
+  //   case 'left':
+  //     state.push({
+  //       label: 'Move to center',
+  //       icon: 'pi pi-align-center',
+  //       command: () => emit('toCenterPosition')
+  //     });
+  //     state.push({
+  //       label: 'Move to right',
+  //       icon: 'pi pi-arrow-right',
+  //       command: () => emit('toRightPosition')
+  //     });
+  //     break;
+  //   case 'center':
+  //     state.push({
+  //       label: 'Move to left',
+  //       icon: 'pi pi-arrow-left',
+  //       command: () => emit('toLeftPosition')
+  //     });
+  //     state.push({
+  //       label: 'Move to right',
+  //       icon: 'pi pi-arrow-right',
+  //       command: () => emit('toRightPosition')
+  //     });
+  //     break;
+  //   case 'right':
+  //     state.push({
+  //       label: 'Move to left',
+  //       icon: 'pi pi-arrow-left',
+  //       command: () => emit('toLeftPosition')
+  //     });
+  //     state.push({
+  //       label: 'Move to center',
+  //       icon: 'pi pi-align-center',
+  //       command: () => emit('toCenterPosition')
+  //     });
+  // }
+  state.push({
+    label: 'Delete',
+    icon: 'pi pi-trash',
+    command: () => deleteEntity(props.entityData.uuid)
+  });
+  return state;
+});
+
+const speedDialMove = computed(() => {
+  const state = [];
+  const dataStore = useDataStore();
+  const entities = dataStore.homeEntities;
+  const entityIndex = entities.findIndex(
+    (entity: IEntity) => entity.uuid === props.entityData.uuid
+  );
+  if (entityIndex !== 0) {
+    state.push({
+      label: 'Move up',
+      icon: 'pi pi-arrow-up',
+      command: () => changeOrderHomeEntity(props.entityData.uuid, 'up')
+    });
+  }
+  if (entityIndex !== entities.length - 1) {
+    state.push({
+      label: 'Move down',
+      icon: 'pi pi-arrow-down',
+      command: () => changeOrderHomeEntity(props.entityData.uuid, 'down')
+    });
+  }
+  return state;
+});
+</script>
+
+<template>
+  <div class="relative">
+    <SpeedDial
+      :model="speedDialState"
+      direction="right"
+      pt:root:class="speedDialRoot w-16 -translate-y-12"
+    >
+      <template #button="{ toggleCallback }">
+        <button
+          class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
+          @click="toggleCallback"
+        >
+          <i class="pi pi-pen-to-square"></i>
+        </button>
+      </template>
+      <template #item="{ item, toggleCallback }">
+        <div
+          :class="[
+            'flex flex-col bg-black bg-opacity-70 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
+            {
+              'text-red-400 font-semibold': item.icon.includes('trash')
+            }
+          ]"
+          @click="toggleCallback"
+        >
+          <span :class="item.icon" />
+          <span class="text-center">
+            {{ item.label }}
+          </span>
+        </div>
+      </template>
+    </SpeedDial>
+    <SpeedDial :model="speedDialMove" direction="right" pt:root:class="speedDialRoot w-16">
+      <template #button="{ toggleCallback }">
+        <button
+          class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
+          @click="toggleCallback"
+        >
+          <i class="pi pi-arrows-alt"></i>
+        </button>
+      </template>
+      <template #item="{ item, toggleCallback }">
+        <div
+          :class="[
+            'flex flex-col bg-black bg-opacity-70 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
+            {
+              'text-red-400 font-semibold': item.icon.includes('trash')
+            }
+          ]"
+          @click="toggleCallback"
+        >
+          <span :class="item.icon" />
+          <span class="text-center">
+            {{ item.label }}
+          </span>
+        </div>
+      </template>
+    </SpeedDial>
+  </div>
+</template>
+
+<style>
+.speedDialRoot {
+  justify-content: flex-start !important;
+}
+</style>
diff --git a/src/components/entities/TextItem.vue b/src/components/entities/TextItem.vue
index a0d923a..45d8bd8 100644
--- a/src/components/entities/TextItem.vue
+++ b/src/components/entities/TextItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { IText } from '@/interfaces/entities';
-import type { IEntity } from '@/interfaces/environment';
 import { useDataStore } from '@/stores/data';
 import { useTextareaAutosize } from '@vueuse/core';
-import { editEntity } from '@/helpers';
+import { deleteEntity, editEntity } from '@/helpers';
+import EditTextEntityMenu from '@/components/EditTextEntityMenu.vue';
 
 interface Props {
   entityData: IText;
@@ -11,8 +11,6 @@ interface Props {
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
 
-const dataStore = useDataStore();
-
 const addTitle = () => {
   editEntity({ ...entityData.value, title: 'Title' }, entityData.value.uuid);
   entityData.value = { ...entityData.value, title: 'Title' };
@@ -26,13 +24,7 @@ const editText = () => {
   editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.uuid);
 };
 
-const deleteEntity = () => {
-  let prevState = dataStore.homeEntities;
-  prevState = prevState.filter((entity: IEntity) => entity.uuid !== entityData.value.uuid);
-  dataStore.editHomeEntities(prevState);
-};
-
-const deleteTitle = () => {
+const removeTitle = () => {
   const newState = { ...entityData.value };
   delete newState.title;
   editEntity({ ...newState }, entityData.value.uuid);
@@ -43,15 +35,15 @@ const { textarea, triggerResize } = useTextareaAutosize();
 </script>
 
 <template>
-  <div class="textContainer relative">
+  <div class="entityContainer relative">
     <input
       ref="input"
-      v-if="entityData.title"
+      v-if="entityData.title || entityData.title === ''"
       type="text"
       v-model="entityData.title"
       @change="editTitle"
-      @input="triggerResize"
-      class="w-full mb-2 font-bold pl-2"
+      placeholder="Enter title..."
+      class="w-full mb-2 font-bold text-2xl pl-2"
     />
     <textarea
       ref="textarea"
@@ -61,26 +53,14 @@ const { textarea, triggerResize } = useTextareaAutosize();
       @input="triggerResize"
       placeholder="Enter text..."
     />
-    <button
-      v-if="!entityData?.title"
-      @click.prevent="addTitle"
-      class="addTitleButton absolute top-0 left-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
-    >
-      Add title
-    </button>
-    <button
-      @click.prevent="deleteEntity"
-      class="deleteEntityButton absolute top-0 right-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
-    >
-      <i class="pi pi-trash pr-2"></i>Delete
-    </button>
-    <button
-      v-if="entityData?.title"
-      @click.prevent="deleteTitle"
-      class="deleteEntityButton absolute top-0 left-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
-    >
-      <i class="pi pi-trash pr-2"></i>Delete title
-    </button>
+    <div class="speedDial absolute top-0 left-2 z-50 transition-all select-none">
+      <EditTextEntityMenu
+        :entityData="entityData"
+        @deleteEntity="deleteEntity"
+        @addTitle="addTitle"
+        @removeTitle="removeTitle"
+      />
+    </div>
   </div>
 </template>
 
@@ -93,12 +73,13 @@ textarea {
 textarea::-webkit-scrollbar {
   display: none;
 }
-.textContainer > .addTitleButton,
-.textContainer > .deleteEntityButton {
+.entityContainer > .speedDial {
   opacity: 0;
 }
-.textContainer:hover > .addTitleButton,
-.textContainer:hover > .deleteEntityButton {
+.entityContainer:hover > .speedDial {
   opacity: 100;
 }
+input::placeholder {
+  font-weight: 400;
+}
 </style>
-- 
GitLab