ng-components-tsi 0.0.38 → 0.0.39

package/src/lib/ui/tables/table-advance/table-advance.component.scss

@@ -1,282 +0,0 @@
-.flex-table {
-  width: 100%;
-  ;
-  min-width: max-content;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-
-.flex-table th,
-td {
-  border: 1px solid #ddd;
-  padding: 8px;
-  position: relative;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 40px;
-}
-
-.flex-table th {
-  transition: width 0.1s ease-out;
-  padding-right: 15px;
-}
-
-.resize-handle {
-  width: 5px;
-  height: 100%;
-  background: rgb(215, 215, 215);
-  position: absolute;
-  right: 0;
-  top: 0;
-  cursor: ew-resize;
-  user-select: none;
-}
-
-
-.flex-table thead tr th {
-  font-size: 12px;
-  font-weight: bold;
-  color: black;
-  border: none;
-  border-bottom: 1px solid rgb(206, 206, 206);
-}
-
-
-.flex-table tbody tr td {
-  font-size: 11px;
-  font-weight: 600;
-  color: black;
-  border: none;
-  border-bottom: 1px solid rgb(206, 206, 206);
-  padding-top: 7px;
-  padding-bottom: 7px;
-}
-
-.flex-table tbody tr {
-  transition: transform 0.3s ease-in-out, opacity 0.6s ease-in-out;
-}
-
-
-thead {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.icon-sort {
-  font-size: 11px;
-}
-
-.collapsed {
-  display: none;
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
-}
-
-.expand-row {
-  max-height: 100px;
-  opacity: 1;
-  transition: max-height 0.4s ease-in, opacity 0.3s ease-in;
-}
-
-.table-container {
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  display: block;
-  white-space: nowrap;
-}
-
-.text-error {
-  color: rgb(214, 0, 0) !important;
-  font-weight: bold !important;
-}
-
-.text-error2 {
-  color: rgb(214, 0, 0);
-  font-weight: bold !important;
-}
-
-.text-exito {
-  color: rgb(0, 119, 60) !important;
-  font-weight: bold !important;
-}
-
-.text-alerta {
-  color: rgb(233, 167, 0) !important;
-  font-weight: bold !important;
-}
-
-.text-exito2 {
-  color: rgb(0, 119, 60);
-  font-weight: bold !important;
-}
-
-@media (max-width:1600px) {
-  .flex-table tbody tr td {
-    font-size: 9px;
-  }
-
-  .flex-table thead tr th {
-    font-size: 10px;
-  }
-}
-
-.table-blank {
-  --bs-table-bg-state: white !important
-}
-
-.normal-table thead tr th {
-  font-size: 12px;
-  
-  text-align: center;
-  font-weight: bold;
-  //color: black;
-  max-width: 220px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-weight: 600;
-  //border: 1px solid rgb(226, 226, 226);
-}
-
-.normal-table tbody tr {
-  height: 30px;
-}
-
-.normal-table tbody tr td {
-  font-size: 11px;
-  vertical-align: middle;
-  font-weight: 500;
-  //color: black;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  //border: 1px solid rgb(226, 226, 226);
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.normal-table thead {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-@media (max-width:1600px) {
-  .normal-table tbody tr td {
-    font-size: 9px;
-  }
-
-  .normal-table thead tr th {
-    font-size: 10px;
-  }
-}
-
-.grilla-error td {
-  color: rgb(214, 0, 0) !important;
-}
-
-.auditoria {
-  padding-left: 35px;
-  padding-top: 8px;
-  padding-bottom: 10px;
-}
-
-.popover-menu-column {
-  position: absolute;
-  top: 100%; 
-  left: 0;
-  border-radius: 0.375rem;
-  padding: 0rem 0.75rem;
-  display: block;
-  max-height: 300px;  
-  width: 250px;  
-  overflow-y: auto;
-}
-
-.popover-title {
-  font-weight: 700;
-  margin-bottom: 0.7rem;
-  margin-left: -0.75rem; 
-  margin-right: -0.75rem; 
-  padding: 0.4rem 0.75rem; 
-  border-bottom: 1px solid #7e7e7e;
-  position: sticky; 
-  top: 0; 
-  text-align: center;
-}
-
-.popover-menu-column::-webkit-scrollbar {
-  width: 5px;
-}
-
-.popover-menu-column::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-}
-
-.popover-menu-column::-webkit-scrollbar-thumb {
-  background-color: #d7d7d7;
-  border-radius: 4px;
-  border: 2px solid transparent;
-}
-
-.popover-menu-filter {
-  position: absolute;
-  top: 85%; 
-  right: 0;
-  background-color: rgb(255, 255, 255);
-  border: 1px solid #ddd;
-  border-radius: 0.375rem;
-  padding: 0rem 0.75rem;
-  display: block;
-  max-height: 300px;  
-  width: 250px;  
-  overflow-y: auto;
-  z-index: 2;
-}
-
-.popover-menu-filter::-webkit-scrollbar {
-  width: 5px;
-}
-
-.popover-menu-filter::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
-}
-
-.popover-menu-filter::-webkit-scrollbar-thumb {
-  background-color: #d7d7d7;
-  border-radius: 4px;
-  border: 2px solid transparent;
-}
-
-.font-label{
-  font-weight: 500 !important;
-}
-.mtn-0{
-  margin-top: 0px;
-}
-
-.normal-table tfoot tr {
-  height: 50px;
-}
-
-.normal-table tfoot tr td {
-  font-size: 11px;
-  vertical-align: middle;
-  font-weight: 500;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.normal-table tfoot {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-}

package/src/lib/ui/tables/table-advance/table-advance.component.ts

@@ -1,421 +0,0 @@
-import { CommonModule, DatePipe, DecimalPipe } from '@angular/common';
-import { Component, computed, ContentChild, effect, ElementRef, inject, input, linkedSignal, model, output, QueryList, signal, TemplateRef, untracked, ViewChild, ViewChildren } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { DropdownCdkComponent } from "../../dropdown/dropdown-cdk/dropdown-cdk.component";
-import { dropdownAnimation, fadeInOut } from '../../../directivas/animaciones/fade-animation';
-import { CellRender, CellRendered } from '../../../models/cell-rendered';
-import { validarBoolean } from 'shared-tsi';
-
-@Component({
-  selector: 'app-table-advance',
-  imports: [FormsModule, CommonModule, DatePipe, DecimalPipe, DropdownCdkComponent],
-  templateUrl: './table-advance.component.html',
-  styleUrl: './table-advance.component.scss',
-  animations: [dropdownAnimation, fadeInOut],
-  providers: [DatePipe, DecimalPipe]
-})
-
-export class TableAdvanceComponent {
-
-  @ViewChildren('thElement') tableHeaders!: QueryList<ElementRef>
-  @ContentChild('customActions', { static: false }) customActions!: TemplateRef<any>
-
-  private datePipe = inject(DatePipe)
-  private decimalPipe = inject(DecimalPipe)
-
-  rows = input<any[]>([])
-  columns = input<any[]>([])
-  withDetails = input<boolean>(false)
-  withFiltro = input<boolean>(false)
-  altoContainer = input<number>()
-
-  emitirBusqueda = output<string>()
-  emitirCheck = output<any>()
-  emitirCheckCabecera = output<any>()
-  emitirRadio = output<any>()
-  emitirColumnasFiltrables = output<any>()
-
-  colorHeader = input<'normal' | 'light'>('normal')
-  isDarkMode = input<boolean>(false)
-  busqueda = signal<string>('')
-
-  selectedRow = model<any>(null)
-
-  identifier = input<string[]>([])
-
-  altoContenedor = signal<number>(0)
-
-  showPopoverColumn = signal<boolean>(false)
-
-  showPopoverFilter = signal<boolean>(false)
-
-  isHeaderOperation = signal<boolean>(false)
-
-  withHeight = input<boolean>(false)
-  rendered = input<CellRendered[]>([])
-  withTotal = input<boolean>(false)
-  withCheckbox = input<boolean>(false)
-  selectItems = model<(number | string)[]>([])
-
-  rowEvent = output<any>()
-
-  rowFilter = computed(() => {
-    const term = this.busqueda().toLowerCase()
-    const currentRows = this.rows?.() || []
-    return currentRows.filter(item => this.filtraItem(item, term))
-  })
-
-  filtrarColumnas = linkedSignal(() => {
-    const columns = this.columns()
-    const filtro: { [caption: string]: boolean } = {}
-    columns.forEach((col) => {
-      if (col.fieldname) {
-        filtro[col.fieldname] = true
-      }
-    })
-    return filtro
-  })
-
-  toggleFiltros(event: Event) {
-    const checked = (event.target as HTMLInputElement).checked
-    const filtros = this.filtrarColumnas()
-    Object.keys(filtros).forEach(key => {
-      filtros[key] = checked
-    })
-  }
-
-  visibilidadColumn = linkedSignal(() => {
-    const columns = this.columns()
-    const columnVisibility: { [caption: string]: boolean } = {}
-    columns.forEach((col) => {
-      if (col.caption) {
-        columnVisibility[col.caption] = true
-      }
-    })
-    return columnVisibility
-  })
-
-  concatenarValue(obj: any, value: string[]) {
-    let result = ''
-    value.forEach(el => {
-      result += obj[el]
-    })
-    return result
-  }
-
-  checkString = {
-    'S': 'Activo',
-    'N': 'Inactivo'
-  }
-
-  sortColumn: string | null = null
-  sortDirection: 'asc' | 'desc' = 'asc'
-
-  expandedRows: number = -1
-
-  constructor() {
-    effect(() => {
-      const size = (this.rowFilter() ?? []).length
-
-      const alto = this.altoContainer()
-      if (alto > 0 && alto < this.altoContenedor()) {
-        setTimeout(() => {
-          this.altoContenedor.set(alto)
-        }, 300)
-      }
-      if (alto > 0 && alto > this.altoContenedor()) {
-        this.altoContenedor.set(alto)
-      }
-
-      const selected = untracked(() => this.selectedRow())
-      if (size > 0 && selected) {
-        queueMicrotask(() => {
-          const el = document.getElementById('row_table_' + selected)
-          el?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-        })
-      }
-    })
-  }
-
-  togglePopoverColumn() {
-    this.showPopoverColumn.update(prev => !prev)
-  }
-
-  togglePopoverFilter() {
-    this.showPopoverFilter.update(prev => !prev)
-  }
-
-  selectRow(index: any) {
-    if (this.identifier().length < 1) {
-      return this.selectedRow.set(index)
-    }
-    this.selectedRow.set(this.concatenarValue(index, this.identifier()))
-  }
-
-  getTipoCampo(fieldname: string): string {
-    const columna = this.columns().find(col => col.fieldname == fieldname)
-    return columna?.tipo ?? 'string'
-  }
-
-  sortTable(column: string) {
-    if (this.sortColumn == column) {
-      this.sortDirection = this.sortDirection == 'asc' ? 'desc' : 'asc'
-    } else {
-      this.sortColumn = column
-      this.sortDirection = 'asc'
-    }
-
-    this.rowFilter().sort((a, b) => {
-      const valueA = a[column] ?? ''
-      const valueB = b[column] ?? ''
-
-      if (typeof valueA == 'number' && typeof valueB == 'number') {
-        return this.sortDirection == 'asc' ? valueA - valueB : valueB - valueA
-      } else {
-        return this.sortDirection == 'asc'
-          ? valueA.toString().localeCompare(valueB.toString())
-          : valueB.toString().localeCompare(valueA.toString())
-      }
-    })
-  }
-
-  toggleExpandRow(index: number) {
-    this.expandedRows = this.expandedRows == index ? -1 : index
-  }
-
-  textoDigitado(event: Event) {
-    const value = (event.target as HTMLInputElement).value
-    this.busqueda.set(value)
-  }
-
-  getHighlight(text: any, fieldname: string): string {
-    if (text == null) {
-      text = ''
-    }
-    if (!this.filtrarColumnas()[fieldname] || !this.busqueda()) return text
-    if (typeof text !== 'string') {
-      text = text.toString()
-    }
-    const regex = new RegExp(`(${this.busqueda()})`, 'gi')
-    return text?.replace(regex, '<mark>$1</mark>')
-  }
-
-  desglozarValor = (valor: string) => {
-    return valor!.split(',')
-  }
-
-  getSituacionNumberFromColumns(row: any, columns: any[]): number {
-    const situacionColumn = columns.find(col => col.type == 'situacion_number')
-    if (situacionColumn) {
-      return row[situacionColumn.prop] || 0
-    }
-    return 0
-  }
-
-  clickCheck(item: string, event: Event, row: any) {
-    if (this.isHeaderOperation()) return
-
-    const check = event.target as HTMLInputElement
-    const resultCheck = check.checked ? 1 : 0
-    const mes = item.at(-1)
-    const formatObj = { ...row, check: resultCheck, mes }
-    this.emitirCheck.emit(formatObj)
-  }
-
-  areAllChecked(fieldname: string): boolean {
-    const rows = this.rowFilter()
-    return rows.length > 0 && rows.every(row => row[fieldname] == 1 || row[fieldname] == 'S')
-  }
-
-  toggleAllCheckboxes(event: Event, fieldname: string, rows: any[]) {
-    const check = event.target as HTMLInputElement
-    this.isHeaderOperation.set(true)
-
-    rows.forEach(row => {
-      row[fieldname] = check.checked ? 'S' : 0
-    })
-
-    const formatObj = {
-      ...rows,
-      todos: check.checked ? 'S' : 'N',
-      field: fieldname
-    }
-    this.emitirCheckCabecera.emit(formatObj)
-    this.isHeaderOperation.set(false)
-  }
-
-  clickRadio(row: any) {
-    const formatObj = { ...row }
-    this.emitirRadio.emit(formatObj)
-  }
-
-  private filtraItem(item: any, term: string): boolean {
-    const columnasActivas = Object.entries(this.filtrarColumnas())
-      .filter(([_campo, activo]) => activo)
-    return columnasActivas.some(([campo]) => {
-      let valor = item[campo]
-      const tipo = this.getTipoCampo(campo)
-      switch (tipo) {
-        case 'fecha':
-          valor = this.datePipe.transform(valor, 'dd/MM/yyyy') ?? ''
-          break
-        case 'decimal':
-          valor = this.decimalPipe.transform(valor, '1.2-2') ?? ''
-          break
-        case 'check':
-          valor = valor ? 'Sí' : 'No'
-          break
-        default:
-          valor = (valor ?? '').toString()
-      }
-      return valor.toLowerCase().includes(term)
-    })
-  }
-
-  validaVisibilidad(value: boolean) {
-    return validarBoolean(value)
-  }
-
-  allCheck(event: Event) {
-    const input = event.target as HTMLInputElement
-    if (input.checked) {
-      const keys = this.rowFilter().map(row => JSON.stringify(row))
-      this.selectItems.set(keys)
-    } else {
-      this.selectItems.set([])
-    }
-  }
-
-  validaAllCheck(): boolean {
-    const keys = this.rowFilter().map(row => JSON.stringify(row))
-    return (
-      keys.length > 0 &&
-      keys.every(k => this.selectItems().includes(k))
-    )
-  }
-
-  isItemSelected(index: number): boolean {
-    const row = this.rowFilter()[index]
-    const key = JSON.stringify(row)
-    return this.selectItems().includes(key)
-  }
-
-  toogleItem(index: number, event: Event) {
-    const input = event.target as HTMLInputElement
-    const row = this.rowFilter()[index]
-    const key = JSON.stringify(row)
-
-    if (input.checked) {
-      this.selectItems.update(sel => [...sel, key])
-      return
-    }
-    this.selectItems.update(sel => sel.filter(s => s != key))
-  }
-
-  resolveCell(col: string, row: any): CellRender | null {
-    const value = row[col]
-    const r = this.rendered().find(r => r.matches(col, value, row))
-    return r ? r.render(value, row) : null
-  }
-
-  getTotals(fieldname: string): number {
-    const itemsSelected = this.withCheckbox() ? this.selectItems().map(item => JSON.parse(item?.toString())) : this.rows()
-    return itemsSelected.reduce((acc, row) => {
-      const val = row[fieldname]
-      return acc + (typeof val == 'number' ? val : 0)
-    }, 0)
-  }
-
-  getCampoCantidad(): string | null {
-    const col = this.columns().find(c => c.cantidadPonderado)
-    return col?.fieldname ?? null
-  }
-
-  getAverageSimple(fieldname: string): number {
-    const selected = this.withFiltro()
-      ? this.selectItems().map(item => JSON.parse(item.toString()))
-      : this.rows().filter((_item, index) => this.selectItems().includes(index))
-    const items = this.withCheckbox() ? selected : this.rows()
-    if (!items.length) return 0
-    const total = items.reduce((acc, row) => {
-      const val = row[fieldname]
-      return acc + (typeof val === 'number' ? val : 0)
-    }, 0)
-    return total / items.length
-  }
-
-  getAveragePonderado(fieldname: string): number {
-    const campoCantidad = this.getCampoCantidad()
-    if (!campoCantidad) return 0
-    const selected = this.withFiltro()
-      ? this.selectItems().map(item => JSON.parse(item.toString()))
-      : this.rows().filter((_item, index) => this.selectItems().includes(index))
-    const items = this.withCheckbox() ? selected : this.rows()
-    let sumaValor = 0
-    let sumaCantidad = 0
-    items.forEach(row => {
-      const valor = row[fieldname]
-      const cantidad = row[campoCantidad]
-      if (typeof valor == 'number' && typeof cantidad == 'number') {
-        sumaValor += valor * cantidad
-        sumaCantidad += cantidad
-      }
-    })
-    return sumaCantidad > 0 ? sumaValor / sumaCantidad : 0
-  }
-
-  getFooterSegments() {
-    const offset = [this.withDetails(), this.withCheckbox(), this.customActions]
-      .filter(Boolean).length
-    const columns = this.columns()
-    const calculables = columns.filter(c => c.totalizable || c.promedio)
-    if (!calculables.length) {
-      return [{ type: 'colspan', span: columns.length + offset }]
-    }
-    let span = offset
-    return columns.reduce((segments, col) => {
-      if (col.totalizable) {
-        if (span > 0) segments.push({ type: 'colspan', span })
-        segments.push({ type: 'total', field: col.fieldname })
-        span = 0
-      } else if (col.promedioSimple) {
-        if (span > 0) segments.push({ type: 'colspan', span })
-        segments.push({ type: 'averageSimple', field: col.fieldname })
-        span = 0
-      }
-      else if (col.promedioPonderado) {
-        if (span > 0) segments.push({ type: 'colspan', span })
-        segments.push({ type: 'averagePonderado', field: col.fieldname })
-        span = 0
-      } else {
-        span++
-      }
-      return segments
-    }, [] as Array<
-      | { type: 'colspan'; span: number }
-      | { type: 'total'; field: string }
-      | { type: 'averageSimple'; field: string }
-      | { type: 'averagePonderado'; field: string }
-    >).concat(span > 0 ? [{ type: 'colspan', span }] : [])
-  }
-  
-  getRowClass(row: any): { [key: string]: boolean } {
-    return {
-      'text-error': row.situac == 'J',
-      'text-alerta': row.situac == 'L'
-    }
-  }
-
-  onClick(row: any) {
-    return { usecase: 1, data: row }
-  }
-
-  onDoubleClick(row: any) {
-    return { usecase: 2, data: row }
-  }
-
-  onRightClick(event: MouseEvent, row: any) {
-    event.preventDefault();
-    return { usecase: 3, data: row }
-  }
-}