bfg-common 1.5.770 → 1.5.771

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

@@ -1337,21 +1337,33 @@ onUnmounted(() => {
             border-bottom: 1px solid var(--global-border-color);
 
             &.datagrid-selected {
-              & :deep(*) {
-                color: var(--table-active-color);
-              }
+              color: var(--table-active-color);
+              //& :deep(*) {
+              //  color: var(--table-active-color);
+              //}
 
               .datagrid-cell {
                 background-color: var(--row-selected-bg-color);
                 border-bottom: 1px solid var(--global-border-color);
                 position: relative;
                 line-height: 1rem;
+
+                .datagrid-expandable-caret-button {
+                  .datagrid-expandable-caret-icon {
+                    fill: #ffffff;
+                  }
+                }
               }
 
               .datagrid-row-detail {
                 background-color: var(--row-selected-bg-color);
                 border-bottom: 1px solid var(--global-border-color);
               }
+              .datagrid-row:not(.datagrid-selected) {
+                .datagrid-cell {
+                  background-color: unset;
+                }
+              }
             }
 
             .datagrid-cell {
@@ -1560,9 +1572,12 @@ onUnmounted(() => {
               .datagrid-fixed-column {
                 background-color: var(--table-hover-row-background-color);
               }
-              .datagrid-cell {
+              & .datagrid-row-sticky .datagrid-cell {
                 background-color: var(--table-hover-row-background-color);
               }
+              //.datagrid-cell {
+              //  background-color: var(--table-hover-row-background-color);
+              //}
             }
           }
         }

package/components/common/pages/scheduledTasks/table/Table.vue

@@ -18,7 +18,6 @@
       hide-page-size
       off-select-by-row
       server-off
-      @row-detail="onGetRowDetails"
     >
       <template #icon="{ item }">
         <atoms-the-icon :name="item.data.iconClassName" class="icon" />
@@ -27,9 +26,9 @@
         </span>
       </template>
 
-      <template #toggleBlock>
-        <common-pages-scheduled-tasks-table-details-list
-          :details-list="detailsList"
+      <template #toggleBlock="{ item }">
+        <common-pages-scheduled-tasks-table-expand-details
+          :data="item[0].data.expandData"
         />
       </template>
     </atoms-table-data-grid>
@@ -45,8 +44,6 @@ import { itemsPerPage } from '~/components/atoms/table/dataGrid/lib/config/items
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
 import type { UI_I_ScheduledTasksTableItem } from '~/components/common/pages/scheduledTasks/lib/models/interfaces'
-import type { UI_I_ScheduleTableRowDetails } from '~/components/common/pages/scheduledTasks/table/lib/models/interfaces'
-import { detailsListFunc } from '~/components/common/pages/scheduledTasks/table/detailsList/lib/config/tasksRowDetails'
 import * as scheduledTaskTable from '~/components/common/pages/scheduledTasks/table/lib/config/scheduledTasksTable'
 
 const props = defineProps<{
@@ -70,11 +67,6 @@ const headItems = computed<UI_I_HeadItem[]>(() =>
 const bodyItems = computed<UI_I_BodyItem[][]>(() => {
   return scheduledTaskTable.bodyItems(props.dataTable || [])
 })
-
-const detailsList = ref<UI_I_ScheduleTableRowDetails[]>([])
-const onGetRowDetails = (key: number): void => {
-  detailsList.value = detailsListFunc(props.dataTable[key], localization.value)
-}
 </script>
 
 <style lang="scss" scoped>

package/components/common/pages/scheduledTasks/table/expandDetails/ExpandDetails.vue

@@ -0,0 +1,30 @@
+<template>
+  <component :is="currentComponent" :expand-data="normalizedSchedulerDetails" />
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ScheduledTasksTableItem } from '~/components/common/pages/scheduledTasks/lib/models/interfaces'
+import type { UI_I_ScheduleTableRowDetails } from '~/components/common/pages/scheduledTasks/table/lib/models/interfaces'
+import { detailsListFunc } from '~/components/common/pages/scheduledTasks/table/expandDetails/lib/config/expandDetails'
+
+const props = defineProps<{
+  data: UI_I_ScheduledTasksTableItem
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const normalizedSchedulerDetails = computed<UI_I_ScheduleTableRowDetails[]>(
+  () => {
+    return detailsListFunc(props.data, localization.value)
+  }
+)
+</script>

package/components/common/pages/scheduledTasks/table/expandDetails/New.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="expand-details" />
+</template>
+
+<script lang="ts" setup>
+// import type { UI_I_DataTableBodyData } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+
+// const props = defineProps<{
+//   expandData: UI_I_DataTableBodyData[]
+// }>()
+
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+%properties {
+  @include flex($align: center);
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14.52px;
+}
+.expand-details {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 24px;
+  row-gap: 12px;
+  &__row {
+    display: contents;
+    height: 18px;
+  }
+  &__label {
+    @extend %properties;
+    color: #9da6ad;
+    text-transform: capitalize;
+
+    &.events {
+      height: 18px;
+    }
+  }
+  &__value {
+    @extend %properties;
+    color: var(--title-form-first-color);
+    &.disabled {
+      color: var(--table-disabled-btn);
+    }
+    .icon {
+      margin-right: 4px;
+    }
+  }
+  &__status {
+    @include flex($align: center);
+    .ui-chip {
+      width: max-content;
+    }
+  }
+  &__tooltip {
+    margin-left: 6px;
+  }
+}
+</style>

package/components/common/pages/scheduledTasks/table/{detailsList/DetailsList.vue → expandDetails/Old.vue}

@@ -1,7 +1,7 @@
 <template>
   <div class="details-list w-full">
     <div
-      v-for="(item, key) in props.detailsList"
+      v-for="(item, key) in props.expandData"
       :key="key"
       :class="[
         'clr-row details-list__row',
@@ -33,7 +33,7 @@
           <span v-else>{{ item.value }}</span>
         </template>
 
-        <common-pages-scheduled-tasks-table-details-list-table
+        <common-pages-scheduled-tasks-table-expand-details-history-run
           v-else
           :data-table="item.value"
           :total-items="item.value.length"
@@ -46,11 +46,14 @@
 </template>
 
 <script lang="ts" setup>
-import type { UI_I_ScheduleTableRowDetails } from '~/components/common/pages/scheduledTasks/table/lib/models/interfaces'
+import type { UI_I_DataTableBodyData } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+// import type { UI_I_Localization } from '~/node_modules/bfg-common/lib/models/interfaces'
 
 const props = defineProps<{
-  detailsList: UI_I_ScheduleTableRowDetails
+  expandData: UI_I_DataTableBodyData[]
 }>()
+
+// const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
 <style lang="scss" scoped>

package/components/common/pages/scheduledTasks/table/{detailsList/Table.vue → expandDetails/historyRun/HistoryRun.vue}

@@ -1,5 +1,6 @@
 <template>
   <atoms-table-data-grid
+    :selected-row="null"
     :page-size="1"
     :page="1"
     :head-items="headItems"
@@ -7,8 +8,8 @@
     :total-items="props.totalItems"
     :total-pages="props.totalPages"
     :loading="false"
-    test-id="events-table"
-    class="scheduled-tasks-history-runs-table"
+    test-id="scheduled-tasks-history-runs-table"
+    class="history-runs-table"
     off-select-by-row
     hide-footer
   >
@@ -22,10 +23,13 @@
 </template>
 
 <script setup lang="ts">
-import type { UI_I_HeadItem , UI_I_BodyItem} from '~/components/atoms/table/compact/lib/models/interfaces'
+import type {
+  UI_I_HeadItem,
+  UI_I_BodyItem,
+} from '~/components/atoms/table/compact/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_ScheduledTasksTableItem } from '~/components/common/pages/scheduledTasks/lib/models/interfaces'
-import * as historyRunTable from '~/components/common/pages/scheduledTasks/table/detailsList/lib/config/historyRunsTable'
+import * as historyRunTable from '~/components/common/pages/scheduledTasks/table/expandDetails/historyRun/lib/config/historyRunsTable'
 
 const props = defineProps<{
   dataTable: UI_I_ScheduledTasksTableItem['last_5_run']
@@ -44,7 +48,7 @@ const bodyItems = computed<UI_I_BodyItem[][]>(() => {
 </script>
 
 <style lang="scss" scoped>
-.data-table {
+.history-runs-table {
   height: inherit;
   :deep(.datagrid-outer-wrapper) {
     height: inherit;

package/components/common/pages/scheduledTasks/table/{detailsList → expandDetails/historyRun}/lib/config/historyRunsTable.ts

@@ -9,7 +9,7 @@ import {
   UI_E_RecentTaskStatus,
 } from '~/lib/models/store/tasks/enums'
 import type { UI_I_ScheduledTasksTableItem } from '~/components/common/pages/scheduledTasks/lib/models/interfaces'
-import { historyLastRunTableKeys } from '~/components/common/pages/scheduledTasks/table/detailsList/lib/config/tableKeys'
+import { historyLastRunTableKeys } from '~/components/common/pages/scheduledTasks/table/expandDetails/historyRun/lib/config/tableKeys'
 import { schedulerRunStatus } from '~/components/common/pages/scheduledTasks/table/lib/config/schedulerStatus'
 
 const getItems = (
@@ -53,7 +53,9 @@ export const bodyItems = (
   const bodyItems: UI_I_BodyItem[][] = []
   data.forEach((event): void => {
     const startTime = event[historyLastRunTableKeys[0]]
-    const formattedStartTime = $formattedDatetime(+startTime * 1000, { hasSeconds: true })
+    const formattedStartTime = $formattedDatetime(+startTime * 1000, {
+      hasSeconds: true,
+    })
 
     const endTime = event[historyLastRunTableKeys[2]]
     const formattedEndTime =

package/components/common/pages/scheduledTasks/table/{detailsList → expandDetails/historyRun}/lib/config/tableKeys.ts

@@ -1,4 +1,4 @@
-import type { UI_T_HistoryLastRunTableTuple } from '~/components/common/pages/scheduledTasks/table/detailsList/lib/models/types'
+import type { UI_T_HistoryLastRunTableTuple } from '~/components/common/pages/scheduledTasks/table/expandDetails/historyRun/lib/models/types'
 
 export const historyLastRunTableKeys: UI_T_HistoryLastRunTableTuple = [
   'start',

package/components/common/pages/scheduledTasks/table/{detailsList/lib/config/tasksRowDetails.ts → expandDetails/lib/config/expandDetails.ts}

@@ -37,7 +37,9 @@ export const detailsListFunc = (
     {
       id: 5,
       text: localization.common.lastModified,
-      value: $formattedDatetime(data.last_modified * 1000, { hasSeconds: true }),
+      value: $formattedDatetime(data.last_modified * 1000, {
+        hasSeconds: true,
+      }),
       testId: 'scheduled-tasks-last-modified',
     },
 

package/components/common/pages/scheduledTasks/table/lib/config/scheduledTasksTable.ts

@@ -95,6 +95,9 @@ export const bodyItems = (
         key: 'col0',
         text: task[scheduledTaskTableItemsKeys[0]],
         id: task.rid,
+        data: {
+          expandData: task,
+        },
         isShowToggleIcon: true,
         testId: `adapter-table-${key}-row-item`,
       },

package/package.json

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