242 lines
8.4 KiB
Vue
242 lines
8.4 KiB
Vue
<template>
|
|
<div>
|
|
<h1>Available Scenarios</h1>
|
|
</div>
|
|
<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>
|
|
<DataView :value="filter" :layout="layout" paginator :rows="8">
|
|
<template #header>
|
|
<div class="header-container">
|
|
<div class="search-bar">
|
|
<i class="pi pi-search search-icon"></i>
|
|
<InputText
|
|
class="search-input"
|
|
type="search"
|
|
placeholder="Search"
|
|
v-model="data.search"
|
|
size="medium"
|
|
variant="filled"
|
|
/>
|
|
</div>
|
|
<!-- Aggiungi il Dropdown qui -->
|
|
<Dropdown
|
|
v-model="selectedApp"
|
|
:options="dataApp.apps"
|
|
optionLabel="fe_name"
|
|
placeholder="Select an Option"
|
|
class="dropdown-list"
|
|
@change="reloadScenarios"
|
|
/>
|
|
<SelectButton v-model="layout" :options="options" :allowEmpty="false" class="layout-switch">
|
|
<template #option="{ option }">
|
|
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
|
|
</template>
|
|
</SelectButton>
|
|
</div>
|
|
</template>
|
|
|
|
<template #list="slotProps">
|
|
<div class="flex flex-col space-y-4 mt-2">
|
|
|
|
|
|
<div v-for="(item, index) in slotProps.items" :key="index">
|
|
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4 bg-white dark:bg-gray-800 rounded-lg shadow-md"
|
|
:class="{ 'border-t border-gray-200 dark:border-gray-700': index !== 0 }">
|
|
<div class="flex flex-col flex-grow">
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ item.name }}</h3>
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-2">{{ item.description }}</p>
|
|
</div>
|
|
<div class="mt-auto flex justify-end">
|
|
|
|
<Button @click="executeScenario(item.id)" label="Load" class="flex-auto md:flex-initial text-white">
|
|
<ChevronRightIcon class="w-5 h-10 text-white transition-transform transform hover:translate-x-1"/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #grid="slotProps">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mt-2">
|
|
<div v-for="(item, index) in slotProps.items" :key="index" class="p-2">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md flex flex-col h-full">
|
|
<div class="p-4 flex flex-col flex-grow">
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ item.name }}</h3>
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-2">{{ item.description }}</p>
|
|
</div>
|
|
<div class="p-2 border-t border-gray-200 dark:border-gray-700 flex justify-end">
|
|
<Button @click="executeScenario(item.id)" size="small" label="Load" class="flex-auto md:flex-initial text-white">
|
|
<ChevronRightIcon class="w-6 h-5 text-white transition-transform transform hover:translate-x-1"/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</DataView>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ChevronRightIcon } from '@heroicons/vue/24/solid';
|
|
import { useAuth } from '@websanova/vue-auth/src/v3.js';
|
|
import DataView from 'primevue/dataview';
|
|
import ProgressSpinner from 'primevue/progressspinner';
|
|
import { computed, onMounted, reactive, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { ScenarioService } from '../../service/ScenarioService.js';
|
|
|
|
const router = useRouter()
|
|
const layout = ref('grid');
|
|
const options = ref(['list', 'grid']);
|
|
const loading = ref(true)
|
|
const route = useRoute();
|
|
const auth = useAuth();
|
|
const user = computed(() => auth.user());
|
|
|
|
|
|
const fetchUserData = () => {
|
|
return new Promise((resolve, reject) => {
|
|
auth.fetch().then((fetchedUser) => {
|
|
user.value = fetchedUser;
|
|
resolve(user.value);
|
|
|
|
}).catch((error) => {
|
|
reject(error);
|
|
});
|
|
});
|
|
};
|
|
|
|
const fetchScenarios = (selectedProject) => {
|
|
return ScenarioService.getScenariosProject(selectedProject).then(resp => {
|
|
data.scenarios = resp.data;
|
|
});
|
|
};
|
|
|
|
/*onMounted(() => {
|
|
loading.value = true
|
|
//const id = route.params.selProject;
|
|
//fetchUserData();
|
|
console.log("user after 2:", user.value);
|
|
|
|
console.log("user scenario", user.value.selectedProject);
|
|
|
|
ScenarioService.getScenariosProject(user.value.selectedProject).then(resp=>{
|
|
console.log("response scenari", resp);
|
|
data.scenarios = resp.data
|
|
loading.value = false
|
|
})
|
|
dataApp.apps = user.value.selectedProject.lstApplications;
|
|
console.log("list apps:", dataApp.apps);
|
|
/*ProjectService.getUserApplications().then(resp=>{
|
|
dataApp.apps = resp.data
|
|
console.info("data apps", resp);
|
|
|
|
})
|
|
|
|
});*/
|
|
|
|
onMounted(() => {
|
|
loading.value = true;
|
|
|
|
fetchUserData()
|
|
.then(() => {
|
|
console.log("user after fetch:", user.value);
|
|
console.log("user scenario", user.value.selectedProject);
|
|
|
|
// Assicurati che selectedProject sia definito
|
|
if (user.value.selectedProject) {
|
|
return fetchScenarios(user.value.selectedProject);
|
|
} else {
|
|
throw new Error('Nessun progetto selezionato.');
|
|
}
|
|
})
|
|
.then(() => {
|
|
loading.value = false;
|
|
dataApp.apps = user.value.selectedProject.lstApplications;
|
|
console.log("list apps:", dataApp.apps);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Errore:", error);
|
|
loading.value = false; // Assicurati di fermare il caricamento anche in caso di errore
|
|
});
|
|
});
|
|
|
|
const reloadScenarios = () => {
|
|
console.log("selectedApp", selectedApp.value)
|
|
|
|
ScenarioService.getScenariosApplication(selectedApp.value).then(resp=>{
|
|
console.log("response scenari", resp);
|
|
data.scenarios = resp.data
|
|
//loading.value = false
|
|
})
|
|
};
|
|
|
|
|
|
const data = reactive({
|
|
search: null,
|
|
scenarios: []
|
|
})
|
|
|
|
const dataApp = reactive({
|
|
search: null,
|
|
apps: []
|
|
})
|
|
|
|
const selectedApp = ref(null);
|
|
|
|
|
|
const filter = computed(() => {
|
|
|
|
if (data.search) {
|
|
|
|
return data.scenarios.filter((item) => {
|
|
return data.search
|
|
.toLowerCase()
|
|
.split(" ")
|
|
.every((v) => item.name.toLowerCase().includes(v));
|
|
});
|
|
} else {
|
|
return data.scenarios;
|
|
}
|
|
});
|
|
|
|
const executeScenario = (id) => {
|
|
router.push({ name: 'scenario-exec', params: { id: id } });
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-icon {
|
|
color:#334155;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.search-input {
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
flex: 1;
|
|
}
|
|
|
|
.search-input:focus {
|
|
border: none;
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
</style> |