Skip to content

Commit

Permalink
Sepa 785 implement vue3 feature support (#91)
Browse files Browse the repository at this point in the history 
* Updated to include support for vue3 plugins and localization updates

* Vue Changes:
- Updated the injection of localization plugin into the main.ts file
- Removed unnecessary code for installing Buefy and Vuetify plugins
- Updated the main.ts file to use the new injection methods for Vue 2 and Vue 3
- Added the injection of routes to the main router
- Refactored imports for vue2 methods and implementation and vue 3

* Update package.json and tsconfig.tsbuildinfo

- Update "bin" property in package.json to point to "./bin/run"
- Remove unnecessary "No newline at end of file" in package.json
- No significant changes in tsconfig.tsbuildinfo

* Update installation and serve commands

- Update the installation command to remove the flag '--legacy-peer-deps' in order to install dependencies correctly.
- Update the serve command to run 'npm run dev' instead of 'npm run serve' for serving the project.

This commit updates the installation and serve commands in the '3.next-steps.md' file under 'Vue/2.getting-started' directory. The installation command no longer includes the '--legacy-peer-deps' flag, ensuring correct installation of dependencies. The serve command has been updated to use 'npm run dev' instead of 'npm run serve' for serving the project. These changes improve the clarity and accuracy of the instructions provided in the documentation.

* Add route to router configuration when adding a new page

This commit adds a route object to the router configuration when a new page is added using the Vue CLI. The route object includes the path, name, component, and webpackChunkName properties. After creating the route object, it is injected into the router configuration using the injectRoutesIntoRouter function. This ensures that the newly added page is accessible through the specified path.

* Update package version and fix tsconfig.tsbuildinfo.

- Updated package version in package.json from "0.0.2-beta.12" to "0.0.2-beta.13".
- Fixed issue in tsconfig.tsbuildinfo by correcting the file paths.

For more details, see the specific changes made in each file.

* Removed console log and updated condition for checking presets

* SEPA-849: initial implementation of sentry integration (#76)

* initial implementation of sentry integration

* Added Sentry functionality as a preset during the project creation

* Rearrange Sentry prompt and loggging

* Added prompt for dsn to sentry plugin when ran standalone

---------

Co-authored-by: Davane Davis <[email protected]>

* Added ability to import prebuilt ui components from .rdvue (#85)

* Added ability to import prebuilt ui components from .rdvue

* Refactor component command to update package.json and install dependencies in parallel

* Removed usage of exit()

* update copy files method and update packages

* docs: Update the docs to reflect migration from Vuex to Pinia for state management.

* docs:  Refactor and expand Vue service documentation

* docs: Update Vue pages doc with CLI and router instructions

* docs: Add comprehensive layout documentation & CLI usage

---------

Co-authored-by: Tyrone Taylor <[email protected]>
Co-authored-by: Tahjyei Thompson <[email protected]>
Co-authored-by: Mickey <[email protected]>
Co-authored-by: Davane Davis <[email protected]>
Co-authored-by: nxtedecoy <[email protected]>
  • Loading branch information
@andre-vidal @ttaylor92
@Tajcore @JamaicanFriedChicken @nxtedecoy
6 people authored Jul 22, 2024
1 parent cb4ccf6 commit 0f75373
Show file tree
Hide file tree
Showing 23 changed files with 7,632 additions and 6,543 deletions.
4 changes: 2 additions & 2 deletions docs/content/3.Vue/2.getting-started/3.next-steps.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@

```bash
cd <project-name>
npm install --legacy-peer-deps
npm install
```

### Step 2: Serve project

```bash
npm run serve
npm run dev
```

The project will be served at [http://localhost:8080/](http://localhost:8080/) by default. This information will also be printed out in your terminal. Visiting the link the app is served on will display a default page which was created on project creation.
106 changes: 95 additions & 11 deletions docs/content/3.Vue/5.features/1.pages.md
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,106 @@
# Pages

A Page is a conceptual grouping for Vue Components used in routing. Pages are **not** to be imported by other Pages, Components or Layouts.
A Page is a conceptual grouping for Vue Components used in routing. Pages are **not** to be imported by other Pages, Components, or Layouts.

A special feature of Pages are that they can benefit from Layouts to automatically add a parent container with common pieces of UI/State that’s shared throughout the application - like Headers and Footers. The [Layouts](layouts) section goes into more detail on this approach.
A special feature of Pages is that they can benefit from Layouts to automatically add a parent container with common pieces of UI/State that’s shared throughout the application - like Headers and Footers. The [Layouts](layouts) section goes into more detail on this approach.

> A Page needs to be added to the [Router](#routing) before it can be previewed within a web browser.
### Technical

Each generated Page is contained within it’s own sub-folder within the **src/pages** directory. The directory contains the following files which each carry out a specific role in developing a Page:
Each generated Page is contained within its own sub-folder within the **src/pages** directory. The directory contains the following files which each carry out a specific role in developing a Page:

* \[page\].**vue**: This contains the Vue template markup used to implement the structure and layout of a Page. It is a mix of HTML and special Vue syntaxes which allow declarative databinding and structural manipulation.

* \[page\].**ts**: This contains the TypeScript controller which provides the procedural code-behind logical needed to add integrations to a page. Through this file you may expose data and handle events generated by Page elements.

* \[page\].**scss**: This contains the SASS stylesheet to be applied to the page - and that page only. The styles within this file are scoped, meaning they cannot be used to target any elements except those defined directly within the \[page\].vue template file.

* **[page].vue**: This contains the Vue template markup used to implement the structure and layout of a Page. It is a mix of HTML and special Vue syntaxes which allow declarative databinding and structural manipulation.
* **[page].ts**: This contains the TypeScript controller which provides the procedural code-behind logic needed to add integrations to a page. Through this file, you may expose data and handle events generated by Page elements.
* **[page].scss**: This contains the SASS stylesheet to be applied to the page - and that page only. The styles within this file are scoped, meaning they cannot be used to target any elements except those defined directly within the [page].vue template file.

> Scoped CSS may seem weird at first because regular CSS operates with global impunity, however it is a great approach for compartmentalizing styles so they do not jump their intended scope and affect other elements. Global level styles can be added in the Theme directory.
> Scoped CSS may seem weird at first because regular CSS operates with global impunity, however, it is a great approach for compartmentalizing styles so they do not jump their intended scope and affect other elements. Global level styles can be added in the Theme directory.
* \[page\].**spec.ts**: This contains the unit-level tests for the page. Read the [testing section](Testing.md#unit-tests-with-jest) for more details about writing tests.
* **[page].spec.ts**: This contains the unit-level tests for the page. Read the [testing section](Testing.md#unit-tests-with-jest) for more details about writing tests.

### Adding a Page Using the CLI

To add a page to your project using the CLI, use the following command:

```bash
frontier vue add page
```

This command will generate a new Page with the necessary files and structure, as described above. The Page will be contained within its own sub-folder in the **src/pages** directory.

### Making the Page Accessible

To make the new page accessible, you need to update the router configuration. The router is defined in the `router.ts` file, which contains an array of route records. For more information on Vue Router, refer to the [official documentation](https://router.vuejs.org/).

#### Example Router Configuration

Here is an example of how to add a new page to the router:

```typescript
import Vue from 'vue';
import {
createWebHashHistory,
createRouter,
type RouteRecordRaw,
} from 'vue-router';
import SignInView from '@/pages/sign-in';

// Import the new page
import NewPageView from '@/pages/new-page';

export enum RouteNames {
SignIn = 'sign-in',
NewPage = 'new-page',
}

export const routes: RouteRecordRaw[] = [
{
path: `/${RouteNames.SignIn}`,
name: RouteNames.SignIn,
component: SignInView,
meta: {
layout: 'default-layout',
page: {
title: 'Sign In',
description: 'This is the sign in page',
},
},
},
// Add the new page route
{
path: `/${RouteNames.NewPage}`,
name: RouteNames.NewPage,
component: NewPageView,
meta: {
layout: 'default-layout',
page: {
title: 'New Page',
description: 'This is the new page',
},
},
},
];

const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes,
});

export { router as default, router };
```

### Steps to Add a New Page and Make It Accessible

1. **Create the Page:**
Use the CLI to create a new page.
```bash
frontier vue add page
```

2. **Update the Router:**
Open the `router.ts` file and import the new page component. Add a new route record for the page in the `routes` array.

3. **Configure the Route:**
Add the necessary route configuration, including path, name, component, and metadata.

By following these steps, you can create a new page and make it accessible within your application. For more information on routing, visit the [Vue Router documentation](https://router.vuejs.org/){:target="_blank"}.
170 changes: 157 additions & 13 deletions docs/content/3.Vue/5.features/3.services.md
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,168 @@
# Services

Services are focused classed designed to interact with web API endpoints. As a good design pattern a service should:
Services are focused classes designed to interact with web API endpoints. As a good design pattern, a service should:

* only interact with a single domain

* only provide features from the domain which are relevant to the theme of the service. Eg. A user service should be focused on methods support such; adding order related data would make for poor encapsulation.

- Only interact with a single domain.
- Only provide features from the domain which are relevant to the theme of the service. For example, a user service should be focused on methods supporting user-related functionalities; adding order-related data would make for poor encapsulation.

### Technical

* While each generated service resides in its own file and class, all services extend a predefined BaseService class in order to provide centralized functionality.

* Each service is able to specify a unique web API endpoint with which to interact - or none at all for services providing local functionality (Eg. wrapper storage mechanism over LocalStorage).

* Each service has access to the following protected members:

- While each generated service resides in its own file and class, all services extend a predefined BaseService class to provide centralized functionality.
- Each service can specify a unique web API endpoint with which to interact - or none at all for services providing local functionality (e.g., wrapper storage mechanism over LocalStorage).
- Each service has access to the following protected members:


| **Member** | **Description** |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| api (field) <br>type: Axios | Helper to invoke web APIs. Individual service methods need only specify their endpoint paths relative to the registered root domain. |
| api (field) <br>type: Axios | Helper to invoke web APIs. Individual service methods need only specify their endpoint paths relative to the registered root domain. |
| onRequest(request: AxiosRequestConfig) => void | Invoked before requests are sent to the web API endpoint. |
| onResponse(response: AxiosResponse) => void | Invoked before responses are handled by a Service’s methods. |
| onError(data: any) | Invoked for errors during request or response. |
| onError(data: any) | Invoked for errors during request or response. |

### The Default Service Class

The `Service` class is a base class that provides a foundation for all services in the application. It includes the following features:

- An `api` field that is an Axios instance configured with the base URL and default headers.
- A constructor that sets up request and response interceptors to log requests and responses.
- `onRequest`, `onResponse`, and `onError` methods that can be overridden in derived classes to handle request, response, and error events.

```typescript
import axios, { AxiosError, AxiosResponse } from "axios";
import envConfig from "@/config/env";

export class Service {
protected api = axios.create({
baseURL: envConfig.apiBaseUrl,
headers: {
"Content-Type": "application/json",
},
});

constructor() {
// Set up request/response interceptors
this.api.interceptors.request.use((request) => {
this.onRequest(request);
return request;
});

this.api.interceptors.response.use(
(response) => {
this.onResponse(response);
return response;
},
(error: AxiosError) => {
this.onError(error);
return Promise.reject(error);
}
);
}

protected onRequest(request: any): void {
// Override in derived classes
}

protected onResponse(response: AxiosResponse): void {
// Override in derived classes
}

protected onError(error: AxiosError): void {
// Override in derived classes
}
}

export default Service;
```


### Example: Creating a Service Using the CLI Tool

To create a service using the CLI tool, use the following command:

```bash
frontier vue add service
```

This will generate a new service file extending the BaseService class.

### Example Service Template

Here is an example of a default service that references a public API to perform basic CRUD operations:

```typescript
import { AxiosRequestConfig, AxiosResponse } from "axios";
import { Service } from "./base";

class ExampleService extends Service {
// [Public] Methods

// Fetch all items
public async getItems(): Promise<any> {
return this.api
.get("/items")
.then((response: AxiosResponse<any>) => {
return response.data;
})
.catch(this.onError);
}

// Fetch a single item by ID
public async getItem(id: number): Promise<any> {
return this.api
.get(`/items/${id}`)
.then((response: AxiosResponse<any>) => {
return response.data;
})
.catch(this.onError);
}

// Create a new item
public async createItem(item: any): Promise<any> {
return this.api
.post("/items", item)
.then((response: AxiosResponse<any>) => {
return response.data;
})
.catch(this.onError);
}

// Update an existing item by ID
public async updateItem(id: number, item: any): Promise<any> {
return this.api
.put(`/items/${id}`, item)
.then((response: AxiosResponse<any>) => {
return response.data;
})
.catch(this.onError);
}

// Delete an item by ID
public async deleteItem(id: number): Promise<any> {
return this.api
.delete(`/items/${id}`)
.then((response: AxiosResponse<any>) => {
return response.data;
})
.catch(this.onError);
}

// [Protected] Event Handlers
protected onRequest(request: AxiosRequestConfig): void {
console.log("Request:", request);
}

protected onResponse(response: AxiosResponse): void {
console.log("Response:", response);
}

protected onError(error: any): void {
console.error("Error:", error);
}
}

// Export the service instance
const service = new ExampleService();
export { service as default, service as ExampleService };
```

In this example, `ExampleService` is a service class that extends `BaseService` and interacts with a public API to perform basic CRUD operations. The service includes methods for getting items, getting a single item by ID, creating an item, updating an item, and deleting an item. Each method uses the `api` field to make HTTP requests and handles errors through the `onError` method. The `onRequest` and `onResponse` methods provide hooks for logging requests and responses.
Loading

0 comments on commit 0f75373

Please sign in to comment.