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 { a:hover {
color: #535bf2; color: #535bf2;
} }
li{
list-style-type: none;
}
ul{
padding: 0 !important;
}
h1 { h1 {
font-size: 3.2em; font-size: 3.2em;
line-height: 1.1; line-height: 1.1;
@ -96,3 +101,12 @@ h1 {
flex-direction: column; flex-direction: column;
align-items: center; 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 Button from 'primevue/button'
import { useToast } from 'primevue/usetoast'; import { useToast } from 'primevue/usetoast';
import Divider from 'primevue/divider'; import Divider from 'primevue/divider';
import ScrollPanel from 'primevue/scrollpanel';
import Chip from 'primevue/chip';
const toast = useToast(); const toast = useToast();
@ -139,26 +141,31 @@ function makeAlert(productsAlerts){
<Fieldset class="fieldset-section fieldset-wh-graph" legend="Listes des Entrepôts" > <Fieldset class="fieldset-section fieldset-wh-graph" legend="Listes des Entrepôts" >
<Chart type="bar" :data="chartWarehousesData" :options="chartOptions"></Chart> <Chart type="bar" :data="chartWarehousesData" :options="chartOptions"></Chart>
</Fieldset> </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> <ul>
<li v-for="warehouse in warehouses" :key="warehouse.id" style="list-style-type: none;"> <li v-for="warehouse in warehouses" :key="warehouse.id">
{{ warehouse.name }} <h4>{{ warehouse.name }}</h4>
<MeterGroup :value="getProductValues(warehouse)"></MeterGroup> <MeterGroup :value="getProductValues(warehouse)"></MeterGroup>
<Divider />
</li> </li>
</ul> </ul>
</ScrollPanel>
</Fieldset> </Fieldset>
<Fieldset class="fieldset-section fieldset-quickadd" legend="Ajout Rapide" > <Fieldset class="fieldset-section fieldset-quickadd" legend="Ajout Rapide" >
<form @submit.prevent="productValueModifier"> <form class="form-update-user" @submit.prevent="productValueModifier">
<IftaLabel> <IftaLabel>
<AutoComplete inputId="reference" name="reference" optionLabel="reference" variant="filled" :suggestions="filteredRef" v-model="selectedRef" @complete="search" fluid></AutoComplete> <AutoComplete inputId="reference" name="reference" optionLabel="reference" :suggestions="filteredRef" v-model="selectedRef" @complete="search" fluid></AutoComplete>
<label for="reference">Reference</label> <label for="reference">Réference :</label>
</IftaLabel> </IftaLabel>
<IftaLabel> <IftaLabel>
<InputNumber inputId="number-value" showButtons v-model="newValue" mode="decimal" fluid></InputNumber> <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> </IftaLabel>
<Button <Button
label="update" label="Modifier"
icon="pi pi-file-edit
"
type="submit" type="submit"
class="p-button-primary"> </Button> class="p-button-primary"> </Button>
</form> </form>
@ -169,16 +176,18 @@ function makeAlert(productsAlerts){
:numScroll="1" :numScroll="1"
> >
<template #item="slotProps"> <template #item="slotProps">
<span v-if="slotProps.data.alert_enabled && slotProps.data.is_stock_low" style="color:red"> <div class="carousel-products">
<Tag severity="danger" value="STOCK FAIBLE" rounded> </Tag> <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>
<span v-else> <span v-else>
<Tag severity="info" value="STOCK OK" rounded> </Tag> <Tag icon="pi pi-box" severity="info" value="STOCK OK" rounded> </Tag>
</span> </span>
<p>{{ slotProps.data.name }}</p> <img v-if="slotProps.data.image" :src="slotProps.data.image" alt="" style="border-radius: 8px; width: 6rem; height: 6rem;">
<p>{{ slotProps.data.reference }}</p> <i v-if="!slotProps.data.image" class="pi pi-eye-slash" style="font-size: 6rem"></i>
<p>{{ slotProps.data.quantity }}</p> <Chip icon="pi pi-box" :label="String(slotProps.data.quantity)"/>
<img :src="slotProps.data.image" alt="" style="border-radius: 8px; width: 150px;"> <Chip icon="pi pi-hashtag" :label="String(slotProps.data.reference)"></Chip>
</div>
</template> </template>
</Carousel> </Carousel>
<Divider /> <Divider />
@ -187,9 +196,11 @@ function makeAlert(productsAlerts){
:numScroll="1" :numScroll="1"
> >
<template #item="slotProps" > <template #item="slotProps" >
<p>{{ slotProps.data.name }}</p> <div class="carousel-products">
<p>{{ slotProps.data.location }}</p> <h4>{{ slotProps.data.name }}</h4>
<p>{{ slotProps.data.max_capacity }}</p> <Chip icon="pi pi-map-marker" :label="slotProps.data.location"></Chip>
<Chip icon="pi pi-shop" :label="`${slotProps.data.max_capacity}`"></Chip>
</div>
</template> </template>
</Carousel> </Carousel>
</Fieldset> </Fieldset>

View File

@ -128,7 +128,7 @@ async function modify_user() {
<form class="form-update-user" @submit.prevent="modify_user"> <form class="form-update-user" @submit.prevent="modify_user">
<div class="field"> <div class="field">
<IftaLabel> <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> <label for="modify-username">Nom d'utilisateur :</label>
</IftaLabel> </IftaLabel>
</div> </div>

View File

@ -63,6 +63,7 @@ async function create_product() {
products.value = await getProducts(); products.value = await getProducts();
products.value = enrichProducts(); products.value = enrichProducts();
resetForms(); resetForms();
visible.value = false
toast.add({ severity: 'success', life: 2500, summary:`${productName.value} crée`}); toast.add({ severity: 'success', life: 2500, summary:`${productName.value} crée`});
} catch (error){ } catch (error){
if (error.response && error.response.data) { if (error.response && error.response.data) {
@ -427,9 +428,7 @@ try {
icon="pi pi-check" icon="pi pi-check"
label="Créer" label="Créer"
type="submit" type="submit"
class="p-button-primary" class="p-button-primary"/>
@click="visible = false"
/>
</form> </form>
</Dialog> </Dialog>
</div> </div>
@ -473,20 +472,20 @@ try {
</template> </template>
</Column> </Column>
<Column field="is_stock_low" header="Stock" sortable> <Column field="is_stock_low" header="En stock" sortable>
<template #body="slotProps"> <template #body="slotProps">
<Tag <Tag
:severity="slotProps.data.is_stock_low :severity="slotProps.data.is_stock_low
? 'danger' ? 'danger'
: 'success'" : 'success'"
:value="slotProps.data.is_stock_low :value="slotProps.data.is_stock_low
? 'LOWSTOCK' ? 'STOCK FAIBLE'
: 'INSTOCK'" : 'EN STOCK'"
/> />
</template> </template>
</Column> </Column>
<Column field="name" header="Name" editor="true" sortable> <Column field="name" header="Nom" editor="true" sortable>
<template #body="slotProps"> <template #body="slotProps">
<span v-if="!modifyErrors[slotProps.data.id]?.name">{{ slotProps.data.name }}</span> <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> <p-message v-if="modifyErrors[slotProps.data.id]?.name" severity="error">{{ modifyErrors[slotProps.data.id].name }}</p-message>
@ -496,7 +495,7 @@ try {
</template> </template>
</Column> </Column>
<Column field="reference" header="reference" editor="true" sortable> <Column field="reference" header="ference" editor="true" sortable>
<template #body="slotProps"> <template #body="slotProps">
<span v-if="!modifyErrors[slotProps.data.id]?.reference">{{ slotProps.data.reference }}</span> <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> <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>
<Column <Column
:rowEditor="true" :rowEditor="true"
style="width: 10%; min-width: 8rem" style="width: 10%;"
bodyStyle="text-align:center" bodyStyle="text-align:center"
/> />
</DataTable> </DataTable>

View File

@ -145,7 +145,7 @@ onMounted(async () => {
<div class="form"> <div class="form">
<IftaLabel> <IftaLabel>
<InputText name="register-location" type="text" id="register-location" v-model="warehouseLocation" required fluid/> <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> </IftaLabel>
<p-message v-if="registerErrors.location" severity="error">{{ registerErrors.location }}</p-message> <p-message v-if="registerErrors.location" severity="error">{{ registerErrors.location }}</p-message>
</div> </div>
@ -174,7 +174,7 @@ onMounted(async () => {
</template> </template>
</Column> </Column>
<Column field="location" header="Location" editor="true"> <Column field="location" header="Localisation" editor="true">
<template #body="slotProps"> <template #body="slotProps">
<span v-if="!modifyErrors.location">{{ slotProps.data.location }}</span> <span v-if="!modifyErrors.location">{{ slotProps.data.location }}</span>
<p-message v-if="modifyErrors.location" severity="error">{{ modifyErrors.location }}</p-message> <p-message v-if="modifyErrors.location" severity="error">{{ modifyErrors.location }}</p-message>