bfg-common 1.4.358 → 1.4.359

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

@@ -0,0 +1,634 @@
+<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" style="margin-top: 12px">
+              <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'"
+              style="display: flex; justify-content: flex-end; width: 100%"
+            >
+              <span
+                :id="`actions-${item.data.row}`"
+                :class="[
+                  'icon-container',
+                  {
+                    selected: isShow[`action-${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-${item.data.row}`]"
+                :elem-id="`actions-${item.data.row}`"
+                width="fit-content"
+              >
+                <div style="padding: 8px">
+                  <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 style="display: flex; align-items: center; column-gap: 12px">
+                <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-${id}`] = !isShow.value[`action-${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-${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-${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: '0',
+  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: #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: 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);
+  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);
+
+    &: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);
+  }
+}
+</style>