From f7dbac49f11bccb73e12ae0d7af52b83ed2660e6 Mon Sep 17 00:00:00 2001 From: Ritika-Patel08 Date: Mon, 29 Jan 2024 12:16:06 +0530 Subject: [PATCH 1/2] Documented: dxpImage, dxpUserProfile ,dxpOmsInstanceNaviagtor components to understand their working --- README.md | 155 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) diff --git a/README.md b/README.md index 22caa4cf..2797e23d 100644 --- a/README.md +++ b/README.md @@ -30,3 +30,158 @@ If you have any questions or ideas feel free to join our LICENSE for more details. + +# Components +## DxpImage +### Introduction +
  • dxpImage component is designed to handle the loading and display of images.
    • +
  • It provides functionality to efficiently manage different types of image sources, including local assets, external web URLs, and images from a resource server.
    • + +### Basic Usage +
  • TThe component dynamically loads and displays the specified image, considering different source scenarios, such as local assets, web URLs, or resource server images.
    • + +### Props +#### 1. src + + + + + + + + + + + + + + + + + +
    DescrptionIt's specifying that the component expects a prop named src.n this component props.src to access the value of the src.
    Typestring
    RequiredFalse
    Default value ‘context.defaultImgUrl’
    + +## Technical Implementation +#### 1. setImageUrl() +The setImageUrl function is responsible for determining the appropriate image URL based on the provided props.src and the configured resourceUrl. +
  • If props.src contains 'assets/', assigns directly to imageUrl for local assets.
    • +
  • If props.src starts with 'http', checks image existence; if true, assigns to imageUrl for web URLs.
    • +
  • If not local or web, assumes resource server image, appends to resourceUrl, and assigns if URL exists.
    • + +#### 2. checkIfImageExists() + +
  • Returns a Promise
    • +
  • Resolves to true if the image loads successfully, rejects with false on error.
    • +
  • Logs an error message to the console if the image doesn't exist
    • + +#### 2. onMounted() + +
  • onMounted() hook activates when the component is added to the DOM.
    • +
  • It calls the setImageUrl function.
    • +
  • During the initial rendering, it sets the image URL based on the logic within setImageUrl.
    • + +#### 2. onUpdated() + +
  • onUpdated() hook activates on component re-renders.
    • +
  • Like onMounted, it calls setImageUrl.
    • +
  • Ensures dynamic updating of the image URL based on changes in reactive dependencies during re-renders.
    • + +## Recommendation +
  • Use the component to load and display images stored as local assets within the project directory.
    • +
  • Employ the component to fetch and showcase images from external web URLs.
    • +
  • Use the component to display images fetched from a resource server.
    • +
  • Component's dynamic nature, allowing it to adapt different image sources based on the provided props.src. This is useful in scenarios where image sources can vary at runtime.
    • + +## DxpOmsInstanceNavigator +### Introduction +
  • This component focuses on displaying information about the Order Management System (OMS) instance that the user is currently connected to.
    • + +### Basic Usage +
  • It is used to navigate to the OMS instance from the application.
    • + +### Events +#### 1. goToOms() +
  • The purpose of goToOms is to navigate the user to a different screen or page within the application that corresponds to a specific OMS instance. +
  • It takes two parameters: token (an authentication token) and omsName (the name of the OMS instance). + +## Technical Implementation +### 1. computed() +
  • Computed properties like token and oms are created using the computed function. +
  • This ensures that the component is reactive to changes in the underlying state of the authStore. +
  • If the token or OMS name changes in the store, the corresponding computed properties will automatically update, triggering a re-render of the component. + +### state manamement +#### 1.useAuthStore() + It simplifies access to authentication state. + The state in useAuthStore manages the data related to authentication, which is token and oms. + + +## DxpUserProfile +### Introduction +
  • The User Profile Card component is designed to display user profile information, allowing users to see details such as their login ID and party name. It also provides options to perform actions like logging out and navigating to the launchpad. + +### Basic Usage +
  • UserProfile component provides a user-friendly display of profile information + +### Props + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Prop NameDescriptionTypeRequiredDefault Value
    userProfileUser profile information objectObjectYes-
    logoutLabelLabel for the logout buttonStringNo'Logout'
    goToLabelLabel for the go-to launchpad buttonStringNo'Go To Launchpad'
    + +### Events +#### 1. logout() +The logout() method is triggered when the user clicks on the logout button (ion-button). It initiates the logout process for the user. +##### Events inside logout +
  • emit() : The emit function is used to emit the before-logout event. Emitting the 'before-logout' event allows parent components or listeners to be aware of the impending logout action. +
  • dispatch() : It dispatches the logout action defined in the user module and redirects to the login page. + +#### 2. goToLaunchpad() +The goToLaunchpad() method is invoked when the user clicks on the "Go To Launchpad" button. It redirects the user to the launchpad by changing the window location. + +### CSS +The scoped CSS in the provided in the component is defining styles for the .user-profile class, which is applied to a container div surrounding the user profile component. + +
  • 'display:grid' It sets the layout of the .user-profile element to use CSS Grid, allowing for a flexible grid-based layout system. + +
  • grid-template-columns:repeat(auto-fill, minmax(400px, 1fr)); + +This rule defines the columns for the grid layout.
    +repeat(auto-fill, minmax(400px, 1fr)):
    +auto-fill: Automatically adds as many columns as can fit in the available space.
    +minmax(400px, 1fr): Each column should have a minimum width of 400 pixels, and they can grow to take up equal fractions (1fr) of the available space. + + +### Technical Implementation +#### 1. defineEmits([event1, event1....]) +It is used to declare and define the custom events that a component can emit. Here it is used to emit the before-logout event. It helps in specifying the events that child components can trigger, allowing parent components or other listeners to react to those events. \ No newline at end of file From b9c8dd3be7badc06ad667ebe34de4a5a3c841362 Mon Sep 17 00:00:00 2001 From: Ritika-Patel08 Date: Mon, 29 Jan 2024 12:23:05 +0530 Subject: [PATCH 2/2] Documented: dxpImage, dxpUserProfile ,dxpOmsInstanceNaviagtor components to understand their working --- README.md | 110 +++++++++++++++++++++++++++--------------------------- 1 file changed, 55 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 2797e23d..ce2627bb 100644 --- a/README.md +++ b/README.md @@ -38,53 +38,42 @@ DXP Components is completely free and released under the Apache v2.0 License. Ch
  • It provides functionality to efficiently manage different types of image sources, including local assets, external web URLs, and images from a resource server.
    • ### Basic Usage -
  • TThe component dynamically loads and displays the specified image, considering different source scenarios, such as local assets, web URLs, or resource server images.
    • +The component dynamically loads and displays the specified image, considering different source scenarios, such as local assets, web URLs, or resource server images. + +To use the DxpImage component, integrate it into your Vue 3 application and provide the image source (src). + + + + ### Props #### 1. src - - - - - - - - - - - - - - - - -
    DescrptionIt's specifying that the component expects a prop named src.n this component props.src to access the value of the src.
    Typestring
    RequiredFalse
    Default value ‘context.defaultImgUrl’
    - -## Technical Implementation -#### 1. setImageUrl() -The setImageUrl function is responsible for determining the appropriate image URL based on the provided props.src and the configured resourceUrl. -
  • If props.src contains 'assets/', assigns directly to imageUrl for local assets.
    • -
  • If props.src starts with 'http', checks image existence; if true, assigns to imageUrl for web URLs.
    • -
  • If not local or web, assumes resource server image, appends to resourceUrl, and assigns if URL exists.
    • - -#### 2. checkIfImageExists() - -
  • Returns a Promise
    • -
  • Resolves to true if the image loads successfully, rejects with false on error.
    • -
  • Logs an error message to the console if the image doesn't exist
    • - -#### 2. onMounted() - -
  • onMounted() hook activates when the component is added to the DOM.
    • -
  • It calls the setImageUrl function.
    • -
  • During the initial rendering, it sets the image URL based on the logic within setImageUrl.
    • - -#### 2. onUpdated() - -
  • onUpdated() hook activates on component re-renders.
    • -
  • Like onMounted, it calls setImageUrl.
    • -
  • Ensures dynamic updating of the image URL based on changes in reactive dependencies during re-renders.
    • + + + Prop Name + Description + Type + Required + Default Value + + + + + src + It's specifying that the component expects a prop named src.n this component props.src to access the value of the src. + string + False + ‘context.defaultImgUrl’ + + + + + ## Recommendation
  • Use the component to load and display images stored as local assets within the project directory.
    • @@ -97,18 +86,23 @@ The setImageUrl function is responsible for determining the appropriate image UR
  • This component focuses on displaying information about the Order Management System (OMS) instance that the user is currently connected to.
    • ### Basic Usage -
  • It is used to navigate to the OMS instance from the application.
    • +It is used to navigate to the OMS instance from the application. + +To use the DxpOmsInstanceNavigator component, integrate it into your Vue 3 application. + + + + ### Events #### 1. goToOms()
  • The purpose of goToOms is to navigate the user to a different screen or page within the application that corresponds to a specific OMS instance.
  • It takes two parameters: token (an authentication token) and omsName (the name of the OMS instance). -## Technical Implementation -### 1. computed() -
  • Computed properties like token and oms are created using the computed function. -
  • This ensures that the component is reactive to changes in the underlying state of the authStore. -
  • If the token or OMS name changes in the store, the corresponding computed properties will automatically update, triggering a re-render of the component. ### state manamement #### 1.useAuthStore() @@ -121,7 +115,18 @@ The setImageUrl function is responsible for determining the appropriate image UR
  • The User Profile Card component is designed to display user profile information, allowing users to see details such as their login ID and party name. It also provides options to perform actions like logging out and navigating to the launchpad. ### Basic Usage -
  • UserProfile component provides a user-friendly display of profile information +UserProfile component provides a user-friendly display of profile information. + +To use the DxpUserProfile component, integrate it into your Vue 3 application. + + + + + ### Props @@ -180,8 +185,3 @@ This rule defines the columns for the grid layout.
    repeat(auto-fill, minmax(400px, 1fr)):
    auto-fill: Automatically adds as many columns as can fit in the available space.
    minmax(400px, 1fr): Each column should have a minimum width of 400 pixels, and they can grow to take up equal fractions (1fr) of the available space. - - -### Technical Implementation -#### 1. defineEmits([event1, event1....]) -It is used to declare and define the custom events that a component can emit. Here it is used to emit the before-logout event. It helps in specifying the events that child components can trigger, allowing parent components or other listeners to react to those events. \ No newline at end of file