toggle + menù app

This commit is contained in:
Florinda
2024-10-22 18:12:55 +02:00
parent aa466491c2
commit 6b1eb70239
7 changed files with 153 additions and 61 deletions

View File

@@ -1,12 +1,20 @@
<script setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
import { UserPrefStore } from '../stores/UserPrefStore.js';
import AppMenuItem from './AppMenuItem.vue';
const userPrefStore = UserPrefStore();
const model = ref([
{
label: '',
items: []
//items: [{ label: 'ATF-Notifier', icon: 'pi pi-fw pi-id-card', to: '/app-browser' }]
} ,
{
label: 'Scenarios',
items: [
@@ -16,12 +24,38 @@ const model = ref([
}, {
label: 'Canvas',
items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-id-card', to: '/mdcanvas' }]
},{
label: 'Your Applications',
items: [{ label: 'ATF-Notifier', icon: 'pi pi-fw pi-id-card', to: '/app-browser' }]
}
}
]);
// Funzione per aggiornare la sezione "Your Applications" in base a selectedApp
function updateApplicationsMenu() {
const selectedApp = userPrefStore.getSelApp;
console.log("selectedApp", selectedApp);
if (selectedApp!=null) {
// Se selectedApp non è nullo, aggiorna gli item
model.value[0].label = selectedApp.fe_name;
// Aggiorna gli item dell'app selezionata
model.value[0].items = [
{ label: 'Rev Eng Code', icon: 'pi pi-fw pi-id-card', to: '/app-browser' }
];
selectedApp.available_scenarios.forEach(app => {
model.value[0].items.push({ label: app.label, icon: 'pi pi-fw pi-id-card', to: `/scenario/exec/${app.scenario_id}` });
});
} else {
// Se selectedApp è nullo, svuota gli item
model.value[0].label = '';
model.value[0].items = [];
}
}
// Monitora i cambiamenti in selectedApp dallo store
watch(() => userPrefStore.getSelApp, updateApplicationsMenu, { immediate: true });
</script>
<template>

View File

@@ -1,9 +1,19 @@
<script setup>
import { onMounted } from 'vue';
import { UserPrefStore } from '../stores/UserPrefStore.js';
import AppMenu from './AppMenu.vue';
const userPrefStore = UserPrefStore();
onMounted(() => {
userPrefStore.fetchUserData();
});
</script>
<template>
<app-menu></app-menu>
<div v-if="userPrefStore.userLoaded">
<app-menu></app-menu>
</div>
</template>
<style lang="scss" scoped></style>

View File

@@ -13,5 +13,9 @@ export const ScenarioService = {
return axios.post('/scenariosByApp' , app)
},
getScenariosCross() {
return axios.get('/scenariosCross')
},
}

View File

@@ -12,6 +12,7 @@ export const ScenarioStore = defineStore('scenario_store', () => {
const applicationScenarios = ref([])
const filterString = ref('')
const allScenarios = ref([])
const typeFilter = ref('all')
const userPrefStore = UserPrefStore()
const loadingStore = LoadingStore()
@@ -27,6 +28,16 @@ export const ScenarioStore = defineStore('scenario_store', () => {
}
async function fetchScenariosCross() {
loadingStore.scenario_loading = true;
await ScenarioService.getScenariosCross().then(resp => {
globalScenarios.value = resp.data;
allScenarios.value = [...globalScenarios.value]
loadingStore.scenario_loading = false;
});
}
async function fetchApplicationScenarios() {
loadingStore.scenario_loading = true;
@@ -46,7 +57,22 @@ export const ScenarioStore = defineStore('scenario_store', () => {
const filteredScenarios = computed(() => {
console.log("scenarios", allScenarios.value);
return allScenarios.value.filter((item) => {
var filteredScenario = []
if(typeFilter.value.value === 'all') {
filteredScenario = [...projectScenarios.value, ...applicationScenarios.value, ...globalScenarios.value]
}
if(typeFilter.value.value === 'project') {
filteredScenario = [...projectScenarios.value]
}
if(typeFilter.value.value === 'application') {
filteredScenario = [...applicationScenarios.value]
}
if(typeFilter.value.value === 'cross') {
filteredScenario = [...globalScenarios.value]
}
return filteredScenario.filter((item) => {
return filterString.value
.toLowerCase()
.split(" ")
@@ -61,5 +87,5 @@ export const ScenarioStore = defineStore('scenario_store', () => {
fetchScenarios,
fetchApplicationScenarios,
scenarios,
filterString }
filterString , typeFilter, fetchScenariosCross, globalScenarios}
})

View File

@@ -1,6 +1,7 @@
import { useAuth } from '@websanova/vue-auth/src/v3.js';
import { defineStore } from 'pinia';
import { computed, ref } from 'vue';
import { ProjectService } from '../service/ProjectService';
import { LoadingStore } from './LoadingStore';
export const UserPrefStore = defineStore('userpref_store', () => {
@@ -24,14 +25,43 @@ export const UserPrefStore = defineStore('userpref_store', () => {
});
};
async function updateSelectedProject(project) {
try {
loadingStore.user_loading = true;
// Aspetta che l'aggiornamento del progetto finisca
await ProjectService.updateSelectedProject(project);
} catch (error) {
console.error("Errore durante l'aggiornamento del progetto:", error);
} finally {
// Assicurati che il caricamento venga disabilitato anche in caso di errore
loadingStore.user_loading = false;
}
};
function setSelectedApp(app){
selectedApp.value = app;
}
const selectedProject = computed(() => user.value.selectedProject)
const availableApp = computed(() => user.value.selectedProject.lstApplications)
//const availableApp = computed(() => user.value.selectedProject.lstApplications)
const availableApp = computed(() => {
if (user.value.selectedProject!=null) {
return user.value.selectedProject.lstApplications
} else {
return []
}
});
const getSelApp = computed(() => {
return selectedApp.value
})
return { user,fetchUserData,userLoaded,selectedProject,availableApp,setSelectedApp,selectedApp }
return { user,fetchUserData,userLoaded,selectedProject,availableApp,getSelApp,setSelectedApp,selectedApp, updateSelectedProject }
})

View File

@@ -72,13 +72,16 @@
<script setup>
import { ChevronRightIcon } from '@heroicons/vue/24/solid';
import { useAuth } from '@websanova/vue-auth/src/v3.js';
import axios from 'axios';
import DataView from 'primevue/dataview';
import ProgressSpinner from 'primevue/progressspinner';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ProjectService } from '../../service/ProjectService.js';
import { LoadingStore } from '../../stores/LoadingStore.js';
import { UserPrefStore } from '../../stores/UserPrefStore.js';
const loadingStore = LoadingStore()
const userPrefStore = UserPrefStore();
const auth = useAuth();
const user = computed(() => auth.user());
@@ -89,15 +92,8 @@ const user = computed(() => auth.user());
const loading = ref(false)
onMounted(() => {
console.log("user:", user);
//loading.value = true
data.projects = user.value.lstProjects;
/* ProjectService.getUserProjects().then(resp=>{
data.projects = resp.data
console.log("data projects", data.projects);
loading.value = false
})*/
});
@@ -122,48 +118,20 @@ const user = computed(() => auth.user());
}
});
const openProject = (project) => {
const openProject = async (project) => {
try {
// Esegui l'update del progetto
await userPrefStore.updateSelectedProject(project);
console.log('Progetto aggiornato e dati utente ricaricati');
console.log("id item", project);
ProjectService.updateSelectedProject(project).then(resp=>{
//data.projects = resp.data
console.info("data selected " + resp.data);
//auth.fetch();
//console.log(auth.user);
router.push({ name: 'scenario-list' });
});
console.log("user before:", user.value);
/* try {
const response = axios.get('api/auth/fetch-user');
console.log("Resp fetch: ", response.data);
console.log("auth", auth);
auth.setUser(response.data); // Aggiorna l'oggetto utente locale
} catch (error) {
console.error('Errore durante il recupero dei dati utente', error);
}*/
//params: { selProject: project }
//router.push({ name: 'scenario-list' });
router.push({ name: 'scenario-list' });
} catch (error) {
console.error('Errore nel cambio progetto:', error);
}
}
const fetchUserData = async () => {
try {
const response = await axios.get('api/auth/fetch-user');
const fetchedUser = response.data.data;
// Aggiorna le informazioni dell'utente in auth
//Object.assign(auth.user(), fetchedUser);
//user.value = response.data.data; // Aggiorna l'utente con i dati recuperati
console.log("fetch response:", response);
console.log("user after:", auth.user());
} catch (error) {
console.error('Error fetching user data:', error);
}
}
</script>
<style scoped>

View File

@@ -17,6 +17,11 @@
variant="filled"
/>
</div>
<div class="card flex justify-center">
<SelectButton v-model="scenario_store.typeFilter" :options="scenarioTypeOp" optionLabel="name" />
</div>
<SelectButton v-model="layout" :options="options" :allowEmpty="false" class="layout-switch">
<template #option="{ option }">
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
@@ -72,15 +77,30 @@ import DataView from 'primevue/dataview';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ScenarioStore } from '../../stores/ScenarioStore.js';
import { UserPrefStore } from '../../stores/UserPrefStore.js';
const router = useRouter()
const layout = ref('grid');
const options = ref(['list', 'grid']);
const scenario_store = ScenarioStore();
const userPrefStore = UserPrefStore();
const scenarioTypeOp = ref([
{ name: 'All', value: 'all' },
{ name: 'Croos', value: 'cross' },
{ name: 'Project', value: 'project' },
{ name: 'Application', value: 'application' }
]);
onMounted(() => {
scenario_store.fetchScenarios();
userPrefStore.fetchUserData().then(() => {
scenario_store.fetchScenarios();
scenario_store.fetchScenariosCross();
});
});
const executeScenario = (id) => {