bfg-common 1.5.508 → 1.5.510

package/components/atoms/sortableView/SortableView.vue

@@ -0,0 +1,528 @@
+<template>
+  <div :style="{ height: portletsContainerHeight }" class="portlets">
+    <div class="col drop-zone drop-zone-1">
+      <template v-for="item in firstCol" :key="item.id">
+        <div
+          v-if="visibleDropAreaId === `before-${item.id}`"
+          :class="[
+            'drop-area',
+            themeMode,
+            { 'selected-drop-area': !!visibleDropAreaId },
+          ]"
+          data-position="before"
+        ></div>
+        <div
+          :id="`item-${item.id}`"
+          :class="['portlet-js portlet-container', themeMode]"
+          :data-id="item.id"
+          :style="item.id === draggedPortletId && style"
+          @mousedown.prevent.stop="onmousedown($event, item)"
+        >
+          <slot :portlet-id="item.id"></slot>
+        </div>
+        <div
+          v-if="visibleDropAreaId === `after-${item.id}`"
+          :class="[
+            'drop-area',
+            themeMode,
+            { 'selected-drop-area': !!visibleDropAreaId },
+          ]"
+          data-position="after"
+        ></div>
+      </template>
+      <div
+        v-if="isShowDropAreaFirstCol"
+        :class="[
+          'drop-area',
+          themeMode,
+          { 'selected-drop-area': !!visibleDropAreaId },
+        ]"
+        data-position="after"
+      ></div>
+    </div>
+
+    <div class="col drop-zone drop-zone-2">
+      <template v-for="item in secondCol" :key="item.id">
+        <div
+          v-if="visibleDropAreaId === `before-${item.id}`"
+          :class="[
+            'drop-area',
+            themeMode,
+            { 'selected-drop-area': !!visibleDropAreaId },
+          ]"
+          data-position="before"
+        ></div>
+        <div
+          :id="`item-${item.id}`"
+          :class="['portlet-js portlet-container', themeMode]"
+          :data-id="item.id"
+          :style="item.id === draggedPortletId && style"
+          @mousedown.prevent.stop="onmousedown($event, item)"
+        >
+          <slot :portlet-id="item.id"></slot>
+        </div>
+        <div
+          v-if="visibleDropAreaId === `after-${item.id}`"
+          :class="[
+            'drop-area',
+            themeMode,
+            { 'selected-drop-area': !!visibleDropAreaId },
+          ]"
+          data-position="after"
+        ></div>
+      </template>
+      <div
+        v-if="isShowDropAreaSecondCol"
+        :class="[
+          'drop-area',
+          themeMode,
+          { 'selected-drop-area': !!visibleDropAreaId },
+        ]"
+        data-position="after"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_T_PortletsList,
+  UI_T_ExpectedHTMLElement,
+} from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/types'
+import type {
+  UI_I_Style,
+  UI_I_Portlet,
+  UI_I_DropArea,
+} from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/interfaces'
+import { UI_E_Position } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/enums'
+
+const props = withDefaults(
+  defineProps<{
+    name: string
+    portlets: UI_I_Portlet[]
+    updatable?: boolean
+  }>(),
+  {
+    updatable: undefined,
+  }
+)
+const emits = defineEmits<{
+  (event: 'update'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const portletsLocal = ref<UI_I_Portlet[]>([])
+
+const setPortlets = (): void => {
+  portletsLocal.value = useDeepCopy(
+    props.portlets.map((portlet: UI_I_Portlet) => ({
+      ...portlet,
+      isDragged: false,
+    }))
+  )
+}
+setPortlets()
+
+const themeMode = computed<string>(
+  () => $store.getters['main/getThemeMode'] || useLocalStorage('themeMode')
+)
+
+watch(
+  () => props.portlets,
+  (newValue: UI_I_Portlet[]) => {
+    if (newValue.length) setPortlets()
+  }
+)
+
+const containerHeight = ref<number | null>(null)
+
+const draggedPortletId = ref<string>('')
+const visibleDropAreaId = ref<string>('')
+const style = ref<UI_I_Style>({})
+const dropArea = ref<UI_I_DropArea>({
+  id: '-1',
+  position: 'initial',
+  list: 0,
+})
+
+const firstCol = computed<UI_I_Portlet[]>(() =>
+  portletsLocal.value.filter((portlet: UI_I_Portlet) => portlet.list === 1)
+)
+
+const secondCol = computed<UI_I_Portlet[]>(() =>
+  portletsLocal.value.filter((portlet: UI_I_Portlet) => portlet.list === 2)
+)
+
+let portletHTMLElement: UI_T_ExpectedHTMLElement = null
+
+const isShowDropAreaFirstCol = computed<boolean>(() => {
+  return (
+    visibleDropAreaId.value === 'after-list-1' &&
+    (!firstCol.value.length ||
+      (firstCol.value.length === 1 &&
+        firstCol.value[0].id === draggedPortletId.value))
+  )
+})
+
+const isShowDropAreaSecondCol = computed<boolean>(() => {
+  return (
+    visibleDropAreaId.value === 'after-list-2' &&
+    (!secondCol.value.length ||
+      (secondCol.value.length === 1 &&
+        secondCol.value[0].id === draggedPortletId.value))
+  )
+})
+
+const addStyles = (styles: UI_I_Style): void => {
+  style.value = {
+    ...style.value,
+    ...styles,
+  }
+}
+const removeStyles = (): void => {
+  style.value = null
+}
+const setDragStartedPortletById = (id: string): void => {
+  portletsLocal.value = portletsLocal.value.map((portlet: UI_I_Portlet) =>
+    portlet.id === id ? { ...portlet, isDragged: true } : portlet
+  )
+}
+const setDragStoppedPortletById = (id: string): void => {
+  portletsLocal.value = portletsLocal.value.map((portlet: UI_I_Portlet) =>
+    portlet.id === id ? { ...portlet, isDragged: false } : portlet
+  )
+}
+
+const getPortletIndexById = (draggedPortletId: string): number =>
+  portletsLocal.value.findIndex(
+    (portlet: UI_I_Portlet) => portlet.id === draggedPortletId
+  )
+
+const makeDropAreaById = (id: string, position: string): void => {
+  visibleDropAreaId.value = `${position}-${id}`
+}
+
+const setDropAreaData = (
+  id: string,
+  position: string,
+  list: UI_T_PortletsList
+): void => {
+  dropArea.value = {
+    id,
+    position,
+    list,
+  }
+}
+
+const moveAt = (
+  pageX: number,
+  pageY: number,
+  shiftX: number,
+  shiftY: number
+): void => {
+  addStyles({
+    left: pageX - shiftX + 'px',
+    top: pageY - shiftY + 'px',
+  })
+}
+
+const portletsContainerHeight = computed<string | null>(() =>
+  containerHeight.value ? `${containerHeight.value}px` : null
+)
+
+const isDraggableAreaOnPortlet = (
+  eventTarget: HTMLElement
+): boolean | undefined =>
+  eventTarget.classList.contains('portlet-titlebar') ||
+  eventTarget.parentElement?.classList.contains('portlet-titlebar')
+
+const setPortletsInLocalStorage = (
+  name: string,
+  value: UI_I_Portlet[]
+): void => {
+  useLocalStorage(`${name}-portlets-positions`, value)
+}
+
+const reset = (): void => {
+  visibleDropAreaId.value = ''
+  draggedPortletId.value = ''
+  isTranslated = false
+  shiftX = 0
+  shiftY = 0
+  dropArea.value = {
+    id: '-1',
+    position: 'initial',
+    list: 0,
+  }
+  portletHTMLElement = null
+  containerHeight.value = null
+  window.onmousemove = null
+}
+
+let isUpdatable = false
+let isTranslated = false
+let shiftX: number
+let shiftY: number
+let downClientX: number
+let downClientY: number
+const styles = ref<CSSStyleDeclaration | null>(null)
+
+const onmousedown = (
+  downEvent: MouseEvent,
+  portletItem: UI_I_Portlet
+): void => {
+  const containerElement: HTMLElement | null =
+    document.querySelector('.portlets')
+  containerHeight.value = containerElement
+    ? containerElement?.clientHeight
+    : null
+
+  portletHTMLElement = document.querySelector(
+    `#item-${portletItem.id}`
+  ) as HTMLElement
+
+  const eventTarget: HTMLElement = downEvent.target as HTMLElement
+
+  if (!portletHTMLElement || !isDraggableAreaOnPortlet(eventTarget)) return
+  styles.value = getComputedStyle(portletHTMLElement)
+  setDragStartedPortletById(portletItem.id)
+
+  const { left, top } = portletHTMLElement.getBoundingClientRect()
+  downClientX = downEvent.clientX
+  downClientY = downEvent.clientY
+  shiftX = downEvent.clientX - left
+  shiftY = downEvent.clientY - top
+
+  draggedPortletId.value = portletItem.id
+
+  moveAt(downEvent.pageX, downEvent.pageY, shiftX, shiftY)
+  window.onmousemove = (ev): void => onmousemove(ev, portletItem.id)
+}
+
+let onmousemove = (moveEvent: MouseEvent, currentPortletId: string): void => {
+  moveEvent.stopPropagation()
+  moveEvent.preventDefault()
+  moveEvent.cancelBubble = true
+
+  if (
+    isTranslated ||
+    Math.abs(downClientX - moveEvent.clientX) > 10 ||
+    Math.abs(downClientY - moveEvent.clientY) > 10
+  ) {
+    if (!isTranslated && styles.value.width && styles.value.height) {
+      addStyles({
+        width: styles.value.width,
+        height: styles.value.height,
+        position: 'fixed',
+        zIndex: '1000',
+        transform: 'translateX(10px)',
+        cursor: 'move',
+      })
+
+      makeDropAreaById(currentPortletId, 'before')
+      isTranslated = true
+    }
+
+    moveAt(moveEvent.pageX, moveEvent.pageY, shiftX, shiftY)
+
+    if (!portletHTMLElement) {
+      reset()
+      return
+    }
+
+    portletHTMLElement.hidden = true
+    const caughtElement: UI_T_ExpectedHTMLElement = document.elementFromPoint(
+      moveEvent.clientX,
+      moveEvent.clientY
+    ) as HTMLElement
+    portletHTMLElement.hidden = false
+    const caughtPortletElement: UI_T_ExpectedHTMLElement =
+      caughtElement?.closest('.portlet-js')
+    const caughtListElement: UI_T_ExpectedHTMLElement =
+      caughtElement?.closest('.drop-zone')
+    const list = caughtListElement?.classList.contains('drop-zone-1') ? 1 : 2
+
+    const container: UI_T_ExpectedHTMLElement =
+      document.querySelector('.content')
+
+    const boundingRect = container?.getBoundingClientRect()
+    let scrollTop = container?.scrollTop as number
+    const scrollHeight = container?.scrollHeight as number
+    const clientHeight = container?.clientHeight as number
+
+    if (container && boundingRect) {
+      if (boundingRect.top + 20 > moveEvent.pageY && scrollTop > 0) {
+        const nextScroll: number = scrollTop - 200
+        container?.scrollTo({
+          top: scrollTop === 0 ? 0 : nextScroll,
+          behavior: 'smooth',
+        })
+        scrollTop = nextScroll
+      }
+      if (boundingRect.bottom - 20 < moveEvent.pageY) {
+        const nextScroll: number = scrollTop + clientHeight + 200
+        scrollTop = nextScroll > scrollHeight ? scrollHeight : nextScroll
+        container?.scrollTo({ top: scrollTop, behavior: 'smooth' })
+      }
+    }
+
+    const portletsInCaughtList: UI_I_Portlet[] = portletsLocal.value.filter(
+      (el: UI_I_Portlet) => el.list === list
+    )
+    const hasNotPortletInList = !portletsInCaughtList.length
+    const isOnlyOneMemberOfList =
+      portletsInCaughtList.length === 1 &&
+      portletsInCaughtList[0].id === currentPortletId
+
+    if (caughtPortletElement && caughtListElement) {
+      const fromTopToMouseY = moveEvent.clientY
+      const fromTopToElementY = caughtPortletElement.getClientRects().item(0)?.y
+
+      const elementHeight = caughtPortletElement.offsetHeight
+      const caughtPortletId = caughtPortletElement.dataset.id
+
+      if (fromTopToElementY && caughtPortletId) {
+        if (fromTopToMouseY - fromTopToElementY < elementHeight / 2) {
+          makeDropAreaById(caughtPortletId, 'before')
+          setDropAreaData(caughtPortletId, 'before', list)
+        } else {
+          makeDropAreaById(caughtPortletId, 'after')
+          setDropAreaData(caughtPortletId, 'after', list)
+        }
+      }
+    } else if (
+      caughtListElement &&
+      (hasNotPortletInList || isOnlyOneMemberOfList)
+    ) {
+      makeDropAreaById(`list-${list}`, 'after')
+      setDropAreaData('3', 'after', list)
+    }
+  }
+}
+onmousemove = useThrottle(onmousemove)
+
+const dropPortlet = (
+  position: UI_E_Position,
+  indexOfDraggedPortlet: number,
+  dropAreaId: string,
+  dropAreaList: UI_T_PortletsList
+): void => {
+  const splicedData: UI_I_Portlet = portletsLocal.value.splice(
+    indexOfDraggedPortlet,
+    1
+  )[0]
+  const indexOfDropArea = getPortletIndexById(dropAreaId)
+  portletsLocal.value.splice(indexOfDropArea + position, 0, {
+    ...splicedData,
+    list: dropAreaList,
+  })
+}
+
+const onmouseup = (_event: MouseEvent): void => {
+  const dropAreaPosition = dropArea.value.position
+  const dropAreaId = dropArea.value.id
+  const dropAreaList = dropArea.value.list
+
+  if (!draggedPortletId.value) {
+    window.onmousemove = null
+    reset()
+    return
+  }
+  if (dropAreaPosition !== 'initial') {
+    const indexOfDraggedPortlet = getPortletIndexById(draggedPortletId.value)
+    const hasNotPortletArea = !portletsLocal.value.find(
+      (portlet: UI_I_Portlet) => portlet.list === dropAreaList
+    )
+    if (hasNotPortletArea)
+      portletsLocal.value = portletsLocal.value.map((portlet: UI_I_Portlet) =>
+        portlet.id === draggedPortletId.value
+          ? {
+              ...portlet,
+              list: dropAreaList,
+            }
+          : portlet
+      )
+
+    dropAreaPosition === 'before' &&
+      dropPortlet(
+        UI_E_Position.BEFORE,
+        indexOfDraggedPortlet,
+        dropAreaId,
+        dropAreaList
+      )
+    dropAreaPosition === 'after' &&
+      dropPortlet(
+        UI_E_Position.AFTER,
+        indexOfDraggedPortlet,
+        dropAreaId,
+        dropAreaList
+      )
+  }
+
+  isUpdatable = true
+  removeStyles()
+  setDragStoppedPortletById(draggedPortletId.value)
+  reset()
+  setPortletsInLocalStorage(props.name, portletsLocal.value)
+}
+
+onUpdated(() => {
+  if (!props.updatable) return
+
+  isUpdatable && emits('update')
+  isUpdatable = false
+})
+
+onMounted(() => {
+  document.addEventListener('mouseup', onmouseup)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mouseup', onmouseup)
+})
+</script>
+
+<style scoped lang="scss">
+.portlets {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 10px;
+  margin-top: 10px;
+
+  .col {
+    width: 100%;
+
+    .portlet-container.dark-theme {
+      background-color: #1b2a32;
+      border-radius: 3px;
+    }
+
+    .health-status {
+      &__item {
+        display: grid;
+        grid-template-columns: 14px 40% 60%;
+      }
+      &__heading {
+        color: var(--global-text-color3) !important;
+      }
+    }
+
+    .drop-area {
+      box-sizing: border-box;
+      width: 100%;
+      height: 35px;
+      border: 1px solid #e7e7e7;
+      background-color: #f2f8fc;
+      border-radius: 4px;
+      margin: 0 0 12px;
+
+      &.dark-theme {
+        border: 1px solid black;
+        background-color: #f2f8fc;
+        opacity: 0.5;
+      }
+    }
+  }
+}
+</style>