Skip to content

Commit 998c66a

Browse files
maxime-urbanskimaxime-urbanski
committed
Refactoring templates
1 parent 0658abc commit 998c66a

11 files changed

+70
-78
lines changed

‎src/generators/AngularGenerator.js

+11-7
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ export default class extends BaseGenerator {
1212
// COMMON COMPONENTS
1313
"app/components/common/delete/delete.component.html",
1414
"app/components/common/delete/delete.component.ts",
15+
"app/components/common/header/header.component.css",
1516
"app/components/common/header/header.component.html",
1617
"app/components/common/header/header.component.ts",
1718
"app/components/common/layout/layout.component.html",
1819
"app/components/common/layout/layout.component.ts",
20+
"app/components/common/sidebar/sidebar.component.css",
1921
"app/components/common/sidebar/sidebar.component.html",
2022
"app/components/common/sidebar/sidebar.component.ts",
21-
"app/components/common/table/table.component.html",
22-
"app/components/common/table/table.component.ts",
2323

2424
// COMPONENTS
2525
"app/components/foo/create/create.component.html",
@@ -32,6 +32,8 @@ export default class extends BaseGenerator {
3232
"app/components/foo/list/list.component.ts",
3333
"app/components/foo/show/show.component.html",
3434
"app/components/foo/show/show.component.ts",
35+
"app/components/foo/table/table.component.html",
36+
"app/components/foo/table/table.component.ts",
3537
"app/app.component.html",
3638
"app/app.component.ts",
3739

@@ -107,19 +109,19 @@ export default class extends BaseGenerator {
107109
apiResource: this.apiResource(api),
108110
};
109111

112+
console.log(fields);
113+
110114
//CREATE DIRECTORIES - These directories may already exist
111115
[
112-
`${dir}/assets`,
113-
`${dir}/utils`,
114116
`${dir}/app/components/${lc}/create`,
115117
`${dir}/app/components/${lc}/edit`,
116118
`${dir}/app/components/${lc}/form`,
117119
`${dir}/app/components/${lc}/list`,
118120
`${dir}/app/components/${lc}/show`,
121+
`${dir}/app/components/${lc}/table`,
119122
`${dir}/app/components/common/delete`,
120123
`${dir}/app/components/common/header`,
121124
`${dir}/app/components/common/sidebar`,
122-
`${dir}/app/components/common/table`,
123125
`${dir}/app/components/svg/list-svg`,
124126
`${dir}/app/components/svg/show-svg`,
125127
`${dir}/app/components/svg/edit-svg`,
@@ -141,14 +143,14 @@ export default class extends BaseGenerator {
141143
"app/components/svg/menu/menu.component.ts",
142144
"app/components/common/delete/delete.component.html",
143145
"app/components/common/delete/delete.component.ts",
146+
"app/components/common/header/header.component.css",
144147
"app/components/common/header/header.component.html",
145148
"app/components/common/header/header.component.ts",
146149
"app/components/common/sidebar/sidebar.component.css",
147150
"app/components/common/sidebar/sidebar.component.html",
148151
"app/components/common/sidebar/sidebar.component.ts",
149-
"app/components/common/table/table.component.html",
150-
"app/components/common/table/table.component.ts",
151152
"app/interface/api.ts",
153+
"app/service/api.service.ts",
152154
"app/app.component.html",
153155
"app/app.component.ts",
154156
"app/app.routes.ts",
@@ -169,6 +171,8 @@ export default class extends BaseGenerator {
169171
"app/components/%s/show/show.component.html",
170172
"app/components/%s/show/show.component.ts",
171173
"app/components/%s/show/show.component.html",
174+
"app/components/%s/table/table.component.html",
175+
"app/components/%s/table/table.component.ts",
172176
].forEach((file) =>
173177
this.createFileFromPattern(file, dir, [lc, formFields], context)
174178
);

‎templates/angular/app/app.routes.ts

+3-18
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,13 @@ import {ShowComponent} from "@components/foo/show/show.component";
44
import {EditComponent} from "@components/foo/edit/edit.component";
55
import {CreateComponent} from "@components/foo/create/create.component";
66
import {LayoutComponent} from "@components/common/layout/layout.component";
7+
import {allRoutes} from '@router'
8+
79

810
export const routes: Routes = [
911
{
1012
path: '',
1113
component: LayoutComponent,
12-
children: [
13-
{
14-
path: '{{lc}}',
15-
component: ListComponent
16-
},
17-
{
18-
path: '{{lc}}/add',
19-
component: CreateComponent
20-
},
21-
{
22-
path: '{{lc}}/:id',
23-
component: ShowComponent,
24-
},
25-
{
26-
path: '{{lc}}/:id/edit',
27-
component: EditComponent
28-
},
29-
]
14+
children: allRoutes
3015
}
3116
];

‎templates/angular/app/components/foo/create/create.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
<div class="bg-blue-100 rounded py-4 px-4 text-blue-700 text-sm">Loading ...</div>
1010
} @else {
1111
<h1 class="text-3xl my-4">Create</h1>
12-
<app-form [fields]="formType" (submit)="onSubmit($event)"/>
12+
<app-form [item]="item()" (submit)="onSubmit($event)"/>
1313
}
1414
</div>

‎templates/angular/app/components/foo/create/create.component.ts

+3-10
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {RouterLink} from "@angular/router";
55
import {DeleteComponent} from "@components/common/delete/delete.component";
66
import {FormComponent} from "@components/{{lc}}/form/form.component";
77
import {ApiService} from "@service/api.service";
8+
import {ApiItem} from "@interface/api";
89

910
@Component({
1011
selector: 'app-create',
@@ -22,20 +23,12 @@ export class CreateComponent {
2223
private apiService: ApiService = inject(ApiService)
2324
private location: Location = inject(Location)
2425
public isLoading: WritableSignal<boolean> = signal(false)
25-
26-
public formType: Array<{ name: string; type: string }> = [
27-
{
28-
name: 'name',
29-
type: 'string',
30-
}
31-
]
26+
public item: WritableSignal<ApiItem> = signal({} as ApiItem)
3227

3328
onSubmit(data: any) {
3429
return this.apiService
3530
.add('/{{lc}}',
36-
{
37-
...data
38-
}
31+
this.item()
3932
).subscribe(
4033
(item) => {
4134
this.isLoading.set(true)

‎templates/angular/app/components/foo/edit/edit.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
} @else {
1313

1414
<h1 class="text-3xl my-4">Edit \{{ item()['name'] }} <span class="text-xl">\{{ item()["@id"] }} </span></h1>
15-
<app-form [fields]="formType"
15+
<app-form [fields]="{{fields}}"
1616
[itemToUpdate]="item()"
1717
(submit)="onSubmit($event)"
1818
(delete)="delete()"

‎templates/angular/app/components/foo/edit/edit.component.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,7 @@ export class EditComponent implements OnInit {
2525
public item: WritableSignal<ApiItem> = signal({} as ApiItem);
2626
public isLoading: WritableSignal<Boolean> = signal(false)
2727
public error: WritableSignal<string> = signal('')
28-
public formType: Array<{ name: string; type: string }> = [
29-
{
30-
name: 'name',
31-
type: 'string',
32-
}
33-
]
28+
public formType: Array<{ name: string; type: string }> = []
3429

3530
constructor(
3631
private apiService: ApiService,

‎templates/angular/app/components/foo/form/form.component.html

+22-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,29 @@
1-
<form [formGroup]="formGroup" (ngSubmit)="handleSubmit()">
2-
@for (field of fields; track field.name) {
1+
<form (ngSubmit)="handleSubmit()">
32
<div class="bg-white px-6 py-8">
4-
<div class="mb-3">
5-
<label [for]="field.name">{{ field.name }}</label>
6-
<input [id]="field.name"
7-
[type]="field.type"
8-
[formControlName]="field.name"
3+
{{#each formFields}}
4+
<div class="mb-2">
5+
<label for="{{name}}" class="text-gray-700 block text-sm font-bold capitalize">{{ name }}</label>
6+
<input id="{{name}}"
7+
name="{{name}}"
98
class="mt-1 w-full px-3 py-2 border rounded"
10-
>
9+
[(ngModel)]="item.{{name}}"
10+
{{#compare type "==" "dateTime" }}
11+
type="date"
12+
{{/compare}}
13+
{{#compare type "!=" "dateTime" }}
14+
type="{{type}}"
15+
{{/compare}}
16+
{{#if step}}
17+
step="{{step}}"
18+
{{/if}}
19+
{{#if required}}
20+
required
21+
{{/if}}
22+
placeholder="{{description}}"
23+
/>
1124
</div>
25+
{{/each}}
1226
</div>
13-
}
1427
<div class="bg-neutral-100 px-4 py-6 flex justify-between">
1528
<button
1629
type="submit"

‎templates/angular/app/components/foo/form/form.component.ts

+5-23
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import {
22
Component,
33
EventEmitter,
44
Input,
5-
Output, SimpleChange,
5+
Output
66
} from '@angular/core';
7-
import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
7+
import {ReactiveFormsModule} from "@angular/forms";
88
import {ApiItem} from "@interface/api";
99
import {AsyncPipe, NgIf} from "@angular/common";
1010
import {DeleteComponent} from "@components/common/delete/delete.component";
@@ -21,33 +21,15 @@ import {DeleteComponent} from "@components/common/delete/delete.component";
2121
templateUrl: './form.component.html',
2222
})
2323
export class FormComponent {
24-
@Input() fields: Array<{ name: string; type: string }> = [];
25-
@Input() itemToUpdate!: ApiItem;
24+
@Input() item!: ApiItem;
2625
@Output() submit = new EventEmitter
2726
@Output() delete = new EventEmitter
28-
public formGroup: FormGroup = new FormGroup<any>({})
29-
30-
ngOnChanges(changes: SimpleChange) {
31-
this.formGroup = this.createFormGroup()
32-
}
33-
34-
createFormGroup() {
35-
const group: { [key: string]: FormControl<string | null | undefined> } = {}
36-
this.fields.forEach(field => {
37-
let value;
38-
if (this.itemToUpdate) {
39-
value = this.itemToUpdate[field?.name as keyof ApiItem]
40-
}
41-
group[field.name] = new FormControl(value)
42-
})
43-
return new FormGroup(group)
44-
}
4527

4628
handleSubmit() {
47-
this.submit.emit(this.formGroup.value)
29+
this.submit.emit()
4830
}
4931

5032
handleDelete() {
51-
this.delete.emit(this.itemToUpdate?.["@id"])
33+
this.delete.emit(this.item?.["@id"])
5234
}
5335
}

‎templates/angular/app/components/foo/show/show.component.html

+10-1
Original file line numberDiff line numberDiff line change
@@ -31,20 +31,29 @@ <h1 class="text-3xl my-4">Edit \{{ item()['name'] }} <span class="text-xl">\{{ i
3131
</tr>
3232
</thead>
3333
<tbody>
34+
{{#each fields}}
3435
<tr class="border-b">
3536
@if (item()) {
3637
<th
3738
class="text-sm font-medium px-6 py-4 text-left capitalize"
3839
scope="row"
3940
>
40-
name
41+
{{name}}
4142
</th>
4243
<td class="px-6 py-4 whitespace-nowrap text-sm">
44+
{{#if isReferences}}
4345
\{{ item()['name'] }}
4446
</td>
47+
{{else if (compare type "==" "dateTime") }}
48+
\{{ formatDateTime(item.{{name}}) }}
49+
{{else}}
50+
\{{ item.{{name}} }}
51+
{{/if}}
4552
} @else {
4653
<td>Rien</td>
4754
}
55+
</tr>
56+
{{/each}}
4857
</tbody>
4958
</table>
5059
</div>

‎templates/angular/app/components/common/table/table.component.html ‎templates/angular/app/components/foo/table/table.component.html

+13-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,19 @@
2727
(change)="addToBulk(item['@id']!)"
2828
>
2929
</td>
30-
<td>\{{ item['id'] }}</td>
31-
<td>\{{ item['name'] }}</td>
30+
{{#each fields}}
31+
32+
<td class="px-6 py-4 text-sm">
33+
{{#if isReferences}}
34+
\{{ {{lowercase reference.title}} }}
35+
'coucou"
36+
{{else if (compare type "==" "dateTime") }}
37+
\{{ formatDateTime(item['{{name}}') }}
38+
{{else}}
39+
\{{ item['{{name}}'] }}
40+
{{/if}}
41+
</td>
42+
{{/each}}
3243
<td class="w-8">
3344
<a [routerLink]="[item['@id']]" class="text-cyan-500">
3445
Show

‎templates/angular/app/components/common/table/table.component.ts ‎templates/angular/app/components/foo/table/table.component.ts

File renamed without changes.

0 commit comments

Comments
 (0)