Form validity

package.json

@@ -19,8 +19,8 @@
     "vite": "^5.4.1"
   },
   "dependencies": {
-    "@ovhcloud/ods-components": "18.0.0",
-    "@ovhcloud/ods-themes": "18.0.0",
+    "@ovhcloud/ods-components": "18.4.0-alpha.1",
+    "@ovhcloud/ods-themes": "18.4.0-alpha.1",
     "@reduxjs/toolkit": "2.2.7",
     "zod": "3.23.8"
   }

src/app/app.ts

@@ -2,6 +2,7 @@ import './app.scss';
 
 import { getCurrentRouteKey, injectAppElement, navigate } from './router/router';
 import { ACTION_STATUS } from './constant/slice';
+import { Breadcrumb } from './components/breadcrumb/breadcrumb';
 import { DeleteModal } from './page/products/components/delete-modal/delete-modal';
 import { FormProduct } from './page/products/components/form-product/form-product';
 import { Header } from './components/header/header';
@@ -21,6 +22,7 @@ function defineAppCustomElements() {
     customElements.define('app-link', Link);
     customElements.define('app-form-product', FormProduct);
     customElements.define('app-product-delete-modal', DeleteModal);
+    customElements.define('app-breadcrumb', Breadcrumb);
   }
 }
 

src/app/components/breadcrumb/breadcrumb.html

@@ -0,0 +1,3 @@
+<ods-breadcrumb id="ods-breadcrumb" class="breadcrumb">
+</ods-breadcrumb>
+<ods-divider></ods-divider>

src/app/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,3 @@
+.breadcrumb {
+  margin: 10px 0;
+}

src/app/components/breadcrumb/breadcrumb.ts

@@ -0,0 +1,32 @@
+import './breadcrumb.scss'
+import template from './breadcrumb.html?raw';
+
+import { OdsBreadcrumb } from '@ovhcloud/ods-components';
+import { getQuerySelector } from '../../helpers/render';
+
+function capitalize(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+class Breadcrumb extends HTMLElement {
+  breadcrumb!: OdsBreadcrumb & HTMLElement;
+
+  constructor () {
+		super();
+
+		this.innerHTML = template
+	}
+
+  connectedCallback() {
+    this.breadcrumb = getQuerySelector<OdsBreadcrumb & HTMLElement>('#ods-breadcrumb')
+    const pathParts = location.pathname.split('/').filter(Boolean)
+
+    this.breadcrumb.innerHTML = pathParts.map((pathPart) =>
+      `<ods-breadcrumb-item href="${pathPart}" label="${capitalize(pathPart)}"></ods-breadcrumb-item>`
+    ).join('')
+  }
+}
+
+export {
+  Breadcrumb,
+}

src/app/models/category.ts

@@ -0,0 +1,46 @@
+
+interface CategoryApiData {
+  slug: string
+  name: string
+  url: string
+}
+
+interface CategoryProps {
+  slug: string
+  name: string
+  url: string
+}
+
+class Category {
+  slug: string
+  name: string
+  url: string
+
+  constructor(props: CategoryProps) {
+    this.slug = props.slug
+    this.name = props.name
+    this.url = props.url
+  }
+
+  static fromApi(props: CategoryApiData): Category {
+    return new Category({
+      name: props.name,
+      slug: props.slug,
+      url: props.url,
+    })
+  }
+
+  toApi(): Omit<CategoryApiData, 'id'> {
+    return {
+      name: this.name,
+      slug: this.slug,
+      url: this.url,
+    }
+  }
+}
+
+export {
+  type CategoryApiData,
+  type CategoryProps,
+  Category,
+}

src/app/models/product.ts

@@ -1,60 +1,89 @@
 
 interface ProductApiData {
   brand?: string
-  category?: string
+  category: string
   description: string
   discountPercentage?: number
   id: number
   images: string[]
+  minimumOrderQuantity: number
   price: number
   rating?: number
-  stock?: number
+  returnPolicy: string
+  stock: number
   thumbnail: string
   title: string
 }
 
 interface ProductProps {
+  category: string
   description: string
+  hasReturnPolicy: boolean
   id: number
   images?: string[]
+  minimumOrderQuantity: number
   price: number
+  restockTime: string
+  stock: number
   thumbnail: string
   title: string
 }
 
 class Product {
+  category: string
   description: string
+  hasReturnPolicy: boolean
   id: number
   images: string[]
+  minimumOrderQuantity: number
   price: number
+  restockTime: string
+  stock: number
   thumbnail: string
   title: string
 
   constructor(props: ProductProps) {
+    this.category = props.category
     this.description = props.description
+    this.hasReturnPolicy = props.hasReturnPolicy
     this.id = props.id
     this.images = props.images ?? []
+    this.minimumOrderQuantity = props.minimumOrderQuantity
     this.price = props.price
+    this.restockTime = props.restockTime
+    this.stock = props.stock
     this.thumbnail = props.thumbnail
     this.title = props.title
   }
 
   static fromApi(props: ProductApiData): Product {
+    // Random as the API does not provide any Date
+    const randomDate = new Date(new Date().valueOf() - Math.random()*(1e+12))
+
     return new Product({
+      category: props.category,
       description: props.description,
+      hasReturnPolicy: props.returnPolicy !== 'No return policy',
       id: props.id,
       images: props.images,
+      minimumOrderQuantity: props.minimumOrderQuantity,
       price: props.price,
+      restockTime: `${randomDate.getHours().toString().padStart(2, '0')}:${randomDate.getMinutes().toString().padStart(2, '0')}`,
+      stock: props.stock,
       thumbnail: props.thumbnail,
       title: props.title,
     })
   }
 
   toApi(): Omit<ProductApiData, 'id'> {
     return {
+      category: this.category,
       description: this.description,
       images: this.images,
+      minimumOrderQuantity: this.minimumOrderQuantity,
       price: this.price,
+      returnPolicy: this.hasReturnPolicy ? '30 days return policy' : 'No return policy',
+      stock: this.stock,
       thumbnail: this.thumbnail,
       title: this.title,
     }

src/app/page/products/components/form-product/form-product.html

@@ -1,28 +1,73 @@
 <form class="form-product" id="form-product-form" onsubmit="return false">
   <ods-form-field id="form-product-field-title">
-    <label for="form-product-title" slot="label">
+    <label for="form-product-input-title" slot="label">
       Title:
     </label>
 
     <ods-input is-required name="title" class="form-product__input" id="form-product-input-title" type="text"></ods-input>
   </ods-form-field>
 
   <ods-form-field id="form-product-field-price">
-    <label for="form-product-price" slot="label">
+    <label for="form-product-input-price" slot="label">
       Price:
     </label>
 
     <span>
-      <ods-input is-required name="price" class="form-product__input" id="form-product-input-price" type="number"></ods-input> €
+      <ods-input step="any" is-required name="price" class="form-product__input" id="form-product-input-price" type="number"></ods-input> €
     </span>
   </ods-form-field>
 
   <ods-form-field id="form-product-field-description">
-    <label for="form-product-description" slot="label">
+    <label for="form-product-textarea-description" slot="label">
       Description:
     </label>
 
-    <ods-textarea is-required   ="description" class="form-product__input" id="form-product-textarea-description" type="number"></ods-textarea>
+    <ods-textarea is-required name="description" class="form-product__input" id="form-product-textarea-description"></ods-textarea>
+  </ods-form-field>
+
+  <ods-form-field id="form-product-field-stock">
+    <label for="form-product-select-stock" slot="label">
+      Stock:
+    </label>
+
+    <ods-quantity is-required name="stock" class="form-product__stock" id="form-product-quantity-stock">
+    </ods-quantity>
+  </ods-form-field>
+
+  <ods-form-field id="form-product-field-min-order">
+    <label for="form-product-range-min-order" slot="label">
+      Minimum order quantity:
+    </label>
+
+    <div>
+      <ods-range default-value="0" is-required name="min-order" class="form-product__min-order" id="form-product-range-min-order">
+      </ods-range>
+    </div>
+  </ods-form-field>
+
+  <ods-form-field id="form-product-field-return-policy">
+    <label for="form-product-checkbox-return-policy" slot="label">
+      Return policy:
+    </label>
+
+    <ods-checkbox name="return-policy" class="form-product__input" id="form-product-checkbox-return-policy"></ods-checkbox>
+  </ods-form-field>
+
+  <ods-form-field id="form-product-field-restock-time">
+    <label for="form-product-timepicker-restock-time" slot="label">
+      Return policy:
+    </label>
+
+    <ods-timepicker name="restock-time" class="form-product__input" id="form-product-timepicker-restock-time"></ods-timepicker>
+  </ods-form-field>
+
+  <ods-form-field id="form-product-field-category">
+    <label for="form-product-select-category" slot="label">
+      Category:
+    </label>
+
+    <ods-select is-required name="category" class="form-product__input" id="form-product-select-category">
+    </ods-select>
   </ods-form-field>
 
   <div class="form-product__actions">

src/app/page/products/components/form-product/form-product.scss

@@ -8,4 +8,8 @@
     align-self: end;
     gap: 10px;
   }
+
+  &__stock {
+    justify-content: start;
+  }
 }