Product Expected

Documentation: Product Expected Component

The Product Expected Component is designed to display expected delivery dates and quantities for products. It offers a dynamic and user-friendly way to show expected inventory information, conditional on user authentication.

Overview

The Product Expected Component provides a structured way to present product delivery expectations. It conditionally renders information based on user authentication and formats expected delivery details for clarity.

Model Documentation

The model object for the Product Expected Component includes configuration properties that determine how the component should display its content.

Model Structure

id: String
A unique identifier for the component, used for element targeting and styling.

cssClass: String
Optional CSS class(es) to apply to the component's container.

header: String
Optional header text to be displayed at the top of the component.

alignment: Number
Determines the alignment of the header text:

1: Left

2: Center

3: Right

Example Model

{
  "id": "productExpected",
  "cssClass": "expected-class",
  "header": "Expected Delivery Dates",
  "alignment": 2
}

Component Structure

The Product Expected Component includes:

HTML Template: Defines the structure for displaying expected delivery lines and a header.

JavaScript: Manages data fetching, date formatting, alignment, and error handling.

HTML Template

The HTML template displays expected delivery lines in a tabular format, with alternating row colors. It conditionally renders content based on the presence of expected lines and user authentication status.

JavaScript

The JavaScript section handles data fetching, date formatting, and layout alignment.

Explanation

Data Handling: Upon mounting, the component fetches expected inventory data using the _getExpectedInventory method. The data is assigned to the expectedLines variable.

Date Formatting: The formatDate method converts date strings into a readable format.

Alignment: The getAlignmentClass method applies CSS classes based on the specified alignment value for the header.

Usage

To use the Product Expected Component in your Vue.js application:

Register the Component: Ensure that the ProductExpected component is registered in your Vue app.

Pass the Model: Provide a model object to configure the component’s appearance and behavior.

Include the Component: Use the ProductExpected component in your Vue template with the appropriate model data.

Documentation: Product Expected Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Usage#