Item 141

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Item",
-	"version": "2.4.10-SNAPSHOT",
+	"version": "3.0.0-SNAPSHOT",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
@@ -13,6 +13,7 @@
 		"pinia": "^2.1.7",
 		"roboto-fontface": "*",
 		"vue": "^3.4.26",
+		"vue-breakpoints": "^1.1.0",
 		"vue-i18n": "^9.13.1",
 		"vue-router": "^4.3.2",
 		"vuetify": "^3.6.8"

src/App.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-app>
+  <v-app class="h-100 overflow-hidden">
     <Header @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
     <Navbar :drawer="drawer" @close="drawer = false"/>
-    <v-main>
+    <v-main class="d-flex flex-column overflow-auto">
       <div class="error-stack">
         <v-alert
           v-for="(error, index) in errorStack"
@@ -19,35 +19,38 @@
           {{ error.description }}
         </v-alert>
       </div>
-      <router-view v-slot="{ Component }">
-        <component
-          :is="Component"
-          @backendError="addError"
-          @backendSuccess="clearErrors"
-        />
-      </router-view>
+      <div style="flex-grow: 10;">
+        <router-view v-slot="{ Component }">
+          <component
+            :is="Component"
+            @backendError="addError"
+            @backendSuccess="clearErrors"
+          />
+        </router-view>
+      </div>
+      <InfoAppBanner v-if="!authenticated" />
+      <Footer style="flex-basis: 0;" />
     </v-main>
-    <Footer />
   </v-app>
 </template>
 
 <script setup>
-import {onBeforeMount, onMounted, ref} from 'vue';
+import {computed, ref} from 'vue'
 import Header from '@/components/Structure/Header.vue'
 import Navbar from '@/components/Structure/Navbar.vue'
 import Footer from '@/components/Structure/Footer.vue'
 import router from '@/router/index'
 import {HttpStatusCode} from 'axios'
-import {useTheme} from "vuetify";
+import InfoAppBanner from '@/components/Structure/InfoAppBanner.vue'
+import {useAuthStore} from '@/store/authStore'
 
 const errorStack = ref([])
 const drawer = ref(false)
 
+const authStore = useAuthStore()
 
-const theme = useTheme()
-
-onMounted(() => {
-  theme.global.name.value = localStorage.getItem('theme')
+const authenticated = computed(() => {
+  return authStore.isAuthenticated
 })
 
 function addError(error) {
@@ -136,5 +139,4 @@ function toggleDrawer() {
 .custom-alert :deep(.v-alert__close) {
   color: #B71C1C !important; /* Assure que le bouton de fermeture est de la même couleur que le texte */
 }
-
 </style>

src/components/Dialog/DialogCommentaire.vue

@@ -17,7 +17,7 @@
 
 <script setup>
 import {ref} from "vue";
-import demandesService from "@/service/DemandesService";
+import itemService from "@/service/DemandesService";
 
 const emits = defineEmits(['save'])
 const props = defineProps({
@@ -31,7 +31,7 @@ const commentaire = ref(props.demande.commentaire);
 function save(){
   if(!commentaire.value)
     commentaire.value = '';
-  demandesService.modifierCommentaireDemande(props.demande.id, commentaire.value, props.demande.type)
+  itemService.modifierCommentaireDemande(props.demande.id, commentaire.value, props.demande.type)
     .then(() => {
       props.demande.expanded = false;
       emits('save');

src/components/Dialog/DialogSuppression.vue

@@ -23,7 +23,7 @@
   </v-dialog>
 </template>
 <script setup>
-import demandesService from '@/service/DemandesService';
+import itemService from '@/service/DemandesService';
 import router from '@/router';
 import { ref } from 'vue';
 
@@ -43,7 +43,7 @@ const isLoading = ref(false);
 
 function confirm() {
   isLoading.value = true;
-  demandesService.deleteDemande(props.demande.id, props.demande.type)
+  itemService.deleteDemande(props.demande.id, props.demande.type)
     .then(()=>{
       if(props.returnToAccueil){
         router.push('/accueil');

src/components/Email.vue

@@ -39,7 +39,7 @@
 </template>
 <script setup>
 import {onMounted, ref, watch} from 'vue';
-import demandesService from '@/service/DemandesService';
+import itemService from '@/service/DemandesService';
 
 const emits = defineEmits(['validate']);
 const props = defineProps({
@@ -82,7 +82,7 @@ onMounted(() => {
 
 function validate() {
   if(!props.email){
-    demandesService.creerEmail(props.userId, emailModel.value)
+    itemService.creerEmail(props.userId, emailModel.value)
       .then(result => {
         emits('validate', result.data.email);
       })
@@ -91,7 +91,7 @@ function validate() {
         throw err;
       });
   } else {
-    demandesService.modifierEmail(props.userId, emailModel.value)
+    itemService.modifierEmail(props.userId, emailModel.value)
       .then(result => {
         emits('validate', result.data.email);
       })

src/components/Exemp/TypeExemp.vue

@@ -27,7 +27,7 @@
 
 <script setup>
 import { onMounted, ref } from 'vue';
-import DemandesService from '@/service/DemandesService';
+import itemService from '@/service/DemandesService';
 
 const typeExemp = defineModel();
 const emits = defineEmits(['click', 'deleted']);
@@ -36,7 +36,7 @@ const listExemp = ref([]);
 const overlay = ref(true);
 
 onMounted(() => {
-  DemandesService.getTypeExemp()
+  itemService.getTypeExemp()
     .then(response => {
       listExemp.value = response.data;
     });

src/components/MenuDownloadFile.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup>
-import demandesService from '@/service/DemandesService';
+import itemService from '@/service/DemandesService';
 import {computed, onMounted, ref} from 'vue';
 
 const props = defineProps({
@@ -49,14 +49,14 @@ const idEtatCurrentDemande = computed(() => {
 
 
 onMounted(() => {
-  demandesService.getEtatsDemande()
+  itemService.getEtatsDemande()
     .then(response => {
       etatsDemande.value = response.data;
     })
 })
 
 function downloadFile(filePrefix, extention) {
-  demandesService.getFile(props.demande.id, props.demande.type, filePrefix, extention)
+  itemService.getFile(props.demande.id, props.demande.type, filePrefix, extention)
     .then(response => {
       const url = window.URL.createObjectURL(new Blob([response.data]));
       const link = document.createElement('a');

src/components/Modif/TypeTraitement.vue

@@ -28,15 +28,15 @@
 
 <script setup>
 import { onMounted, ref } from 'vue';
-import DemandesService from '@/service/DemandesService';
+import itemService from '@/service/DemandesService';
 
 const typeTraitement = defineModel();
 const emits = defineEmits(['clicked', 'deleted']);
 const props = defineProps({ isLoading: { type: Boolean } });
 const listTraitement = ref([]);
 const overlay = ref(true);
 onMounted(() => {
-  DemandesService.getTypeTraitement()
+  itemService.getTypeTraitement()
     .then(response => {
       listTraitement.value = response.data;
     });

src/components/Simulation.vue

@@ -82,11 +82,11 @@ const isLoading = ref(true);
 const alertMessageError = ref();
 
 onMounted(() => {
-  demandesService.getNbLigneFichier(props.demande.id, props.demande.type)
+  itemService.getNbLigneFichier(props.demande.id, props.demande.type)
     .then(response => {
       nbNotice.value.nbTotalNotice = response.data;
     });
-  demandesService.simulerLigne(props.demande.id, 0, props.demande.type)
+  itemService.simulerLigne(props.demande.id, 0, props.demande.type)
     .then(response => {
       numeroPPNNotice.value = response.data[0];
       noticeAvant.value = response.data[1];

src/components/Structure/Footer.vue

@@ -1,82 +1,81 @@
 <template>
-	<v-footer height="40" app>
-		<a @click="toggleDrawer"><v-icon color="grey">mdi-cog</v-icon></a>
-
-		<div class="text-caption text-disabled" style="position: absolute; right: 16px">{{ currentYear }} <span class="d-none d-sm-inline-block">- ABES</span></div>
-	</v-footer>
-	<v-navigation-drawer v-model="drawer" class="mt-6 border-none">
-		<v-list-item title="Détails application"
-			><v-chip variant="text">Interface :</v-chip><br /><v-chip variant="text">API Item :</v-chip><br /><v-chip variant="text">Batch ITEM :</v-chip><br /><v-chip variant="text"
-				>Accès CBS :</v-chip
-			></v-list-item
-		>
-		<v-divider></v-divider>
-		<v-list-item title="Etat des serveurs">
-			<v-chip :color="chipColorCbsBaseStatus" variant="text"><v-icon icon="mdi-server" start></v-icon>Serveur CBS</v-chip>
-			<v-chip :color="chipColorItemBaseStatus" variant="text"><v-icon icon="mdi-server" start></v-icon>Base XML</v-chip>
-			<v-chip :color="chipColorXmlBaseStatus" variant="text"><v-icon icon="mdi-server" start></v-icon>Base ITEM</v-chip>
-		</v-list-item>
-		<v-divider></v-divider>
-		<v-list-item title="Données personnelles"></v-list-item>
-		<v-list-item title="Conditions générales (CGU)" @click="redirection('https://abes.fr/pages-cgu/conditions-generales-utilisation-sites-abes.html')"></v-list-item>
-		<v-list-item title="Mentions légales"></v-list-item>
-		<v-list-item title="Accesibilité numérique" @click="redirection('https://abes.fr/pages-accessibilite/item.sudoc.html')"></v-list-item>
-		<v-divider></v-divider>
-	</v-navigation-drawer>
+  <v-footer style="bottom: 0px; left: 0px; width: 100%; height: auto" class="mt-auto py-0" color="secondary">
+    <div class="d-flex flex-wrap justify-space-between align-center mt-0 mb-0" style="width: 100%">
+      <div class="d-flex flex-wrap justify-start align-center text-body-2">
+        <a class="ma-2 text-white text-decoration-none" href="https://abes.fr">{{ currentYear }} - ABES</a>
+      </div>
+      <div class="d-flex flex-wrap justify-end align-center text-body-2">
+        <v-tooltip location="top">
+          <template v-slot:activator="{ props }">
+            <a class="ma-2 text-white" v-bind="props" @mouseenter="getHealthOfServices" style="cursor: pointer;">Etat des serveurs</a>
+          </template>
+          <div style="display: flex; flex-direction: column;">
+          <v-chip class="ma-1" :color="healthServices['STATUT CBS'] ? 'green' : 'red'" variant="text"><v-icon icon="mdi-server" start></v-icon>CBS</v-chip>
+          <v-chip class="ma-1" :color="healthServices['STATUT BASE_XML'] ? 'green' : 'red'" variant="text"><v-icon icon="mdi-server" start></v-icon>XML</v-chip>
+          <v-chip class="ma-1" :color="healthServices['STATUT BASE_ITEM'] ? 'green' : 'red'" variant="text"><v-icon icon="mdi-server" start></v-icon>ITEM</v-chip>
+          </div>
+        </v-tooltip>
+        <v-tooltip location="top">
+          <template v-slot:activator="{ props }">
+            <a class="ma-2 text-white" v-bind="props" style="cursor: pointer;">Version de l'application</a>
+          </template>
+          <div style="display: flex; flex-direction: column;">
+            <v-chip class="ma-1 text-white" variant="text">Interface : {{ packageVersion }}</v-chip>
+            <v-chip class="ma-1 text-white" variant="text">Serveur : {{ backVersion }}</v-chip>
+          </div>
+        </v-tooltip>
+        <a class="ma-2 text-white text-decoration-none" href="/donnees">Données personnelles</a>
+        <a class="ma-2 text-white text-decoration-none" href="https://abes.fr/pages-cgu/conditions-generales-utilisation-sites-abes.html">Conditions générales d'utilisation (CGU)</a>
+        <a class="ma-2 text-white text-decoration-none" href="/mentions">Mentions légales</a>
+        <a class="ma-2 text-white text-decoration-none" href="https://abes.fr/pages-accessibilite/item.sudoc.html">Accessibilité Numérique</a>
+      </div>
+    </div>
+  </v-footer>
 </template>
 
 <script setup>
-import {ref, computed} from 'vue'
-const items = [
-	{
-		title: 'Détails application',
-		href: 'https://vuetifyjs.com/'
-	},
-	{
-		title: 'Etat des serveurs',
-		href: 'https://support.vuetifyjs.com/'
-	},
-	{
-		title: 'Données personnelles',
-		href: 'https://github.com/vuetifyjs/vuetify'
-	},
-	{
-		title: "Conditions générales d'utilisation",
-		href: 'https://github.com/vuetifyjs/vuetify'
-	},
-	{
-		title: 'Mentions légales',
-		href: 'https://community.vuetifyjs.com/'
-	},
-	{
-		title: 'Accessibilité numérique',
-		href: 'https://reddit.com/r/vuetifyjs'
-	}
-]
-const drawer = ref(false)
-const chipColorCbsBaseStatus = ref('green')
-const chipColorItemBaseStatus = ref('green')
-const chipColorXmlBaseStatus = ref('red')
+import {ref, computed, onMounted} from 'vue'
+import itemService from '@/service/DemandesService'
+
 const currentYear = computed(() => new Date().getFullYear())
-const toggleDrawer = () => {
-	drawer.value = !drawer.value
-}
-const checkServiceAvailable = () => {
-	//TODO integrer appel au service de controle de dispo des Bases
-	//alimenter chipColorCbsBaseStatus chipColorItemBaseStatus chipColorXmlBaseStatus
-	//rafraichir toutes les 20 secondes
-}
-const redirection = externalUrl => {
-	window.open(externalUrl, '_blank')
-}
-</script>
 
-<style scoped lang="sass">
-.social-link :deep(.v-icon)
-  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
-  text-decoration: none
-  transition: .2s ease-in-out
+const packageVersion = process.env.PACKAGE_VERSION.replaceAll('\"', '');
+const backVersion = ref()
+const healthServices = ref([{
+  'STATUT CBS':false,
+  'STATUT BASE_XML':false,
+  'STATUT BASE_ITEM':false
+}])
 
-  &:hover
-    color: rgba(25, 118, 210, 1)
-</style>
+onMounted(async () => {
+  try {
+    const version = await itemService.getApplicationVersion()
+    backVersion.value = version.data.BACKVERSION
+  } catch (error) {
+    console.error('Erreur lors de la récupération de la version de l\'application :', error)
+  }
+})
+
+const getHealthOfServices = async () => {
+  try {
+    const response = await itemService.getHealthOfServices()
+    console.log('Response:', response)
+
+    if (response.data) {
+      console.log('Response Data:', response.data)
+      healthServices.value = response.data
+    } else {
+      console.warn('La réponse ne contient pas de propriété "data".')
+    }
+
+    console.log('Health Services:', healthServices.value)
+  } catch (error) {
+    healthServices.value = [{
+      'STATUT CBS':false,
+      'STATUT BASE_XML':false,
+      'STATUT BASE_ITEM':false
+    }]
+    console.error('Erreur lors de la récupération des statuts des services :', error)
+  }
+}
+</script>