bfg-common 1.5.43 → 1.5.45

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/shortcuts/block/BlockNew.vue

@@ -1,96 +1,96 @@
-<template>
-  <ui-widget
-    :class="['category-block-item', { disabled: props.item.disabled }]"
-  >
-    <nuxt-link
-      class="unit"
-      :to="!props.item.disabled && navigate"
-      :title="
-        props.item.disabled
-          ? localization.common.inDevelopment
-          : props.item.navigateTo
-      "
-      :data-id="props.testId"
-      @click="emits('change-navigation')"
-      @contextmenu="emits('change-navigation')"
-    >
-      <span class="unit-icon">
-        <ui-icon :name="props.item.iconName" width="28" height="28"></ui-icon>
-      </span>
-      <div class="unit-text" :title="props.item.text">
-        {{ props.item.text }}
-      </div>
-    </nuxt-link>
-  </ui-widget>
-</template>
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
-
-const props = defineProps<{
-  item: UI_I_BlockItem
-  testId?: string
-}>()
-const emits = defineEmits<{
-  (event: 'change-navigation'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const navigate = computed<string>(() => '/' + props.item.navigateTo)
-</script>
-
-<style>
-:root {
-  --shortcut-item-hover-bg: #e9ebed33;
-}
-:root.dark-theme {
-  --shortcut-item-hover-bg: #e9ebed08;
-}
-</style>
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins';
-.category-block-item {
-  max-width: 176px;
-  min-height: 110px;
-
-  &.disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .unit {
-    @include flex($dir: column, $just: space-between);
-    width: 100%;
-    height: 100%;
-    text-decoration-line: none;
-
-    &-icon {
-      min-width: 28px;
-      min-height: 28px;
-      display: inline-block;
-      color: var(--close-icon);
-    }
-    &-text {
-      color: #9da6ad;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 16.94px;
-    }
-  }
-
-  &:hover:not(.disabled) {
-    background: var(--shortcut-item-hover-bg);
-    cursor: pointer;
-    .unit {
-      &-icon {
-        color: var(--widget-text-hover);
-      }
-
-      &-text {
-        color: var(--widget-text-hover);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <ui-widget
+    :class="['category-block-item', { disabled: props.item.disabled }]"
+  >
+    <nuxt-link
+      class="unit"
+      :to="!props.item.disabled && navigate"
+      :title="
+        props.item.disabled
+          ? localization.common.inDevelopment
+          : props.item.navigateTo
+      "
+      :data-id="props.testId"
+      @click="emits('change-navigation')"
+      @contextmenu="emits('change-navigation')"
+    >
+      <span class="unit-icon">
+        <ui-icon :name="props.item.iconName" width="28" height="28"></ui-icon>
+      </span>
+      <div class="unit-text" :title="props.item.text">
+        {{ props.item.text }}
+      </div>
+    </nuxt-link>
+  </ui-widget>
+</template>
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_BlockItem } from '~/components/common/pages/shortcuts/lib/models/interfaces'
+
+const props = defineProps<{
+  item: UI_I_BlockItem
+  testId?: string
+}>()
+const emits = defineEmits<{
+  (event: 'change-navigation'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const navigate = computed<string>(() => '/' + props.item.navigateTo)
+</script>
+
+<style>
+:root {
+  --shortcut-item-hover-bg: #e9ebed33;
+}
+:root.dark-theme {
+  --shortcut-item-hover-bg: #e9ebed08;
+}
+</style>
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins';
+.category-block-item {
+  max-width: 176px;
+  min-height: 110px;
+
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .unit {
+    @include flex($dir: column, $just: space-between);
+    width: 100%;
+    height: 100%;
+    text-decoration-line: none;
+
+    &-icon {
+      min-width: 28px;
+      min-height: 28px;
+      display: inline-block;
+      color: var(--close-icon);
+    }
+    &-text {
+      color: #9da6ad;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.94px;
+    }
+  }
+
+  &:hover:not(.disabled) {
+    background: var(--shortcut-item-hover-bg);
+    cursor: pointer;
+    .unit {
+      &-icon {
+        color: var(--widget-text-hover);
+      }
+
+      &-text {
+        color: var(--widget-text-hover);
+      }
+    }
+  }
+}
+</style>