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

first commit

Browse Source
This commit is contained in:
Florinda
2024-10-18 17:42:55 +02:00
parent d99d89c135
commit ba02737680
9 changed files with 383 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/AppLayout.vue
View File

@@ -8,8 +8,10 @@ import AppTopbar from './AppTopbar.vue';
const { layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
const outsideClickListener = ref(null);
const page = ref("progetti");
watch(isSidebarActive, (newVal) => {
//console.log("routerLink", routerLink);
if (newVal) {
bindOutsideClickListener();
} else {
@@ -54,7 +56,7 @@ const isOutsideClicked = (event) => {
<template>
<div class="layout-wrapper" :class="containerClass">
<app-topbar></app-topbar>
<app-topbar :page="page"></app-topbar>
<div class="layout-sidebar">
<app-sidebar></app-sidebar>
</div>

12
src/layout/AppProfileMenu.vue
View File

@@ -4,8 +4,9 @@
<span class="config-panel-label">Welcome </span>
<span v-if="user">
{{ user.name + " " + user.surname }}
</span>
<button @click="auth.logout()" class="p-button p-button-danger p-button-outlined">Logout</button>
</span>
<button @click="redirectProject()" class="p-button p-button-danger p-button-outlined">Projects</button>
<button @click="auth.logout()" class="p-button p-button-danger p-button-outlined">Logout</button>
</div>
</div>
</template>
@@ -14,8 +15,15 @@
import { useAuth } from '@websanova/vue-auth/src/v3.js';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
const auth = useAuth();
const user = computed(() => auth.user());
const router = useRouter();
function redirectProject() {
router.push('/projects'); // Specifica il percorso per la pagina "Projects"
}
</script>

18
src/layout/AppTopbar.vue
View File

@@ -9,8 +9,25 @@ import AppProfileMenu from './AppProfileMenu.vue';
const auth = useAuth();
const router = useRouter();
const props = defineProps(['page']);
const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
/*const fetchData = async () => {
try {
const response = await axios.get('/userApplications');
items.value = response.data;
} catch (error) {
console.error('Errore durante il recupero dei dati:', error);
}
};
// Richiama il metodo all'inizializzazione del componente
onMounted(() => {
fetchData();
});*/
</script>
<template>
@@ -44,6 +61,7 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
<div class="layout-topbar-actions">
<div class="layout-config-menu">
<button @click="router.push('/canvas')" class="layout-topbar-action" >
<i class="pi pi-file-edit"></i>
</button >

5
src/router/index.js
View File

@@ -15,6 +15,11 @@ const router = createRouter({
{
path: 'scenario',
children: [
{
path: '/projects',
name: 'projects-list',
component: () => import('@/views/pages/ProjectList.vue')
},
{
path: '/',
name: 'scenario-list',

22
src/service/ProjectService.js Normal file
View File

@@ -0,0 +1,22 @@
import axios from 'axios';
export const ProjectService = {
getUserProjects() {
return axios.get('/userProjects')
}
,
getUserApplications() {
return axios.get('/userApplications')
}
,
updateSelectedProject(data) {
return axios.post('/updateSelectedProject', data)
}
/* {
projectName: selectedProjectName
}*/
}

11
src/service/ScenarioService.js
View File

@@ -4,5 +4,14 @@ export const ScenarioService = {
getScenarios() {
return axios.get('/scenarios')
}
},
getScenariosProject(projectId) {
return axios.post('/scenariosProject' , projectId)
},
getScenariosApplication(app) {
return axios.post('/scenariosByApp' , app)
},
}

199
src/views/pages/ProjectList.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<div>
<h1>Available Projects</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>
<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.fe_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="openProject(item)" 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.fe_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="openProject(item)" 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 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';
const auth = useAuth();
const user = computed(() => auth.user());
const router = useRouter()
const layout = ref('grid');
const options = ref(['list', 'grid']);
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
})*/
});
const data = reactive({
search: null,
projects: []
})
const filter = computed(() => {
if (data.search) {
return data.projects.filter((item) => {
return data.search
.toLowerCase()
.split(" ")
.every((v) => item.name.toLowerCase().includes(v));
});
} else {
return data.projects;
}
});
const openProject = (project) => {
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' });
}
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>
.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>

100
src/views/pages/ScenarioList.vue
View File

@@ -20,6 +20,15 @@
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']" />
@@ -30,6 +39,8 @@
<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 }">
@@ -71,32 +82,113 @@
<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 { useRouter } from 'vue-router';
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());
onMounted(() => {
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
ScenarioService.getScenarios().then(resp=>{
//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) {

22
src/views/pages/auth/Login.vue
View File

@@ -24,10 +24,28 @@ const login = async () => {
"username":username.value,
"password":password.value
},
redirect:'/',
//redirect:'/projects',
fetchUser: true,
//url: '/api/auth/login'
})
}).then((response) => {
console.log("1 user :" , response.data.data);
// Controlla se selectedProject è nullo o un oggetto vuoto
if (!response.data.data.selectedProject) {
// Se selectedProject è nullo o vuoto, reindirizza a '/projects'
console.log("selP null" , response.data.data);
router.push({ name: 'project-list' });
} else {
// Se selectedProject è nullo o vuoto, reindirizza a '/projects'
console.log("selP not null" , response.data.data);
// Altrimenti, reindirizza a '/scenarios'
router.push({ name: 'scenario-list' });
}
console.log("response", response);
}).catch((error) => {
console.log("error", error);
});
} catch (err) {
console.log( 'Error ' + err)
error.value = 'Incorrect username or password. Please try again.';