bfg-common 1.3.558 → 1.3.559

package/components/common/browse/Browse.vue

@@ -1,186 +1,221 @@
-<template>
-  <atoms-modal
-    test-id="browse"
-    width="864px"
-    height="586px"
-    :show="props.show"
-    :title="localization.selectFile"
-    :disabled-submit="!props.selectedFile"
-  >
-    <template #modalBody>
-      <common-browse-blocks-container
-        type="horizontal"
-        :blocks-width="blocksWidth"
-        @change-widths="onChangeWidths"
-      >
-        <template #firstBlock>
-          <common-browse-blocks-title
-            :width="blocksWidth[0]"
-            :title="localization.datastores"
-          >
-            <template #content>
-              <div class="">
-                <common-recursion-tree
-                  :nodes="props.nodes"
-                  class="recursion-tree"
-                  @get-nodes="onShowNodes"
-                  @select-node="onSelectNode"
-                />
-              </div>
-            </template>
-          </common-browse-blocks-title>
-        </template>
-        <template #secondBlock>
-          <common-browse-blocks-title
-            :width="blocksWidth[1]"
-            :title="localization.contents"
-          >
-            <template #content>
-              <common-browse-blocks-contents-files
-                :selected-folder-files="props.files"
-                :selected-file="props.selectedFile"
-                @select-file="onSelectFile"
-              />
-            </template>
-          </common-browse-blocks-title>
-        </template>
-        <template #thirdBlock>
-          <common-browse-blocks-title
-            :width="blocksWidth[2]"
-            :title="localization.information"
-          >
-            <template v-if="info" #content>
-              <div
-                v-for="item in 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>
-        </template>
-      </common-browse-blocks-container>
-      <div v-if="props.fileTypes" class="ptm">
-        <b>{{ localization.fileType }}:</b>
-        <select
-          v-model="selectedFileTypeLocal"
-          :data-id="`${props.testId}-select`"
-        >
-          <option
-            v-for="item in props.fileTypes"
-            :key="item.value"
-            :value="item.value"
-          >
-            {{ item.text }}
-          </option>
-        </select>
-      </div>
-    </template>
-  </atoms-modal>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
-import { UI_I_FileInfo } from '~/components/common/browse/lib/models/interfaces'
-
-const props = defineProps<{
-  show: boolean
-  nodes: any[]
-  files: any[]
-  info: UI_I_FileInfo[] | null
-  selectedFile: any | null
-  fileTypes?: UI_I_OptionItem[]
-  selectedFileType?: any
-  testId?: string
-}>()
-const emits = defineEmits<{
-  (
-    event: 'get-nodes',
-    value: {
-      node: any | null
-      cb: () => void
-    }
-  ): void
-  (event: 'select-node', value: any): void
-  (event: 'update:selected-file', value: any): void
-  (event: 'update:selected-file-type', value: any): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const blocksWidth = ref<UI_T_BlocksWidth>([272, 272, 256])
-
-const onChangeWidths = (width: number, index: number) => {
-  blocksWidth.value[index] = width
-}
-const onSelectFile = (file: any): void => {
-  emits('update:selected-file', file)
-}
-const onSelectNode = (node: any): void => {
-  emits('select-node', node)
-}
-const onShowNodes = (data: { node: any | null; cb: () => void }): void => {
-  emits('get-nodes', data)
-}
-
-const selectedFileTypeLocal = computed<any>({
-  get() {
-    return props.selectedFileType
-  },
-  set(newValue) {
-    emits('update:selected-file-type', newValue)
-  },
-})
-</script>
-
-<style scoped lang="scss">
-:deep(.recursion-tree) {
-  .tree-node-text-drag {
-    border-radius: 3px 0 0 3px;
-  }
-}
-
-:deep(.modal-body) {
-  overflow: hidden;
-  min-height: 430px;
-}
-
-.info-container {
-  padding: 3px;
-  div {
-    line-height: 17px;
-    span {
-      font-size: 13px;
-      font-weight: 400;
-    }
-  }
-}
-
-.ptm {
-  padding-top: 5px;
-
-  select {
-    outline: none;
-    border-color: rgb(118, 118, 118);
-    color: rgb(133, 133, 133);
-    margin-left: 5px;
-  }
-}
-</style>
+<template>
+  <atoms-modal
+    test-id="browse"
+    width="864px"
+    height="586px"
+    :show="props.show"
+    :title="localization.selectFile"
+    :disabled-submit="!props.selectedFile"
+  >
+    <template #modalBody>
+      <common-browse-blocks-container
+        type="horizontal"
+        :blocks-width="blocksWidth"
+        @change-widths="onChangeWidths"
+      >
+        <template #firstBlock>
+          <common-browse-blocks-title
+            :width="blocksWidth[0]"
+            :title="localization.datastores"
+            :sorting="firstBlockSorting"
+            @sort="onSortFirstBlock"
+          >
+            <template #content>
+              <div class="">
+                <common-recursion-tree
+                  :nodes="nodesLocal"
+                  class="recursion-tree"
+                  @get-nodes="onShowNodes"
+                  @select-node="onSelectNode"
+                />
+              </div>
+            </template>
+          </common-browse-blocks-title>
+        </template>
+        <template #secondBlock>
+          <common-browse-blocks-title
+            :width="blocksWidth[1]"
+            :title="localization.contents"
+            :sorting="secondBlockSorting"
+            @sort="onSortSecondBlock"
+          >
+            <template #content>
+              <common-browse-blocks-contents-files
+                :selected-folder-files="filesLocal"
+                :selected-file="props.selectedFile"
+                @select-file="onSelectFile"
+              />
+            </template>
+          </common-browse-blocks-title>
+        </template>
+        <template #thirdBlock>
+          <common-browse-blocks-title
+            :width="blocksWidth[2]"
+            :title="localization.information"
+          >
+            <template v-if="info" #content>
+              <div
+                v-for="item in 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>
+        </template>
+      </common-browse-blocks-container>
+      <div v-if="props.fileTypes" class="ptm">
+        <b>{{ localization.fileType }}:</b>
+        <select
+          v-model="selectedFileTypeLocal"
+          :data-id="`${props.testId}-select`"
+        >
+          <option
+            v-for="item in props.fileTypes"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
+import type { UI_I_FileInfo } from '~/components/common/browse/lib/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+  nodes: any[]
+  files: any[]
+  info: UI_I_FileInfo[] | null
+  selectedFile: any | null
+  fileTypes?: UI_I_OptionItem[]
+  selectedFileType?: any
+  testId?: string
+}>()
+const emits = defineEmits<{
+  (
+    event: 'get-nodes',
+    value: {
+      node: any | null
+      cb: () => void
+    }
+  ): void
+  (event: 'select-node', value: any): void
+  (event: 'update:selected-file', value: any): void
+  (event: 'update:selected-file-type', value: any): void
+}>()
+
+const { $recursion }: any = useNuxtApp()
+
+const nodesLocal = computed<any[]>(() => {
+  if (!firstBlockSorting.value[0]) return props.nodes
+
+  const nodesCopy = useDeepCopy(props.nodes)
+  $recursion.sortByProp(nodesCopy, 'name', firstBlockSorting.value[1], 'nodes')
+
+  return nodesCopy
+})
+const filesLocal = computed<any[]>(() => {
+  if (!secondBlockSorting.value[0]) return props.files
+
+  const value = secondBlockSorting.value[1] ? 1 : -1
+  return [...props.files].sort((a, b) => {
+    const first = a.name.toLowerCase()
+    const second = b.name.toLowerCase()
+    return first > second ? value : first < second ? -value : 0
+  })
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const blocksWidth = ref<UI_T_BlocksWidth>([272, 272, 256])
+
+const onChangeWidths = (width: number, index: number): void => {
+  blocksWidth.value[index] = width
+}
+const onSelectFile = (file: any): void => {
+  emits('update:selected-file', file)
+}
+const onSelectNode = (node: any): void => {
+  emits('select-node', node)
+}
+const onShowNodes = (data: { node: any | null; cb: () => void }): void => {
+  emits('get-nodes', data)
+}
+
+const selectedFileTypeLocal = computed<any>({
+  get() {
+    return props.selectedFileType
+  },
+  set(newValue) {
+    emits('update:selected-file-type', newValue)
+  },
+})
+
+const firstBlockSorting = ref<[boolean, boolean]>([false, false])
+const secondBlockSorting = ref<[boolean, boolean]>([false, false])
+
+const onSortFirstBlock = (): void => {
+  firstBlockSorting.value = [true, !firstBlockSorting.value[1]]
+}
+const onSortSecondBlock = (): void => {
+  secondBlockSorting.value = [true, !secondBlockSorting.value[1]]
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.recursion-tree) {
+  .tree-node-text-drag {
+    border-radius: 3px 0 0 3px;
+  }
+}
+
+:deep(.modal-body) {
+  overflow: hidden;
+  min-height: 430px;
+}
+
+.info-container {
+  padding: 3px;
+  div {
+    line-height: 17px;
+    span {
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+}
+
+.ptm {
+  padding-top: 5px;
+
+  select {
+    outline: none;
+    border-color: rgb(118, 118, 118);
+    color: rgb(133, 133, 133);
+    margin-left: 5px;
+  }
+}
+</style>

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

@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
+import type { UI_T_BlocksWidth } from '~/components/common/browse/blocks/lib/models/types'
 
 const props = defineProps<{
   type: 'horizontal' | 'vertical'
@@ -42,14 +42,14 @@ const rightPosition = computed(() => ({
 const emits = defineEmits<{
   (event: 'change-widths', width: number, index: number): void
 }>()
-const onMouseDown = (event: MouseEvent, section: string) => {
+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) => {
+const onMouseMove = (event: MouseEvent): void => {
   if (!sectionSelected.value) return
   if (event.stopPropagation) event.stopPropagation()
   if (event.preventDefault) event.preventDefault()
@@ -58,7 +58,7 @@ const onMouseMove = (event: MouseEvent) => {
   getSeparatorPosition(event, 0, 1, 'first')
   getSeparatorPosition(event, 1, 2, 'second')
 }
-const onMouseUp = () => {
+const onMouseUp = (): void => {
   sectionSelected.value = false
 }
 const getSeparatorPosition = (
@@ -66,7 +66,7 @@ const getSeparatorPosition = (
   firstBlock: number,
   secondBlock: number,
   separator: string
-) => {
+): void => {
   if (sectionSelected.value && sectionSelectedName.value === separator) {
     const blockWidth0 =
       props.blocksWidth[firstBlock] - (positionOnDown.value - event.x)

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

@@ -1,66 +1,91 @@
-<template>
-  <div class="title-block" :style="blockWidth">
-    <div class="title-block__container" :style="blockWidth">
-      <div class="title-block__title" :style="blockTitleWidth">
-        <b>{{ props.title }}</b>
-      </div>
-      <div class="title-block__body">
-        <slot name="content"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  title: string
-  width: number
-}>()
-
-const blockWidth = computed(() => ({ width: `${props.width}px` }))
-const blockTitleWidth = computed(() => ({ width: `${props.width - 2}px` }))
-</script>
-
-<style scoped lang="scss">
-.title-block {
-  width: 100%;
-  min-height: 400px;
-  position: relative;
-
-  &__container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    height: 400px;
-    border-width: 1px;
-    border-style: solid;
-    border-image: initial;
-    background: var(--block-view-bg-color5);
-    border-color: var(--block-border-color2);
-  }
-  &__title {
-    display: inline-block;
-    flex: 0 0 auto;
-    background-color: var(--block-view-bg-color6);
-    border-bottom: 1px solid var(--block-border-color2);
-    padding: 8px;
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-
-    b {
-      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
-      font-size: 13px;
-      color: var(--global-font-color9);
-      font-weight: bolder;
-      letter-spacing: normal;
-    }
-  }
-  &__body {
-    flex: 1 1 auto;
-    overflow-y: auto;
-  }
-}
-</style>
+<template>
+  <div class="title-block" :style="blockWidth">
+    <div class="title-block__container" :style="blockWidth">
+      <div
+        class="title-block__title pointer"
+        :style="blockTitleWidth"
+        @click="emits('sort')"
+      >
+        <b>{{ props.title }}</b>
+        <atoms-the-icon
+          v-show="props.sorting[0]"
+          :class="['sort-arrow', { down: !props.sorting[1] }]"
+          width="14px"
+          height="14px"
+          name="sort-arrow"
+        />
+      </div>
+      <div class="title-block__body">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title: string
+    width: number
+    sorting?: [boolean, boolean]
+  }>(),
+  {
+    sorting: () => [false, false],
+  }
+)
+const emits = defineEmits<{
+  (event: 'sort'): void
+}>()
+
+const blockWidth = computed(() => ({ width: `${props.width}px` }))
+const blockTitleWidth = computed(() => ({ width: `${props.width - 2}px` }))
+</script>
+
+<style scoped lang="scss">
+.title-block {
+  width: 100%;
+  min-height: 400px;
+  position: relative;
+
+  &__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    height: 400px;
+    border-width: 1px;
+    border-style: solid;
+    border-image: initial;
+    background: var(--block-view-bg-color5);
+    border-color: var(--block-border-color2);
+  }
+  &__title {
+    display: inline-block;
+    flex: 0 0 auto;
+    background-color: var(--block-view-bg-color6);
+    border-bottom: 1px solid var(--block-border-color2);
+    padding: 8px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+
+    b {
+      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
+      font-size: 13px;
+      color: var(--global-font-color9);
+      font-weight: bolder;
+      letter-spacing: normal;
+    }
+    .sort-arrow {
+      &.down {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  &__body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+}
+</style>

package/components/common/browse/blocks/contents/Files.vue

@@ -26,7 +26,7 @@ const emits = defineEmits<{
   (event: 'select-file', file: any): void
 }>()
 
-const onSelectFile = (file: any) => {
+const onSelectFile = (file: any): void => {
   emits('select-file', file)
 }
 </script>

package/components/common/browse/blocks/info/Date.vue

@@ -1,21 +1,21 @@
-<template>
-  <div>
-    <span>{{ props.title }}:</span>
-    <span>{{ formattedDateString }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { format } from 'date-fns'
-const props = defineProps<{
-  title: string
-  value: number
-}>()
-
-const getDateString = (dateAlias: number) =>
-  format(new Date(dateAlias), 'MM/dd/yyyy HH:mm:ss a')
-
-const formattedDateString = computed(() => getDateString(props.value))
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div>
+    <span>{{ props.title }}:</span>
+    <span>{{ formattedDateString }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+const props = defineProps<{
+  title: string
+  value: number
+}>()
+
+const getDateString = (dateAlias: number): string =>
+  format(new Date(dateAlias), 'MM/dd/yyyy HH:mm:ss a')
+
+const formattedDateString = computed<string>(() => getDateString(props.value))
+</script>
+
+<style scoped lang="scss"></style>