;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ FormComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(FormComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/index/form/form.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {FormGroup} from '@angular/forms';
3 | import {FormlyFieldConfig} from '@ngx-formly/core';
4 | import {catchFormError} from 'angular-django';
5 | import {SpecieApi} from '../../shared/api.service';
6 |
7 | @Component({
8 | selector: 'app-form',
9 | templateUrl: './form.component.html',
10 | styleUrls: ['./form.component.scss']
11 | })
12 | export class FormComponent implements OnInit {
13 |
14 | form = new FormGroup({});
15 | model = {};
16 | fields: FormlyFieldConfig[];
17 |
18 | constructor(public specieApi: SpecieApi) { }
19 |
20 | ngOnInit(): void {
21 | this.fields = this.specieApi.getFormFields([
22 | 'identifier', 'habitat', ['color', 'is_baby']
23 | ]);
24 | }
25 |
26 | submit(model): void {
27 | this.specieApi.create(model)
28 | .pipe(catchFormError(this.form)).subscribe();
29 | }
30 |
31 |
32 | }
33 |
--------------------------------------------------------------------------------
/demo/angular/src/app/index/index.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Angular Django
4 |
Work in Angular as in Django
5 |
8 |
Use the methods and filters available in the Django Rest Framework to work with the API.
9 |
10 |
13 |
14 |
15 |
17 |
18 |
19 | Build forms in minutes. Includes
20 | validation on frontend and
21 | backend . Selector choices are built with the server.
22 |
23 |
26 |
Easy-to-implement filtering , paging , and searching listings .
27 |
28 |
29 |
31 |
32 |
35 |
36 |
37 | Use your Django classes and types in Angular . The library will transform
38 | the API values to the correct types.
39 |
40 |
How does it work?
43 |
44 |
45 |
Angular Django generates typescript classes
46 | from your Django Rest Framework viewsets and serializers classes .
47 |
51 |
54 |
In Angular Django the viewsets are called Apis and the
55 | serializers are called serializers too.
56 |
57 |
60 |
61 |
62 | Use APIs to make requests to the API such as listing items. The elements will be instantiated using
63 | the serializers .
64 |
65 |
68 | This project is under development. Play the demo on your machine, it is available with docker-compose.
69 |
70 |
71 |
72 | You can contribute to this project on Github .
73 |
74 |
--------------------------------------------------------------------------------
/demo/angular/src/app/index/index.component.scss:
--------------------------------------------------------------------------------
1 | :host ::ng-deep {
2 | .display-flex {
3 | display: flex;
4 |
5 | [class*="flex-"] {
6 | padding-left: 10px;
7 | }
8 |
9 | [class*="flex-"]:first-child {
10 | padding-left: 0;
11 | }
12 | }
13 |
14 | .flex-1 { flex: 1; }
15 |
16 | .flex-2 { flex: 2; }
17 |
18 | .flex-3 { flex: 3; }
19 |
20 | .flex-4 { flex: 4; }
21 |
22 | .flex-5 { flex: 5; }
23 |
24 | .flex-6 { flex: 6; }
25 |
26 | .list {
27 | mat-card {
28 | padding-top: 0;
29 | padding-bottom: 0;
30 | }
31 | }
32 | }
33 |
34 | strong {
35 | color: #3F51B5;
36 | }
37 |
38 | h1 {
39 | font-size: 400%;
40 | }
41 |
42 | h2 {
43 | font-size: 300%;
44 | }
45 |
46 | .subtitle {
47 | font-size: 150%;
48 | }
49 |
50 |
51 | .flex {
52 | display: flex;
53 | align-items: center;
54 | margin-top: 80px;
55 | margin-bottom: 80px;
56 |
57 | p {
58 | font-size: 150%;
59 | line-height: 1.5;
60 | }
61 |
62 | .left {
63 | text-align: right;
64 | padding-right: 20px;
65 | }
66 |
67 | .right {
68 | text-align: left;
69 | padding-left: 20px;
70 | }
71 | }
72 |
73 |
74 | .example-3 {
75 | flex-direction: column;
76 | align-items: flex-start;
77 | }
78 |
79 | @media screen and (max-width: 1024px) {
80 | .flex {
81 | flex-direction: column;
82 |
83 | .left, .right {
84 | text-align: left;
85 | padding-left: 0;
86 | padding-right: 0;
87 | }
88 |
89 | p {
90 | order: 1;
91 | margin-right: 20px;
92 | }
93 | }
94 |
95 | .example-3 {
96 | align-items: center;
97 | > div {
98 | flex-direction: column;
99 |
100 | app-code-highlight {
101 | width: 100%;
102 | }
103 | }
104 | }
105 |
106 | }
107 |
--------------------------------------------------------------------------------
/demo/angular/src/app/index/index.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { IndexComponent } from './index.component';
4 |
5 | describe('IndexComponent', () => {
6 | let component: IndexComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ IndexComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(IndexComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/index/index.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | const CODE_EXAMPLE_1 = '' +
4 | 'const users: Page = await UserApi.filter({is_active: true}).list();\n' +
5 | 'const user: User = users.first();\n' +
6 | 'await user.setPassword(\'newPassword\'):';
7 |
8 | const CODE_EXAMPLE_2 = '' +
9 | 'const specie: Specie = await SpecieApi.retrieve(1);\n' +
10 | '// Nested objects are instantiated using their serializers.\n' +
11 | 'specie.habitat.getName();';
12 |
13 | const CODE_EXAMPLE_3_1 = '' +
14 | '# models.py\n' +
15 | '# ---------\n' +
16 | 'class Pokemon(models.Model):\n' +
17 | ' identifier = models.CharField(max_length=50)\n' +
18 | ' specie = models.ForeignKey(Specie, on_delete=models.CASCADE)\n' +
19 | ' height = models.PositiveSmallIntegerField()\n' +
20 | ' weight = models.PositiveSmallIntegerField()\n' +
21 | ' base_experience = models.PositiveSmallIntegerField()\n' +
22 | ' order = models.PositiveSmallIntegerField()\n' +
23 | ' is_default = models.BooleanField()\n' +
24 | ' added_at = models.DateTimeField()\n' +
25 | '\n' +
26 | '# viewsets.py\n' +
27 | '# -----------\n' +
28 | 'class PokemonViewSet(viewsets.ModelViewSet):\n' +
29 | ' queryset = Pokemon.objects.all()\n' +
30 | ' serializer_class = PokemonSerializer\n' +
31 | '\n' +
32 | '# serializers.py\n' +
33 | '# --------------\n' +
34 | 'class PokemonSerializer(serializers.HyperlinkedModelSerializer):\n' +
35 | ' specie = SpecieSerializer()\n' +
36 | '\n' +
37 | ' class Meta:\n' +
38 | ' model = Pokemon\n' +
39 | ' exclude = ()';
40 |
41 | const CODE_EXAMPLE_3_2 = '' +
42 | '// Pokemon API\n' +
43 | 'export class Pokemon extends SerializerService {\n' +
44 | ' @Field() url: string;\n' +
45 | ' @Field() specie: Specie;\n' +
46 | ' @Field() identifier: string;\n' +
47 | ' @Field() height: number;\n' +
48 | ' @Field() weight: number;\n' +
49 | ' @Field() base_experience: number;\n' +
50 | ' @Field() order: number;\n' +
51 | ' @Field() is_default: boolean;\n' +
52 | ' @Field() id: number;\n' +
53 | '}\n' +
54 | '\n' +
55 | '@Api(Pokemon)\n' +
56 | '@Injectable({\n' +
57 | ' providedIn: \'root\'\n' +
58 | '})\n' +
59 | 'export class PokemonApi extends ApiService {\n' +
60 | '\n' +
61 | ' url = \'/api/pokemon/\';\n' +
62 | ' serializer = Pokemon;\n' +
63 | '\n' +
64 | ' constructor(injector: Injector) {\n' +
65 | ' super(injector);\n' +
66 | ' }\n' +
67 | '}\n';
68 |
69 | const CODE_EXAMPLE_4 = '' +
70 | 'Django Angular\n' +
71 | '----------------- ----------\n' +
72 | 'PokemonSerializer --> Pokemon\n' +
73 | 'PokemonViewSet --> PokemonApi\n';
74 |
75 | const CODE_EXAMPLE_5 = '' +
76 | 'const pokemons: Page = await PokemonApi.list();\n' +
77 | 'const specie: Specie = pokemons[0].specie;\n' +
78 | '// The methods in the serializer Specie are available\n' +
79 | 'specie.getName()';
80 |
81 | @Component({
82 | selector: 'app-index',
83 | templateUrl: './index.component.html',
84 | styleUrls: ['./index.component.scss']
85 | })
86 | export class IndexComponent implements OnInit {
87 |
88 | CODE_EXAMPLE_1 = CODE_EXAMPLE_1;
89 | CODE_EXAMPLE_2 = CODE_EXAMPLE_2;
90 | CODE_EXAMPLE_3_1 = CODE_EXAMPLE_3_1;
91 | CODE_EXAMPLE_3_2 = CODE_EXAMPLE_3_2;
92 | CODE_EXAMPLE_4 = CODE_EXAMPLE_4;
93 | CODE_EXAMPLE_5 = CODE_EXAMPLE_5;
94 |
95 | constructor() { }
96 |
97 | ngOnInit(): void {
98 | }
99 |
100 |
101 |
102 | }
103 |
--------------------------------------------------------------------------------
/demo/angular/src/app/index/index.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IndexComponent } from './index.component';
4 | import {RouterModule, Routes} from '@angular/router';
5 | import {SharedModule} from '../shared/shared.module';
6 | import {MatButtonModule} from '@angular/material/button';
7 | import {MatFormFieldModule} from '@angular/material/form-field';
8 | import {ReactiveFormsModule} from '@angular/forms';
9 | import { FormComponent } from './form/form.component';
10 | import {ListComponent, MaterialComponentsDialogComponent} from './list/list.component';
11 | import {AngularDjangoMaterialModule} from 'angular-django/material';
12 | import {MatDialogModule} from '@angular/material/dialog';
13 | import {MatTableModule} from '@angular/material/table';
14 | import {MatBadgeModule} from '@angular/material/badge';
15 | import {MatPaginatorModule} from '@angular/material/paginator';
16 | import {AngularDjangoModule} from 'angular-django';
17 | import {MatIconModule} from '@angular/material/icon';
18 | import {MatInputModule} from '@angular/material/input';
19 | import {MatCardModule} from '@angular/material/card';
20 |
21 | const routes: Routes = [
22 | {
23 | path : '',
24 | component: IndexComponent,
25 | },
26 | ];
27 |
28 |
29 | @NgModule({
30 | declarations: [
31 | IndexComponent,
32 | FormComponent,
33 | ListComponent,
34 | MaterialComponentsDialogComponent,
35 | ],
36 | imports: [
37 | CommonModule,
38 | SharedModule,
39 | MatButtonModule,
40 | MatFormFieldModule,
41 | ReactiveFormsModule,
42 | MatDialogModule,
43 | MatCardModule,
44 |
45 | MatTableModule,
46 | MatBadgeModule,
47 | MatPaginatorModule,
48 | MatIconModule,
49 | MatInputModule,
50 |
51 |
52 | RouterModule.forChild(routes),
53 | AngularDjangoModule,
54 | AngularDjangoMaterialModule,
55 |
56 | ]
57 | })
58 | export class IndexModule { }
59 |
--------------------------------------------------------------------------------
/demo/angular/src/app/index/list/list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Search
4 | search
6 |
7 |
8 |
10 | filter_alt
11 |
12 |
13 |
14 |
18 |
19 |
20 | {{ row.generation.identifier }}
21 |
22 |
23 |
24 |
25 | {{ row|getDisplay:'color'|async }}
26 |
27 |
28 |
29 |
49 |
--------------------------------------------------------------------------------
/demo/angular/src/app/index/list/list.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nekmo/angular-django/f79d8f40a14d8d8844ca4e88d788c0cc8442ae96/demo/angular/src/app/index/list/list.component.scss
--------------------------------------------------------------------------------
/demo/angular/src/app/index/list/list.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ListComponent } from './list.component';
4 |
5 | describe('ListComponent', () => {
6 | let component: ListComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ ListComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ListComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/installation/installation.component.html:
--------------------------------------------------------------------------------
1 | ;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ InstallationComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(InstallationComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/installation/installation.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {GithubFile} from '../github-code/github-code.component';
3 |
4 | @Component({
5 | selector: 'app-tutorial',
6 | templateUrl: './installation.component.html',
7 | styleUrls: ['./installation.component.scss']
8 | })
9 | export class InstallationComponent implements OnInit {
10 |
11 | constructor() { }
12 |
13 | ngOnInit(): void {
14 | }
15 |
16 | }
17 |
--------------------------------------------------------------------------------
/demo/angular/src/app/installation/installation.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { InstallationComponent } from './installation.component';
4 | import {HIGHLIGHT_OPTIONS, HighlightModule} from 'ngx-highlightjs';
5 | import { HighlightPlusModule } from 'ngx-highlightjs/plus';
6 | import {RouterModule, Routes} from '@angular/router';
7 | import {HttpClientModule} from '@angular/common/http';
8 | import {SharedModule} from '../shared/shared.module';
9 |
10 |
11 | const routes: Routes = [
12 | {
13 | path : '',
14 | component: InstallationComponent,
15 | },
16 | ];
17 |
18 |
19 | @NgModule({
20 | declarations: [InstallationComponent],
21 | imports: [
22 | CommonModule,
23 | // HighlightModule,
24 | HighlightPlusModule,
25 | HttpClientModule,
26 | SharedModule,
27 | RouterModule.forChild(routes),
28 | ],
29 | })
30 | export class InstallationModule { }
31 |
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/all-shape/all-shape.component.html:
--------------------------------------------------------------------------------
1 |
2 | {{ shapeNames.join(", ") }}
3 |
4 |
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/all-shape/all-shape.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nekmo/angular-django/f79d8f40a14d8d8844ca4e88d788c0cc8442ae96/demo/angular/src/app/list-api-service/all-shape/all-shape.component.scss
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/all-shape/all-shape.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AllShapeComponent } from './all-shape.component';
4 |
5 | describe('AllShapeComponent', () => {
6 | let component: AllShapeComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ AllShapeComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(AllShapeComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/all-shape/all-shape.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {Shape, ShapeApi} from '../../shared/api.service';
3 |
4 | @Component({
5 | selector: 'app-all-shape',
6 | templateUrl: './all-shape.component.html',
7 | styleUrls: ['./all-shape.component.scss']
8 | })
9 | export class AllShapeComponent implements OnInit {
10 |
11 | shapeNames: string[] = [];
12 |
13 | constructor(public shapeApi: ShapeApi) { }
14 |
15 | ngOnInit(): void {
16 | this.shapeApi.all().subscribe((shape: Shape) => {
17 | this.shapeNames.push(shape.identifier);
18 | });
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/list-api-service.component.html:
--------------------------------------------------------------------------------
1 | List api service
2 |
3 | To get a page of objects use the list method of the Api class. The objects returned by the subscriber
4 | use your model's serializer. This method can be used in conjunction with other methods like filter,
5 | page, search, and more.
6 |
7 |
8 |
10 |
11 | Working with the pages
14 |
15 | The list method returns the first page by default. The returned object is of type Page and has methods to
16 | go to the previous page and to the next page.
17 |
18 |
19 |
21 |
22 | Get all items from server
25 |
26 | The all method returns an observer to get all the items from the server. New pages are only loaded when
27 | requested using the subscriber.
28 |
29 |
30 |
32 |
33 | ;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ ListApiServiceComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ListApiServiceComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/list-api-service.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {GithubFile} from '../github-code/github-code.component';
3 |
4 | @Component({
5 | selector: 'app-list-api-service',
6 | templateUrl: './list-api-service.component.html',
7 | styleUrls: ['./list-api-service.component.scss']
8 | })
9 | export class ListApiServiceComponent implements OnInit {
10 |
11 | listPokemonFiles: GithubFile[] = [
12 | {name: 'list-pokemon.component.html', directory: 'list-api-service/list-pokemon'},
13 | {name: 'list-pokemon.component.ts', directory: 'list-api-service/list-pokemon'},
14 | {name: 'api.service.ts', directory: 'shared'},
15 | ];
16 |
17 | paginatePokemonFiles: GithubFile[] = [
18 | {name: 'paginate-pokemon.component.html', directory: 'list-api-service/paginate-pokemon'},
19 | {name: 'paginate-pokemon.component.ts', directory: 'list-api-service/paginate-pokemon'},
20 | {name: 'api.service.ts', directory: 'shared'},
21 | ];
22 |
23 | allShapeFiles: GithubFile[] = [
24 | {name: 'all-shape.component.html', directory: 'list-api-service/all-shape'},
25 | {name: 'all-shape.component.ts', directory: 'list-api-service/all-shape'},
26 | {name: 'api.service.ts', directory: 'shared'},
27 | ];
28 |
29 | constructor() {
30 | }
31 |
32 | ngOnInit(): void {
33 | }
34 |
35 | }
36 |
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/list-api-service.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { ListApiServiceComponent } from './list-api-service.component';
4 | import {RouterModule, Routes} from '@angular/router';
5 | import {SharedModule} from '../shared/shared.module';
6 | import {AngularDjangoModule} from 'angular-django';
7 | import {HttpClientModule} from '@angular/common/http';
8 | import {FormsModule} from '@angular/forms';
9 | import { ListPokemonComponent } from './list-pokemon/list-pokemon.component';
10 | import {MatCardModule} from '@angular/material/card';
11 | import { PaginatePokemonComponent } from './paginate-pokemon/paginate-pokemon.component';
12 | import { AllShapeComponent } from './all-shape/all-shape.component';
13 |
14 |
15 | const routes: Routes = [
16 | {
17 | path : '',
18 | component: ListApiServiceComponent,
19 | },
20 | ];
21 |
22 |
23 | @NgModule({
24 | declarations: [
25 | ListApiServiceComponent,
26 | ListPokemonComponent,
27 | PaginatePokemonComponent,
28 | AllShapeComponent
29 | ],
30 | imports: [
31 | CommonModule,
32 | MatCardModule,
33 | SharedModule,
34 | HttpClientModule,
35 | AngularDjangoModule,
36 | RouterModule.forChild(routes),
37 | FormsModule,
38 | ]
39 | })
40 | export class ListApiServiceModule { }
41 |
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/list-pokemon/list-pokemon.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Page {{item}}
4 |
5 |
6 | Search:
7 | {{ specie.identifier }}
10 |
11 |
Count: {{ count }}
12 |
;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ ListPokemonComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ListPokemonComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/list-pokemon/list-pokemon.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {SpecieApi} from '../../shared/api.service';
3 | import {map} from 'rxjs/operators';
4 |
5 | @Component({
6 | selector: 'app-list-pokemon',
7 | templateUrl: './list-pokemon.component.html',
8 | styleUrls: ['./list-pokemon.component.scss']
9 | })
10 | export class ListPokemonComponent implements OnInit {
11 |
12 | species: any;
13 | page = 1;
14 | search = '';
15 | count: number;
16 | pagesCount: number;
17 |
18 | constructor(public specieApi: SpecieApi) {
19 | }
20 |
21 | get pagesArray(): number[] {
22 | return Array.from(Array(this.pagesCount).keys()).map((i) => i + 1);
23 | }
24 |
25 | setSpecies(resetPage: boolean = false): void {
26 | if (resetPage) {
27 | this.page = 1;
28 | }
29 | this.species = this.specieApi.page(this.page).search(this.search).list().pipe(map((items: any) => {
30 | this.count = items.count;
31 | this.pagesCount = items.pagesCount;
32 | return items;
33 | }));
34 | }
35 |
36 | ngOnInit(): void {
37 | this.setSpecies();
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/paginate-pokemon/paginate-pokemon.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ specie.identifier }}
4 |
5 |
6 | Previous
8 | Page {{ page.currentPage }}
9 | Next
11 |
12 |
Loading species...
;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ PaginatePokemonComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(PaginatePokemonComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/list-api-service/paginate-pokemon/paginate-pokemon.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {Specie, SpecieApi} from '../../shared/api.service';
3 | import {Page} from 'angular-django';
4 | import {Observable} from 'rxjs';
5 |
6 | @Component({
7 | selector: 'app-paginate-pokemon',
8 | templateUrl: './paginate-pokemon.component.html',
9 | styleUrls: ['./paginate-pokemon.component.scss'],
10 | })
11 | export class PaginatePokemonComponent implements OnInit {
12 |
13 | speciePage$: Observable>;
14 |
15 | constructor(public specieApi: SpecieApi) { }
16 |
17 | ngOnInit(): void {
18 | this.speciePage$ = this.specieApi.list();
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/demo/angular/src/app/material-components/material-components.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Search
4 | search
6 |
7 |
8 |
10 | filter_alt
11 |
12 |
13 |
14 |
18 |
19 |
20 | {{ row.generation.identifier }}
21 |
22 |
23 |
24 |
25 | {{ row|getDisplay:'color'|async }}
26 |
27 |
28 |
29 |
49 |
--------------------------------------------------------------------------------
/demo/angular/src/app/material-components/material-components.component.scss:
--------------------------------------------------------------------------------
1 | .paginator {
2 | display: flex;
3 | flex-direction: row;
4 | background: #fff;
5 | align-items: baseline;
6 | justify-content: space-between;
7 | padding-left: 24px;
8 |
9 | .selected {
10 | color: rgba(0,0,0,.54);
11 | font-size: 12px;
12 |
13 | a {
14 | padding-left: 5px;
15 | }
16 | }
17 | }
18 |
19 |
20 | :host ::ng-deep {
21 | .filter-button {
22 | .mat-badge-content {
23 | top: -5px;
24 | right: -5px;
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/demo/angular/src/app/material-components/material-components.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { MaterialComponentsComponent } from './material-components.component';
4 |
5 | describe('MaterialComponentsComponent', () => {
6 | let component: MaterialComponentsComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ MaterialComponentsComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(MaterialComponentsComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/material-components/material-components.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { TableModule } from './table/table.module';
4 | import {AngularDjangoMaterialModule} from 'angular-django/material';
5 | import {RouterModule, Routes} from '@angular/router';
6 | import {MaterialComponentsComponent, MaterialComponentsDialogComponent} from './material-components.component';
7 | import {AngularDjangoModule} from 'angular-django';
8 | import {MatFormFieldModule} from '@angular/material/form-field';
9 | import {MatIconModule} from '@angular/material/icon';
10 | import {MatInputModule} from '@angular/material/input';
11 | import {FormsModule, ReactiveFormsModule} from '@angular/forms';
12 | import {MatPaginatorModule} from '@angular/material/paginator';
13 | import {FormlyModule} from '@ngx-formly/core';
14 | import {MatButtonModule} from '@angular/material/button';
15 | import {FormlyMaterialModule} from '@ngx-formly/material';
16 | import {MatDialogModule} from '@angular/material/dialog';
17 | import {MatBadgeModule} from '@angular/material/badge';
18 | import {AutocompleteTypeComponent} from '../shared/autocomplete-type.component';
19 |
20 |
21 | const routes: Routes = [
22 | {
23 | path : '',
24 | component: MaterialComponentsComponent,
25 | },
26 | ];
27 |
28 |
29 | @NgModule({
30 | declarations: [
31 | MaterialComponentsComponent,
32 | MaterialComponentsDialogComponent,
33 | ],
34 | imports: [
35 | CommonModule,
36 | TableModule,
37 | MatFormFieldModule,
38 | MatDialogModule,
39 | MatIconModule,
40 | MatInputModule,
41 | MatBadgeModule,
42 | MatPaginatorModule,
43 | MatButtonModule,
44 | FormlyModule.forChild({
45 | types: [
46 | {name: 'autocomplete', component: AutocompleteTypeComponent, wrappers: ['form-field']},
47 | ],
48 | }),
49 | FormlyMaterialModule,
50 | ReactiveFormsModule,
51 | FormsModule,
52 | AngularDjangoMaterialModule,
53 | RouterModule.forChild(routes),
54 | AngularDjangoModule,
55 | ]
56 | })
57 | export class MaterialComponentsModule { }
58 |
--------------------------------------------------------------------------------
/demo/angular/src/app/material-components/table/table.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 |
5 |
6 | @NgModule({
7 | declarations: [],
8 | imports: [
9 | CommonModule
10 | ]
11 | })
12 | export class TableModule { }
13 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-api-service.component.html:
--------------------------------------------------------------------------------
1 | Retrieve api service
2 |
3 | To get an object by its identifier use the retrieve method of the Api class. The object returned by the
4 | subscriber is of the serializer type of your model.
5 |
6 |
7 |
8 |
10 |
11 | Nested serializers
14 |
15 | Nested objects are also cast to the serializer serializer type. In this example the Pokemon object has a
16 | Specie object and its methods and api are available.
17 |
18 |
19 |
20 |
22 |
23 | ;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ RetrieveApiServiceComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(RetrieveApiServiceComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-api-service.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {User, UserApi} from '../shared/api.service';
3 | import {Observable} from 'rxjs';
4 | import {GithubFile} from '../github-code/github-code.component';
5 |
6 |
7 | @Component({
8 | selector: 'app-retrieve-api-service',
9 | templateUrl: './retrieve-api-service.component.html',
10 | styleUrls: ['./retrieve-api-service.component.scss']
11 | })
12 | export class RetrieveApiServiceComponent implements OnInit {
13 |
14 | retrieveUserFiles: GithubFile[] = [
15 | {name: 'retrieve-user.component.html', directory: 'retrieve-api-service/retrieve-user'},
16 | {name: 'retrieve-user.component.ts', directory: 'retrieve-api-service/retrieve-user'},
17 | {name: 'api.service.ts', directory: 'shared'},
18 | ];
19 |
20 | retrievePokemonFiles: GithubFile[] = [
21 | {name: 'retrieve-pokemon.component.html', directory: 'retrieve-api-service/retrieve-pokemon'},
22 | {name: 'retrieve-pokemon.component.ts', directory: 'retrieve-api-service/retrieve-pokemon'},
23 | {name: 'api.service.ts', directory: 'shared'},
24 | ];
25 |
26 | constructor() { }
27 |
28 | ngOnInit(): void {
29 | }
30 |
31 | }
32 |
33 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-api-service.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RetrieveApiServiceComponent } from './retrieve-api-service.component';
4 | import {SharedModule} from '../shared/shared.module';
5 | import {RouterModule, Routes} from '@angular/router';
6 | import {AngularDjangoModule} from 'angular-django';
7 | import { RetrieveUserComponent } from './retrieve-user/retrieve-user.component';
8 | import {MatCardModule} from '@angular/material/card';
9 | import { RetrievePokemonComponent } from './retrieve-pokemon/retrieve-pokemon.component';
10 |
11 |
12 | const routes: Routes = [
13 | {
14 | path : '',
15 | component: RetrieveApiServiceComponent,
16 | },
17 | ];
18 |
19 |
20 | @NgModule({
21 | declarations: [RetrieveApiServiceComponent, RetrieveUserComponent, RetrievePokemonComponent],
22 | imports: [
23 | CommonModule,
24 | SharedModule,
25 | MatCardModule,
26 | AngularDjangoModule,
27 | RouterModule.forChild(routes),
28 | ]
29 | })
30 | export class RetrieveApiServiceModule { }
31 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-pokemon/retrieve-pokemon.component.html:
--------------------------------------------------------------------------------
1 |
2 | Identifier:
3 | {{ pokemon.identifier }}
4 | Number:
5 | #{{ pokemon.id }}
6 | Habitat:
7 | {{ pokemon.specie.habitat.identifier }}
8 | Color:
9 |
10 | {{ pokemon.specie | getDisplay:'color' | async }}
11 |
12 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-pokemon/retrieve-pokemon.component.scss:
--------------------------------------------------------------------------------
1 | dd, dt {
2 | display: inline-block;
3 | }
4 |
5 | dt {
6 | font-weight: bold;
7 | width: 15%;
8 | }
9 |
10 | dd {
11 | width: 75%;
12 | margin-inline-start: 0;
13 | }
14 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-pokemon/retrieve-pokemon.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { RetrievePokemonComponent } from './retrieve-pokemon.component';
4 |
5 | describe('RetrievePokemonComponent', () => {
6 | let component: RetrievePokemonComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ RetrievePokemonComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(RetrievePokemonComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-pokemon/retrieve-pokemon.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {Observable} from 'rxjs';
3 | import {Pokemon, PokemonApi} from '../../shared/api.service';
4 |
5 | @Component({
6 | selector: 'app-retrieve-pokemon',
7 | templateUrl: './retrieve-pokemon.component.html',
8 | styleUrls: ['./retrieve-pokemon.component.scss']
9 | })
10 | export class RetrievePokemonComponent implements OnInit {
11 |
12 | pokemon$: Observable;
13 |
14 | constructor(public apiPokemon: PokemonApi) { }
15 |
16 | ngOnInit(): void {
17 | this.pokemon$ = this.apiPokemon.retrieve(1);
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-user/retrieve-user.component.html:
--------------------------------------------------------------------------------
1 |
2 | User:
3 | {{ user.getName() }}
4 | Joined at:
5 | {{ user.date_joined.toLocaleString() }}
6 | Email:
7 | {{ user.email }}
8 | Is active:
9 | {{ user.is_active }}
10 |
11 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-user/retrieve-user.component.scss:
--------------------------------------------------------------------------------
1 | dd, dt {
2 | display: inline-block;
3 | }
4 |
5 | dt {
6 | font-weight: bold;
7 | width: 15%;
8 | }
9 |
10 | dd {
11 | width: 75%;
12 | margin-inline-start: 0;
13 | }
14 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-user/retrieve-user.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { RetrieveUserComponent } from './retrieve-user.component';
4 |
5 | describe('RetrieveUserComponent', () => {
6 | let component: RetrieveUserComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ RetrieveUserComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(RetrieveUserComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/demo/angular/src/app/retrieve-api-service/retrieve-user/retrieve-user.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {Observable} from 'rxjs';
3 | import {User, UserApi} from '../../shared/api.service';
4 |
5 | @Component({
6 | selector: 'app-retrieve-user',
7 | templateUrl: './retrieve-user.component.html',
8 | styleUrls: ['./retrieve-user.component.scss']
9 | })
10 | export class RetrieveUserComponent implements OnInit {
11 |
12 | user$: Observable;
13 |
14 | constructor(public apiUser: UserApi) { }
15 |
16 | ngOnInit(): void {
17 | this.user$ = this.apiUser.retrieve(1);
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/demo/angular/src/app/shared/api.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { ApiService } from './api.service';
4 |
5 | describe('ApiService', () => {
6 | let service: ApiService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(ApiService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/demo/angular/src/app/shared/autocomplete-type.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, ViewChild, OnInit, AfterViewInit, ElementRef} from '@angular/core';
2 | import { FieldType } from '@ngx-formly/material';
3 | import { MatInput } from '@angular/material/input';
4 | import {MatAutocompleteSelectedEvent, MatAutocompleteTrigger} from '@angular/material/autocomplete';
5 | import { Observable } from 'rxjs';
6 | import { startWith, switchMap } from 'rxjs/operators';
7 | import {FormControl} from '@angular/forms';
8 |
9 | @Component({
10 | selector: 'formly-autocomplete-type',
11 | template: `
12 |
21 |
22 | {{ value.getName() }}
23 |
24 |
25 | `,
26 | })
27 | export class AutocompleteTypeComponent extends FieldType implements OnInit, AfterViewInit {
28 | @ViewChild(MatInput) formFieldControl: MatInput;
29 | @ViewChild('inputElement') inputElement: ElementRef;
30 | @ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;
31 |
32 | formControl: FormControl;
33 | filter: Observable;
34 |
35 | ngOnInit() {
36 | super.ngOnInit();
37 | this.filter = this.formControl.valueChanges
38 | .pipe(
39 | startWith(''),
40 | switchMap(term => this.to.filter(term)),
41 | );
42 | }
43 |
44 | displayName(option: { getName: () => string }): string {
45 | if (!option) {
46 | return '';
47 | }
48 | return option.getName();
49 | }
50 |
51 | closed(): void {
52 | if (typeof this.formControl.value === 'string') {
53 | // Reset invalid choice
54 | this.formControl.setValue(null);
55 | }
56 | }
57 |
58 | blur(): void {
59 | setTimeout(() => {
60 | // there is a delay between blurring and selecting the element
61 | this.closed();
62 | }, 100);
63 | }
64 |
65 | focusOut(): void {
66 | this.inputElement.nativeElement.blur();
67 | }
68 |
69 | ngAfterViewInit() {
70 | super.ngAfterViewInit();
71 | // temporary fix for https://github.com/angular/material2/issues/6728
72 | (this.autocomplete as any)._formField = this.formField;
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/demo/angular/src/app/shared/interceptor.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import {
3 | HttpInterceptor,
4 | HttpRequest,
5 | HttpErrorResponse,
6 | HttpHandler,
7 | HttpEvent,
8 | } from '@angular/common/http';
9 |
10 | import {Observable, EMPTY, throwError} from 'rxjs';
11 | import { catchError } from 'rxjs/operators';
12 | import {MatSnackBar} from '@angular/material/snack-bar';
13 |
14 |
15 | @Injectable()
16 | export class HttpErrorInterceptor implements HttpInterceptor {
17 | durationInSeconds = 5;
18 |
19 | constructor(private _snackBar: MatSnackBar) { }
20 |
21 | intercept(request: HttpRequest, next: HttpHandler): Observable {
22 |
23 | return next.handle(request).pipe(
24 | catchError((response: HttpErrorResponse) => {
25 | if (response.error instanceof Error) {
26 | // A client-side or network error occurred. Handle it accordingly.
27 | this.logError(`An error occurred: ${response.error.message}`);
28 | } else {
29 | // The backend returned an unsuccessful response code.
30 | // The response body may contain clues as to what went wrong,
31 | this.logError(`Backend returned code ${response.status}, body was: ${response.error}`);
32 | }
33 |
34 | return throwError(response);
35 | })
36 | );
37 | }
38 |
39 | logError(message): void {
40 | console.error(message);
41 | this.openSnackBar(message, 'Dismiss');
42 | }
43 |
44 | openSnackBar(message, action): void {
45 | this._snackBar.open(message, action, {
46 | duration: this.durationInSeconds * 1000,
47 | });
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/demo/angular/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
4 | import {
5 | GenerationApi,
6 | GrowthRateApi,
7 | HabitatApi,
8 | PokemonApi,
9 | RegionApi,
10 | ShapeApi,
11 | SpecieApi,
12 | UserApi
13 | } from './api.service';
14 | import {GithubCodeModule} from '../github-code/github-code.module';
15 | import {CodeHighlightModule} from '../code-highlight/code-highlight.module';
16 | import {HttpErrorInterceptor} from './interceptor';
17 | import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
18 | import {FormlyModule} from '@ngx-formly/core';
19 | import {AutocompleteTypeComponent} from './autocomplete-type.component';
20 | import {MatAutocompleteModule} from '@angular/material/autocomplete';
21 | import {FormsModule, ReactiveFormsModule} from '@angular/forms';
22 | import {MatInputModule} from '@angular/material/input';
23 | import {ExternalHtmlModule} from '../external-html/external-html.module';
24 |
25 |
26 |
27 | @NgModule({
28 | declarations: [
29 | AutocompleteTypeComponent
30 | ],
31 | providers: [
32 | RegionApi,
33 | GenerationApi,
34 | HabitatApi,
35 | ShapeApi,
36 | GrowthRateApi,
37 | SpecieApi,
38 | PokemonApi,
39 | UserApi,
40 | {
41 | provide: HTTP_INTERCEPTORS,
42 | useClass: HttpErrorInterceptor,
43 | multi: true,
44 | deps: [MatSnackBar]
45 | }
46 | ],
47 | imports: [
48 | FormsModule,
49 | FormlyModule.forChild({
50 | types: [
51 | {name: 'autocomplete', component: AutocompleteTypeComponent, wrappers: ['form-field']},
52 | ],
53 | }),
54 | ReactiveFormsModule,
55 | FormlyModule,
56 | CommonModule,
57 | HttpClientModule,
58 | GithubCodeModule,
59 | ExternalHtmlModule,
60 | CodeHighlightModule,
61 | MatInputModule,
62 | MatAutocompleteModule,
63 | MatSnackBarModule,
64 | ],
65 | exports: [
66 | FormlyModule,
67 | FormsModule,
68 | ReactiveFormsModule,
69 | MatInputModule,
70 | AutocompleteTypeComponent,
71 | HttpClientModule,
72 | GithubCodeModule,
73 | ExternalHtmlModule,
74 | CodeHighlightModule,
75 | ]
76 | })
77 | export class SharedModule { }
78 |
--------------------------------------------------------------------------------
/demo/angular/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nekmo/angular-django/f79d8f40a14d8d8844ca4e88d788c0cc8442ae96/demo/angular/src/assets/.gitkeep
--------------------------------------------------------------------------------
/demo/angular/src/assets/angular_django.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
45 |
65 | AngularDemo
6 | (id: string): T;
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 |
--------------------------------------------------------------------------------
/demo/angular/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts",
10 | "src/polyfills.ts"
11 | ],
12 | "include": [
13 | "src/**/*.d.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/demo/angular/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "sourceMap": true,
8 | "declaration": false,
9 | "downlevelIteration": true,
10 | "experimentalDecorators": true,
11 | "moduleResolution": "node",
12 | "importHelpers": true,
13 | "target": "es2015",
14 | "emitDecoratorMetadata": true,
15 | "module": "es2020",
16 | "lib": [
17 | "es2018",
18 | "dom"
19 | ]
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/demo/angular/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/demo/django/demo/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nekmo/angular-django/f79d8f40a14d8d8844ca4e88d788c0cc8442ae96/demo/django/demo/__init__.py
--------------------------------------------------------------------------------
/demo/django/demo/asgi.py:
--------------------------------------------------------------------------------
1 | """
2 | ASGI config for demo project.
3 |
4 | It exposes the ASGI callable as a module-level variable named ``application``.
5 |
6 | For more information on this file, see
7 | https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/
8 | """
9 |
10 | import os
11 |
12 | from django.core.asgi import get_asgi_application
13 |
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'demo.settings')
15 |
16 | application = get_asgi_application()
17 |
--------------------------------------------------------------------------------
/demo/django/demo/urls.py:
--------------------------------------------------------------------------------
1 | """demo URL Configuration
2 |
3 | The `urlpatterns` list routes URLs to views. For more information please see:
4 | https://docs.djangoproject.com/en/3.1/topics/http/urls/
5 | Examples:
6 | Function views
7 | 1. Add an import: from my_app import views
8 | 2. Add a URL to urlpatterns: path('', views.home, name='home')
9 | Class-based views
10 | 1. Add an import: from other_app.views import Home
11 | 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
12 | Including another URLconf
13 | 1. Import the include() function: from django.urls import include, path
14 | 2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
15 | """
16 | from django.contrib import admin
17 | from django.urls import path, include
18 |
19 | urlpatterns = [
20 | path('admin/', admin.site.urls),
21 | path(r'', include('pokedex.urls')),
22 | ]
23 |
--------------------------------------------------------------------------------
/demo/django/demo/wsgi.py:
--------------------------------------------------------------------------------
1 | """
2 | WSGI config for demo project.
3 |
4 | It exposes the WSGI callable as a module-level variable named ``application``.
5 |
6 | For more information on this file, see
7 | https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/
8 | """
9 |
10 | import os
11 |
12 | from django.core.wsgi import get_wsgi_application
13 |
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'demo.settings')
15 |
16 | application = get_wsgi_application()
17 |
--------------------------------------------------------------------------------
/demo/django/dev-requirements.in:
--------------------------------------------------------------------------------
1 | requests
2 | djangorestframework
3 | drf-writable-nested
4 | Django
5 | django-filter
6 |
--------------------------------------------------------------------------------
/demo/django/dev-requirements.txt:
--------------------------------------------------------------------------------
1 | #
2 | # This file is autogenerated by pip-compile
3 | # To update, run:
4 | #
5 | # pip-compile dev-requirements.in
6 | #
7 | asgiref==3.2.10 # via django
8 | certifi==2020.6.20 # via requests
9 | chardet==3.0.4 # via requests
10 | django-filter==2.3.0 # via -r dev-requirements.in
11 | django==3.1.1 # via -r dev-requirements.in, django-filter, djangorestframework
12 | djangorestframework==3.11.1 # via -r dev-requirements.in
13 | drf-writable-nested==0.6.1 # via -r dev-requirements.in
14 | idna==2.10 # via requests
15 | pytz==2020.1 # via django
16 | requests==2.24.0 # via -r dev-requirements.in
17 | sqlparse==0.3.1 # via django
18 | urllib3==1.25.10 # via requests
19 |
--------------------------------------------------------------------------------
/demo/django/manage.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | """Django's command-line utility for administrative tasks."""
3 | import os
4 | import sys
5 |
6 |
7 | def main():
8 | """Run administrative tasks."""
9 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'demo.settings')
10 | try:
11 | from django.core.management import execute_from_command_line
12 | except ImportError as exc:
13 | raise ImportError(
14 | "Couldn't import Django. Are you sure it's installed and "
15 | "available on your PYTHONPATH environment variable? Did you "
16 | "forget to activate a virtual environment?"
17 | ) from exc
18 | execute_from_command_line(sys.argv)
19 |
20 |
21 | if __name__ == '__main__':
22 | main()
23 |
--------------------------------------------------------------------------------
/demo/django/pokedex/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nekmo/angular-django/f79d8f40a14d8d8844ca4e88d788c0cc8442ae96/demo/django/pokedex/__init__.py
--------------------------------------------------------------------------------
/demo/django/pokedex/admin.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 |
3 | # Register your models here.
4 | from pokedex.models import Specie
5 |
6 |
7 | @admin.register(Specie)
8 | class SpecieAdmin(admin.ModelAdmin):
9 | pass
10 |
--------------------------------------------------------------------------------
/demo/django/pokedex/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 |
3 |
4 | class PokedexConfig(AppConfig):
5 | name = 'pokedex'
6 |
--------------------------------------------------------------------------------
/demo/django/pokedex/filters.py:
--------------------------------------------------------------------------------
1 | import django_filters
2 |
3 | from pokedex.models import Pokemon, Specie
4 |
5 |
6 | class PokemonFilter(django_filters.FilterSet):
7 | specie__identifier = django_filters.CharFilter(lookup_expr='icontains')
8 |
9 |
10 | class Meta:
11 | model = Pokemon
12 | fields = {
13 | 'id': ['exact'],
14 | 'identifier': ['exact'],
15 | 'specie__identifier': ['exact'],
16 | 'specie__generation': ['exact'],
17 | 'specie': ['exact'],
18 | 'height': ['exact'],
19 | 'weight': ['exact'],
20 | 'base_experience': ['exact'],
21 | 'is_default': ['exact']
22 | }
23 |
24 |
25 | class SpecieFilter(django_filters.FilterSet):
26 |
27 |
28 | class Meta:
29 | model = Specie
30 | fields = {
31 | 'identifier': ['exact'],
32 | 'generation': ['exact'],
33 | 'evolves_from_specie': ['exact'],
34 | 'color': ['exact'],
35 | 'shape': ['exact'],
36 | 'habitat': ['exact'],
37 | 'gender_rate': ['exact'],
38 | 'capture_rate': ['exact'],
39 | 'base_happiness': ['exact'],
40 | 'is_baby': ['exact'],
41 | 'hatch_counter': ['exact'],
42 | 'has_gender_differences': ['exact'],
43 | 'growth_rate': ['exact'],
44 | 'forms_switchable': ['exact'],
45 | 'conquest_order': ['exact']
46 | }
47 |
--------------------------------------------------------------------------------
/demo/django/pokedex/import_pokedex.py:
--------------------------------------------------------------------------------
1 | import csv
2 |
3 | import requests
4 | from django.db.transaction import atomic
5 | from django.db.models import fields
6 | from django.db.models.fields import related
7 |
8 | from . import models
9 |
10 |
11 | URL = 'https://raw.githubusercontent.com/veekun/pokedex/master/pokedex/data/csv/{file}.csv'
12 | FIELD_VALUES = {
13 | fields.BooleanField: lambda x: {'1': True, '0': False}[x],
14 | fields.IntegerField: lambda x: int(x) if x else None,
15 | fields.PositiveSmallIntegerField: lambda x: int(x) if x else None,
16 | fields.SmallIntegerField: lambda x: int(x) if x else None,
17 | fields.PositiveIntegerField: lambda x: int(x) if x else None,
18 | related.ForeignKey: lambda x: int(x) if x else None,
19 | None: lambda x: x,
20 | }
21 | FIELD_KEYS = {
22 | related.ForeignKey: lambda x: '{}_id'.format(x.name),
23 | None: lambda x: x.name,
24 | }
25 |
26 |
27 | def retrieve_data(file):
28 | r = requests.get(URL.format(file=file))
29 | return csv.DictReader(r.text.split('\n'), delimiter=',')
30 |
31 |
32 | def get_key(field, import_opts):
33 | fields_map = getattr(import_opts, 'fields_map', {})
34 | if field.name in fields_map:
35 | return fields_map[field.name]
36 | return FIELD_KEYS.get(field.__class__, FIELD_KEYS[None])(field)
37 |
38 |
39 | def get_value(field):
40 | return FIELD_VALUES.get(field.__class__, FIELD_VALUES[None])
41 |
42 |
43 | def get_fields(model, import_opts):
44 | fields = model._meta.get_fields()
45 | return {get_key(field, import_opts): (field, get_value(field)) for field in fields}
46 |
47 |
48 | def import_model(model):
49 | import_opts = model.Import
50 | data = retrieve_data(import_opts.file)
51 | fields = get_fields(model, import_opts)
52 | for row in data:
53 | # get_key(model_field[key], import_opts)
54 | row = {'{}{}'.format(fields[key][0].name, '_id' if isinstance(fields[key][0], related.ForeignKey) else ''):
55 | fields[key][1](value) for key, value in row.items() if key in
56 | fields}
57 | # print(row)
58 | model.objects.get_or_create(defaults=row, id=row['id'])
59 |
60 |
61 | def import_all():
62 | with atomic():
63 | for model in filter(lambda x: hasattr(x, 'Import'), vars(models).values()):
64 | import_model(model)
65 |
--------------------------------------------------------------------------------
/demo/django/pokedex/management/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nekmo/angular-django/f79d8f40a14d8d8844ca4e88d788c0cc8442ae96/demo/django/pokedex/management/__init__.py
--------------------------------------------------------------------------------
/demo/django/pokedex/management/commands/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nekmo/angular-django/f79d8f40a14d8d8844ca4e88d788c0cc8442ae96/demo/django/pokedex/management/commands/__init__.py
--------------------------------------------------------------------------------
/demo/django/pokedex/management/commands/import_pokedex.py:
--------------------------------------------------------------------------------
1 | """Import Pokedex data.
2 | """
3 | from django.core.management.base import BaseCommand, CommandError
4 | from pokedex.import_pokedex import import_all
5 |
6 | class Command(BaseCommand):
7 | help = globals()['__doc__']
8 |
9 | def handle(self, *args, **options):
10 | import_all()
11 |
--------------------------------------------------------------------------------
/demo/django/pokedex/migrations/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nekmo/angular-django/f79d8f40a14d8d8844ca4e88d788c0cc8442ae96/demo/django/pokedex/migrations/__init__.py
--------------------------------------------------------------------------------
/demo/django/pokedex/models.py:
--------------------------------------------------------------------------------
1 | from django.db import models
2 | from django.utils.translation import ugettext_lazy as _
3 |
4 | # Create your models here.
5 |
6 |
7 | # class Color(models.Model):
8 | # identifier = models.CharField(max_length=20)
9 | #
10 | # class Import:
11 | # file = 'pokemon_colors'
12 |
13 |
14 | COLORS = [
15 | ('1', 'black'),
16 | ('2', 'blue'),
17 | ('3', 'brown'),
18 | ('4', 'gray'),
19 | ('5', 'green'),
20 | ('6', 'pink'),
21 | ('7', 'purple'),
22 | ('8', 'red'),
23 | ('9', 'white'),
24 | ('10', 'yellow'),
25 |
26 | ]
27 |
28 |
29 | class Shape(models.Model):
30 | identifier = models.CharField(max_length=20)
31 |
32 | class Import:
33 | file = 'pokemon_shapes'
34 |
35 |
36 | class Habitat(models.Model):
37 | identifier = models.CharField(max_length=20)
38 |
39 | class Import:
40 | file = 'pokemon_habitats'
41 |
42 |
43 | class GrowthRate(models.Model):
44 | identifier = models.CharField(max_length=20)
45 | formula = models.TextField()
46 |
47 | class Import:
48 | file = 'growth_rates'
49 |
50 |
51 | class Region(models.Model):
52 | identifier = models.CharField(max_length=30)
53 |
54 | class Import:
55 | file = 'regions'
56 |
57 |
58 | class Generation(models.Model):
59 | main_region = models.ForeignKey(Region, on_delete=models.PROTECT)
60 | identifier = models.CharField(max_length=30)
61 |
62 | class Import:
63 | file = 'generations'
64 |
65 |
66 | class Specie(models.Model):
67 | identifier = models.CharField(_('Specie identifier'), max_length=50)
68 | generation = models.ForeignKey(Generation, on_delete=models.PROTECT)
69 | evolves_from_specie = models.ForeignKey('self', on_delete=models.CASCADE, blank=True, null=True)
70 | # evolution_chain =
71 | color = models.CharField(max_length=8, choices=COLORS)
72 | shape = models.ForeignKey(Shape, on_delete=models.PROTECT, blank=True, null=True)
73 | habitat = models.ForeignKey(Habitat, on_delete=models.PROTECT, blank=True, null=True)
74 | gender_rate = models.SmallIntegerField()
75 | capture_rate = models.PositiveSmallIntegerField()
76 | base_happiness = models.PositiveSmallIntegerField()
77 | is_baby = models.BooleanField()
78 | hatch_counter = models.PositiveSmallIntegerField()
79 | has_gender_differences = models.BooleanField()
80 | growth_rate = models.ForeignKey(GrowthRate, on_delete=models.PROTECT)
81 | forms_switchable = models.BooleanField()
82 | order = models.PositiveSmallIntegerField()
83 | conquest_order = models.PositiveSmallIntegerField(null=True, blank=True)
84 |
85 | class Import:
86 | file = 'pokemon_species'
87 | fields_map = {'color': 'color_id'}
88 |
89 |
90 | class Pokemon(models.Model):
91 | identifier = models.CharField(max_length=50, help_text=_('Pokemon name'))
92 | specie = models.ForeignKey(Specie, on_delete=models.CASCADE)
93 | height = models.PositiveSmallIntegerField()
94 | weight = models.PositiveSmallIntegerField()
95 | base_experience = models.PositiveSmallIntegerField()
96 | order = models.PositiveSmallIntegerField()
97 | is_default = models.BooleanField()
98 |
99 | class Import:
100 | file = 'pokemon'
101 | fields_map = {'specie': 'species_id'}
102 |
--------------------------------------------------------------------------------
/demo/django/pokedex/serializers.py:
--------------------------------------------------------------------------------
1 | from django.contrib.auth import get_user_model
2 | from drf_writable_nested import NestedUpdateMixin, NestedCreateMixin
3 | from rest_framework import serializers
4 |
5 | from pokedex.models import Pokemon, Specie, Generation, Habitat, Shape, GrowthRate, Region
6 |
7 |
8 | class DemoSerializerMixin(object):
9 | def get_field_names(self, declared_fields, info):
10 | expanded_fields = super(DemoSerializerMixin, self).get_field_names(declared_fields, info)
11 |
12 | if getattr(self.Meta, 'extra_fields', None):
13 | fields = expanded_fields + self.Meta.extra_fields
14 | else:
15 | fields = expanded_fields
16 | if 'id' not in fields:
17 | fields += ['id']
18 | return fields
19 |
20 |
21 | class RegionSerializer(DemoSerializerMixin, NestedCreateMixin, NestedUpdateMixin,
22 | serializers.HyperlinkedModelSerializer):
23 | class Meta:
24 | model = Region
25 | exclude = ()
26 |
27 |
28 | class GenerationSerializer(DemoSerializerMixin, NestedCreateMixin, NestedUpdateMixin,
29 | serializers.HyperlinkedModelSerializer):
30 | class Meta:
31 | model = Generation
32 | exclude = ()
33 |
34 |
35 | class HabitatSerializer(DemoSerializerMixin, NestedCreateMixin, NestedUpdateMixin,
36 | serializers.HyperlinkedModelSerializer):
37 | class Meta:
38 | model = Habitat
39 | exclude = ()
40 |
41 |
42 | class ShapeSerializer(DemoSerializerMixin, NestedCreateMixin, NestedUpdateMixin,
43 | serializers.HyperlinkedModelSerializer):
44 | class Meta:
45 | model = Shape
46 | exclude = ()
47 |
48 |
49 | class GrowthRateSerializer(DemoSerializerMixin, NestedCreateMixin, NestedUpdateMixin,
50 | serializers.HyperlinkedModelSerializer):
51 | class Meta:
52 | model = GrowthRate
53 | exclude = ()
54 |
55 |
56 | class SpecieSerializer(DemoSerializerMixin, NestedCreateMixin, NestedUpdateMixin,
57 | serializers.HyperlinkedModelSerializer):
58 | growth_rate = GrowthRateSerializer()
59 | shape = ShapeSerializer()
60 | habitat = HabitatSerializer()
61 | generation = GenerationSerializer()
62 | # evolves_from_specie = SpecieSerializer()
63 |
64 | class Meta:
65 | model = Specie
66 | exclude = ()
67 |
68 |
69 | class PokemonSerializer(DemoSerializerMixin, NestedCreateMixin, NestedUpdateMixin,
70 | serializers.HyperlinkedModelSerializer):
71 | specie = SpecieSerializer()
72 |
73 | class Meta:
74 | model = Pokemon
75 | exclude = ()
76 |
77 |
78 | class SimpleUserSerializer(serializers.HyperlinkedModelSerializer):
79 |
80 | class Meta:
81 | model = get_user_model()
82 | fields = ('url', 'id', 'username', 'email', 'is_active', 'date_joined')
83 |
84 |
85 | class UserSerializer(SimpleUserSerializer):
86 | pass
87 |
--------------------------------------------------------------------------------
/demo/django/pokedex/tests.py:
--------------------------------------------------------------------------------
1 | from django.test import TestCase
2 |
3 | # Create your tests here.
4 |
--------------------------------------------------------------------------------
/demo/django/pokedex/urls.py:
--------------------------------------------------------------------------------
1 | from django.conf.urls import include, url
2 | from rest_framework.routers import DefaultRouter
3 |
4 |
5 | # Create a router and register our viewsets with it.
6 | from pokedex import viewsets
7 |
8 |
9 | router = DefaultRouter()
10 | router.register(r'pokemon', viewsets.PokemonViewSet)
11 | router.register(r'species', viewsets.SpecieViewSet)
12 | router.register(r'growth_rates', viewsets.GrowthRateViewSet)
13 | router.register(r'shapes', viewsets.ShapeViewSet)
14 | router.register(r'habitats', viewsets.HabitatViewSet)
15 | router.register(r'generations', viewsets.GenerationViewSet)
16 | router.register(r'regions', viewsets.RegionViewSet)
17 | router.register(r'users', viewsets.UserViewSet)
18 |
19 | # The API URLs are now determined automatically by the router.
20 | # Additionally, we include the login URLs for the browsable API.
21 | urlpatterns = [
22 | url(r'^api/', include(router.urls))
23 | ]
24 |
--------------------------------------------------------------------------------
/demo/django/requirements.in:
--------------------------------------------------------------------------------
1 | Django
2 | django-rest-framework
3 | django-filter
4 | drf-writable-nested
5 | gunicorn
6 | requests
7 |
--------------------------------------------------------------------------------
/demo/django/requirements.txt:
--------------------------------------------------------------------------------
1 | #
2 | # This file is autogenerated by pip-compile
3 | # To update, run:
4 | #
5 | # pip-compile requirements.in
6 | #
7 | asgiref==3.2.10 # via django
8 | certifi==2020.6.20 # via requests
9 | chardet==3.0.4 # via requests
10 | django-filter==2.4.0 # via -r requirements.in
11 | django-rest-framework==0.1.0 # via -r requirements.in
12 | django==3.1.1 # via -r requirements.in, django-filter, djangorestframework
13 | djangorestframework==3.11.1 # via django-rest-framework
14 | drf-writable-nested==0.6.1 # via -r requirements.in
15 | gunicorn==20.0.4 # via -r requirements.in
16 | idna==2.10 # via requests
17 | pytz==2020.1 # via django
18 | requests==2.24.0 # via -r requirements.in
19 | sqlparse==0.3.1 # via django
20 | urllib3==1.25.10 # via requests
21 |
22 | # The following packages are considered to be unsafe in a requirements file:
23 | # setuptools
24 |
--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.6'
2 | services:
3 |
4 | nginx:
5 | restart: always
6 | build:
7 | context: .
8 | dockerfile: ./Dockerfile
9 | target: nginx-build
10 | volumes:
11 | - ./conf/nginx/conf.d:/etc/nginx/conf.d:ro
12 | - ./data/nginx/log/:/var/log/nginx/
13 | ports:
14 | - "${ANGULAR_DJANGO_HTTP_PORT:-80:80}"
15 |
16 | angular:
17 | build:
18 | context: .
19 | dockerfile: ./Dockerfile
20 | target: angular-demo-build
21 |
22 | gunicorn:
23 | restart: always
24 | logging:
25 | driver: "json-file"
26 | options:
27 | max-file: "5"
28 | max-size: "10m"
29 | build:
30 | context: .
31 | dockerfile: ./Dockerfile
32 | target: gunicorn-build
33 | environment:
34 | DATA_DIRECTORY: /data
35 | volumes:
36 | - ./data/gunicorn/:/data/
37 |
38 |
--------------------------------------------------------------------------------
/docs/Makefile:
--------------------------------------------------------------------------------
1 | # Minimal makefile for Sphinx documentation
2 | #
3 |
4 | # You can set these variables from the command line, and also
5 | # from the environment for the first two.
6 | SPHINXOPTS ?=
7 | SPHINXBUILD ?= sphinx-build
8 | SOURCEDIR = .
9 | BUILDDIR = _build
10 |
11 | # Put it first so that "make" without argument is like "make help".
12 | help:
13 | @$(SPHINXBUILD) -M help "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
14 |
15 | docs:
16 | python build_docs.py
17 |
18 | .PHONY: help Makefile
19 |
20 | # Catch-all target: route all unknown targets to Sphinx using the new
21 | # "make mode" option. $(O) is meant as a shortcut for $(SPHINXOPTS).
22 | %: Makefile
23 | @$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
24 |
--------------------------------------------------------------------------------
/docs/build_docs.py:
--------------------------------------------------------------------------------
1 | import os
2 | import subprocess
3 | from pathlib import Path
4 | from bs4 import BeautifulSoup
5 |
6 |
7 | INPUT_DOCS_DIRECTORY = '_build/htmlhelp/'
8 | OUTPUT_DOCS_DIRECTORY_DEFAULT = '../demo/angular/src/assets/docs/'
9 | OUTPUT_DOCS_DIRECTORY = Path(os.environ.get('OUTPUT_DOCS_DIRECTORY') or OUTPUT_DOCS_DIRECTORY_DEFAULT)
10 |
11 |
12 | os.makedirs(OUTPUT_DOCS_DIRECTORY, exist_ok=True)
13 |
14 |
15 | def only_body(fp):
16 | soup = BeautifulSoup(fp, 'html.parser')
17 | el = soup.select_one('div.body')
18 | return str(el)
19 |
20 |
21 | def main():
22 | subprocess.run("make htmlhelp", shell=True, check=True)
23 | for file in Path(INPUT_DOCS_DIRECTORY).glob('*.html'):
24 | with open(str(file), 'rb') as fp:
25 | html = only_body(fp)
26 | with open(OUTPUT_DOCS_DIRECTORY / file.name, 'w') as f:
27 | f.write(html)
28 |
29 |
30 | if __name__ == '__main__':
31 | main()
32 |
--------------------------------------------------------------------------------
/docs/conf.py:
--------------------------------------------------------------------------------
1 | # Configuration file for the Sphinx documentation builder.
2 | #
3 | # This file only contains a selection of the most common options. For a full
4 | # list see the documentation:
5 | # https://www.sphinx-doc.org/en/master/usage/configuration.html
6 |
7 | # -- Path setup --------------------------------------------------------------
8 |
9 | # If extensions (or modules to document with autodoc) are in another directory,
10 | # add these directories to sys.path here. If the directory is relative to the
11 | # documentation root, use os.path.abspath to make it absolute, like shown here.
12 | #
13 | # import os
14 | # import sys
15 | # sys.path.insert(0, os.path.abspath('.'))
16 |
17 |
18 | # -- Project information -----------------------------------------------------
19 |
20 | project = 'angular-django'
21 | copyright = '2021, Nekmo'
22 | author = 'Nekmo'
23 |
24 |
25 | # -- General configuration ---------------------------------------------------
26 |
27 | # Add any Sphinx extension module names here, as strings. They can be
28 | # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
29 | # ones.
30 | extensions = [
31 | ]
32 |
33 | # Add any paths that contain templates here, relative to this directory.
34 | templates_path = ['_templates']
35 |
36 | # List of patterns, relative to source directory, that match files and
37 | # directories to ignore when looking for source files.
38 | # This pattern also affects html_static_path and html_extra_path.
39 | exclude_patterns = ['_build', 'Thumbs.db', '.DS_Store']
40 |
41 |
42 | # -- Options for HTML output -------------------------------------------------
43 |
44 | # The theme to use for HTML and HTML Help pages. See the documentation for
45 | # a list of builtin themes.
46 | #
47 | html_theme = 'alabaster'
48 |
49 | # Add any paths that contain custom static files (such as style sheets) here,
50 | # relative to this directory. They are copied after the builtin static files,
51 | # so a file named "default.css" will overwrite the builtin "default.css".
52 | html_static_path = ['_static']
--------------------------------------------------------------------------------
/docs/first_steps.rst:
--------------------------------------------------------------------------------
1 | First steps
2 | ===========
3 | Angular-django generates the classes for angular from your Django Rest Framework viewsets and serializers.
4 | 2 types of classes are generated:
5 |
6 | * The ``ApiService`` classes are created from the **viewsets**. It has the api actions. For example *list, retrieve,
7 | etc.*
8 | * The ``SerializerService`` classes are created from the **serializers**. It has the properties of the objects
9 | returned by the api.
10 |
11 | For example from this model, viewset and serializer:
12 |
13 | .. code-block:: python
14 |
15 | # models.py
16 | # ---------
17 |
18 | class Pokemon(models.Model):
19 | identifier = models.CharField(max_length=50, help_text=_("Pokemon name"))
20 | specie = models.ForeignKey(Specie, on_delete=models.CASCADE)
21 | height = models.PositiveSmallIntegerField()
22 | weight = models.PositiveSmallIntegerField()
23 | base_experience = models.PositiveSmallIntegerField()
24 | order = models.PositiveSmallIntegerField()
25 | is_default = models.BooleanField()
26 | added_at = models.DateTimeField()
27 |
28 | # viewsets.py
29 | # -----------
30 |
31 | class PokemonViewSet(viewsets.ModelViewSet):
32 | queryset = Pokemon.objects.all()
33 | serializer_class = PokemonSerializer
34 |
35 | # serializers.py
36 | # --------------
37 |
38 | class PokemonSerializer(serializers.HyperlinkedModelSerializer):
39 | specie = SpecieSerializer()
40 |
41 | class Meta:
42 | model = Pokemon
43 | exclude = ()
44 |
45 | Using the ``manage.py angular_classes`` command these classes are generated:
46 |
47 | .. code-block:: typescript
48 |
49 | ///////////////////////////////////////
50 | // Pokemon API
51 | ///////////////////////////////////////
52 | export class Pokemon extends SerializerService {
53 | @Field() url: string;
54 | @Field() specie: Specie;
55 | @Field() identifier: string;
56 | @Field() height: number;
57 | @Field() weight: number;
58 | @Field() base_experience: number;
59 | @Field() order: number;
60 | @Field() is_default: boolean;
61 | @Field() added_at: Date;
62 | @Field() id: number;
63 | }
64 |
65 | @Injectable({
66 | providedIn: 'root'
67 | })
68 | export class PokemonApi extends ApiService {
69 |
70 | url = '/api/pokemon/';
71 | serializer = Pokemon;
72 | contentType = 'pokedex_pokemon';
73 |
74 | constructor(injector: Injector) {
75 | super(injector);
76 | }
77 | }
78 |
79 | Whenever you want to rebuild the classes for Angular run again from the console:
80 |
81 | .. code-block:: shell
82 |
83 | $ python setup.py angular_classes
84 |
85 | Paste the terminal output to a file in your Angular project. For example ``api.service.ts``. Angular-django doesn't
86 | update your existing classes. Edit your classes with the new changes from the terminal output.
87 |
88 | Now you can use the ``PokemonApi`` class to get interact with your Django Rest Framework api:
89 |
90 |
91 | .. code-block:: typescript
92 |
93 | PokemonApi.retrieve(123).subscribe(obj: Pokemon => { // Get pokemon with id 123
94 | obj.added_at.toLocaleString(); // added_at is returned as Date
95 | obj.specie.methodInCls(); // specie is returned as Specie and its methods are available
96 | });
97 |
98 |
--------------------------------------------------------------------------------
/docs/index.rst:
--------------------------------------------------------------------------------
1 | .. angular-django documentation master file, created by
2 | sphinx-quickstart on Tue Aug 17 01:03:42 2021.
3 | You can adapt this file completely to your liking, but it should at least
4 | contain the root `toctree` directive.
5 |
6 | Welcome to angular-django's documentation!
7 | ==========================================
8 |
9 | .. toctree::
10 | :maxdepth: 2
11 | :caption: Contents:
12 |
13 | installation
14 | first_steps
15 | api_guide
16 |
17 |
18 | Indices and tables
19 | ==================
20 |
21 | * :ref:`genindex`
22 | * :ref:`modindex`
23 | * :ref:`search`
24 |
--------------------------------------------------------------------------------
/docs/installation.rst:
--------------------------------------------------------------------------------
1 | Installation
2 | ============
3 |
4 | **Angular-django** consists of two packages: a package for Angular and an optional package for Django. To install the
5 | **Angular package**.
6 |
7 | .. code-block:: shell
8 |
9 | $ npm i angular-django
10 |
11 | Import ``AngularDjangoModule`` and ``HttpClientModule`` in your app:
12 |
13 | .. code-block:: typescript
14 |
15 | import { AngularDjangoModule } from 'angular-django';
16 | import { HttpClientModule } from '@angular/common/http';
17 |
18 |
19 | @NgModule({
20 | imports: [
21 | AngularDjangoModule,
22 | HttpClientModule,
23 | ],
24 | })
25 | export class AppModule { }
26 |
27 | Enable ``emitDecoratorMetadata`` in the ``compilerOptions`` section of your ``tsconfig.json``:
28 |
29 | .. code-block:: json
30 |
31 | {
32 | "compilerOptions": {
33 | "emitDecoratorMetadata": true
34 | }
35 | }
36 |
37 | Install the **Django package** in your project:
38 |
39 | .. code-block:: shell
40 |
41 | $ pip install -U angular-django
42 |
43 | Add the app in the ``INSTALLED_APPS`` list in your ``settings.py`` file:
44 |
45 | .. code-block:: python
46 |
47 | INSTALLED_APPS = [
48 | # ...
49 | 'rest_framework',
50 | 'angular_django',
51 | ]
52 |
--------------------------------------------------------------------------------
/docs/make.bat:
--------------------------------------------------------------------------------
1 | @ECHO OFF
2 |
3 | pushd %~dp0
4 |
5 | REM Command file for Sphinx documentation
6 |
7 | if "%SPHINXBUILD%" == "" (
8 | set SPHINXBUILD=sphinx-build
9 | )
10 | set SOURCEDIR=.
11 | set BUILDDIR=_build
12 |
13 | if "%1" == "" goto help
14 |
15 | %SPHINXBUILD% >NUL 2>NUL
16 | if errorlevel 9009 (
17 | echo.
18 | echo.The 'sphinx-build' command was not found. Make sure you have Sphinx
19 | echo.installed, then set the SPHINXBUILD environment variable to point
20 | echo.to the full path of the 'sphinx-build' executable. Alternatively you
21 | echo.may add the Sphinx directory to PATH.
22 | echo.
23 | echo.If you don't have Sphinx installed, grab it from
24 | echo.http://sphinx-doc.org/
25 | exit /b 1
26 | )
27 |
28 | %SPHINXBUILD% -M %1 %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O%
29 | goto end
30 |
31 | :help
32 | %SPHINXBUILD% -M help %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O%
33 |
34 | :end
35 | popd
36 |
--------------------------------------------------------------------------------
/docs/requirements.in:
--------------------------------------------------------------------------------
1 | beautifulsoup4
2 | Sphinx
3 |
--------------------------------------------------------------------------------
/docs/requirements.txt:
--------------------------------------------------------------------------------
1 | #
2 | # This file is autogenerated by pip-compile
3 | # To update, run:
4 | #
5 | # pip-compile
6 | #
7 | alabaster==0.7.12 # via sphinx
8 | babel==2.9.1 # via sphinx
9 | beautifulsoup4==4.9.3 # via -r requirements.in
10 | certifi==2021.5.30 # via requests
11 | charset-normalizer==2.0.4 # via requests
12 | docutils==0.17.1 # via sphinx
13 | idna==3.2 # via requests
14 | imagesize==1.2.0 # via sphinx
15 | jinja2==3.0.1 # via sphinx
16 | markupsafe==2.0.1 # via jinja2
17 | packaging==21.0 # via sphinx
18 | pygments==2.10.0 # via sphinx
19 | pyparsing==2.4.7 # via packaging
20 | pytz==2021.1 # via babel
21 | requests==2.26.0 # via sphinx
22 | snowballstemmer==2.1.0 # via sphinx
23 | soupsieve==2.2.1 # via beautifulsoup4
24 | sphinx==4.1.2 # via -r requirements.in
25 | sphinxcontrib-applehelp==1.0.2 # via sphinx
26 | sphinxcontrib-devhelp==1.0.2 # via sphinx
27 | sphinxcontrib-htmlhelp==2.0.0 # via sphinx
28 | sphinxcontrib-jsmath==1.0.1 # via sphinx
29 | sphinxcontrib-qthelp==1.0.3 # via sphinx
30 | sphinxcontrib-serializinghtml==1.1.5 # via sphinx
31 | urllib3==1.26.6 # via requests
32 |
33 | # The following packages are considered to be unsafe in a requirements file:
34 | # setuptools
35 |
--------------------------------------------------------------------------------
/pypi_readme.rst:
--------------------------------------------------------------------------------
1 | ##############
2 | angular-django
3 | ##############
4 |
5 |
6 | .. image:: https://img.shields.io/travis/Nekmo/angular-django.svg?style=flat-square&maxAge=2592000
7 | :target: https://travis-ci.org/Nekmo/angular-django
8 | :alt: Latest Travis CI build status
9 |
10 | .. image:: https://img.shields.io/pypi/v/angular-django.svg?style=flat-square
11 | :target: https://pypi.org/project/angular-django/
12 | :alt: Latest PyPI version
13 |
14 | .. image:: https://img.shields.io/pypi/pyversions/angular-django.svg?style=flat-square
15 | :target: https://pypi.org/project/angular-django/
16 | :alt: Python versions
17 |
18 | .. image:: https://img.shields.io/codeclimate/github/Nekmo/angular-django.svg?style=flat-square
19 | :target: https://codeclimate.com/github/Nekmo/angular-django
20 | :alt: Code Climate
21 |
22 | .. image:: https://img.shields.io/codecov/c/github/Nekmo/angular-django/master.svg?style=flat-square
23 | :target: https://codecov.io/github/Nekmo/angular-django
24 | :alt: Test coverage
25 |
26 | .. image:: https://img.shields.io/requires/github/Nekmo/angular-django.svg?style=flat-square
27 | :target: https://requires.io/github/Nekmo/angular-django/requirements/?branch=master
28 | :alt: Requirements Status
29 |
30 |
31 | .. image:: https://img.shields.io/requires/github/Nekmo/angular-django.svg?style=flat-square
32 | :target: https://requires.io/github/Nekmo/angular-django/requirements/?branch=master
33 | :alt: Requirements Status
34 |
35 |
36 | .. image:: https://raw.githubusercontent.com/Nekmo/angular-django/master/angular_django.svg
37 | :width: 256px
38 | :height: 256px
39 | :align: center
40 |
41 |
42 | **Angular Django** is a framework to work in *Angular* as in *Django*. Use the Django classes in Angular to build
43 | **forms** and **data** grids in minutes. `A demo is available on the website `_.
60 |
61 |
62 | Features
63 | ========
64 | Some features available:
65 |
66 | * Use the methods and filters available in the Django Rest Framework to work with the API.
67 | * Build forms in minutes. Includes validation on frontend and backend. Selector choices are built with the server.
68 | * Easy-to-implement filtering, paging, and searching listings.
69 | * Use your Django classes and types in Angular. The library will transform the API values to the correct types.
70 |
--------------------------------------------------------------------------------
/requirements.in:
--------------------------------------------------------------------------------
1 | Django
2 | djangorestframework
3 |
--------------------------------------------------------------------------------
/setup.cfg:
--------------------------------------------------------------------------------
1 | [bumpversion]
2 | current_version = 0.0.1
3 | commit = True
4 | tag = True
5 |
6 | [metadata]
7 | name = angular-django
8 | version = attr: angular_django.__version__
9 | author = Nekmo
10 | author-email = contacto@nekmo.com
11 | url = https://github.com/Nekmo/angular-django/
12 | download_url = https://github.com/Nekmo/angular-django/archive/master.zip
13 | description = Django Rest Framework API for Angular with self-building classes, forms, and listings
14 | long-description = file: pypi_readme.rst
15 | license = MIT
16 | license-file = LICENSE
17 | platform = any
18 | keywords = angular-django
19 |
20 | [options]
21 | zip_safe = False
22 | include_package_data = True
23 | package_dir =
24 | =src/django
25 | packages = angular_django
26 |
27 | [bdist_wheel]
28 | universal = 1
29 |
30 | [sdist]
31 | formats = zip, gztar
32 |
33 | [check]
34 | metadata = True
35 | restructuredtext = True
36 | strict = True
37 |
38 | [bumpversion:file:src/django/angular_django/__init__.py]
39 | search = __version__ = '{current_version}'
40 | replace = __version__ = '{new_version}'
41 |
42 | [flake8]
43 | exclude = docs
44 |
45 | [aliases]
46 |
--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 | import copy
4 | from itertools import chain
5 | from setuptools import setup
6 |
7 | REQUIREMENT_FILE = 'requirements.in'
8 | DEV_STATUS = 'Production/Stable' # Planning, Pre-Alpha, Alpha, Beta, Production/Stable, Mature, Inactive
9 | CLASSIFIERS = [ # https://github.com/github/choosealicense.com/tree/gh-pages/_licenses
10 | 'License :: OSI Approved :: MIT License',
11 | # 'License :: OSI Approved :: BSD License',
12 | # 'License :: OSI Approved :: ISC License (ISCL)',
13 | # 'License :: OSI Approved :: Apache Software License',
14 | # 'License :: OSI Approved :: GNU General Public License v3 (GPLv3)',
15 | ] # https://pypi.python.org/pypi?%3Aaction=list_classifiers
16 | NATURAL_LANGUAGE = 'English'
17 | PLATFORMS = [
18 | # 'universal',
19 | 'linux',
20 | # 'macosx',
21 | # 'solaris',
22 | # 'irix',
23 | # 'win'
24 | # 'bsd'
25 | # 'ios'
26 | # 'android'
27 | ]
28 | PYTHON_VERSIONS = ['3.6', '3.7', '3.8', '3.9']
29 |
30 |
31 | def get_python_classifiers(versions):
32 | for version in range(2, 4):
33 | if not next(iter(filter(lambda x: int(float(x)) != version, versions.copy())), False):
34 | versions.add('{} :: Only'.format(version))
35 | break
36 | return ['Programming Language :: Python :: %s' % version for version in versions]
37 |
38 |
39 | def get_platform_classifiers(platform):
40 | parts = {
41 | 'linux': ('POSIX', 'Linux'),
42 | 'win': ('Microsoft', 'Windows'),
43 | 'solaris': ('POSIX', 'SunOS/Solaris'),
44 | 'aix': ('POSIX', 'Linux'),
45 | 'unix': ('Unix',),
46 | 'bsd': ('POSIX', 'BSD')
47 | }[platform]
48 | return ['Operating System :: {}'.format(' :: '.join(parts[:i+1]))
49 | for i in range(len(parts))]
50 |
51 |
52 | def read_file(path):
53 | with open(path) as f:
54 | return f.read()
55 |
56 |
57 | statuses = ['Planning', 'Pre-Alpha', 'Alpha', 'Beta', 'Production/Stable', 'Mature', 'Inactive']
58 |
59 | # Classifiers
60 | classifiers = copy.copy(CLASSIFIERS)
61 | classifiers.extend(get_python_classifiers(set(PYTHON_VERSIONS) - {2.8, 2.9}))
62 | classifiers.extend(chain(*[get_platform_classifiers(platform) for platform in PLATFORMS]))
63 | classifiers.extend([
64 | 'Natural Language :: {}'.format(NATURAL_LANGUAGE),
65 | 'Development Status :: {} - {}'.format(statuses.index(DEV_STATUS) + 1, DEV_STATUS),
66 | ])
67 |
68 |
69 | setup(
70 | classifiers=classifiers,
71 | platforms=PLATFORMS,
72 | install_requires=read_file(REQUIREMENT_FILE),
73 | )
74 |
--------------------------------------------------------------------------------
/src/angular/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 |
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 |
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 |
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/src/angular/README.md:
--------------------------------------------------------------------------------
1 | # AngularDjango
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.3.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 |
--------------------------------------------------------------------------------
/src/angular/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "angular-django": {
7 | "projectType": "library",
8 | "root": "projects/angular-django",
9 | "sourceRoot": "projects/angular-django/src",
10 | "prefix": "adm",
11 | "architect": {
12 | "build": {
13 | "builder": "@angular-devkit/build-angular:ng-packagr",
14 | "options": {
15 | "tsConfig": "projects/angular-django/tsconfig.lib.json",
16 | "project": "projects/angular-django/ng-package.json"
17 | },
18 | "configurations": {
19 | "production": {
20 | "tsConfig": "projects/angular-django/tsconfig.lib.prod.json"
21 | }
22 | }
23 | },
24 | "test": {
25 | "builder": "@angular-devkit/build-angular:karma",
26 | "options": {
27 | "main": "projects/angular-django/src/test.ts",
28 | "tsConfig": "projects/angular-django/tsconfig.spec.json",
29 | "karmaConfig": "projects/angular-django/karma.conf.js"
30 | }
31 | },
32 | "lint": {
33 | "builder": "@angular-devkit/build-angular:tslint",
34 | "options": {
35 | "tsConfig": [
36 | "projects/angular-django/tsconfig.lib.json",
37 | "projects/angular-django/tsconfig.spec.json"
38 | ],
39 | "exclude": [
40 | "**/node_modules/**"
41 | ]
42 | }
43 | }
44 | }
45 | }},
46 | "cli": {
47 | "analytics": "542e0a50-12b0-4864-a051-7229c687b664"
48 | },
49 | "defaultProject": "angular-django"
50 | }
51 |
--------------------------------------------------------------------------------
/src/angular/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-django",
3 | "version": "0.0.6",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint"
10 | },
11 | "private": false,
12 | "dependencies": {
13 | "@angular/animations": "~11.0.5",
14 | "@angular/cdk": "^11.0.3",
15 | "@angular/common": "~11.0.5",
16 | "@angular/compiler": "~11.0.5",
17 | "@angular/core": "~11.0.5",
18 | "@angular/forms": "~11.0.5",
19 | "@angular/material": "^11.0.3",
20 | "@angular/platform-browser": "~11.0.5",
21 | "@angular/platform-browser-dynamic": "~11.0.5",
22 | "@angular/router": "~11.0.5",
23 | "@ngrx/schematics": "^10.0.0",
24 | "rxjs": "~6.6.0",
25 | "tslib": "^2.0.0",
26 | "zone.js": "~0.10.2"
27 | },
28 | "devDependencies": {
29 | "@angular-devkit/build-angular": "~0.1100.5",
30 | "@angular/cli": "~11.0.5",
31 | "@angular/compiler-cli": "~11.0.5",
32 | "@types/jasmine": "~3.6.0",
33 | "@types/jasminewd2": "~2.0.3",
34 | "@types/node": "^12.11.1",
35 | "codelyzer": "^6.0.0",
36 | "jasmine-core": "~3.6.0",
37 | "jasmine-spec-reporter": "~5.0.0",
38 | "karma": "~5.1.1",
39 | "karma-chrome-launcher": "~3.1.0",
40 | "karma-coverage-istanbul-reporter": "~3.0.2",
41 | "karma-jasmine": "~4.0.0",
42 | "karma-jasmine-html-reporter": "^1.5.0",
43 | "ng-packagr": "^11.0.3",
44 | "protractor": "~7.0.0",
45 | "ts-node": "~8.3.0",
46 | "tslint": "~6.1.0",
47 | "typescript": "~4.0.2"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/README.md:
--------------------------------------------------------------------------------
1 |
2 |
5 | Work in Angular as in Django
6 |
7 |
8 | **Angular Django** is a framework to work in *Angular* as in *Django*. Use the Django classes in Angular to build
9 | **forms** and **data** grids in minutes. [A demo is available on the website](https://angular-django.nekmo.org/).
10 |
11 | Angular-django consists of **two packages**: a package for *Angular* and an optional package for *Django*. To install
12 | the Angular package:
13 |
14 | ```shell
15 | $ npm i angular-django
16 | ```
17 |
18 |
19 | To install the Django package:
20 |
21 | ```shell
22 | $ pip install -U angular-django
23 | ```
24 |
25 | Full instructions are available [on the website](https://angular-django.nekmo.org/installation>).
26 |
27 |
28 | Features
29 | ========
30 | Some features available:
31 |
32 | * Use the methods and filters available in the Django Rest Framework to work with the API.
33 | * Build forms in minutes. Includes validation on frontend and backend. Selector choices are built with the server.
34 | * Easy-to-implement filtering, paging, and searching listings.
35 | * Use your Django classes and types in Angular. The library will transform the API values to the correct types.
36 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../../coverage/angular-django'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false,
30 | restartOnFileChange: true
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/material/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "ngPackage": {}
3 | }
4 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/material/src/angular-django-material-table/angular-django-material-table.component.css:
--------------------------------------------------------------------------------
1 | .cdk-column-select {
2 | max-width: 40px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/material/src/angular-django-material-table/angular-django-material-table.component.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
13 |
14 |
15 |
16 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | {{ column.label }}
29 |
30 |
31 |
32 |
33 |
36 |
37 |
38 | {{ row[column.name] }}
39 |
40 |
41 |
42 |
43 |
46 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/material/src/angular-django-material-table/angular-django-material-table.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AngularDjangoMaterialTableComponent } from './angular-django-material-table.component';
4 |
5 | describe('AngularDjangoMaterialTableComponent', () => {
6 | let component: AngularDjangoMaterialTableComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ AngularDjangoMaterialTableComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(AngularDjangoMaterialTableComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/material/src/angular-django-material-table/angular-django-material-table.directive.ts:
--------------------------------------------------------------------------------
1 | import {ContentChild, Directive, Input, TemplateRef} from '@angular/core';
2 |
3 |
4 | @Directive({
5 | selector: '[admCellDef]',
6 | })
7 | export class DjangoCellDefDirective {
8 | constructor(/** @docs-private */ public template: TemplateRef) { }
9 | }
10 |
11 |
12 | @Directive({
13 | selector: '[admColumnDef]',
14 | })
15 | export class AngularDjangoMaterialColumnDefDirective {
16 | /** Unique name for this column. */
17 | @Input('admColumnDef') name: string;
18 |
19 | /** Whether this column should be sticky positioned at the start of the row */
20 |
21 | /** @docs-private */
22 | @ContentChild(DjangoCellDefDirective) cell: DjangoCellDefDirective;
23 | }
24 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/material/src/angular-django-material-table/angular-django-material-table.interface.ts:
--------------------------------------------------------------------------------
1 | export interface Column {
2 | name: string;
3 | label?: string;
4 | ordering?: boolean;
5 | }
6 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/material/src/angular-django-material-table/angular-django-material-table.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import {
3 | AngularDjangoMaterialTableComponent,
4 | } from './angular-django-material-table.component';
5 | import {
6 | AngularDjangoMaterialColumnDefDirective,
7 | DjangoCellDefDirective,
8 | } from './angular-django-material-table.directive';
9 | import {AngularDjangoModule} from 'angular-django';
10 | import {MatTableModule} from '@angular/material/table';
11 | import {MatCheckboxModule} from '@angular/material/checkbox';
12 | import {MatPaginatorModule} from '@angular/material/paginator';
13 | import {CommonModule} from '@angular/common';
14 | import {MatSortModule} from '@angular/material/sort';
15 | import {ShiftClickDirective} from './shift-click-directive';
16 |
17 |
18 | @NgModule({
19 | imports: [
20 | CommonModule,
21 | AngularDjangoModule,
22 | MatTableModule,
23 | MatCheckboxModule,
24 | MatPaginatorModule,
25 | MatSortModule,
26 | ],
27 | declarations: [
28 | AngularDjangoMaterialTableComponent,
29 | DjangoCellDefDirective,
30 | AngularDjangoMaterialColumnDefDirective,
31 | ShiftClickDirective,
32 | ],
33 | exports: [
34 | AngularDjangoMaterialTableComponent,
35 | DjangoCellDefDirective,
36 | AngularDjangoMaterialColumnDefDirective,
37 | ]
38 | })
39 | export class AngularDjangoMaterialTableModule {
40 | }
41 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/material/src/angular-django-material-table/shift-click-directive.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | Input,
4 | HostListener,
5 | HostBinding,
6 | OnInit,
7 | OnDestroy,
8 | ElementRef,
9 | } from '@angular/core';
10 |
11 | import {SelectionModel, SelectionChange} from '@angular/cdk/collections';
12 |
13 | import { Subject, BehaviorSubject, } from 'rxjs';
14 | import { takeUntil } from 'rxjs/operators';
15 |
16 | import {Page} from 'angular-django';
17 |
18 |
19 |
20 | @Directive({
21 | selector: '[shiftClickSource]'
22 | })
23 | export class ShiftClickDirective implements OnInit, OnDestroy {
24 |
25 | finishHim = new Subject();
26 |
27 | // the item from with the selection originates
28 | lastItem: any;
29 | selecting = false;
30 | shiftHolding$ = new BehaviorSubject(false);
31 |
32 |
33 | // datasource that is used on the Checkbox-Table
34 | @Input('shiftClickSource') dataSource: Page;
35 | @Input('shiftClickSelectModel') selection: SelectionModel;
36 | @Input('shiftClickReloadSourceEvent') reloadSourceEvent: any;
37 | @HostListener('document:keydown.shift', ['$event'])
38 | shiftDown(_) {
39 | this.userSelect = 'none';
40 | this.shiftHolding$.next(true);
41 | }
42 | @HostListener('document:keyup.shift', ['$event'])
43 | shiftUp(event: KeyboardEvent) {
44 | this.userSelect = 'unset';
45 | this.shiftHolding$.next(false);
46 | }
47 |
48 |
49 | // disable select on mat-table while shift is clicked.
50 | @HostBinding('style.user-select')
51 | userSelect = 'unset';
52 |
53 | constructor(private host: ElementRef) {}
54 |
55 | ngOnInit() {
56 | this.selection.changed
57 | .pipe(takeUntil(this.finishHim))
58 | .subscribe((selectionChange: SelectionChange) => {
59 | const item = selectionChange.added[0] || selectionChange.removed[0];
60 | if (item && this.lastItem && !this.selecting && this.userSelect === 'none') {
61 | this.selecting = true;
62 | const index0 = this.dataSource.indexOf(item);
63 | const index1 = this.dataSource.indexOf(this.lastItem);
64 | const indexes = [index0, index1].sort();
65 | const items = [...this.dataSource].slice(...[indexes[0], indexes[1] + 1]);
66 | const allSelected = items.filter((value) => value !== item)
67 | .every((value) => this.selection.isSelected(value));
68 | if (allSelected) {
69 | this.selection.deselect(...items);
70 | } else {
71 | this.selection.select(...items);
72 | }
73 | this.selecting = false;
74 | }
75 | this.lastItem = item;
76 | });
77 | this.reloadSourceEvent
78 | .pipe(takeUntil(this.finishHim))
79 | .subscribe(() => this.reset());
80 | }
81 |
82 | reset() {
83 | this.lastItem = null;
84 | this.selecting = false;
85 | this.userSelect = 'unset';
86 | }
87 |
88 | ngOnDestroy() {
89 | this.finishHim.next();
90 | this.finishHim.complete();
91 | }
92 |
93 | }
94 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/material/src/angular-django-material.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import {AngularDjangoMaterialTableModule} from './angular-django-material-table/angular-django-material-table.module';
3 |
4 |
5 | @NgModule({
6 | imports: [
7 | AngularDjangoMaterialTableModule,
8 | ],
9 | declarations: [
10 | ],
11 | exports: [
12 | AngularDjangoMaterialTableModule,
13 | ]
14 | })
15 | export class AngularDjangoMaterialModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/material/src/public_api.ts:
--------------------------------------------------------------------------------
1 | export * from './angular-django-material.module';
2 | export * from './angular-django-material-table/angular-django-material-table.component';
3 | export * from './angular-django-material-table/angular-django-material-table.directive';
4 | export * from './angular-django-material-table/angular-django-material-table.interface';
5 | export * from './angular-django-material-table/angular-django-material-table.module';
6 | // export * from '../../src/public-api';
7 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 | "dest": "../../dist/angular-django",
4 | "lib": {
5 | "entryFile": "src/public-api.ts"
6 | },
7 | "whitelistedNonPeerDependencies": [
8 | "."
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-django",
3 | "version": "0.0.6",
4 | "peerDependencies": {
5 | "@angular/common": "^10.1.3",
6 | "@angular/core": "^10.1.3"
7 | },
8 | "dependencies": {
9 | "tslib": "^2.0.0"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/angular-django.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AngularDjangoComponent } from './angular-django.component';
4 |
5 | describe('AngularDjangoComponent', () => {
6 | let component: AngularDjangoComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ AngularDjangoComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(AngularDjangoComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/angular-django.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'lib-angular-django',
5 | template: `
6 |
7 | Ey, angular-django works!! :)
8 |
9 | `,
10 | styles: [
11 | ]
12 | })
13 | export class AngularDjangoComponent implements OnInit {
14 |
15 | constructor() { }
16 |
17 | ngOnInit(): void {
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/angular-django.module.ts:
--------------------------------------------------------------------------------
1 | import {InjectionToken, ModuleWithProviders, NgModule} from '@angular/core';
2 | import { AngularDjangoComponent } from './angular-django.component';
3 | import {GetDisplayPipe} from './get-display.pipe';
4 |
5 |
6 | export interface AngularDjangoConfig {
7 | rootUrl?: string;
8 | }
9 |
10 |
11 | export const ANGULAR_DJANGO_CONFIG = new InjectionToken('ANGULAR_DJANGO_CONFIG');
12 |
13 |
14 | @NgModule({
15 | providers: [
16 | {provide: ANGULAR_DJANGO_CONFIG, useValue: {} },
17 | ],
18 | declarations: [
19 | AngularDjangoComponent,
20 | GetDisplayPipe
21 | ],
22 | imports: [
23 | ],
24 | exports: [
25 | AngularDjangoComponent,
26 | GetDisplayPipe
27 | ]
28 | })
29 | export class AngularDjangoModule {
30 | static forRoot(config: AngularDjangoConfig): ModuleWithProviders {
31 | return {
32 | ngModule: AngularDjangoModule,
33 | providers: [
34 | {provide: ANGULAR_DJANGO_CONFIG, useValue: config }
35 | ]
36 | };
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/angular-django.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { AngularDjangoService } from './angular-django.service';
4 |
5 | describe('AngularDjangoService', () => {
6 | let service: AngularDjangoService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(AngularDjangoService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/angular-django.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable({
4 | providedIn: 'root'
5 | })
6 | export class AngularDjangoService {
7 |
8 | constructor() { }
9 | }
10 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/api.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, inject } from '@angular/core/testing';
2 |
3 | import { ApiService } from './api.service';
4 |
5 | describe('User', () => {
6 | beforeEach(() => {
7 | TestBed.configureTestingModule({
8 | providers: [ApiService]
9 | });
10 | });
11 |
12 | it('should be created', inject([ApiService], (service: ApiService) => {
13 | expect(service).toBeTruthy();
14 | }));
15 | });
16 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/get-display.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 | import {Observable} from 'rxjs';
3 |
4 | @Pipe({name: 'getDisplay', pure: true})
5 | export class GetDisplayPipe implements PipeTransform {
6 | transform(serializer: any, fieldName: string): Observable {
7 | return serializer.getDisplay(fieldName);
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/serializer.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, inject } from '@angular/core/testing';
2 |
3 | import { SerializerService } from './serializer.service';
4 |
5 | describe('SerializerService', () => {
6 | beforeEach(() => {
7 | TestBed.configureTestingModule({
8 | providers: [SerializerService]
9 | });
10 | });
11 |
12 | it('should be created', inject([SerializerService], (service: SerializerService) => {
13 | expect(service).toBeTruthy();
14 | }));
15 | });
16 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/utility-types.ts:
--------------------------------------------------------------------------------
1 | export interface Dict {
2 | [key: string /*TKey*/]: TVal;
3 | }
4 |
5 |
6 | export type Dictionary = Dict;
7 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import {Dictionary} from './utility-types';
2 |
3 | export function getCookie(name: string): null | string {
4 | if (!document.cookie) {
5 | return null;
6 | }
7 |
8 | const xsrfCookies = document.cookie.split(';')
9 | .map(c => c.trim())
10 | .filter(c => c.startsWith(name + '='));
11 |
12 | if (xsrfCookies.length === 0) {
13 | return null;
14 | }
15 |
16 | return decodeURIComponent(xsrfCookies[0].split('=')[1]);
17 | }
18 |
19 |
20 | export function getNestedDictionary(dictionary: Dictionary, nestedKey: string): any {
21 | nestedKey.split('__').forEach((subFieldName: string) => {
22 | dictionary = dictionary[subFieldName];
23 | if (dictionary === undefined) {
24 | throw new Error(`Invalid item ${subFieldName} on ${nestedKey} query`);
25 | }
26 | if (dictionary.type === 'nested object') {
27 | dictionary = dictionary.children; // TODO: returning dictionary.children type is unknown.
28 | }
29 | });
30 | return dictionary;
31 | }
32 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/lib/widgets.ts:
--------------------------------------------------------------------------------
1 | import {DjangoFormlyField, FormlyTemplateOptions} from './form';
2 | import {FieldOptions} from './serializer.service';
3 | import {map} from 'rxjs/operators';
4 |
5 |
6 | function removeApi(items: any): any {
7 | if (items && typeof items === 'object' && (items.hasOwnProperty('_api') || items.hasOwnProperty('apiService'))) {
8 | Object.entries(items).forEach(([key, value]) => {
9 | if (key === '_api') {
10 | items._api = undefined;
11 | } else {
12 | removeApi(value);
13 | }
14 | });
15 | }
16 | return items;
17 | }
18 |
19 |
20 | export class Widget {
21 | name?: string;
22 | type: string;
23 | templateOptionsType?: string;
24 |
25 | updateTemplateOptions?(templateOptions: FormlyTemplateOptions, formlyField: DjangoFormlyField): void {
26 | if (this.templateOptionsType) {
27 | templateOptions.type = this.templateOptionsType;
28 | }
29 | }
30 |
31 | constructor(options?: Widget) {
32 | if (options) {
33 | Object.assign(this, options);
34 | }
35 | }
36 | }
37 |
38 |
39 | export class SelectWidget extends Widget {
40 | type = 'select';
41 | name = 'select';
42 |
43 | updateTemplateOptions(templateOptions: FormlyTemplateOptions, formlyField: DjangoFormlyField): void {
44 | if ( formlyField.api.hasOptions ) {
45 | templateOptions.options = formlyField.api.getOptionField(formlyField.key).choices.map((item => {
46 | return {value: item.value, label: item.display_name};
47 | }));
48 | } else {
49 | templateOptions.options = [];
50 | }
51 | }
52 | }
53 |
54 | export class AutocompleteWidget extends Widget {
55 | type = 'autocomplete';
56 | name = 'autocomplete';
57 |
58 | updateTemplateOptions(templateOptions: FormlyTemplateOptions, formlyField: DjangoFormlyField): void {
59 | const field: FieldOptions = formlyField.api.serializer.fields[formlyField.key];
60 | // Improvement: cache term results;
61 | templateOptions.filter = (term) => {
62 | if (typeof term !== 'string') {
63 | term = '';
64 | }
65 | return formlyField.api.injector.get(field.type.getApiClass())
66 | .search(term).list().pipe(map((items: any[]) => removeApi(items)));
67 | };
68 | }
69 | }
70 |
71 |
72 | export const FORM_TYPES = {
73 | number: new Widget({type: 'input', name: 'number', templateOptionsType: 'number'}),
74 | boolean: new Widget({type: 'checkbox', name: 'boolean'}),
75 | date: new Widget({type: 'datepicker', name: 'date'}),
76 | choice: new SelectWidget(),
77 | 'nested object': new AutocompleteWidget(),
78 | };
79 | export const DEFAULT_TYPE = 'input';
80 |
81 |
82 |
83 | export function getWidgetFromName(name: string): Widget {
84 | return Object.keys(FORM_TYPES).map(key => FORM_TYPES[key]).find((w => w.name === name));
85 | }
86 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/public-api.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Public API Surface of angular-django
3 | */
4 |
5 | export * from './lib/angular-django.service';
6 | export * from './lib/angular-django.component';
7 | export * from './lib/angular-django.module';
8 | export * from './lib/api.service';
9 | export * from './lib/serializer.service';
10 | export * from './lib/get-display.pipe';
11 | export * from './lib/utility-types';
12 | export * from './lib/form';
13 |
14 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone';
4 | import 'zone.js/dist/zone-testing';
5 | import { getTestBed } from '@angular/core/testing';
6 | import {
7 | BrowserDynamicTestingModule,
8 | platformBrowserDynamicTesting
9 | } from '@angular/platform-browser-dynamic/testing';
10 |
11 | declare const require: {
12 | context(path: string, deep?: boolean, filter?: RegExp): {
13 | keys(): string[];
14 | (id: string): T;
15 | };
16 | };
17 |
18 | // First, initialize the Angular testing environment.
19 | getTestBed().initTestEnvironment(
20 | BrowserDynamicTestingModule,
21 | platformBrowserDynamicTesting()
22 | );
23 | // Then we find all the tests.
24 | const context = require.context('./', true, /\.spec\.ts$/);
25 | // And load the modules.
26 | context.keys().map(context);
27 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/lib",
6 | "target": "es2015",
7 | "declaration": true,
8 | "declarationMap": true,
9 | "inlineSources": true,
10 | "types": [],
11 | "lib": [
12 | "dom",
13 | "es2018"
14 | ]
15 | },
16 | "angularCompilerOptions": {
17 | "skipTemplateCodegen": true,
18 | "strictMetadataEmit": true,
19 | "enableResourceInlining": true
20 | },
21 | "exclude": [
22 | "src/test.ts",
23 | "**/*.spec.ts"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.lib.json",
4 | "compilerOptions": {
5 | "declarationMap": false
6 | },
7 | "angularCompilerOptions": {
8 | "enableIvy": false
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/spec",
6 | "types": [
7 | "jasmine",
8 | "node"
9 | ]
10 | },
11 | "files": [
12 | "src/test.ts"
13 | ],
14 | "include": [
15 | "**/*.spec.ts",
16 | "**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/src/angular/projects/angular-django/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tslint.json",
3 | "rules": {
4 | "no-string-literal": false,
5 | "no-trailing-whitespace": false,
6 | "directive-selector": [
7 | true,
8 | "attribute",
9 | "lib",
10 | "camelCase"
11 | ],
12 | "component-selector": [
13 | true,
14 | "element",
15 | "lib",
16 | "kebab-case"
17 | ]
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/angular/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "downlevelIteration": true,
9 | "experimentalDecorators": true,
10 | "moduleResolution": "node",
11 | "importHelpers": true,
12 | "target": "es2015",
13 | "module": "es2020",
14 | "lib": [
15 | "es2018",
16 | "dom"
17 | ],
18 | "paths": {
19 | "angular-django": [
20 | "dist/angular-django/angular-django",
21 | "dist/angular-django"
22 | ]
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/django/angular_django/__init__.py:
--------------------------------------------------------------------------------
1 | # -*- coding: utf-8 -*-
2 |
3 | """Top-level package for angular-django."""
4 |
5 | __author__ = """Nekmo"""
6 | __email__ = 'contacto@nekmo.com'
7 | __version__ = '0.0.1'
8 |
--------------------------------------------------------------------------------
/src/django/angular_django/management/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nekmo/angular-django/f79d8f40a14d8d8844ca4e88d788c0cc8442ae96/src/django/angular_django/management/__init__.py
--------------------------------------------------------------------------------
/src/django/angular_django/management/commands/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nekmo/angular-django/f79d8f40a14d8d8844ca4e88d788c0cc8442ae96/src/django/angular_django/management/commands/__init__.py
--------------------------------------------------------------------------------
/src/django/angular_django/management/commands/angular_classes.py:
--------------------------------------------------------------------------------
1 | """Generate Angular 5+ Typescript classes from REST API.
2 | """
3 | from django.core.management.base import BaseCommand, CommandError
4 |
5 | from angular_django.rest_framework import get_api_views
6 | from angular_django.typescript import tpl
7 |
8 |
9 | class Command(BaseCommand):
10 | help = globals()['__doc__']
11 |
12 | def handle(self, *args, **options):
13 | for view, pattern in get_api_views():
14 | print(tpl(view, pattern))
15 |
--------------------------------------------------------------------------------
/src/django/angular_django/metadata.py:
--------------------------------------------------------------------------------
1 | from django.forms import fields as django_forms_fields
2 | from rest_framework.metadata import SimpleMetadata
3 | from rest_framework.utils.field_mapping import ClassLookupDict
4 |
5 | try:
6 | from django_filters.rest_framework import DjangoFilterBackend
7 | except ImportError:
8 | DjangoFilterBackend = None
9 |
10 |
11 | if DjangoFilterBackend is not None:
12 | from django_filters import fields as django_filters_fields
13 | FORM_FIELDS = {
14 | django_forms_fields.NullBooleanField: 'boolean',
15 | django_forms_fields.BooleanField: 'boolean',
16 | django_forms_fields.URLField: 'url',
17 | django_forms_fields.EmailField: 'email',
18 | django_forms_fields.RegexField: 'regex',
19 | django_forms_fields.SlugField: 'slug',
20 | django_forms_fields.IntegerField: 'integer',
21 | django_forms_fields.FloatField: 'float',
22 | django_forms_fields.DecimalField: 'decimal',
23 | django_forms_fields.DateField: 'date',
24 | django_forms_fields.DateTimeField: 'datetime',
25 | django_forms_fields.TimeField: 'time',
26 | django_forms_fields.ChoiceField: 'choice',
27 | django_filters_fields.ChoiceField: 'choice',
28 | django_forms_fields.MultipleChoiceField: 'multiple choice',
29 | django_filters_fields.MultipleChoiceField: 'multiple choice',
30 | django_forms_fields.FileField: 'file upload',
31 | django_forms_fields.FilePathField: 'file upload',
32 | django_forms_fields.ImageField: 'image upload',
33 | django_filters_fields.ModelMultipleChoiceField: 'list',
34 | django_filters_fields.ModelChoiceField: 'nested object',
35 | }
36 | else:
37 | FORM_FIELDS = {}
38 |
39 |
40 | class AngularDjangoMetadata(SimpleMetadata):
41 | label_form_lookup = ClassLookupDict(FORM_FIELDS)
42 |
43 |
44 | def determine_metadata(self, request, view):
45 | metadata = super().determine_metadata(request, view)
46 | filters = {}
47 | for filter_backend in view.filter_backends:
48 | backend = filter_backend()
49 | if DjangoFilterBackend is not None and isinstance(backend, DjangoFilterBackend):
50 | fields = backend.get_filterset_class(view)().form.fields
51 | else:
52 | fields = {}
53 | if hasattr(backend, 'get_schema_operation_parameters'):
54 | for f in backend.get_schema_operation_parameters(view):
55 | f = dict(f)
56 | field = fields.get(f['name'])
57 | try:
58 | f['type'] = self.label_form_lookup[field]
59 | except KeyError:
60 | pass
61 | if field:
62 | f['label'] = field.label
63 | if field and f.get('type') == 'choice':
64 | f['choices'] = [{'value': choice[0], 'display_name': choice[1]} for choice in field.choices]
65 | filters[f['name']] = f
66 | metadata['filters'] = filters
67 | return metadata
68 |
--------------------------------------------------------------------------------
/src/django/angular_django/pagination.py:
--------------------------------------------------------------------------------
1 | from collections import OrderedDict
2 |
3 | from rest_framework.pagination import PageNumberPagination
4 | from rest_framework.response import Response
5 |
6 |
7 | class AngularDjangoPageNumberPagination(PageNumberPagination):
8 | def get_paginated_response(self, data):
9 | return Response(OrderedDict([
10 | ('count', self.page.paginator.count),
11 | ('page_size', self.page.paginator.per_page),
12 | ('next', self.get_next_link()),
13 | ('previous', self.get_previous_link()),
14 | ('results', data)
15 | ]))
16 |
17 | def get_paginated_response_schema(self, schema):
18 | response_schema = super().get_paginated_response_schema(schema)
19 | response_schema['properties']['page_size'] = {
20 | 'type': 'integer',
21 | 'example': 10,
22 | }
23 | return response_schema
24 |
25 |
26 | class StandardResultsSetPagination(AngularDjangoPageNumberPagination):
27 | page_size = 10
28 | page_size_query_param = 'page_size'
29 | max_page_size = 100
30 |
--------------------------------------------------------------------------------
/src/django/angular_django/rest_framework.py:
--------------------------------------------------------------------------------
1 | import inspect
2 | from itertools import chain
3 |
4 | from django.conf import settings
5 | from django.urls import URLResolver, URLPattern
6 | from django.utils.module_loading import import_string
7 | from rest_framework.serializers import ModelSerializer
8 | from rest_framework.views import APIView
9 | from rest_framework.viewsets import GenericViewSet
10 |
11 |
12 | def get_views(resolv, pattern=()):
13 | if isinstance(resolv, URLResolver):
14 | for item in resolv.url_patterns:
15 | for sub in get_views(item, pattern + (resolv.pattern,)):
16 | yield sub
17 | elif isinstance(resolv, URLPattern):
18 | try:
19 | mod = import_string(resolv.lookup_str)
20 | except ModuleNotFoundError:
21 | pass
22 | else:
23 | yield mod, pattern + (resolv.pattern,)
24 |
25 |
26 | def get_api_views():
27 | patterns = getattr(import_string(settings.ROOT_URLCONF), 'urlpatterns')
28 | views = set(list(chain(*[get_views(pattern) for pattern in patterns])))
29 | views = [view for view in views
30 | if inspect.isclass(view[0]) and issubclass(view[0], GenericViewSet) and \
31 | issubclass(view[0].serializer_class, ModelSerializer) and
32 | '(?P[a-z0-9]+)' not in view[1][-1]._regex and \
33 | '(?P[^/.]+)' not in view[1][-1]._regex]
34 | return views
35 |
--------------------------------------------------------------------------------
/src/django/angular_django/typescript.py:
--------------------------------------------------------------------------------
1 | from string import Template
2 |
3 | from django.contrib.contenttypes.models import ContentType
4 | from django.db import ProgrammingError
5 | from rest_framework import serializers
6 | from rest_framework.serializers import SerializerMetaclass
7 |
8 | FIELD_TPL = """\
9 | @Field() $name: $type;\
10 | """
11 |
12 | TPL = """
13 | ///////////////////////////////////////
14 | // ${model} API
15 | ///////////////////////////////////////
16 | export class ${model} extends SerializerService {
17 | $fields
18 | }
19 |
20 | @Injectable({
21 | providedIn: 'root'
22 | })
23 | export class ${model}Api extends ApiService {
24 |
25 | url = '${url}';
26 | serializer = ${model};
27 | contentType = '${content_type}';
28 |
29 | constructor(http: HttpClient) {
30 | super(http);
31 | }
32 | }
33 | """
34 |
35 | TS_TYPES = {
36 | serializers.CharField: 'string',
37 | serializers.EmailField: 'string',
38 | serializers.IPAddressField: 'string',
39 | serializers.DateField: 'Date',
40 | serializers.DateTimeField: 'Date',
41 | serializers.TimeField: 'string',
42 | serializers.DurationField: 'string',
43 | serializers.BooleanField: 'boolean',
44 | serializers.NullBooleanField: 'boolean',
45 | serializers.URLField: 'string',
46 | serializers.HyperlinkedIdentityField: 'string',
47 | serializers.HyperlinkedRelatedField: 'string',
48 | serializers.ChoiceField: 'string',
49 | serializers.UUIDField: 'string',
50 | serializers.SlugField: 'string',
51 | serializers.IntegerField: 'number',
52 | serializers.DecimalField: 'number',
53 | serializers.FloatField: 'number',
54 | }
55 |
56 |
57 | def get_field(name, field):
58 | cls = field.__class__
59 | many = False
60 | if cls == serializers.ManyRelatedField:
61 | many = True
62 | cls = field.child_relation.__class__
63 | type_ = TS_TYPES.get(cls, 'any')
64 | if isinstance(cls, SerializerMetaclass):
65 | type_ = cls.Meta.model._meta.object_name
66 | if many:
67 | type_ += '[]'
68 | return Template(FIELD_TPL).substitute(name=name, type=type_)
69 |
70 |
71 | def get_route_path(route):
72 | if hasattr(route, '_route'):
73 | route = route._route
74 | elif hasattr(route, '_regex'):
75 | route = route._regex
76 | else:
77 | raise ProgrammingError('Route is not available on {} object'.format(route))
78 | return route.lstrip('^').rstrip('$')
79 |
80 |
81 | def tpl(view, pattern):
82 | serializer = view.serializer_class()
83 | model = serializer.Meta.model
84 | model_name = model._meta.object_name
85 | url = '/' + ''.join([get_route_path(part) for part in pattern])
86 | fields = [get_field(name, field) for name, field in serializer.get_fields().items()]
87 | return Template(TPL).substitute(url=url, model=model_name, fields='\n'.join(fields),
88 | content_type='_'.join(ContentType.objects.get_for_model(model).natural_key()))
89 |
--------------------------------------------------------------------------------
36 | 
3 |