orabis/E6-FStockSeeker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS WIP i cooked

Browse Source
This commit is contained in:
Léo 2025-02-07 01:01:54 +01:00
parent c33fb5a06e
commit c6a918a265
8 changed files with 192 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/png" href="src/assets/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StockSeeker</title> <title>StockSeeker</title>
</head> </head>

5
src/App.vue
View File

@ -58,8 +58,11 @@
</script> </script>
<template> <template>
<div class="header">
<img src="./assets/logo.png" alt="" style="width: 8rem">
<h1>StockSeeker</h1> <h1>StockSeeker</h1>
</div>
<Toast /> <Toast />
<Menubar :model="getMenuItems()" /> <Menubar class="menubar" :model="getMenuItems()" />
<RouterView /> <RouterView />
</template> </template>

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

28
src/style.css
View File

@ -32,3 +32,31 @@ h1 {
max-width: 1600px; max-width: 1600px;
margin: 0 auto; margin: 0 auto;
} }
.menubar{
margin-bottom: 2rem;
}
.header{
display: flex;
}
.fieldset-container{
display: grid;
grid-template-columns: 2fr 2fr 1fr;
grid-template-rows: auto auto auto;
gap: 20px;
}
.fieldset-section{
padding:20px
}
.fieldset-wh-graph{
grid-column: 1;
}
.fieldset-quickadd{
grid-row: 1;
grid-column: 3;
}
.fieldset-list-wh-p{
grid-row: 1;
grid-column: 2;
}

22
src/views/Dashboard.vue
View File

@ -11,6 +11,7 @@ import InputNumber from 'primevue/inputnumber';
import IftaLabel from 'primevue/iftalabel'; 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';
const toast = useToast(); const toast = useToast();
@ -131,14 +132,14 @@ function makeAlert(productsAlerts){
</script> </script>
<template> <template>
<div class="fieldset-container">
<Fieldset legend="Produits stockés" style="max-width: 600px; margin: auto; padding:20px" toggleable> <Fieldset class="fieldset-section fieldset-p-graph" legend="Produits stockés" >
<Chart type="pie" :data="chartProductsData" :options="chartOptions"></Chart> <Chart type="pie" :data="chartProductsData" :options="chartOptions"></Chart>
</Fieldset> </Fieldset>
<Fieldset legend="Listes des Entrepôts" style="max-width: 600px; margin: auto; padding:20px" toggleable> <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 legend="Used capacity" style="max-width: 600px; margin: auto; padding:20px" toggleable> <Fieldset class="fieldset-section fieldset-capacity-usage" legend="Used capacity" >
<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" style="list-style-type: none;">
{{ warehouse.name }} {{ warehouse.name }}
@ -146,14 +147,14 @@ function makeAlert(productsAlerts){
</li> </li>
</ul> </ul>
</Fieldset> </Fieldset>
<Fieldset legend="Products" style="max-width: 600px; margin: auto; padding:20px" toggleable> <Fieldset class="fieldset-section fieldset-quickadd" legend="Ajout Rapide" >
<form @submit.prevent="productValueModifier"> <form @submit.prevent="productValueModifier">
<IftaLabel> <IftaLabel>
<AutoComplete inputId="reference" name="reference" optionLabel="reference" variant="filled" :suggestions="filteredRef" v-model="selectedRef" @complete="search"></AutoComplete> <AutoComplete inputId="reference" name="reference" optionLabel="reference" variant="filled" :suggestions="filteredRef" v-model="selectedRef" @complete="search" fluid></AutoComplete>
<label for="reference">Reference</label> <label for="reference">Reference</label>
</IftaLabel> </IftaLabel>
<IftaLabel> <IftaLabel>
<InputNumber inputId="number-value" showButtons v-model="newValue" mode="decimal"></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
@ -161,6 +162,8 @@ function makeAlert(productsAlerts){
type="submit" type="submit"
class="p-button-primary"> </Button> class="p-button-primary"> </Button>
</form> </form>
</Fieldset>
<Fieldset class="fieldset-section fieldset-list-wh-p" legend="Products et Entrepôt" >
<Carousel :value="products" <Carousel :value="products"
:numVisible="3" :numVisible="3"
:numScroll="1" :numScroll="1"
@ -178,8 +181,7 @@ function makeAlert(productsAlerts){
<img :src="slotProps.data.image" alt="" style="border-radius: 8px; width: 150px;"> <img :src="slotProps.data.image" alt="" style="border-radius: 8px; width: 150px;">
</template> </template>
</Carousel> </Carousel>
</Fieldset> <Divider />
<Fieldset legend="Warehouses" style="max-width: 600px; margin: auto; padding:20px" toggleable>
<Carousel :value="warehouses" <Carousel :value="warehouses"
:numVisible="3" :numVisible="3"
:numScroll="1" :numScroll="1"
@ -191,4 +193,6 @@ function makeAlert(productsAlerts){
</template> </template>
</Carousel> </Carousel>
</Fieldset> </Fieldset>
</div>
</template> </template>

27
src/views/Login.vue
View File

@ -8,6 +8,7 @@ import Dialog from 'primevue/dialog';
import InputText from 'primevue/inputtext'; import InputText from 'primevue/inputtext';
import Password from 'primevue/password'; import Password from 'primevue/password';
import Button from 'primevue/button'; import Button from 'primevue/button';
import IftaLabel from 'primevue/iftalabel';
const { userInfo, isAuth } = useAuth(); const { userInfo, isAuth } = useAuth();
@ -127,25 +128,25 @@ async function modify_user() {
<Dialog header="Modifier l'utilisateur" v-model:visible="showDialog" :style="{ width: '30vw' }" modal:draggable="false"> <Dialog header="Modifier l'utilisateur" v-model:visible="showDialog" :style="{ width: '30vw' }" modal:draggable="false">
<form @submit.prevent="modify_user"> <form @submit.prevent="modify_user">
<div class="field"> <div class="field">
<label for="modify-username"> <IftaLabel>
Nom d'utilisateur <InputText id="modify-username" v-model="usernameModify" placeholder="" class="w-full" required fluid />
</label> <label for="modify-username">Nom d'utilisateur :</label>
<InputText id="modify-username" v-model="usernameModify" placeholder="Nom d'utilisateur" class="w-full" required /> </IftaLabel>
</div> </div>
<div class="field"> <div class="field">
<label for="modify-email"> <IftaLabel>
Email <InputText id="modify-email" v-model="emailModify" type="email" class="w-full" required fluid />
</label> <label for="modify-email">Email :</label>
<InputText id="modify-email" v-model="emailModify" type="email" placeholder="Adresse email" class="w-full" required /> </IftaLabel>
</div> </div>
<div class="field"> <div class="field">
<label for="modify-password"> <IftaLabel>
Mot de passe <Password id="modify-password" v-model="passwordModify" feedback toggleMask class="w-full" required fluid/>
</label> <label for="modify-password">Mot de passe :</label>
<Password id="modify-password" v-model="passwordModify" feedback toggleMask placeholder="Nouveau mot de passe" class="w-full" required /> </IftaLabel>
</div> </div>
<div class="flex justify-content-end mt-3"> <div class="flex justify-content-end mt-3">
<Button label="Annuler" class="p-button-text" @click="showDialog = false"> <Button label="Annuler" severity="secondary" class="p-button-text" @click="showDialog = false">
Annuler Annuler
</Button> </Button>
<Button label="Enregistrer" type="submit" class="p-button-primary"> <Button label="Enregistrer" type="submit" class="p-button-primary">

100
src/views/Products.vue
View File

@ -8,8 +8,7 @@ import InputText from 'primevue/inputtext';
import Button from 'primevue/button'; import Button from 'primevue/button';
import PMessage from 'primevue/message'; import PMessage from 'primevue/message';
import InputNumber from 'primevue/inputnumber'; import InputNumber from 'primevue/inputnumber';
import InputGroup from 'primevue/inputgroup'; import IftaLabel from 'primevue/iftalabel';
import InputGroupAddon from 'primevue/inputgroupaddon';
import Checkbox from 'primevue/checkbox'; import Checkbox from 'primevue/checkbox';
import DataTable from 'primevue/datatable'; import DataTable from 'primevue/datatable';
import Column from 'primevue/column'; import Column from 'primevue/column';
@ -17,12 +16,17 @@ import Tag from 'primevue/tag';
import Badge from 'primevue/badge'; import Badge from 'primevue/badge';
import FileUpload from 'primevue/fileupload'; import FileUpload from 'primevue/fileupload';
import MultiSelect from 'primevue/multiselect'; import MultiSelect from 'primevue/multiselect';
import Dialog from 'primevue/dialog';
import InputGroup from 'primevue/inputgroup';
import InputGroupAddon from 'primevue/inputgroupaddon';
const toast = useToast(); const toast = useToast();
const formatDate = (date) => DateTime.fromISO(date).toLocaleString(DateTime.DATETIME_MED); const formatDate = (date) => DateTime.fromISO(date).toLocaleString(DateTime.DATETIME_MED);
const products = ref([]); const products = ref([]);
const visible = ref(false);
const productName = ref(''); const productName = ref('');
const productReference = ref(''); const productReference = ref('');
const productDescription = ref(''); const productDescription = ref('');
@ -266,18 +270,21 @@ try {
<div> <div>
<h2>Tableau de bord</h2> <h2>Tableau de bord</h2>
<div class="register form-container"> <div class="register form-container">
<h2>Créer un produit</h2> <Button label="Crée un nouveau produit" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Nouveau Produit" :style="{ width: '25rem' }">
<form @submit.prevent="create_product"> <form @submit.prevent="create_product">
<div class="form"> <div class="form">
<InputGroup> <IftaLabel>
<InputGroupAddon>Nom :</InputGroupAddon>
<InputText <InputText
name="register-product"
type="text" type="text"
id="register-product" id="register-product"
v-model="productName" v-model="productName"
required required
fluid
/> />
</InputGroup> <label for="register-product">Nom :</label>
</IftaLabel>
<p-message <p-message
v-if="registerErrors.name" v-if="registerErrors.name"
severity="error" severity="error"
@ -285,16 +292,16 @@ try {
{{ registerErrors.name }} {{ registerErrors.name }}
</p-message> </p-message>
</div> </div>
<div class="form"> <div class="form">
<InputGroup> <IftaLabel>
<InputGroupAddon>Reference :</InputGroupAddon>
<InputText <InputText
type="text" type="text"
id="register-reference" id="register-reference"
v-model="productReference" v-model="productReference"
fluid
/> />
</InputGroup> <label for="register-reference">Reference :</label>
</IftaLabel>
<p-message <p-message
v-if="registerErrors.description" v-if="registerErrors.description"
severity="error" severity="error"
@ -304,14 +311,15 @@ try {
</div> </div>
<div class="form"> <div class="form">
<InputGroup> <IftaLabel>
<InputGroupAddon>Description :</InputGroupAddon>
<InputText <InputText
type="text" type="text"
id="register-description" id="register-description"
v-model="productDescription" v-model="productDescription"
fluid
/> />
</InputGroup> <label for="register-description">Description :</label>
</IftaLabel>
<p-message <p-message
v-if="registerErrors.description" v-if="registerErrors.description"
severity="error" severity="error"
@ -321,8 +329,7 @@ try {
</div> </div>
<div class="form"> <div class="form">
<InputGroup> <IftaLabel>
<InputGroupAddon>Quantité :</InputGroupAddon>
<InputNumber <InputNumber
id="register-quantity" id="register-quantity"
inputId="integeronly" inputId="integeronly"
@ -330,35 +337,46 @@ try {
fluid fluid
required required
/> />
</InputGroup> <label for="register-quantity">Quantité :</label>
</IftaLabel>
</div> </div>
<div class="form"> <div class="form">
<InputGroup> <InputGroup>
<InputGroupAddon> <InputGroupAddon>
Activer une alerte ?
<Checkbox <Checkbox
:binary="true" :binary="true"
id="register-alert" id="register-alert"
v-model="productAlert" v-model="productAlert"
/> />
</InputGroupAddon> </InputGroupAddon>
<IftaLabel>
<InputNumber <InputNumber
v-if="productAlert" :disabled="!productAlert"
id="register-stock-limit" id="register-stock-limit"
inputId="integeronly" inputId="integeronly"
v-model="productStockLimit" v-model="productStockLimit"
fluid fluid
/> />
<label for="register-stock-limit">Alerte en dessous de :</label>
</IftaLabel>
</InputGroup> </InputGroup>
</div> </div>
<div class="form"> <div class="form">
<InputGroup > <IftaLabel>
<InputGroupAddon>Image :</InputGroupAddon> <MultiSelect
<InputGroupAddon v-if="b64Img"> name="register-warehouses"
<img :src="b64Img" alt="Image" style="width: 6rem"> v-model="selectedWarehouses"
<Button icon="pi pi-times" severity="secondary" @click="resetForms()"/> :options="warehouses"
</InputGroupAddon> optionLabel="name"
placeholder="Sélectionner un entrepôt"
:invalid="!!registerErrors.warehouses"
fluid
></MultiSelect>
<label for="register-warehouses">Entrepôt :</label>
</IftaLabel>
</div>
<div class="form">
<FileUpload <FileUpload
name="productImage" name="productImage"
accept="image/*" accept="image/*"
@ -370,20 +388,10 @@ try {
:chooseLabel="'Choisir une image'" :chooseLabel="'Choisir une image'"
@uploader="handleFileUpload($event,true)" @uploader="handleFileUpload($event,true)"
/> />
</InputGroup> <div v-if="b64Img">
<img :src="b64Img" alt="Image" style="width: 6rem">
<Button icon="pi pi-times" severity="secondary" @click="resetForms()"/>
</div> </div>
<div class="form">
<InputGroup>
<InputGroupAddon>Entrepôt :</InputGroupAddon>
<MultiSelect
v-model="selectedWarehouses"
:options="warehouses"
optionLabel="name"
placeholder="Sélectionner un entrepôt"
display="chip"
:invalid="!!registerErrors.warehouses"
></MultiSelect>
</InputGroup>
</div> </div>
<div class="alert"> <div class="alert">
<p-message <p-message
@ -419,12 +427,15 @@ try {
{{ registerErrors.reference }} {{ registerErrors.reference }}
</p-message> </p-message>
</div> </div>
<Button type="button" label="Cancel" severity="secondary" class="p-button-text" @click="visible = false" autofocus />
<Button <Button
label="Créer" label="Créer"
type="submit" type="submit"
class="p-button-primary" class="p-button-primary"
@click="visible = false"
/> />
</form> </form>
</Dialog>
</div> </div>
<DataTable <DataTable
@ -437,15 +448,7 @@ try {
tableStyle="min-width: 50rem" tableStyle="min-width: 50rem"
removableSort removableSort
> >
<template #header>
<div class="text-end pb-4">
<Button
icon="pi pi-external-link"
label="Export"
@click="exportCSV($event)"
/>
</div>
</template>
<Column field="image"editor="true"> <Column field="image"editor="true">
<template #body="slotProps"> <template #body="slotProps">
@ -454,7 +457,7 @@ try {
style="width: 6rem" style="width: 6rem"
/> />
</template> </template>
<template #editor="slotProps"> <template #editor>
<FileUpload <FileUpload
name="editProductImage" name="editProductImage"
accept="image/*" accept="image/*"
@ -471,9 +474,6 @@ try {
<img :src="b64Modif" alt="Image" style="width: 6rem"> <img :src="b64Modif" alt="Image" style="width: 6rem">
<Button icon="pi pi-times" severity="secondary" @click="resetImg(true)"/> <Button icon="pi pi-times" severity="secondary" @click="resetImg(true)"/>
</div> </div>
<div v-else>
<img :src="slotProps.data.image" alt="Image" style="width: 6rem;">
</div>
</template> </template>
</Column> </Column>

38
src/views/Warehouses.vue
View File

@ -6,10 +6,10 @@ import InputText from 'primevue/inputtext';
import Button from 'primevue/button'; import Button from 'primevue/button';
import PMessage from 'primevue/message'; import PMessage from 'primevue/message';
import InputNumber from 'primevue/inputnumber'; import InputNumber from 'primevue/inputnumber';
import InputGroup from 'primevue/inputgroup';
import InputGroupAddon from 'primevue/inputgroupaddon';
import DataTable from 'primevue/datatable'; import DataTable from 'primevue/datatable';
import Column from 'primevue/column'; import Column from 'primevue/column';
import Dialog from 'primevue/dialog';
import IftaLabel from 'primevue/iftalabel';
const toast = useToast(); const toast = useToast();
@ -17,6 +17,7 @@ const warehouses = ref([]);
const warehouseName = ref(''); const warehouseName = ref('');
const warehouseLocation = ref(''); const warehouseLocation = ref('');
const warehouseMaxCapacity = ref(0); const warehouseMaxCapacity = ref(0);
const visible = ref(false);
const registerErrors = ref({ name: '', location: '', max_capacity: ''}); const registerErrors = ref({ name: '', location: '', max_capacity: ''});
const modifyErrors = ref({name:'', location:'', max_capacity:''}) const modifyErrors = ref({name:'', location:'', max_capacity:''})
@ -129,36 +130,39 @@ onMounted(async () => {
<template> <template>
<div> <div>
<h2>Gérer les entrepôts</h2> <h2>Gérer les entrepôts</h2>
<Button label="Crée un nouvel entrepôt" @click="visible = true"></Button>
<Dialog v-model:visible="visible" modal header="Nouvel Entrepôt" :style="{ width: '25rem' }">
<div class="register form-container"> <div class="register form-container">
<h2>Créer un entrepôt</h2>
<form @submit.prevent="create_warehouse"> <form @submit.prevent="create_warehouse">
<div class="form"> <div class="form">
<InputGroup> <IftaLabel>
<InputGroupAddon>Nom :</InputGroupAddon> <InputText name="register-name" type="text" id="register-name" v-model="warehouseName" required fluid/>
<InputText type="text" id="register-warehouse" v-model="warehouseName" required /> <label for="register-name">Nom de l'entrepôt :</label>
</InputGroup> </IftaLabel>
<p-message v-if="registerErrors.name" severity="error">{{ registerErrors.name }}</p-message> <p-message v-if="registerErrors.name" severity="error">{{ registerErrors.name }}</p-message>
</div> </div>
<div class="form"> <div class="form">
<InputGroup> <IftaLabel>
<InputGroupAddon>Location :</InputGroupAddon> <InputText name="register-location" type="text" id="register-location" v-model="warehouseLocation" required fluid/>
<InputText type="text" id="register-location" v-model="warehouseLocation" required /> <label for="register-location">Location :</label>
</InputGroup> </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>
<div class="form"> <div class="form">
<InputGroup> <IftaLabel>
<InputGroupAddon>Capacité maximale :</InputGroupAddon> <InputNumber name="register-max-capacity" id="register-max-capacity" v-model="warehouseMaxCapacity" required fluid />
<InputNumber id="register-max-capacity" v-model="warehouseMaxCapacity" required /> <label for="register-max-capacity">Capacité totale :</label>
</InputGroup> </IftaLabel>
<p-message v-if="registerErrors.max_capacity" severity="error">{{ registerErrors.max_capacity }}</p-message> <p-message v-if="registerErrors.max_capacity" severity="error">{{ registerErrors.max_capacity }}</p-message>
</div> </div>
<Button type="button" label="Cancel" severity="secondary" class="p-button-text" @click="visible = false"></Button>
<Button label="Créer" type="submit" class="p-button-primary" /> <Button type="submit" label="Créer" class="p-button-primary" @click="visible = false" />
</form> </form>
</div> </div>
</Dialog>
<DataTable v-model:editingRows="editingRows" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" :value="warehouses" tableStyle="min-width: 50rem" removableSort> <DataTable v-model:editingRows="editingRows" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" :value="warehouses" tableStyle="min-width: 50rem" removableSort>