From c21dd8d0f9e047aa06a31104a5b2441676d14b3c Mon Sep 17 00:00:00 2001 From: William Nolin Date: Mon, 8 Nov 2021 01:26:31 -0500 Subject: [PATCH] Things --- docker-compose.yml | 4 +- src/app/modules/recipes/add.html | 11 +- .../mix-editor/mix-editor.component.html | 230 +++++++++--------- .../mix-editor/mix-editor.component.ts | 125 +++++----- .../explore.component.html => explore.html} | 0 .../explore.component.ts => explore.ts} | 36 +-- src/app/modules/recipes/form.html | 6 +- .../list/list.component.html => list.html} | 34 +-- .../{pages/list/list.component.ts => list.ts} | 48 ++-- .../pages/explore/explore.component.sass | 2 - .../recipes/pages/list/list.component.sass | 9 - .../modules/recipes/recipes-routing.module.ts | 8 +- src/app/modules/recipes/recipes.module.ts | 11 +- src/app/modules/recipes/recipes.sass | 12 + src/app/modules/recipes/recipes.ts | 3 + .../components/action-bar/action-bar.html | 2 +- .../components/action-bar/action-bar.ts | 6 +- .../shared/components/forms/buttons.ts | 17 ++ .../shared/components/forms/forms.module.ts | 30 ++- .../modules/shared/components/forms/forms.ts | 13 +- .../components/forms/submit-button.html | 1 + .../shared/components/inputs/input.html | 4 +- .../shared/components/inputs/inputs.ts | 22 +- .../shared/components/inputs/select.html | 17 +- .../modules/shared/model/material.model.ts | 24 +- .../modules/touch-up-kit/components/form.ts | 4 +- 26 files changed, 383 insertions(+), 296 deletions(-) rename src/app/modules/recipes/{pages/explore/explore.component.html => explore.html} (100%) rename src/app/modules/recipes/{pages/explore/explore.component.ts => explore.ts} (83%) rename src/app/modules/recipes/{pages/list/list.component.html => list.html} (83%) rename src/app/modules/recipes/{pages/list/list.component.ts => list.ts} (68%) delete mode 100644 src/app/modules/recipes/pages/explore/explore.component.sass delete mode 100644 src/app/modules/recipes/pages/list/list.component.sass create mode 100644 src/app/modules/shared/components/forms/buttons.ts create mode 100644 src/app/modules/shared/components/forms/submit-button.html diff --git a/docker-compose.yml b/docker-compose.yml index 11391cd..0defb89 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -8,12 +8,12 @@ services: MYSQL_ROOT_PASSWORD: "pass" MYSQL_DATABASE: "cre" ports: - - "3306:3306" + - "3307:3306" backend: image: registry.fyloz.dev:5443/colorrecipesexplorer/backend:latest environment: spring_profiles_active: "mysql,debug" - cre_database_url: "mysql://database:3306/cre" + cre_database_url: "mysql://database:3307/cre" cre_database_username: "root" cre_database_password: "pass" CRE_ENABLE_DB_UPDATE: 1 diff --git a/src/app/modules/recipes/add.html b/src/app/modules/recipes/add.html index 185e14a..aa827e1 100644 --- a/src/app/modules/recipes/add.html +++ b/src/app/modules/recipes/add.html @@ -1 +1,10 @@ - + + + Retour + + + + + + + diff --git a/src/app/modules/recipes/components/mix-editor/mix-editor.component.html b/src/app/modules/recipes/components/mix-editor/mix-editor.component.html index a89926b..0e9faf0 100644 --- a/src/app/modules/recipes/components/mix-editor/mix-editor.component.html +++ b/src/app/modules/recipes/components/mix-editor/mix-editor.component.html @@ -1,132 +1,122 @@ - - - Création d'un mélange pour la recette {{recipe.company.name}} - - {{recipe.name}} - Modification du mélange {{mix.mixType.name}} de la - recette {{recipe.company.name}} - {{recipe.name}} - - - - Nom - - - - - Type de produit - - - {{materialType.name}} - - - + + + + Retour + + + Supprimer + Enregistrer + + -
- -
- - - - - - - + + Ajouter un mélange à la couleur {{recipe.company.name}} + - {{recipe.name}} + Modification du mélange {{mix.mixType.name}} de la + couleur {{recipe.company.name}} + - {{recipe.name}} - - - - - - + + + + + + - - - + +
Position - {{mixMaterial.position}} - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + + + - - - - + + + + - - -
Position + {{mixMaterial.position}} + + + + + + Produit + + + + + + + + + + + + + + + Quantité + + + + Unités + + +

%

 - 		Produit - - - - {{materialDisplayName(material)}} - - - - Quantité - - - - Unités - - -

%

+ + + {{units}} - - - {{units}} - - - - + + - 		- - - - - - + + + + + +
- +
@ViewChild('deleteConfirmBox') deleteConfirmBox: ConfirmBoxComponent + @ViewChild(CreForm) creForm: ICreForm @Input() mixId: number | null @Input() recipeId: number | null @@ -36,35 +40,36 @@ export class MixEditorComponent extends ErrorHandlingComponent { @Output() save = new EventEmitter() + recipe: Recipe mix: Mix | null - recipe: Recipe | null - materialTypes$ = this.materialTypeService.all - form: FormGroup - nameControl: FormControl - materialTypeControl: FormControl - - mixMaterials: MixMaterialDto[] = [] editionMode = false units = UNIT_MILLILITER hoveredMixMaterial: MixMaterial | null - columns = ['position', 'buttonsPosition', 'material', 'quantity', 'units', 'buttonRemove'] + tableColumns = ['position', 'buttonsPosition', 'material', 'quantity', 'units', 'buttonRemove'] deleting = false errorHandlers = [{ filter: error => error.type === 'notfound-mix-id', - consumer: error => this.urlUtils.navigateTo('/color/list') + consumer: _ => this.urlUtils.navigateTo('/color/list') }, { filter: error => error.type === 'exists-material-name', messageProducer: error => `Un produit avec le nom '${error.name}' existe déjà` }, { filter: error => error.type === 'cannotdelete-mix', - messageProducer: error => 'Ce mélange est utilisé par un ou plusieurs autres mélanges' + messageProducer: _ => 'Ce mélange est utilisé par un ou plusieurs autres mélanges' }, { filter: error => error.type === 'invalid-mixmaterial-first', - messageProducer: error => 'La quantité du premier ingrédient du mélange ne peut pas être exprimée en pourcentage' + messageProducer: _ => 'La quantité du premier ingrédient du mélange ne peut pas être exprimée en pourcentage' }] + controls: any + materialTypeEntries$ = this.materialTypeService.all.pipe( + map(materialTypes => materialTypes.map(materialType => new CreInputEntry(materialType.id, materialType.name))), + ) + + private _mixMaterials: MixMaterialDto[] = [] + constructor( private mixService: MixService, private recipeService: RecipeService, @@ -87,22 +92,42 @@ export class MixEditorComponent extends ErrorHandlingComponent { this.editionMode = true } - this.subscribeEntityById( - this.recipeService, - this.recipeId, - r => { - this.recipe = r + this.fetchRecipe() + this.fetchMaterials() + } + + private fetchRecipe() { + this.subscribe( + this.recipeService.getById(this.recipeId), + recipe => { + this.recipe = recipe + if (this.editionMode) { - this.mix = this.recipe.mixes.find(m => m.id === this.mixId) + this.mix = this.recipe.mixes.find(mix => mix.id === this.mixId) this.mixMaterials = mixMaterialsAsMixMaterialsDto(this.mix) } else { this.addBlankMixMaterial() } - this.generateForm() + + this.createControls() } ) } + private fetchMaterials() { + this.subscribe( + this.materialService.all, + materials => this.materials = materials + ) + } + + private createControls() { + this.controls = { + name: new FormControl(this.mix?.mixType.name, Validators.required), + materialType: new FormControl(this.mix?.mixType.material.materialType.id, Validators.required) + } + } + addRow() { this.addBlankMixMaterial() this.mixTable.renderRows() @@ -141,9 +166,9 @@ export class MixEditorComponent extends ErrorHandlingComponent { submit() { this.save.emit({ - name: this.nameControl.value, + name: this.controls.name.value, recipeId: this.recipeId, - materialTypeId: this.materialTypeControl.value, + materialTypeId: this.controls.materialType.value, mixMaterials: this.mixMaterials, units: this.units }) @@ -154,8 +179,21 @@ export class MixEditorComponent extends ErrorHandlingComponent { this.subscribeAndNavigate(this.mixService.delete(this.mixId), `/color/edit/${this.recipeId}`) } - getAvailableMaterials(mixMaterial: MixMaterialDto): Material[] { - return this.materials.filter(m => mixMaterial.materialId === m.id || this.mixMaterials.filter(mm => mm.materialId === m.id).length === 0) + getAvailableMaterials(mixMaterial: MixMaterialDto): CreInputEntry[] { + // return this.materialService.all.pipe( + // map(materials => materials.filter(material => { + // return mixMaterial.materialId === material.id || this.mixMaterials.filter(mm => mm.materialId === material.id).length === 0 + // })), + // map(materials => this.sortedMaterials(materials)), + // map(materials => materials.map(material => new CreInputEntry(material.id, material.name))) + // ) + console.log(this.materials.map(material => new CreInputEntry(material.id, material.name))) + return [] + // return this.materials.map(material => new CreInputEntry(material.id, material.name)) + // return this.materials + // .filter(m => mixMaterial.materialId === m.id || this.mixMaterials.filter(mm => mm.materialId === m.id).length === 0) + // .sort(materialComparator) + // .map(material => new CreInputEntry(material.id, material.name)) } materialDisplayName(material: Material): string { @@ -165,43 +203,18 @@ export class MixEditorComponent extends ErrorHandlingComponent { return material.name } - sortedMaterials(materials: Material[]): Material[] { - return materials.sort((a, b) => { - const aPrefixName = a.materialType.prefix.toLowerCase() - const bPrefixName = b.materialType.prefix.toLowerCase() - - if (aPrefixName < bPrefixName) { - return -1 - } else if (aPrefixName > bPrefixName) { - return 1 - } else { - const aName = a.name.toLowerCase() - const bName = b.name.toLowerCase() - - if (aName < bName) { - return -1 - } else if (aName > bName) { - return 1 - } else { - return 0 - } - } - }) + get mixMaterials(): MixMaterialDto[] { + return this._mixMaterials } - private generateForm() { - this.nameControl = new FormControl(this.mix ? this.mix.mixType.name : null, Validators.required) - this.materialTypeControl = new FormControl(this.mix ? this.mix.mixType.material.materialType.id : null, Validators.required) - this.form = this.formBuilder.group({ - name: this.nameControl, - materialType: this.materialTypeControl - }) + set mixMaterials(mixMaterials: MixMaterialDto[]) { + this._mixMaterials = mixMaterials + this.mixTable.renderRows() } private addBlankMixMaterial() { - this.mixMaterials.push( - new MixMaterialDto(null, 0, false, this.mixMaterials.length + 1) - ) + const mixMaterial = new MixMaterialDto(null, 0, false, this.mixMaterials.length + 1) + this.mixMaterials = [...this.mixMaterials, mixMaterial] } private updateMixMaterialPosition(mixMaterial: MixMaterialDto, updatedPosition: number) { diff --git a/src/app/modules/recipes/pages/explore/explore.component.html b/src/app/modules/recipes/explore.html similarity index 100% rename from src/app/modules/recipes/pages/explore/explore.component.html rename to src/app/modules/recipes/explore.html diff --git a/src/app/modules/recipes/pages/explore/explore.component.ts b/src/app/modules/recipes/explore.ts similarity index 83% rename from src/app/modules/recipes/pages/explore/explore.component.ts rename to src/app/modules/recipes/explore.ts index 3a184a5..084693e 100644 --- a/src/app/modules/recipes/pages/explore/explore.component.ts +++ b/src/app/modules/recipes/explore.ts @@ -1,34 +1,34 @@ import {Component} from '@angular/core' -import {RecipeService} from '../../services/recipe.service' +import {RecipeService} from './services/recipe.service' import {ActivatedRoute, Router} from '@angular/router' -import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component' +import {ErrorHandlingComponent} from '../shared/components/subscribing.component' import { MixMaterialDto, Recipe, recipeMixCount, recipeNoteForGroupId, recipeStepCount -} from '../../../shared/model/recipe.model' +} from '../shared/model/recipe.model' import {Observable, Subject} from 'rxjs' -import {ErrorHandler, ErrorService} from '../../../shared/service/error.service' -import {AlertService} from '../../../shared/service/alert.service' -import {GlobalAlertHandlerComponent} from '../../../shared/components/global-alert-handler/global-alert-handler.component' -import {InventoryService} from '../../../material/service/inventory.service' -import {ConfirmBoxComponent} from '../../../shared/components/confirm-box/confirm-box.component' -import {GroupService} from '../../../groups/services/group.service' -import {AppState} from '../../../shared/app-state' -import {AccountService} from '../../../accounts/services/account.service' -import {Permission} from '../../../shared/model/user' +import {ErrorHandler, ErrorService} from '../shared/service/error.service' +import {AlertService} from '../shared/service/alert.service' +import {GlobalAlertHandlerComponent} from '../shared/components/global-alert-handler/global-alert-handler.component' +import {InventoryService} from '../material/service/inventory.service' +import {ConfirmBoxComponent} from '../shared/components/confirm-box/confirm-box.component' +import {GroupService} from '../groups/services/group.service' +import {AppState} from '../shared/app-state' +import {AccountService} from '../accounts/services/account.service' +import {Permission} from '../shared/model/user' import {FormControl} from '@angular/forms'; -import {map, tap} from 'rxjs/operators'; -import {CreInputEntry} from '../../../shared/components/inputs/inputs'; +import {map} from 'rxjs/operators'; +import {CreInputEntry} from '../shared/components/inputs/inputs'; @Component({ - selector: 'cre-explore', - templateUrl: './explore.component.html', - styleUrls: ['./explore.component.sass'] + selector: 'cre-recipe-explore', + templateUrl: './explore.html', + styleUrls: ['./recipes.sass'] }) -export class ExploreComponent extends ErrorHandlingComponent { +export class CreRecipeExplore extends ErrorHandlingComponent { deductErrorBody = {} units$ = new Subject() selectedGroupId: number | null diff --git a/src/app/modules/recipes/form.html b/src/app/modules/recipes/form.html index 7f72041..3dc9805 100644 --- a/src/app/modules/recipes/form.html +++ b/src/app/modules/recipes/form.html @@ -5,7 +5,7 @@ - + Ajouter une couleur Modifier la couleur {{recipe.name}} @@ -18,8 +18,4 @@ - - Retour - Enregistrer - diff --git a/src/app/modules/recipes/pages/list/list.component.html b/src/app/modules/recipes/list.html similarity index 83% rename from src/app/modules/recipes/pages/list/list.component.html rename to src/app/modules/recipes/list.html index d06df5d..4ad8ce1 100644 --- a/src/app/modules/recipes/pages/list/list.component.html +++ b/src/app/modules/recipes/list.html @@ -1,31 +1,19 @@ -
- - Recherche - - - -
- -
-
+ + + + + + Ajouter + +

Il n'y a actuellement aucune bannière enregistrée dans le système.

-

Vous pouvez en créer une ici.

+

Vous pouvez en créer une ici. +

- +

Il n'y a actuellement aucune recette enregistrée dans le système.

Vous pouvez en créer une ici.

 diff --git a/src/app/modules/recipes/pages/list/list.component.ts b/src/app/modules/recipes/list.ts similarity index 68% rename from src/app/modules/recipes/pages/list/list.component.ts rename to src/app/modules/recipes/list.ts index 53077a6..051212f 100644 --- a/src/app/modules/recipes/pages/list/list.component.ts +++ b/src/app/modules/recipes/list.ts @@ -1,23 +1,24 @@ -import {ChangeDetectorRef, Component} from '@angular/core' -import {ErrorHandlingComponent} from '../../../shared/components/subscribing.component' -import {RecipeService} from '../../services/recipe.service' -import {Permission} from '../../../shared/model/user' -import {AccountService} from '../../../accounts/services/account.service' -import {getRecipeLuma, Recipe} from '../../../shared/model/recipe.model' -import {ActivatedRoute, Router} from '@angular/router' -import {ErrorService} from '../../../shared/service/error.service' -import {AppState} from '../../../shared/app-state' -import {ConfigService} from '../../../shared/service/config.service' -import {Company} from '../../../shared/model/company.model'; -import {CompanyService} from '../../../company/service/company.service'; -import {Config} from '../../../shared/model/config.model'; +import {ChangeDetectorRef, Component} from '@angular/core'; +import {ErrorHandlingComponent} from '../shared/components/subscribing.component'; +import {Company} from '../shared/model/company.model'; +import {getRecipeLuma, Recipe} from '../shared/model/recipe.model'; +import {CompanyService} from '../company/service/company.service'; +import {RecipeService} from './services/recipe.service'; +import {AccountService} from '../accounts/services/account.service'; +import {ConfigService} from '../shared/service/config.service'; +import {AppState} from '../shared/app-state'; +import {ErrorService} from '../shared/service/error.service'; +import {ActivatedRoute, Router} from '@angular/router'; +import {Config} from '../shared/model/config.model'; +import {Permission} from '../shared/model/user'; +import {FormControl} from '@angular/forms'; @Component({ - selector: 'cre-list', - templateUrl: './list.component.html', - styleUrls: ['./list.component.sass'] + selector: 'cre-recipe-list', + templateUrl: 'list.html', + styleUrls: ['recipes.sass'] }) -export class ListComponent extends ErrorHandlingComponent { +export class RecipeList extends ErrorHandlingComponent { companies: Company[] = [] recipes: Map = new Map() tableCols = ['name', 'description', 'color', 'sample', 'iconNotApproved', 'buttonView', 'buttonEdit'] @@ -25,6 +26,8 @@ export class ListComponent extends ErrorHandlingComponent { panelForcedExpanded = false hiddenRecipes = [] + searchControl: FormControl + constructor( private companyService: CompanyService, private recipeService: RecipeService, @@ -47,7 +50,7 @@ export class ListComponent extends ErrorHandlingComponent { this.subscribe( this.configService.get(Config.EMERGENCY_MODE), config => { - if (config.content == "true") { + if (config.content == 'true') { this.urlUtils.navigateTo('/admin/config/') } } @@ -55,6 +58,12 @@ export class ListComponent extends ErrorHandlingComponent { this.fetchCompanies() this.fetchRecipes() + + this.searchControl = new FormControl('') + this.subscribe( + this.searchControl.valueChanges, + value => this.searchRecipes(value) + ) } private fetchCompanies() { @@ -72,7 +81,8 @@ export class ListComponent extends ErrorHandlingComponent { ) } - searchRecipes() { + searchRecipes(searchQuery) { + this.searchQuery = searchQuery if (this.searchQuery.length > 0 && !this.panelForcedExpanded) { this.panelForcedExpanded = true this.cdRef.detectChanges() diff --git a/src/app/modules/recipes/pages/explore/explore.component.sass b/src/app/modules/recipes/pages/explore/explore.component.sass deleted file mode 100644 index 1775c49..0000000 --- a/src/app/modules/recipes/pages/explore/explore.component.sass +++ /dev/null @@ -1,2 +0,0 @@ -.recipe-content > div - margin: 0 3rem 3rem diff --git a/src/app/modules/recipes/pages/list/list.component.sass b/src/app/modules/recipes/pages/list/list.component.sass deleted file mode 100644 index e5fb34c..0000000 --- a/src/app/modules/recipes/pages/list/list.component.sass +++ /dev/null @@ -1,9 +0,0 @@ -mat-expansion-panel - width: 60rem - margin: 20px auto - -.button-add - margin-top: .8rem - -.recipe-color-circle - box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12) diff --git a/src/app/modules/recipes/recipes-routing.module.ts b/src/app/modules/recipes/recipes-routing.module.ts index 95fd2a9..f258782 100644 --- a/src/app/modules/recipes/recipes-routing.module.ts +++ b/src/app/modules/recipes/recipes-routing.module.ts @@ -1,14 +1,14 @@ import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; -import {ListComponent} from './pages/list/list.component'; -import {ExploreComponent} from './pages/explore/explore.component'; +import {CreRecipeExplore} from './explore'; import {MixEditComponent} from './pages/mix/mix-edit/mix-edit.component'; import {MixAddComponent} from './pages/mix/mix-add/mix-add.component'; import {RecipeAdd, RecipeEdit} from './recipes'; +import {RecipeList} from './list'; const routes: Routes = [{ path: 'list', - component: ListComponent + component: RecipeList }, { path: 'add', component: RecipeAdd @@ -23,7 +23,7 @@ const routes: Routes = [{ component: MixEditComponent }, { path: 'explore/:id', - component: ExploreComponent + component: CreRecipeExplore }, { path: '', pathMatch: 'full', diff --git a/src/app/modules/recipes/recipes.module.ts b/src/app/modules/recipes/recipes.module.ts index 71aacfe..3ba16c2 100644 --- a/src/app/modules/recipes/recipes.module.ts +++ b/src/app/modules/recipes/recipes.module.ts @@ -2,10 +2,9 @@ import {NgModule} from '@angular/core' import {RecipesRoutingModule} from './recipes-routing.module' import {SharedModule} from '../shared/shared.module' -import {ListComponent} from './pages/list/list.component' import {MatExpansionModule} from '@angular/material/expansion' import {FormsModule} from '@angular/forms' -import {ExploreComponent} from './pages/explore/explore.component' +import {CreRecipeExplore} from './explore' import {RecipeInfoComponent} from './components/recipe-info/recipe-info.component' import {MixTableComponent} from './components/mix-table/mix-table.component' import {StepListComponent} from './components/step-list/step-list.component' @@ -21,12 +20,11 @@ import {CreInputsModule} from '../shared/components/inputs/inputs.module'; import {CreButtonsModule} from '../shared/components/buttons/buttons.module'; import {RecipeAdd, RecipeEdit, RecipeForm} from './recipes'; import {CreActionBarModule} from '../shared/components/action-bar/action-bar.module'; - +import {RecipeList} from './list'; @NgModule({ declarations: [ - ListComponent, - ExploreComponent, + CreRecipeExplore, RecipeInfoComponent, MixTableComponent, StepListComponent, @@ -39,7 +37,8 @@ import {CreActionBarModule} from '../shared/components/action-bar/action-bar.mod MixesCardComponent, RecipeForm, RecipeAdd, - RecipeEdit + RecipeEdit, + RecipeList ], exports: [ UnitSelectorComponent diff --git a/src/app/modules/recipes/recipes.sass b/src/app/modules/recipes/recipes.sass index d19072a..353d3df 100644 --- a/src/app/modules/recipes/recipes.sass +++ b/src/app/modules/recipes/recipes.sass @@ -4,3 +4,15 @@ cre-form margin-top: 0 !important +mat-expansion-panel + width: 60rem + margin: 20px auto + +.button-add + margin-top: .8rem + +.recipe-color-circle + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12) + +.recipe-content > div + margin: 0 3rem 3rem diff --git a/src/app/modules/recipes/recipes.ts b/src/app/modules/recipes/recipes.ts index 1be6565..fed6fe8 100644 --- a/src/app/modules/recipes/recipes.ts +++ b/src/app/modules/recipes/recipes.ts @@ -16,6 +16,7 @@ import {AlertService} from '../shared/service/alert.service'; import {GroupService} from '../groups/services/group.service'; import {StepTableComponent} from './components/step-table/step-table.component'; import {anyMap} from '../shared/utils/map.utils'; +import {CreForm, ICreForm} from '../shared/components/forms/forms'; @Component({ selector: 'recipe-form', @@ -26,6 +27,8 @@ import {anyMap} from '../shared/utils/map.utils'; export class RecipeForm extends SubscribingComponent { @Input() recipe: Recipe | null + @ViewChild(CreForm) creForm: ICreForm + @Output() submitForm = new EventEmitter(); controls: any diff --git a/src/app/modules/shared/components/action-bar/action-bar.html b/src/app/modules/shared/components/action-bar/action-bar.html index 4bad334..6aa7ad0 100644 --- a/src/app/modules/shared/components/action-bar/action-bar.html +++ b/src/app/modules/shared/components/action-bar/action-bar.html @@ -1,3 +1,3 @@ -
+
diff --git a/src/app/modules/shared/components/action-bar/action-bar.ts b/src/app/modules/shared/components/action-bar/action-bar.ts index 506bed9..61df16b 100644 --- a/src/app/modules/shared/components/action-bar/action-bar.ts +++ b/src/app/modules/shared/components/action-bar/action-bar.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core' +import {Component, Input} from '@angular/core' @Component({ selector: 'cre-action-group', @@ -11,4 +11,6 @@ export class CreActionGroup {} selector: 'cre-action-bar', templateUrl: 'action-bar.html' }) -export class CreActionBar {} +export class CreActionBar { + @Input() reverse = false +} diff --git a/src/app/modules/shared/components/forms/buttons.ts b/src/app/modules/shared/components/forms/buttons.ts new file mode 100644 index 0000000..0cebdc4 --- /dev/null +++ b/src/app/modules/shared/components/forms/buttons.ts @@ -0,0 +1,17 @@ +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {ICreForm} from './forms'; + +@Component({ + selector: 'cre-submit-button', + templateUrl: 'submit-button.html' +}) +export class CreSubmitButton { + @Input() form: ICreForm + @Input() valid: boolean | null + + @Output() submit = new EventEmitter() + + get disableButton(): boolean { + return !this.form || !(this.valid ?? this.form.valid) + } +} diff --git a/src/app/modules/shared/components/forms/forms.module.ts b/src/app/modules/shared/components/forms/forms.module.ts index 2ee4a91..4e1a91c 100644 --- a/src/app/modules/shared/components/forms/forms.module.ts +++ b/src/app/modules/shared/components/forms/forms.module.ts @@ -1,28 +1,34 @@ import {NgModule} from '@angular/core' -import {CreFormActions, CreFormComponent, CreFormContent, CreFormTitle} from './forms' +import {CreFormActions, CreForm, CreFormContent, CreFormTitle} from './forms' import {MatCardModule} from '@angular/material/card' import {CommonModule} from '@angular/common' import {MatButtonModule} from '@angular/material/button' import {ReactiveFormsModule} from '@angular/forms' +import {CreSubmitButton} from './buttons'; +import {CreButtonsModule} from '../buttons/buttons.module'; @NgModule({ declarations: [ - CreFormComponent, + CreForm, CreFormTitle, CreFormContent, - CreFormActions + CreFormActions, + CreSubmitButton ], exports: [ - CreFormComponent, + CreForm, CreFormTitle, CreFormContent, - CreFormActions + CreFormActions, + CreSubmitButton ], - imports: [ - MatCardModule, - CommonModule, - MatButtonModule, - ReactiveFormsModule - ] + imports: [ + MatCardModule, + CommonModule, + MatButtonModule, + ReactiveFormsModule, + CreButtonsModule + ] }) -export class CreFormsModule {} +export class CreFormsModule { +} diff --git a/src/app/modules/shared/components/forms/forms.ts b/src/app/modules/shared/components/forms/forms.ts index 98a556c..7619f15 100644 --- a/src/app/modules/shared/components/forms/forms.ts +++ b/src/app/modules/shared/components/forms/forms.ts @@ -1,6 +1,12 @@ import {Component, ContentChild, Directive, Input, OnInit, ViewEncapsulation} from '@angular/core' import {FormBuilder, FormGroup} from '@angular/forms' +export interface ICreForm { + form: FormGroup + valid: boolean + invalid: boolean +} + @Directive({ selector: 'cre-form-title' }) @@ -17,7 +23,6 @@ export class CreFormContent { selector: 'cre-form-actions' }) export class CreFormActions { - } @Component({ @@ -26,7 +31,7 @@ export class CreFormActions { styleUrls: ['forms.sass'], encapsulation: ViewEncapsulation.None }) -export class CreFormComponent implements OnInit { +export class CreForm implements ICreForm, OnInit { @ContentChild(CreFormActions) formActions: CreFormActions @Input() formControls: { [key: string]: any } @@ -45,6 +50,10 @@ export class CreFormComponent implements OnInit { return !!this.formActions } + get valid(): boolean { + return this.form && this.form.valid + } + get invalid(): boolean { return !this.form || this.form.invalid } diff --git a/src/app/modules/shared/components/forms/submit-button.html b/src/app/modules/shared/components/forms/submit-button.html new file mode 100644 index 0000000..8e9289a --- /dev/null +++ b/src/app/modules/shared/components/forms/submit-button.html @@ -0,0 +1 @@ +Enregistrer diff --git a/src/app/modules/shared/components/inputs/input.html b/src/app/modules/shared/components/inputs/input.html index 7b5f60f..f58c818 100644 --- a/src/app/modules/shared/components/inputs/input.html +++ b/src/app/modules/shared/components/inputs/input.html @@ -5,7 +5,7 @@ @@ -14,7 +14,7 @@ diff --git a/src/app/modules/shared/components/inputs/inputs.ts b/src/app/modules/shared/components/inputs/inputs.ts index fb038e9..74335cf 100644 --- a/src/app/modules/shared/components/inputs/inputs.ts +++ b/src/app/modules/shared/components/inputs/inputs.ts @@ -15,7 +15,7 @@ import { } from '@angular/core' import {AbstractControl, FormControl, ValidationErrors, ValidatorFn, Validators} from '@angular/forms' import {COMMA, ENTER} from '@angular/cdk/keycodes' -import {Observable, Subject} from 'rxjs' +import {isObservable, Observable, Subject} from 'rxjs' import {map, takeUntil} from 'rxjs/operators' import {MatChipInputEvent} from '@angular/material/chips' import {MatAutocomplete, MatAutocompleteSelectedEvent} from '@angular/material/autocomplete' @@ -50,16 +50,16 @@ export class CreInputComponent extends _CreInputBase implements AfterViewInit { @ViewChild('input') input: any @ContentChild(TemplateRef) errors: TemplateRef + fieldRequired = true + ngAfterViewInit() { const element = this.input.nativeElement element.type = this.type element.step = this.step.toString() element.placeholder = this.placeholder element.autocomplete = this.autocomplete ? 'on' : 'off' - } - get isFieldRequired(): boolean { - return this.control ? this.control.validator && this.control.validator({} as AbstractControl)?.required : this.required + this.fieldRequired = this.control ? this.control.validator && this.control.validator({} as AbstractControl)?.required : this.required } } @@ -400,7 +400,19 @@ export class CreSliderInputComponent { templateUrl: 'select.html' }) export class CreSelectComponent extends _CreInputBase { - @Input() entries: Observable + @Input() entries: Observable | CreInputEntry[] + + get entriesAreObservable(): boolean { + return isObservable(this.entries) + } + + get arrayEntries(): CreInputEntry[] { + return this.entries as CreInputEntry[] + } + + get observableEntries(): Observable { + return this.entries as Observable + } } export class CreInputEntry { diff --git a/src/app/modules/shared/components/inputs/select.html b/src/app/modules/shared/components/inputs/select.html index 6fd806b..e17b4a4 100644 --- a/src/app/modules/shared/components/inputs/select.html +++ b/src/app/modules/shared/components/inputs/select.html @@ -1,8 +1,17 @@ {{label}} - - - {{entry.display || entry.value}} - + + + + {{entry.display || entry.value}} + + + + + {{entry.display || entry.value}} + + diff --git a/src/app/modules/shared/model/material.model.ts b/src/app/modules/shared/model/material.model.ts index 56187fd..5c31599 100644 --- a/src/app/modules/shared/model/material.model.ts +++ b/src/app/modules/shared/model/material.model.ts @@ -1,4 +1,4 @@ -import {MaterialType} from "./materialtype.model"; +import {MaterialType} from './materialtype.model'; import {openPdf} from '../utils/utils' export class Material { @@ -15,3 +15,25 @@ export class Material { export function openSimdut(material: Material) { openPdf(material.simdutUrl) } + +export const materialComparator = (a: Material, b: Material): number => { + const aPrefixName = a.materialType.prefix.toLowerCase() + const bPrefixName = b.materialType.prefix.toLowerCase() + + if (aPrefixName < bPrefixName) { + return -1 + } else if (aPrefixName > bPrefixName) { + return 1 + } else { + const aName = a.name.toLowerCase() + const bName = b.name.toLowerCase() + + if (aName < bName) { + return -1 + } else if (aName > bName) { + return 1 + } else { + return 0 + } + } +} diff --git a/src/app/modules/touch-up-kit/components/form.ts b/src/app/modules/touch-up-kit/components/form.ts index 09c7248..5fa1a89 100644 --- a/src/app/modules/touch-up-kit/components/form.ts +++ b/src/app/modules/touch-up-kit/components/form.ts @@ -1,6 +1,6 @@ import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core' import {chipListRequired, CreInputEntry, CreChipComboBoxComponent} from '../../shared/components/inputs/inputs' -import {CreFormComponent} from '../../shared/components/forms/forms' +import {CreForm} from '../../shared/components/forms/forms' import {TouchUpKitProductEditor} from './product-editor' import {FormControl, Validators} from '@angular/forms' import {RecipeService} from '../../recipes/services/recipe.service' @@ -18,7 +18,7 @@ import {map} from 'rxjs/operators' export class TouchUpKitForm extends SubscribingComponent { @ViewChild('finishInput') finishInput: CreChipComboBoxComponent @ViewChild('materialInput') materialInput: CreChipComboBoxComponent - @ViewChild(CreFormComponent) form: CreFormComponent + @ViewChild(CreForm) form: CreForm @ViewChild(TouchUpKitProductEditor) contentEditor: TouchUpKitProductEditor @Input() touchUpKit: TouchUpKit | null