admin/hermione-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

before refactor

Browse Source
This commit is contained in:
Andrea Terzani
2025-12-12 16:37:28 +01:00
parent 89b98e3c43
commit 443d0d83f7
23 changed files with 9025 additions and 2917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
src/views/pages/MarkdownDemo.vue Normal file
View File

@@ -0,0 +1,292 @@
<script>
import MarkdownViewer from '@/components/MarkdownViewer.vue';
import { ref } from 'vue';
export default {
name: 'MarkdownDemo',
components: {
MarkdownViewer
},
setup() {
const sampleMarkdown = ref(`# MarkdownViewer Component Demo
## Features Demonstration
### 1. Text Formatting
This component supports **bold**, *italic*, ~~strikethrough~~, and \`inline code\`.
> This is a blockquote. You can use it for important notes or citations.
### 2. Lists
#### Unordered List
- Feature 1: Mermaid diagram support
- Feature 2: Table copy/export
- Feature 3: Syntax highlighting
- Nested item 1
- Nested item 2
#### Ordered List
1. First step
2. Second step
3. Third step
### 3. Code Blocks with Syntax Highlighting
#### JavaScript Example
\`\`\`javascript
function calculateTotal(items) {
return items.reduce((sum, item) => {
return sum + (item.price * item.quantity);
}, 0);
}
const cart = [
{ name: 'Apple', price: 1.5, quantity: 3 },
{ name: 'Orange', price: 2.0, quantity: 2 }
];
console.log('Total:', calculateTotal(cart));
\`\`\`
#### Python Example
\`\`\`python
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
# Generate first 10 Fibonacci numbers
fib_sequence = [fibonacci(i) for i in range(10)]
print(f"Fibonacci sequence: {fib_sequence}")
\`\`\`
#### JSON Example
\`\`\`json
{
"name": "MarkdownViewer",
"version": "1.0.0",
"features": [
"mermaid",
"tables",
"syntax-highlighting"
],
"config": {
"theme": "github",
"enableCopy": true
}
}
\`\`\`
### 4. Tables with Copy & Export Features
Try the **Copy Table** and **Export CSV** buttons above each table!
#### Feature Comparison
| Feature | MdPreview | MarkdownViewer | Notes |
|---------|-----------|----------------|-------|
| Basic Markdown | ✅ | ✅ | Full support |
| Mermaid Diagrams | ❌ | ✅ | Flow, sequence, class diagrams |
| Table Copy | ❌ | ✅ | One-click copy to clipboard |
| CSV Export | ❌ | ✅ | Download as CSV file |
| Syntax Highlighting | ✅ | ✅ | 100+ languages |
| Extensibility | Limited | ✅ | Plugin-based architecture |
| Performance | Good | Excellent | Optimized rendering |
#### Project Status
| Task | Status | Progress | Due Date |
|------|--------|----------|----------|
| Component Development | Complete | 100% | 2024-01-15 |
| Documentation | Complete | 100% | 2024-01-16 |
| Testing | In Progress | 75% | 2024-01-20 |
| Deployment | Pending | 0% | 2024-01-25 |
### 5. Mermaid Diagrams
#### Flowchart
\`\`\`mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
D --> E[Fix Issue]
E --> B
C --> F[Deploy]
F --> G[End]
\`\`\`
#### Sequence Diagram
\`\`\`mermaid
sequenceDiagram
participant User
participant Frontend
participant Backend
participant Database
User->>Frontend: Click Submit
Frontend->>Backend: POST /api/data
Backend->>Database: INSERT query
Database-->>Backend: Success
Backend-->>Frontend: 200 OK
Frontend-->>User: Show success message
\`\`\`
#### Class Diagram
\`\`\`mermaid
classDiagram
class MarkdownViewer {
+String modelValue
+String theme
+String previewTheme
+render()
+renderMermaid()
+addTableFunctionality()
}
class MarkdownIt {
+parse()
+render()
}
class Mermaid {
+initialize()
+render()
}
MarkdownViewer --> MarkdownIt
MarkdownViewer --> Mermaid
\`\`\`
#### Gantt Chart
\`\`\`mermaid
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements :done, 2024-01-01, 5d
Design :done, 2024-01-06, 7d
section Development
Component :done, 2024-01-13, 10d
Testing :active, 2024-01-23, 7d
section Deployment
Staging :2024-01-30, 3d
Production :2024-02-02, 2d
\`\`\`
### 6. Links and Images
Check out the [markdown-it documentation](https://github.com/markdown-it/markdown-it) for more information.
Visit [Mermaid's official site](https://mermaid-js.github.io/) for diagram syntax.
### 7. Horizontal Rule
---
### 8. Task Lists
- [x] Create MarkdownViewer component
- [x] Add Mermaid support
- [x] Implement table copy/export
- [x] Add syntax highlighting
- [ ] Write comprehensive tests
- [ ] Create user documentation
### 9. Mathematical Expressions (if needed)
Inline math: The quadratic formula is $x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$
---
## Try It Yourself!
You can modify the markdown content in the code to see how different elements are rendered. The component supports:
1. **All standard Markdown syntax**
2. **GitHub Flavored Markdown (GFM)**
3. **Mermaid diagrams** - flowcharts, sequence diagrams, class diagrams, Gantt charts, and more
4. **Interactive tables** - with copy and CSV export functionality
5. **Syntax highlighting** - for 100+ programming languages
### Performance Notes
- Mermaid diagrams are rendered asynchronously
- Tables are enhanced with interactive features
- Syntax highlighting is applied automatically
- The component is optimized for large documents
---
**Enjoy the power of modern Markdown rendering! 🚀**
`);
return {
sampleMarkdown
};
}
};
</script>
<template>
<div class="markdown-demo-page">
<div class="demo-header">
<h1>MarkdownViewer Component Demo</h1>
<p class="subtitle">A powerful Markdown viewer with Mermaid diagrams, interactive tables, and syntax highlighting</p>
</div>
<div class="demo-content">
<MarkdownViewer v-model="sampleMarkdown" theme="light" previewTheme="github" />
</div>
</div>
</template>
<style scoped>
.markdown-demo-page {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.demo-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid #e0e0e0;
}
.demo-header h1 {
font-size: 2.5rem;
color: #333;
margin-bottom: 0.5rem;
}
.subtitle {
font-size: 1.1rem;
color: #666;
margin: 0;
}
.demo-content {
background: #fff;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.markdown-demo-page {
padding: 1rem;
}
.demo-header h1 {
font-size: 2rem;
}
.demo-content {
padding: 1rem;
}
}
</style>

721
src/views/pages/OldScenarioExec.vue
View File

@@ -1,15 +1,283 @@
<script setup>
import ChatClient from '@/components/ChatClient.vue';
import ExecutionInputTable from '@/components/ExecutionInputTable.vue';
import OldExecutionResponsePanel from '@/components/OldExecutionResponsePanel.vue';
import { LoadingStore } from '@/stores/LoadingStore.js';
import { ScenarioExecutionStore } from '@/stores/ScenarioExecutionStore.js';
import { UserPrefStore } from '@/stores/UserPrefStore.js';
import { ScenarioService } from '@/service/ScenarioService.js';
import axios from 'axios';
import JSZip from 'jszip';
import { marked } from 'marked';
import ProgressSpinner from 'primevue/progressspinner';
import { useToast } from 'primevue/usetoast';
import { onMounted, ref } from 'vue';
// ============= Stores and Services =============
const loadingStore = LoadingStore();
const scenarioExecutionStore = ScenarioExecutionStore();
const userPrefStore = UserPrefStore();
const toast = useToast();
// ============= Reactive State =============
const scenario = ref({});
const exec_scenario = ref({});
const scenario_output = ref(null);
const inputs = ref(null);
const steps = ref(null);
const execution_id = ref(null);
const rating = ref(null);
const loading = ref(false);
const data_loaded = ref(false);
const loading_data = ref(false);
const chat_enabled = ref(false);
const updateLoading = ref(false);
// ============= File State =============
const fileContent = ref('');
const fileType = ref('');
const zipInput = ref(null);
const fileNames = ref([]);
const fileNamesOutput = ref([]);
// ============= Constants =============
const baseUploadDir = '/mnt/hermione_storage/hermione/file_input_scenarios/';
// ============= Lifecycle Hooks =============
onMounted(() => {
const execution = scenarioExecutionStore.getSelectedExecScenario;
if (execution) {
execution_id.value = execution.id;
} else {
const url = window.location.href;
execution_id.value = new URL(url).searchParams.get('id');
}
retrieveScenarioExec(execution_id.value);
});
// ============= Data Fetching Methods =============
const retrieveScenarioExec = async (id) => {
loading.value = true;
try {
const response = await axios.get('/execution?id=' + id);
scenario.value = response.data.scenario;
exec_scenario.value = response.data;
data_loaded.value = true;
rating.value = response.data.rating;
scenario_output.value = response.data.execSharedMap.scenario_output;
inputs.value = response.data.scenarioExecutionInput.inputs;
steps.value = response.data.scenario.steps;
handleFileProcessing();
if (exec_scenario.value.executedByUsername === userPrefStore.getUser.username) {
updateLoading.value = true;
}
} catch (error) {
console.error('Error retrieving scenario execution:', error);
} finally {
loading.value = false;
}
};
// ============= File Processing Methods =============
const handleFileProcessing = () => {
if (inputs.value['MultiFileUpload'] && steps.value[0]?.attributes?.['codegenie_output_type']) {
extractFiles(inputs.value['MultiFileUpload'], 'input', zipInput);
const outputType = steps.value[0].attributes['codegenie_output_type'];
fileType.value = outputType;
if (outputType === 'MARKDOWN') {
showFileContent(scenario_output.value, 'MARKDOWN');
} else if (outputType === 'JSON') {
showFileContent(scenario_output.value, 'JSON');
}
}
};
const extractFiles = async (base64String, type, zip) => {
try {
const byteCharacters = atob(base64String);
const byteNumbers = Array.from(byteCharacters, (char) => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);
const zipData = await JSZip.loadAsync(byteArray);
zip.value = zipData;
if (type === 'input') {
fileNames.value = getFileNamesInput(zipData);
} else {
fileNamesOutput.value = getFileNames(zipData);
}
} catch (error) {
console.error('Error extracting zip:', error);
if (type === 'input') {
fileNames.value = [];
} else {
fileNamesOutput.value = [];
}
}
};
const showFileContent = (base64String, type) => {
try {
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);
}
const textContent = new TextDecoder().decode(bytes);
if (type === 'MARKDOWN') {
fileContent.value = marked(textContent);
} else if (type === 'JSON') {
const jsonObject = JSON.parse(textContent);
fileContent.value = JSON.stringify(jsonObject, null, 2);
} else {
fileContent.value = 'File type not supported.';
}
} catch (error) {
fileContent.value = 'Error while parsing the file.';
console.error(error);
}
};
const getFileNames = (zipData) => {
const files = [];
zipData.forEach((relativePath, file) => {
if (!file.dir) {
const fileName = relativePath.split('/').pop();
files.push(fileName);
}
});
return files;
};
const getFileNamesInput = (zipData) => {
const files = [];
zipData.forEach((relativePath, file) => {
if (!file.dir) {
files.push(relativePath);
}
});
return files;
};
// ============= Download Methods =============
const downloadFile = async (filePath) => {
try {
let relativePath = filePath;
if (filePath.startsWith(baseUploadDir)) {
relativePath = filePath.substring(baseUploadDir.length);
}
await scenarioExecutionStore.downloadFile(relativePath, execution_id.value);
} catch (error) {
console.error('Error downloading file:', error);
toast.add({
severity: 'error',
summary: 'Error',
detail: 'Error downloading file. Please try again.',
life: 3000
});
}
};
const downloadCodegenieFile = (base64String) => {
try {
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);
}
const blob = new Blob([bytes], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'sf_document-' + execution_id.value + '.docx';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
} catch (error) {
console.error('Error downloading file:', error);
}
};
// ============= Rating Methods =============
const updateRating = async (newRating) => {
loading_data.value = true;
try {
const response = await ScenarioService.updateScenarioExecRating(execution_id.value, newRating.value);
if (response.data === 'OK') {
rating.value = newRating.value;
toast.add({
severity: 'success',
summary: 'Success',
detail: 'Rating updated with success.',
life: 3000
});
} else {
toast.add({
severity: 'error',
summary: 'Error',
detail: 'Error updating rating. Try later.',
life: 3000
});
}
} catch (error) {
console.error('Error while calling backend:', error);
toast.add({
severity: 'error',
summary: 'Error',
detail: 'Error updating rating.',
life: 3000
});
} finally {
loading_data.value = false;
}
};
// ============= Chat Methods =============
const chatEnabled = () => {
chat_enabled.value = true;
};
const chatDisabled = () => {
chat_enabled.value = false;
};
</script>
<template>
<!-- Loading Spinner -->
<div v-if="loading" class="flex justify-center">
<ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent" />
</div>
<div v-else>
<div class="flex items-center justify-between p-2"></div>
</div>
<div v-if="loading_data" class="flex justify-center">
<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent" />
</div>
<!-- Main Content -->
<div v-if="data_loaded">
<!-- Execution Input Panel -->
<Panel class="mt-6">
<template #header>
<div class="flex items-center gap-2">
@@ -24,101 +292,40 @@
<Rating :modelValue="rating" :stars="5" :readonly="true" @change="updateRating($event)" />
</div>
</template>
<div class="box p-4 border rounded-md shadow-sm" style="background-color: white">
<table class="table-auto w-full border-collapse border border-gray-300">
<tbody>
<tr v-for="(input, index) in filteredInputs" :key="index">
<th v-if="index === 'MultiFileUpload'" class="border border-gray-300 px-4 py-2">Files Uploaded</th>
<th v-else-if="index === 'SingleFileUpload'" class="border border-gray-300 px-4 py-2 bg-gray-500 text-white">Parameter</th>
<th v-else-if="index.includes('input_multiselect') && index.endsWith('_name')">
{{ scenario.inputs && Array.isArray(scenario.inputs) ? scenario.inputs.find((i) => i.name === index.replace('_name', ''))?.label : null }}
</th>
<th v-else class="border border-gray-300 px-4 py-2">
{{ index.replace(/_/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase()) }}
</th>
<td class="border border-gray-300 px-4 py-2">
<div v-if="index === 'MultiFileUpload'">
{{ filteredInputs.SingleFileUpload.replace(/\\/g, '/').split('/').pop() }}
<Button icon="pi pi-download" class="p-button-text p-button-sm" label="Download" @click="downloadFile(inputs['SingleFileUpload'])" />
</div>
<div v-else-if="index !== 'SingleFileUpload'">{{ input }}</div>
</td>
</tr>
</tbody>
</table>
<div v-if="data_loaded && scenario.chatEnabled && exec_scenario.latestStepStatus != 'ERROR'" class="flex justify-center">
<div v-if="!chat_enabled" class="flex gap-4 mt-4">
<Button label="Open Chat" @click="chatEnabled" size="large" iconPos="right" icon="pi pi-comments"></Button>
</div>
<div v-else class="flex gap-4 mt-4">
<Button label="Return to scenario" @click="chatDisabled" size="large" iconPos="right" icon="pi pi-backward"></Button>
</div>
<ExecutionInputTable
:inputs="inputs"
:scenario="scenario"
@download-file="downloadFile"
/>
<!-- Chat Button -->
<div v-if="data_loaded && scenario.chatEnabled && exec_scenario.latestStepStatus != 'ERROR'" class="flex justify-center">
<div v-if="!chat_enabled" class="flex gap-4 mt-4">
<Button label="Open Chat" @click="chatEnabled" size="large" iconPos="right" icon="pi pi-comments"></Button>
</div>
<div v-else class="flex gap-4 mt-4">
<Button label="Return to scenario" @click="chatDisabled" size="large" iconPos="right" icon="pi pi-backward"></Button>
</div>
</div>
</Panel>
<!-- Workflow Response Panel -->
<div v-if="!chat_enabled" class="mt-4">
<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">
<Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
<i class="pi pi-code"></i>
</Button>
</div>
</template>
<div v-if="exec_scenario.latestStepStatus == 'ERROR'" class="card flex flex-col gap-4 w-full">
<div v-if="exec_scenario.latestStepOutput">
<p class="text-red-500 font-bold">Error: {{ exec_scenario.latestStepOutput }}</p>
</div>
<div v-else>
<p class="text-red-500 font-bold">Error: Execution failed.</p>
</div>
</div>
<div v-if="exec_scenario.latestStepStatus != 'ERROR'" class="card flex flex-col gap-4 w-full">
<div v-if="scenario.outputType == 'ciaOutput'">
<ChangeImpactOutputViewer :scenario_output="scenario_output" />
</div>
<div v-else-if="loadingStore.exectuion_loading && loadingStore.getExecIdLoading === execution_id">
<div class="flex justify-center mt-4">
<jellyfish-loader :loading="loadingStore.exectuion_loading" scale="1" color="#A100FF" />
</div>
</div>
<div v-else>
<div v-if="fileType == 'FILE' && exec_scenario.execSharedMap.status != null && exec_scenario.execSharedMap.status === 'DONE'">
<ul class="file-list">
<li class="file-item">
sf_document-{{ execution_id }}
<Button icon="pi pi-download" class="p-button-text p-button-sm" label="Download" @click="downloadCodegenieFile(scenario_output)" />
</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>
<OldExecutionResponsePanel
:scenario="scenario"
:exec-scenario="exec_scenario"
:scenario-output="scenario_output"
:execution-id="execution_id"
:is-loading="loadingStore.exectuion_loading && loadingStore.getExecIdLoading === execution_id"
:file-type="fileType"
:file-content="fileContent"
@download-file="downloadCodegenieFile"
/>
</div>
<div v-else="chat_enabled" class="mt-4">
<!-- Chat Panel -->
<div v-if="chat_enabled" class="mt-4">
<Panel class="mt-6">
<template #header>
<div class="flex items-center gap-2 mt-2">
@@ -133,301 +340,6 @@
</div>
</template>
<script setup>
import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
import ChatClient from '@/components/ChatClient.vue';
import { LoadingStore } from '@/stores/LoadingStore.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 ProgressSpinner from 'primevue/progressspinner';
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { JellyfishLoader } from 'vue3-spinner';
import { ScenarioService } from '../../service/ScenarioService.js';
import { ScenarioExecutionStore } from '../../stores/ScenarioExecutionStore.js';
import { UserPrefStore } from '../../stores/UserPrefStore.js';
const loadingStore = LoadingStore();
const router = useRouter();
const route = useRoute();
const value = ref('');
const scenario = ref({});
const scenario_output = 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);
const rating = ref(null);
const scenario_execution_store = ScenarioExecutionStore();
const execution = scenario_execution_store.getSelectedExecScenario;
const execution_id = ref(null);
const inputs = ref(null);
const steps = ref(null);
const toast = useToast();
const fileNames = ref([]); // Memorizza i nomi dei file nello zip
const fileNamesOutput = ref([]); // Memorizza i nomi dei file nello zip
const zipInput = ref(null); // Contenitore per il file zip
const zipOutput = ref(null); // Contenitore per il file zip
const userPrefStore = UserPrefStore();
const updateLoading = ref(false);
const fileContent = ref('');
const fileType = ref('');
const chat_enabled = ref(false);
const baseUploadDir = '/mnt/hermione_storage/hermione/file_input_scenarios/';
onMounted(() => {
if (execution) {
execution_id.value = execution.id;
} else {
const url = window.location.href;
execution_id.value = new URL(url).searchParams.get('id');
}
retrieveScenarioExec(execution_id.value);
});
const retrieveScenarioExec = (id) => {
loading.value = true;
axios.get('/execution?id=' + id).then((response) => {
loading.value = false;
scenario.value = response.data.scenario;
exec_scenario.value = response.data;
data_loaded.value = true;
rating.value = response.data.rating;
scenario_output.value = response.data.execSharedMap.scenario_output;
exec_id.value = response.data.scenarioExecution_id;
inputs.value = response.data.scenarioExecutionInput.inputs;
steps.value = response.data.scenario.steps;
if (inputs.value['MultiFileUpload']) {
if (steps.value[0].attributes['codegenie_output_type']) {
extractFiles(inputs.value['MultiFileUpload'], 'input', zipInput);
if (steps.value[0].attributes['codegenie_output_type'] == 'FILE') {
fileType.value = 'FILE';
} else if (steps.value[0].attributes['codegenie_output_type'] == 'MARKDOWN') {
fileType.value = 'MARKDOWN';
showFileContent(scenario_output.value, 'MARKDOWN');
} else if (steps.value[0].attributes['codegenie_output_type'] == 'JSON') {
fileType.value = 'JSON';
showFileContent(scenario_output.value, 'JSON');
}
}
}
if (exec_scenario.value.executedByUsername === userPrefStore.getUser.username) {
updateLoading.value = true;
}
});
};
const filteredInputs = computed(() => {
const filtered = {};
for (const [key, value] of Object.entries(inputs.value)) {
// Escludi tutti i campi che contengono "input_multiselect" e finiscono con "_id"
if (!(key.includes('input_multiselect') && key.endsWith('_id'))) {
filtered[key] = value;
}
}
return filtered;
});
const extractFiles = async (base64String, type, zip) => {
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)
if (type == 'input') {
fileNames.value = getFileNamesInput(zipData);
} else {
fileNamesOutput.value = getFileNames(zipData);
}
} catch (error) {
console.error('Error extracting zip:', error);
if (type == 'input') {
fileNames.value = [];
} else {
fileNamesOutput.value = [];
}
}
};
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 = 'File type not supported.';
}
} catch (error) {
fileContent.value = 'Error while parsing the file.';
console.error(error);
}
};
// 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
const fileName = relativePath.split('/').pop(); // Estrai solo il nome del file
files.push(fileName); // Aggiungiamo solo il nome del file
}
});
return files;
};
const getFileNamesInput = (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 downloadFile = async (filePath) => {
try {
let relativePath = filePath;
if (filePath.startsWith(baseUploadDir)) {
relativePath = filePath.substring(baseUploadDir.length);
}
console.log('Original path:', filePath);
console.log('Relative path:', relativePath);
// Chiamata all'API backend per ottenere il file
await scenario_execution_store.downloadFile(relativePath, execution_id.value);
} catch (error) {
console.error('Error downloading file:', error);
// Notifica di errore
toast.add({
severity: 'error',
summary: 'Error',
detail: 'Error downloading file. Please try again.',
life: 3000
});
}
};
const downloadCodegenieFile = (base64String) => {
// 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);
}
// Creazione di un Blob dal file binario
const blob = new Blob([bytes], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
// Creazione di un URL per il Blob
const url = URL.createObjectURL(blob);
// Creazione di un elemento anchor per il download
const link = document.createElement('a');
link.href = url;
link.download = 'sf_document-' + execution_id.value + '.docx';
// Simulazione di un click per scaricare il file
document.body.appendChild(link);
link.click();
// Pulizia del DOM
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
async function updateRating(newRating) {
loading_data.value = true;
ScenarioService.updateScenarioExecRating(execution_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('Error while updating 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('Error while calling backend:', error);
})
.finally(() => {
loading_data.value = false;
});
}
const back = () => {
router.push({ name: 'scenario-list' });
};
const openDebug = () => {
debug_modal.value = true;
};
const chatEnabled = () => {
chat_enabled.value = true;
};
const chatDisabled = () => {
chat_enabled.value = false;
};
</script>
<style scoped>
.input-container {
margin-bottom: 1em;
@@ -443,39 +355,4 @@ const chatDisabled = () => {
.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>

481
src/views/pages/OldScenarioExec.vue.backup Normal file
View File

@@ -0,0 +1,481 @@
<template>
<div v-if="loading" class="flex justify-center">
<ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent" />
</div>
<div v-else>
<div class="flex items-center justify-between p-2"></div>
</div>
<div v-if="loading_data" class="flex justify-center">
<ProgressSpinner style="width: 30px; height: 30px; margin: 30px" strokeWidth="6" fill="transparent" />
</div>
<div v-if="data_loaded">
<Panel class="mt-6">
<template #header>
<div class="flex items-center gap-2">
<span class="font-bold">Execution Input for ID {{ execution_id }}</span>
</div>
</template>
<template #icons>
<div v-if="updateLoading" class="flex justify-end">
<Rating :modelValue="rating" :stars="5" @change="updateRating($event)" />
</div>
<div v-else class="flex justify-end">
<Rating :modelValue="rating" :stars="5" :readonly="true" @change="updateRating($event)" />
</div>
</template>
<div class="box p-4 border rounded-md shadow-sm" style="background-color: white">
<table class="table-auto w-full border-collapse border border-gray-300">
<tbody>
<tr v-for="(input, index) in filteredInputs" :key="index">
<th v-if="index === 'MultiFileUpload'" class="border border-gray-300 px-4 py-2">Files Uploaded</th>
<th v-else-if="index === 'SingleFileUpload'" class="border border-gray-300 px-4 py-2 bg-gray-500 text-white">Parameter</th>
<th v-else-if="index.includes('input_multiselect') && index.endsWith('_name')">
{{ scenario.inputs && Array.isArray(scenario.inputs) ? scenario.inputs.find((i) => i.name === index.replace('_name', ''))?.label : null }}
</th>
<th v-else class="border border-gray-300 px-4 py-2">
{{ index.replace(/_/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase()) }}
</th>
<td class="border border-gray-300 px-4 py-2">
<div v-if="index === 'MultiFileUpload'">
{{ filteredInputs.SingleFileUpload.replace(/\\/g, '/').split('/').pop() }}
<Button icon="pi pi-download" class="p-button-text p-button-sm" label="Download" @click="downloadFile(inputs['SingleFileUpload'])" />
</div>
<div v-else-if="index !== 'SingleFileUpload'">{{ input }}</div>
</td>
</tr>
</tbody>
</table>
<div v-if="data_loaded && scenario.chatEnabled && exec_scenario.latestStepStatus != 'ERROR'" class="flex justify-center">
<div v-if="!chat_enabled" class="flex gap-4 mt-4">
<Button label="Open Chat" @click="chatEnabled" size="large" iconPos="right" icon="pi pi-comments"></Button>
</div>
<div v-else class="flex gap-4 mt-4">
<Button label="Return to scenario" @click="chatDisabled" size="large" iconPos="right" icon="pi pi-backward"></Button>
</div>
</div>
</div>
</Panel>
<div v-if="!chat_enabled" class="mt-4">
<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">
<Button severity="secondary" rounded @click="openDebug" v-tooltip.left="'View code'">
<i class="pi pi-code"></i>
</Button>
</div>
</template>
<div v-if="exec_scenario.latestStepStatus == 'ERROR'" class="card flex flex-col gap-4 w-full">
<div v-if="exec_scenario.latestStepOutput">
<p class="text-red-500 font-bold">Error: {{ exec_scenario.latestStepOutput }}</p>
</div>
<div v-else>
<p class="text-red-500 font-bold">Error: Execution failed.</p>
</div>
</div>
<div v-if="exec_scenario.latestStepStatus != 'ERROR'" class="card flex flex-col gap-4 w-full">
<div v-if="scenario.outputType == 'ciaOutput'">
<ChangeImpactOutputViewer :scenario_output="scenario_output" />
</div>
<div v-else-if="loadingStore.exectuion_loading && loadingStore.getExecIdLoading === execution_id">
<div class="flex justify-center mt-4">
<jellyfish-loader :loading="loadingStore.exectuion_loading" scale="1" color="#A100FF" />
</div>
</div>
<div v-else>
<div v-if="fileType == 'FILE' && exec_scenario.execSharedMap.status != null && exec_scenario.execSharedMap.status === 'DONE'">
<ul class="file-list">
<li class="file-item">
sf_document-{{ execution_id }}
<Button icon="pi pi-download" class="p-button-text p-button-sm" label="Download" @click="downloadCodegenieFile(scenario_output)" />
</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-else="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="execution_id" />
</div>
</Panel>
</div>
</div>
</template>
<script setup>
import ChangeImpactOutputViewer from '@/components/ChangeImpactOutputViewer.vue';
import ChatClient from '@/components/ChatClient.vue';
import { LoadingStore } from '@/stores/LoadingStore.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 ProgressSpinner from 'primevue/progressspinner';
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { JellyfishLoader } from 'vue3-spinner';
import { ScenarioService } from '../../service/ScenarioService.js';
import { ScenarioExecutionStore } from '../../stores/ScenarioExecutionStore.js';
import { UserPrefStore } from '../../stores/UserPrefStore.js';
const loadingStore = LoadingStore();
const router = useRouter();
const route = useRoute();
const value = ref('');
const scenario = ref({});
const scenario_output = 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);
const rating = ref(null);
const scenario_execution_store = ScenarioExecutionStore();
const execution = scenario_execution_store.getSelectedExecScenario;
const execution_id = ref(null);
const inputs = ref(null);
const steps = ref(null);
const toast = useToast();
const fileNames = ref([]); // Memorizza i nomi dei file nello zip
const fileNamesOutput = ref([]); // Memorizza i nomi dei file nello zip
const zipInput = ref(null); // Contenitore per il file zip
const zipOutput = ref(null); // Contenitore per il file zip
const userPrefStore = UserPrefStore();
const updateLoading = ref(false);
const fileContent = ref('');
const fileType = ref('');
const chat_enabled = ref(false);
const baseUploadDir = '/mnt/hermione_storage/hermione/file_input_scenarios/';
onMounted(() => {
if (execution) {
execution_id.value = execution.id;
} else {
const url = window.location.href;
execution_id.value = new URL(url).searchParams.get('id');
}
retrieveScenarioExec(execution_id.value);
});
const retrieveScenarioExec = (id) => {
loading.value = true;
axios.get('/execution?id=' + id).then((response) => {
loading.value = false;
scenario.value = response.data.scenario;
exec_scenario.value = response.data;
data_loaded.value = true;
rating.value = response.data.rating;
scenario_output.value = response.data.execSharedMap.scenario_output;
exec_id.value = response.data.scenarioExecution_id;
inputs.value = response.data.scenarioExecutionInput.inputs;
steps.value = response.data.scenario.steps;
if (inputs.value['MultiFileUpload']) {
if (steps.value[0].attributes['codegenie_output_type']) {
extractFiles(inputs.value['MultiFileUpload'], 'input', zipInput);
if (steps.value[0].attributes['codegenie_output_type'] == 'FILE') {
fileType.value = 'FILE';
} else if (steps.value[0].attributes['codegenie_output_type'] == 'MARKDOWN') {
fileType.value = 'MARKDOWN';
showFileContent(scenario_output.value, 'MARKDOWN');
} else if (steps.value[0].attributes['codegenie_output_type'] == 'JSON') {
fileType.value = 'JSON';
showFileContent(scenario_output.value, 'JSON');
}
}
}
if (exec_scenario.value.executedByUsername === userPrefStore.getUser.username) {
updateLoading.value = true;
}
});
};
const filteredInputs = computed(() => {
const filtered = {};
for (const [key, value] of Object.entries(inputs.value)) {
// Escludi tutti i campi che contengono "input_multiselect" e finiscono con "_id"
if (!(key.includes('input_multiselect') && key.endsWith('_id'))) {
filtered[key] = value;
}
}
return filtered;
});
const extractFiles = async (base64String, type, zip) => {
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)
if (type == 'input') {
fileNames.value = getFileNamesInput(zipData);
} else {
fileNamesOutput.value = getFileNames(zipData);
}
} catch (error) {
console.error('Error extracting zip:', error);
if (type == 'input') {
fileNames.value = [];
} else {
fileNamesOutput.value = [];
}
}
};
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 = 'File type not supported.';
}
} catch (error) {
fileContent.value = 'Error while parsing the file.';
console.error(error);
}
};
// 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
const fileName = relativePath.split('/').pop(); // Estrai solo il nome del file
files.push(fileName); // Aggiungiamo solo il nome del file
}
});
return files;
};
const getFileNamesInput = (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 downloadFile = async (filePath) => {
try {
let relativePath = filePath;
if (filePath.startsWith(baseUploadDir)) {
relativePath = filePath.substring(baseUploadDir.length);
}
console.log('Original path:', filePath);
console.log('Relative path:', relativePath);
// Chiamata all'API backend per ottenere il file
await scenario_execution_store.downloadFile(relativePath, execution_id.value);
} catch (error) {
console.error('Error downloading file:', error);
// Notifica di errore
toast.add({
severity: 'error',
summary: 'Error',
detail: 'Error downloading file. Please try again.',
life: 3000
});
}
};
const downloadCodegenieFile = (base64String) => {
// 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);
}
// Creazione di un Blob dal file binario
const blob = new Blob([bytes], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
// Creazione di un URL per il Blob
const url = URL.createObjectURL(blob);
// Creazione di un elemento anchor per il download
const link = document.createElement('a');
link.href = url;
link.download = 'sf_document-' + execution_id.value + '.docx';
// Simulazione di un click per scaricare il file
document.body.appendChild(link);
link.click();
// Pulizia del DOM
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
async function updateRating(newRating) {
loading_data.value = true;
ScenarioService.updateScenarioExecRating(execution_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('Error while updating 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('Error while calling backend:', error);
})
.finally(() => {
loading_data.value = false;
});
}
const back = () => {
router.push({ name: 'scenario-list' });
};
const openDebug = () => {
debug_modal.value = true;
};
const chatEnabled = () => {
chat_enabled.value = true;
};
const chatDisabled = () => {
chat_enabled.value = false;
};
</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>

1298
src/views/pages/ScenarioExec.vue
View File

File diff suppressed because it is too large Load Diff

997
src/views/pages/ScenarioExec.vue.backup Normal file
View File

@@ -0,0 +1,997 @@
<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="52428800"
: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="52428800"
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">
<DynamicPicker
v-model="formData[input.name]"
:input-name="input.name"
:label="input.label"
:data-source="input.dataSource || 'videoGroups'"
:options="getOptionsForInput(input)"
:disabled="loadingStore.exectuion_loading"
:loading="loadingOptionsFor[input.dataSource] || false"
:show-status="input.dataSource === 'ksDocuments'"
no-margin
@change="onDynamicPickerChange(input.name, $event)"
/>
</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:&nbsp;</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 execution info'">
<i class="pi pi-code"></i>
</Button>
</div>
</div>
</template>
<div v-if="errored_execution" class="card flex flex-col gap-4 w-full">
<div v-if="error_message">
<p class="text-red-500 font-bold">Error: {{ error_message }}</p>
</div>
<div v-else>
<p class="text-red-500 font-bold">Error: Execution failed.</p>
</div>
</div>
<div v-else 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="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 DynamicPicker from '@/components/DynamicPicker.vue';
import { KSDocumentService } from '@/service/KSDocumentService';
import { FileUploadStore } from '@/stores/FileUploadStore';
import { KsVideoGroupStore } from '@/stores/KsVideoGroupStore';
import { LoadingStore } from '@/stores/LoadingStore';
import { ScenarioExecutionStore } from '@/stores/ScenarioExecutionStore';
import { UserPrefStore } from '@/stores/UserPrefStore';
import { useAuth } from '@websanova/vue-auth/src/v3.js';
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, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { JellyfishLoader } from 'vue3-spinner';
import { ScenarioService } from '../../service/ScenarioService';
const loadingStore = LoadingStore();
const scenarioExecutionStore = ScenarioExecutionStore();
const fileUploadStore = FileUploadStore();
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 error_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);
const loadingOptionsFor = reactive({});
const ksDocuments = ref([]);
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}`"
const errored_execution = ref(false);
// 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) => {
const inputValue = formData.value[input.name];
// Controllo per input multiselect
if (input.type === 'multiselect') {
if (!inputValue || !Array.isArray(inputValue) || inputValue.length === 0) {
console.log('Multiselect input not filled: ', input.name);
isFilled = false;
}
}
// Controllo per altri tipi di input
else {
if (inputValue === undefined || inputValue === '') {
console.log('Input not filled: ', input.name);
isFilled = false;
}
}
});
return isFilled;
});
//When the component is dismissed stop the polling
onBeforeUnmount(() => {
stopPolling();
stopTimer();
});
onMounted(() => {
fetchScenario(route.params.id);
const newFolderName = fileUploadStore.generateUniqueFolderId();
folderName.value = newFolderName;
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
async function fetchScenario(id) {
chatDisabled();
scenario.value.inputs = null;
data_loaded.value = false;
formData.value = {};
loading.value = true;
try {
const response = await scenarioExecutionStore.fetchScenario(id);
scenario.value = response;
console.log('Scenario fetched:', scenario.value);
// Carica le opzioni necessarie basate sui dataSource presenti negli inputs
await loadOptionsForScenario();
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 = async () => {
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 };
// Elabora tutti i multiselect dinamici
if (scenario.value.inputs) {
scenario.value.inputs.forEach((input) => {
if (input.type === 'multiselect' && processedData[input.name]) {
const selectedItems = processedData[input.name];
if (Array.isArray(selectedItems) && selectedItems.length > 0) {
// Elaborazione per VideoGroups (backward compatibility)
processedData[`${input.name}_id`] = JSON.stringify(selectedItems.map((item) => item.id || item));
processedData[`${input.name}_name`] = JSON.stringify(selectedItems.map((item) => item.name || item.fileName || item));
// Rimuovi l'array originale
delete processedData[input.name];
}
}
});
}
const data = {
scenario_id: scenario.value.id,
inputs: processedData
};
try {
const response = await scenarioExecutionStore.executeScenario(data);
console.log('Response data exec 1:', response);
scenario_response.value = response;
scenario_response_message.value = response.message;
scenario_output.value = response.stringOutput;
exec_id.value = response.scenarioExecution_id;
loadingStore.setIdExecLoading(exec_id.value);
startPolling();
} catch (error) {
console.error('Error executing scenario:', error);
loadingStore.exectuion_loading = false;
}
}
};
const openDebug = async () => {
try {
const resp = await scenarioExecutionStore.getScenarioExecution(exec_id.value);
exec_scenario.value = resp;
debug_modal.value = true;
} catch (error) {
console.error('Error opening debug:', error);
}
};
const pollBackendAPI = async () => {
errored_execution.value = false;
try {
const response = await scenarioExecutionStore.getExecutionProgress(exec_id.value);
if (response.status == 'OK' || response.status == 'ERROR') {
console.log('Condition met, stopping polling.');
stopPolling();
stopTimer();
if (response.status == 'ERROR') {
errored_execution.value = true;
error_message.value = response.message;
}
loading_data.value = false;
data_loaded.value = true;
scenario_output.value = response.stringOutput;
console.log('Response data exec 2:', response);
exec_id.value = response.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.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']) {
if (firstStep.attributes['codegenie_output_type'] == 'FILE') {
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;
scenario_response_message.value = response.message;
}
} catch (error) {
console.error('Error polling backend API:', error);
}
};
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 = async (event, removeUploadedFileCallback, type) => {
const { file, index } = event;
console.log('Removing file:', folderName.value);
try {
const response = await fileUploadStore.deleteFile(file.name, folderName.value);
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);
formData.value['SingleFileUpload'] = '';
}
// 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
});
}
};
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]}`;
};
// Metodi per la gestione delle picklist dinamiche
const getOptionsForInput = (input) => {
// Basato sul dataSource, restituisce le opzioni appropriate
switch (input.dataSource) {
case 'videoGroups':
return videoGroups.value;
case 'ksDocuments':
return ksDocuments.value;
default:
return [];
}
};
const onDynamicPickerChange = (inputName, value) => {
console.log(`Dynamic picker changed for ${inputName}:`, value);
formData.value[inputName] = value;
};
// Carica le opzioni necessarie basate sui dataSource presenti negli inputs dello scenario
const loadOptionsForScenario = async () => {
if (!scenario.value.inputs) return;
console.log('Loading options for scenario inputs...');
// Trova tutti i dataSource unici negli input multiselect
const dataSources = new Set();
scenario.value.inputs.forEach((input) => {
if (input.type === 'multiselect' && input.dataSource) {
dataSources.add(input.dataSource);
}
});
// Crea le funzioni di caricamento per ogni dataSource
const loadingPromises = Array.from(dataSources).map(async (dataSource) => {
try {
// Imposta lo stato di loading per questo dataSource
loadingOptionsFor[dataSource] = true;
console.log(`Loading options for dataSource: ${dataSource}`);
switch (dataSource) {
case 'videoGroups':
await loadVideoGroups();
break;
case 'ksDocuments':
const docsResponse = await KSDocumentService.getKSDocuments();
ksDocuments.value = docsResponse.data;
console.log(`Loaded ${ksDocuments.value.length} KS documents`);
break;
default:
console.warn(`Unknown dataSource: ${dataSource}`);
}
} catch (error) {
console.error(`Error loading options for ${dataSource}:`, error);
} finally {
// Reset lo stato di loading per questo dataSource
loadingOptionsFor[dataSource] = false;
}
});
// Aspetta che tutti i caricamenti siano completati
await Promise.all(loadingPromises);
};
</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>