refactor: from class to function component and adds dark theme

plugins/cmyk-participation-datatable/datatable-columns.ts

@@ -0,0 +1,127 @@
+import {
+  projectsLabels,
+  stackWantedLabels,
+  workExperienceLabels,
+} from './datatable-labels';
+import { MUIDataTableProps } from 'mui-datatables';
+
+export const columns: MUIDataTableProps['columns'] = [
+  {
+    name: '_createdAt',
+    label: 'Fecha',
+    options: {
+      filter: false,
+      sort: true,
+      customBodyRender: (value) => new Date(value).toLocaleString(),
+    },
+  },
+  {
+    name: 'discordUser',
+    label: 'Usuario',
+    options: {
+      filter: false,
+      sort: true,
+    },
+  },
+  {
+    name: 'email',
+    label: 'Email',
+    options: {
+      filter: false,
+      sort: true,
+    },
+  },
+  {
+    name: 'timezone',
+    label: 'Zona Horaria',
+    options: {
+      filter: true,
+      sort: true,
+    },
+  },
+  {
+    name: 'timeAvailability',
+    label: 'Disponibilidad horaria (semanal)',
+    options: {
+      filter: false,
+      sort: true,
+      customBodyRender: (value) =>
+        value === '>2<4hours'
+          ? 'Entre 2 y 4 horas'
+          : value === '>4<6hours'
+          ? 'Entre 4 y 6 horas'
+          : 'Más de 6 horas',
+    },
+  },
+  {
+    name: 'aboutParticipant',
+    label: 'Sobre mí',
+    options: {
+      filter: false,
+      sort: false,
+    },
+  },
+  {
+    name: 'participationType',
+    label: 'Form',
+    options: {
+      filter: true,
+      sort: true,
+      customBodyRender: (value) =>
+        value === 'lider' ? 'Líder' : 'Participante',
+    },
+  },
+  {
+    name: 'workExperience',
+    label: 'Experiencia Laboral',
+    options: {
+      filter: true,
+      sort: true,
+      customBodyRender: (value) => workExperienceLabels[value],
+    },
+  },
+  {
+    name: 'stackWanted',
+    label: 'Front o Back',
+    options: {
+      filter: true,
+      sort: true,
+      customBodyRender: (value) => stackWantedLabels[value],
+    },
+  },
+  {
+    name: 'projects',
+    label: 'Proyecto',
+    options: {
+      filter: true,
+      sort: true,
+      customBodyRender: (value) => projectsLabels[value],
+    },
+  },
+  {
+    name: 'previousKnowledge',
+    label: 'Conocimientos',
+    options: {
+      filter: false,
+      sort: false,
+    },
+  },
+  {
+    name: 'otherQuestions',
+    label: 'Otras preguntas',
+    options: {
+      filter: false,
+      sort: false,
+    },
+  },
+  {
+    name: 'status',
+    label: 'Estado',
+    options: {
+      filter: true,
+      sort: true,
+      customBodyRender: (value) =>
+        value === 'revision' ? '🟡' : value === 'approved' ? '🟢' : '🔴',
+    },
+  },
+];

plugins/cmyk-participation-datatable/datatable-labels.ts

@@ -0,0 +1,20 @@
+export const workExperienceLabels = {
+  level0: 'Hasta 6 meses',
+  level1: 'Entre 6 meses y 1 año',
+  level2: 'Más de un año',
+  level3: 'Hasta 1 año',
+  level4: 'Entre 1 año y 3 años',
+  level5: 'Más de 3 años',
+} as const;
+
+export const stackWantedLabels = {
+  front: 'Frontend (React)',
+  back: 'Backend (Node/Express)',
+  both: 'Ambos',
+} as const;
+
+export const projectsLabels = {
+  flashcards: 'App Flashcards',
+  callForPapers: 'App Administrador call for papars',
+  both: 'No tengo preferencias',
+} as const;

plugins/cmyk-participation-datatable/datatable-options.ts

@@ -0,0 +1,38 @@
+import { MUIDataTableProps } from 'mui-datatables';
+
+export const options: MUIDataTableProps['options'] = {
+  downloadOptions: { filename: 'cmypParticipantsList.csv', separator: ';' },
+  selectableRowsHeader: false,
+  selectableRowsHideCheckboxes: true,
+  rowsPerPage: 15,
+  rowsPerPageOptions: [10, 15, 20, 30, 50],
+  textLabels: {
+    body: {
+      noMatch: 'No hay resultados',
+      toolTip: 'Sort',
+      columnHeaderTooltip: (column) => `Ordenar por ${column.label}`,
+    },
+    pagination: {
+      next: 'Siguiente',
+      previous: 'Anterior',
+      rowsPerPage: 'Filas por página:',
+      displayRows: 'de',
+    },
+    toolbar: {
+      search: 'Buscar',
+      downloadCsv: 'Descargar CSV',
+      print: 'Imprimir',
+      viewColumns: 'Ver Columnas',
+      filterTable: 'Filtrar Tabla',
+    },
+    filter: {
+      all: 'Todos',
+      title: 'FILTROS',
+      reset: 'RESET',
+    },
+    viewColumns: {
+      title: 'Ver Columnas',
+      titleAria: 'Mostrar/Ocultar Columnas',
+    },
+  },
+};

plugins/cmyk-participation-datatable/datatable-theme.ts

@@ -0,0 +1,128 @@
+import { createTheme } from '@material-ui/core';
+
+export const datatableTheme = createTheme({
+  overrides: {
+    MuiPaper: {
+      root: {
+        color: 'inherit',
+        backgroundColor: 'inherit',
+        display: 'flex',
+        flexDirection: 'column',
+      },
+    },
+
+    MuiToolbar: {
+      root: {
+        '& [class*="actions"]': {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.25rem',
+          flex: '0 1 auto',
+        },
+      },
+    },
+
+    MuiButton: {
+      root: {
+        color: 'inherit',
+        '&:hover': {
+          backgroundColor: 'rgb(128 128 128 / 15%) !important',
+        },
+        '& [class*="sortActive"]': {
+          color: 'var(--card-focus-ring-color)',
+        },
+      },
+    },
+
+    MuiTableSortLabel: {
+      icon: {
+        color: 'var(--card-focus-ring-color) !important',
+      },
+    },
+
+    MuiIconButton: {
+      root: {
+        padding: '.5rem',
+        color: 'inherit',
+        '&:hover': {
+          backgroundColor: 'rgb(128 128 128 / 15%) !important',
+        },
+        '&.Mui-disabled': {
+          color: 'rgb(128 128 128 / 50%)',
+        },
+      },
+    },
+
+    MUIDataTableSearch: {
+      searchIcon: {
+        color: 'inherit',
+      },
+    },
+    MuiInputBase: {
+      root: {
+        color: 'inherit',
+      },
+    },
+
+    MUIDataTableHeadCell: {
+      fixedHeader: {
+        color: 'inherit',
+        backgroundColor: 'inherit',
+        borderTop: '1px solid var(--card-border-color)',
+        borderBottom: '1px solid var(--card-border-color)',
+        whiteSpace: 'nowrap',
+      },
+    },
+
+    MuiPopover: {
+      paper: {
+        backgroundColor: '#fafafa',
+      },
+    },
+
+    MUIDataTableBodyRow: {
+      responsiveStacked: {
+        '&': {
+          borderColor: 'var(--card-border-color)',
+        },
+      },
+    },
+
+    MuiTableCell: {
+      body: {
+        color: 'inherit',
+      },
+      footer: {
+        color: 'inherit',
+      },
+    },
+    MUIDataTableBodyCell: {
+      stackedParent: {
+        borderColor: 'var(--card-border-color)',
+      },
+    },
+
+    MuiTableRow: {
+      root: {
+        '&.MuiTableRow-hover': {
+          '&:hover': {
+            backgroundColor: 'rgb(128 128 128 / 15%)',
+          },
+        },
+      },
+    },
+
+    MuiTablePagination: {
+      root: {
+        color: 'inherit',
+      },
+    },
+    MuiSelect: {
+      icon: {
+        color: 'inherit',
+      },
+    },
+  },
+});
+
+export default datatableTheme;