bfg-common 1.4.353 → 1.4.355

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

@@ -0,0 +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>

package/components/common/portlets/tag/lib/config/config.ts

@@ -0,0 +1,200 @@
+import type {
+  UI_I_DataTableOptions,
+  UI_I_DataTableBody,
+  UI_I_DataTableHeader,
+} 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_Localization } from '~/lib/models/interfaces'
+import type { I_CreateCategoryData } from '~/components/common/portlets/tag/lib/models/interfaces'
+import type { T_CreateCategoryTypes } from '~/components/common/portlets/tag/lib/models/types'
+export const createCategoryData: I_CreateCategoryData = {
+  categoryName: '',
+  description: '',
+  tagsPerObject: '0',
+  types: {
+    folder: false,
+    datacenter: false,
+    datastoreCluster: false,
+    distributedSwitch: false,
+    contentLibrary: false,
+    network: false,
+    vApp: false,
+    cluster: false,
+    datastore: false,
+    distributedPortGroup: false,
+    host: false,
+    libraryItem: false,
+    resourcePool: false,
+    virtualMachine: false,
+  },
+}
+
+export const createCategoryTypes: Readonly<T_CreateCategoryTypes> = [
+  'folder',
+  'datacenter',
+  'datastoreCluster',
+  'distributedSwitch',
+  'contentLibrary',
+  'network',
+  'vApp',
+  'cluster',
+  'datastore',
+  'distributedPortGroup',
+  'host',
+  'libraryItem',
+  'resourcePool',
+  'virtualMachine',
+] as const
+
+export const tagTableHeaderOptions: UI_I_DataTableOptions = {
+  perPageOptions: [],
+  isSelectable: true,
+  selectType: 'checkbox',
+  showPagination: false,
+  showPageInfo: false,
+  isSortable: true,
+  server: false,
+  isResizable: false,
+  showSearch: false,
+  showColumnManager: false,
+}
+
+export const temporaryCategories: UI_I_Dropdown[] = [
+  {
+    text: 'Category1',
+    value: 'Category1',
+    selected: false,
+  },
+  {
+    text: 'Category2',
+    value: 'Category2',
+    selected: false,
+  },
+  {
+    text: 'Category3',
+    value: 'Category3',
+    selected: false,
+  },
+  {
+    text: 'Category4',
+    value: 'Category4',
+    selected: false,
+  },
+]
+
+export const makeNewTagCreateActionRowFunc = (
+  row: number
+): UI_I_DataTableBody => ({
+  row,
+  isSelected: false,
+  actionRow: true,
+  data: [
+    {
+      col: 0,
+      text: '',
+      key: 'icon',
+      data: {
+        type: 'tagName',
+      },
+    },
+    {
+      col: 1,
+      text: '',
+      key: 'icon',
+      data: {
+        type: 'category',
+      },
+    },
+    {
+      col: 2,
+      text: '',
+      key: 'icon',
+      data: {
+        type: 'description',
+      },
+    },
+    {
+      col: 3,
+      text: '',
+      key: 'icon',
+      data: {
+        type: 'actions',
+      },
+    },
+  ],
+})
+
+export const tagTableHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 0,
+    colName: 'Tag Name',
+    text: localization.common.tagName,
+    isSortable: true,
+    sort: 'asc',
+    width: '31%',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 1,
+    colName: 'Category',
+    text: localization.common.category,
+    isSortable: true,
+    sort: 'asc',
+    width: '31%',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 2,
+    colName: 'Description',
+    text: localization.common.description,
+    isSortable: true,
+    sort: 'asc',
+    width: '31%',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 3,
+    colName: '',
+    text: '',
+    width: '7%',
+    show: true,
+  },
+]
+
+export const tagsAssignBodyItemsTemporary: UI_I_DataTableBody[] = [
+  {
+    row: 0,
+    isSelected: false,
+    data: [
+      { col: 0, text: 'test1' },
+      { col: 1, text: 'test1' },
+      { col: 2, text: 'test1' },
+      { col: 3, text: '' },
+    ],
+  },
+  {
+    row: 1,
+    isSelected: false,
+    data: [
+      { col: 0, text: 'test2' },
+      { col: 1, text: 'test2' },
+      { col: 2, text: 'test2' },
+      { col: 3, text: '' },
+    ],
+  },
+  {
+    row: 2,
+    isSelected: false,
+    data: [
+      { col: 0, text: 'test3' },
+      { col: 1, text: 'test3' },
+      { col: 2, text: 'test3' },
+      { col: 3, text: '' },
+    ],
+  },
+]

package/components/common/portlets/tag/lib/models/interfaces.ts

@@ -0,0 +1,27 @@
+export interface I_CreateCategoryData {
+  categoryName: string
+  description: string
+  tagsPerObject: '0' | '1'
+  types: {
+    folder: boolean
+    datacenter: boolean
+    datastoreCluster: boolean
+    distributedSwitch: boolean
+    contentLibrary: boolean
+    network: boolean
+    vApp: boolean
+    cluster: boolean
+    datastore: boolean
+    distributedPortGroup: boolean
+    host: boolean
+    libraryItem: boolean
+    resourcePool: boolean
+    virtualMachine: boolean
+  }
+}
+
+export interface I_NewTagData {
+  tagName: string
+  category: string
+  description: string
+}

package/components/common/portlets/tag/lib/models/types.ts

@@ -0,0 +1,16 @@
+export type T_CreateCategoryTypes = [
+  'folder',
+  'datacenter',
+  'datastoreCluster',
+  'distributedSwitch',
+  'contentLibrary',
+  'network',
+  'vApp',
+  'cluster',
+  'datastore',
+  'distributedPortGroup',
+  'host',
+  'libraryItem',
+  'resourcePool',
+  'virtualMachine'
+]