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

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>