bfg-common 1.4.837 → 1.4.839

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

@@ -1,664 +1,657 @@
-<template>
-  <div>
-    <ui-portlet
-      class="attributes"
-      test-id="attributes-portlet"
-      :title="portletTitle"
-      :dragged="props.dragged"
-      :dragged-any="props.draggedAny"
-      :is-open="props.isOpen"
-      :portlet-id="props.portletId"
-      :is-loading="props.isLoading"
-      @toggle="onTogglePortlet"
-    >
-      <template #portletBody="{ isLoadingBody }">
-        <ui-data-table
-          test-id="attributes-portlet-table"
-          :data="data"
-          :options="attributeTableHeaderOptions"
-          server-off
-          :default-layout="false"
-          size="sm"
-          :loading="isLoadingBody"
-          :skeleton="skeletonData"
-        >
-          <template #notFound>
-            <div
-              v-if="!allRowsCount"
-              class="add-new-attribute-button-container"
-            >
-              <ui-button
-                test-id="add-new-attribute-button"
-                variant="text"
-                is-without-height
-                is-without-sizes
-                :disabled="hasEditRow"
-                @click="onAddNew"
-              >
-                {{ localization.zabbix.addNew }}...
-              </ui-button>
-            </div>
-          </template>
-          <!--          :loading="loading"-->
-          <template #icon="{ item }">
-            <div v-if="item.data.type === 'options'" class="actions-container">
-              <span
-                :id="`actions-attributes-${item.data.row}`"
-                :class="[
-                  'icon-container',
-                  {
-                    selected: isShow[`action-attributes-${item.data.row}`],
-                  },
-                ]"
-                @click="onShowActions(item.data.row)"
-              >
-                <ui-icon :name="item.data.icon" width="16" height="16" />
-              </span>
-              <ui-popup-window
-                v-model="isShow[`action-attributes-${item.data.row}`]"
-                :elem-id="`actions-attributes-${item.data.row}`"
-                width="fit-content"
-                left
-                bottom
-              >
-                <div class="actions-dropdown-container">
-                  <div
-                    :class="['action', { disabled: hasEditRow }]"
-                    data-id="edit-attribute-action"
-                    @click="onEditAttribute(item.data.row)"
-                  >
-                    <!--                      @click="onShowDetails(item.data.row)"-->
-                    <ui-icon name="edit" width="16" height="16" />
-                    <span>{{ localization.common.edit }}</span>
-                  </div>
-                  <div
-                    class="action-remove"
-                    data-id="delete-attribute-action"
-                    @click="onShowRemoveDialog(item.data.row)"
-                  >
-                    <ui-icon name="delete" width="16" height="16" />
-                    <span>{{ localization.common.delete }}</span>
-                  </div>
-                </div>
-              </ui-popup-window>
-            </div>
-            <template v-if="item.data.type === 'attribute'">
-              <input
-                v-model="editData.attribute"
-                data-id="attribute-name-input"
-                :class="[
-                  'table-input',
-                  {
-                    'table-input-error':
-                      validationData.attribute && isShowValidation,
-                  },
-                ]"
-                :placeholder="localization.common[item.data.type]"
-                type="text"
-                @click.prevent.stop
-              />
-            </template>
-
-            <template v-else-if="item.data.type === 'value'">
-              <input
-                v-model="editData.value"
-                :class="[
-                  'table-input',
-                  {
-                    'table-input-error':
-                      validationData.value && isShowValidation,
-                  },
-                ]"
-                :placeholder="localization.common[item.data.type]"
-                type="text"
-                data-id="attribute-value-input"
-                @click.prevent.stop
-              />
-            </template>
-            <template v-else-if="item.data.type === 'type'">
-              <div class="category-select">
-                <ui-select
-                  v-model="editData.type"
-                  :items="selectItems"
-                  :placeholder="localization.common.chooseCategory"
-                  width="165px"
-                  select-width="100%"
-                  :show-text="true"
-                  :error="validationData.type && isShowValidation"
-                  :disabled="isEditRow"
-                  size="sm"
-                  test-id="attribute-type-select"
-                />
-              </div>
-            </template>
-            <template v-else-if="item.data.type === 'actions'">
-              <div class="edit-actions-container">
-                <span
-                  class="hide-row"
-                  data-id="hide-create-attribute-row"
-                  @click.prevent.stop="onHideEditRow"
-                >
-                  <ui-icon name="close" width="16" height="16" />
-                </span>
-                <span
-                  class="create-row"
-                  data-id="create-attribute-accept"
-                  @click.prevent.stop="onAddAttribute"
-                >
-                  <ui-icon name="status-check" width="16" height="16" />
-                </span>
-              </div>
-            </template>
-          </template>
-        </ui-data-table>
-      </template>
-      <template #portletFooter="{ isLoadingFooter }">
-        <div class="footer">
-          <ui-button
-            v-if="!isLoadingFooter"
-            test-id="add-new-attribute-button"
-            variant="text"
-            is-without-height
-            is-without-sizes
-            :disabled="hasEditRow"
-            @click="onAddNew"
-          >
-            {{ localization.zabbix.addNew }}...
-          </ui-button>
-          <ui-portlet-skeleton-footer v-else />
-        </div>
-      </template>
-    </ui-portlet>
-
-    <ui-popup
-      v-if="isShowRemoveDialog"
-      test-id="remove-attribute-dialog"
-      icon-name="info-status"
-      :texts="removeAttributeDialogTexts"
-      :message="removeAttributeMessage"
-      :title="localization.zabbix.deleteConfirmation"
-      @hide="onHideRemoveDialog"
-      @submit="onRemoveAttribute"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_DataTable,
-  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_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-import type {
-  UI_I_Localization,
-  UI_I_ArbitraryObject,
-} from '~/lib/models/interfaces'
-import type { UI_I_NewAttributeData } from '~/components/common/portlets/customAttributes/lib/models/interfaces'
-import {
-  attributeTableHeaderOptions,
-  attributeTableHeaderDataFunc,
-  createRow,
-  makeNewAttributeCreateActionRowFunc,
-  availableTypesFunc,
-  skeletonData,
-} from '~/components/common/portlets/customAttributes/lib/config/config'
-
-const props = defineProps<{
-  portletId: string
-  dragged?: boolean
-  isOpen?: boolean
-  draggedAny?: boolean
-  selectedItemName: string
-  type: UI_I_Dropdown
-  bodyItems: UI_I_DataTableBody[]
-  isLoading: boolean
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const portletTitle = computed<string>(() => {
-  const count = allRowsCount.value
-    ? ` (${isEditRow.value ? allRowsCount.value + 1 : allRowsCount.value})`
-    : ''
-
-  return localization.value.common.customAttributes + count
-})
-
-const isShow = ref<UI_I_ArbitraryObject<boolean>>({})
-
-const onShowActions = (id: number): void => {
-  isShow.value[`action-attributes-${id}`] =
-    !isShow.value[`action-attributes-${id}`]
-}
-
-const attributesHeadItems = computed<UI_I_DataTableHeader[]>(() =>
-  attributeTableHeaderDataFunc(localization.value)
-)
-
-const attributesBodyItems = ref<UI_I_DataTableBody[]>([])
-
-const allRowsCount = computed<number>(
-  () =>
-    attributesBodyItems.value.filter(
-      (row: UI_I_DataTableBody) => !row.actionRow
-    ).length
-)
-
-const hasEditRow = computed<boolean>(
-  () => !!attributesBodyItems.value.find((row) => row.actionRow)
-)
-
-const selectedType = computed<UI_I_Dropdown>(() => ({
-  text: props.type.text,
-  value: props.type.value,
-  selected: true,
-}))
-
-const editData = ref<UI_I_NewAttributeData>({
-  attribute: '',
-  value: '',
-  type: selectedType.value.text,
-})
-
-const resetFields = (): void => {
-  editData.value = {
-    attribute: '',
-    value: '',
-    type: selectedType.value.text,
-  }
-}
-
-const isShowValidation = ref<boolean>(false)
-const validationData = computed<{
-  attribute: boolean
-  value: boolean
-  type: boolean
-}>(() => ({
-  attribute: !editData.value.attribute.trim(),
-  value: !editData.value.value.trim(),
-  type: !editData.value.type.trim(),
-}))
-
-watch(
-  validationData,
-  (newValue: { attribute: boolean; value: boolean; type: boolean }) => {
-    !newValue.attribute &&
-      !newValue.value &&
-      !newValue.type &&
-      (isShowValidation.value = false)
-  },
-  { deep: true }
-)
-
-const onAddAttribute = (): void => {
-  if (
-    validationData.value.attribute ||
-    validationData.value.value ||
-    validationData.value.type
-  ) {
-    isShowValidation.value = true
-    return
-  }
-
-  if (isEditRow.value && editRowData.value) {
-    const editedRowData = createRow(editRowData.value.row, editData.value)
-
-    attributesBodyItems.value = attributesBodyItems.value.map((row) =>
-      row.row === editRowData.value?.row ? editedRowData : row
-    )
-
-    emits('edit-attribute', editedRowData)
-    isShow.value[`action-attributes-${editRowData.value?.row}`] = false
-    editRowData.value = undefined
-    isEditRow.value = false
-  } else {
-    const withoutEditRowData = attributesBodyItems.value.filter(
-      (row) => !row.actionRow
-    )
-
-    const rowsIds = withoutEditRowData.map((row) => row.row).sort()
-    let lastId = rowsIds[rowsIds.length - 1]
-    lastId = lastId === undefined ? -1 : lastId
-
-    const addedRowData = createRow(lastId + 1, editData.value)
-
-    attributesBodyItems.value.push(addedRowData)
-    emits('add-attribute', addedRowData)
-    attributesBodyItems.value = attributesBodyItems.value.filter(
-      (row) => !row.actionRow
-    )
-  }
-
-  resetFields()
-}
-
-const onHideEditRow = (): void => {
-  if (isEditRow.value && editRowData.value) {
-    attributesBodyItems.value = attributesBodyItems.value.map((row) =>
-      row.row === editRowData.value?.row ? editRowData.value : row
-    )
-    isShow.value[`action-attributes-${editRowData.value?.row}`] = false
-    editRowData.value = undefined
-    isEditRow.value = false
-  } else {
-    attributesBodyItems.value = attributesBodyItems.value.filter(
-      (row) => !row.actionRow
-    )
-  }
-  resetFields()
-}
-
-watch(
-  () => props.bodyItems,
-  (newValue: UI_I_DataTableBody[]) => {
-    attributesBodyItems.value = newValue
-  },
-  { deep: true, immediate: true }
-)
-
-const data = computed<UI_I_DataTable>(() => ({
-  id: 'attributes',
-  selectedRows: [],
-  isAllSelected: false,
-  title: '',
-  subTitle: '',
-  header: attributesHeadItems.value,
-  body: attributesBodyItems.value,
-}))
-
-const selectItems = ref<UI_I_Dropdown[]>(
-  useDeepCopy(availableTypesFunc(selectedType.value))
-)
-
-const onAddNew = (): void => {
-  const rowsIds = attributesBodyItems.value.map((row) => row.row).sort()
-  let lastId = rowsIds[rowsIds.length - 1]
-  lastId = lastId === undefined ? -1 : lastId
-
-  attributesBodyItems.value.push(
-    makeNewAttributeCreateActionRowFunc(lastId + 1)
-  )
-}
-
-const removeAttributeDialogTexts = computed<UI_I_ModalTexts>(() => ({
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.delete,
-}))
-
-const isShowRemoveDialog = ref<boolean>(false)
-
-const onHideRemoveDialog = (): void => {
-  isShowRemoveDialog.value = false
-}
-
-const attributeIdForRemove = ref<number>(0)
-const attributeNameForRemove = computed<string>(
-  () =>
-    (attributesBodyItems.value.find(
-      (row: UI_I_DataTableBody) => row.row === attributeIdForRemove.value
-    )?.data[0]?.text || '') as string
-)
-const removeAttributeMessage = computed<string>(() =>
-  localization.value.common.removeAttributeDialog
-    .replace?.('{attributeName}', attributeNameForRemove.value)
-    .replace('{selectedItemName}', props.selectedItemName)
-)
-const onShowRemoveDialog = (id: number): void => {
-  attributeIdForRemove.value = id
-  isShowRemoveDialog.value = true
-}
-const onRemoveAttribute = (): void => {
-  onHideRemoveDialog()
-
-  const removeItem = attributesBodyItems.value.find(
-    (row) => row.row === attributeIdForRemove.value
-  )
-  if (!removeItem) return
-
-  emits('remove-attribute', removeItem)
-  attributesBodyItems.value = attributesBodyItems.value.filter(
-    (row) => row.row !== attributeIdForRemove.value
-  )
-}
-
-const isEditRow = ref<boolean>(false)
-const editRowData = ref<UI_I_DataTableBody | undefined>(undefined)
-const onEditAttribute = (id: number): void => {
-  editRowData.value = useDeepCopy(
-    attributesBodyItems.value.find((row) => row.row === id)
-  )
-
-  if (!editRowData.value) return
-  isEditRow.value = true
-
-  editData.value = {
-    attribute: editRowData.value.data[0].text,
-    value: editRowData.value.data[1].text,
-    type: editRowData.value.data[2].text,
-  }
-
-  attributesBodyItems.value = attributesBodyItems.value.map((row) =>
-    row.row === id ? makeNewAttributeCreateActionRowFunc(id) : row
-  )
-}
-
-const emits = defineEmits<{
-  (event: 'toggle-portlet', id: string): void
-  (event: 'remove-attribute', value: UI_I_DataTableBody): void
-  (event: 'add-attribute', value: UI_I_DataTableBody): void
-  (event: 'edit-attribute', value: UI_I_DataTableBody): void
-}>()
-
-const onTogglePortlet = (id: string): void => {
-  emits('toggle-portlet', id)
-}
-</script>
-
-<style>
-:root {
-  --separator-color: #e9ebed;
-  --input-border: #d3d6da;
-  --input-color: #4d5d69;
-  --input-caret-color: #000000;
-  --input-bg-common: #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;
-  --input-border: #e9ebed3d;
-  --input-color: #d3d6da;
-  --input-caret-color: #ffffff;
-  --input-bg-common: transparent;
-  --hide-row-icon: #e9eaec;
-  --hide-row-icon-hover: #ffffff;
-  --create-row-icon: #2ba2de;
-  --create-row-icon-hover: #008fd6;
-}
-</style>
-
-<style scoped lang="scss">
-.icon-container {
-  width: 16px;
-  height: 16px;
-  display: block;
-  cursor: pointer;
-  color: var(--table-actions-icon);
-
-  &:hover,
-  &.selected {
-    color: var(--table-actions-icon-hover);
-  }
-}
-
-.action-remove {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-
-  height: 32px;
-  border-radius: 4px;
-  padding: 8px;
-  color: var(--table-actions-remove);
-  cursor: pointer;
-
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 15.73px;
-
-  &:hover {
-    background: var(--table-actions-bg-hover);
-  }
-}
-
-.action {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-
-  height: 32px;
-  border-radius: 4px;
-  padding: 8px;
-  color: var(--table-actions-view);
-  margin-bottom: 8px;
-  cursor: pointer;
-
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 15.73px;
-
-  &.disabled {
-    user-select: none;
-    pointer-events: none;
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
-  &:hover {
-    background: var(--table-actions-bg-hover);
-  }
-}
-
-.footer {
-  padding: 0 16px 8px;
-
-  :deep(button.ui-btn) {
-    line-height: 16px;
-    margin-bottom: 11px;
-    margin-left: 6px;
-    width: fit-content;
-  }
-}
-
-.table-input {
-  height: 28px;
-  background-color: var(--input-bg-common);
-  border: 1px solid var(--input-border);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 14.52px;
-  border-radius: 6px;
-  width: 100%;
-  padding: 6px 8px;
-  caret-color: var(--input-caret-color);
-  color: var(--input-color);
-
-  &::placeholder {
-    color: #9da6ad;
-  }
-
-  &:focus,
-  &:focus-visible {
-    border: 1px solid #008fd6;
-    outline: none;
-  }
-
-  &.table-input-error {
-    border-color: #ea3223;
-  }
-}
-
-.category-select {
-  width: 100%;
-
-  :deep(.ui-select-toggle-button) {
-    height: 28px;
-    background-color: var(--input-bg-common);
-
-    &:disabled {
-      background: var(--select-bg-disabled);
-      color: var(--select-color-disabled);
-      cursor: default;
-
-      .ui-arrow-icon {
-        color: var(--select-color-disabled);
-      }
-
-      :deep(.content-icon) {
-        opacity: 40%;
-      }
-    }
-  }
-
-  :deep(.ui-placeholder) {
-    font-size: 12px;
-  }
-
-  :deep(.ui-dropdown) {
-    max-height: 250px;
-    overflow-y: auto;
-
-    .ui-dropdown-menu-item {
-      height: 28px;
-      margin-bottom: 4px;
-      .ui-item-text {
-        font-size: 12px;
-      }
-    }
-  }
-}
-
-.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);
-  }
-}
-
-.add-new-attribute-button-container {
-  margin-top: 12px;
-}
-
-.actions-container {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-}
-
-.actions-dropdown-container {
-  padding: 8px;
-}
-
-.edit-actions-container {
-  display: flex;
-  align-items: center;
-  column-gap: 12px;
-}
-</style>
+<template>
+  <div>
+    <ui-portlet
+      class="attributes"
+      test-id="attributes-portlet"
+      :title="portletTitle"
+      :dragged="props.dragged"
+      :dragged-any="props.draggedAny"
+      :is-open="props.isOpen"
+      :portlet-id="props.portletId"
+      @toggle="onTogglePortlet"
+    >
+      <template #portletBody>
+        <ui-data-table
+          test-id="attributes-portlet-table"
+          :data="data"
+          :options="attributeTableHeaderOptions"
+          server-off
+          :default-layout="false"
+          size="sm"
+        >
+          <template #notFound>
+            <div
+              v-if="!allRowsCount"
+              class="add-new-attribute-button-container"
+            >
+              <ui-button
+                test-id="add-new-attribute-button"
+                variant="text"
+                is-without-height
+                is-without-sizes
+                :disabled="hasEditRow"
+                @click="onAddNew"
+              >
+                {{ localization.zabbix.addNew }}...
+              </ui-button>
+            </div>
+          </template>
+          <!--          :loading="loading"-->
+          <template #icon="{ item }">
+            <div v-if="item.data.type === 'options'" class="actions-container">
+              <span
+                :id="`actions-attributes-${item.data.row}`"
+                :class="[
+                  'icon-container',
+                  {
+                    selected: isShow[`action-attributes-${item.data.row}`],
+                  },
+                ]"
+                @click="onShowActions(item.data.row)"
+              >
+                <ui-icon :name="item.data.icon" width="16" height="16" />
+              </span>
+              <ui-popup-window
+                v-model="isShow[`action-attributes-${item.data.row}`]"
+                :elem-id="`actions-attributes-${item.data.row}`"
+                width="fit-content"
+                left
+                bottom
+              >
+                <div class="actions-dropdown-container">
+                  <div
+                    :class="['action', { disabled: hasEditRow }]"
+                    data-id="edit-attribute-action"
+                    @click="onEditAttribute(item.data.row)"
+                  >
+                    <!--                      @click="onShowDetails(item.data.row)"-->
+                    <ui-icon name="edit" width="16" height="16" />
+                    <span>{{ localization.common.edit }}</span>
+                  </div>
+                  <div
+                    class="action-remove"
+                    data-id="delete-attribute-action"
+                    @click="onShowRemoveDialog(item.data.row)"
+                  >
+                    <ui-icon name="delete" width="16" height="16" />
+                    <span>{{ localization.common.delete }}</span>
+                  </div>
+                </div>
+              </ui-popup-window>
+            </div>
+            <template v-if="item.data.type === 'attribute'">
+              <input
+                v-model="editData.attribute"
+                data-id="attribute-name-input"
+                :class="[
+                  'table-input',
+                  {
+                    'table-input-error':
+                      validationData.attribute && isShowValidation,
+                  },
+                ]"
+                :placeholder="localization.common[item.data.type]"
+                type="text"
+                @click.prevent.stop
+              />
+            </template>
+
+            <template v-else-if="item.data.type === 'value'">
+              <input
+                v-model="editData.value"
+                :class="[
+                  'table-input',
+                  {
+                    'table-input-error':
+                      validationData.value && isShowValidation,
+                  },
+                ]"
+                :placeholder="localization.common[item.data.type]"
+                type="text"
+                data-id="attribute-value-input"
+                @click.prevent.stop
+              />
+            </template>
+            <template v-else-if="item.data.type === 'type'">
+              <div class="category-select">
+                <ui-select
+                  v-model="editData.type"
+                  :items="selectItems"
+                  :placeholder="localization.common.chooseCategory"
+                  width="165px"
+                  select-width="100%"
+                  :show-text="true"
+                  :error="validationData.type && isShowValidation"
+                  :disabled="isEditRow"
+                  size="sm"
+                  test-id="attribute-type-select"
+                />
+              </div>
+            </template>
+            <template v-else-if="item.data.type === 'actions'">
+              <div class="edit-actions-container">
+                <span
+                  class="hide-row"
+                  data-id="hide-create-attribute-row"
+                  @click.prevent.stop="onHideEditRow"
+                >
+                  <ui-icon name="close" width="16" height="16" />
+                </span>
+                <span
+                  class="create-row"
+                  data-id="create-attribute-accept"
+                  @click.prevent.stop="onAddAttribute"
+                >
+                  <ui-icon name="status-check" width="16" height="16" />
+                </span>
+              </div>
+            </template>
+          </template>
+        </ui-data-table>
+      </template>
+      <template #portletFooter>
+        <div class="footer">
+          <ui-button
+            test-id="add-new-attribute-button"
+            variant="text"
+            is-without-height
+            is-without-sizes
+            :disabled="hasEditRow"
+            @click="onAddNew"
+          >
+            {{ localization.zabbix.addNew }}...
+          </ui-button>
+        </div>
+      </template>
+    </ui-portlet>
+
+    <ui-popup
+      v-if="isShowRemoveDialog"
+      test-id="remove-attribute-dialog"
+      icon-name="info-status"
+      :texts="removeAttributeDialogTexts"
+      :message="removeAttributeMessage"
+      :title="localization.zabbix.deleteConfirmation"
+      @hide="onHideRemoveDialog"
+      @submit="onRemoveAttribute"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DataTable,
+  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_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+} from '~/lib/models/interfaces'
+import type { UI_I_NewAttributeData } from '~/components/common/portlets/customAttributes/lib/models/interfaces'
+import {
+  attributeTableHeaderOptions,
+  attributeTableHeaderDataFunc,
+  createRow,
+  makeNewAttributeCreateActionRowFunc,
+  availableTypesFunc,
+} from '~/components/common/portlets/customAttributes/lib/config/config'
+
+const props = defineProps<{
+  portletId: string
+  dragged?: boolean
+  isOpen?: boolean
+  draggedAny?: boolean
+  selectedItemName: string
+  type: UI_I_Dropdown
+  bodyItems: UI_I_DataTableBody[]
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const portletTitle = computed<string>(() => {
+  const count = allRowsCount.value
+    ? ` (${isEditRow.value ? allRowsCount.value + 1 : allRowsCount.value})`
+    : ''
+
+  return localization.value.common.customAttributes + count
+})
+
+const isShow = ref<UI_I_ArbitraryObject<boolean>>({})
+
+const onShowActions = (id: number): void => {
+  isShow.value[`action-attributes-${id}`] =
+    !isShow.value[`action-attributes-${id}`]
+}
+
+const attributesHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+  attributeTableHeaderDataFunc(localization.value)
+)
+
+const attributesBodyItems = ref<UI_I_DataTableBody[]>([])
+
+const allRowsCount = computed<number>(
+  () =>
+    attributesBodyItems.value.filter(
+      (row: UI_I_DataTableBody) => !row.actionRow
+    ).length
+)
+
+const hasEditRow = computed<boolean>(
+  () => !!attributesBodyItems.value.find((row) => row.actionRow)
+)
+
+const selectedType = computed<UI_I_Dropdown>(() => ({
+  text: props.type.text,
+  value: props.type.value,
+  selected: true,
+}))
+
+const editData = ref<UI_I_NewAttributeData>({
+  attribute: '',
+  value: '',
+  type: selectedType.value.text,
+})
+
+const resetFields = (): void => {
+  editData.value = {
+    attribute: '',
+    value: '',
+    type: selectedType.value.text,
+  }
+}
+
+const isShowValidation = ref<boolean>(false)
+const validationData = computed<{
+  attribute: boolean
+  value: boolean
+  type: boolean
+}>(() => ({
+  attribute: !editData.value.attribute.trim(),
+  value: !editData.value.value.trim(),
+  type: !editData.value.type.trim(),
+}))
+
+watch(
+  validationData,
+  (newValue: { attribute: boolean; value: boolean; type: boolean }) => {
+    !newValue.attribute &&
+      !newValue.value &&
+      !newValue.type &&
+      (isShowValidation.value = false)
+  },
+  { deep: true }
+)
+
+const onAddAttribute = (): void => {
+  if (
+    validationData.value.attribute ||
+    validationData.value.value ||
+    validationData.value.type
+  ) {
+    isShowValidation.value = true
+    return
+  }
+
+  if (isEditRow.value && editRowData.value) {
+    const editedRowData = createRow(editRowData.value.row, editData.value)
+
+    attributesBodyItems.value = attributesBodyItems.value.map((row) =>
+      row.row === editRowData.value?.row ? editedRowData : row
+    )
+
+    emits('edit-attribute', editedRowData)
+    isShow.value[`action-attributes-${editRowData.value?.row}`] = false
+    editRowData.value = undefined
+    isEditRow.value = false
+  } else {
+    const withoutEditRowData = attributesBodyItems.value.filter(
+      (row) => !row.actionRow
+    )
+
+    const rowsIds = withoutEditRowData.map((row) => row.row).sort()
+    let lastId = rowsIds[rowsIds.length - 1]
+    lastId = lastId === undefined ? -1 : lastId
+
+    const addedRowData = createRow(lastId + 1, editData.value)
+
+    attributesBodyItems.value.push(addedRowData)
+    emits('add-attribute', addedRowData)
+    attributesBodyItems.value = attributesBodyItems.value.filter(
+      (row) => !row.actionRow
+    )
+  }
+
+  resetFields()
+}
+
+const onHideEditRow = (): void => {
+  if (isEditRow.value && editRowData.value) {
+    attributesBodyItems.value = attributesBodyItems.value.map((row) =>
+      row.row === editRowData.value?.row ? editRowData.value : row
+    )
+    isShow.value[`action-attributes-${editRowData.value?.row}`] = false
+    editRowData.value = undefined
+    isEditRow.value = false
+  } else {
+    attributesBodyItems.value = attributesBodyItems.value.filter(
+      (row) => !row.actionRow
+    )
+  }
+  resetFields()
+}
+
+watch(
+  () => props.bodyItems,
+  (newValue: UI_I_DataTableBody[]) => {
+    attributesBodyItems.value = newValue
+  },
+  { deep: true, immediate: true }
+)
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: 'attributes',
+  selectedRows: [],
+  isAllSelected: false,
+  title: '',
+  subTitle: '',
+  header: attributesHeadItems.value,
+  body: attributesBodyItems.value,
+}))
+
+const selectItems = ref<UI_I_Dropdown[]>(
+  useDeepCopy(availableTypesFunc(selectedType.value))
+)
+
+const onAddNew = (): void => {
+  const rowsIds = attributesBodyItems.value.map((row) => row.row).sort()
+  let lastId = rowsIds[rowsIds.length - 1]
+  lastId = lastId === undefined ? -1 : lastId
+
+  attributesBodyItems.value.push(
+    makeNewAttributeCreateActionRowFunc(lastId + 1)
+  )
+}
+
+const removeAttributeDialogTexts = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.delete,
+}))
+
+const isShowRemoveDialog = ref<boolean>(false)
+
+const onHideRemoveDialog = (): void => {
+  isShowRemoveDialog.value = false
+}
+
+const attributeIdForRemove = ref<number>(0)
+const attributeNameForRemove = computed<string>(
+  () =>
+    (attributesBodyItems.value.find(
+      (row: UI_I_DataTableBody) => row.row === attributeIdForRemove.value
+    )?.data[0]?.text || '') as string
+)
+const removeAttributeMessage = computed<string>(() =>
+  localization.value.common.removeAttributeDialog
+    .replace?.('{attributeName}', attributeNameForRemove.value)
+    .replace('{selectedItemName}', props.selectedItemName)
+)
+const onShowRemoveDialog = (id: number): void => {
+  attributeIdForRemove.value = id
+  isShowRemoveDialog.value = true
+}
+const onRemoveAttribute = (): void => {
+  onHideRemoveDialog()
+
+  const removeItem = attributesBodyItems.value.find(
+    (row) => row.row === attributeIdForRemove.value
+  )
+  if (!removeItem) return
+
+  emits('remove-attribute', removeItem)
+  attributesBodyItems.value = attributesBodyItems.value.filter(
+    (row) => row.row !== attributeIdForRemove.value
+  )
+}
+
+const isEditRow = ref<boolean>(false)
+const editRowData = ref<UI_I_DataTableBody | undefined>(undefined)
+const onEditAttribute = (id: number): void => {
+  editRowData.value = useDeepCopy(
+    attributesBodyItems.value.find((row) => row.row === id)
+  )
+
+  if (!editRowData.value) return
+  isEditRow.value = true
+
+  editData.value = {
+    attribute: editRowData.value.data[0].text,
+    value: editRowData.value.data[1].text,
+    type: editRowData.value.data[2].text,
+  }
+
+  attributesBodyItems.value = attributesBodyItems.value.map((row) =>
+    row.row === id ? makeNewAttributeCreateActionRowFunc(id) : row
+  )
+}
+
+const emits = defineEmits<{
+  (event: 'toggle-portlet', id: string): void
+  (event: 'remove-attribute', value: UI_I_DataTableBody): void
+  (event: 'add-attribute', value: UI_I_DataTableBody): void
+  (event: 'edit-attribute', value: UI_I_DataTableBody): void
+}>()
+
+const onTogglePortlet = (id: string): void => {
+  emits('toggle-portlet', id)
+}
+</script>
+
+<style>
+:root {
+  --separator-color: #e9ebed;
+  --input-border: #d3d6da;
+  --input-color: #4d5d69;
+  --input-caret-color: #000000;
+  --input-bg-common: #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;
+  --input-border: #e9ebed3d;
+  --input-color: #d3d6da;
+  --input-caret-color: #ffffff;
+  --input-bg-common: transparent;
+  --hide-row-icon: #e9eaec;
+  --hide-row-icon-hover: #ffffff;
+  --create-row-icon: #2ba2de;
+  --create-row-icon-hover: #008fd6;
+}
+</style>
+
+<style scoped lang="scss">
+.icon-container {
+  width: 16px;
+  height: 16px;
+  display: block;
+  cursor: pointer;
+  color: var(--table-actions-icon);
+
+  &:hover,
+  &.selected {
+    color: var(--table-actions-icon-hover);
+  }
+}
+
+.action-remove {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+
+  height: 32px;
+  border-radius: 4px;
+  padding: 8px;
+  color: var(--table-actions-remove);
+  cursor: pointer;
+
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 15.73px;
+
+  &:hover {
+    background: var(--table-actions-bg-hover);
+  }
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+
+  height: 32px;
+  border-radius: 4px;
+  padding: 8px;
+  color: var(--table-actions-view);
+  margin-bottom: 8px;
+  cursor: pointer;
+
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 15.73px;
+
+  &.disabled {
+    user-select: none;
+    pointer-events: none;
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    background: var(--table-actions-bg-hover);
+  }
+}
+
+.footer {
+  padding: 0 16px 8px;
+
+  :deep(button.ui-btn) {
+    line-height: 16px;
+    margin-bottom: 11px;
+    margin-left: 6px;
+    width: fit-content;
+  }
+}
+
+.table-input {
+  height: 28px;
+  background-color: var(--input-bg-common);
+  border: 1px solid var(--input-border);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14.52px;
+  border-radius: 6px;
+  width: 100%;
+  padding: 6px 8px;
+  caret-color: var(--input-caret-color);
+  color: var(--input-color);
+
+  &::placeholder {
+    color: #9da6ad;
+  }
+
+  &:focus,
+  &:focus-visible {
+    border: 1px solid #008fd6;
+    outline: none;
+  }
+
+  &.table-input-error {
+    border-color: #ea3223;
+  }
+}
+
+.category-select {
+  width: 100%;
+
+  :deep(.ui-select-toggle-button) {
+    height: 28px;
+    background-color: var(--input-bg-common);
+
+    &:disabled {
+      background: var(--select-bg-disabled);
+      color: var(--select-color-disabled);
+      cursor: default;
+
+      .ui-arrow-icon {
+        color: var(--select-color-disabled);
+      }
+
+      :deep(.content-icon) {
+        opacity: 40%;
+      }
+    }
+  }
+
+  :deep(.ui-placeholder) {
+    font-size: 12px;
+  }
+
+  :deep(.ui-dropdown) {
+    max-height: 250px;
+    overflow-y: auto;
+
+    .ui-dropdown-menu-item {
+      height: 28px;
+      margin-bottom: 4px;
+      .ui-item-text {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.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);
+  }
+}
+
+.add-new-attribute-button-container {
+  margin-top: 12px;
+}
+
+.actions-container {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.actions-dropdown-container {
+  padding: 8px;
+}
+
+.edit-actions-container {
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+}
+</style>