bfg-common 1.0.76 → 1.0.77

package/components/atoms/table/dataGrid/DataGrid.vue

@@ -1,8 +1,23 @@
 <template>
-  <div class="relative">
-    <div :id="outerWrapper" class="datagrid-outer-wrapper">
+  <div class="relative" style="display: flex">
+    <div
+      :id="outerWrapper"
+      :class="[
+        'datagrid-outer-wrapper',
+        {
+          'datagrid-outer-wrapper-opened-info': isShowHiddenInfo,
+        },
+      ]"
+    >
       <div class="datagrid-inner-wrapper">
-        <div class="datagrid">
+        <div
+          :class="[
+            'datagrid',
+            {
+              'datagrid-opened-info': isShowHiddenInfo,
+            },
+          ]"
+        >
           <div :id="tableWrapperId" class="datagrid-table-wrapper">
             <div class="datagrid-table">
               <div class="datagrid-header">
@@ -117,7 +132,10 @@
                             </atoms-popup-simple-popup>
                           </div>
                           <div
-                            v-show="!isShowHiddenInfo"
+                            v-show="
+                              !isShowHiddenInfo ||
+                              (isShowHiddenInfo && key === 0)
+                            "
                             class="datagrid-column-separator"
                             @mousedown="setGrab(key, $event)"
                           >
@@ -160,7 +178,14 @@
                       >
                         <div
                           :id="expandableCaret"
-                          class="datagrid-expandable-caret datagrid-fixed-column flex-justify-center datagrid-cell"
+                          :class="[
+                            'datagrid-expandable-caret flex-justify-center datagrid-cell',
+                            {
+                              'datagrid-fixed-column': !props.withInfo,
+                              'datagrid-fixed-column-without-separator':
+                                props.withInfo,
+                            },
+                          ]"
                         >
                           <slot name="type" :key="key" :item="item">
                             <div
@@ -217,13 +242,16 @@
                               width: columnsWidth[key2][0],
                               minWidth: columnsWidth[key2][1],
                             }"
-                            class="datagrid-cell datagrid-fixed-width"
-                            :class="{
-                              'hidden-text-triangle':
-                                isShowHiddenInfo &&
-                                item2.key === 'col1' &&
-                                item2.data?.iconClassName === '11',
-                            }"
+                            :class="[
+                              'datagrid-cell datagrid-fixed-width',
+                              `hidden-text-triangle-${item2.id}`,
+                              {
+                                'hidden-text-triangle':
+                                  isShowHiddenInfo &&
+                                  item2.key === 'col1' &&
+                                  item2.data?.iconClassName === 'info',
+                              },
+                            ]"
                           >
                             <div
                               :class="[
@@ -252,55 +280,17 @@
                                       isShowHiddenInfo &&
                                       item2.id === selectedRow,
                                   }"
-                                  @click="doubleArrowClick"
+                                  @click="doubleArrowClick(item2, item)"
                                 />
                               </div>
-                              <!--                              <span-->
-                              <!--                                v-if="item2.text && item2.data?.iconClassName"-->
-                              <!--                                class="vertical-divider"-->
-                              <!--                              />-->
+                              <span
+                                v-if="item2.text && item2.data?.iconClassName"
+                                class="vertical-divider"
+                              />
                               <slot :name="item2.key" :item="item2">
-                                <span
-                                  class="text-ellipsis"
-                                  :title="item2.text"
-                                  >{{ item2.text }}</span
-                                >
-
-                                <Teleport
-                                  v-if="
-                                    item2.id === selectedRow &&
-                                    !item2.data?.text &&
-                                    isShowHiddenInfo
-                                  "
-                                  :to="`#${tableWrapperId}`"
-                                  @click.stop
-                                >
-                                  <div
-                                    id="hidden-features"
-                                    class="hidden-features"
-                                    :class="{
-                                      'show-hidden-info': isShowHiddenInfo,
-                                    }"
-                                  >
-                                    <div class="header">
-                                      <slot
-                                        name="hiddenInfoHeader"
-                                        :item="item"
-                                      />
-                                      <button
-                                        :id="`${props.testId}-hidden-info-toggle-icon-${key}-${key2}`"
-                                        class="signpost-action close"
-                                        @click="isShowHiddenInfo = false"
-                                      >
-                                        <atoms-the-icon
-                                          class="close-icon"
-                                          name="close"
-                                        />
-                                      </button>
-                                    </div>
-                                    <slot name="hiddenInfoBody" />
-                                  </div>
-                                </Teleport>
+                                <span class="text-ellipsis" :title="item2.text"
+                                  >{{ item2.text }}
+                                </span>
                               </slot>
                             </div>
                           </div>
@@ -329,7 +319,15 @@
           </div>
         </div>
 
-        <div v-if="!hideFooter" class="datagrid-footer">
+        <div
+          v-if="!hideFooter"
+          :class="[
+            'datagrid-footer',
+            {
+              'datagrid-footer-opened-info': isShowHiddenInfo,
+            },
+          ]"
+        >
           <div
             v-if="props.type === 'checkbox' && props.selectedRow?.length"
             class="clr-form-control-disabled"
@@ -369,6 +367,7 @@
             :hide-page-size="props.hidePageSize"
             :show-page-info="props.showPageInfo"
             :page-items-count="props.bodyItems.length"
+            :is-show-hidden-info="isShowHiddenInfo"
             @change-page-size="changePageSize"
             @change-page="changePage"
           />
@@ -377,6 +376,37 @@
         <atoms-loader v-show="props.loading" class="datagrid-spinner" />
       </div>
     </div>
+    <!--        {{ showedInfoRow }}-->
+    <!--    {{ selectedRow }}-->
+    <!--    {{ isShowHiddenInfo }}-->
+    <!--    {{-->
+    <!--      isShowHiddenInfo &&-->
+    <!--      showedInfoRow &&-->
+    <!--      showedInfoRow.id === selectedRow &&-->
+    <!--      !showedInfoRow.data?.text-->
+    <!--    }}-->
+    <div
+      v-if="isShowInfo"
+      id="hidden-features"
+      :class="[
+        'hidden-features',
+        {
+          'show-hidden-info': isShowHiddenInfo,
+        },
+      ]"
+    >
+      <div class="header">
+        <slot name="hiddenInfoHeader" :item="showedInfoCol" />
+        <button
+          :id="`${props.testId}-hidden-info-toggle-icon-${showedInfoRow?.key}-${showedInfoRow?.data.name}`"
+          class="signpost-action close"
+          @click="isShowHiddenInfo = false"
+        >
+          <atoms-the-icon class="close-icon" name="close" />
+        </button>
+      </div>
+      <slot name="hiddenInfoBody" />
+    </div>
   </div>
 </template>
 
@@ -416,6 +446,7 @@ const props = withDefaults(
     hideFooter?: boolean
     hidePagination?: boolean
     testId?: string
+    withInfo?: boolean
   }>(),
   {
     columnKeys: undefined,
@@ -424,6 +455,7 @@ const props = withDefaults(
     itemsPerPage: undefined,
     fillWidth: true,
     testId: 'ui-data-grid',
+    withInfo: false,
   }
 )
 
@@ -467,14 +499,32 @@ const selectedRowLocal = ref<UI_T_SelectedRow>([])
 const isShowHiddenInfo = ref<boolean>(false)
 const tableWrapperId = `table-wrapper-${useUniqueId()}`
 let memoryWidth = '0'
-const doubleArrowClick = () => {
+
+const showedInfoRow = ref<UI_I_BodyItem | null>(null)
+const showedInfoCol = ref<UI_I_BodyItem[] | null>(null)
+
+const isShowInfo = computed(
+  () =>
+    showedInfoRow.value &&
+    showedInfoRow.value.id === props.selectedRow &&
+    !showedInfoRow.value.data?.text &&
+    isShowHiddenInfo.value
+)
+const doubleArrowClick = (item: UI_I_BodyItem, items: UI_I_BodyItem[]) => {
+  // if (!isShowHiddenInfo.value) {
+  //   memoryWidth = columnsWidth.value[1][0]
+  //   // columnsWidth.value[1][0] = 'calc(100% - 48px)'
+  //   // min width of 1st column
+  //   // columnsWidth.value[1][1]
+  // } else {
+  //   columnsWidth.value[1][0] = memoryWidth
+  // }
   if (!isShowHiddenInfo.value) {
-    memoryWidth = columnsWidth.value[1][0]
-    columnsWidth.value[1][0] = '162px'
-    // min width of 1st column
-    // columnsWidth.value[1][1]
+    showedInfoRow.value = item
+    showedInfoCol.value = items
   } else {
-    columnsWidth.value[1][0] = memoryWidth
+    showedInfoRow.value = null
+    showedInfoCol.value = null
   }
   isShowHiddenInfo.value = !isShowHiddenInfo.value
 }
@@ -651,6 +701,7 @@ const bodyItemsPresent = computed<UI_I_BodyItem[][]>(() => {
           hasItem = arr.some(
             (bodyItem) =>
               bodyItem.key === item.key &&
+              typeof bodyItem.text === 'string' &&
               bodyItem.text.toLowerCase().includes(term)
           )
         })
@@ -740,9 +791,11 @@ watch(
 const grabColumn = ref<number>(-1)
 const grabStartX = ref<number>(0)
 const setGrab = (key: number, e: MouseEvent): void => {
-  grabColumn.value = key
-  const currentWidth = parseInt(columnsWidth.value[grabColumn.value][0])
-  grabStartX.value = e.clientX - currentWidth
+  if (!isShowHiddenInfo.value) {
+    grabColumn.value = key
+    const currentWidth = parseInt(columnsWidth.value[grabColumn.value][0])
+    grabStartX.value = e.clientX - currentWidth
+  }
 }
 
 const isDrag = ref<boolean>(false)
@@ -782,10 +835,38 @@ const setResizeObserve = (): void => {
   resizeObserve = new ResizeObserver(setColumnWidth)
   resizeObserve.observe(el)
 }
+
+let resizeObserveWithInfo: ResizeObserver
+
+const setColumnWidthWithInfo = (ent: ResizeObserverEntry[]): void => {
+  if (isShowHiddenInfo.value) {
+    memoryWidth = columnsWidth.value[1][0]
+    columnsWidth.value[1][0] = `${ent[0].contentBoxSize[0].inlineSize - 86}px`
+  } else {
+    columnsWidth.value[1][0] = memoryWidth
+  }
+}
+
+const setResizeObserveWithInfo = (): void => {
+  const el = document.querySelector('.datagrid')
+
+  if (!el) {
+    setTimeout(setResizeObserveWithInfo, 0)
+    return
+  }
+
+  resizeObserveWithInfo = new ResizeObserver(setColumnWidthWithInfo)
+  resizeObserveWithInfo.observe(el)
+}
+
 onMounted(() => {
   window.addEventListener('mousemove', mousemove)
   window.addEventListener('mouseup', mouseup)
 
+  if (props.withInfo) {
+    setResizeObserveWithInfo()
+  }
+
   setResizeObserve()
 })
 onUnmounted(() => {
@@ -802,6 +883,11 @@ onUnmounted(() => {
   flex-grow: 1;
   overflow: auto;
 
+  &.datagrid-outer-wrapper-opened-info {
+    width: 35%;
+    min-width: 195px;
+  }
+
   & * {
     box-sizing: border-box;
   }
@@ -822,6 +908,11 @@ onUnmounted(() => {
       background-color: var(--block-view-bg-color);
       border-color: var(--global-border-color);
 
+      &.datagrid-opened-info {
+        border-radius: 0.125rem 0 0 0;
+        overflow-x: hidden;
+      }
+
       .datagrid-table-wrapper {
         display: flex;
         flex: 1 1 auto;
@@ -905,6 +996,8 @@ onUnmounted(() => {
                 .title-column {
                   font-weight: bold;
                   font-size: 11px;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
                 }
 
                 .sort-arrow-wrap {
@@ -967,25 +1060,23 @@ onUnmounted(() => {
 
                 &.hidden-text-triangle::after {
                   content: '';
-                  margin-right: -5%;
                   position: absolute;
                   transform: rotate(225deg);
                   border-bottom: 15px solid transparent;
                   border-right: 15px solid var(--global-bg-color);
                   bottom: 26%;
-                  right: 0;
-                  z-index: 1000003;
+                  right: -10px;
+                  z-index: 1000;
                 }
                 &.hidden-text-triangle::before {
                   content: '';
-                  margin-right: -5%;
                   transform: rotate(-135deg);
                   position: absolute;
                   border-bottom: 16px solid transparent;
                   border-right: 16px solid var(--global-border-color);
                   bottom: 23%;
-                  right: 0%;
-                  z-index: 1000002;
+                  right: -10px;
+                  z-index: 999;
                 }
               }
 
@@ -1083,6 +1174,14 @@ onUnmounted(() => {
               }
             }
 
+            .datagrid-fixed-column-without-separator {
+              background-color: var(--block-view-bg-color);
+
+              &::after {
+                background-color: transparent;
+              }
+            }
+
             .datagrid-fixed-column {
               background-color: var(--block-view-bg-color);
 
@@ -1144,6 +1243,11 @@ onUnmounted(() => {
       padding: 0 0.6rem;
       height: 28px;
 
+      &.datagrid-footer-opened-info {
+        border-radius: 0 0 0 0.15rem;
+        flex-direction: row-reverse;
+      }
+
       .clr-form-control-disabled {
         opacity: 1;
 
@@ -1216,17 +1320,13 @@ onUnmounted(() => {
 
 .hidden-features {
   padding: 9px 14px;
-  position: absolute;
-  top: 8.5%;
-  right: 0%;
-  left: 25.35%;
-  bottom: 0%;
-  z-index: 1000001;
   background-color: var(--global-bg-color);
   color: var(--global-font-color2);
   border: 1px solid var(--global-border-color);
+  border-left: none;
   overflow-y: auto;
   overflow-x: hidden;
+  width: 65%;
 
   .header {
     display: flex;

package/components/atoms/table/dataGrid/DataGridPagination.vue

@@ -1,83 +1,89 @@
-<template>
-  <div class="pagination">
-    <div v-if="!props.hidePagination" class="pagination-size">
-      <atoms-per-page
-        v-if="!props.hidePageSize"
-        :test-id="props.testId"
-        :page-size="props.pageSize"
-        :options="props.options"
-        @change="changePageSize"
-      />
-    </div>
-
-    <div class="pagination-description ml-1">
-      {{ totalItemCount }}
-    </div>
-
-    <atoms-table-data-grid-page
-      v-if="!props.hidePagination"
-      :test-id="props.testId"
-      :page="props.page"
-      :total-items="props.totalItems"
-      :total-pages="props.totalPages"
-      :page-size="props.pageSize"
-      @change="changePage"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    options: UI_I_OptionItem[]
-    pageSize: number
-    page: number
-    totalItems: number
-    totalPages: number
-    pageItemsCount: number
-    hidePagination?: boolean
-    hidePageSize?: boolean
-    showPageInfo?: boolean
-    testId?: string
-  }>(),
-  { testId: 'ui-data-grid-pagination' }
-)
-const emits = defineEmits<{
-  (event: 'change-page-size', value: number): void
-  (event: 'change-page', value: number): void
-}>()
-const localization = computed<UI_I_Localization>(() => useLocal())
-const totalItemCount = computed<string>(() => {
-  const start = (props.page - 1) * props.pageSize + 1
-  // const end = Math.min(props.totalItems, props.page * props.pageSize)
-
-  const paginationInfo = props.showPageInfo
-    ? `${start} - ${props.pageItemsCount} ${localization.value.of}`
-    : ''
-  // props.totalPages > 1 ? `${start} - ${end} ${localization.of}` : ''
-
-  return `${paginationInfo} ${
-    props.totalItems
-  } ${localization.value.items.toLowerCase()}`
-})
-
-const changePageSize = (pageSize: number): void => {
-  const newTotalPages = Math.ceil(props.totalItems / pageSize)
-  if (newTotalPages < props.page) changePage(newTotalPages)
-  emits('change-page-size', pageSize)
-}
-
-const changePage = (page: number): void => {
-  emits('change-page', page)
-}
-</script>
-
-<style scoped lang="scss">
-.pagination {
-  display: inline-flex;
-  align-items: center;
-}
-</style>
+<template>
+  <div class="pagination">
+    <div v-if="!props.hidePagination" class="pagination-size">
+      <atoms-per-page
+        v-if="!props.hidePageSize"
+        :test-id="props.testId"
+        :page-size="props.pageSize"
+        :options="props.options"
+        @change="changePageSize"
+      />
+    </div>
+
+    <div
+      :class="['pagination-description', { 'ml-1': !props.isShowHiddenInfo }]"
+    >
+      {{ totalItemCount }}
+    </div>
+
+    <atoms-table-data-grid-page
+      v-if="!props.hidePagination"
+      :test-id="props.testId"
+      :page="props.page"
+      :total-items="props.totalItems"
+      :total-pages="props.totalPages"
+      :page-size="props.pageSize"
+      @change="changePage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    options: UI_I_OptionItem[]
+    pageSize: number
+    page: number
+    totalItems: number
+    totalPages: number
+    pageItemsCount: number
+    hidePagination?: boolean
+    hidePageSize?: boolean
+    showPageInfo?: boolean
+    testId?: string
+    isShowHiddenInfo?: boolean
+  }>(),
+  {
+    testId: 'ui-data-grid-pagination',
+    isShowHiddenInfo: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'change-page-size', value: number): void
+  (event: 'change-page', value: number): void
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+const totalItemCount = computed<string>(() => {
+  const start = (props.page - 1) * props.pageSize + 1
+  // const end = Math.min(props.totalItems, props.page * props.pageSize)
+
+  const paginationInfo = props.showPageInfo
+    ? `${start} - ${props.pageItemsCount} ${localization.value.of}`
+    : ''
+  // props.totalPages > 1 ? `${start} - ${end} ${localization.of}` : ''
+
+  return `${paginationInfo} ${
+    props.totalItems
+  } ${localization.value.items.toLowerCase()}`
+})
+
+const changePageSize = (pageSize: number): void => {
+  const newTotalPages = Math.ceil(props.totalItems / pageSize)
+  if (newTotalPages < props.page) changePage(newTotalPages)
+  emits('change-page-size', pageSize)
+}
+
+const changePage = (page: number): void => {
+  emits('change-page', page)
+}
+</script>
+
+<style scoped lang="scss">
+.pagination {
+  display: inline-flex;
+  align-items: center;
+}
+</style>

package/components/atoms/table/dataGrid/utils/constructDataTable.ts

@@ -1,16 +1,17 @@
-import { UI_I_ColumnKey, UI_I_HeadItem } from '~/components/atoms/table/dataGrid/models/interfaces'
+import {
+  UI_I_ColumnKey,
+  UI_I_HeadItem,
+} from '~/components/atoms/table/dataGrid/models/interfaces'
 
 export const constructColumnKey = (
   key: string,
   text: string,
   show: boolean
-): UI_I_ColumnKey => {
-  return {
-    key,
-    text,
-    show,
-  }
-}
+): UI_I_ColumnKey => ({
+  key,
+  text,
+  show,
+})
 
 export const constructHeadItem = (
   key: string,
@@ -19,15 +20,13 @@ export const constructHeadItem = (
   hasFilter: boolean,
   width: string,
   iconName?: string
-): UI_I_HeadItem => {
-  return {
-    key,
-    text,
-    sortColumn,
-    showFilter: false,
-    hasFilter,
-    filter: '',
-    width,
-    iconName,
-  }
-}
+): UI_I_HeadItem => ({
+  key,
+  text,
+  sortColumn,
+  showFilter: false,
+  hasFilter,
+  filter: '',
+  width,
+  iconName,
+})

package/components/common/diagramMain/modals/viewSettings/Info.vue

@@ -61,16 +61,18 @@ const props = withDefaults(
     fullMode?: boolean
     height?: string
     withCollapse?: boolean
+    selectedTab?: number
   }>(),
   {
     modalTabs: undefined,
     height: undefined,
     viewName: '',
+    selectedTab: 0,
   }
 )
 
 // Selected tab id on the view settings modal
-const selectedTabViewSettings = ref<number>(0)
+const selectedTabViewSettings = ref<number>(props.selectedTab)
 
 // Filtering the selected tab content
 const viewSettingsTabContent = (tab: number): UI_I_ViewSettingsFields[] =>

package/package.json

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