Ainias/prayercircle
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
silas
2021-12-12 18:06:33 +01:00
parent afb278ad87
commit 7611c41c67
9 changed files with 171 additions and 9412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/client/ts/PrayerCircle/PartnerTable.tsx
View File

@@ -2,7 +2,7 @@ import * as React from 'react';
import { useCallback, useMemo } from 'react';
import { useAppDispatch, useAppSelector } from '../Store/reduxHooks';
import { selectMemberIds, setWeek } from './prayerCircleSlice';
import { Button, Flex, Grow, Table } from 'react-bootstrap-mobile';
import { Body, Button, Column, ColumnCellData, Flex, Grow, Table } from 'react-bootstrap-mobile';
import { PrayerCircleCalculator } from './PrayerCircleCalculator';
export type PartnerTableProps = {};
@@ -16,8 +16,8 @@ function PartnerTable({}: PartnerTableProps) {
const usePartners = useAppSelector((state) => state.prayerCircle.usePartners);
const dispatch = useAppDispatch();
const columnsWeek = useMemo(
() => [
const columnsWeek = useMemo(() => {
const columns: Column<string> = [
{
Header: 'Partner 1',
accessor: 'partner1', // accessor is the "key" in the data
@@ -25,13 +25,55 @@ function PartnerTable({}: PartnerTableProps) {
{
Header: 'Partner 2',
accessor: 'partner2',
width: '50%',
},
],
[]
);
];
if (!usePartners) {
columns.splice(1, 0, {
Header: '',
id: 'prayingTitles',
Cell: () => (
<>
<Body block={true}>Ich bete für</Body>
<Body block={true} prio="secondary" size="small">
Für mich betet
</Body>
</>
),
});
// columns[0].Cell = (cellData: ColumnCellData<string>) => {
// const partner = cellData.value;
// console.log('cellData', cellData);
// return (
// <div>
// <Body>{partner}</Body>
// <span>
// {/* <Body>Ich bete für</Body> */}
// <Body prio="secondary" size="small">
// Für mich betet
// </Body>
// </span>
// </div>
// );
// };
const columnsWeekdays = useMemo(
() => [
columns[2].Cell = ({ cell: { column, row }, value: partner }: ColumnCellData<string>) => {
const other = row.original[`${column.id}Other`];
return (
<>
<Body block={true}>{partner}</Body>
<Body block={true} prio="secondary" size="small">
{other}
</Body>
</>
);
};
}
return columns;
}, [usePartners]);
const columnsWeekdays = useMemo(() => {
const columns: Column<string> = [
{
Header: 'Person',
accessor: 'person', // accessor is the "key" in the data
@@ -64,9 +106,44 @@ function PartnerTable({}: PartnerTableProps) {
Header: 'So',
accessor: 'day6',
},
],
[]
);
];
if (!usePartners) {
columns[0].Cell = ({ value: partner }: ColumnCellData<string>) => {
return (
<Flex>
<Grow>{partner}</Grow>
<Grow>
<Body block={true}>Ich bete für</Body>
<Body block={true} prio="secondary" size="small">
Für mich betet
</Body>
</Grow>
</Flex>
);
};
const renderFunction = (cellData: ColumnCellData<string>) => {
const partner = cellData.value;
const other = cellData.cell.row.original[`${cellData.cell.column.id}Other`];
return (
<>
<Body block={true}>{partner}</Body>
<Body block={true} prio="secondary" size="small">
{other}
</Body>
</>
);
};
columns[1].Cell = renderFunction;
columns[2].Cell = renderFunction;
columns[3].Cell = renderFunction;
columns[4].Cell = renderFunction;
columns[5].Cell = renderFunction;
columns[6].Cell = renderFunction;
columns[7].Cell = renderFunction;
}
return columns;
}, [usePartners]);
// States
@@ -79,45 +156,53 @@ function PartnerTable({}: PartnerTableProps) {
// Effects
// Other
const partnerTable = useMemo(
const [partnerTable, invertedPartnerTable] = useMemo(
() => PrayerCircleCalculator.generateTableFor(membersIds, usePartners),
[membersIds, usePartners]
);
if (!partnerTable || membersIds.length === 0) {
if (!partnerTable || !invertedPartnerTable || membersIds.length === 0) {
return null;
}
const partnerTableNames = partnerTable.map((partnerColumn) => {
// console.log(partnerTable, invertedPartnerTable);
const partnerTableNames = partnerTable.map((partnerColumn, index) => {
return Object.keys(partnerColumn).map((id) => {
const name = members[id]?.name ?? id;
const partnerName = members[partnerColumn[id]]?.name ?? partnerColumn[id];
return [name, partnerName];
}) as [string, string][];
const otherPartnerName = members[invertedPartnerTable[index][id]]?.name ?? invertedPartnerTable[index][id];
return [name, partnerName, otherPartnerName];
}) as [string, string, string][];
});
let data: Record<string, string>[] = [];
if (!useWeekdays) {
const column = partnerTableNames[week % partnerTableNames.length];
data = column.map(([name1, name2]) => ({
data = column.map(([name1, name2, name3]) => ({
partner1: name1,
partner2: name2,
partner2Other: name3,
}));
} else {
data = [];
for (let i = 0; i < 7; i++) {
const column = partnerTableNames[(week * 7 + i) % partnerTableNames.length];
column.forEach(([name1, name2], index) => {
const colIndex = (week * 7 + i) % partnerTableNames.length;
const column = partnerTableNames[colIndex];
column.forEach(([person, partner1, partner2], index) => {
if (!data[index]) {
data[index] = { person: name1 };
data[index] = { person };
}
data[index][`day${i}`] = name2;
data[index][`day${i}`] = partner1;
data[index][`day${i}Other`] = partner2;
});
}
}
const columns = useWeekdays ? columnsWeekdays : columnsWeek;
// Render Functions
return (
<>
<Flex>