bfg-common 1.0.0

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

@@ -0,0 +1,204 @@
+<template>
+  <div class="column-switch-wrap flex-align-center relative" @click.stop>
+    <button :id="columnSwitchId" class="column-switch-btn" @click.stop="toggle">
+      <atoms-the-icon
+        name="column-switch"
+        width="16px"
+        height="16px"
+        class="toggle-icon"
+      />
+    </button>
+
+    <div v-show="open" :style="dropdownStyles" class="dropdown-menu">
+      <div class="column-switch">
+        <div class="switch-header">
+          {{ localization.showColumns }}
+        </div>
+        <ul class="switch-content list-unstyled">
+          <li
+            v-for="(item, key) in columnKeysPresent"
+            :key="`${item.key}_${key}`"
+          >
+            <div class="clr-checkbox-wrapper">
+              <input
+                :id="`${props.testId}-${item.id}`"
+                v-model="item.show"
+                :disabled="isLast && item.show"
+                type="checkbox"
+                @change="change($event, key)"
+              />
+              <label :for="item.id" class="clr-control-label">{{
+                item.text
+              }}</label>
+            </div>
+          </li>
+        </ul>
+        <div class="switch-footer">
+          <button
+            :id="`${props.testId}-select-all-button`"
+            class="btn btn-sm btn-link switch-button export-link"
+            @click="selectAll"
+          >
+            {{ localization.selectAll }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_HTMLSelectElement } from '~/models/interfaces'
+import { UI_I_ColumnKey } from '~/components/atoms/table/dataGrid/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    columnKeys: UI_I_ColumnKey[]
+    testId?: string
+  }>(),
+  { testId: 'ui-data-grid-column-switch' }
+)
+const emits = defineEmits<{
+  (event: 'update:column-keys', value: UI_I_ColumnKey[]): void
+}>()
+
+const columnKeysPresent = computed<UI_I_ColumnKey[]>(() => {
+  return props.columnKeys.map((item): UI_I_ColumnKey => {
+    return { ...item, id: useUniqueId() }
+  })
+})
+
+const localization = computed(() => useLocal())
+
+const columnSwitchId = ref('')
+
+const isLast = computed<boolean>(
+  () => props.columnKeys.filter((columnKey) => columnKey.show).length === 1
+)
+
+const change = (e: UI_I_HTMLSelectElement, key: number): void => {
+  const newColumnKeys = props.columnKeys.map((columnKey, i) => {
+    if (i !== key) {
+      return columnKey
+    }
+
+    columnKey.show = e.target.checked
+    return columnKey
+  })
+  emits('update:column-keys', newColumnKeys)
+}
+const selectAll = (): void => {
+  const newColumnKeys = props.columnKeys.map((columnKey) => {
+    columnKey.show = true
+    return columnKey
+  })
+  emits('update:column-keys', newColumnKeys)
+}
+
+const windowClick = () => {
+  hide()
+}
+onMounted(() => {
+  window.addEventListener('click', windowClick)
+  columnSwitchId.value = `column-switch-${useUniqueId()}`
+  setDropdownStyle()
+})
+onUnmounted(() => {
+  window.removeEventListener('click', windowClick)
+})
+
+const open = ref(false)
+const hide = (): void => {
+  open.value = false
+}
+const toggle = (): void => {
+  open.value = !open.value
+  if (!open.value) {
+    return
+  }
+
+  setDropdownStyle()
+}
+
+const dropdownStyles = ref({})
+const setDropdownStyle = (): void => {
+  const elem = document.getElementById(columnSwitchId.value)
+  if (!elem) {
+    setTimeout(() => setDropdownStyle(), 0)
+    return
+  }
+  const { x, y } = elem.getBoundingClientRect()
+
+  dropdownStyles.value = {
+    top: `${y - 10}px`,
+    left: `${x}px`,
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.column-switch-wrap {
+  .column-switch-btn {
+    cursor: pointer;
+    padding: 0;
+    border: 0;
+    display: flex;
+    background-color: transparent;
+
+    .toggle-icon {
+      fill: #575757;
+    }
+    &:hover {
+      .toggle-icon {
+        fill: #0079b8;
+      }
+    }
+  }
+
+  .dropdown-menu {
+    position: fixed;
+    z-index: 1000;
+    visibility: unset;
+    transform: translateY(-100%);
+    background-color: var(--block-view-bg-color);
+    border-color: var(--global-border-color);
+
+    .column-switch {
+      border-style: none;
+      box-shadow: none;
+      height: 85%;
+      max-height: calc(15rem + 100px);
+      padding: 18px;
+      width: 250px;
+      display: flex;
+      flex-direction: column;
+
+      .switch-header {
+        font-size: 16px;
+        color: #565656;
+        padding-bottom: 12px;
+      }
+
+      .switch-content {
+        overflow-y: auto;
+        .clr-control-label {
+          white-space: normal;
+        }
+      }
+
+      .switch-footer {
+        button {
+          padding: 0;
+          margin: 0;
+          font-size: 12px;
+          letter-spacing: 1px;
+          color: #0079b8;
+          text-transform: uppercase;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,189 @@
+<template>
+  <div v-show="props.totalPages > 1" class="pagination-list">
+    <button
+      :id="`${props.testId}-first-button`"
+      class="pagination-first"
+      :disabled="currentPage === 1"
+      @click="changeCurrentPage(1)"
+    >
+      <atoms-the-icon
+        name="step-forward"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+    <button
+      :id="`${props.testId}-prev-button`"
+      class="pagination-previous"
+      :disabled="currentPage === 1"
+      @click="changeCurrentPage(currentPage - 1)"
+    >
+      <atoms-the-icon
+        name="angle"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+
+    <input
+      :id="`${props.testId}-page-input`"
+      v-model="currentPageLazy"
+      type="text"
+      class="pagination-current clr-input"
+      @blur="changeCurrentPageManual"
+    />
+    <span class="divider">/</span>
+    <span class="total-pages">{{ props.totalPages }}</span>
+
+    <button
+      :id="`${props.testId}-next-button`"
+      class="pagination-next"
+      :disabled="currentPage === props.totalPages"
+      @click="changeCurrentPage(currentPage + 1)"
+    >
+      <atoms-the-icon
+        name="angle"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+    <button
+      :id="`${props.testId}-last-button`"
+      class="pagination-last"
+      :disabled="currentPage === props.totalPages"
+      @click="changeCurrentPage(props.totalPages)"
+    >
+      <atoms-the-icon
+        name="step-forward"
+        class="pagination-icon"
+        width="14px"
+        height="14px"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_HTMLSelectElement } from '~/models/interfaces'
+const props = withDefaults(
+  defineProps<{
+    page: number
+    totalItems: number
+    totalPages: number
+    pageSize: number
+    testId?: string
+  }>(),
+  { testId: 'ui-data-grid-page' }
+)
+const emits = defineEmits<{
+  (event: 'change', num: number): void
+}>()
+
+const currentPage = ref(1)
+const currentPageLazy = ref(1)
+const changePageAndLazy = (page: number): void => {
+  currentPage.value = currentPageLazy.value = page
+  emits('change', page)
+}
+// const totalPages = computed(() => {
+//   return Math.ceil(props.totalItems / props.pageSize) || 1
+// })
+// watch(() => props.totalPages, (val) => {
+//   if (val < currentPage.value) {
+//     changePageAndLazy(val)
+//   }
+// })
+watch(
+  () => props.page,
+  (val) => {
+    changePageAndLazy(Math.min(props.totalPages, val))
+  },
+  { immediate: true }
+)
+const changeCurrentPage = (page: number): void => {
+  if (page > props.totalPages || page < 1) return
+  changePageAndLazy(page)
+}
+const changeCurrentPageManual = (e: UI_I_HTMLSelectElement): void => {
+  const newVal = parseInt(e.target.value)
+
+  if (typeof newVal !== 'number' || isNaN(newVal)) {
+    currentPageLazy.value = currentPage.value
+    return
+  }
+  changePageAndLazy(
+    newVal > props.totalPages ? props.totalPages : newVal < 1 ? 1 : newVal
+  )
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins';
+.pagination-list {
+  @include flex($align: center);
+  margin-left: 24px;
+
+  button {
+    display: flex;
+
+    &:disabled {
+      cursor: default;
+      svg {
+        fill: #959595;
+      }
+    }
+  }
+
+  .pagination-first {
+    margin-right: 12px;
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+  .pagination-previous {
+    margin-right: 12px;
+    background-image: none;
+
+    svg {
+      transform: rotate(-90deg);
+    }
+  }
+  .pagination-last {
+    margin-left: 12px;
+  }
+  .pagination-next {
+    margin-left: 12px;
+    background-image: none;
+
+    svg {
+      transform: rotate(90deg);
+    }
+  }
+  .pagination-current {
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    min-width: 24px;
+    transition: none !important;
+    width: 35px;
+    @include text($fs: 11px, $fw: normal, $align: center);
+
+    &:focus {
+      background: none;
+      border: 1px solid #46afd9;
+      box-shadow: 0 0 1px #46afd9;
+    }
+  }
+  .divider {
+    margin: 0 4px;
+  }
+  .total-pages {
+    margin: 0;
+  }
+  .pagination-icon {
+    fill: var(--global-text-color3);
+  }
+}
+</style>

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

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

package/components/atoms/table/dataGrid/config/itemsPerPage.ts

@@ -0,0 +1,20 @@
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+export const itemsPerPage: UI_I_OptionItem[] = [
+  {
+    text: '35',
+    value: 35,
+  },
+  {
+    text: '50',
+    value: 50,
+  },
+  {
+    text: '100',
+    value: 100,
+  },
+  {
+    text: '200',
+    value: 200,
+  },
+]

package/components/atoms/table/dataGrid/models/interfaces.ts

@@ -0,0 +1,24 @@
+export interface UI_I_BodyItem {
+  key: string
+  text: string | number
+  id: number | string
+  selected?: boolean
+  data?: any
+}
+export interface UI_I_HeadItem {
+  key: string
+  text: string
+  sortColumn: string
+  showFilter: boolean
+  hasFilter: boolean
+  filter: string
+  width: string
+  iconName?: string
+}
+
+export interface UI_I_ColumnKey {
+  key: string
+  text: string
+  show: boolean
+  id?: number
+}

package/components/atoms/table/dataGrid/models/types.ts

@@ -0,0 +1,5 @@
+import { UI_I_ColumnKey } from '~/components/atoms/table/dataGrid/models/interfaces'
+
+export type UI_T_SelectedRow = (number | string)[] | number | string | null
+export type UI_T_ColumnKeys = UI_I_ColumnKey[] | undefined
+export type UI_T_DataGridType = 'radio' | 'checkbox'

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

@@ -0,0 +1,33 @@
+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,
+  }
+}
+
+export const constructHeadItem = (
+  key: string,
+  text: string,
+  sortColumn: string,
+  hasFilter: boolean,
+  width: string,
+  iconName?: string
+): UI_I_HeadItem => {
+  return {
+    key,
+    text,
+    sortColumn,
+    showFilter: false,
+    hasFilter,
+    filter: '',
+    width,
+    iconName,
+  }
+}

package/components/atoms/table/info/Info.vue

@@ -0,0 +1,60 @@
+<template>
+  <table class="table table-vertical">
+    <tbody>
+      <tr v-for="item in list" :key="item.id">
+        <th
+          scope="row"
+          :class="['vm-name-label', item.isProperty && 'hard-disk-properties']"
+        >
+          {{ item.label }}
+        </th>
+        <td class="vm-name">
+          <slot :name="item.key">
+            {{ item.value }}
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_TableInfoItem } from '~/components/atoms/table/info/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_TableInfoItem[]
+}>()
+
+const list = computed<UI_I_TableInfoItem[]>(() => {
+  return props.items.map((item) => {
+    return {
+      ...item,
+      id: Symbol(''),
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.dark-theme {
+  table {
+    border-color: #495865;
+
+    &.table-vertical th:first-child,
+    &.table-vertical td {
+      background-color: #29414e;
+      border-color: #495865;
+    }
+  }
+}
+
+table {
+  .vm-name-label {
+    width: 20%;
+
+    &.hard-disk-properties {
+      padding-left: 25px;
+    }
+  }
+}
+</style>

package/components/atoms/table/info/models/interfaces.ts

@@ -0,0 +1,6 @@
+export interface UI_I_TableInfoItem {
+  label: string
+  value: any
+  isProperty?: boolean
+  key?: string
+}