bfg-common 1.4.823 → 1.4.825

package/components/common/pages/packages/Packages.vue

@@ -1,208 +1,208 @@
-<template>
-  <div class="packages-page">
-    <common-headline :headline="localization.common.softwarePackages" />
-
-    <div class="grid-toolbar">
-      <common-tools-actions
-        test-id="packages-tools-panel"
-        :actions="actions"
-        @click="onClickAction"
-      >
-        <template #icon="{ data }">
-          <span
-            v-if="data.type === 'updates'"
-            class="vx-icon-import icon"
-          ></span>
-          <span
-            v-if="data.type === 'refresh'"
-            class="vsphere-icon-reset icon"
-          ></span>
-        </template>
-      </common-tools-actions>
-    </div>
-
-    <common-pages-packages-table-view
-      v-model="selectedRow"
-      :data-table="props.packagesData?.items || []"
-      :total-items="props.packagesData?.total_items || 0"
-      :total-pages="props.packagesData?.total_pages || 1"
-      :pagination="pagination"
-      :loading="props.loading"
-      @pagination="onPagination"
-      @sort="onSort"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_Pagination,
-} from '~/lib/models/table/interfaces'
-import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
-import type { UI_I_Button } from '~/components/common/tools/lib/models/interfaces'
-import type { UI_T_Action } from '~/components/common/pages/packages/lib/models/types'
-import { actionsFunc } from '~/components/common/pages/packages/lib/config/actions'
-
-
-const selectedRow = defineModel<UI_T_SelectedRow>('selectedRow')
-const pagination = defineModel<UI_I_Pagination>('pagination')
-
-const props = defineProps<{
-  packagesData: any | null
-  loading: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'sort', value: string): void
-  (event: 'pagination', value: UI_I_Pagination): void
-  (event: 'action', value: [UI_T_Action, FormData | null]): void
-  (event: 'refresh'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const disabledActions = ref<string[]>([
-  'enable',
-  'disable',
-  'on',
-  'off',
-  'remove',
-])
-
-const actions = computed<UI_I_Button[]>(() =>
-  actionsFunc(localization.value, disabledActions.value)
-)
-
-const onPagination = (value: UI_I_Pagination): void => {
-  emits('pagination', value)
-}
-const onSort = (value: string): void => {
-  emits('sort', value)
-}
-
-const checkAllActions = (): void => {
-  if (typeof selectedRow.value !== 'number') return
-
-  const selectedPackage = props.packagesData?.items[selectedRow.value]
-  if (!selectedPackage) return
-
-  disabledActions.value = []
-  if (window.location.hostname === 'dev-pn.aobfg.ru') return
-
-  if (selectedPackage.not_runnable || selectedPackage.required) {
-    disabledActions.value = ['enable', 'disable', 'on', 'off']
-  }
-
-  if (selectedPackage.required) {
-    disabledActions.value = ['remove']
-  }
-}
-watch(
-  selectedRow,
-  () => {
-    checkAllActions()
-  },
-  { immediate: true }
-)
-
-const onAction = async (
-  action: UI_T_Action,
-  file: FormData | null = null
-): Promise<void> => {
-  emits('action', [action, file])
-}
-const onRefresh = (): void => {
-  emits('refresh')
-}
-const onChangeFiles = (event: Event | undefined): void => {
-  if (!event) return
-
-  const target = event.target as HTMLInputElement
-  if (!target.files) return
-
-  const file = target.files[0]
-
-  const formData = new FormData()
-  formData.append('package', file)
-  onAction('update', formData)
-}
-
-const onClickAction = (type: string, file?: Event): void => {
-  switch (type) {
-    case 'updates':
-      onChangeFiles(file)
-      break
-    case 'refresh':
-      onRefresh()
-      break
-    case 'enable':
-      onAction('enable')
-      break
-    case 'disable':
-      onAction('disable')
-      break
-    case 'on':
-      onAction('on')
-      break
-    case 'off':
-      onAction('off')
-      break
-    case 'remove':
-      onAction('remove')
-      break
-  }
-}
-</script>
-
-<style>
-:root {
-  --action-link-container-bg-color: #e9f6fd;
-  --vui-action-label-color: #333;
-}
-:root.dark-theme {
-  --action-link-container-bg-color: #29414e;
-  --vui-action-label-color: #adbbc4;
-}
-</style>
-
-<style lang="scss" scoped>
-@import '~/assets/scss/common/mixins.scss';
-
-.packages-page {
-  @include flex($dir: column);
-  height: 100%;
-
-  .grid-toolbar {
-    .icon {
-      display: block;
-      width: 16px;
-      height: 16px;
-      min-width: 16px;
-      min-height: 16px;
-      background-size: 100% auto;
-      margin-right: 5px;
-    }
-
-    :deep(.btn) {
-      text-transform: none;
-      font-size: 13px;
-      font-weight: normal;
-      color: var(--vui-action-label-color);
-      min-width: unset;
-      padding: 4px;
-      line-height: normal;
-      margin-right: 4px;
-      display: flex;
-      align-items: center;
-      letter-spacing: normal;
-
-      &:not(:disabled):hover {
-        color: var(--vui-action-label-color);
-        text-decoration: none;
-        background-color: var(--action-link-container-bg-color);
-        border: 1px solid #c7e9ff;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="packages-page">
+    <common-headline :headline="localization.common.softwarePackages" />
+
+    <div class="grid-toolbar">
+      <common-tools-actions
+        test-id="packages-tools-panel"
+        :actions="actions"
+        @click="onClickAction"
+      >
+        <template #icon="{ data }">
+          <span
+            v-if="data.type === 'updates'"
+            class="vx-icon-import icon"
+          ></span>
+          <span
+            v-if="data.type === 'refresh'"
+            class="vsphere-icon-reset icon"
+          ></span>
+        </template>
+      </common-tools-actions>
+    </div>
+
+    <common-pages-packages-table-view
+      v-model="selectedRow"
+      :data-table="props.packagesData?.items || []"
+      :total-items="props.packagesData?.total_items || 0"
+      :total-pages="props.packagesData?.total_pages || 1"
+      :pagination="pagination"
+      :loading="props.loading"
+      @pagination="onPagination"
+      @sort="onSort"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Pagination,
+} from '~/lib/models/table/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
+import type { UI_I_Button } from '~/components/common/tools/lib/models/interfaces'
+import type { UI_T_Action } from '~/components/common/pages/packages/lib/models/types'
+import { actionsFunc } from '~/components/common/pages/packages/lib/config/actions'
+
+
+const selectedRow = defineModel<UI_T_SelectedRow>('selectedRow')
+const pagination = defineModel<UI_I_Pagination>('pagination')
+
+const props = defineProps<{
+  packagesData: any | null
+  loading: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'sort', value: string): void
+  (event: 'pagination', value: UI_I_Pagination): void
+  (event: 'action', value: [UI_T_Action, FormData | null]): void
+  (event: 'refresh'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const disabledActions = ref<string[]>([
+  'enable',
+  'disable',
+  'on',
+  'off',
+  'remove',
+])
+
+const actions = computed<UI_I_Button[]>(() =>
+  actionsFunc(localization.value, disabledActions.value)
+)
+
+const onPagination = (value: UI_I_Pagination): void => {
+  emits('pagination', value)
+}
+const onSort = (value: string): void => {
+  emits('sort', value)
+}
+
+const checkAllActions = (): void => {
+  if (typeof selectedRow.value !== 'number') return
+
+  const selectedPackage = props.packagesData?.items[selectedRow.value]
+  if (!selectedPackage) return
+
+  disabledActions.value = []
+  if (window.location.hostname === 'dev-pn.aobfg.ru') return
+
+  if (selectedPackage.not_runnable || selectedPackage.required) {
+    disabledActions.value = ['enable', 'disable', 'on', 'off']
+  }
+
+  if (selectedPackage.required) {
+    disabledActions.value = ['remove']
+  }
+}
+watch(
+  selectedRow,
+  () => {
+    checkAllActions()
+  },
+  { immediate: true }
+)
+
+const onAction = async (
+  action: UI_T_Action,
+  file: FormData | null = null
+): Promise<void> => {
+  emits('action', [action, file])
+}
+const onRefresh = (): void => {
+  emits('refresh')
+}
+const onChangeFiles = (event: Event | undefined): void => {
+  if (!event) return
+
+  const target = event.target as HTMLInputElement
+  if (!target.files) return
+
+  const file = target.files[0]
+
+  const formData = new FormData()
+  formData.append('package', file)
+  onAction('update', formData)
+}
+
+const onClickAction = (type: string, file?: Event): void => {
+  switch (type) {
+    case 'updates':
+      onChangeFiles(file)
+      break
+    case 'refresh':
+      onRefresh()
+      break
+    case 'enable':
+      onAction('enable')
+      break
+    case 'disable':
+      onAction('disable')
+      break
+    case 'on':
+      onAction('on')
+      break
+    case 'off':
+      onAction('off')
+      break
+    case 'remove':
+      onAction('remove')
+      break
+  }
+}
+</script>
+
+<style>
+:root {
+  --action-link-container-bg-color: #e9f6fd;
+  --vui-action-label-color: #333;
+}
+:root.dark-theme {
+  --action-link-container-bg-color: #29414e;
+  --vui-action-label-color: #adbbc4;
+}
+</style>
+
+<style lang="scss" scoped>
+@import '~/assets/scss/common/mixins.scss';
+
+.packages-page {
+  @include flex($dir: column);
+  height: 100%;
+
+  .grid-toolbar {
+    .icon {
+      display: block;
+      width: 16px;
+      height: 16px;
+      min-width: 16px;
+      min-height: 16px;
+      background-size: 100% auto;
+      margin-right: 5px;
+    }
+
+    :deep(.btn) {
+      text-transform: none;
+      font-size: 13px;
+      font-weight: normal;
+      color: var(--vui-action-label-color);
+      min-width: unset;
+      padding: 4px;
+      line-height: normal;
+      margin-right: 4px;
+      display: flex;
+      align-items: center;
+      letter-spacing: normal;
+
+      &:not(:disabled):hover {
+        color: var(--vui-action-label-color);
+        text-decoration: none;
+        background-color: var(--action-link-container-bg-color);
+        border: 1px solid #c7e9ff;
+      }
+    }
+  }
+}
+</style>

package/components/common/portlets/customAttributes/Portlet.vue

@@ -8,9 +8,10 @@
       :dragged-any="props.draggedAny"
       :is-open="props.isOpen"
       :portlet-id="props.portletId"
+      :is-loading="props.isLoading"
       @toggle="onTogglePortlet"
     >
-      <template #portletBody>
+      <template #portletBody="{ isLoadingBody }">
         <ui-data-table
           test-id="attributes-portlet-table"
           :data="data"
@@ -18,6 +19,8 @@
           server-off
           :default-layout="false"
           size="sm"
+          :loading="isLoadingBody"
+          :skeleton="skeletonData"
         >
           <template #notFound>
             <div
@@ -149,9 +152,10 @@
           </template>
         </ui-data-table>
       </template>
-      <template #portletFooter>
+      <template #portletFooter="{ isLoadingFooter }">
         <div class="footer">
           <ui-button
+            v-if="!isLoadingFooter"
             test-id="add-new-attribute-button"
             variant="text"
             is-without-height
@@ -161,6 +165,7 @@
           >
             {{ localization.zabbix.addNew }}...
           </ui-button>
+          <ui-portlet-skeleton-footer v-else />
         </div>
       </template>
     </ui-portlet>
@@ -197,6 +202,7 @@ import {
   createRow,
   makeNewAttributeCreateActionRowFunc,
   availableTypesFunc,
+  skeletonData,
 } from '~/components/common/portlets/customAttributes/lib/config/config'
 
 const props = defineProps<{
@@ -207,6 +213,7 @@ const props = defineProps<{
   selectedItemName: string
   type: UI_I_Dropdown
   bodyItems: UI_I_DataTableBody[]
+  isLoading: boolean
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/portlets/customAttributes/lib/config/config.ts

@@ -2,6 +2,7 @@ import type {
   UI_I_DataTableOptions,
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
+  UI_I_DataTableSkeleton,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
@@ -136,3 +137,9 @@ export const availableTypesFunc = (type: UI_I_Dropdown): UI_I_Dropdown[] => [
   },
   type,
 ]
+
+export const skeletonData: UI_I_DataTableSkeleton = {
+  columnsCount: 3,
+  withoutPagination: true,
+  withoutHeader: true,
+}

package/components/common/portlets/tag/Portlet.vue

@@ -8,9 +8,10 @@
       :dragged-any="props.draggedAny"
       :is-open="props.isOpen"
       :portlet-id="props.portletId"
+      :is-loading="props.isLoading"
       @toggle="onTogglePortlet"
     >
-      <template #portletBody>
+      <template #portletBody="{ isLoadingBody }">
         <ui-data-table
           test-id="tags-portlet-table"
           :data="data"
@@ -18,6 +19,8 @@
           server-off
           :default-layout="false"
           size="sm"
+          :loading="isLoadingBody"
+          :skeleton="skeletonData"
         >
           <!--          :loading="loading"-->
           <template #icon="{ item }">
@@ -64,9 +67,10 @@
           </template>
         </ui-data-table>
       </template>
-      <template #portletFooter>
+      <template #portletFooter="{ isLoadingFooter }">
         <div class="footer">
           <ui-button
+            v-if="!isLoadingFooter"
             test-id="show-assign-new-tag-modal"
             variant="text"
             is-without-height
@@ -75,6 +79,7 @@
           >
             {{ localization.common.assignNew }}...
           </ui-button>
+          <ui-portlet-skeleton-footer v-else />
         </div>
       </template>
     </ui-portlet>
@@ -120,6 +125,7 @@ import {
   tagTableHeaderOptions,
   tagTableHeaderDataFunc,
   tagsAssignBodyItemsTemporary,
+  skeletonData,
 } from '~/components/common/portlets/tag/lib/config/config'
 
 const props = defineProps<{
@@ -129,6 +135,7 @@ const props = defineProps<{
   draggedAny?: boolean
   selectedItemName: string
   bodyItems: UI_I_DataTableBody[]
+  isLoading: boolean
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/portlets/tag/lib/config/config.ts

@@ -2,6 +2,7 @@ import type {
   UI_I_DataTableOptions,
   UI_I_DataTableBody,
   UI_I_DataTableHeader,
+  UI_I_DataTableSkeleton,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
@@ -199,3 +200,9 @@ export const tagsAssignBodyItemsTemporary: UI_I_DataTableBody[] = [
     ],
   },
 ]
+
+export const skeletonData: UI_I_DataTableSkeleton = {
+  columnsCount: 3,
+  withoutPagination: true,
+  withoutHeader: true,
+}