@webitel/ui-sdk 25.12.53 → 25.12.55

package/src/modules/AgentPdfs/components/agent-pdfs-tab.vue

@@ -0,0 +1,257 @@
+<template>
+  <section class="table-wrapper table-page table-wrapper--tab-table">
+    <header class="table-title">
+      <h3 class="table-title__title">
+        {{ t('objects.agentPdfs.pdfs', 2) }}
+      </h3>
+      <slot
+        name="action-bar"
+        :selected="selected"
+        :load-data-list="loadDataList"
+        :ask-delete-confirmation="askDeleteConfirmation"
+        :handle-delete="handleDelete"
+      />
+    </header>
+
+    <delete-confirmation-popup
+      :shown="isDeleteConfirmationPopup"
+      :callback="deleteCallback"
+      :delete-count="deleteCount"
+      @close="closeDelete"
+    />
+
+    <wt-loader v-show="isLoading" />
+
+    <wt-empty
+      v-show="showEmpty"
+      :image="imageEmpty"
+      :text="textEmpty"
+    />
+
+    <div v-show="!isLoading" class="table-loading-wrapper">
+      <wt-table
+        v-if="dataList?.length"
+        :data="dataList"
+        :headers="shownHeaders"
+        :selected="selected"
+        sortable
+        @sort="updateSort"
+        @update:selected="updateSelected"
+      >
+        <template #preview="{ item }">
+          <pdf-status-preview
+            :status="item.status"
+            :clickable="item.status === WebitelMediaExporterExportStatus.Done"
+            @click="openPdfInNewWindow(item.fileId)"
+          />
+        </template>
+
+        <template #name="{ item }">
+          {{ item.name }}
+        </template>
+
+        <template #status="{ item }">
+          <pdf-status :status="item.status" />
+        </template>
+
+        <template #valid_until="{ item }">
+          {{ prettifyTimestamp(item.validUntil) }}
+        </template>
+
+        <template #created_at="{ item }">
+          {{ prettifyTimestamp(item.createdAt) }}
+        </template>
+
+        <template #created_by="{ item }">
+          {{ item.createdBy }}
+        </template>
+
+        <template #actions="{ item }">
+          <wt-icon-action
+            action="download"
+            :disabled="item.status !== WebitelMediaExporterExportStatus.Done"
+            @click="downloadPdf(item.fileId)"
+          />
+          <wt-icon-action
+            action="delete"
+            @click="
+              askDeleteConfirmation({
+                deleted: [item],
+                callback: () => handleDelete([item]),
+              })
+            "
+          />
+        </template>
+      </wt-table>
+
+      <wt-pagination
+        :next="next"
+        :prev="page > 1"
+        :size="size"
+        debounce
+        @change="updateSize"
+        @next="updatePage(page + 1)"
+        @prev="updatePage(page - 1)"
+      />
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { downloadFile, getMediaUrl } from '@webitel/api-services/api';
+import { FileServicesAPI, PdfServicesAPI } from '@webitel/api-services/api';
+import { WebitelMediaExporterExportStatus } from '@webitel/api-services/gen/models';
+import { WebitelMediaExporterExportRecord } from '@webitel/api-services/gen/models';
+import { WtEmpty } from '@webitel/ui-sdk/components';
+import { getEndOfDay,getStartOfDay } from '@webitel/ui-sdk/scripts';
+import DeleteConfirmationPopup
+  from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
+import {
+  useDeleteConfirmationPopup,
+} from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+import { useTableEmpty } from '@webitel/ui-sdk/src/modules/TableComponentModule/composables/useTableEmpty';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import PdfStatus from './pdf-status.vue';
+import PdfStatusPreview from './pdf-status-preview.vue';
+
+interface Props {
+  store?: any;
+  entityIdKey?: string;
+  entityIdValue?: string | number;
+  onDeleteItem?: (item: WebitelMediaExporterExportRecord) => Promise<void>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  store: undefined,
+  entityIdKey: undefined,
+  entityIdValue: undefined,
+  onDeleteItem: undefined,
+});
+
+const { t } = useI18n();
+
+const tableStore = props.store;
+
+const {
+  dataList,
+  selected,
+  error,
+  isLoading,
+  page,
+  size,
+  next,
+  shownHeaders,
+  filtersManager,
+} = storeToRefs(tableStore);
+
+const {
+  initialize,
+  loadDataList,
+  updateSelected,
+  updatePage,
+  updateSize,
+  updateSort,
+  hasFilter,
+  addFilter,
+} = tableStore;
+
+initialize();
+
+const initializeDefaultFilters = () => {
+  if (props.entityIdKey && props.entityIdValue) {
+    addFilter({
+      name: props.entityIdKey,
+      value: props.entityIdValue,
+    });
+  }
+
+  if (!hasFilter('createdAtFrom')) {
+    addFilter({
+      name: 'createdAtFrom',
+      value: getStartOfDay(),
+    });
+  }
+
+  if (!hasFilter('createdAtTo')) {
+    addFilter({
+      name: 'createdAtTo',
+      value: getEndOfDay(),
+    });
+  }
+};
+
+initializeDefaultFilters();
+
+const prettifyTimestamp = (timestamp: string | number) => {
+  if (!timestamp) return '';
+  return new Date(+timestamp).toLocaleString();
+};
+
+const {
+  isVisible: isDeleteConfirmationPopup,
+  deleteCount,
+  deleteCallback,
+
+  askDeleteConfirmation,
+  closeDelete,
+} = useDeleteConfirmationPopup();
+
+const {
+  showEmpty,
+  image: imageEmpty,
+  text: textEmpty,
+} = useTableEmpty({
+  dataList,
+  error,
+  filters: computed(() => filtersManager.value.getAllValues()),
+  isLoading,
+});
+
+const handleDelete = async (items: []) => {
+  const deleteEl = (el) => {
+    // If status is failed, use deletePdfExportRecord with the export id
+    if (el.status === WebitelMediaExporterExportStatus.Failed) {
+      return PdfServicesAPI.delete(el.id);
+    }
+    // Otherwise, use custom delete function if provided
+    if (props.onDeleteItem) {
+      return props.onDeleteItem(el);
+    }
+    // Fallback to default implementation
+    return FileServicesAPI.deleteScreenRecordingsByAgent({
+      id: el.fileId,
+      agentId: props.entityIdValue,
+    });
+  };
+
+  try {
+    await Promise.all(items.map(deleteEl));
+  } finally {
+    // If we're deleting all items from the current page, and we're not on the first page,
+    // we should go to the previous page
+    if (items.length === dataList.value.length && page.value > 1) {
+      updatePage(page.value - 1);
+    }
+    await loadDataList();
+  }
+};
+
+const downloadPdf = async (id: string) => {
+  await downloadFile(id);
+};
+
+const openPdfInNewWindow = (fileId: string) => {
+  try {
+    const pdfUrl = getMediaUrl(fileId);
+    window.open(pdfUrl, '_blank');
+  } catch (error) {
+    console.error('Error opening PDF:', error);
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
+

package/src/modules/AgentPdfs/components/pdf-status-preview.vue

@@ -0,0 +1,55 @@
+<template>
+  <wt-image
+    :src="statusImage"
+    :alt="status"
+    width="48"
+    :overlay-icon="overlayIcon"
+    @click="handleClick"
+  />
+</template>
+
+<script lang="ts" setup>
+import { WebitelMediaExporterExportStatus } from '@webitel/api-services/gen/models';
+import { computed } from 'vue';
+
+import doneImage from '../assets/pdf-done.png';
+import errorImage from '../assets/pdf-error.png';
+import pendingImage from '../assets/pdf-pending.png';
+import processingImage from '../assets/pdf-processing.png';
+
+export type PdfExportStatusType = typeof WebitelMediaExporterExportStatus[keyof typeof WebitelMediaExporterExportStatus];
+
+const props = defineProps<{
+  status: PdfExportStatusType | string;
+  clickable?: boolean;
+}>();
+
+const emit = defineEmits<{
+  click: () => void;
+}>();
+
+const statusImageMap: Record<string, string> = {
+  [WebitelMediaExporterExportStatus.Pending]: pendingImage,
+  [WebitelMediaExporterExportStatus.Processing]: processingImage,
+  [WebitelMediaExporterExportStatus.Done]: doneImage,
+  [WebitelMediaExporterExportStatus.Failed]: errorImage,
+};
+
+const statusImage = computed(() =>
+  statusImageMap[props.status] || pendingImage,
+);
+
+const overlayIcon = computed(() => {
+  return props.status === WebitelMediaExporterExportStatus.Done && 'zoom-in';
+});
+
+const handleClick = () => {
+  if (props.clickable) {
+    emit('click');
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
+

package/src/modules/AgentPdfs/components/pdf-status.vue

@@ -0,0 +1,67 @@
+<template>
+  <span :class="[`pdf-status--${statusConfig.color}`]">
+    {{ statusConfig.text }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { WebitelMediaExporterExportStatus } from '@webitel/api-services/gen/models';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export type PdfExportStatusType = typeof WebitelMediaExporterExportStatus[keyof typeof WebitelMediaExporterExportStatus];
+
+interface Props {
+  status: PdfExportStatusType;
+}
+
+const props = defineProps<Props>();
+const { t } = useI18n();
+
+const STATUS_MAP = {
+  [WebitelMediaExporterExportStatus.Pending]: {
+    text: `objects.agentPdfs.status.${WebitelMediaExporterExportStatus.Pending}`,
+    color: 'main',
+  },
+  [WebitelMediaExporterExportStatus.Processing]: {
+    text: `objects.agentPdfs.status.${WebitelMediaExporterExportStatus.Processing}`,
+    color: 'warning',
+  },
+  [WebitelMediaExporterExportStatus.Done]: {
+    text: `objects.agentPdfs.status.${WebitelMediaExporterExportStatus.Done}`,
+    color: 'success',
+  },
+  [WebitelMediaExporterExportStatus.Failed]: {
+    text: `objects.agentPdfs.status.${WebitelMediaExporterExportStatus.Failed}`,
+    color: 'error',
+  },
+} as const;
+
+const statusConfig = computed(() => {
+  const config = STATUS_MAP[props.status as keyof typeof STATUS_MAP];
+  return config
+    ? { text: t(config.text), color: config.color }
+    : { text: props.status, color: 'main' };
+});
+</script>
+
+<style lang="scss" scoped>
+.pdf-status {
+  &--main {
+    color: var(--main-color);
+  }
+
+  &--warning {
+    color: var(--warning-color);
+  }
+
+  &--success {
+    color: var(--success-color);
+  }
+
+  &--error {
+    color: var(--error-color);
+  }
+}
+</style>
+

package/types/enums/MimeTypes/MimeTypes.enum.d.ts

@@ -0,0 +1,16 @@
+export declare const MimeTypes: {
+    readonly IMAGE_JPEG: "image/jpeg";
+    readonly IMAGE_PNG: "image/png";
+    readonly IMAGE_GIF: "image/gif";
+    readonly IMAGE_SVG_XML: "image/svg+xml";
+    readonly IMAGE_WEBP: "image/webp";
+    readonly VIDEO_MP4: "video/mp4";
+    readonly VIDEO_WEBM: "video/webm";
+    readonly VIDEO_MPEG: "video/mpeg";
+    readonly AUDIO_MPEG: "audio/mpeg";
+    readonly AUDIO_WAV: "audio/wav";
+    readonly APPLICATION_PDF: "application/pdf";
+    readonly APPLICATION_MSWORD: "application/msword";
+    readonly APPLICATION_DOCX: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+};
+export type MimeTypes = (typeof MimeTypes)[keyof typeof MimeTypes];

package/types/enums/index.d.ts

@@ -11,6 +11,7 @@ import { EmptyCause } from './EmptyCause/EmptyCause';
 import { FormatDateMode } from './FormatDateMode/FormatDateMode';
 import IconAction from './IconAction/IconAction.enum.js';
 import { IconColor } from './IconColor/IconColor';
+import { MimeTypes } from './MimeTypes/MimeTypes.enum';
 import { ProcessingTableColumnType } from './ProcessingTableColumnType/ProcessingTableColumnType';
 import { QueueType, QueueTypeName } from './QueueType/QueueType.enum';
 import { RelativeDatetimeValue } from './RelativeDatetimeValue/RelativeDatetimeValue';
@@ -24,4 +25,4 @@ import { WfmSections } from './WebitelApplications/WfmSections';
 import { WtApplication } from './WebitelApplications/WtApplication';
 import { WtObject } from './WtObject/WtObject';
 import { WtTypeExtensionFieldKind } from './WtTypeExtensionFieldKind/WtTypeExtensionFieldKind';
-export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ButtonVariant, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, FormatDateMode, IconAction, IconColor, ProcessingTableColumnType, ProviderIconType, QueueType, QueueTypeName, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WfmSections, WtApplication, WtObject, WtTypeExtensionFieldKind, };
+export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ButtonVariant, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, FormatDateMode, IconAction, IconColor, MimeTypes, ProcessingTableColumnType, ProviderIconType, QueueType, QueueTypeName, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WfmSections, WtApplication, WtObject, WtTypeExtensionFieldKind, };

package/types/locale/en/en.d.ts

@@ -34,6 +34,7 @@ declare const _default: {
         to: string;
         tts: string;
         state: string;
+        status: string;
         refresh: string;
         retry: string;
         downloadAll: string;
@@ -210,6 +211,16 @@ declare const _default: {
         };
         screenRecordings: string;
         screenshots: string;
+        agentPdfs: {
+            pdfs: string;
+            preview: string;
+            status: {
+                PENDING: string;
+                PROCESSING: string;
+                DONE: string;
+                FAILED: string;
+            };
+        };
     };
     channel: {
         state: {

package/types/locale/es/es.d.ts

@@ -38,6 +38,7 @@ declare namespace _default {
         export let to: string;
         export let tts: string;
         export let state: string;
+        export let status: string;
         export let refresh: string;
         export let retry: string;
         export let downloadAll: string;
@@ -192,12 +193,13 @@ declare namespace _default {
         export namespace agent {
             let agent_1: string;
             export { agent_1 as agent };
-            export let status: {
+            let status_1: {
                 [x: number]: string;
                 online: string;
                 pause: string;
                 offline: string;
             };
+            export { status_1 as status };
         }
         export namespace flow {
             let name_1: string;
@@ -228,6 +230,17 @@ declare namespace _default {
         }
         export let screenRecordings: string;
         export let screenshots: string;
+        export namespace agentPdfs {
+            export let pdfs: string;
+            export let preview: string;
+            export namespace status_2 {
+                let PENDING: string;
+                let PROCESSING: string;
+                let DONE: string;
+                let FAILED: string;
+            }
+            export { status_2 as status };
+        }
     }
     export namespace channel_1 {
         let state_1: {
@@ -262,8 +275,8 @@ declare namespace _default {
         export { direction_1 as direction };
     }
     export namespace cases {
-        let status_1: string;
-        export { status_1 as status };
+        let status_3: string;
+        export { status_3 as status };
         export let source: string;
         export let author: string;
         export let reporter: string;
@@ -894,10 +907,10 @@ declare namespace _default {
                 linked: any;
             }): any;
             export { source_1 as source };
-            export function status_2({ linked }: {
+            export function status_4({ linked }: {
                 linked: any;
             }): any;
-            export { status_2 as status };
+            export { status_4 as status };
             export function tag_1({ linked }: {
                 linked: any;
             }): any;