ColorRecipesExplorer
/
Frontend
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases 1 Wiki Activity

#14 Add message in the color list

This commit is contained in:
William Nolin 2021-09-10 07:40:38 -04:00
parent ae5dac1040
commit 951f9fcb87
3 changed files with 112 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/modules/colors/pages/list/list.component.html
View File

@ -5,7 +5,7 @@
matInput
type="text"
[(ngModel)]="searchQuery"
(keyup)="searchRecipes()"/>
(keyup)="searchRecipes()"/>
<button
mat-button
*ngIf="searchQuery"
@ -20,18 +20,23 @@
</div>
</div>
<div *ngIf="recipes.size === 0" class="alert alert-warning w-50 m-auto text-center">
<p>Il n'y a actuellement aucune recette enregistrée dans le système.</p>
<p *ngIf="hasEditPermission">Vous pouvez en créer une <b><a routerLink="/color/add">ici</a></b>.</p>
</div>
<mat-expansion-panel
class="table-title"
*ngFor="let companyRecipes of recipes"
[hidden]="isCompanyHidden(companyRecipes.recipes)"
*ngFor="let company of companies"
[hidden]="isCompanyHidden(company)"
[expanded]="panelForcedExpanded">
<mat-expansion-panel-header>
<mat-panel-title>
{{companyRecipes.company}}
{{company.name}}
</mat-panel-title>
</mat-expansion-panel-header>
<ng-container *ngTemplateOutlet="recipeTableTemplate; context: {recipes: companyRecipes.recipes}"></ng-container>
<ng-container *ngTemplateOutlet="recipeTableTemplate; context: {recipes: recipes.get(company.id)}"></ng-container>
</mat-expansion-panel>
<ng-template

51
src/app/modules/colors/pages/list/list.component.ts
View File

@ -8,7 +8,9 @@ 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 {Config} from '../../../shared/model/config.model'
import {Company} from '../../../shared/model/company.model';
import {CompanyService} from '../../../company/service/company.service';
import {Config} from '../../../shared/model/config.model';
@Component({
selector: 'cre-list',
@ -16,13 +18,15 @@ import {Config} from '../../../shared/model/config.model'
styleUrls: ['./list.component.sass']
})
export class ListComponent extends ErrorHandlingComponent {
recipes: { company: string, recipes: Recipe[] }[] = []
companies: Company[] = []
recipes: Map<number, Recipe[]> = new Map<number, Recipe[]>()
tableCols = ['name', 'description', 'color', 'sample', 'iconNotApproved', 'buttonView', 'buttonEdit']
searchQuery = ''
panelForcedExpanded = false
hiddenRecipes = []
constructor(
private companyService: CompanyService,
private recipeService: RecipeService,
private accountService: AccountService,
private configService: ConfigService,
@ -37,21 +41,35 @@ export class ListComponent extends ErrorHandlingComponent {
ngOnInit() {
super.ngOnInit()
this.appState.title = "Explorateur"
this.appState.title = 'Explorateur'
// Navigate to configs if server is in emergency mode
this.subscribe(
this.configService.get(Config.EMERGENCY_MODE),
config => {
if (config.content === "false") {
this.subscribe(
this.recipeService.allSortedByCompany,
recipes => this.recipes = recipes
)
} else {
this.urlUtils.navigateTo("/admin/config")
if (config.content == "true") {
this.urlUtils.navigateTo('/admin/config/')
}
}
)
this.fetchCompanies()
// this.fetchRecipes()
}
private fetchCompanies() {
this.subscribe(
this.companyService.all,
companies => this.companies = companies
)
}
private fetchRecipes() {
this.subscribe(
this.recipeService.allByCompany,
recipes => this.recipes = recipes,
true
)
}
searchRecipes() {
@ -60,13 +78,16 @@ export class ListComponent extends ErrorHandlingComponent {
this.cdRef.detectChanges()
}
this.recipes
.flatMap(r => r.recipes)
.forEach(r => this.recipeMatchesSearchQuery(r))
for (let recipeArray of this.recipes.values()) {
recipeArray.forEach(recipe => this.recipeMatchesSearchQuery(recipe))
}
}
isCompanyHidden(companyRecipes: Recipe[]): boolean {
return (this.searchQuery && this.searchQuery.length > 0) && companyRecipes.map(r => this.hiddenRecipes[r.id]).filter(r => !r).length <= 0
isCompanyHidden(company: Company): boolean {
const companyRecipes = this.recipes.get(company.id);
return !(companyRecipes && companyRecipes.length >= 0) ||
this.searchQuery && this.searchQuery.length > 0 &&
companyRecipes.map(r => this.hiddenRecipes[r.id]).filter(r => !r).length <= 0
}
isLight(recipe: Recipe): boolean {

131
src/app/modules/colors/services/recipe.service.ts
View File

@ -3,86 +3,87 @@ import {ApiService} from '../../shared/service/api.service'
import {Observable} from 'rxjs'
import {Recipe, RecipeStep} from '../../shared/model/recipe.model'
import {map} from 'rxjs/operators'
import {Company} from '../../shared/model/company.model';
@Injectable({
providedIn: 'root'
providedIn: 'root'
})
export class RecipeService {
constructor(
private api: ApiService
) {
}
constructor(
private api: ApiService
) {
}
get all(): Observable<Recipe[]> {
return this.api.get<Recipe[]>('/recipe')
}
get all(): Observable<Recipe[]> {
return this.api.get<Recipe[]>('/recipe')
}
getAllByName(name: string): Observable<Recipe[]> {
return this.api.get<Recipe[]>(`/recipe?name=${name}`)
}
getAllByName(name: string): Observable<Recipe[]> {
return this.api.get<Recipe[]>(`/recipe?name=${name}`)
}
get allSortedByCompany(): Observable<{ company: string, recipes: Recipe[] }[]> {
return this.all.pipe(map(recipes => {
const mapped = []
recipes.forEach(r => {
if (!mapped[r.company.id]) {
mapped[r.company.id] = {company: r.company.name, recipes: []}
get allByCompany(): Observable<Map<number, Recipe[]>> {
return this.all.pipe(map(recipes => {
const map = new Map<number, Recipe[]>()
recipes.forEach(r => {
if (!map.has(r.company.id)) {
map.set(r.company.id, [])
}
map.get(r.company.id).push(r)
})
return map
}))
}
getById(id: number): Observable<Recipe> {
return this.api.get<Recipe>(`/recipe/${id}`)
}
save(name: string, description: string, color: string, gloss: number, sample: number, approbationDate: string, remark: string, companyId: number): Observable<Recipe> {
const body = {name, description, color, gloss, sample, remark, companyId}
if (approbationDate) {
// @ts-ignore
body.approbationDate = approbationDate
}
mapped[r.company.id].recipes.push(r)
})
return mapped.filter(e => e != null) // Filter to remove empty elements in the array that appears for some reason
}))
}
getById(id: number): Observable<Recipe> {
return this.api.get<Recipe>(`/recipe/${id}`)
}
save(name: string, description: string, color: string, gloss: number, sample: number, approbationDate: string, remark: string, companyId: number): Observable<Recipe> {
const body = {name, description, color, gloss, sample, remark, companyId}
if (approbationDate) {
// @ts-ignore
body.approbationDate = approbationDate
}
return this.api.post<Recipe>('/recipe', body)
}
update(id: number, name: string, description: string, color: string, gloss: number, sample: number, approbationDate: string, remark: string, steps: Map<number, RecipeStep[]>) {
const body = {id, name, description, color, gloss, sample, remark, steps: []}
if (approbationDate) {
// @ts-ignore
body.approbationDate = approbationDate
return this.api.post<Recipe>('/recipe', body)
}
steps.forEach((groupSteps, groupId) => {
const mappedGroupSteps = groupSteps.map(s => {
return {message: s.message, position: s.position}
})
body.steps.push({groupId, steps: mappedGroupSteps})
})
update(id: number, name: string, description: string, color: string, gloss: number, sample: number, approbationDate: string, remark: string, steps: Map<number, RecipeStep[]>) {
const body = {id, name, description, color, gloss, sample, remark, steps: []}
if (approbationDate) {
// @ts-ignore
body.approbationDate = approbationDate
}
return this.api.put<Recipe>('/recipe', body)
}
steps.forEach((groupSteps, groupId) => {
const mappedGroupSteps = groupSteps.map(s => {
return {message: s.message, position: s.position}
})
body.steps.push({groupId, steps: mappedGroupSteps})
})
updateExplorerModifications(id: number, notes: Map<number, string>, mixesLocationChange: Map<number, string>): Observable<void> {
const body = {
recipeId: id,
notes: [],
mixesLocation: []
return this.api.put<Recipe>('/recipe', body)
}
notes.forEach((content, groupId) => {
body.notes.push({groupId, content})
})
updateExplorerModifications(id: number, notes: Map<number, string>, mixesLocationChange: Map<number, string>): Observable<void> {
const body = {
recipeId: id,
notes: [],
mixesLocation: []
}
mixesLocationChange.forEach((location, mixId) => {
body.mixesLocation.push({mixId, location})
})
notes.forEach((content, groupId) => {
body.notes.push({groupId, content})
})
return this.api.put<void>('/recipe/public', body)
}
mixesLocationChange.forEach((location, mixId) => {
body.mixesLocation.push({mixId, location})
})
delete(id: number): Observable<void> {
return this.api.delete<void>(`/recipe/${id}`)
}
return this.api.put<void>('/recipe/public', body)
}
delete(id: number): Observable<void> {
return this.api.delete<void>(`/recipe/${id}`)
}
}