added datatable and dateTime with luxon

package.json

@@ -12,6 +12,7 @@
     "@primevue/themes": "^4.2.5",
     "axios": "^1.7.9",
     "js-cookie": "^3.0.5",
+    "luxon": "^3.5.0",
     "primeicons": "^7.0.0",
     "primevue": "^4.2.5",
     "swagger-ui": "^5.18.2",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
+      luxon:
+        specifier: ^3.5.0
+        version: 3.5.0
       primeicons:
         specifier: ^7.0.0
         version: 7.0.0
@@ -674,6 +677,10 @@ packages:
   lowlight@1.20.0:
     resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
 
+  luxon@3.5.0:
+    resolution: {integrity: sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==}
+    engines: {node: '>=12'}
+
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
@@ -1809,6 +1816,8 @@ snapshots:
       fault: 1.0.4
       highlight.js: 10.7.3
 
+  luxon@3.5.0: {}
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0

src/api.js

@@ -53,6 +53,13 @@ export const createProduct = async (productData) => {
     return response.data;
 };
 
+export const getProducts = async () => {
+  const response = await api.get('/products/', {
+      headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+});
+  return response.data;
+};
+
 const refreshAccessToken = async () => {
   try {
     const response = await api.post('/token/refresh', {'refresh': Cookies.get('refresh')}, {

src/views/Home.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { createProduct } from '../api.js';
+import { createProduct,getProducts } from '../api.js';
 import { useToast } from 'primevue/usetoast';
-
+import { DateTime } from 'luxon';
 import InputText from 'primevue/inputtext';
 import Button from 'primevue/button';
 import PMessage from 'primevue/message';
@@ -9,18 +9,19 @@ import InputNumber from 'primevue/inputnumber';
 import InputGroup from 'primevue/inputgroup';
 import InputGroupAddon from 'primevue/inputgroupaddon';
 import Checkbox from 'primevue/checkbox';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
 
-
+import { ref, onMounted} from 'vue';
-import { ref } from 'vue';
-
 const toast = useToast();
+const formatDate = (date) => DateTime.fromISO(date).toLocaleString(DateTime.DATETIME_MED);
 
+const products = ref([]);
 const productName = ref('');
 const productDescription = ref('');
 const productQuantity = ref('');
 const productAlert = ref(false);
 const productStockLimit = ref(null);
-
 const registerErrors = ref({name:'',description:'',quantity:'',alert_enabled:'',stock_limit:'',});
 
 async function create_product() {
@@ -37,6 +38,7 @@ async function create_product() {
       alert_enabled: productAlert.value,
       stock_limit: productStockLimit.value,
     })
+    products.value = await getProducts();
     toast.add({ severity: 'success', life: 2500, summary:`${productName.value} crée`});
 } catch (error){
     if (error.response && error.response.data) {
@@ -64,6 +66,24 @@ async function create_product() {
     }
   }
 }
+onMounted(async () => {
+try {
+  products.value = await getProducts();
+  products.value.forEach((product) => {
+    product.creation_date = formatDate(product.creation_date);
+    product.modification_date = formatDate(product.modification_date);
+  });
+} catch (error){
+  if (error.response && error.response.data) {
+    const data = error.response.data;
+    if (data.detail) {
+      toast.add({ severity: 'error',life: 2500, summary: 'Erreur', detail: data.detail });
+    }
+  } else {
+    toast.add({ severity: 'error',life: 2500, summary: 'Erreur', detail: 'Une erreur est survenue.' });
+  }
+}
+});
 </script>
 
 <template>
@@ -117,5 +137,15 @@ async function create_product() {
         <Button label="Créer" type="submit" class="p-button-primary" />
       </form>
     </div>
+
+    <DataTable :value="products" tableStyle="min-width: 50rem">
+      <Column field="name" header="Name"></Column>
+      <Column field="description" header="description"></Column>
+      <Column field="quantity" header="Quantity"></Column>
+      <Column field="is_stock_low" header="is_stock_low"></Column>
+      <Column field="creation_date" header="creation_date"></Column>
+      <Column field="modification_date" header="modification_date"></Column>
+  </DataTable>
+
   </template>