From 1b1c6cf47831887a23ee6964dd07ba95851bbb6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o?= <cdf.leo.merkel@gmail.com>
Date: Fri, 7 Feb 2025 14:48:30 +0100
Subject: [PATCH] style DONE,

---
 src/style.css            | 16 ++++++++++-
 src/views/Dashboard.vue  | 57 ++++++++++++++++++++++++----------------
 src/views/Login.vue      |  2 +-
 src/views/Products.vue   | 17 ++++++------
 src/views/Warehouses.vue |  4 +--
 5 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/src/style.css b/src/style.css
index 95580e1..8366af8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -21,7 +21,12 @@ a {
 a:hover {
   color: #535bf2;
 }
-
+li{
+  list-style-type: none;
+}
+ul{
+  padding: 0 !important;
+}
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
@@ -95,4 +100,13 @@ h1 {
   display: flex;
   flex-direction: column;
   align-items: center;
+}
+
+.carousel-products{
+  display:flex; 
+  flex-direction:column;
+  align-items:center;
+  gap: 1rem;
+  padding-bottom: 2rem;
+
 }
\ No newline at end of file
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index d01200a..14b02af 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -12,6 +12,8 @@ import IftaLabel from 'primevue/iftalabel';
 import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast';
 import Divider from 'primevue/divider';
+import ScrollPanel from 'primevue/scrollpanel';
+import Chip from 'primevue/chip';
 
 const toast = useToast();
 
@@ -139,46 +141,53 @@ function makeAlert(productsAlerts){
         <Fieldset class="fieldset-section fieldset-wh-graph" legend="Listes des Entrepôts" >
             <Chart type="bar" :data="chartWarehousesData" :options="chartOptions"></Chart>
         </Fieldset>
-        <Fieldset class="fieldset-section fieldset-capacity-usage" legend="Used capacity" >
+        <Fieldset class="fieldset-section fieldset-capacity-usage" legend=" Capacité utilisé" >
+            <ScrollPanel style="width: 100%; height: 20rem">
             <ul>
-                <li v-for="warehouse in warehouses" :key="warehouse.id" style="list-style-type: none;">
-                    {{ warehouse.name }}
+                <li v-for="warehouse in warehouses" :key="warehouse.id">
+                    <h4>{{ warehouse.name }}</h4>
                     <MeterGroup :value="getProductValues(warehouse)"></MeterGroup>
+                    <Divider />
                 </li>
             </ul>
+        </ScrollPanel>
         </Fieldset>
         <Fieldset class="fieldset-section fieldset-quickadd" legend="Ajout Rapide" >
-            <form @submit.prevent="productValueModifier">
+            <form class="form-update-user" @submit.prevent="productValueModifier">
                 <IftaLabel>
-                    <AutoComplete inputId="reference" name="reference" optionLabel="reference" variant="filled" :suggestions="filteredRef" v-model="selectedRef" @complete="search" fluid></AutoComplete>
-                    <label for="reference">Reference</label>
+                    <AutoComplete inputId="reference" name="reference" optionLabel="reference" :suggestions="filteredRef" v-model="selectedRef" @complete="search" fluid></AutoComplete>
+                    <label for="reference">Réference :</label>
                 </IftaLabel>
                 <IftaLabel>
                     <InputNumber inputId="number-value" showButtons v-model="newValue" mode="decimal" fluid></InputNumber>
-                    <label for="number-value">Ajouter/Soustraire</label>
+                    <label for="number-value">Ajouter/Soustraire :</label>
                 </IftaLabel>
                 <Button
-                    label="update"
+                    label="Modifier"
+                    icon="pi pi-file-edit
+"
                     type="submit"
                     class="p-button-primary"> </Button>
             </form>
         </Fieldset>
-        <Fieldset class="fieldset-section fieldset-list-wh-p" legend="Products et Entrepôt" >
+        <Fieldset class="fieldset-section fieldset-list-wh-p" legend="Products et Entrepôt">
             <Carousel :value="products" 
             :numVisible="3" 
             :numScroll="1" 
             >
                 <template #item="slotProps">
-                    <span v-if="slotProps.data.alert_enabled && slotProps.data.is_stock_low" style="color:red">
-                        <Tag severity="danger" value="STOCK FAIBLE" rounded> </Tag>
-                    </span>
-                    <span v-else>
-                        <Tag severity="info" value="STOCK OK" rounded> </Tag>
-                    </span>
-                    <p>{{ slotProps.data.name }}</p>
-                    <p>{{ slotProps.data.reference }}</p>
-                    <p>{{ slotProps.data.quantity }}</p>
-                    <img :src="slotProps.data.image" alt="" style="border-radius: 8px; width: 150px;">
+                    <div class="carousel-products">
+                        <span v-if="slotProps.data.alert_enabled && slotProps.data.is_stock_low">
+                            <Tag icon="pi pi-box"severity="danger" value="STOCK FAIBLE" rounded> </Tag>
+                        </span>
+                        <span v-else>
+                            <Tag icon="pi pi-box" severity="info" value="STOCK OK" rounded> </Tag>
+                        </span>
+                        <img v-if="slotProps.data.image" :src="slotProps.data.image" alt="" style="border-radius: 8px; width: 6rem; height: 6rem;">
+                        <i v-if="!slotProps.data.image" class="pi pi-eye-slash" style="font-size: 6rem"></i>
+                        <Chip icon="pi pi-box" :label="String(slotProps.data.quantity)"/>
+                        <Chip icon="pi pi-hashtag" :label="String(slotProps.data.reference)"></Chip>
+                    </div>
                 </template>
             </Carousel>
             <Divider />
@@ -186,10 +195,12 @@ function makeAlert(productsAlerts){
             :numVisible="3" 
             :numScroll="1" 
             >
-                <template #item="slotProps">
-                    <p>{{ slotProps.data.name }}</p>
-                    <p>{{ slotProps.data.location }}</p>
-                    <p>{{ slotProps.data.max_capacity }}</p>
+                <template #item="slotProps" >
+                    <div class="carousel-products">
+                        <h4>{{ slotProps.data.name }}</h4>
+                        <Chip icon="pi pi-map-marker" :label="slotProps.data.location"></Chip>
+                        <Chip icon="pi pi-shop" :label="`${slotProps.data.max_capacity}`"></Chip>
+                    </div>
                 </template>
             </Carousel>
         </Fieldset>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 2776b08..1b9904c 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -128,7 +128,7 @@ async function modify_user() {
         <form class="form-update-user" @submit.prevent="modify_user">
           <div class="field">
             <IftaLabel>
-              <InputText id="modify-username" v-model="usernameModify" placeholder="" required fluid />
+              <InputText id="modify-username" v-model="usernameModify"  required fluid />
               <label for="modify-username">Nom d'utilisateur :</label>
             </IftaLabel>
           </div>
diff --git a/src/views/Products.vue b/src/views/Products.vue
index 49ccea3..e338056 100644
--- a/src/views/Products.vue
+++ b/src/views/Products.vue
@@ -63,6 +63,7 @@ async function create_product() {
     products.value = await getProducts();
     products.value = enrichProducts();
     resetForms();
+    visible.value = false
     toast.add({ severity: 'success', life: 2500, summary:`${productName.value} crée`});
 } catch (error){
     if (error.response && error.response.data) {
@@ -427,9 +428,7 @@ try {
         icon="pi pi-check"
           label="Créer"
           type="submit"
-          class="p-button-primary"
-          @click="visible = false"
-        />
+          class="p-button-primary"/>
       </form>
       </Dialog>
     </div>
@@ -473,20 +472,20 @@ try {
       </template>
       </Column>
 
-      <Column field="is_stock_low" header="Stock" sortable>
+      <Column field="is_stock_low" header="En stock" sortable>
         <template #body="slotProps">
           <Tag
             :severity="slotProps.data.is_stock_low
               ? 'danger'
               : 'success'"
             :value="slotProps.data.is_stock_low
-              ? 'LOWSTOCK'
-              : 'INSTOCK'"
+              ? 'STOCK FAIBLE'
+              : 'EN STOCK'"
           />
         </template>
       </Column>
 
-      <Column field="name" header="Name" editor="true" sortable>
+      <Column field="name" header="Nom" editor="true" sortable>
         <template #body="slotProps">
           <span v-if="!modifyErrors[slotProps.data.id]?.name">{{ slotProps.data.name }}</span>
           <p-message v-if="modifyErrors[slotProps.data.id]?.name" severity="error">{{ modifyErrors[slotProps.data.id].name }}</p-message>
@@ -496,7 +495,7 @@ try {
         </template>
       </Column>
 
-      <Column field="reference" header="reference" editor="true" sortable>
+      <Column field="reference" header="Réference" editor="true" sortable>
         <template #body="slotProps">
           <span v-if="!modifyErrors[slotProps.data.id]?.reference">{{ slotProps.data.reference }}</span>
           <p-message v-if="modifyErrors[slotProps.data.id]?.reference" severity="error">{{ modifyErrors[slotProps.data.id].reference }}</p-message>
@@ -560,7 +559,7 @@ try {
       </Column>
       <Column
         :rowEditor="true"
-        style="width: 10%; min-width: 8rem"
+        style="width: 10%;"
         bodyStyle="text-align:center"
       />
     </DataTable>
diff --git a/src/views/Warehouses.vue b/src/views/Warehouses.vue
index f600ca5..dc0f7bf 100644
--- a/src/views/Warehouses.vue
+++ b/src/views/Warehouses.vue
@@ -145,7 +145,7 @@ onMounted(async () => {
                 <div class="form">
                     <IftaLabel>
                         <InputText name="register-location" type="text" id="register-location" v-model="warehouseLocation" required fluid/>
-                        <label for="register-location">Location :</label>
+                        <label for="register-location">Localisation :</label>
                     </IftaLabel>
                     <p-message v-if="registerErrors.location" severity="error">{{ registerErrors.location }}</p-message>
                 </div>
@@ -174,7 +174,7 @@ onMounted(async () => {
                 </template>
             </Column>
 
-            <Column field="location" header="Location" editor="true">
+            <Column field="location" header="Localisation" editor="true">
                 <template #body="slotProps">
                     <span v-if="!modifyErrors.location">{{ slotProps.data.location }}</span>
                     <p-message v-if="modifyErrors.location" severity="error">{{ modifyErrors.location }}</p-message>