BugFix healthcheck and create menu and fold resizable

PhoenixNazarov · Oct 24, 2024 · 4464798 · 4464798
1 parent d676c53
commit 4464798
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Move business logic from tables endpoints to tables services](https://github.com/PhoenixNazarov/prompt-admin/pull/25)
 - [Move all get connections to ConnectionMixin](https://github.com/PhoenixNazarov/prompt-admin/pull/25)
 - [Change Github actions for development and production](https://github.com/PhoenixNazarov/prompt-admin/compare/dev...dev-notifications)
+- Attach menu and hint to resizable 
 
 ### Deprecated
 

diff --git a/client/src/stores/config/settings.store.ts b/client/src/stores/config/settings.store.ts
@@ -10,7 +10,9 @@ export const useSettingsStore = defineStore({
         menuOpenedItems: [] as string[],
         editor_line_wrapping: true,
         hint_fold: false,
+        hintOffset: 0,
         menu_fold: false,
+        menuOffset: 0,
         menu_search: ''
     }),
     getters: {},

diff --git a/client/src/style.css b/client/src/style.css
@@ -82,4 +82,8 @@ body {
 
 .border-bottom-component {
     border-bottom: thin solid #494d71;
-}
+}
+
+.border-right-component {
+    border-right: thin solid #494d71;
+}
diff --git a/client/src/views/Workplace/Menu/MenuPromptList.vue b/client/src/views/Workplace/Menu/MenuPromptList.vue
@@ -118,11 +118,12 @@ export default defineComponent({
     </VContainer>
   </VDialog>
 
-  <VVirtualScroll :items="items" :renderless="true">
+  <VVirtualScroll :items="items" :renderless="true" >
     <template v-slot:default="{ item }">
       <div
           class="main-button"
-          :style="{'--tab': item.tab, '--filter-display': isFilter(item) ? 'none': ''}">
+          :style="{'--tab': item.tab, '--filter-display': isFilter(item) ? 'none': ''}"
+          :class="[settingsStore.menu_fold ? 'hide' : '']">
         <button @click.prevent="onClick(item)" class="button text-none">
           <FontAwesomeIcon
               v-if="item.type == 'group' && item.caret && item.tag && (filter == undefined || filter == '')"
@@ -173,4 +174,8 @@ export default defineComponent({
   background-color: rgba(0, 0, 0, 0.05);
 }
 
+.hide {
+  display: none;
+}
+
 </style>
diff --git a/client/src/views/Workplace/Menu/WorkplaceMenuView.vue b/client/src/views/Workplace/Menu/WorkplaceMenuView.vue
@@ -54,7 +54,10 @@ export default defineComponent({
         <FontAwesomeIcon icon="caret-right" :rotation="!settingsStore.menu_fold ? 180: undefined"/>
       </VBtn>
     </div>
-    <MenuPromptList :filter="filter" @selectPrompt="prompt => $emit('selectPrompt', prompt)"/>
+    <MenuPromptList
+        :filter="filter" @selectPrompt="prompt => $emit('selectPrompt', prompt)"
+
+    />
   </div>
 </template>
 

diff --git a/client/src/views/Workplace/WorkplaceView.vue b/client/src/views/Workplace/WorkplaceView.vue
@@ -47,6 +47,7 @@ export default defineComponent({
     const accountStore = useAccountStore()
     const syncDataStore = useSyncDataStore()
     const unitTestStore = useUnitTestStore()
+    const settingsStore = useSettingsStore()
     return {
       promptStore,
       mappingStore,
@@ -57,7 +58,8 @@ export default defineComponent({
       promptAuditStore,
       accountStore,
       syncDataStore,
-      unitTestStore
+      unitTestStore,
+      settingsStore
     }
   },
   data() {
@@ -73,7 +75,9 @@ export default defineComponent({
       },
 
       widthMenu: settingsStore.menu_fold ? '4rem' : '25rem',
+      widthMenuOffset: settingsStore.menu_fold ? 0 : settingsStore.menuOffset,
       widthHint: settingsStore.hint_fold ? '4rem' : '25rem',
+      widthHintOffset: settingsStore.hint_fold ? 0 : settingsStore.hintOffset,
     }
   },
   methods: {
@@ -131,15 +135,19 @@ export default defineComponent({
     toggleHint() {
       if (this.widthHint == '25rem') {
         this.widthHint = '4rem'
+        this.widthHintOffset = 0
       } else {
         this.widthHint = '25rem'
+        this.widthHintOffset = this.settingsStore.hintOffset
       }
     },
     toggleMenu() {
       if (this.widthMenu == '25rem') {
         this.widthMenu = '4rem'
+        this.widthMenuOffset = 0
       } else {
         this.widthMenu = '25rem'
+        this.widthMenuOffset = this.settingsStore.menuOffset
       }
     },
     hashPrompt() {
@@ -170,6 +178,39 @@ export default defineComponent({
         return
       }
       this.selectPrompt(prompt)
+    },
+    changeWidthMouseStart(target: 'menu' | 'hint') {
+      console.log('start')
+
+      let startPosition = undefined as undefined | number
+
+      function upper() {
+        window.removeEventListener('mouseup', upper)
+        window.removeEventListener('mousemove', mover)
+      }
+
+      const currentOffset = target == 'menu' ? this.widthMenuOffset : this.widthHintOffset
+      const change = (setup: number) => {
+        if (target == 'menu') {
+          this.widthMenuOffset = currentOffset + setup
+          this.settingsStore.menuOffset = this.widthMenuOffset
+        } else if (target == 'hint') {
+          this.widthHintOffset = currentOffset - setup
+          this.settingsStore.hintOffset = this.widthHintOffset
+        }
+      }
+
+      function mover(event: any) {
+        if (startPosition == undefined) {
+          startPosition = event.clientX
+          console.log(startPosition)
+        } else {
+          change(startPosition - event.clientX)
+        }
+      }
+
+      window.addEventListener('mousemove', mover)
+      window.addEventListener('mouseup', upper)
     }
   },
   mounted() {
@@ -210,6 +251,11 @@ export default defineComponent({
     <div class="menu outer-y">
       <WorkplaceMenuView @selectPrompt="selectPrompt" @toggleFold="toggleMenu"/>
     </div>
+    <div class="border-right-component toggle">
+      <div v-if="!settingsStore.menu_fold"
+           class="toggle-inner"
+           @mousedown="changeWidthMouseStart('menu')"></div>
+    </div>
     <div class="editor">
       <VTabs
           bg-color="var(--color-5)"
@@ -253,6 +299,12 @@ export default defineComponent({
         </div>
       </div>
     </div>
+    <div class="border-right-component toggle">
+      <div
+          v-if="!settingsStore.hint_fold"
+          class="toggle-inner"
+          @mousedown="changeWidthMouseStart('hint')"></div>
+    </div>
     <div class="hint outer-y">
       <MainHintView
           :prompt="selectedPrompt"
@@ -267,29 +319,28 @@ export default defineComponent({
 <style scoped>
 .workplace {
   --menu-width: v-bind(widthMenu);
+  --menu-offset: calc(v-bind(widthMenuOffset) * 1px);
   --hint-width: v-bind(widthHint);
+  --hint-offset: calc(v-bind(widthHintOffset) * 1px);
 
   display: flex;
   height: 100%;
 }
 
 .menu {
-  width: var(--menu-width);
+  width: calc(var(--menu-width) - var(--menu-offset));
   background-color: var(--color-4);
   overflow-x: hidden;
-  transition: 200ms;
 }
 
 .editor {
-  width: calc(100vw - var(--menu-width) - var(--hint-width));
-  transition: 200ms;
+  width: calc(100vw - var(--menu-width) - var(--hint-width) + var(--menu-offset) + var(--hint-offset));
 }
 
 .hint {
-  width: var(--hint-width);
+  width: calc(var(--hint-width) - var(--hint-offset));
   background-color: var(--color-4);
   overflow-x: hidden;
-  transition: 200ms;
 }
 
 .breadcrumb-status {
@@ -300,4 +351,17 @@ export default defineComponent({
   justify-content: space-between;
 }
 
+.toggle {
+  height: 100%;
+  width: 1px;
+}
+
+.toggle-inner {
+  height: calc(100% - 3rem);
+  position: absolute;
+  width: 5px;
+  z-index: 3;
+  cursor: col-resize;
+}
+
 </style>