bfg-common 1.4.836 → 1.4.838

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/pages/tasks/Tasks.vue

@@ -94,7 +94,8 @@ onUnmounted(() => {
   flex-direction: column; // TODO надо удалить потом (clr style)
   height: inherit;
   background-color: var(--background-color);
-  padding: 10px 16px 30px;
+  padding: 10px 16px 16px;
+
   &__headline {
     font-family: Inter, sans-serif;
     font-weight: 400;
@@ -103,6 +104,7 @@ onUnmounted(() => {
     color: var(--title-form-first-color);
     margin-bottom: 22px;
   }
+
   :deep(.data-table-header) {
     z-index: 1000 !important; // TODO надо удалить потом (clr style)
   }

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

@@ -49,6 +49,7 @@
     <template #default-actions="{ item }">
       <div class="actions">
         <ui-button
+          :id="`data-table-task-action-${item.data.id}`"
           variant="text"
           :test-id="`data-table-task-action-${item.data.id}`"
           is-without-height

package/components/common/pages/tasks/table/errorInfo/ErrorInfo.vue

@@ -5,7 +5,10 @@
       name="info"
       width="16px"
       height="16px"
-      :class="['info-icon pointer', { show: isShowInfo }]"
+      :class="[
+        'info-icon pointer',
+        { show: isShowInfo, 'in-collapse-content': props.inCollapseContent },
+      ]"
       @click.stop="emits('toggle-error', props.id)"
     />
     <ui-popup-window
@@ -42,11 +45,17 @@
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
-const props = defineProps<{
-  id: string
-  error: string
-  openedError: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    id: string
+    error: string
+    openedError: string
+    inCollapseContent?: boolean
+  }>(),
+  {
+    inCollapseContent: false,
+  }
+)
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -77,7 +86,7 @@ const isShowInfo = computed<boolean>({
       color: var(--close-icon);
     }
     &.show {
-      color: var(--switch-bg-checked-reverse);
+      color: var(--btn-primary-fill-bg-color);
     }
   }
 
@@ -104,4 +113,11 @@ const isShowInfo = computed<boolean>({
     }
   }
 }
+
+:deep(.in-collapse-content) {
+  path,
+  circle {
+    stroke-width: 1.4 !important;
+  }
+}
 </style>

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

@@ -35,6 +35,7 @@
           :id="`${normalizedTaskDetails[2].data.testId}-expand-details`"
           :error="normalizedTaskDetails[2].data.error"
           :opened-error="openedError"
+          in-collapse-content
           @toggle-error="onToggleError"
         />
       </span>

package/components/common/pages/tasks/table/lib/config/config.ts

@@ -175,7 +175,7 @@ export const options: UI_I_DataTableOptions = {
   withActions: true,
   inBlock: true,
   showExport: true,
-  withCollapse: true
+  withCollapse: true,
 }
 
 export const getBodyDataFunc = (
@@ -203,7 +203,7 @@ export const getBodyDataFunc = (
       icon: UI_E_RTaskStatusIcon[task.status],
       chipColor: UI_E_RTaskChipColor[task.status],
       error: task.error,
-      testId: `${task.taskName}-${index}-status`,
+      testId: `${task.taskName.replaceAll(/[\s.]/g, '-')}-${index}-status`,
     }
 
     const zoneNodeParams = taskConfig.zoneNodeFunc(task, nav)