From e32e28345cf6a438a7b2d92aef49e73b98920790 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: Fri, 16 Aug 2024 08:56:26 +0500
Subject: [PATCH] refactor image in process (renaming and small refactor)

---
 components.d.ts                               |  4 +++
 .../MoveImageMenu.vue => ImageMoveMenu.vue}   |  0
 .../StateImageMenu.vue => ImageStateMenu.vue} |  0
 .../MoveTextMenu.vue => TextMoveMenu.vue}     |  0
 .../StateTextMenu.vue => TextStateMenu.vue}   |  0
 src/modules/BaseModal.vue                     | 17 +++-------
 src/modules/entities/ImageItem.vue            | 10 +++---
 src/modules/entities/TextItem.vue             |  8 ++---
 src/output.css                                | 33 -------------------
 src/pages/HomePage.vue                        | 26 ++++-----------
 10 files changed, 23 insertions(+), 75 deletions(-)
 rename src/components/editEntityMenu/{image/MoveImageMenu.vue => ImageMoveMenu.vue} (100%)
 rename src/components/editEntityMenu/{image/StateImageMenu.vue => ImageStateMenu.vue} (100%)
 rename src/components/editEntityMenu/{text/MoveTextMenu.vue => TextMoveMenu.vue} (100%)
 rename src/components/editEntityMenu/{text/StateTextMenu.vue => TextStateMenu.vue} (100%)

diff --git a/components.d.ts b/components.d.ts
index 2fd7373..9e5ed52 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -14,6 +14,8 @@ declare module 'vue' {
     Divider: typeof import('primevue/divider')['default']
     Drawer: typeof import('primevue/drawer')['default']
     ImageItem: typeof import('@/modules/entities/ImageItem.vue')['default']
+    ImageMoveMenu: typeof import('./src/components/editEntityMenu/ImageMoveMenu.vue')['default']
+    ImageStateMenu: typeof import('./src/components/editEntityMenu/ImageStateMenu.vue')['default']
     LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default']
     MoveImageMenu: typeof import('./src/components/editEntityMenu/image/MoveImageMenu.vue')['default']
     MoveMenu: typeof import('./src/components/editEntityMenu/text/MoveMenu.vue')['default']
@@ -27,6 +29,8 @@ declare module 'vue' {
     StateMenu: typeof import('./src/components/editEntityMenu/text/StateMenu.vue')['default']
     StateTextMenu: typeof import('./src/components/editEntityMenu/text/StateTextMenu.vue')['default']
     TextItem: typeof import('@/modules/entities/TextItem.vue')['default']
+    TextMoveMenu: typeof import('./src/components/editEntityMenu/TextMoveMenu.vue')['default']
+    TextStateMenu: typeof import('./src/components/editEntityMenu/TextStateMenu.vue')['default']
     Tree: typeof import('primevue/tree')['default']
     UserInfoHeaderWithSettings: typeof import('./src/components/UserInfoHeaderWithSettings.vue')['default']
   }
diff --git a/src/components/editEntityMenu/image/MoveImageMenu.vue b/src/components/editEntityMenu/ImageMoveMenu.vue
similarity index 100%
rename from src/components/editEntityMenu/image/MoveImageMenu.vue
rename to src/components/editEntityMenu/ImageMoveMenu.vue
diff --git a/src/components/editEntityMenu/image/StateImageMenu.vue b/src/components/editEntityMenu/ImageStateMenu.vue
similarity index 100%
rename from src/components/editEntityMenu/image/StateImageMenu.vue
rename to src/components/editEntityMenu/ImageStateMenu.vue
diff --git a/src/components/editEntityMenu/text/MoveTextMenu.vue b/src/components/editEntityMenu/TextMoveMenu.vue
similarity index 100%
rename from src/components/editEntityMenu/text/MoveTextMenu.vue
rename to src/components/editEntityMenu/TextMoveMenu.vue
diff --git a/src/components/editEntityMenu/text/StateTextMenu.vue b/src/components/editEntityMenu/TextStateMenu.vue
similarity index 100%
rename from src/components/editEntityMenu/text/StateTextMenu.vue
rename to src/components/editEntityMenu/TextStateMenu.vue
diff --git a/src/modules/BaseModal.vue b/src/modules/BaseModal.vue
index c3038b7..3e192ba 100644
--- a/src/modules/BaseModal.vue
+++ b/src/modules/BaseModal.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { useWindowSize, useVModels, useDraggable } from '@vueuse/core';
-import type { IImageMainInfo } from '@/app/interfaces';
 import { Cropper } from 'vue-advanced-cropper';
 import 'vue-advanced-cropper/dist/style.css';
+import { useInterfaceStore } from '@/app/stores/interface';
+import { useWindowSize, useVModels } from '@vueuse/core';
+import type { IImageMainInfo } from '@/app/interfaces';
 
 interface Props {
   isVisible: boolean;
@@ -24,7 +25,6 @@ const stageSize = ref({
 watch(
   () => imageInfo.value.url,
   () => {
-    console.log('imageInfo', imageInfo.value);
     if (imageInfo.value.url) {
       imageInstance.src = imageInfo.value.url;
       imageInstance.onload = () => {
@@ -46,20 +46,14 @@ watch(
             stageSize.value.height = imageInstance.height;
           };
         }
-        console.log(
-          'imageInstance.width',
-          imageInstance.width,
-          'imageInstance.height',
-          imageInstance.height
-        );
       };
     }
   }
 );
 
 function saveImage() {
-  console.log('save image!');
-  imageInfo.value.url = finalImageUrl.value;
+  const interfaceStore = useInterfaceStore();
+  interfaceStore.changeHomeBackgroundUrl(finalImageUrl.value);
   finalImageUrl.value = '';
   isVisible.value = false;
 }
@@ -72,7 +66,6 @@ const modalWidth = computed(() => {
 });
 function onCropperChange({ canvas }) {
   finalImageUrl.value = canvas.toDataURL();
-  console.log('finalImageUrl.value', finalImageUrl.value);
 }
 </script>
 
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 12d4ce1..695ed10 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -3,8 +3,8 @@ import type { IImage } from '@/app/interfaces/entities';
 import { deleteEntity, editEntity } from '@/app/helpers';
 import { useDataStore } from '@/app/stores/data';
 import { useElementSize } from '@vueuse/core';
-import MoveImageMenu from '@/components/editEntityMenu/image/MoveImageMenu.vue';
-import StateImageMenu from '@/components/editEntityMenu/image/StateImageMenu.vue';
+import MoveMenu from '@/components/editEntityMenu/ImageMoveMenu.vue';
+import StateMenu from '@/components/editEntityMenu/ImageStateMenu.vue';
 
 interface Props {
   entityData: IImage;
@@ -34,7 +34,6 @@ const editTitle = () => {
 
 const addTitle = () => {
   imageHeight.value = imageHeight.value + 48;
-  console.log('imageHeight.value', imageHeight.value);
   editEntity(
     { ...entityData.value, title: 'Title', image_height: imageHeight.value },
     entityData.value.entity_uuid
@@ -57,7 +56,6 @@ const toggleIsResizable = () => {
       { ...entityData.value, image_height: imageHeight.value, image_width: imageWidth.value },
       entityData.value.entity_uuid
     );
-    console.log(entityData.value);
   }
 };
 const editPosition = (position: 'left' | 'center' | 'right') => {
@@ -109,7 +107,7 @@ const homeEntities = computed(() => dataStore.homeEntities);
         />
       </div>
       <div class="speedDial absolute left-2 top-2 transition-all select-none">
-        <StateImageMenu
+        <StateMenu
           :entityData="entityData"
           :isResizable="isResizable"
           @deleteEntity="deleteEntity"
@@ -122,7 +120,7 @@ const homeEntities = computed(() => dataStore.homeEntities);
         v-if="homeEntities.length > 1"
         class="speedDial absolute left-2 bottom-2 transition-all select-none"
       >
-        <MoveImageMenu
+        <MoveMenu
           :entityData="entityData"
           :isResizable="isResizable"
           @editPosition="editPosition"
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index cdd7be5..6919646 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -3,8 +3,8 @@ import type { IText } from '@/app/interfaces/entities';
 import { useDataStore } from '@/app/stores/data';
 import { useTextareaAutosize } from '@vueuse/core';
 import { deleteEntity, editEntity } from '@/app/helpers';
-import StateTextMenu from '@/components/editEntityMenu/text/StateTextMenu.vue';
-import MoveTextMenu from '@/components/editEntityMenu/text/MoveTextMenu.vue';
+import StateMenu from '@/components/editEntityMenu/TextStateMenu.vue';
+import MoveMenu from '@/components/editEntityMenu/TextMoveMenu.vue';
 
 interface Props {
   entityData: IText;
@@ -59,7 +59,7 @@ const homeEntities = computed(() => dataStore.homeEntities);
       rows="2"
     />
     <div class="speedDial absolute left-2 top-2 transition-all select-none">
-      <StateTextMenu
+      <StateMenu
         :entityData="entityData"
         @deleteEntity="deleteEntity"
         @addTitle="addTitle"
@@ -70,7 +70,7 @@ const homeEntities = computed(() => dataStore.homeEntities);
       v-if="homeEntities.length > 1"
       class="speedDial absolute left-2 bottom-2 transition-all select-none"
     >
-      <MoveTextMenu :entityData="entityData" />
+      <MoveMenu :entityData="entityData" />
     </div>
   </div>
 </template>
diff --git a/src/output.css b/src/output.css
index b54d046..59e1c49 100644
--- a/src/output.css
+++ b/src/output.css
@@ -644,10 +644,6 @@ video {
   top: 0.5rem;
 }
 
-.z-50 {
-  z-index: 50;
-}
-
 .-m-2 {
   margin: -0.5rem;
 }
@@ -740,11 +736,6 @@ video {
   height: 3rem;
 }
 
-.size-6 {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
 .h-\[1px\] {
   height: 1px;
 }
@@ -785,25 +776,11 @@ video {
   min-width: 100px;
 }
 
-.-translate-x-1\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-y-1\/2 {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-translate-y-full {
   --tw-translate-y: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .cursor-pointer {
   cursor: pointer;
 }
@@ -910,11 +887,6 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-blue-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-}
-
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -940,11 +912,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-red-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 85ca5bb..85f18f8 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core';
-import EntityItem from '@/modules/EntityItem.vue';
-import CreateEntityMenu from '@/components/CreateEntityMenu.vue';
-// import { setDefaultHomeBackground, uploadFile } from '@/app/helpers';
 import { setDefaultHomeBackground } from '@/app/helpers';
 import { useInterfaceStore } from '@/app/stores/interface';
-import type { IEntity } from '@/app/interfaces/environment';
 import { useDataStore } from '@/app/stores/data';
 import { useAuthorizationStore } from '@/app/stores/authorization';
 import { useWebsocketStore } from '@/app/stores/websocket';
-import BaseModal from '@/modules/BaseModal.vue';
+import type { IEntity } from '@/app/interfaces/environment';
 import type { IImageMainInfo } from '@/app/interfaces';
+import EntityItem from '@/modules/EntityItem.vue';
+import CreateEntityMenu from '@/components/CreateEntityMenu.vue';
+import BaseModal from '@/modules/BaseModal.vue';
 
 const backgroundImage = ref();
 const { height: backgroundImageHeight } = useElementSize(backgroundImage);
@@ -34,7 +33,6 @@ const addEntity = (newEntity: IEntity) => {
       nickName: authorizationStore.userNickName
     }
   };
-  console.log('data.body?.image_data: ', data.body?.image_data);
   websocketStore.sendData(data);
 };
 
@@ -45,7 +43,6 @@ const imageInfo = ref<IImageMainInfo>({
 });
 const isModalUploadFile = ref<boolean>(false);
 function openUploadFileModal() {
-  console.log('openModal');
   isModalUploadFile.value = true;
 }
 function uploadFile($event: Event) {
@@ -66,9 +63,6 @@ function uploadFile($event: Event) {
         imageInfo.value.height = image.height;
         console.log('imageInfo.value', imageInfo.value);
         openUploadFileModal();
-        const interfaceStore = useInterfaceStore();
-        // interfaceStore.changeHomeBackgroundUrl(url);
-        // localStorage.setItem('homeBackgroundUrl', url);
       };
     });
   }
@@ -89,7 +83,7 @@ function uploadFile($event: Event) {
     >
       <SplitterPanel
         ref="splitterBackground"
-        :pt:root:style="`position: relative; background-image: url(${imageInfo.url}); background-size: 100% auto; max-height: ${backgroundImageHeight - 3}px; min-height: 200px;`"
+        :pt:root:style="`position: relative; background-image: url(${backgroundUrl}); background-size: 100% auto; max-height: ${backgroundImageHeight - 3}px; min-height: 200px;`"
         class="splitterPanelBackground"
       >
         <div
@@ -104,14 +98,6 @@ function uploadFile($event: Event) {
             class="w-2 pr-[135px] -mr-[135px] py-2 -my-2 pl-2 -ml-2 opacity-0"
           /><span><i class="pi pi-image mr-2"></i>Change image</span>
         </div>
-        <!--          <input-->
-        <!--            type="button"-->
-        <!--            @click.prevent="openUploadFileModal"-->
-        <!--            title="Change image"-->
-        <!--            accept="image/*"-->
-        <!--            class="w-2 pr-[135px] -mr-[135px] py-2 -my-2 pl-2 -ml-2 opacity-0"-->
-        <!--          /><span><i class="pi pi-image mr-2"></i>Change image</span>-->
-        <!--        </div>-->
         <button
           @click.prevent="setDefaultHomeBackground"
           v-if="imageInfo.url !== defaultBackgroundUrl"
@@ -136,7 +122,7 @@ function uploadFile($event: Event) {
   </main>
   <img
     ref="backgroundImage"
-    :src="imageInfo.url"
+    :src="backgroundUrl"
     alt="background image"
     class="absolute w-full -top-full -left-full"
   />
-- 
GitLab