bfg-common 1.4.354 → 1.4.356

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

@@ -0,0 +1,578 @@
+<template>
+  <div class="add-tag-modal-container">
+    <ui-modal
+      v-if="props.isShowModal"
+      :title="localization.common.assignTag"
+      :subtitle="props.selectedItemName"
+      :texts="assignTagTexts"
+      test-id="modal-assign-tag"
+      width="720px"
+      :is-disabled-accept="!selectedRowsCount"
+      @hide="emits('cancel')"
+      @submit="onAssign"
+    >
+      <template #header></template>
+      <template #content>
+        <div style="padding: 8px 32px 0">
+          <div v-if="isShowRequiredFieldsError" style="margin: 8px 0">
+            <ui-alert
+              :messages="[localization.common.pleaseFillAllRequiredFields]"
+              test-id="required-alert"
+              simple-error
+            />
+          </div>
+          <div class="modal-top">
+            <span class="selected-text">
+              {{ selectedRowsCount }} {{ texts.selected }}
+            </span>
+          </div>
+          <ui-data-table
+            test-id="assign-tags-data-table"
+            :data="assignDataLocal"
+            :options="options"
+            server-off
+            :default-layout="false"
+            size="sm"
+            @select-row="onGetSelected"
+          >
+            <template #notFound>
+              <div v-if="!allRowsCount" style="margin-top: 12px">
+                <ui-button
+                  variant="text"
+                  test-id="create-new-tag"
+                  is-without-height
+                  is-without-sizes
+                  :disabled="hasEditRow"
+                  @click="onAddNewRow"
+                >
+                  {{ localization.zabbix.addNew }}...
+                </ui-button>
+              </div>
+            </template>
+            <template #icon="{ item }">
+              <template v-if="item.data.type === 'tagName'">
+                <input
+                  v-model="editData.tagName"
+                  data-id="new-tag-name"
+                  :class="[
+                    'table-input',
+                    {
+                      'table-input-error':
+                        validationData.tagName && isShowValidation,
+                    },
+                  ]"
+                  :placeholder="localization.common[item.data.type]"
+                  type="text"
+                  @click.prevent.stop
+                />
+              </template>
+
+              <template v-else-if="item.data.type === 'category'">
+                <div class="category-select">
+                  <ui-select
+                    v-model="editData.category"
+                    :items="selectItems"
+                    :error="validationData.category && isShowValidation"
+                    :placeholder="localization.common.chooseCategory"
+                    width="165px"
+                    select-width="100%"
+                    :show-text="true"
+                    size="sm"
+                    test-id="new-tag-category"
+                  >
+                    <template #heading>
+                      <div class="add-category-button">
+                        <ui-button
+                          variant="text"
+                          is-without-height
+                          is-without-sizes
+                          test-id="create-new-tag-category"
+                          @click="onShowCreateCategoryModal"
+                        >
+                          <div
+                            style="
+                              display: flex;
+                              align-items: center;
+                              height: 28px;
+                            "
+                          >
+                            <ui-icon name="plus" width="16" height="16" />
+                            <span>{{ localization.common.createNew }}</span>
+                          </div>
+                        </ui-button>
+                      </div>
+                      <div class="separator-container"></div>
+                    </template>
+                  </ui-select>
+                </div>
+              </template>
+              <template v-else-if="item.data.type === 'description'">
+                <input
+                  v-model="editData.description"
+                  class="table-input"
+                  :placeholder="localization.common[item.data.type]"
+                  type="text"
+                  data-id="new-tag-description"
+                  @click.prevent.stop
+                />
+              </template>
+              <template v-else-if="item.data.type === 'actions'">
+                <div
+                  style="display: flex; align-items: center; column-gap: 12px"
+                >
+                  <span
+                    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"
+                    />
+                  </span>
+                  <span
+                    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"
+                    />
+                  </span>
+                </div>
+              </template>
+            </template>
+          </ui-data-table>
+
+          <div v-if="allRowsCount" class="modal-bottom">
+            <span class="add-new-button">
+              <ui-button
+                variant="text"
+                is-without-height
+                is-without-sizes
+                :disabled="hasEditRow"
+                test-id="create-new-tag"
+                @click="onAddNewRow"
+              >
+                {{ localization.zabbix.addNew }}...
+              </ui-button>
+            </span>
+            <span class="selected-text">
+              {{ allRowsCount }} {{ texts.tags }}
+            </span>
+          </div>
+        </div>
+      </template>
+      <template #footerLeftContent>
+        <div class="tags-link">
+          <ui-button
+            variant="text"
+            is-without-height
+            is-without-sizes
+            test-id="show-tags-custom-attributes"
+            @click="onShowDetails"
+          >
+            <div class="tags-link-container">
+              <span class="tags-link-icon">
+                <ui-icon
+                  name="icon-tags-custom-attributes"
+                  width="20"
+                  height="20"
+                />
+              </span>
+              <span class="tags-link-text">
+                {{ localization.mainNavigation.tagsCustomAttributes }}
+              </span>
+            </div>
+          </ui-button>
+        </div>
+      </template>
+    </ui-modal>
+    <common-portlets-tag-create-category
+      :is-show-modal="isShowCreateCategoryModal"
+      @cancel="onHideCreateCategoryModal"
+      @create="onCreateCategory"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_Localization,
+  UI_I_ArbitraryObject,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableOptions,
+  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 { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type {
+  I_NewTagData,
+  I_CreateCategoryData,
+} from '~/components/common/portlets/tag/lib/models/interfaces'
+import {
+  tagTableHeaderOptions,
+  makeNewTagCreateActionRowFunc,
+  temporaryCategories,
+} from '~/components/common/portlets/tag/lib/config/config'
+
+const props = defineProps<{
+  isShowModal: boolean
+  assignData: UI_I_DataTable
+  selectedItemName: string
+}>()
+
+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,
+}))
+
+const texts = computed<UI_I_ArbitraryObject<string>>(() => ({
+  selected: localization.value.common.selected.toLowerCase(),
+  tags: localization.value.common.tags.toLowerCase(),
+}))
+
+const selectItems = ref<UI_I_Dropdown[]>(useDeepCopy(temporaryCategories))
+
+const assignDataLocal = ref<UI_I_DataTable>(useDeepCopy(props.assignData))
+
+watch(
+  () => props.assignData,
+  (newValue: UI_I_DataTable) => {
+    const newDataBody = newValue.body.map((row) => ({
+      ...row,
+      isSelected: assignDataLocal.value.body.find((r) => r.row === row.row)
+        ?.isSelected,
+    }))
+
+    assignDataLocal.value = { ...newValue, body: newDataBody }
+  },
+  { deep: true }
+)
+
+const selectedRowsCount = computed<number>(
+  () =>
+    assignDataLocal.value.body.filter(
+      (row: UI_I_DataTableBody) => row.isSelected
+    ).length
+)
+
+const allRowsCount = computed<number>(
+  () =>
+    assignDataLocal.value.body.filter(
+      (row: UI_I_DataTableBody) => !row.actionRow
+    ).length
+)
+
+const onAddNewRow = (): void => {
+  const rowsIds = assignDataLocal.value.body.map((row) => row.row).sort()
+  let lastId = rowsIds[rowsIds.length - 1]
+  lastId = lastId === undefined ? -1 : lastId
+
+  assignDataLocal.value.body.push(makeNewTagCreateActionRowFunc(lastId + 1))
+}
+
+const editData = ref<I_NewTagData>({
+  tagName: '',
+  category: '',
+  description: '',
+})
+
+const isShowValidation = ref<boolean>(false)
+const validationData = computed<{
+  tagName: boolean
+  category: boolean
+}>(() => ({
+  tagName: !editData.value.tagName.trim(),
+  category: !editData.value.category.trim(),
+}))
+
+const isShowRequiredFieldsError = computed<boolean>(
+  () =>
+    (validationData.value.tagName || validationData.value.category) &&
+    isShowValidation.value
+)
+
+watch(
+  validationData,
+  (newValue: { tagName: boolean; category: boolean }) => {
+    !newValue.tagName && !newValue.category && (isShowValidation.value = false)
+  },
+  { deep: true }
+)
+
+const resetFields = (): void => {
+  editData.value = {
+    tagName: '',
+    category: '',
+    description: '',
+  }
+}
+
+const onAddTag = (): void => {
+  if (validationData.value.tagName || validationData.value.category) {
+    isShowValidation.value = true
+    return
+  }
+
+  const withoutEditRowData = assignDataLocal.value.body.filter(
+    (row) => !row.actionRow
+  )
+
+  const rowsIds = withoutEditRowData.map((row) => row.row).sort()
+  let lastId = rowsIds[rowsIds.length - 1]
+  lastId = lastId === undefined ? -1 : lastId
+
+  emits('add-new-tag', {
+    row: lastId + 1,
+    isSelected: false,
+    data: [
+      { col: 0, text: editData.value.tagName },
+      { col: 1, text: editData.value.category },
+      { col: 2, text: editData.value.description },
+      { col: 3, text: '' },
+    ],
+  })
+
+  resetFields()
+}
+
+const onHideEditRow = (): void => {
+  assignDataLocal.value.body = assignDataLocal.value.body.filter(
+    (row) => !row.actionRow
+  )
+  resetFields()
+}
+
+const hasEditRow = computed<boolean>(
+  () => !!assignDataLocal.value.body.find((row) => row.actionRow)
+)
+
+const onAssign = (): void => {
+  emits(
+    'assign',
+    assignDataLocal.value.body.filter((row) => row.isSelected)
+  )
+}
+
+const onGetSelected = (selectedRows: UI_I_DataTableBody[]): void => {
+  const selectedRowsId = selectedRows.map(
+    (selectedRow: UI_I_DataTableBody) => selectedRow.row
+  )
+  assignDataLocal.value.body = assignDataLocal.value.body.map((row) =>
+    selectedRowsId.includes(row.row)
+      ? { ...row, isSelected: true }
+      : { ...row, isSelected: false }
+  )
+}
+
+const emits = defineEmits([
+  'add',
+  'cancel',
+  'assign',
+  'save',
+  'hide',
+  'add-new-tag',
+  'create-category',
+])
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowCreateCategoryModal = ref<boolean>(false)
+const onShowCreateCategoryModal = (): void => {
+  isShowCreateCategoryModal.value = true
+}
+const onHideCreateCategoryModal = (): void => {
+  isShowCreateCategoryModal.value = false
+}
+
+const onCreateCategory = (data: I_CreateCategoryData): void => {
+  selectItems.value.push({
+    text: data.categoryName,
+    value: data.categoryName.replaceAll(' ', ''),
+    selected: false,
+  })
+  emits('create-category', data)
+  onHideCreateCategoryModal()
+}
+</script>
+
+<style>
+:root {
+  --separator-color: #e9ebed;
+  --input-border: #d3d6da;
+  --input-color: #4d5d69;
+  --input-caret-color: #000000;
+  --input-bg: #ffffff;
+}
+:root.dark-theme {
+  --separator-color: #e9ebed1f;
+  --input-border: #e9ebed3d;
+  --input-color: #d3d6da;
+  --input-caret-color: #ffffff;
+  --input-bg: transparent;
+}
+</style>
+
+<style scoped lang="scss">
+.add-new-button {
+  :deep(button.ui-btn) {
+    line-height: 16px;
+    margin: 16px 0;
+    width: fit-content;
+  }
+}
+
+.add-tag-modal-container {
+  :deep(.modal-footer) {
+    padding: 0 !important;
+  }
+}
+
+.selected-text {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14.52px;
+  color: #9da6ad;
+}
+.modal-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+
+  //&-manager-button {
+  //  display: flex;
+  //  align-items: center;
+  //  column-gap: 0.5px;
+  //  height: 28px;
+  //  border: 1px solid #e9ebed;
+  //  background-color: #ffffff;
+  //  color: #4d5d69;
+  //  font-size: 12px;
+  //  font-weight: 500;
+  //  line-height: 14.52px;
+  //  padding: 6px 8px;
+  //  border-radius: 6px;
+  //  cursor: pointer;
+  //
+  //  &:hover {
+  //    background: #e9ebed66;
+  //  }
+  //}
+}
+
+.modal-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .selected-text {
+    align-self: flex-start;
+    padding-top: 8px;
+  }
+}
+
+.tags-link {
+  &-text {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 16.94px;
+  }
+  &-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  &-container {
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+  }
+}
+
+.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);
+  }
+
+  :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;
+      }
+    }
+  }
+}
+
+.add-category-button {
+  :deep(.ui-btn) {
+    height: 28px;
+    margin-top: 4px;
+    font-size: 12px;
+    justify-content: flex-start;
+    padding-left: 12px;
+
+    span {
+      font-size: 12px;
+    }
+  }
+}
+.separator-container {
+  margin: 4px 12px 0;
+  border-bottom: 1px solid var(--separator-color);
+  height: 0;
+}
+</style>