bfg-common 1.4.355 → 1.4.357

package/components/common/portlets/tag/{TagsNew.vue → Portlet.vue}

@@ -1,450 +1,450 @@
-<template>
-  <div>
-    <ui-portlet
-      class="tags"
-      test-id="tags-portlet"
-      :title="localization.common.assignedTags"
-      :dragged="props.dragged"
-      :dragged-any="props.draggedAny"
-      :is-open="props.isOpen"
-      :portlet-id="props.portletId"
-      @toggle="onTogglePortlet"
-    >
-      <template #portletBody>
-        <ui-data-table
-          test-id="tags-portlet-table"
-          :data="data"
-          :options="options"
-          server-off
-          :default-layout="false"
-          size="sm"
-        >
-          <!--          :loading="loading"-->
-          <template #icon="{ item }">
-            <div 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"
-                    data-id="view-tag-details-action"
-                    @click="onShowDetails(item.data.row)"
-                  >
-                    <ui-icon name="details" width="16" height="16" />
-                    <span>{{ localization.common.viewDetails }}</span>
-                  </div>
-                  <div
-                    class="action-remove"
-                    data-id="show-remove-tag-dialog-action"
-                    @click="onShowRemoveDialog(item.data.row)"
-                  >
-                    <ui-icon name="delete" width="16" height="16" />
-                    <span>{{ localization.common.remove }}</span>
-                  </div>
-                </div>
-              </ui-popup-window>
-            </div>
-          </template>
-        </ui-data-table>
-      </template>
-      <template #portletFooter>
-        <div class="footer">
-          <ui-button
-            test-id="show-assign-new-tag-modal"
-            variant="text"
-            is-without-height
-            is-without-sizes
-            @click="onShowAssignModal"
-          >
-            {{ localization.common.assignNew }}...
-          </ui-button>
-        </div>
-      </template>
-    </ui-portlet>
-
-    <ui-popup
-      v-if="isShowRemoveDialog"
-      test-id="remove-tag-dialog"
-      icon-name="info-status"
-      :texts="removeTagDialogTexts"
-      :message="removeTagMessage"
-      :title="localization.common.removeTag"
-      @hide="onHideRemoveDialog"
-      @submit="onRemoveTag"
-    />
-
-    <common-portlets-tag-add-new
-      v-if="isShowModal"
-      :is-show-modal="isShowModal"
-      :assign-data="assignData"
-      :selected-item-name="props.selectedItemName"
-      @add-new-tag="onAddNewTag"
-      @create-category="onCreateCategory"
-      @cancel="onHideAssignModal"
-      @assign="onAssignSelectedTags"
-    />
-
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ArbitraryObject,
-  UI_I_Localization,
-} from '~/lib/models/interfaces'
-import type {
-  UI_I_DataTable,
-  UI_I_DataTableOptions,
-  UI_I_DataTableHeader,
-  UI_I_DataTableBody,
-} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-import type { I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
-import {
-  tagTableHeaderOptions,
-  tagTableHeaderDataFunc,
-  tagsAssignBodyItemsTemporary,
-} from '~/components/common/portlets/tag/lib/config/config'
-
-const props = defineProps<{
-  portletId: string
-  dragged?: boolean
-  isOpen?: boolean
-  draggedAny?: boolean
-  selectedItemName: string
-  objectSummary: any
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShow = ref<UI_I_ArbitraryObject<boolean>>({})
-const isShowModal = ref<boolean>(false)
-const onShowAssignModal = (): void => {
-  isShowModal.value = true
-}
-
-const onHideAssignModal = (): void => {
-  isShowModal.value = false
-}
-const onShowActions = (id: number): void => {
-  isShow.value[`action-${id}`] = !isShow.value[`action-${id}`]
-}
-const onShowDetails = (_id: number): void => {
-  navigateTo('/tags-attributes/tags')
-}
-
-const isShowRemoveDialog = ref<boolean>(false)
-
-const onHideRemoveDialog = (): void => {
-  isShowRemoveDialog.value = false
-}
-const tagIdForRemove = ref<number>(0)
-const tagNameForRemove = computed<string>(
-  () =>
-    (tagsBodyItems.value.find(
-      (row: UI_I_DataTableBody) => row.row === tagIdForRemove.value
-    )?.data[0]?.text || '') as string
-)
-
-const removeTagMessage = computed<string>(() =>
-  localization.value.common.removeTagDialog
-    .replace?.('{tagName}', tagNameForRemove.value)
-    .replace('{selectedItemName}', props.selectedItemName)
-)
-const onShowRemoveDialog = (id: number): void => {
-  tagIdForRemove.value = id
-  isShowRemoveDialog.value = true
-}
-
-const removeTagDialogTexts = computed<UI_I_ModalTexts>(() => ({
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.remove,
-}))
-
-const onRemoveTag = (): void => {
-  onHideRemoveDialog()
-  tagsBodyItems.value = tagsBodyItems.value.filter(
-    (row) => row.row !== tagIdForRemove.value
-  )
-}
-
-const options: UI_I_DataTableOptions = {
-  ...tagTableHeaderOptions,
-  isSelectable: false,
-}
-
-const tagsHeadItems = computed<UI_I_DataTableHeader[]>(() =>
-  tagTableHeaderDataFunc(localization.value)
-)
-// const tagsBodyItems = computed<UI_I_TableBodyItem[][]>(() => {
-//   return $store.getters['inventory/getTags'] || []
-// })
-
-// const { $store } = useNuxtApp()
-
-const tagsBodyItems = ref<UI_I_DataTableBody[]>([])
-
-watch(
-  () => props.objectSummary,
-  (newValue: any) => {
-    let result: UI_I_DataTableBody[] = []
-    const attr = newValue.portlets?.find((portlet) => portlet.kind === 2)
-
-    if (attr) {
-      const rows = []
-
-      for (const key in attr.rows) {
-        // @ts-ignore
-        rows.push({
-          row: +key,
-          data: [
-            { col: 0, text: attr.rows[key][0] },
-            { col: 1, text: attr.rows[key][1] },
-            { col: 2, text: attr.rows[key][2] },
-            {
-              col: 3,
-              text: '',
-              key: 'icon',
-              data: {
-                icon: 'vertical-dotes',
-                row: +key,
-              },
-            },
-          ],
-        })
-      }
-      result = rows
-    }
-
-    tagsBodyItems.value = result
-  },
-  { deep: true, immediate: true }
-)
-const tagsAssignBodyItems = ref<UI_I_DataTableBody[]>(
-  useDeepCopy(tagsAssignBodyItemsTemporary)
-)
-
-const data = computed<UI_I_DataTable>(() => ({
-  id: '0',
-  selectedRows: [],
-  isAllSelected: false,
-  title: '',
-  subTitle: '',
-  header: tagsHeadItems.value,
-  body: tagsBodyItems.value,
-}))
-
-const assignData = computed<UI_I_DataTable>(() => ({
-  id: '1',
-  selectedRows: [],
-  isAllSelected: false,
-  title: '',
-  subTitle: '',
-  header: tagsHeadItems.value,
-  body: tagsAssignBodyItems.value,
-}))
-
-// const showTagModal = (): void => {
-//   isShowTagModal.value = true
-// }
-
-// const routeParams = useRoute().params
-// const routeId: string = routeParams?.id.toString()
-// const routeType: string = routeParams?.type.toString()
-// const getTags = async (): Promise<void> => {
-//   const payload: I_GetTagsPayload = {
-//     id: routeId,
-//     type: `${routeType}s`,
-//   }
-//
-//   return await $store.dispatch('inventory/A_GET_TAGS', payload)
-// }
-// getTags()
-
-const onAddNewTag = (newTag: UI_I_DataTableBody): void => {
-  tagsAssignBodyItems.value.push(newTag)
-  emits('create-new-tag', newTag)
-}
-
-const onAssignSelectedTags = async (
-  data: UI_I_DataTableBody[]
-): Promise<void> => {
-  if (data.length > 0) {
-    const sortedIds = tagsBodyItems.value.map((row: UI_I_DataTableBody) => Number(row.row)).sort()
-    let lastId = sortedIds[sortedIds.length - 1]
-    lastId = lastId === undefined ? -1 : lastId
-
-    const selectedNewTags = data.map((row, index) => {
-      return {
-        ...row,
-        row: lastId + index + 1,
-        isSelected: false,
-        data: [
-          row.data[0],
-          row.data[1],
-          row.data[2],
-          {
-            ...row.data[3],
-            key: 'icon',
-            data: {
-              icon: 'vertical-dotes',
-              row: lastId + index + 1,
-            },
-          },
-        ],
-      }
-    })
-
-    const addedTagsName = selectedNewTags.map((row) => row.data[0].text)
-
-    tagsAssignBodyItems.value = tagsAssignBodyItems.value.filter(
-      (row: UI_I_DataTableBody) => !addedTagsName.includes(row.data[0].text)
-    )
-
-    tagsBodyItems.value = [...tagsBodyItems.value, ...selectedNewTags]
-    emits('assign-new-tags', selectedNewTags)
-  }
-  onHideAssignModal()
-  // const tags = data.map((row) => {
-  //   return {
-  //     name: row[0].text,
-  //     description: row[1].text,
-  //     category: 'none',
-  //   }
-  // })
-  // const payload: I_UpdateTagsPayload = {
-  //   tags,
-  //   id: routeId,
-  //   type: `${routeType}s`,
-  // }
-  // hideTagModal()
-  // await $store.dispatch('inventory/A_UPDATE_TAGS', payload)
-  //
-  // globalRefresh()
-}
-// const globalRefresh = (): void => {
-//   $store.dispatch('main/A_GLOBAL_REFRESH', null)
-// }
-
-const onCreateCategory = (data: I_CreateCategoryData): void => {
-  emits('create-category', data)
-}
-
-const emits = defineEmits<{
-  (event: 'toggle-portlet', id: string): void
-  (event: 'create-category', value: I_CreateCategoryData): void
-  (event: 'create-new-tag', value: UI_I_DataTableBody): void
-  (event: 'assign-new-tags', value: UI_I_DataTableBody[]): void
-}>()
-
-const onTogglePortlet = (id: string): void => {
-  emits('toggle-portlet', id)
-}
-</script>
-
-<style>
-:root {
-  --table-actions-icon: #4d5d69;
-  --table-actions-icon-hover: #008fd6;
-  --table-actions-view: #182531;
-  --table-actions-remove: #ea3223;
-  --table-actions-bg-hover: #e9ebed66;
-}
-:root.dark-theme {
-  --table-actions-icon: #e9eaec;
-  --table-actions-icon-hover: #ffffff;
-  --table-actions-view: #ffffff;
-  --table-actions-remove: #ea3223;
-  --table-actions-bg-hover: #e9ebed0f;
-}
-</style>
-
-<style scoped lang="scss">
-.footer {
-  padding: 0 10px 5px;
-
-  .edit-trigger {
-    color: var(--global-text-color);
-    cursor: pointer;
-    margin-right: 10px;
-  }
-}
-
-.icon-container {
-  width: 16px;
-  height: 16px;
-  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;
-
-  &:hover {
-    background: var(--table-actions-bg-hover);
-  }
-}
-
-.footer {
-  :deep(button.ui-btn) {
-    line-height: 16px;
-    margin-bottom: 11px;
-    margin-left: 6px;
-    width: fit-content;
-  }
-}
-</style>
+<template>
+  <div>
+    <ui-portlet
+      class="tags"
+      test-id="tags-portlet"
+      :title="localization.common.assignedTags"
+      :dragged="props.dragged"
+      :dragged-any="props.draggedAny"
+      :is-open="props.isOpen"
+      :portlet-id="props.portletId"
+      @toggle="onTogglePortlet"
+    >
+      <template #portletBody>
+        <ui-data-table
+          test-id="tags-portlet-table"
+          :data="data"
+          :options="options"
+          server-off
+          :default-layout="false"
+          size="sm"
+        >
+          <!--          :loading="loading"-->
+          <template #icon="{ item }">
+            <div 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"
+                    data-id="view-tag-details-action"
+                    @click="onShowDetails(item.data.row)"
+                  >
+                    <ui-icon name="details" width="16" height="16" />
+                    <span>{{ localization.common.viewDetails }}</span>
+                  </div>
+                  <div
+                    class="action-remove"
+                    data-id="show-remove-tag-dialog-action"
+                    @click="onShowRemoveDialog(item.data.row)"
+                  >
+                    <ui-icon name="delete" width="16" height="16" />
+                    <span>{{ localization.common.remove }}</span>
+                  </div>
+                </div>
+              </ui-popup-window>
+            </div>
+          </template>
+        </ui-data-table>
+      </template>
+      <template #portletFooter>
+        <div class="footer">
+          <ui-button
+            test-id="show-assign-new-tag-modal"
+            variant="text"
+            is-without-height
+            is-without-sizes
+            @click="onShowAssignModal"
+          >
+            {{ localization.common.assignNew }}...
+          </ui-button>
+        </div>
+      </template>
+    </ui-portlet>
+
+    <ui-popup
+      v-if="isShowRemoveDialog"
+      test-id="remove-tag-dialog"
+      icon-name="info-status"
+      :texts="removeTagDialogTexts"
+      :message="removeTagMessage"
+      :title="localization.common.removeTag"
+      @hide="onHideRemoveDialog"
+      @submit="onRemoveTag"
+    />
+
+    <common-portlets-tag-add-new
+      v-if="isShowModal"
+      :is-show-modal="isShowModal"
+      :assign-data="assignData"
+      :selected-item-name="props.selectedItemName"
+      @add-new-tag="onAddNewTag"
+      @create-category="onCreateCategory"
+      @cancel="onHideAssignModal"
+      @assign="onAssignSelectedTags"
+    />
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_DataTable,
+  UI_I_DataTableOptions,
+  UI_I_DataTableHeader,
+  UI_I_DataTableBody,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
+import {
+  tagTableHeaderOptions,
+  tagTableHeaderDataFunc,
+  tagsAssignBodyItemsTemporary,
+} from '~/components/common/portlets/tag/lib/config/config'
+
+const props = defineProps<{
+  portletId: string
+  dragged?: boolean
+  isOpen?: boolean
+  draggedAny?: boolean
+  selectedItemName: string
+  objectSummary: any
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShow = ref<UI_I_ArbitraryObject<boolean>>({})
+const isShowModal = ref<boolean>(false)
+const onShowAssignModal = (): void => {
+  isShowModal.value = true
+}
+
+const onHideAssignModal = (): void => {
+  isShowModal.value = false
+}
+const onShowActions = (id: number): void => {
+  isShow.value[`action-${id}`] = !isShow.value[`action-${id}`]
+}
+const onShowDetails = (_id: number): void => {
+  navigateTo('/tags-attributes/tags')
+}
+
+const isShowRemoveDialog = ref<boolean>(false)
+
+const onHideRemoveDialog = (): void => {
+  isShowRemoveDialog.value = false
+}
+const tagIdForRemove = ref<number>(0)
+const tagNameForRemove = computed<string>(
+  () =>
+    (tagsBodyItems.value.find(
+      (row: UI_I_DataTableBody) => row.row === tagIdForRemove.value
+    )?.data[0]?.text || '') as string
+)
+
+const removeTagMessage = computed<string>(() =>
+  localization.value.common.removeTagDialog
+    .replace?.('{tagName}', tagNameForRemove.value)
+    .replace('{selectedItemName}', props.selectedItemName)
+)
+const onShowRemoveDialog = (id: number): void => {
+  tagIdForRemove.value = id
+  isShowRemoveDialog.value = true
+}
+
+const removeTagDialogTexts = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.remove,
+}))
+
+const onRemoveTag = (): void => {
+  onHideRemoveDialog()
+  tagsBodyItems.value = tagsBodyItems.value.filter(
+    (row) => row.row !== tagIdForRemove.value
+  )
+}
+
+const options: UI_I_DataTableOptions = {
+  ...tagTableHeaderOptions,
+  isSelectable: false,
+}
+
+const tagsHeadItems = computed<UI_I_DataTableHeader[]>(() =>
+  tagTableHeaderDataFunc(localization.value)
+)
+// const tagsBodyItems = computed<UI_I_TableBodyItem[][]>(() => {
+//   return $store.getters['inventory/getTags'] || []
+// })
+
+// const { $store } = useNuxtApp()
+
+const tagsBodyItems = ref<UI_I_DataTableBody[]>([])
+
+watch(
+  () => props.objectSummary,
+  (newValue: any) => {
+    let result: UI_I_DataTableBody[] = []
+    const attr = newValue.portlets?.find((portlet) => portlet.kind === 2)
+
+    if (attr) {
+      const rows = []
+
+      for (const key in attr.rows) {
+        // @ts-ignore
+        rows.push({
+          row: +key,
+          data: [
+            { col: 0, text: attr.rows[key][0] },
+            { col: 1, text: attr.rows[key][1] },
+            { col: 2, text: attr.rows[key][2] },
+            {
+              col: 3,
+              text: '',
+              key: 'icon',
+              data: {
+                icon: 'vertical-dotes',
+                row: +key,
+              },
+            },
+          ],
+        })
+      }
+      result = rows
+    }
+
+    tagsBodyItems.value = result
+  },
+  { deep: true, immediate: true }
+)
+const tagsAssignBodyItems = ref<UI_I_DataTableBody[]>(
+  useDeepCopy(tagsAssignBodyItemsTemporary)
+)
+
+const data = computed<UI_I_DataTable>(() => ({
+  id: '0',
+  selectedRows: [],
+  isAllSelected: false,
+  title: '',
+  subTitle: '',
+  header: tagsHeadItems.value,
+  body: tagsBodyItems.value,
+}))
+
+const assignData = computed<UI_I_DataTable>(() => ({
+  id: '1',
+  selectedRows: [],
+  isAllSelected: false,
+  title: '',
+  subTitle: '',
+  header: tagsHeadItems.value,
+  body: tagsAssignBodyItems.value,
+}))
+
+// const showTagModal = (): void => {
+//   isShowTagModal.value = true
+// }
+
+// const routeParams = useRoute().params
+// const routeId: string = routeParams?.id.toString()
+// const routeType: string = routeParams?.type.toString()
+// const getTags = async (): Promise<void> => {
+//   const payload: I_GetTagsPayload = {
+//     id: routeId,
+//     type: `${routeType}s`,
+//   }
+//
+//   return await $store.dispatch('inventory/A_GET_TAGS', payload)
+// }
+// getTags()
+
+const onAddNewTag = (newTag: UI_I_DataTableBody): void => {
+  tagsAssignBodyItems.value.push(newTag)
+  emits('create-new-tag', newTag)
+}
+
+const onAssignSelectedTags = async (
+  data: UI_I_DataTableBody[]
+): Promise<void> => {
+  if (data.length > 0) {
+    const sortedIds = tagsBodyItems.value.map((row: UI_I_DataTableBody) => Number(row.row)).sort()
+    let lastId = sortedIds[sortedIds.length - 1]
+    lastId = lastId === undefined ? -1 : lastId
+
+    const selectedNewTags = data.map((row, index) => {
+      return {
+        ...row,
+        row: lastId + index + 1,
+        isSelected: false,
+        data: [
+          row.data[0],
+          row.data[1],
+          row.data[2],
+          {
+            ...row.data[3],
+            key: 'icon',
+            data: {
+              icon: 'vertical-dotes',
+              row: lastId + index + 1,
+            },
+          },
+        ],
+      }
+    })
+
+    const addedTagsName = selectedNewTags.map((row) => row.data[0].text)
+
+    tagsAssignBodyItems.value = tagsAssignBodyItems.value.filter(
+      (row: UI_I_DataTableBody) => !addedTagsName.includes(row.data[0].text)
+    )
+
+    tagsBodyItems.value = [...tagsBodyItems.value, ...selectedNewTags]
+    emits('assign-new-tags', selectedNewTags)
+  }
+  onHideAssignModal()
+  // const tags = data.map((row) => {
+  //   return {
+  //     name: row[0].text,
+  //     description: row[1].text,
+  //     category: 'none',
+  //   }
+  // })
+  // const payload: I_UpdateTagsPayload = {
+  //   tags,
+  //   id: routeId,
+  //   type: `${routeType}s`,
+  // }
+  // hideTagModal()
+  // await $store.dispatch('inventory/A_UPDATE_TAGS', payload)
+  //
+  // globalRefresh()
+}
+// const globalRefresh = (): void => {
+//   $store.dispatch('main/A_GLOBAL_REFRESH', null)
+// }
+
+const onCreateCategory = (data: I_CreateCategoryData): void => {
+  emits('create-category', data)
+}
+
+const emits = defineEmits<{
+  (event: 'toggle-portlet', id: string): void
+  (event: 'create-category', value: I_CreateCategoryData): void
+  (event: 'create-new-tag', value: UI_I_DataTableBody): void
+  (event: 'assign-new-tags', value: UI_I_DataTableBody[]): void
+}>()
+
+const onTogglePortlet = (id: string): void => {
+  emits('toggle-portlet', id)
+}
+</script>
+
+<style>
+:root {
+  --table-actions-icon: #4d5d69;
+  --table-actions-icon-hover: #008fd6;
+  --table-actions-view: #182531;
+  --table-actions-remove: #ea3223;
+  --table-actions-bg-hover: #e9ebed66;
+}
+:root.dark-theme {
+  --table-actions-icon: #e9eaec;
+  --table-actions-icon-hover: #ffffff;
+  --table-actions-view: #ffffff;
+  --table-actions-remove: #ea3223;
+  --table-actions-bg-hover: #e9ebed0f;
+}
+</style>
+
+<style scoped lang="scss">
+.footer {
+  padding: 0 10px 5px;
+
+  .edit-trigger {
+    color: var(--global-text-color);
+    cursor: pointer;
+    margin-right: 10px;
+  }
+}
+
+.icon-container {
+  width: 16px;
+  height: 16px;
+  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;
+
+  &:hover {
+    background: var(--table-actions-bg-hover);
+  }
+}
+
+.footer {
+  :deep(button.ui-btn) {
+    line-height: 16px;
+    margin-bottom: 11px;
+    margin-left: 6px;
+    width: fit-content;
+  }
+}
+</style>