Skip to content

Commit

Permalink
fix cspell errors
Browse files Browse the repository at this point in the history
  • Loading branch information
manuelblum committed Feb 24, 2025
1 parent 10ac816 commit e79df00
Show file tree
Hide file tree
Showing 7 changed files with 24 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ export class Customer extends BaseEntity<Customer, "id"> {
@CrudField({ search: true, filter: false, sort: false, input: true })
@Field()
@Property({ columnType: "text" })
firstname: string;
firstName: string;

@CrudField({ search: true, filter: false, sort: false, input: true })
@Field()
@Property({ columnType: "text" })
lastname: string;
lastName: string;

@CrudField({ search: false, filter: false, sort: false, input: false })
@Property({ onUpdate: () => new Date() })
Expand All @@ -38,14 +38,14 @@ export class Customer extends BaseEntity<Customer, "id"> {
}
```

Currently, there is no `api-generator` watch mode - so everytime you change the entity following command must be run. Information how to setup API Generato can be found [Setup API Generator](../../../1-getting-started/4-crud-generator/1-api-generator.md) Section.
Currently, there is no `api-generator` watch mode - so every time you change the entity following command must be run. Information how to setup API Generator can be found [Setup API Generator](../../../1-getting-started/4-crud-generator/1-api-generator.md) Section.

```bash
cd api
npm run api-generator
```

The **API Generator** will generate multiple files inside the specified `../generated` output directory. It will contain a `customer.resolver.ts` and some dto related files (`customer.filter.ts`, `customer.input.ts`, `customer.sort.ts`, `customer.args.ts`, `paginagted-customer.ts`).
The **API Generator** will generate multiple files inside the specified `../generated` output directory. It will contain a `customer.resolver.ts` and some dto related files (`customer.filter.ts`, `customer.input.ts`, `customer.sort.ts`, `customer.args.ts`, `paginated-customer.ts`).

![CustomerGeneratedDirectoryStructure](./images/customerDirectoryStructure.png)

Expand All @@ -65,7 +65,7 @@ import { CustomerResolver } from "./generated/customer.resolver";
export class CustomerModule {}
```

This generated module must be added to the `api/src/app.module.ts` and registered proprietly.
This generated module must be added to the `api/src/app.module.ts` and registered.

```typescript
import { DynamicModule, Module } from "@nestjs/common";
Expand Down Expand Up @@ -94,8 +94,8 @@ As soon the new `CustomerModule` is registered in the app module, the schema wil
```graphql
type Customer {
id: ID!
firstname: String!
lastname: String!
firstName: String!
lastName: String!
updatedAt: DateTime!
}

Expand Down Expand Up @@ -132,13 +132,13 @@ type Query {
}

input CustomerInput {
firstname: String!
lastname: String!
firstName: String!
lastName: String!
}

input CustomerUpdateInput {
firstname: String
lastname: String
firstName: String
lastName: String
}

type Mutation {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { Migration } from "@mikro-orm/migrations";
export class Migration20250203143416 extends Migration {
async up(): Promise<void> {
this.addSql(
'create table "Customer" ("id" uuid not null, "firstname" text not null, "lastname" text not null, "updatedAt" timestamptz(0) not null, constraint "Customer_pkey" primary key ("id"));',
'create table "Customer" ("id" uuid not null, "firstName" text not null, "lastName" text not null, "updatedAt" timestamptz(0) not null, constraint "Customer_pkey" primary key ("id"));',
);
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ export const generateCustomers = async ({
const generateRandomCustomer = async (): Promise<Customer> => {
const customer = repository.create({
id: faker.string.uuid(),
firstname: faker.person.firstName(),
lastname: faker.person.lastName(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
});

bar.increment(1, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ export const CustomerGrid: GridConfig<GQLCustomer> = {
gqlType: "Customer",
columns: [
{ type: "text", name: "id" },
{ type: "text", name: "firstname" },
{ type: "text", name: "lastname" },
{ type: "text", name: "firstName" },
{ type: "text", name: "lastName" },
],
};
```
Expand All @@ -40,7 +40,7 @@ npm run --prefix admin admin-generator

The `admin-generator` script is configured in `admin/package.json` and will execute the admin generator binary.

![AdminGeneratorcli](./images/adminGeneratorCli.png)
![AdminGeneratorCLI](./images/adminGeneratorCli.png)

Two files will be generated in the `admin/src/customers/generated` directory. The `CustomerGrid.tsx` and the `CustomerGrid.generated.ts`. The `CustomerGrid.tsx` is the React component that will render the DataGrid. The `CustomerGrid.generated.ts` has related types and interfaces from the GraphQL Api.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@ export const CustomerForm: FormConfig<GQLCustomer> = {
},
{
type: "text",
name: "firstname",
name: "firstName",
},
{
type: "text",
name: "lastname",
name: "lastName",
},
],
},
Expand All @@ -51,12 +51,12 @@ Same as with the DataGrid generation, to generate the Form, you have to run the
npm run --prefix admin admin-generator
```

![AdminGeneratorcli](./images/adminGeneratorCli.png)
![AdminGeneratorCLI](./images/adminGeneratorCli.png)

The component is ready to be used in the application. Simple use the generated component `<CustomerForm />` somewhere in your React Application. An optional prop `id` also gets generated.

Sample Form will look like:

![CustomerForm](./images/customerForm.png)

The CustomerForm can be configured for "add" or "edit" mode. In this case, the `add` mode will be the the default behaviour. As soon as the `id` is set on the Form, the Form will switch to `edit` mode.
The CustomerForm can be configured for "add" or "edit" mode. In this case, the `add` mode will be the default behavior. As soon as the `id` is set on the Form, the Form will switch to `edit` mode.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Integrate Admin Generator Datagrid into Comet Application
title: Integrate Admin Generator DataGrid into Comet Application
---

At the end of this guide, we want to combine the generated `CustomerGrid` with the `CustomerForm` into a new page `CustomerPage`.
Expand Down
3 changes: 2 additions & 1 deletion project-words.txt
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@ subcomponent
subpage
typesafe
exif
brevo
brevo
timestamptz

0 comments on commit e79df00

Please sign in to comment.