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

datatable adds

Browse Source
This commit is contained in:
Léo 2025-01-21 15:17:40 +01:00
parent 0c8c03c30d
commit 9c65384c87
2 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main.js
View File

@ -3,7 +3,7 @@ import './style.css'
import App from './app.vue' import App from './app.vue'
import PrimeVue from 'primevue/config'; import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/material'; import Aura from '@primevue/themes/aura';
import router from "./router" import router from "./router"
import 'primeicons/primeicons.css' import 'primeicons/primeicons.css'
import ToastService from 'primevue/toastservice'; import ToastService from 'primevue/toastservice';

50
src/views/Home.vue
View File

@ -11,6 +11,8 @@ 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';
import Tag from 'primevue/tag';
import Badge from 'primevue/badge';
import { ref, onMounted} from 'vue'; import { ref, onMounted} from 'vue';
const toast = useToast(); const toast = useToast();
@ -66,6 +68,22 @@ async function create_product() {
} }
} }
} }
async function editProduct(product){
console.log(product);
}
const stockSeverity = (data) => {
if (!data) return 'info';
const quantity = data.quantity;
if (quantity <= 5) {
return 'danger';
} else if (quantity > 5 && quantity <= 20) {
return 'success';
} else {
return 'warning';
}
};
onMounted(async () => { onMounted(async () => {
try { try {
products.value = await getProducts(); products.value = await getProducts();
@ -137,15 +155,29 @@ try {
<Button label="Créer" type="submit" class="p-button-primary" /> <Button label="Créer" type="submit" class="p-button-primary" />
</form> </form>
</div> </div>
<DataTable :value="products" tableStyle="min-width: 50rem" removableSort >
<DataTable :value="products" tableStyle="min-width: 50rem"> <template #header>
<Column field="name" header="Name"></Column> <div class="text-end pb-4">
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
</div>
</template>
<Column field="is_stock_low" header="Stock" sortable>
<template #body="slotProps">
<Tag :severity="!slotProps.data.alert_enabled ? 'info' : (slotProps.data.is_stock_low ? 'danger' : 'success')" :value="!slotProps.data.alert_enabled ? 'NOALARMSET' : (slotProps.data.is_stock_low ? 'LOWSTOCK' : 'INSTOCK')"/>
</template>
</Column>
<Column field="name" header="Name" sortable></Column>
<Column field="description" header="description"></Column> <Column field="description" header="description"></Column>
<Column field="quantity" header="Quantity"></Column> <Column field="quantity" header="Quantity" sortable>
<Column field="is_stock_low" header="is_stock_low"></Column> <template #body="slotProps">
<Column field="creation_date" header="creation_date"></Column> <Badge :value="slotProps.data.quantity" :severity="stockSeverity(slotProps.data)"/>
<Column field="modification_date" header="modification_date"></Column> </template>
</Column>
<Column>
<template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" label="Modifier"/>
</template>
</Column>
</DataTable> </DataTable>
</template>
</template>