914 lines
39 KiB
Vue
914 lines
39 KiB
Vue
<template>
|
|
<div class="flex items-center justify-between p-1">
|
|
<h1>
|
|
{{ scenario.name }}
|
|
</h1>
|
|
</div>
|
|
<div class="flex items-center justify-between p-1">
|
|
<h2>
|
|
{{ scenario.description }}
|
|
</h2>
|
|
</div>
|
|
<div v-if="data_loaded && chat_enabled" class="flex mt-6 justify-center">
|
|
<div class="card flex flex-col gap-4 w-full items-center">
|
|
<Button label="Return to scenario" @click="chatDisabled" size="large" iconPos="right" icon="pi pi-backward" class="w-auto"></Button>
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex mt-2">
|
|
<div class="card flex flex-col w-full">
|
|
<MdPreview :class="['markdown-content', 'ml-[-20px]']" v-model="scenario.hint" language="en-US" />
|
|
<template v-if="scenario.inputs">
|
|
<div class="grid grid-cols-2 md:grid-cols-1">
|
|
<div v-for="input in scenario.inputs" :key="input.name">
|
|
<div v-if="input.type === 'singlefile' || input.type === 'singlefile_acceptall'">
|
|
<label :for="input.name">
|
|
<b>{{ input.label }}</b>
|
|
<i class="pi pi-info-circle text-violet-600 cursor-pointer" v-tooltip="'Upload one document from the suggested types. Mandatory if you want to execute scenario.'"></i>
|
|
</label>
|
|
<div>
|
|
<FileUpload
|
|
:name="'MultiFileUpload'"
|
|
:customUpload="false"
|
|
:url="uploadUrlPR"
|
|
@upload="(event) => onUpload(event, 'SingleFileUpload')"
|
|
:multiple="false"
|
|
:accept="acceptedFormats"
|
|
auto
|
|
:showUploadButton="false"
|
|
:showCancelButton="false"
|
|
:maxFileSize="20971520"
|
|
:invalidFileSizeMessage="'Invalid file size, file size should be smaller than 20 MB'"
|
|
v-model:files="uploadedFiles"
|
|
@before-send="onBeforeSend"
|
|
|
|
>
|
|
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
|
|
<div class="pt-4">
|
|
<!-- Tabella per file in caricamento -->
|
|
<div v-if="uploadedFiles.length > 0">
|
|
<table class="table-auto w-full border-collapse border border-gray-200">
|
|
<thead>
|
|
<tr>
|
|
<th class="border border-gray-300 p-2">Name</th>
|
|
<th class="border border-gray-300 p-2">Dimension</th>
|
|
<th class="border border-gray-300 p-2">Status</th>
|
|
<th class="border border-gray-300 p-2">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(file, index) in uploadedFiles" :key="file.name + file.size" class="hover:bg-gray-50">
|
|
<td class="border border-gray-300 p-2">{{ file.name }}</td>
|
|
<td class="border border-gray-300 p-2">{{ formatSize(file.size) }}</td>
|
|
<td class="border border-gray-300 p-2">
|
|
<Badge value="UPLOADED" severity="success" />
|
|
</td>
|
|
<td class="border border-gray-300 p-2">
|
|
<Button label="Remove" @click="onRemove({ file, index }, removeUploadedFileCallback, 'SingleFileUpload')" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #empty>
|
|
<div class="flex items-center justify-center flex-col">
|
|
<!-- <i class="pi pi-cloud-upload !border border-black !rounded-full !w-21 !h-21 !p-6 !text-4xl !text-muted-color" /> -->
|
|
<div class="!border !border-violet-600 !rounded-full !w-24 !h-24 flex items-center justify-center">
|
|
<i class="pi pi-cloud-upload !text-4xl !-violet-600"></i>
|
|
</div>
|
|
<p class="mt-2 mb-2 text-m">Drag and drop files here to upload.</p>
|
|
</div>
|
|
</template>
|
|
</FileUpload>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="input.type === 'multifile'">
|
|
<label :for="input.name">
|
|
<b>{{ input.label }} </b>
|
|
<i class="pi pi-info-circle text-violet-600 cursor-pointer" v-tooltip="'Upload others documents of .docx, .msg, .text type. Optional.'"></i>
|
|
</label>
|
|
<div>
|
|
<FileUpload
|
|
:name="'MultiFileUpload'"
|
|
:customUpload="false"
|
|
:url="uploadUrlOther"
|
|
@upload="(event) => onUpload(event, 'MultiFileUpload')"
|
|
:multiple="true"
|
|
accept=".msg,.txt,.docx"
|
|
auto
|
|
:showUploadButton="false"
|
|
:showCancelButton="false"
|
|
:maxFileSize="20971520"
|
|
v-model:files="uploadedFiles"
|
|
@before-send="onBeforeSend"
|
|
|
|
>
|
|
>
|
|
<template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
|
|
<div class="pt-4">
|
|
<!-- Tabella per file in caricamento -->
|
|
<div v-if="uploadedFiles.length > 0">
|
|
<table class="table-auto w-full border-collapse border border-gray-200">
|
|
<thead>
|
|
<tr>
|
|
<th class="border border-gray-300 p-2">Name</th>
|
|
<th class="border border-gray-300 p-2">Dimension</th>
|
|
<th class="border border-gray-300 p-2">Status</th>
|
|
<th class="border border-gray-300 p-2">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(file, index) in uploadedFiles" :key="file.name + file.size" class="hover:bg-gray-50">
|
|
<td class="border border-gray-300 p-2">{{ file.name }}</td>
|
|
<td class="border border-gray-300 p-2">{{ formatSize(file.size) }}</td>
|
|
<td class="border border-gray-300 p-2">
|
|
<Badge value="UPLOADED" severity="success" />
|
|
</td>
|
|
<td class="border border-gray-300 p-2">
|
|
<Button label="Remove" @click="onRemove({ file, index }, removeUploadedFileCallback, 'MultiFileUpload')" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #empty>
|
|
<div class="flex items-center justify-center flex-col">
|
|
<!-- <i class="pi pi-cloud-upload !border border-black !rounded-full !w-21 !h-21 !p-6 !text-4xl !text-muted-color" /> -->
|
|
<div class="!border !border-violet-600 !rounded-full !w-24 !h-24 flex items-center justify-center">
|
|
<i class="pi pi-cloud-upload !text-4xl !-violet-600"></i>
|
|
</div>
|
|
<p class="mt-2 mb-0 text-m">Drag and drop files here to upload.</p>
|
|
</div>
|
|
</template>
|
|
</FileUpload>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="input.type === 'multiselect'" class="mt-4">
|
|
<label :for="input.name">
|
|
<b>{{ input.label }}</b>
|
|
</label>
|
|
<div class="input-wrapper">
|
|
<MultiSelect v-model="formData[input.name]" :options="videoGroups" optionLabel="name" filter placeholder="Select VideoGroups" class="w-full md:w-80" />
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<label :for="input.name"
|
|
><b>{{ input.label }}</b></label
|
|
>
|
|
<div class="input-wrapper">
|
|
<component :is="getInputComponent(input.type)" :id="input.name" v-model="formData[input.name]" :options="input.options" class="full-width-input" :disabled="loadingStore.exectuion_loading" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="data_loaded && scenario.chatEnabled" class="flex justify-center">
|
|
<div v-if="!chat_enabled" class="flex gap-4 mt-6">
|
|
<Button :disabled="loadingStore.exectuion_loading || !isInputFilled" label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
|
|
<Button label="Open Chat" @click="chatEnabled" size="large" iconPos="right" icon="pi pi-comments"></Button>
|
|
</div>
|
|
<!-- <div v-else>
|
|
<Button label="Return to scenario" @click="chatDisabled" size="large" iconPos="right" icon="pi pi-backward"></Button>
|
|
</div> -->
|
|
</div>
|
|
<div v-else class="flex justify-center mt-6">
|
|
<Button :disabled="loadingStore.exectuion_loading || !isInputFilled" label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loading_data" class="flex flex-col items-center">
|
|
<div class="flex justify-center mt-4">
|
|
<jellyfish-loader :loading="loadingStore.exectuion_loading" scale="1" color="#A100FF" />
|
|
</div>
|
|
<div v-if="scenario_response_message && scenario_response_message.includes('/')">
|
|
<span>{{ scenario_response_message }}</span>
|
|
</div>
|
|
<div v-else>Starting execution...</div>
|
|
<div class="flex justify-center" style="margin-bottom: 30px">
|
|
<p>Time elapsed: </p>
|
|
<div id="timer" class="timer">00:00</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="data_loaded && !chat_enabled">
|
|
<Panel class="mt-6">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold">Workflow Response</span>
|
|
</div>
|
|
</template>
|
|
|
|
<template #icons>
|
|
<div class="flex justify-end">
|
|
<div class="flex">
|
|
<Rating :modelValue="rating" :stars="5" @change="updateRating($event)" />
|
|
</div>
|
|
|
|
<div>
|
|
<Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
|
|
<i class="pi pi-code"></i>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="card flex flex-col gap-4 w-full">
|
|
<div v-if="scenario.outputType == 'ciaOutput'">
|
|
<ChangeImpactOutputViewer :scenario_output="scenario_output" />
|
|
</div>
|
|
<div v-if="scenario.outputType == 'file'">
|
|
<Button icon="pi pi-download" label="Download File" class="p-button-primary" @click="downloadFile" />
|
|
</div>
|
|
<div v-else>
|
|
<!-- <div v-if="fileNamesOutput.length">
|
|
<ul>
|
|
<li v-for="(file, idx) in fileNamesOutput" :key="idx" class="file-item">
|
|
{{ file }}
|
|
<Button
|
|
icon="pi pi-download"
|
|
class="p-button-text p-button-sm"
|
|
label="Download"
|
|
@click="downloadZipFile(file)"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</div> -->
|
|
<div v-if="fileType == 'FILE'">
|
|
<ul>
|
|
<li class="file-item">
|
|
sf_document-{{ exec_id }}
|
|
<Button icon="pi pi-download" class="p-button-text p-button-sm" label="Download" @click="downloadFile()" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div v-else-if="fileType == 'MARKDOWN'">
|
|
<div v-html="fileContent" class="markdown-content"></div>
|
|
</div>
|
|
<div v-else-if="fileType == 'JSON'">
|
|
<pre>{{ fileContent }}</pre>
|
|
</div>
|
|
<div v-else>
|
|
<MdPreview class="editor" v-model="scenario_output" language="en-US" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
<Dialog v-model:visible="debug_modal" maximizable modal :header="scenario.name" :style="{ width: '75%' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
|
|
<div class="flex">
|
|
<div class="card flex flex-col gap-4 w-full">
|
|
<JsonEditorVue v-model="exec_scenario" />
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</div>
|
|
<div v-if="data_loaded && chat_enabled" class="mt-4">
|
|
<Panel class="mt-6">
|
|
<template #header>
|
|
<div class="flex items-center gap-2 mt-2">
|
|
<span class="font-bold">Chat with WizardAI</span>
|
|
</div>
|
|
</template>
|
|
<div class="card flex flex-col gap-4 w-full">
|
|
<ChatClient :scenarioExecutionId="exec_id" />
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
|
|
import ChatClient from '@/components/ChatClient.vue';
|
|
import { KsVideoGroupStore } from '@/stores/KsVideoGroupStore';
|
|
import { LoadingStore } from '@/stores/LoadingStore';
|
|
import { UserPrefStore } from '@/stores/UserPrefStore';
|
|
import { useAuth } from '@websanova/vue-auth/src/v3.js';
|
|
import axios from 'axios';
|
|
import JsonEditorVue from 'json-editor-vue';
|
|
import JSZip from 'jszip';
|
|
import { marked } from 'marked';
|
|
import { MdPreview } from 'md-editor-v3';
|
|
import 'md-editor-v3/lib/style.css';
|
|
import moment from 'moment';
|
|
import { usePrimeVue } from 'primevue/config';
|
|
import InputText from 'primevue/inputtext';
|
|
import MultiSelect from 'primevue/multiselect';
|
|
import Select from 'primevue/select';
|
|
import Textarea from 'primevue/textarea';
|
|
import { useConfirm } from 'primevue/useconfirm';
|
|
import { useToast } from 'primevue/usetoast';
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { JellyfishLoader } from 'vue3-spinner';
|
|
import { ScenarioService } from '../../service/ScenarioService';
|
|
|
|
const loadingStore = LoadingStore();
|
|
const toast = useToast();
|
|
const zip = ref(null);
|
|
const route = useRoute();
|
|
const rating = ref(0);
|
|
const scenario = ref({});
|
|
const scenario_response = ref(null);
|
|
const scenario_output = ref(null);
|
|
const scenario_response_message = ref(null);
|
|
const loading = ref(false);
|
|
const data_loaded = ref(false);
|
|
const loading_data = ref(false);
|
|
const formData = ref({});
|
|
const exec_id = ref(null);
|
|
const exec_scenario = ref({});
|
|
const debug_modal = ref(false);
|
|
let pollingInterval = null;
|
|
const folderName = ref('');
|
|
const fileNamesOutput = ref([]);
|
|
const ksVideoGroupStore = KsVideoGroupStore();
|
|
const userPrefStore = UserPrefStore();
|
|
const videoGroups = ref([]);
|
|
// URL di upload
|
|
const uploadUrlBase = import.meta.env.VITE_BACKEND_URL;
|
|
const uploadUrl = ref('');
|
|
const uploadUrlPR = ref('');
|
|
const uploadUrlOther = ref('');
|
|
// File che l'utente ha selezionato
|
|
const uploadedFiles = ref([]);
|
|
const numberPrFiles = ref(0);
|
|
const acceptedFormats = ref('.docx');
|
|
// :url="`http://localhost:8081/uploadListFiles/${folderName}`"
|
|
|
|
// Stato per l'ID univoco della cartella
|
|
const uniqueFolderId = ref(generateUniqueId());
|
|
const confirm = useConfirm();
|
|
|
|
const $primevue = usePrimeVue();
|
|
const files = ref([]);
|
|
const fileContent = ref('');
|
|
const fileType = ref('');
|
|
const reqMultiFile = ref(false);
|
|
const chat_enabled = ref(false);
|
|
const auth = useAuth();
|
|
|
|
let startTime = ref(null);
|
|
let timerInterval = ref(null);
|
|
|
|
function startTimer() {
|
|
startTime = Date.now();
|
|
timerInterval = setInterval(() => {
|
|
const elapsedTime = moment.duration(Date.now() - startTime);
|
|
document.getElementById('timer').textContent = moment.utc(elapsedTime.asMilliseconds()).format('mm:ss');
|
|
}, 1000);
|
|
}
|
|
|
|
function stopTimer() {
|
|
clearInterval(timerInterval);
|
|
}
|
|
|
|
const isInputFilled = computed(() => {
|
|
var isFilled = true;
|
|
if (scenario.value.inputs === undefined) {
|
|
console.log('No inputs found');
|
|
return false;
|
|
}
|
|
scenario.value.inputs.forEach((input) => {
|
|
if (formData.value[input.name] === undefined || formData.value[input.name] === '') {
|
|
console.log('Input not filled: ', input.name);
|
|
isFilled = false;
|
|
} else {
|
|
const processedData = { ...formData.value };
|
|
if (processedData.video_group) {
|
|
|
|
processedData.video_group = JSON.stringify(
|
|
processedData.video_group.map((item) => item.id)
|
|
);
|
|
}
|
|
}
|
|
});
|
|
return isFilled;
|
|
});
|
|
|
|
onMounted(() => {
|
|
fetchScenario(route.params.id);
|
|
loadVideoGroups();
|
|
const timestamp = Date.now(); // Ottiene il timestamp corrente
|
|
const randomNumber = Math.floor(Math.random() * 1000);
|
|
folderName.value = `${timestamp}_${randomNumber}`;
|
|
uploadUrl.value = uploadUrlBase + '/uploadListFiles/' + folderName.value;
|
|
uploadUrlPR.value = uploadUrl.value + '/PR';
|
|
uploadUrlOther.value = uploadUrl.value + '/OTHER';
|
|
console.log('Upload URL:', uploadUrl);
|
|
});
|
|
|
|
const loadVideoGroups = async () => {
|
|
await ksVideoGroupStore.fetchKsVideoGroup(userPrefStore.selectedProject.id).then(async () => {
|
|
videoGroups.value = [...(ksVideoGroupStore.ksVideoGroup || [])];
|
|
//Wait for all video counts to be fetched
|
|
videoGroups.value = await Promise.all(videoGroups.value);
|
|
});
|
|
};
|
|
|
|
// Ricarica i dati quando cambia il parametro `id`
|
|
watch(() => route.params.id, fetchScenario);
|
|
|
|
//Function to fetch scenarios
|
|
function fetchScenario(id) {
|
|
chatDisabled();
|
|
scenario.value.inputs = null;
|
|
data_loaded.value = false;
|
|
formData.value = {};
|
|
loading.value = true;
|
|
axios
|
|
.get(`/scenarios/${id}`)
|
|
.then((response) => {
|
|
scenario.value = response.data;
|
|
console.log('Scenario fetched:', scenario.value);
|
|
|
|
if (scenario.value.inputs.some((input) => input.name === 'MultiFileUpload' || input.name === 'SingleFileUpload')) {
|
|
reqMultiFile.value = true;
|
|
}
|
|
if (scenario.value.inputs.some((input) => input.type === 'singlefile_acceptall')) {
|
|
reqMultiFile.value = false;
|
|
acceptedFormats.value = '';
|
|
//acceptedFormats.value = '.doc,.docx,.pdf,.msg,.txt,.xlx,.xlxs,.logs,.pptx,.json,.odt,.rtf,.xml,.html';
|
|
}
|
|
if (scenario.value.inputs.some((input) => input.type === 'singlefile')) {
|
|
reqMultiFile.value = false;
|
|
acceptedFormats.value = '.docx';
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching scenario:', error);
|
|
})
|
|
.finally(() => {
|
|
loading.value = false;
|
|
});
|
|
}
|
|
|
|
const onBeforeSend = (event) => {
|
|
const { xhr } = event; // Estraggo l'oggetto XMLHttpRequest
|
|
console.log('xhr', xhr);
|
|
var token = auth.token()
|
|
xhr.setRequestHeader('Authorization', 'Bearer ' + token); // Imposta il tipo di contenuto
|
|
};
|
|
|
|
const getInputComponent = (type) => {
|
|
switch (type) {
|
|
case 'text':
|
|
return InputText;
|
|
case 'textarea':
|
|
return Textarea;
|
|
case 'select':
|
|
return Select;
|
|
case 'multiselect':
|
|
return MultiSelect;
|
|
default:
|
|
return InputText;
|
|
}
|
|
};
|
|
|
|
const chatEnabled = () => {
|
|
chat_enabled.value = true;
|
|
};
|
|
|
|
const chatDisabled = () => {
|
|
chat_enabled.value = false;
|
|
};
|
|
|
|
const execScenario = () => {
|
|
if (numberPrFiles.value !== 1 && reqMultiFile.value) {
|
|
toast.add({
|
|
severity: 'warn', // Tipo di notifica (errore)
|
|
summary: 'Attention', // Titolo della notifica
|
|
detail: 'You can upload only 1 PR file. Please remove others.' // Messaggio dettagliato
|
|
});
|
|
} else {
|
|
loading_data.value = true;
|
|
data_loaded.value = false;
|
|
rating.value = 0;
|
|
startTimer();
|
|
|
|
loadingStore.exectuion_loading = true;
|
|
|
|
// Crea una copia dei dati del form
|
|
const processedData = { ...formData.value };
|
|
if (processedData.video_group) {
|
|
processedData.video_group = JSON.stringify(
|
|
processedData.video_group.map((item) => item.id)
|
|
);
|
|
}
|
|
|
|
const data = {
|
|
scenario_id: scenario.value.id,
|
|
inputs: processedData
|
|
};
|
|
|
|
axios
|
|
.post('/scenarios/execute-async', data)
|
|
.then((response) => {
|
|
console.log('Response data exec 1:', response.data);
|
|
scenario_response.value = response.data;
|
|
scenario_response_message.value = response.data.message;
|
|
scenario_output.value = response.data.stringOutput;
|
|
exec_id.value = response.data.scenarioExecution_id;
|
|
loadingStore.setIdExecLoading(exec_id.value);
|
|
startPolling();
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error executing scenario:', error);
|
|
loadingStore.exectuion_loading = false;
|
|
});
|
|
}
|
|
};
|
|
const openDebug = () => {
|
|
axios.get('/scenarios/execute/' + exec_id.value).then((resp) => {
|
|
exec_scenario.value = resp.data;
|
|
debug_modal.value = true;
|
|
});
|
|
};
|
|
|
|
const pollBackendAPI = () => {
|
|
axios.get('/scenarios/getExecutionProgress/' + exec_id.value).then((response) => {
|
|
if (response.data.status == 'OK' || response.data.status == 'ERROR') {
|
|
console.log('Condition met, stopping polling.');
|
|
stopPolling();
|
|
|
|
stopTimer();
|
|
loading_data.value = false;
|
|
data_loaded.value = true;
|
|
scenario_output.value = response.data.stringOutput;
|
|
console.log('Response data exec 2:', response.data);
|
|
exec_id.value = response.data.scenarioExecution_id;
|
|
scenario_response_message.value = null; //if != null, next scenario starts with old message
|
|
console.log('Scenario 3:', scenario.value);
|
|
|
|
// Controlla se l'array `inputs` contiene un elemento con `name = 'MultiFileUpload'`
|
|
if (scenario.value.inputs.some((input) => input.name === 'MultiFileUpload')) {
|
|
if (response.data.status == 'OK') {
|
|
// Accedi al primo step e controlla se esiste l'attributo `codegenie_output_type`
|
|
const firstStep = scenario.value.steps[0];
|
|
if (firstStep?.attributes?.['codegenie_output_type']) {
|
|
// Controlla se `codegenie_output_type` è uguale a 'FILE'
|
|
// if (firstStep.attributes['codegenie_output_type'] === 'FILE') {
|
|
// console.log('base64 ', scenario_output.value);
|
|
|
|
// Chiama la funzione `extractFiles` con il valore di `scenario_output.value`
|
|
//extractFiles(scenario_output.value);
|
|
//}
|
|
if (firstStep.attributes['codegenie_output_type'] == 'FILE') {
|
|
//console.log('base64 ', scenario_output.value)
|
|
//extractFiles(scenario_output.value, 'output', zipOutput)
|
|
fileType.value = 'FILE';
|
|
} else if (firstStep.attributes['codegenie_output_type'] == 'MARKDOWN') {
|
|
fileType.value = 'MARKDOWN';
|
|
showFileContent(scenario_output.value, 'MARKDOWN');
|
|
} else if (firstStep.attributes['codegenie_output_type'] == 'JSON') {
|
|
fileType.value = 'JSON';
|
|
showFileContent(scenario_output.value, 'JSON');
|
|
}
|
|
}
|
|
} else {
|
|
console.log('Error in execution');
|
|
}
|
|
}
|
|
} else {
|
|
console.log('Condition not met, polling continues.');
|
|
scenario_response.value = response.data;
|
|
scenario_response_message.value = response.data.message;
|
|
}
|
|
});
|
|
};
|
|
|
|
const showFileContent = (base64String, type) => {
|
|
try {
|
|
// Decodifica la stringa Base64
|
|
const binaryString = atob(base64String);
|
|
const binaryLength = binaryString.length;
|
|
const bytes = new Uint8Array(binaryLength);
|
|
|
|
for (let i = 0; i < binaryLength; i++) {
|
|
bytes[i] = binaryString.charCodeAt(i);
|
|
}
|
|
|
|
// Converti i byte in una stringa leggibile
|
|
const textContent = new TextDecoder().decode(bytes);
|
|
|
|
// Gestione del tipo di file
|
|
if (type === 'MARKDOWN') {
|
|
//fileType.value = 'markdown';
|
|
fileContent.value = marked(textContent); // Converte Markdown in HTML
|
|
} else if (type === 'JSON') {
|
|
//fileType.value = 'json';
|
|
const jsonObject = JSON.parse(textContent); // Parse JSON
|
|
fileContent.value = JSON.stringify(jsonObject, null, 2); // Formatta JSON
|
|
} else {
|
|
fileContent.value = 'Unsupported file type.';
|
|
}
|
|
} catch (error) {
|
|
fileContent.value = 'Errore while decoding or parsing file.';
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
// Function to start polling
|
|
function startPolling() {
|
|
// Set polling interval (every 2.5 seconds in this case)
|
|
pollingInterval = setInterval(pollBackendAPI, 2500);
|
|
console.log('Polling started.');
|
|
}
|
|
|
|
// Function to stop polling
|
|
function stopPolling() {
|
|
clearInterval(pollingInterval);
|
|
loadingStore.exectuion_loading = false;
|
|
loadingStore.setIdExecLoading('');
|
|
|
|
console.log('Polling stopped.');
|
|
}
|
|
|
|
const extractFiles = async (base64String) => {
|
|
try {
|
|
// Decodifica la base64 in un array di byte
|
|
const byteCharacters = atob(base64String);
|
|
const byteNumbers = Array.from(byteCharacters, (char) => char.charCodeAt(0));
|
|
const byteArray = new Uint8Array(byteNumbers);
|
|
|
|
// Carica il file zip con JSZip
|
|
const zipData = await JSZip.loadAsync(byteArray);
|
|
zip.value = zipData;
|
|
|
|
// Ottieni tutti i file (compresi quelli nelle sottocartelle)
|
|
|
|
fileNamesOutput.value = getFileNames(zipData);
|
|
} catch (error) {
|
|
console.error('Error extracting zip:', error);
|
|
|
|
fileNamesOutput.value = [];
|
|
}
|
|
};
|
|
|
|
// Funzione ricorsiva per ottenere tutti i file (anche quelli dentro le cartelle)
|
|
const getFileNames = (zipData) => {
|
|
const files = [];
|
|
|
|
// Esplora tutti i file nel file zip, considerando anche le sottocartelle
|
|
zipData.forEach((relativePath, file) => {
|
|
if (!file.dir) {
|
|
// Escludiamo le cartelle
|
|
files.push(relativePath); // Aggiungiamo il percorso relativo del file
|
|
}
|
|
});
|
|
|
|
return files;
|
|
};
|
|
|
|
async function updateRating(newRating) {
|
|
ScenarioService.updateScenarioExecRating(exec_id.value, newRating.value)
|
|
.then((response) => {
|
|
console.log('response:', response);
|
|
if (response.data === 'OK') {
|
|
rating.value = newRating.value;
|
|
console.log('Rating successfully updated:', response.data);
|
|
toast.add({
|
|
severity: 'success', // Tipo di notifica (successo)
|
|
summary: 'Success', // Titolo della notifica
|
|
detail: 'Rating updated with success.', // Messaggio dettagliato
|
|
life: 3000 // Durata della notifica in millisecondi
|
|
});
|
|
} else {
|
|
console.error('Errore during rating update', response.data);
|
|
toast.add({
|
|
severity: 'error', // Tipo di notifica (errore)
|
|
summary: 'Error', // Titolo della notifica
|
|
detail: 'Error updating rating. Try later.', // Messaggio dettagliato
|
|
life: 3000 // Durata della notifica in millisecondi
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error during backend call:', error);
|
|
});
|
|
}
|
|
|
|
// Funzione per generare un ID univoco
|
|
function generateUniqueId() {
|
|
return Date.now(); // Puoi usare anche UUID.randomUUID() o una libreria simile
|
|
}
|
|
|
|
const onRemove = (event, removeUploadedFileCallback, type) => {
|
|
const { file, index } = event;
|
|
console.log('Removing file:', folderName.value);
|
|
|
|
try {
|
|
axios
|
|
.post(
|
|
`/deleteFile`,
|
|
{ fileName: file.name, folderName: folderName.value }, // Invio nome del file come payload
|
|
{
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
}
|
|
)
|
|
.then((response) => {
|
|
if (response.status === 200) {
|
|
console.log('File removed successfully:', response.data);
|
|
|
|
// Mostra notifica di successo
|
|
toast.add({
|
|
severity: 'success',
|
|
summary: 'Success',
|
|
detail: 'File removed successfully!',
|
|
life: 3000
|
|
});
|
|
|
|
if (type === 'SingleFileUpload') {
|
|
numberPrFiles.value -= 1;
|
|
console.log('Number of PR files: ', numberPrFiles.value);
|
|
}
|
|
|
|
// Aggiorna lista dei file caricati
|
|
removeUploadedFileCallback(index);
|
|
} else {
|
|
console.error('Failed to remove file:', response.statusText);
|
|
|
|
// Mostra notifica di errore
|
|
toast.add({
|
|
severity: 'error',
|
|
summary: 'Error',
|
|
detail: `Failed to remove file. Status: ${response.statusText}`,
|
|
life: 3000
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error while removing file:', error);
|
|
|
|
// Mostra notifica di errore
|
|
toast.add({
|
|
severity: 'error',
|
|
summary: 'Error',
|
|
detail: `Error while removing file: ${error.message}`,
|
|
life: 3000
|
|
});
|
|
});
|
|
} catch (error) {
|
|
console.error('Error while removing file:', error);
|
|
}
|
|
};
|
|
|
|
const onUpload = (event, uploadType) => {
|
|
console.log('response upload ', event.xhr.response);
|
|
|
|
const { xhr } = event; // Estraggo l'oggetto XMLHttpRequest
|
|
|
|
if (xhr.status === 200) {
|
|
if (uploadType === 'SingleFileUpload') {
|
|
//formData.value['SingleFileUpload'] = "OK";
|
|
if (event.files && event.files.length > 0) {
|
|
console.log('File uploaded:', event.files);
|
|
formData.value['SingleFileUpload'] = event.files[0].name; // Nome del primo file
|
|
} else {
|
|
formData.value['SingleFileUpload'] = 'UnknownFile';
|
|
}
|
|
console.log('Length of uploaded files', event.files.length);
|
|
numberPrFiles.value += 1;
|
|
console.log('Number of PR files: ', numberPrFiles.value);
|
|
}
|
|
formData.value['MultiFileUpload'] = xhr.response;
|
|
|
|
console.log('Form value upload ', formData.value['MultiFileUpload']);
|
|
|
|
console.log('Upload successfully completed. Response:', xhr.response);
|
|
|
|
toast.add({
|
|
severity: 'success',
|
|
summary: 'Success',
|
|
detail: 'File uploaded successfully!',
|
|
life: 3000
|
|
});
|
|
console.log('Length of uploaded files', uploadedFiles.value.length);
|
|
} else {
|
|
// Errore durante l'upload
|
|
console.error('Error during upload. Status:', xhr.status, 'Response:', xhr.response);
|
|
|
|
toast.add({
|
|
severity: 'error',
|
|
summary: 'Error',
|
|
detail: `Failed to upload file. Status: ${xhr.status}`,
|
|
life: 3000
|
|
});
|
|
}
|
|
};
|
|
|
|
// Funzione per scaricare il file
|
|
const downloadZipFile = async (fileName) => {
|
|
if (!zip.value) return;
|
|
|
|
try {
|
|
// Estrai il file dallo zip
|
|
const fileContent = await zip.value.file(fileName).async('blob');
|
|
const url = URL.createObjectURL(fileContent);
|
|
|
|
// Crea un link per scaricare il file
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = fileName;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
|
|
URL.revokeObjectURL(url);
|
|
} catch (error) {
|
|
console.error(`Error downloading file "${fileName}":`, error);
|
|
}
|
|
};
|
|
|
|
function downloadFile() {
|
|
try {
|
|
// Converti la stringa base64 in un blob
|
|
const base64String = scenario_output.value;
|
|
const byteCharacters = atob(base64String);
|
|
const byteNumbers = Array.from(byteCharacters, (char) => char.charCodeAt(0));
|
|
const byteArray = new Uint8Array(byteNumbers);
|
|
const blob = new Blob([byteArray]);
|
|
|
|
// Crea un link temporaneo per il download
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'sf_document-' + exec_id.value + '.docx'; // Specifica il nome del file
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
|
|
// Rimuovi il link temporaneo
|
|
document.body.removeChild(a);
|
|
window.URL.revokeObjectURL(url);
|
|
} catch (error) {
|
|
console.error('Error during file download:', error);
|
|
}
|
|
}
|
|
|
|
const formatSize = (bytes) => {
|
|
const k = 1024;
|
|
const sizes = $primevue.config.locale.fileSizeTypes;
|
|
|
|
if (bytes === 0) {
|
|
return `0 ${sizes[0]}`;
|
|
}
|
|
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
const truncatedSize = Math.trunc(bytes / Math.pow(k, i)); // Troncamento del valore
|
|
|
|
return `${truncatedSize} ${sizes[i]}`;
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.input-container {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.full-width-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.editor ol {
|
|
list-style-type: decimal !important;
|
|
}
|
|
|
|
.editor ul {
|
|
list-style-type: disc !important;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap; /* Fa andare a capo il contenuto automaticamente */
|
|
word-wrap: break-word; /* Interrompe le parole troppo lunghe */
|
|
overflow-wrap: break-word; /* Per compatibilità con più browser */
|
|
max-width: 100%; /* Imposta una larghezza massima pari al contenitore genitore */
|
|
overflow-x: auto; /* Aggiunge uno scorrimento orizzontale solo se necessario */
|
|
background-color: #f5f5f5; /* Colore di sfondo opzionale per migliorare leggibilità */
|
|
padding: 10px; /* Spaziatura interna */
|
|
border-radius: 5px; /* Bordo arrotondato opzionale */
|
|
font-family: monospace; /* Font specifico per codice */
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombra per migliorare estetica */
|
|
}
|
|
|
|
.markdown-content {
|
|
word-wrap: break-word; /* Spezza le parole lunghe */
|
|
overflow-wrap: break-word; /* Per compatibilità con più browser */
|
|
max-width: 100%; /* Adatta il contenuto alla larghezza del contenitore */
|
|
overflow-x: auto; /* Aggiunge scorrimento orizzontale solo se necessario */
|
|
background-color: #f5f5f5; /* Sfondo per distinguere il contenuto */
|
|
}
|
|
</style>
|