bfg-common 1.4.358 → 1.4.359

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

@@ -0,0 +1,137 @@
+import type {
+  UI_I_DataTableOptions,
+  UI_I_DataTableHeader,
+  UI_I_DataTableBody,
+} 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'
+import type { UI_I_NewAttributeData } from '~/components/common/portlets/customAttributes/lib/models/interfaces'
+
+export const attributeTableHeaderOptions: UI_I_DataTableOptions = {
+  perPageOptions: [],
+  selectType: 'checkbox',
+  showPagination: false,
+  showPageInfo: false,
+  isSortable: true,
+  server: false,
+  isResizable: false,
+  showSearch: false,
+  showColumnManager: false,
+  isSelectable: false,
+}
+
+export const attributeTableHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 0,
+    colName: 'Attribute',
+    text: localization.common.attribute,
+    isSortable: true,
+    sort: 'asc',
+    width: '31%',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 1,
+    colName: 'value',
+    text: localization.common.value,
+    isSortable: true,
+    sort: 'asc',
+    width: '31%',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 2,
+    colName: 'type',
+    text: localization.common.type,
+    isSortable: true,
+    sort: 'asc',
+    width: '31%',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 3,
+    colName: '',
+    text: '',
+    width: '7%',
+    show: true,
+  },
+]
+
+export const createRow = (
+  row: number,
+  data: UI_I_NewAttributeData
+): UI_I_DataTableBody => ({
+  row,
+  isSelected: false,
+  data: [
+    { col: 0, text: data.attribute },
+    { col: 1, text: data.value },
+    { col: 2, text: data.type },
+    {
+      col: 3,
+      text: '',
+      key: 'icon',
+      data: {
+        type: 'options',
+        icon: 'vertical-dotes',
+        row,
+      },
+    },
+  ],
+})
+
+export const makeNewAttributeCreateActionRowFunc = (
+  row: number
+): UI_I_DataTableBody => ({
+  row,
+  isSelected: false,
+  actionRow: true,
+  data: [
+    {
+      col: 0,
+      text: '',
+      key: 'icon',
+      data: {
+        type: 'attribute',
+      },
+    },
+    {
+      col: 1,
+      text: '',
+      key: 'icon',
+      data: {
+        type: 'value',
+      },
+    },
+    {
+      col: 2,
+      text: '',
+      key: 'icon',
+      data: {
+        type: 'type',
+      },
+    },
+    {
+      col: 3,
+      text: '',
+      key: 'icon',
+      data: {
+        type: 'actions',
+      },
+    },
+  ],
+})
+
+export const availableTypesFunc = (type: UI_I_Dropdown): UI_I_Dropdown[] => [
+  {
+    text: 'Global',
+    value: 'Global',
+    selected: false,
+  },
+  type,
+]

package/components/common/portlets/customAttributes/lib/models/interfaces.ts

@@ -0,0 +1,5 @@
+export interface UI_I_NewAttributeData {
+  attribute: string
+  value: string
+  type: string
+}

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

@@ -116,7 +116,7 @@ import type {
   UI_I_Localization,
 } from '~/lib/models/interfaces'
 import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-import type { I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
+import type { UI_I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
 import {
   createCategoryData,
   createCategoryTypes,
@@ -128,7 +128,7 @@ const props = defineProps<{
 
 const emits = defineEmits<{
   (event: 'cancel'): void
-  (event: 'create', value: I_CreateCategoryData): void
+  (event: 'create', value: UI_I_CreateCategoryData): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -138,7 +138,7 @@ const createCategoryTexts = computed<UI_I_ModalTexts>(() => ({
   button2: localization.value.common.create,
 }))
 
-const data = ref<I_CreateCategoryData>(useDeepCopy(createCategoryData))
+const data = ref<UI_I_CreateCategoryData>(useDeepCopy(createCategoryData))
 
 const isAllSelected = computed<boolean>(() => {
   let result = true

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

@@ -3,7 +3,7 @@
     <ui-portlet
       class="tags"
       test-id="tags-portlet"
-      :title="localization.common.assignedTags"
+      :title="portletTitle"
       :dragged="props.dragged"
       :dragged-any="props.draggedAny"
       :is-open="props.isOpen"
@@ -45,7 +45,7 @@
                     data-id="view-tag-details-action"
                     @click="onShowDetails(item.data.row)"
                   >
-                    <ui-icon name="details" width="16" height="16" />
+                    <ui-icon name="view-details" width="16" height="16" />
                     <span>{{ localization.common.viewDetails }}</span>
                   </div>
                   <div
@@ -98,7 +98,6 @@
       @cancel="onHideAssignModal"
       @assign="onAssignSelectedTags"
     />
-
   </div>
 </template>
 
@@ -114,7 +113,7 @@ import type {
   UI_I_DataTableBody,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-import type { I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
+import type { UI_I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
 import {
   tagTableHeaderOptions,
   tagTableHeaderDataFunc,
@@ -127,7 +126,7 @@ const props = defineProps<{
   isOpen?: boolean
   draggedAny?: boolean
   selectedItemName: string
-  objectSummary: any
+  bodyItems: UI_I_DataTableBody[]
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -178,6 +177,13 @@ const removeTagDialogTexts = computed<UI_I_ModalTexts>(() => ({
 
 const onRemoveTag = (): void => {
   onHideRemoveDialog()
+
+  const removeItem = tagsBodyItems.value.find(
+    (row) => row.row === tagIdForRemove.value
+  )
+  if (!removeItem) return
+
+  emits('remove-tag', removeItem)
   tagsBodyItems.value = tagsBodyItems.value.filter(
     (row) => row.row !== tagIdForRemove.value
   )
@@ -200,41 +206,13 @@ const tagsHeadItems = computed<UI_I_DataTableHeader[]>(() =>
 const tagsBodyItems = ref<UI_I_DataTableBody[]>([])
 
 watch(
-  () => props.objectSummary,
-  (newValue: any) => {
-    let result: UI_I_DataTableBody[] = []
-    const attr = newValue.portlets?.find((portlet) => portlet.kind === 2)
-
-    if (attr) {
-      const rows = []
-
-      for (const key in attr.rows) {
-        // @ts-ignore
-        rows.push({
-          row: +key,
-          data: [
-            { col: 0, text: attr.rows[key][0] },
-            { col: 1, text: attr.rows[key][1] },
-            { col: 2, text: attr.rows[key][2] },
-            {
-              col: 3,
-              text: '',
-              key: 'icon',
-              data: {
-                icon: 'vertical-dotes',
-                row: +key,
-              },
-            },
-          ],
-        })
-      }
-      result = rows
-    }
-
-    tagsBodyItems.value = result
+  () => props.bodyItems,
+  (newValue: UI_I_DataTableBody[]) => {
+    tagsBodyItems.value = newValue
   },
   { deep: true, immediate: true }
 )
+
 const tagsAssignBodyItems = ref<UI_I_DataTableBody[]>(
   useDeepCopy(tagsAssignBodyItemsTemporary)
 )
@@ -285,7 +263,9 @@ const onAssignSelectedTags = async (
   data: UI_I_DataTableBody[]
 ): Promise<void> => {
   if (data.length > 0) {
-    const sortedIds = tagsBodyItems.value.map((row: UI_I_DataTableBody) => Number(row.row)).sort()
+    const sortedIds = tagsBodyItems.value
+      .map((row: UI_I_DataTableBody) => Number(row.row))
+      .sort()
     let lastId = sortedIds[sortedIds.length - 1]
     lastId = lastId === undefined ? -1 : lastId
 
@@ -337,19 +317,26 @@ const onAssignSelectedTags = async (
   //
   // globalRefresh()
 }
+
+const portletTitle = computed<string>(
+  () =>
+    localization.value.common.assignedTags +
+    (tagsBodyItems.value.length ? ` (${tagsBodyItems.value.length})` : '')
+)
 // const globalRefresh = (): void => {
 //   $store.dispatch('main/A_GLOBAL_REFRESH', null)
 // }
 
-const onCreateCategory = (data: I_CreateCategoryData): void => {
+const onCreateCategory = (data: UI_I_CreateCategoryData): void => {
   emits('create-category', data)
 }
 
 const emits = defineEmits<{
   (event: 'toggle-portlet', id: string): void
-  (event: 'create-category', value: I_CreateCategoryData): void
+  (event: 'create-category', value: UI_I_CreateCategoryData): void
   (event: 'create-new-tag', value: UI_I_DataTableBody): void
   (event: 'assign-new-tags', value: UI_I_DataTableBody[]): void
+  (event: 'remove-tag', value: UI_I_DataTableBody): void
 }>()
 
 const onTogglePortlet = (id: string): void => {
@@ -357,34 +344,7 @@ const onTogglePortlet = (id: string): void => {
 }
 </script>
 
-<style>
-:root {
-  --table-actions-icon: #4d5d69;
-  --table-actions-icon-hover: #008fd6;
-  --table-actions-view: #182531;
-  --table-actions-remove: #ea3223;
-  --table-actions-bg-hover: #e9ebed66;
-}
-:root.dark-theme {
-  --table-actions-icon: #e9eaec;
-  --table-actions-icon-hover: #ffffff;
-  --table-actions-view: #ffffff;
-  --table-actions-remove: #ea3223;
-  --table-actions-bg-hover: #e9ebed0f;
-}
-</style>
-
 <style scoped lang="scss">
-.footer {
-  padding: 0 10px 5px;
-
-  .edit-trigger {
-    color: var(--global-text-color);
-    cursor: pointer;
-    margin-right: 10px;
-  }
-}
-
 .icon-container {
   width: 16px;
   height: 16px;
@@ -440,6 +400,8 @@ const onTogglePortlet = (id: string): void => {
 }
 
 .footer {
+  padding: 0 16px 8px;
+
   :deep(button.ui-btn) {
     line-height: 16px;
     margin-bottom: 11px;

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

@@ -19,6 +19,18 @@
               :messages="[localization.common.pleaseFillAllRequiredFields]"
               test-id="required-alert"
               simple-error
+              hide-close-button
+            />
+          </div>
+          <div
+            v-if="!isShowRequiredFieldsError && selectedRowsCount > 1"
+            style="margin: 8px 0"
+          >
+            <ui-alert
+              :messages="[localization.common.multipleTagsSelectedAlert]"
+              test-id="multiple-tags-alert"
+              type="info"
+              hide-close-button
             />
           </div>
           <div class="modal-top">
@@ -29,7 +41,7 @@
           <ui-data-table
             test-id="assign-tags-data-table"
             :data="assignDataLocal"
-            :options="options"
+            :options="tagTableHeaderOptions"
             server-off
             :default-layout="false"
             size="sm"
@@ -121,28 +133,20 @@
                   style="display: flex; align-items: center; column-gap: 12px"
                 >
                   <span
+                    class="hide-row"
                     style="cursor: pointer; line-height: 16px"
                     data-id="hide-create-new-tag-row"
                     @click.prevent.stop="onHideEditRow"
                   >
-                    <ui-icon
-                      name="close"
-                      width="16"
-                      height="16"
-                      color="#4D5D69"
-                    />
+                    <ui-icon name="close" width="16" height="16" />
                   </span>
                   <span
+                    class="create-row"
                     style="cursor: pointer; line-height: 16px"
                     data-id="create-new-tag-accept"
                     @click.prevent.stop="onAddTag"
                   >
-                    <ui-icon
-                      name="status-check"
-                      width="16"
-                      height="16"
-                      color="#008FD6"
-                    />
+                    <ui-icon name="status-check" width="16" height="16" />
                   </span>
                 </div>
               </template>
@@ -214,8 +218,8 @@ import type {
 import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type {
-  I_NewTagData,
-  I_CreateCategoryData,
+  UI_I_NewTagData,
+  UI_I_CreateCategoryData,
 } from '~/components/common/portlets/tag/lib/models/interfaces'
 import {
   tagTableHeaderOptions,
@@ -233,8 +237,6 @@ const onShowDetails = (_id: number): void => {
   navigateTo('/tags-attributes/tags')
 }
 
-const options: UI_I_DataTableOptions = tagTableHeaderOptions
-
 const assignTagTexts = computed<UI_I_ModalTexts>(() => ({
   button1: localization.value.common.cancel,
   button2: localization.value.common.assign,
@@ -285,7 +287,7 @@ const onAddNewRow = (): void => {
   assignDataLocal.value.body.push(makeNewTagCreateActionRowFunc(lastId + 1))
 }
 
-const editData = ref<I_NewTagData>({
+const editData = ref<UI_I_NewTagData>({
   tagName: '',
   category: '',
   description: '',
@@ -398,7 +400,7 @@ const onHideCreateCategoryModal = (): void => {
   isShowCreateCategoryModal.value = false
 }
 
-const onCreateCategory = (data: I_CreateCategoryData): void => {
+const onCreateCategory = (data: UI_I_CreateCategoryData): void => {
   selectItems.value.push({
     text: data.categoryName,
     value: data.categoryName.replaceAll(' ', ''),
@@ -416,6 +418,10 @@ const onCreateCategory = (data: I_CreateCategoryData): void => {
   --input-color: #4d5d69;
   --input-caret-color: #000000;
   --input-bg: #ffffff;
+  --hide-row-icon: #4d5d69;
+  --hide-row-icon-hover: #213444;
+  --create-row-icon: #008fd6;
+  --create-row-icon-hover: #0081c1;
 }
 :root.dark-theme {
   --separator-color: #e9ebed1f;
@@ -423,6 +429,10 @@ const onCreateCategory = (data: I_CreateCategoryData): void => {
   --input-color: #d3d6da;
   --input-caret-color: #ffffff;
   --input-bg: transparent;
+  --hide-row-icon: #e9eaec;
+  --hide-row-icon-hover: #ffffff;
+  --create-row-icon: #2ba2de;
+  --create-row-icon-hover: #008fd6;
 }
 </style>
 
@@ -446,12 +456,14 @@ const onCreateCategory = (data: I_CreateCategoryData): void => {
   font-weight: 400;
   line-height: 14.52px;
   color: #9da6ad;
+  padding: 4px 0;
 }
 .modal-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
+  padding-top: 8px;
 
   //&-manager-button {
   //  display: flex;
@@ -575,4 +587,24 @@ const onCreateCategory = (data: I_CreateCategoryData): void => {
   border-bottom: 1px solid var(--separator-color);
   height: 0;
 }
+
+.hide-row {
+  cursor: pointer;
+  line-height: 16px;
+  color: var(--hide-row-icon);
+
+  &:hover {
+    color: var(--hide-row-icon-hover);
+  }
+}
+
+.create-row {
+  cursor: pointer;
+  line-height: 16px;
+  color: var(--create-row-icon);
+
+  &:hover {
+    color: var(--create-row-icon-hover);
+  }
+}
 </style>

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

@@ -5,9 +5,9 @@ import type {
 } 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'
-import type { I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
-import type { T_CreateCategoryTypes } from '~/components/common/portlets/tag/lib/models/types'
-export const createCategoryData: I_CreateCategoryData = {
+import type { UI_I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
+import type { UI_T_CreateCategoryTypes } from '~/components/common/portlets/tag/lib/models/types'
+export const createCategoryData: UI_I_CreateCategoryData = {
   categoryName: '',
   description: '',
   tagsPerObject: '0',
@@ -29,7 +29,7 @@ export const createCategoryData: I_CreateCategoryData = {
   },
 }
 
-export const createCategoryTypes: Readonly<T_CreateCategoryTypes> = [
+export const createCategoryTypes: Readonly<UI_T_CreateCategoryTypes> = [
   'folder',
   'datacenter',
   'datastoreCluster',

package/components/common/portlets/tag/lib/models/interfaces.ts

@@ -1,4 +1,4 @@
-export interface I_CreateCategoryData {
+export interface UI_I_CreateCategoryData {
   categoryName: string
   description: string
   tagsPerObject: '0' | '1'
@@ -20,7 +20,7 @@ export interface I_CreateCategoryData {
   }
 }
 
-export interface I_NewTagData {
+export interface UI_I_NewTagData {
   tagName: string
   category: string
   description: string

package/components/common/portlets/tag/lib/models/types.ts

@@ -1,4 +1,4 @@
-export type T_CreateCategoryTypes = [
+export type UI_T_CreateCategoryTypes = [
   'folder',
   'datacenter',
   'datastoreCluster',