typerefinery-ai / typerefinery-websight Goto Github PK

Updating the Prime Vue components are not getting updated on the fly.
We should re-fetch the updated HTML code on submitting the changes.

When we click on nodes of sidebar the selected node should be redirected to another page.

So, in the page folder under the resources, we created the Vue app instance with primevue (for styling) in the body.html.

So the Vue components are rendering. But when we edit the Vue components after clicking submit button in the Edit dialog box the Vue instance or the javascript that is responsible for Vue components, it is not rendering. But I see my changes coming as a response from rootcontainer.html. I believe the Vue thing is not persisting after an edit submission, but we can see the changes after a refresh.

Is there any way or idea to implement Javascript (Vue) in WebSight so that the Vue thing remains after editing?

For referenece, we also raised the issue in Starter comuninty
websight-io/starter#78

Creating navbar components using Prime Vue

Sample Output.

Description

1. Updating the TMS setup.
2. Adding a generic function that is responsible for listening to the messages.
3. Making namespaces for the components (clientLibs)

Pie chart component

Sample

Creating X-axis Bar Chart.
Sample:

Description:
Implementing a data table that is dynamic, where the values can come from the JSON file.

Create a breadcrumb component.

Sample:

Add code for dashboard which will available in page sections.
Sample output-

Creating line chart with label.

Sample:

Description

Need to create a function in java that is responsible for getting the sidebar objects.
This object will consist of all the pages with their attributes.

Single input field to get connect with tms and to take user inputs and store it(CSV,JSON)

Following components needed to be created.

1. Line Chart. Please refer to #38
2. Bar Chart. Please refer to #41
3. Map Component. Please refer to #39

Create bar chart component #27
Sample:

We created an Input Field Component

But we are not able to control the inputs.

Please refer to #29

For now, for the Forms, we are now fetching the values from the DOM directly Eg. document.getElementById().value

But this is not the usual way for fetching values in Vue, although this is working, this is not suitable for Checkbox #29, and Radio Button #31.

Button component.

Need to have the following types.

1. Reset.
2. Submit
3. Button

2 tags are appearing on a single HTML file.

As of payload of tms ,getting updated in the ticker but is not persisted. So integrating local storage to store data for it.

When click on DataTable row type, then the current page will redirected to another page.

Creating a Line Graph Component

Sample.

Create a map component.

Sample.

Make common TMS connection for multiple components.

Things to implement:

1. Change the folder structure for the components. (For more information, visit https://aem.design/manual/conventions/).
2. Remove unused components, pages, layouts, and unused references.
3. Create head-libs for all the components and import them into the head-libs for the page.

Bar chart can be update using tms payload

1. No need to create multiple graph components ,it should get from a single graph components by selecting it from dropdown.
2. Graph variants should be selected from a single component dialog dropdown while edit graph component.

We created the dropdown component.

Sample

create a open source leaflet map compnent.
Having some polygon layer.

Sample.

Description:
On the toggle theme, update the theme without refreshing the entire page.

We created a Text area component using prime vue.
Not able to control the inputs.

Facing a similar kind of problem #29

Description

1. Update the Folder structure for the models.
2. Extend the BaseComponent for all the java files.
3. Remove the unused imports and variables.

Creating a Sidebar component using Prime vue.

Sample Output

Each and every components will shown in an individual page.

We create a data table with some static values.

However, the data table values are right now coming from vue values, which are mentioned in the vue instance object while mounting. We are unable to add values using any JS files.

Vue instance code

Datatable.html

Creating a Radar Graph Component
Sample:

We created a Radio button using prime vue.

We are facing the same issue as #29.

The HTML file for the Radio button

Creating pie-chart.

Sample

Components:

• Checkbox
• InputText
• RadioBox
• Password
• Text Area
• Button
  • Type
    • Submit
    • Reset
    • Button
  • Event
    • Label: typerefinery.ai/typerefinery/casemagment/save
• Dropdown
  • LIST
    • TEXT (key=value)

Tms connection with ticker component

We created a checkbox component.

But we are not able to control the inputs. Not able to make the checkbox functional as we need to v-model to interact.
Since Vue handles them, we could not handle them through our custom JS functions.

We tried passing the values from the model(Java) to the v-model, but that did not work as expected.

The HTML code for the checkbox is attached below.

component preview.

For this :

1. first create a layout
2. then create search box and search button.

We created a input field component that allows for drag-and-dropping of components.
But we are not able to control the inputs. We have tried by giving id to the input tag and able to fetch $event.target.value from input field using querySelector.
Since Vue handles them, we could not handle them through our custom JS functions. We tried passing the values from the model(Java) to v-model, but that did not work as expected.

Single output Chart from tms and after clicking the run button ,the data is loaded into the chart.

Creating the the dashboard page similar to wireframe.
Sample: