bfg-common 1.4.607 → 1.4.609

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

@@ -1,624 +1,624 @@
-<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 class="content-container">
-          <div v-if="isShowRequiredFieldsError" class="alert-container">
-            <ui-alert
-              :messages="[localization.common.pleaseFillAllRequiredFields]"
-              test-id="required-alert"
-              simple-error
-              hide-close-button
-            />
-          </div>
-          <div
-            v-if="!isShowRequiredFieldsError && selectedRowsCount > 1"
-            class="alert-container"
-          >
-            <ui-alert
-              :messages="[localization.common.multipleTagsSelectedAlert]"
-              test-id="multiple-tags-alert"
-              type="info"
-              hide-close-button
-            />
-          </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="tagTableHeaderOptions"
-            server-off
-            :default-layout="false"
-            size="sm"
-            @select-row="onGetSelected"
-          >
-            <template #notFound>
-              <div v-if="!allRowsCount" class="new-tag-button-container">
-                <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 class="select-button-container">
-                            <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 class="actions-container">
-                  <span
-                    class="hide-row"
-                    data-id="hide-create-new-tag-row"
-                    @click.prevent.stop="onHideEditRow"
-                  >
-                    <ui-icon name="close" width="16" height="16" />
-                  </span>
-                  <span
-                    class="create-row"
-                    data-id="create-new-tag-accept"
-                    @click.prevent.stop="onAddTag"
-                  >
-                    <ui-icon name="status-check" width="16" height="16" />
-                  </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 {
-  UI_I_NewTagData,
-  UI_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 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<UI_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: UI_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;
-  --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">
-.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;
-  padding: 4px 0;
-}
-.modal-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-top: 8px;
-
-  //&-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;
-}
-
-.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);
-  }
-}
-
-.content-container {
-  padding: 8px 32px 0;
-}
-
-.alert-container {
-  margin: 8px 0;
-}
-
-.new-tag-button-container {
-  margin-top: 12px;
-}
-
-.select-button-container {
-  display: flex;
-  align-items: center;
-  height: 28px;
-}
-
-.actions-container {
-  display: flex;
-  align-items: center;
-  column-gap: 12px;
-}
-</style>
+<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 class="content-container">
+          <div v-if="isShowRequiredFieldsError" class="alert-container">
+            <ui-alert
+              :messages="[localization.common.pleaseFillAllRequiredFields]"
+              test-id="required-alert"
+              simple-error
+              hide-close-button
+            />
+          </div>
+          <div
+            v-if="!isShowRequiredFieldsError && selectedRowsCount > 1"
+            class="alert-container"
+          >
+            <ui-alert
+              :messages="[localization.common.multipleTagsSelectedAlert]"
+              test-id="multiple-tags-alert"
+              type="info"
+              hide-close-button
+            />
+          </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="tagTableHeaderOptions"
+            server-off
+            :default-layout="false"
+            size="sm"
+            @select-row="onGetSelected"
+          >
+            <template #notFound>
+              <div v-if="!allRowsCount" class="new-tag-button-container">
+                <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 class="select-button-container">
+                            <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 class="actions-container">
+                  <span
+                    class="hide-row"
+                    data-id="hide-create-new-tag-row"
+                    @click.prevent.stop="onHideEditRow"
+                  >
+                    <ui-icon name="close" width="16" height="16" />
+                  </span>
+                  <span
+                    class="create-row"
+                    data-id="create-new-tag-accept"
+                    @click.prevent.stop="onAddTag"
+                  >
+                    <ui-icon name="status-check" width="16" height="16" />
+                  </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 {
+  UI_I_NewTagData,
+  UI_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 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<UI_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: UI_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;
+  --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">
+.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;
+  padding: 4px 0;
+}
+.modal-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-top: 8px;
+
+  //&-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;
+}
+
+.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);
+  }
+}
+
+.content-container {
+  padding: 8px 32px 0;
+}
+
+.alert-container {
+  margin: 8px 0;
+}
+
+.new-tag-button-container {
+  margin-top: 12px;
+}
+
+.select-button-container {
+  display: flex;
+  align-items: center;
+  height: 28px;
+}
+
+.actions-container {
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+}
+</style>