style DONE,

This commit is contained in:
Léo 2025-02-07 14:48:30 +01:00
parent 6ed65c34dd
commit 1b1c6cf478
5 changed files with 60 additions and 36 deletions

View File

@ -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;
@ -96,3 +101,12 @@ h1 {
flex-direction: column;
align-items: center;
}
.carousel-products{
display:flex;
flex-direction:column;
align-items:center;
gap: 1rem;
padding-bottom: 2rem;
}

View File

@ -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>

View File

@ -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>

View File

@ -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="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>

View File

@ -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>