bfg-common 1.5.464 → 1.5.465

package/components/common/browse/BrowseOld.vue

@@ -23,92 +23,98 @@
       <!--          data-id="browse-filter-input"-->
       <!--        />-->
       <!--      </div>-->
-      <common-browse-blocks-container
-        :blocks-width="props.blocksWidth"
-        type="horizontal"
-        @change-widths="onChangeWidths"
-      >
-        <template #firstBlock>
-          <common-browse-blocks-title-old
-            :width="props.blocksWidth[0]"
-            :title="localization.common.datastores"
-            :sorting="props.firstBlockSorting"
-            @sort="emits('sort-first')"
+      <div class="browse-container">
+        <div class="browse-container__columns">
+          <common-browse-blocks-container
+              :blocks-width="props.blocksWidth"
+              type="horizontal"
+              test-id="browse-blocks-container"
+              class="columns-block"
+              @change-widths="onChangeWidths"
           >
-            <template #content>
-              <div>
-                <common-recursion-tree
-                  :nodes="props.nodesLocal"
-                  class="recursion-tree"
-                  @get-nodes="onShowNodes"
-                  @select-node="onSelectNode"
-                />
-              </div>
+            <template #firstBlock>
+              <common-browse-blocks-title-old
+                  :width="props.blocksWidth[0]"
+                  :title="localization.common.datastores"
+                  :sorting="props.firstBlockSorting"
+                  @sort="emits('sort-first')"
+              >
+                <template #content>
+                  <div>
+                    <common-recursion-tree
+                        :nodes="props.nodesLocal"
+                        class="recursion-tree"
+                        @get-nodes="onShowNodes"
+                        @select-node="onSelectNode"
+                    />
+                  </div>
+                </template>
+              </common-browse-blocks-title-old>
             </template>
-          </common-browse-blocks-title-old>
-        </template>
-        <template #secondBlock>
-          <common-browse-blocks-title-old
-            :width="props.blocksWidth[1]"
-            :title="localization.common.contents"
-            :sorting="props.secondBlockSorting"
-            @sort="emits('sort-second')"
-          >
-            <template #content>
-              <common-browse-blocks-contents-files
-                :selected-folder-files="props.filesLocal"
-                :selected-file="props.selectedFile"
-                :browse-loading="props.browseLoading"
-                @select-file="onSelectFile"
-              />
+            <template #secondBlock>
+              <common-browse-blocks-title-old
+                  :width="props.blocksWidth[1]"
+                  :title="localization.common.contents"
+                  :sorting="props.secondBlockSorting"
+                  @sort="emits('sort-second')"
+              >
+                <template #content>
+                  <common-browse-blocks-contents-files
+                      :selected-folder-files="props.filesLocal"
+                      :selected-file="props.selectedFile"
+                      :browse-loading="props.browseLoading"
+                      @select-file="onSelectFile"
+                  />
+                </template>
+              </common-browse-blocks-title-old>
             </template>
-          </common-browse-blocks-title-old>
-        </template>
-        <template #thirdBlock>
-          <common-browse-blocks-title-old
-            :width="props.blocksWidth[2]"
-            :title="localization.common.information"
-          >
-            <template v-if="props.info" #content>
-              <div
-                v-for="item in props.info"
-                :key="item.title"
-                class="info-container"
+            <template #thirdBlock>
+              <common-browse-blocks-title-old
+                  :width="props.blocksWidth[2]"
+                  :title="localization.common.information"
               >
-                <common-browse-blocks-info-text
-                  v-if="item.type === 'text'"
-                  :title="item.title"
-                  :value="item.value"
-                />
-                <common-browse-blocks-info-size
-                  v-if="item.type === 'size'"
-                  :title="item.title"
-                  :value="item.value"
-                />
-                <common-browse-blocks-info-date
-                  v-if="item.type === 'date'"
-                  :title="item.title"
-                  :value="item.value"
-                />
-              </div>
+                <template v-if="props.info" #content>
+                  <div
+                      v-for="item in props.info"
+                      :key="item.title"
+                      class="info-container"
+                  >
+                    <common-browse-blocks-info-text
+                        v-if="item.type === 'text'"
+                        :title="item.title"
+                        :value="item.value"
+                    />
+                    <common-browse-blocks-info-size
+                        v-if="item.type === 'size'"
+                        :title="item.title"
+                        :value="item.value"
+                    />
+                    <common-browse-blocks-info-date
+                        v-if="item.type === 'date'"
+                        :title="item.title"
+                        :value="item.value"
+                    />
+                  </div>
+                </template>
+              </common-browse-blocks-title-old>
             </template>
-          </common-browse-blocks-title-old>
-        </template>
-      </common-browse-blocks-container>
-      <div v-if="props.fileTypes" class="ptm">
-        <b>{{ localization.common.fileType }}:</b>
-        <select
-          v-model="selectedFileTypeLocal"
-          :data-id="`${props.testId}-select`"
-        >
-          <option
-            v-for="item in props.fileTypes"
-            :key="item.value"
-            :value="item.value"
+          </common-browse-blocks-container>
+        </div>
+        <div v-if="props.fileTypes" class="ptm">
+          <b>{{ localization.common.fileType }}:</b>
+          <select
+              v-model="selectedFileTypeLocal"
+              :data-id="`${props.testId}-select`"
           >
-            {{ item.text }}
-          </option>
-        </select>
+            <option
+                v-for="item in props.fileTypes"
+                :key="item.value"
+                :value="item.value"
+            >
+              {{ item.text }}
+            </option>
+          </select>
+        </div>
       </div>
     </template>
   </atoms-modal>
@@ -183,6 +189,28 @@ const selectedFileTypeLocal = computed<any>({
 </script>
 
 <style scoped lang="scss">
+.browse-container {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  height: 100%;
+
+  &__columns {
+    overflow-y: hidden;
+    overflow-x: auto;
+
+    .columns-block {
+      width: 808px;
+      height: 100%;
+
+      :deep(.title-block) {
+        min-height: auto;
+      }
+      :deep(.title-block__container) {
+        height: 100%;
+      }
+    }
+  }
+}
 :deep(.recursion-tree) {
   .tree-node-text-drag {
     border-radius: 3px 0 0 3px;

package/components/common/browse/blocks/Container.vue

@@ -1,235 +1,236 @@
-<template>
-  <div
-    ref="containerBlock"
-    :class="[
-      `title-block__${props.type}-container`,
-      {
-        'title-block__new-view': isNewView,
-      },
-    ]"
-  >
-    <slot name="firstBlock"></slot>
-    <div
-      ref="moveSeperator"
-      :class="[
-        'move-separator',
-        {
-          'move-separator-new-view': isNewView,
-          'move-separator-new-view_selected':
-            sectionSelected && sectionSelectedName === 'first',
-        },
-      ]"
-      :data-id="`${props.testId}-first`"
-      :style="seperatorStyles"
-      @mousedown.prevent="onMouseDown($event, 'first')"
-    >
-      <div :style="moveSeperatorBeforeStyles"></div>
-    </div>
-    <slot name="secondBlock"></slot>
-    <div
-      ref="secondMoveSeperator"
-      :class="[
-        'move-separator',
-        {
-          'move-separator-new-view': isNewView,
-          'move-separator-new-view_selected':
-            sectionSelected && sectionSelectedName === 'second',
-        },
-      ]"
-      :data-id="`${props.testId}-second`"
-      :style="secondSeperatorStyles"
-      @mousedown.prevent="onMouseDown($event, 'second')"
-    >
-      <div :style="secondMoveSeperatorBeforeStyles"></div>
-    </div>
-    <slot name="thirdBlock"></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
-import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
-
-const props = withDefaults(
-  defineProps<{
-    type: 'horizontal' | 'vertical'
-    blocksWidth: UI_T_BlocksWidth
-    testId?: string
-  }>(),
-  {
-    testId: '',
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'change-widths', width: number, index: number): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const sectionSelected = ref<boolean>(false)
-const sectionSelectedName = ref<string>('')
-
-const positionOnDown = ref<number>(0)
-
-const containerBlock = ref<HTMLElement | null>(null)
-const { height: heightContainerBlock } = useElementSize(containerBlock)
-
-const moveSeperator = ref<HTMLElement | null>(null)
-const { height: heightMoveSeperator } = useElementSize(moveSeperator)
-const moveSeperatorBeforeStyles = ref<any>({})
-watch(
-  heightMoveSeperator,
-  (newValue) => {
-    if (!newValue) return
-
-    moveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
-  },
-  { immediate: true, deep: true }
-)
-
-const secondMoveSeperator = ref<HTMLElement | null>(null)
-const { height: heightSecondMoveSeperator } =
-  useElementSize(secondMoveSeperator)
-const secondMoveSeperatorBeforeStyles = ref<any>({})
-watch(
-  heightSecondMoveSeperator,
-  (newValue) => {
-    if (!newValue) return
-
-    secondMoveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
-  },
-  { immediate: true, deep: true }
-)
-
-// const translation1 = computed<number>(() => (isNewView.value ? 31 : 28))
-// const translation2 = computed<number>(() => (isNewView.value ? 47 : 28))
-// const translation = computed<number>(() => (isNewView.value ? 31 : 28))
-
-const seperatorStyles = computed(() => ({
-  // left: `${props.blocksWidth[0] + translation1.value}px`,
-  left: `${props.blocksWidth[0]}px`,
-  height: `${heightContainerBlock.value}px`,
-}))
-const secondSeperatorStyles = computed(() => ({
-  // right: `${props.blocksWidth[2] + translation2.value}px`,
-  left: `${props.blocksWidth[0] + props.blocksWidth[1]}px`,
-  height: `${heightContainerBlock.value}px`,
-}))
-
-const onMouseDown = (event: MouseEvent, section: string): void => {
-  sectionSelected.value = true
-  sectionSelectedName.value = section
-  positionOnDown.value = (
-    event.target as HTMLDivElement
-  ).getBoundingClientRect().x
-}
-
-const onMouseMove = (event: MouseEvent): void => {
-  if (!sectionSelected.value) return
-  event.stopPropagation()
-  event.preventDefault()
-  event.cancelBubble = true
-
-  getSeparatorPosition(event, 0, 1, 'first')
-  getSeparatorPosition(event, 1, 2, 'second')
-}
-const onMouseUp = (): void => {
-  sectionSelected.value = false
-}
-
-const minWidth = computed<number>(() => (isNewView.value ? 120 : 30))
-
-const getSeparatorPosition = (
-  event: MouseEvent,
-  firstBlock: number,
-  secondBlock: number,
-  separator: string
-): void => {
-  if (sectionSelected.value && sectionSelectedName.value === separator) {
-    const blockWidth0 =
-      props.blocksWidth[firstBlock] - (positionOnDown.value - event.x)
-    const blockWidth1 =
-      props.blocksWidth[secondBlock] + (positionOnDown.value - event.x)
-    if (blockWidth0 < minWidth.value || blockWidth1 < minWidth.value) return
-    blockWidth0 >= minWidth.value &&
-      emits('change-widths', blockWidth0, firstBlock)
-    blockWidth1 >= minWidth.value &&
-      emits('change-widths', blockWidth1, secondBlock)
-    positionOnDown.value = event.x
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
-})
-onUnmounted(() => {
-  document.removeEventListener('mousemove', onMouseMove)
-  document.removeEventListener('mouseup', onMouseUp)
-})
-</script>
-
-<style scoped lang="scss">
-.title-block__horizontal-container {
-  display: flex;
-  flex-direction: row;
-  gap: 5px;
-}
-
-.title-block__horizontal-container.title-block__new-view {
-  gap: 0;
-  height: inherit;
-}
-.move-separator {
-  position: absolute;
-  width: 3px;
-  height: inherit;
-  background-color: var(--modal-bg-color);
-  cursor: col-resize;
-  z-index: var(--z-fixed);
-
-  &-new-view {
-    width: 3px;
-    background: linear-gradient(
-      to right,
-      transparent 0,
-      transparent 1px,
-      var(--select-file-sprt-color) 1px,
-      var(--select-file-sprt-color) 2px,
-      transparent 2px,
-      transparent 100%
-    );
-
-    div {
-      position: relative;
-
-      &::before {
-        content: '';
-        width: 2px;
-        height: 16px;
-        background-color: var(--select-file-sprt-handler-color);
-        position: absolute;
-        left: 0.5px;
-        border-radius: 2px;
-      }
-    }
-
-    &:hover {
-      div::before {
-        background-color: var(--select-file-sprt-handler-hover-color);
-      }
-    }
-
-    &_selected {
-      div::before {
-        background-color: var(
-          --select-file-sprt-handler-selected-color
-        ) !important;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    ref="containerBlock"
+    :class="[
+      `title-block__${props.type}-container`,
+      {
+        'title-block__new-view': isNewView,
+      },
+    ]"
+  >
+    <slot name="firstBlock"></slot>
+    <div
+      ref="moveSeperator"
+      :class="[
+        'move-separator',
+        {
+          'move-separator-new-view': isNewView,
+          'move-separator-new-view_selected':
+            sectionSelected && sectionSelectedName === 'first',
+        },
+      ]"
+      :data-id="`${props.testId}-first`"
+      :style="seperatorStyles"
+      @mousedown.prevent="onMouseDown($event, 'first')"
+    >
+      <div :style="moveSeperatorBeforeStyles"></div>
+    </div>
+    <slot name="secondBlock"></slot>
+    <div
+      ref="secondMoveSeperator"
+      :class="[
+        'move-separator',
+        {
+          'move-separator-new-view': isNewView,
+          'move-separator-new-view_selected':
+            sectionSelected && sectionSelectedName === 'second',
+        },
+      ]"
+      :data-id="`${props.testId}-second`"
+      :style="secondSeperatorStyles"
+      @mousedown.prevent="onMouseDown($event, 'second')"
+    >
+      <div :style="secondMoveSeperatorBeforeStyles"></div>
+    </div>
+    <slot name="thirdBlock"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
+
+const props = withDefaults(
+  defineProps<{
+    type: 'horizontal' | 'vertical'
+    blocksWidth: UI_T_BlocksWidth
+    testId?: string
+  }>(),
+  {
+    testId: '',
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'change-widths', width: number, index: number): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const sectionSelected = ref<boolean>(false)
+const sectionSelectedName = ref<string>('')
+
+const positionOnDown = ref<number>(0)
+
+const containerBlock = ref<HTMLElement | null>(null)
+const { height: heightContainerBlock } = useElementSize(containerBlock)
+
+const moveSeperator = ref<HTMLElement | null>(null)
+const { height: heightMoveSeperator } = useElementSize(moveSeperator)
+const moveSeperatorBeforeStyles = ref<any>({})
+watch(
+  heightMoveSeperator,
+  (newValue) => {
+    if (!newValue) return
+
+    moveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
+  },
+  { immediate: true, deep: true }
+)
+
+const secondMoveSeperator = ref<HTMLElement | null>(null)
+const { height: heightSecondMoveSeperator } =
+  useElementSize(secondMoveSeperator)
+const secondMoveSeperatorBeforeStyles = ref<any>({})
+watch(
+  heightSecondMoveSeperator,
+  (newValue) => {
+    if (!newValue) return
+
+    secondMoveSeperatorBeforeStyles.value.top = newValue / 2 + 'px'
+  },
+  { immediate: true, deep: true }
+)
+
+// const translation1 = computed<number>(() => (isNewView.value ? 31 : 28))
+// const translation2 = computed<number>(() => (isNewView.value ? 47 : 28))
+// const translation = computed<number>(() => (isNewView.value ? 31 : 28))
+
+const seperatorStyles = computed(() => ({
+  // left: `${props.blocksWidth[0] + translation1.value}px`,
+  left: `${props.blocksWidth[0]}px`,
+  height: `${heightContainerBlock.value}px`,
+}))
+const secondSeperatorStyles = computed(() => ({
+  // right: `${props.blocksWidth[2] + translation2.value}px`,
+  left: `${props.blocksWidth[0] + props.blocksWidth[1] + (isNewView.value ? 0 : 5)}px`,
+  height: `${heightContainerBlock.value}px`,
+}))
+
+const onMouseDown = (event: MouseEvent, section: string): void => {
+  sectionSelected.value = true
+  sectionSelectedName.value = section
+  positionOnDown.value = (
+    event.target as HTMLDivElement
+  ).getBoundingClientRect().x
+}
+
+const onMouseMove = (event: MouseEvent): void => {
+  if (!sectionSelected.value) return
+  event.stopPropagation()
+  event.preventDefault()
+  event.cancelBubble = true
+
+  getSeparatorPosition(event, 0, 1, 'first')
+  getSeparatorPosition(event, 1, 2, 'second')
+}
+const onMouseUp = (): void => {
+  sectionSelected.value = false
+}
+
+const minWidth = computed<number>(() => (isNewView.value ? 120 : 30))
+
+const getSeparatorPosition = (
+  event: MouseEvent,
+  firstBlock: number,
+  secondBlock: number,
+  separator: string
+): void => {
+  if (sectionSelected.value && sectionSelectedName.value === separator) {
+    const blockWidth0 =
+      props.blocksWidth[firstBlock] - (positionOnDown.value - event.x)
+    const blockWidth1 =
+      props.blocksWidth[secondBlock] + (positionOnDown.value - event.x)
+    if (blockWidth0 < minWidth.value || blockWidth1 < minWidth.value) return
+    blockWidth0 >= minWidth.value &&
+      emits('change-widths', blockWidth0, firstBlock)
+    blockWidth1 >= minWidth.value &&
+      emits('change-widths', blockWidth1, secondBlock)
+    positionOnDown.value = event.x
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+})
+</script>
+
+<style scoped lang="scss">
+.title-block__horizontal-container {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  position: relative;
+}
+
+.title-block__horizontal-container.title-block__new-view {
+  gap: 0;
+  height: inherit;
+}
+.move-separator {
+  position: absolute;
+  width: 3px;
+  height: inherit;
+  background-color: var(--modal-bg-color);
+  cursor: col-resize;
+  z-index: var(--z-fixed);
+
+  &-new-view {
+    width: 3px;
+    background: linear-gradient(
+      to right,
+      transparent 0,
+      transparent 1px,
+      var(--select-file-sprt-color) 1px,
+      var(--select-file-sprt-color) 2px,
+      transparent 2px,
+      transparent 100%
+    );
+
+    div {
+      position: relative;
+
+      &::before {
+        content: '';
+        width: 2px;
+        height: 16px;
+        background-color: var(--select-file-sprt-handler-color);
+        position: absolute;
+        left: 0.5px;
+        border-radius: 2px;
+      }
+    }
+
+    &:hover {
+      div::before {
+        background-color: var(--select-file-sprt-handler-hover-color);
+      }
+    }
+
+    &_selected {
+      div::before {
+        background-color: var(
+          --select-file-sprt-handler-selected-color
+        ) !important;
+      }
+    }
+  }
+}
+</style>

package/components/common/vm/actions/clone/lib/config/steps.ts

@@ -215,7 +215,7 @@ export const stepsSchemeInitial = [
   // 8
   [
     dynamicSteps.selectNameFolder,
-    dynamicSteps.selectComputeResource, // SC-1260
+    // dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
     dynamicSteps.selectStorage,
     dynamicSteps.selectOptions,
     dynamicSteps.readyComplete,
@@ -223,7 +223,7 @@ export const stepsSchemeInitial = [
   // 9 Customize the operating system
   [
     dynamicSteps.selectNameFolder,
-    dynamicSteps.selectComputeResource, // SC-1260
+    // dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
     dynamicSteps.selectStorage,
     dynamicSteps.selectOptions,
     dynamicSteps.selectGuestOSMachineType,
@@ -232,7 +232,7 @@ export const stepsSchemeInitial = [
   // 10 Customize this virtual machine's hardware
   [
     dynamicSteps.selectNameFolder,
-    dynamicSteps.selectComputeResource, // SC-1260
+    // dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
     dynamicSteps.selectStorage,
     dynamicSteps.selectOptions,
     dynamicSteps.customizeHardware,
@@ -241,7 +241,7 @@ export const stepsSchemeInitial = [
   // 11 Customize the operating system and this virtual machine's hardware
   [
     dynamicSteps.selectNameFolder,
-    dynamicSteps.selectComputeResource, // SC-1260
+    // dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
     dynamicSteps.selectStorage,
     dynamicSteps.selectOptions,
     dynamicSteps.selectGuestOSMachineType,
@@ -252,7 +252,7 @@ export const stepsSchemeInitial = [
   [
     dynamicSteps.scheduledTasks,
     dynamicSteps.selectNameFolder,
-    dynamicSteps.selectComputeResource, // SC-1260
+    // dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
     dynamicSteps.selectStorage,
     dynamicSteps.selectOptions,
     dynamicSteps.readyComplete,
@@ -261,7 +261,7 @@ export const stepsSchemeInitial = [
   [
     dynamicSteps.scheduledTasks,
     dynamicSteps.selectNameFolder,
-    dynamicSteps.selectComputeResource, // SC-1260
+    // dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
     dynamicSteps.selectStorage,
     dynamicSteps.selectOptions,
     dynamicSteps.selectGuestOSMachineType,
@@ -271,7 +271,7 @@ export const stepsSchemeInitial = [
   [
     dynamicSteps.scheduledTasks,
     dynamicSteps.selectNameFolder,
-    dynamicSteps.selectComputeResource, // SC-1260
+    // dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
     dynamicSteps.selectStorage,
     dynamicSteps.selectOptions,
     dynamicSteps.customizeHardware,
@@ -281,7 +281,7 @@ export const stepsSchemeInitial = [
   [
     dynamicSteps.scheduledTasks,
     dynamicSteps.selectNameFolder,
-    dynamicSteps.selectComputeResource, // SC-1260
+    // dynamicSteps.selectComputeResource, // SC-1260 // нашлось другое решение, при получении info берем host_id и используем его
     dynamicSteps.selectStorage,
     dynamicSteps.selectOptions,
     dynamicSteps.selectGuestOSMachineType,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.464",
+  "version": "1.5.465",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",