990 lines
37 KiB
Vue
990 lines
37 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 class="flex mt-6">
|
|
<div class="card flex flex-col gap-4 w-full">
|
|
<h3>
|
|
{{ scenario.hint }}
|
|
</h3>
|
|
<template v-if="scenario.inputs">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div v-for="input in scenario.inputs" :key="input.name"
|
|
:class="['input-container', input.type === 'textarea' ? 'col-span-12' : '']">
|
|
|
|
<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="10000000"
|
|
v-model:files="uploadedFiles"
|
|
|
|
|
|
>
|
|
<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-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
|
|
<p class="mt-6 mb-0">Drag and drop files to 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="10000000"
|
|
v-model:files="uploadedFiles"
|
|
|
|
|
|
>
|
|
<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-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
|
|
<p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
|
|
</div>
|
|
</template>
|
|
</FileUpload>
|
|
|
|
</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 class="flex justify-center">
|
|
<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">
|
|
<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>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
|
|
import { LoadingStore } from '@/stores/LoadingStore';
|
|
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 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, useRouter } from 'vue-router';
|
|
import { JellyfishLoader } from "vue3-spinner";
|
|
import { ScenarioService } from '../../service/ScenarioService';
|
|
|
|
|
|
const loadingStore = LoadingStore();
|
|
const toast = useToast();
|
|
const zip = ref(null);
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const value = ref('');
|
|
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([]);
|
|
// 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);
|
|
|
|
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;
|
|
}
|
|
});
|
|
return isFilled;
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
fetchScenario(route.params.id);
|
|
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);
|
|
});
|
|
|
|
// Ricarica i dati quando cambia il parametro `id`
|
|
watch(() => route.params.id, fetchScenario);
|
|
|
|
|
|
//Function to fetch scenarios
|
|
function fetchScenario(id) {
|
|
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')){
|
|
acceptedFormats.value = ".docx, .pdf, .doc, .txt, .msg";
|
|
}
|
|
if(scenario.value.inputs.some((input) => input.type === 'singlefile')){
|
|
acceptedFormats.value = ".docx";
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Error fetching scenario:", error);
|
|
})
|
|
.finally(() => {
|
|
loading.value = false;
|
|
});
|
|
}
|
|
|
|
const getInputComponent = (type) => {
|
|
switch (type) {
|
|
case 'text':
|
|
return InputText;
|
|
case 'textarea':
|
|
return Textarea;
|
|
case 'select':
|
|
return Select;
|
|
default:
|
|
return InputText;
|
|
}
|
|
};
|
|
|
|
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;
|
|
|
|
const data = {
|
|
scenario_id: scenario.value.id,
|
|
inputs: { ...formData.value }
|
|
};
|
|
|
|
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);
|
|
// Start polling
|
|
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 = 'Tipo di file non supportato.';
|
|
}
|
|
} catch (error) {
|
|
fileContent.value = 'Errore durante la decodifica o il parsing del 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;
|
|
};
|
|
|
|
// const uploadSingleFile = async (file) => {
|
|
// // Logica per caricare un singolo file utilizzando axios
|
|
// try {
|
|
// const formData = new FormData();
|
|
// formData.append('MultiFileUpload', file);
|
|
|
|
// const response = await axios.post(uploadUrl.value, formData, {
|
|
// headers: {
|
|
// 'Content-Type': 'multipart/form-data',
|
|
// },
|
|
// });
|
|
|
|
// if (response.status === 200) {
|
|
// toast.add({ severity: 'success', summary: 'Success', detail: `File "${file.name}" uploaded successfully.`, life: 3000 });
|
|
// } else {
|
|
// toast.add({ severity: 'error', summary: 'Error', detail: `Failed to upload file "${file.name}".`, life: 3000 });
|
|
// }
|
|
// } catch (error) {
|
|
// toast.add({ severity: 'error', summary: 'Error', detail: `Error uploading file "${file.name}": ${error.message}`, life: 3000 });
|
|
// console.error('Error uploading file:', error);
|
|
// }
|
|
// };
|
|
|
|
// const removeFile = (file, index, callback) => {
|
|
// // Logica per rimuovere un file dalla lista dei "pending"
|
|
// console.log('Removing pending file:', file);
|
|
// callback(file, index);
|
|
// };
|
|
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 aggiornato con successo:', 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 nell\'aggiornamento del rating', 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('Errore durante la chiamata al backend:', 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 onRemove = (event) => {
|
|
// // Metodo per gestire la rimozione dei file
|
|
// console.log('Removing file:', folderName.value);
|
|
|
|
|
|
// try {
|
|
// axios.post(
|
|
// `http://localhost:8081/deleteFile`,
|
|
// { fileName: event.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);
|
|
|
|
// toast.add({
|
|
// severity: "success",
|
|
// summary: "Successo",
|
|
// detail: "File removed successfully!",
|
|
// life: 3000,
|
|
// });
|
|
// } else {
|
|
// console.error('Failed to remove file:', response.statusText);
|
|
|
|
// toast.add({
|
|
// severity: "error",
|
|
// summary: "Errore",
|
|
// detail: `Failed to remove file. Status: ${xhr.status}`,
|
|
// 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) {
|
|
// Risposta OK
|
|
|
|
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";
|
|
}
|
|
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 completato con successo. Risposta:", xhr.response);
|
|
|
|
toast.add({
|
|
severity: "success",
|
|
summary: "Success",
|
|
detail: "File uploaded successfully!",
|
|
life: 3000,
|
|
});
|
|
|
|
} else {
|
|
// Errore durante l'upload
|
|
console.error("Errore durante l'upload. Stato:", xhr.status, "Risposta:", xhr.response);
|
|
|
|
toast.add({
|
|
severity: "error",
|
|
summary: "Error",
|
|
detail: `Failed to upload file. Stato: ${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 = this.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('Errore durante il download del file:', 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 {
|
|
white-space: pre-wrap; /* Gestisce correttamente gli spazi e i ritorni a capo */
|
|
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 */
|
|
padding: 10px; /* Margini interni */
|
|
border-radius: 5px; /* Bordo arrotondato */
|
|
font-family: Arial, sans-serif; /* Puoi scegliere un font leggibile */
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Effetto estetico di ombra */
|
|
line-height: 1.5; /* Aumenta la leggibilità */
|
|
}
|
|
|
|
|
|
</style> |