Data Model

Data models are categorized by their type and usage context as follows:

1. Model
2. View Model
3. Payload
4. Form Model
5. Query String Model
6. Route Param Model
7. Others

Model

Since the backend API lacks defined data models, we define our own models for API responses at the frontend. These use the prefix "M" (which stands for Model) - for example: MArticle.

View Model

A view model defines the data structure for views and uses the prefix V (which stands for View) - for example: VArticle.

Payload Model

A payload defines a model for API request data and uses the suffix "payload" in its name (for example: ArticleListPayload)

INFO

n the future, we plan to rename these using the prefix P (where P stands for Payload) to ensure consistency with our other data model naming conventions

Form Model

Although form-related UI components are technically part of the View Model, we treat them as a separate category due to their large quantity. These form field data models use the prefix F (for Form) - for example: FDonatePaymentCheckout

Query String Model

Defines data models for Query Strings that encompass both Page Routes and API routes. These models can be shared between the two types. Uses the prefix QS (short for Query String) - for example: QSArticle

Route Param Model

Defines data models for route parameters that can be shared between page routes and API routes, similar to Query Strings. Uses the prefix RP (which stands for Route Param) - for example: RPKeywordSearch

Others

Atomic Types

Basic shared type definitions should be placed in src/types/base.ts.

Case Transform Methods

Type conversion functions are stored in src/types/caseTransform.ts. This file contains two type converters: SnakeToCamelCaseNested and CamelToSnakeCaseNested. These converters can transform all object keys between camelCase and snake_case formats.

For example:

type Test1 = {
  fooBar: string;
  helloWorld: {
    age: number;
    name: string;
  }[];
};

type TransformedTest1 = CamelToSnakeCaseNested<Test1>;

type Test2 = {
  foo_bar: string;
  hello_world: {
    age: number;
    name: string;
  }[];
};

type TransformedTest2 = SnakeToCamelCaseNested<Test2>;

Enum

All enum type definitions are located in src/types/enum.ts

INFO

If the file becomes too large in the future, we can split it into multiple files

Icon Type

The src/types/iconTypes.ts file contains icon type definitions for the BasicIcon.vue component, which are automatically generated using fantasticon.

WARNING

This definition file is automatically generated by the script npm run prepare-icon-font. Do not modify this file manually.

HTTP Status Code Types

HTTP status code definitions are located in src/types/http.ts

GTM Payload Models

For GTM events, payload types are user-defined. To prevent sending incorrect data, we first define payload models in src/types/gtm.ts before dispatching events to GTM

Ad Parameter Models

Advertising parameter models are defined in src/types/advertisement.ts.

Type

Any types that don't fit into the above categories should be placed in src/types/types.ts

TIP

src/types/viewModel.ts contains legacy type definitions from early stage development and should be removed in future updates