bfg-common 1.0.0

package/components/common/addNetworking/utils/index.ts

@@ -0,0 +1,212 @@
+import {
+  UI_I_NetworkLabelCheckExisting,
+  UI_I_Step,
+} from '~/components/common/addNetworking/models/interfaces'
+import { UI_E_StepStatus } from '~/components/common/addNetworking/models/enums'
+
+export class Wizard {
+  stepsScheme: UI_I_Step[][]
+  selectedStepScheme: Ref<number>
+  private _selectedStep: Ref<number>
+  completedStepsId: Ref<number[]>
+  private _waitingStepId: Ref<number>
+
+  constructor(stepsScheme: UI_I_Step[][]) {
+    this.selectedStepScheme = ref<number>(0)
+    this._selectedStep = ref<number>(0)
+    this.stepsScheme = stepsScheme
+    this.completedStepsId = ref<number[]>([])
+    this._waitingStepId = ref<number>(0)
+  }
+
+  get selectedScheme(): number {
+    return this.selectedStepScheme.value
+  }
+
+  set selectedScheme(stepScheme: number) {
+    this.selectedStepScheme.value = stepScheme
+  }
+
+  isSelectedScheme(stepScheme: number): boolean {
+    return this.selectedStepScheme.value === stepScheme
+  }
+
+  resetStepsUntilX(x: number): void {
+    this.completedStepsId.value.length >= x &&
+      (this.completedStepsId.value.length = x - 1)
+  }
+
+  get selectedStep(): number {
+    return this._selectedStep.value
+  }
+
+  set selectedStep(step: number) {
+    this._selectedStep.value = step
+  }
+
+  get waitingStepId(): number {
+    return this._waitingStepId.value
+  }
+
+  set waitingStepId(step: number) {
+    this._waitingStepId.value = step
+  }
+
+  isSelectedStep(step: number): boolean {
+    return this.selectedStep === step
+  }
+
+  isUpThenSelectedStep(step: number): boolean {
+    return this.selectedStep <= step
+  }
+
+  isDownThenSelectedStep(step: number): boolean {
+    return this.selectedStep >= step
+  }
+
+  reset(): void {
+    this.selectedScheme = 0
+    this.selectedStep = 0
+    this.resetStepsUntilX(1)
+  }
+
+  goToNextStep(
+    cb?: (
+      selectedStepIndex: number,
+      nextStepId: number,
+      ...args: any
+    ) => boolean,
+    ...args: any
+  ): void {
+    const selectedStepIndex: number = this.stepsWithStatus().findIndex(
+      (step: UI_I_Step) => this.isSelectedStep(step.id)
+    )
+
+    const nextStepId: number = this.stepsWithStatus()[selectedStepIndex + 1].id
+
+    if (!cb || cb(selectedStepIndex, nextStepId, ...args)) {
+      this.selectedStep = this.stepsWithStatus()[selectedStepIndex + 1].id
+    }
+  }
+
+  goToSelectedStep(step: number, cb?: (step: number) => boolean): void {
+    if (!cb || cb(step)) {
+      this.selectedStep = step
+    }
+  }
+
+  goToBackStep(): void {
+    const selectedStepIndex: number = this.stepsWithStatus().findIndex(
+      (step: UI_I_Step) => this.isSelectedStep(step.id)
+    )
+    this.selectedStep = this.stepsWithStatus()[selectedStepIndex - 1].id
+  }
+
+  isBeforeLastStep(): boolean {
+    const selectedScheme: UI_I_Step[] = this.stepsScheme[this.selectedScheme]
+
+    return selectedScheme[selectedScheme.length - 2].id === this.selectedStep
+  }
+
+  isLastStep(step: number): boolean {
+    const selectedScheme: UI_I_Step[] = this.stepsScheme[this.selectedScheme]
+
+    return selectedScheme[selectedScheme.length - 1].id === step
+  }
+
+  stepsWithStatus(): UI_I_Step[] {
+    // let selectedFlag = false
+    let lastId = 0
+
+    return this.stepsScheme[this.selectedScheme].map(
+      (step: UI_I_Step): UI_I_Step => {
+        if (
+          // If a selected step is completed
+          step.id === this.selectedStep &&
+          this.completedStepsId.value.includes(step.id)
+        ) {
+          lastId = step.id
+          return { ...step, status: UI_E_StepStatus.CompleteSelected }
+        } else if (
+          // If a step is completed
+          step.id < this.selectedStep ||
+          this.completedStepsId.value.includes(step.id)
+        ) {
+          !this.completedStepsId.value.includes(step.id) &&
+            this.completedStepsId.value.push(step.id)
+          lastId = step.id
+          return { ...step, status: UI_E_StepStatus.Complete }
+        } else if (
+          // If a step is selected, but is not active
+          step.id === this.selectedStep
+        ) {
+          // selectedFlag = true
+          lastId = step.id
+          return { ...step, status: UI_E_StepStatus.Selected }
+        } else if (
+          // If a step is active
+
+          lastId ===
+          this.completedStepsId.value[this.completedStepsId.value.length - 1]
+        ) {
+          // console.log(selectedFlag)
+          // selectedFlag = false
+          lastId = step.id
+          return { ...step, status: UI_E_StepStatus.Active }
+        } // If a step is disabled
+        else {
+          lastId = step.id
+          return { ...step, status: UI_E_StepStatus.Disabled }
+        }
+      }
+    )
+  }
+
+  // -----------------
+  // Not common-------
+
+  checkNetworkLabelBeforeGoToNextStep(
+    currentStep: number,
+    networkLabel: string,
+    isNetworkInvalid: UI_I_NetworkLabelCheckExisting | undefined,
+    checkNetwork: (networkLabel: string, nextStep?: number) => void
+  ): boolean {
+    if (
+      this.isSelectedStep(currentStep) &&
+      (!isNetworkInvalid?.checked ||
+        (isNetworkInvalid.checked && !isNetworkInvalid.valid))
+    ) {
+      checkNetwork(networkLabel)
+      return true
+    }
+    return false
+  }
+
+  checkNetworkLabelBeforeGoToNewStep(
+    nextStep: number,
+    currentStepScheme: number,
+    currentStep: number,
+    networkLabel: string,
+    isNetworkInvalid: UI_I_NetworkLabelCheckExisting | undefined,
+    checkNetwork: (networkLabel: string, nextStep?: number) => void
+  ): boolean {
+    if (
+      this.isSelectedScheme(currentStepScheme) &&
+      nextStep > currentStep &&
+      (!isNetworkInvalid?.checked ||
+        (isNetworkInvalid.checked && !isNetworkInvalid.valid))
+    ) {
+      checkNetwork(networkLabel, nextStep)
+      return true
+    }
+    return false
+  }
+
+  // Not common-------
+  // -----------------
+}
+
+export const getVlanId = (vlanId: string): string =>
+  (vlanId === 'All (4095)' && '4095') ||
+  (vlanId === 'None (0)' && '0') ||
+  vlanId

package/components/common/browse/Browse.vue

@@ -0,0 +1,182 @@
+<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">
+          <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 '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { UI_T_BlocksWidth } from '~/components/common/browse/blocks/models/types'
+import { UI_I_FileInfo } from '~/components/common/browse/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
+}>()
+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) => {
+  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>

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

@@ -0,0 +1,102 @@
+<template>
+  <div :class="`title-block__${props.type}-container`">
+    <slot name="firstBlock"></slot>
+    <div
+      class="move-separator"
+      :style="leftPosition"
+      @mousedown="onMouseDown($event, 'first')"
+    ></div>
+    <slot name="secondBlock"></slot>
+    <div
+      class="move-separator"
+      :style="rightPosition"
+      @mousedown="onMouseDown($event, 'second')"
+    ></div>
+    <slot name="thirdBlock"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_T_BlocksWidth } from '~/components/common/browse/blocks/models/types'
+
+const props = defineProps<{
+  type: 'horizontal' | 'vertical'
+  blocksWidth: UI_T_BlocksWidth
+}>()
+
+const sectionSelected = ref<boolean>(false)
+const sectionSelectedName = ref<string>('')
+
+const positionOnDown = ref<number>(0)
+
+const leftPosition = computed(() => ({
+  left: `${props.blocksWidth[0] + 28}px`,
+}))
+const rightPosition = computed(() => ({
+  right: `${props.blocksWidth[2] + 28}px`,
+}))
+
+const emits = defineEmits<{
+  (event: 'change-widths', width: number, index: number): void
+}>()
+const onMouseDown = (event: MouseEvent, section: string) => {
+  sectionSelected.value = true
+  sectionSelectedName.value = section
+  positionOnDown.value = (
+    event.target as HTMLDivElement
+  ).getBoundingClientRect().x
+}
+const onMouseMove = (event: MouseEvent) => {
+  if (!sectionSelected.value) return
+  if (event.stopPropagation) event.stopPropagation()
+  if (event.preventDefault) event.preventDefault()
+  event.cancelBubble = true
+
+  getSeparatorPosition(event, 0, 1, 'first')
+  getSeparatorPosition(event, 1, 2, 'second')
+}
+const onMouseUp = () => {
+  sectionSelected.value = false
+}
+const getSeparatorPosition = (
+  event: MouseEvent,
+  firstBlock: number,
+  secondBlock: number,
+  separator: string
+) => {
+  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 < 30 || blockWidth1 < 30) return
+    blockWidth0 >= 30 && emits('change-widths', blockWidth0, firstBlock)
+    blockWidth1 >= 30 && 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;
+}
+.move-separator {
+  position: absolute;
+  height: 400px;
+  background-color: white;
+  width: 3px;
+  cursor: e-resize;
+}
+</style>

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

@@ -0,0 +1,66 @@
+<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;
+    height: 400px;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(204, 204, 204);
+    border-image: initial;
+    background: rgb(255, 255, 255);
+  }
+  &__title {
+    background-color: rgb(231, 235, 239);
+    flex: 0 0 auto;
+    padding: 8px;
+    border-bottom: 1px solid rgb(204, 204, 204);
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+
+    b {
+      font-weight: bolder;
+      font-size: 13px;
+      letter-spacing: normal;
+      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
+      color: #666;
+    }
+  }
+  &__body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+}
+</style>

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

@@ -0,0 +1,68 @@
+<template>
+  <ul class="file-view__container">
+    <template v-for="file in props.selectedFolderFiles" :key="file.name">
+      <li
+        :class="[
+          'file-view',
+          { selected: file.name === props.selectedFile?.name },
+        ]"
+        @click="onSelectFile(file)"
+      >
+        <span :class="file.iconClassName"></span>
+        <span>{{ file.name }}</span>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  selectedFolderFiles: any[]
+  selectedFile: any
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-file', file: any): void
+}>()
+
+const onSelectFile = (file: any) => {
+  emits('select-file', file)
+}
+</script>
+
+<style scoped lang="scss">
+.file-view {
+  &__container {
+    list-style-position: inside;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      line-height: 20px;
+      padding: 2px;
+      border-bottom: 1px solid #eee;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #c6e7ff;
+        line-height: 20px;
+        padding: 2px;
+        border-bottom: 1px solid #eee;
+        cursor: pointer;
+      }
+      &.selected {
+        background-color: #a3d7ff;
+      }
+      span {
+        line-height: 20px;
+      }
+      span:first-of-type {
+        width: 16px;
+        height: 16px;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +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>

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

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <span>{{ props.title }}:</span>
+    <span>{{ size }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  value: number
+}>()
+const { $binary } = useNuxtApp()
+const size = computed(() => $binary.round(props.value, true))
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <span>{{ props.title }}:</span>
+    <span>{{ props.value }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  value: string
+}>()
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/components/common/browse/blocks/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_BlocksWidth = [number, number, number]

package/components/common/browse/models/interfaces.ts

@@ -0,0 +1,5 @@
+export interface UI_I_FileInfo {
+  type: string
+  title: string
+  value: string | number
+}