-
Conteúdo Similar
-
Por eiwes
Eu tenho esse código, mas preciso retornar funções puras em vez de funções mutáveis.
É possível? Talvez usando OOP? Não sei como melhorar isso.
Tentei retornar os valores de cada função, mas não obtive sucesso.
import { AssetStatusType } from '@domain/interfaces/common' import { BothComponentType, ComponentsType, GroupFiltersType, OperationType, OverviewModelType, PendenciesOverviewType, PendenciesType, StructurePendenciesCount, StructureStatusCount } from '../../types' const updateStatusCount = ( statusCount: StructureStatusCount, status: AssetStatusType ) => { statusCount[status] = (statusCount[status] || 0) + 1 } const updatePendenciesCount = ( pendenciesCount: StructurePendenciesCount, key: AssetStatusType, subKey: OperationType | PendenciesOverviewType ) => { pendenciesCount[key] = pendenciesCount[key] ?? {} pendenciesCount[key][subKey] = (pendenciesCount[key]?.[subKey] || 0) + 1 } const processOverviewPendencies = ( pendencies: PendenciesType[] | null | undefined, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string ) => { if (pendencies?.length) { for (const { state, pendencyType } of pendencies) { const uniqueId = `${state}-${pendencyType}-${id}` if (!countedIds.has(uniqueId)) { updatePendenciesCount(pendenciesCount, state, pendencyType) countedIds.add(uniqueId) } } } } const processOverviewComponents = ( components: ComponentsType[], isGroupByTree: boolean, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string, type: BothComponentType ) => { for (const { pendencies, status, operationType } of components) { if (isGroupByTree && type === 'location') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewPendencies(pendencies, pendenciesCount, countedIds, id) } } const processOverviewData = ( data: OverviewModelType[], groupBy: GroupFiltersType, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string> ) => { const isGroupByTree = groupBy === 'tree' const isGroupByAsset = groupBy === 'asset' for (const { id, status, components, operationType, type } of data) { if (isGroupByAsset || type === 'asset') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewComponents( components, isGroupByTree, statusCount, pendenciesCount, countedIds, id, type ) } } export const calculateOverviewCounts = ( data: OverviewModelType[], groupBy: GroupFiltersType ) => { const statusCount: StructureStatusCount = {} as StructureStatusCount const pendenciesCount: StructurePendenciesCount = {} as StructurePendenciesCount const countedIds = new Set<string>() processOverviewData(data, groupBy, statusCount, pendenciesCount, countedIds) return { ...statusCount, pendencies: pendenciesCount } } Existe uma maneira mais limpa e elegante de fazer isso? Preciso retornar um objeto como este:
// calculateOverviewCounts return this { pendencies: StructurePendenciesCount; working: number; inAlert: number; warning: number; stopped: number; off: number; } StructurePendenciesCount é:
-
Por araujoitalo
Olá a todos!
Estou trabalhando em uma tabela utilizando a bilioteca ng2-smart-table e estou com uma dificuldade em passar para um componente customizado os valores inseridos na linha de edição:
Veja o código abaixo, gostaria de passar para o componente SmartTableEditorFunctionsComponent os valores de Temperatura Máxima e Minima ao inserir uma nova linha na tabela.
temperaturaMaxima: { type: 'number', title: 'Temperatura Máxima', }, temperaturaMinima: { title: 'Temperatura Mínima', type: 'number', }, temperaturaMedia: { title: 'Temperatura Média', type: 'number', editor: { type: 'custom', component: SmartTableEditorFunctionsComponent, valuePrepareFunction(instance) { instance.save.subscribe(); }, }, },
Imagem da tabela:
Criei um botão para tentar recuperar o valor, porem sem sucesso.
Código do componente:
export class SmartTableEditorFunctionsComponent extends DefaultEditor { @Input() value: string | number; @Input() rowData: any; @Output() save: EventEmitter<any> = new EventEmitter(); constructor() { super(); } getPlaceholder(value: any) { const id = value.column.temperaturaMaxima; return id; } test() { const id = this.rowData.temperaturaMaxima; alert('TESTE' + id); } } Código do template do componente:
{{ cell.newValue }} <input type="number" [(ngModel)]="cell.newValue" [name]="cell.getId()" [placeholder]="cell.getTitle()" [disabled]="!cell.isEditable()" (click)="onClick.emit($event)" /> <button (click)="test()">Pega Valor</button> Alguém poderia me ajudar?
-
Por araujoitalo
Olá a todos!
Estou trabalhando em uma tabela utilizando a bilioteca ng2-smart-table e estou com uma dificuldade em passar para um componente customizado os valores inseridos na linha de edição:
Veja o código abaixo, gostaria de passar para o componente SmartTableEditorFunctionsComponent os valores de Temperatura Máxima e Minima ao inserir uma nova linha na tabela.
temperaturaMaxima: { type: 'number', title: 'Temperatura Máxima', }, temperaturaMinima: { title: 'Temperatura Mínima', type: 'number', }, temperaturaMedia: { title: 'Temperatura Média', type: 'number', editor: { type: 'custom', component: SmartTableEditorFunctionsComponent, valuePrepareFunction(instance) { instance.save.subscribe(); }, }, },
Imagem da tabela:
Criei um botão para tentar recuperar o valor, porem sem sucesso.
Código do componente:
export class SmartTableEditorFunctionsComponent extends DefaultEditor { @Input() value: string | number; @Input() rowData: any; @Output() save: EventEmitter<any> = new EventEmitter(); constructor() { super(); } getPlaceholder(value: any) { const id = value.column.temperaturaMaxima; return id; } test() { const id = this.rowData.temperaturaMaxima; alert('TESTE' + id); } } Código do template do componente:
{{ cell.newValue }} <input type="number" [(ngModel)]="cell.newValue" [name]="cell.getId()" [placeholder]="cell.getTitle()" [disabled]="!cell.isEditable()" (click)="onClick.emit($event)" /> <button (click)="test()">Pega Valor</button> Alguém poderia me ajudar?
-
Por Lucas.RR
Boa tarde a todos, estou tentando fazer um autocomplete com suggestion e uso o TypeScript, vi esta aplicação no youtube mas sem utilizar o TypeScript.
Quando rodo a aplicação ela funciona, mas mostra erro na pagina quando é carregada, por causa da falta de tipagem, gostaria de saber como fazer.
A aplicação funciona assim:
carrego os nomes que tenho no banco de dados vindos do back:
useEffect(() => { const loadUsers = async() => { const response = await api.get('/cadastrousuarios'); setUsers(response.data); console.log(response.data); } loadUsers(); }, []); na propriedade do input onChange eu chamei onChangeHandler:
<input type='text' className='col-md-12 input' onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeHandler(e.target.value)} value={text}/>
É no onChangeHandler que esta o problema, o código pega o valor que do get em .json e procura na coluna_nome os valores que são inputados no input e mostra as sugestões:
const onChangeHandler = (text: any) => { let matches: React.SetStateAction<never[]>= []; if (text.length>0){ matches = users.filter( user => { const regex = new RegExp(`${text}`, 'ig'); return user.coluna_nome.match(regex); }) } setSuggestions(matches) setText(text) } no return user.coluna_nome.match(regex) da erro no .coluna_nome. o erro é: Property 'coluna_nome' does not exist on type 'never'.ts(2339).
Sei que é problema de tipagem mas não sei como fazer a tipagem desse item, poderiam me ajudar por favor.
Obs: Quando abro a pagina da erro por causa dessa tipagem, mas eu fecho o erro e funciona certinho!
-
Por Lucas.RR
Boa tarde a todos, estou tentando fazer um autocomplete com suggestion e uso o TypeScript, vi esta aplicação no youtube mas sem utilizar o TypeScript.
Quando rodo a aplicação ela funciona, mas mostra erro na pagina quando é carregada, por causa da falta de tipagem, gostaria de saber como fazer.
A aplicação funciona assim:
carrego os nomes que tenho no banco de dados vindos do back:
useEffect(() => { const loadUsers = async() => { const response = await api.get('/cadastrousuarios'); setUsers(response.data); console.log(response.data); } loadUsers(); }, []); napropriedade do input onChange eu chamei onChangeHandler:
<input type='text' className='col-md-12 input' onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeHandler(e.target.value)} value={text}/>
É no onChangeHandler que esta o problema:
const onChangeHandler = (text: any) => { let matches: React.SetStateAction<never[]>= []; if (text.length>0){ matches = users.filter( user => { const regex = new RegExp(`${text}`, 'ig'); return user.coluna_nome.match(regex); }) } setSuggestions(matches) setText(text) } no return user.coluna_nome.match(regex) da erro no .coluna_nome. o erro é: Property 'coluna_nome' does not exist on type 'never'.ts(2339).
Sei que é problema de tipagem mas não sei como fazer a tipagem desse item, poderiam me ajudar por favor.
-
