klas/tkb_timeshift
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add unformatted CB column and complete CA border structure

Browse Source 
- Add completely unformatted CB column at rightmost position
- Update all styling loops to exclude CB column from formatting
- Fix day names row borders to exclude CB from styling
- Add CB6 formatting removal to ensure clean appearance
- Complete CA column border structure with top borders on CA24 and CA28
- Maintain clean separation between formatted (CA) and unformatted (CB) columns

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Docker Config Backup
2025-08-06 07:53:52 +02:00
parent 38d88127ba
commit cb1901af3f
1 changed files with 36 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/timeshift-spreadsheet.tsx
View File

@@ -109,13 +109,13 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
"Robert Štefan" "Robert Štefan"
] ]
// Add one more column to the right // Add two more columns to the right (CA is formatted, CB will be unformatted)
titleRow.push("") titleRow.push("", "")
dayNameRow.push("") dayNameRow.push("", "")
yearRow.push("") yearRow.push("", "")
monthRow.push("") monthRow.push("", "")
dateRow.push("") dateRow.push("", "")
shiftRow.push("") shiftRow.push("", "")
const employeeRows = employees.map(name => { const employeeRows = employees.map(name => {
const row = [name] const row = [name]
@@ -304,30 +304,30 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
styles[`${colLetter}1`] = "height: 97px;" styles[`${colLetter}1`] = "height: 97px;"
} }
// Make day names row (row 2) taller and add top and left borders from column B onwards (except last two columns) // Make day names row (row 2) taller and add top and left borders from column B onwards (except last three columns)
for (let col = 0; col < (data[0]?.length || 0); col++) { for (let col = 0; col < (data[0]?.length || 0); col++) {
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
if (col === 0) { if (col === 0) {
// First column (A) - just height // First column (A) - just height
styles[`${colLetter}2`] = "height: 50px;" styles[`${colLetter}2`] = "height: 50px;"
} else if (colLetter === 'BZ' || colLetter === 'CA') { } else if (colLetter === 'BZ' || colLetter === 'CA' || colLetter === 'CB') {
// Last two columns (BZ, CA) - height only, no borders // Last three columns (BZ, CA, CB) - height only, no borders
styles[`${colLetter}2`] = "height: 50px;" styles[`${colLetter}2`] = "height: 50px;"
} else { } else {
// All other columns (B onwards except BZ, CA) - height + top and left borders // All other columns (B onwards except BZ, CA, CB) - height + top and left borders
styles[`${colLetter}2`] = "height: 50px; border-top: 1px solid #000000; border-left: 1px solid #000000;" styles[`${colLetter}2`] = "height: 50px; border-top: 1px solid #000000; border-left: 1px solid #000000;"
} }
} }
// Add top border to year row (row 3) from B3 to end of table (excluding A3 and last column) // Add top border to year row (row 3) from B3 to end of table (excluding A3 and last columns)
for (let col = 1; col < (data[0]?.length || 0) - 1; col++) { // Start from column B (index 1) for (let col = 1; col < (data[0]?.length || 0) - 2; col++) { // Start from column B (index 1), exclude CA and CB
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
const existingStyle = styles[`${colLetter}3`] || "" const existingStyle = styles[`${colLetter}3`] || ""
styles[`${colLetter}3`] = existingStyle + " border-top: 1px solid #000000;" styles[`${colLetter}3`] = existingStyle + " border-top: 1px solid #000000;"
} }
// Add top border to shift row (row 6) from A6 to end of table (excluding last column) // Add top border to shift row (row 6) from A6 to end of table (excluding last columns)
for (let col = 0; col < (data[0]?.length || 0) - 1; col++) { for (let col = 0; col < (data[0]?.length || 0) - 2; col++) { // Exclude CA and CB
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
const existingStyle = styles[`${colLetter}6`] || "" const existingStyle = styles[`${colLetter}6`] || ""
styles[`${colLetter}6`] = existingStyle + " border-top: 1px solid #000000;" styles[`${colLetter}6`] = existingStyle + " border-top: 1px solid #000000;"
@@ -335,7 +335,7 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
// Add left borders to columns B onwards for rows 3, 4, 5 (year, month, day) // Add left borders to columns B onwards for rows 3, 4, 5 (year, month, day)
for (let row = 3; row <= 5; row++) { for (let row = 3; row <= 5; row++) {
for (let col = 1; col < (data[0]?.length || 0) - 1; col++) { // Start from column B (index 1) for (let col = 1; col < (data[0]?.length || 0) - 2; col++) { // Start from column B (index 1), exclude CA and CB
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
const existingStyle = styles[`${colLetter}${row}`] || "" const existingStyle = styles[`${colLetter}${row}`] || ""
styles[`${colLetter}${row}`] = existingStyle + " border-left: 1px solid #000000;" styles[`${colLetter}${row}`] = existingStyle + " border-left: 1px solid #000000;"
@@ -362,8 +362,8 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
const nextColLetter = getExcelColumnName(col + 1) const nextColLetter = getExcelColumnName(col + 1)
// Weekend day name row (row 2) - merged cells with conditional borders // Weekend day name row (row 2) - merged cells with conditional borders
const hasBorders1 = colLetter !== 'BZ' && colLetter !== 'CA' ? " border-top: 1px solid #000000; border-left: 1px solid #000000;" : "" const hasBorders1 = colLetter !== 'BZ' && colLetter !== 'CA' && colLetter !== 'CB' ? " border-top: 1px solid #000000; border-left: 1px solid #000000;" : ""
const hasBorders2 = nextColLetter !== 'BZ' && nextColLetter !== 'CA' ? " border-top: 1px solid #000000; border-left: 1px solid #000000;" : "" const hasBorders2 = nextColLetter !== 'BZ' && nextColLetter !== 'CA' && nextColLetter !== 'CB' ? " border-top: 1px solid #000000; border-left: 1px solid #000000;" : ""
styles[`${colLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorders1}` // Weekend day name with conditional borders styles[`${colLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorders1}` // Weekend day name with conditional borders
styles[`${nextColLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorders2}` styles[`${nextColLetter}2`] = `background-color: #ffd966; height: 50px;${hasBorders2}`
@@ -378,9 +378,10 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
} }
} }
// Remove formatting specifically from BZ6 and CA6 cells // Remove formatting specifically from BZ6, CA6, and CB6 cells
styles["BZ6"] = "" // Override any formatting for BZ6 styles["BZ6"] = "" // Override any formatting for BZ6
styles["CA6"] = "" // Override any formatting for CA6 styles["CA6"] = "" // Override any formatting for CA6
styles["CB6"] = "" // Override any formatting for CB6
// Remove top border from BZ3 cell // Remove top border from BZ3 cell
styles["BZ3"] = (styles["BZ3"] || "").replace(" border-top: 1px solid #000000;", "").replace("border-top: 1px solid #000000;", "") styles["BZ3"] = (styles["BZ3"] || "").replace(" border-top: 1px solid #000000;", "").replace("border-top: 1px solid #000000;", "")
@@ -394,7 +395,7 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
// Add dotted top borders to employee rows (starting from row 8) up to BY column // Add dotted top borders to employee rows (starting from row 8) up to BY column
for (let row = 8; row <= totalRows; row++) { for (let row = 8; row <= totalRows; row++) {
for (let col = 0; col < (data[0]?.length || 0) - 2; col++) { // All columns except BZ and CA for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
const existingStyle = styles[`${colLetter}${row}`] || "" const existingStyle = styles[`${colLetter}${row}`] || ""
styles[`${colLetter}${row}`] = existingStyle + " border-top: 1px dotted #000000;" styles[`${colLetter}${row}`] = existingStyle + " border-top: 1px dotted #000000;"
@@ -404,9 +405,9 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
// Make "Pohotovost IT" header bold (employee index 16, so row 23) // Make "Pohotovost IT" header bold (employee index 16, so row 23)
styles["A23"] = "font-weight: bold;" // "Pohotovost IT" styles["A23"] = "font-weight: bold;" // "Pohotovost IT"
// Set background color for rows 7, 8, and 9 (excluding BZ and CA columns) // Set background color for rows 7, 8, and 9 (excluding BZ, CA, and CB columns)
for (let row = 7; row <= 9; row++) { for (let row = 7; row <= 9; row++) {
for (let col = 0; col < (data[0]?.length || 0) - 2; col++) { // All columns except BZ and CA for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
const existingStyle = styles[`${colLetter}${row}`] || "" const existingStyle = styles[`${colLetter}${row}`] || ""
styles[`${colLetter}${row}`] = existingStyle + " background-color: #FCD5B4;" styles[`${colLetter}${row}`] = existingStyle + " background-color: #FCD5B4;"
@@ -415,7 +416,7 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
// Add left borders to first column of each day (B, D, F, H, etc.) from row 6 to end of table // Add left borders to first column of each day (B, D, F, H, etc.) from row 6 to end of table
for (let row = 6; row <= totalRows; row++) { for (let row = 6; row <= totalRows; row++) {
for (let col = 1; col < (data[0]?.length || 0) - 2; col += 2) { // Start from B (index 1), step by 2, exclude BZ and CA for (let col = 1; col < (data[0]?.length || 0) - 3; col += 2) { // Start from B (index 1), step by 2, exclude BZ, CA, and CB
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
const existingStyle = styles[`${colLetter}${row}`] || "" const existingStyle = styles[`${colLetter}${row}`] || ""
styles[`${colLetter}${row}`] = existingStyle + " border-left: 1px solid #000000;" styles[`${colLetter}${row}`] = existingStyle + " border-left: 1px solid #000000;"
@@ -423,7 +424,7 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
} }
// Add top border to row 28 from A to BY // Add top border to row 28 from A to BY
for (let col = 0; col < (data[0]?.length || 0) - 2; col++) { // All columns except BZ and CA for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
const existingStyle = styles[`${colLetter}28`] || "" const existingStyle = styles[`${colLetter}28`] || ""
styles[`${colLetter}28`] = existingStyle + " border-top: 1px solid #000000;" styles[`${colLetter}28`] = existingStyle + " border-top: 1px solid #000000;"
@@ -431,7 +432,7 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
// Add alternating row background colors starting from row 10 (every odd row: 10,12,14,16,18,20,22,24,26) // Add alternating row background colors starting from row 10 (every odd row: 10,12,14,16,18,20,22,24,26)
for (let row = 10; row <= totalRows; row += 2) { // Start from 10, increment by 2 for (let row = 10; row <= totalRows; row += 2) { // Start from 10, increment by 2
for (let col = 0; col < (data[0]?.length || 0) - 2; col++) { // All columns except BZ and CA for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
const existingStyle = styles[`${colLetter}${row}`] || "" const existingStyle = styles[`${colLetter}${row}`] || ""
styles[`${colLetter}${row}`] = existingStyle + " background-color: #D9D9D9;" styles[`${colLetter}${row}`] = existingStyle + " background-color: #D9D9D9;"
@@ -440,7 +441,7 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
// Add top borders to rows 23 and 24 from A to BY // Add top borders to rows 23 and 24 from A to BY
for (let row of [23, 24]) { for (let row of [23, 24]) {
for (let col = 0; col < (data[0]?.length || 0) - 2; col++) { // All columns except BZ and CA for (let col = 0; col < (data[0]?.length || 0) - 3; col++) { // All columns except BZ, CA, and CB
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
const existingStyle = styles[`${colLetter}${row}`] || "" const existingStyle = styles[`${colLetter}${row}`] || ""
styles[`${colLetter}${row}`] = existingStyle + " border-top: 1px solid #000000;" styles[`${colLetter}${row}`] = existingStyle + " border-top: 1px solid #000000;"
@@ -448,7 +449,7 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
} }
// Remove left borders from row 23 (day column borders) // Remove left borders from row 23 (day column borders)
for (let col = 1; col < (data[0]?.length || 0) - 2; col += 2) { // Day columns: B, D, F, H, etc. for (let col = 1; col < (data[0]?.length || 0) - 3; col += 2) { // Day columns: B, D, F, H, etc., exclude BZ, CA, CB
const colLetter = getExcelColumnName(col) const colLetter = getExcelColumnName(col)
const existingStyle = styles[`${colLetter}23`] || "" const existingStyle = styles[`${colLetter}23`] || ""
// Remove left border by replacing it with empty string // Remove left border by replacing it with empty string
@@ -475,6 +476,14 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
const existingCA23Style = styles["CA23"] || "" const existingCA23Style = styles["CA23"] || ""
styles["CA23"] = existingCA23Style + " border-top: 1px solid #000000;" styles["CA23"] = existingCA23Style + " border-top: 1px solid #000000;"
// Add top border to CA24
const existingCA24Style = styles["CA24"] || ""
styles["CA24"] = existingCA24Style + " border-top: 1px solid #000000;"
// Add top border to CA28
const existingCA28Style = styles["CA28"] || ""
styles["CA28"] = existingCA28Style + " border-top: 1px solid #000000;"
} }
// Validate configuration before initializing // Validate configuration before initializing