Adds employee work schedule component
Introduces a new work schedule feature for managing employee shifts and schedules Implements interactive schedule view with: - Week-based schedule grid - Shift status tracking (work, vacation, sick, off) - Editable time ranges - Repeat shift functionality Enhances employee management with dynamic scheduling capabilities
This commit is contained in:
Janus C. H. Knudsen
parent
d5a803ba80
commit
3214cbdc16
11 changed files with 1669 additions and 0 deletions
|
|
@ -0,0 +1,179 @@
|
|||
@model PlanTempus.Application.Features.Employees.Components.EmployeeWorkScheduleViewModel
|
||||
|
||||
@{
|
||||
string GetTimeDisplay(ShiftData? shift)
|
||||
{
|
||||
if (shift == null) return "—";
|
||||
return shift.Status switch
|
||||
{
|
||||
"work" => $"{shift.Start} - {shift.End}",
|
||||
"vacation" => Model.LabelVacation,
|
||||
"sick" => Model.LabelSick,
|
||||
_ => "—"
|
||||
};
|
||||
}
|
||||
|
||||
string GetTimeClass(ShiftData? shift)
|
||||
{
|
||||
if (shift == null) return "off";
|
||||
return shift.Status switch
|
||||
{
|
||||
"work" => "",
|
||||
"vacation" => "vacation",
|
||||
"sick" => "sick",
|
||||
_ => "off"
|
||||
};
|
||||
}
|
||||
|
||||
bool IsClosed(string date) => Model.ClosedDays.Contains(date);
|
||||
}
|
||||
|
||||
<swp-schedule-container>
|
||||
<!-- Edit button -->
|
||||
<swp-schedule-actions>
|
||||
<swp-btn class="primary" id="scheduleEditBtn">
|
||||
<i class="ph ph-pencil-simple"></i>
|
||||
@Model.ButtonEdit
|
||||
</swp-btn>
|
||||
</swp-schedule-actions>
|
||||
|
||||
<!-- Schedule table -->
|
||||
<swp-schedule-table id="scheduleTable">
|
||||
<!-- Header row -->
|
||||
<swp-schedule-cell class="header week-number">@Model.LabelWeek @Model.WeekNumber</swp-schedule-cell>
|
||||
@foreach (var day in Model.Days)
|
||||
{
|
||||
<swp-schedule-cell class="header @(IsClosed(day.Date) ? "closed" : "")" data-date="@day.Date">
|
||||
<swp-day-name>@day.DayName</swp-day-name>
|
||||
<swp-day-date>@day.DisplayDate</swp-day-date>
|
||||
</swp-schedule-cell>
|
||||
}
|
||||
|
||||
<!-- Employee rows -->
|
||||
@foreach (var employee in Model.Employees)
|
||||
{
|
||||
<swp-schedule-cell class="employee">
|
||||
<swp-employee-name>@employee.Name</swp-employee-name>
|
||||
<swp-employee-hours>@employee.WeeklyHours @Model.LabelHours</swp-employee-hours>
|
||||
</swp-schedule-cell>
|
||||
|
||||
@foreach (var day in Model.Days)
|
||||
{
|
||||
var shift = employee.Schedule.GetValueOrDefault(day.Date);
|
||||
var isClosed = IsClosed(day.Date);
|
||||
<swp-schedule-cell class="day @(isClosed ? "closed-day" : "")"
|
||||
data-employee="@employee.Name"
|
||||
data-employee-id="@employee.EmployeeId"
|
||||
data-date="@day.Date"
|
||||
data-day="@day.ShortDayName">
|
||||
<swp-time-display class="@GetTimeClass(shift)">@GetTimeDisplay(shift)</swp-time-display>
|
||||
</swp-schedule-cell>
|
||||
}
|
||||
}
|
||||
</swp-schedule-table>
|
||||
</swp-schedule-container>
|
||||
|
||||
<!-- Schedule Drawer -->
|
||||
<div id="schedule-drawer" data-drawer="lg">
|
||||
<swp-drawer-header>
|
||||
<swp-drawer-title>@Model.LabelEditShift</swp-drawer-title>
|
||||
<swp-drawer-close data-drawer-close>
|
||||
<i class="ph ph-x"></i>
|
||||
</swp-drawer-close>
|
||||
</swp-drawer-header>
|
||||
|
||||
<swp-drawer-body>
|
||||
<!-- Employee & Date -->
|
||||
<swp-form-row>
|
||||
<swp-form-label>Medarbejder</swp-form-label>
|
||||
<swp-employee-display id="scheduleFieldEmployee" class="empty">
|
||||
<swp-employee-avatar id="scheduleFieldAvatar">?</swp-employee-avatar>
|
||||
<swp-form-value id="scheduleFieldEmployeeName">Vælg celle...</swp-form-value>
|
||||
</swp-employee-display>
|
||||
</swp-form-row>
|
||||
|
||||
<swp-form-row>
|
||||
<swp-form-label>Dato</swp-form-label>
|
||||
<swp-form-value id="scheduleFieldDate">—</swp-form-value>
|
||||
</swp-form-row>
|
||||
|
||||
<swp-form-divider></swp-form-divider>
|
||||
|
||||
<!-- Status -->
|
||||
<swp-form-row>
|
||||
<swp-form-label>@Model.LabelStatus</swp-form-label>
|
||||
<swp-status-options id="scheduleStatusOptions">
|
||||
<swp-status-option data-status="work" class="selected">@Model.LabelWork</swp-status-option>
|
||||
<swp-status-option data-status="off">@Model.LabelOff</swp-status-option>
|
||||
<swp-status-option data-status="vacation">@Model.LabelVacation</swp-status-option>
|
||||
<swp-status-option data-status="sick">@Model.LabelSick</swp-status-option>
|
||||
</swp-status-options>
|
||||
</swp-form-row>
|
||||
|
||||
<!-- Time range -->
|
||||
<swp-form-row id="scheduleTimeRow">
|
||||
<swp-form-label>@Model.LabelTimeRange</swp-form-label>
|
||||
<swp-time-range id="scheduleTimeRange">
|
||||
<swp-time-range-slider>
|
||||
<swp-time-range-track></swp-time-range-track>
|
||||
<swp-time-range-fill></swp-time-range-fill>
|
||||
<input type="range" class="range-start" min="0" max="60" value="12" step="1">
|
||||
<input type="range" class="range-end" min="0" max="60" value="44" step="1">
|
||||
</swp-time-range-slider>
|
||||
<swp-time-range-label>
|
||||
<swp-time-range-times>09:00 – 17:00</swp-time-range-times>
|
||||
<swp-time-range-duration>8 timer</swp-time-range-duration>
|
||||
</swp-time-range-label>
|
||||
</swp-time-range>
|
||||
</swp-form-row>
|
||||
|
||||
<!-- Note -->
|
||||
<swp-form-row>
|
||||
<swp-form-label>@Model.LabelNote <span class="optional">(valgfrit)</span></swp-form-label>
|
||||
<input type="text" id="scheduleFieldNote" placeholder="F.eks. Aftenvagt">
|
||||
</swp-form-row>
|
||||
|
||||
<swp-form-divider></swp-form-divider>
|
||||
|
||||
<!-- Type toggle -->
|
||||
<swp-form-row>
|
||||
<swp-form-label>@Model.LabelType</swp-form-label>
|
||||
<swp-toggle-options id="scheduleTypeOptions">
|
||||
<swp-toggle-option data-value="single">@Model.LabelSingle</swp-toggle-option>
|
||||
<swp-toggle-option data-value="template" class="selected">@Model.LabelRepeat</swp-toggle-option>
|
||||
</swp-toggle-options>
|
||||
</swp-form-row>
|
||||
|
||||
<!-- Repeat settings -->
|
||||
<swp-form-group id="scheduleRepeatGroup">
|
||||
<swp-form-row>
|
||||
<swp-form-label>@Model.LabelRepeatInterval</swp-form-label>
|
||||
<swp-form-select>
|
||||
<select id="scheduleRepeatInterval">
|
||||
<option value="1">Hver uge</option>
|
||||
<option value="2">Hver 2. uge</option>
|
||||
<option value="3">Hver 3. uge</option>
|
||||
<option value="4">Hver 4. uge</option>
|
||||
</select>
|
||||
</swp-form-select>
|
||||
</swp-form-row>
|
||||
|
||||
<swp-form-hint>Gentagelser bruger valgt dato som startuge.</swp-form-hint>
|
||||
|
||||
<swp-form-row>
|
||||
<swp-form-label>@Model.LabelRepeatEnd <span class="optional">(valgfrit)</span></swp-form-label>
|
||||
<input type="date" id="scheduleRepeatEndDate">
|
||||
</swp-form-row>
|
||||
|
||||
<swp-form-row>
|
||||
<swp-form-label>@Model.LabelWeekday <span class="auto">(auto)</span></swp-form-label>
|
||||
<swp-form-value id="scheduleFieldWeekday">—</swp-form-value>
|
||||
</swp-form-row>
|
||||
</swp-form-group>
|
||||
</swp-drawer-body>
|
||||
|
||||
<swp-drawer-footer>
|
||||
<swp-btn class="secondary" data-drawer-close>@Model.LabelCancel</swp-btn>
|
||||
<swp-btn class="primary" id="scheduleDrawerSave">@Model.LabelSave</swp-btn>
|
||||
</swp-drawer-footer>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
using System.Text.Json;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using PlanTempus.Application.Features.Localization.Services;
|
||||
|
||||
namespace PlanTempus.Application.Features.Employees.Components;
|
||||
|
||||
public class EmployeeWorkScheduleViewComponent : ViewComponent
|
||||
{
|
||||
private readonly ILocalizationService _localization;
|
||||
private readonly IWebHostEnvironment _environment;
|
||||
|
||||
public EmployeeWorkScheduleViewComponent(ILocalizationService localization, IWebHostEnvironment environment)
|
||||
{
|
||||
_localization = localization;
|
||||
_environment = environment;
|
||||
}
|
||||
|
||||
public IViewComponentResult Invoke(string key)
|
||||
{
|
||||
var weekSchedule = LoadMockData();
|
||||
var days = GenerateDays(weekSchedule.StartDate);
|
||||
|
||||
var model = new EmployeeWorkScheduleViewModel
|
||||
{
|
||||
WeekNumber = weekSchedule.WeekNumber,
|
||||
Year = weekSchedule.Year,
|
||||
StartDate = weekSchedule.StartDate,
|
||||
EndDate = weekSchedule.EndDate,
|
||||
ClosedDays = weekSchedule.ClosedDays,
|
||||
Employees = weekSchedule.Employees,
|
||||
Days = days,
|
||||
|
||||
// Labels
|
||||
LabelWeek = _localization.Get("employees.detail.schedule.week"),
|
||||
LabelHours = _localization.Get("employees.detail.schedule.hours"),
|
||||
LabelEditShift = _localization.Get("employees.detail.schedule.editShift"),
|
||||
LabelStatus = _localization.Get("employees.detail.schedule.status"),
|
||||
LabelWork = _localization.Get("employees.detail.schedule.work"),
|
||||
LabelOff = _localization.Get("employees.detail.schedule.off"),
|
||||
LabelVacation = _localization.Get("employees.detail.schedule.vacation"),
|
||||
LabelSick = _localization.Get("employees.detail.schedule.sick"),
|
||||
LabelTimeRange = _localization.Get("employees.detail.schedule.timeRange"),
|
||||
LabelNote = _localization.Get("employees.detail.schedule.note"),
|
||||
LabelType = _localization.Get("employees.detail.schedule.type"),
|
||||
LabelSingle = _localization.Get("employees.detail.schedule.single"),
|
||||
LabelRepeat = _localization.Get("employees.detail.schedule.repeat"),
|
||||
LabelRepeatInterval = _localization.Get("employees.detail.schedule.repeatInterval"),
|
||||
LabelRepeatEnd = _localization.Get("employees.detail.schedule.repeatEnd"),
|
||||
LabelWeekday = _localization.Get("employees.detail.schedule.weekday"),
|
||||
LabelEdit = _localization.Get("common.edit"),
|
||||
LabelSave = _localization.Get("common.save"),
|
||||
LabelCancel = _localization.Get("common.cancel"),
|
||||
ButtonEdit = _localization.Get("employees.detail.schedule.buttonEdit"),
|
||||
ButtonDone = _localization.Get("employees.detail.schedule.buttonDone")
|
||||
};
|
||||
|
||||
return View(model);
|
||||
}
|
||||
|
||||
private WeekScheduleData LoadMockData()
|
||||
{
|
||||
var jsonPath = Path.Combine(_environment.ContentRootPath, "Features", "Employees", "Data", "workScheduleMock.json");
|
||||
var json = System.IO.File.ReadAllText(jsonPath);
|
||||
return JsonSerializer.Deserialize<WeekScheduleData>(json, new JsonSerializerOptions
|
||||
{
|
||||
PropertyNameCaseInsensitive = true
|
||||
})!;
|
||||
}
|
||||
|
||||
private List<DayInfo> GenerateDays(string startDate)
|
||||
{
|
||||
var start = DateTime.Parse(startDate);
|
||||
var dayNames = new[] { "Søndag", "Mandag", "Tirsdag", "Onsdag", "Torsdag", "Fredag", "Lørdag" };
|
||||
var shortDayNames = new[] { "Søn", "Man", "Tir", "Ons", "Tor", "Fre", "Lør" };
|
||||
|
||||
var days = new List<DayInfo>();
|
||||
for (int i = 0; i < 7; i++)
|
||||
{
|
||||
var date = start.AddDays(i);
|
||||
days.Add(new DayInfo
|
||||
{
|
||||
Date = date.ToString("yyyy-MM-dd"),
|
||||
DayName = dayNames[(int)date.DayOfWeek],
|
||||
ShortDayName = shortDayNames[(int)date.DayOfWeek],
|
||||
DisplayDate = date.ToString("dd/MM")
|
||||
});
|
||||
}
|
||||
return days;
|
||||
}
|
||||
}
|
||||
|
||||
public class EmployeeWorkScheduleViewModel
|
||||
{
|
||||
public int WeekNumber { get; init; }
|
||||
public int Year { get; init; }
|
||||
public required string StartDate { get; init; }
|
||||
public required string EndDate { get; init; }
|
||||
public required List<string> ClosedDays { get; init; }
|
||||
public required List<EmployeeScheduleData> Employees { get; init; }
|
||||
public required List<DayInfo> Days { get; init; }
|
||||
|
||||
// Labels
|
||||
public required string LabelWeek { get; init; }
|
||||
public required string LabelHours { get; init; }
|
||||
public required string LabelEditShift { get; init; }
|
||||
public required string LabelStatus { get; init; }
|
||||
public required string LabelWork { get; init; }
|
||||
public required string LabelOff { get; init; }
|
||||
public required string LabelVacation { get; init; }
|
||||
public required string LabelSick { get; init; }
|
||||
public required string LabelTimeRange { get; init; }
|
||||
public required string LabelNote { get; init; }
|
||||
public required string LabelType { get; init; }
|
||||
public required string LabelSingle { get; init; }
|
||||
public required string LabelRepeat { get; init; }
|
||||
public required string LabelRepeatInterval { get; init; }
|
||||
public required string LabelRepeatEnd { get; init; }
|
||||
public required string LabelWeekday { get; init; }
|
||||
public required string LabelEdit { get; init; }
|
||||
public required string LabelSave { get; init; }
|
||||
public required string LabelCancel { get; init; }
|
||||
public required string ButtonEdit { get; init; }
|
||||
public required string ButtonDone { get; init; }
|
||||
}
|
||||
|
||||
public class DayInfo
|
||||
{
|
||||
public required string Date { get; init; }
|
||||
public required string DayName { get; init; }
|
||||
public required string ShortDayName { get; init; }
|
||||
public required string DisplayDate { get; init; }
|
||||
}
|
||||
|
||||
public class WeekScheduleData
|
||||
{
|
||||
public int WeekNumber { get; init; }
|
||||
public int Year { get; init; }
|
||||
public required string StartDate { get; init; }
|
||||
public required string EndDate { get; init; }
|
||||
public required List<string> ClosedDays { get; init; }
|
||||
public required List<EmployeeScheduleData> Employees { get; init; }
|
||||
}
|
||||
|
||||
public class EmployeeScheduleData
|
||||
{
|
||||
public required string EmployeeId { get; init; }
|
||||
public required string Name { get; init; }
|
||||
public int WeeklyHours { get; init; }
|
||||
public required Dictionary<string, ShiftData> Schedule { get; init; }
|
||||
}
|
||||
|
||||
public class ShiftData
|
||||
{
|
||||
public required string Status { get; init; }
|
||||
public string? Start { get; init; }
|
||||
public string? End { get; init; }
|
||||
public string? Note { get; init; }
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
{
|
||||
"weekNumber": 52,
|
||||
"year": 2025,
|
||||
"startDate": "2025-12-23",
|
||||
"endDate": "2025-12-29",
|
||||
"closedDays": ["2025-12-25"],
|
||||
"employees": [
|
||||
{
|
||||
"employeeId": "emp-1",
|
||||
"name": "Anna Sørensen",
|
||||
"weeklyHours": 32,
|
||||
"schedule": {
|
||||
"2025-12-23": { "status": "work", "start": "09:00", "end": "17:00" },
|
||||
"2025-12-24": { "status": "work", "start": "09:00", "end": "13:00" },
|
||||
"2025-12-25": { "status": "off" },
|
||||
"2025-12-26": { "status": "off" },
|
||||
"2025-12-27": { "status": "work", "start": "09:00", "end": "17:00" },
|
||||
"2025-12-28": { "status": "work", "start": "10:00", "end": "14:00" },
|
||||
"2025-12-29": { "status": "off" }
|
||||
}
|
||||
},
|
||||
{
|
||||
"employeeId": "emp-2",
|
||||
"name": "Mette Jensen",
|
||||
"weeklyHours": 40,
|
||||
"schedule": {
|
||||
"2025-12-23": { "status": "work", "start": "10:00", "end": "18:00" },
|
||||
"2025-12-24": { "status": "work", "start": "10:00", "end": "18:00" },
|
||||
"2025-12-25": { "status": "vacation" },
|
||||
"2025-12-26": { "status": "vacation" },
|
||||
"2025-12-27": { "status": "vacation" },
|
||||
"2025-12-28": { "status": "off" },
|
||||
"2025-12-29": { "status": "off" }
|
||||
}
|
||||
},
|
||||
{
|
||||
"employeeId": "emp-3",
|
||||
"name": "Louise Nielsen",
|
||||
"weeklyHours": 37,
|
||||
"schedule": {
|
||||
"2025-12-23": { "status": "work", "start": "09:00", "end": "17:00" },
|
||||
"2025-12-24": { "status": "work", "start": "09:00", "end": "17:00" },
|
||||
"2025-12-25": { "status": "off" },
|
||||
"2025-12-26": { "status": "off" },
|
||||
"2025-12-27": { "status": "work", "start": "09:00", "end": "17:00" },
|
||||
"2025-12-28": { "status": "work", "start": "09:00", "end": "14:00" },
|
||||
"2025-12-29": { "status": "off" }
|
||||
}
|
||||
},
|
||||
{
|
||||
"employeeId": "emp-4",
|
||||
"name": "Katrine Pedersen",
|
||||
"weeklyHours": 24,
|
||||
"schedule": {
|
||||
"2025-12-23": { "status": "work", "start": "12:00", "end": "20:00" },
|
||||
"2025-12-24": { "status": "off" },
|
||||
"2025-12-25": { "status": "off" },
|
||||
"2025-12-26": { "status": "off" },
|
||||
"2025-12-27": { "status": "work", "start": "12:00", "end": "20:00" },
|
||||
"2025-12-28": { "status": "work", "start": "10:00", "end": "18:00" },
|
||||
"2025-12-29": { "status": "off" }
|
||||
}
|
||||
},
|
||||
{
|
||||
"employeeId": "emp-5",
|
||||
"name": "Sofie Andersen",
|
||||
"weeklyHours": 20,
|
||||
"schedule": {
|
||||
"2025-12-23": { "status": "sick" },
|
||||
"2025-12-24": { "status": "work", "start": "09:00", "end": "15:00" },
|
||||
"2025-12-25": { "status": "off" },
|
||||
"2025-12-26": { "status": "off" },
|
||||
"2025-12-27": { "status": "work", "start": "09:00", "end": "15:00" },
|
||||
"2025-12-28": { "status": "off" },
|
||||
"2025-12-29": { "status": "off" }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -35,6 +35,10 @@
|
|||
<i class="ph ph-shield-check"></i>
|
||||
<span localize="employees.tabs.roles">Roller</span>
|
||||
</swp-tab>
|
||||
<swp-tab data-tab="schedule">
|
||||
<i class="ph ph-calendar-dots"></i>
|
||||
<span localize="employees.detail.tabs.schedule">Vagtplan</span>
|
||||
</swp-tab>
|
||||
</swp-tab-bar>
|
||||
</swp-sticky-header>
|
||||
|
||||
|
|
@ -51,6 +55,13 @@
|
|||
@await Component.InvokeAsync("PermissionsMatrix", "default")
|
||||
</swp-page-container>
|
||||
</swp-tab-content>
|
||||
|
||||
<!-- Tab: Schedule -->
|
||||
<swp-tab-content data-tab="schedule">
|
||||
<swp-page-container>
|
||||
@await Component.InvokeAsync("EmployeeWorkSchedule", "default")
|
||||
</swp-page-container>
|
||||
</swp-tab-content>
|
||||
</swp-employees-list-view>
|
||||
|
||||
<!-- Detail View (hidden by default, shown when row clicked) -->
|
||||
|
|
|
|||
|
|
@ -271,11 +271,32 @@
|
|||
"tabs": {
|
||||
"general": "Generelt",
|
||||
"hours": "Arbejdstid",
|
||||
"schedule": "Vagtplan",
|
||||
"services": "Services",
|
||||
"salary": "Løn",
|
||||
"hr": "HR",
|
||||
"stats": "Statistik"
|
||||
},
|
||||
"schedule": {
|
||||
"week": "Uge",
|
||||
"hours": "timer",
|
||||
"editShift": "Redigér vagt",
|
||||
"status": "Status",
|
||||
"work": "Arbejde",
|
||||
"off": "Fri",
|
||||
"vacation": "Ferie",
|
||||
"sick": "Syg",
|
||||
"timeRange": "Tidsrum",
|
||||
"note": "Note",
|
||||
"type": "Type",
|
||||
"single": "Enkelt",
|
||||
"repeat": "Gentagelse",
|
||||
"repeatInterval": "Gentag",
|
||||
"repeatEnd": "Slutdato",
|
||||
"weekday": "Ugedag",
|
||||
"buttonEdit": "Rediger",
|
||||
"buttonDone": "Færdig"
|
||||
},
|
||||
"contact": "Kontaktoplysninger",
|
||||
"personal": "Personlige oplysninger",
|
||||
"employment": "Ansættelse",
|
||||
|
|
|
|||
|
|
@ -271,11 +271,32 @@
|
|||
"tabs": {
|
||||
"general": "General",
|
||||
"hours": "Working hours",
|
||||
"schedule": "Schedule",
|
||||
"services": "Services",
|
||||
"salary": "Salary",
|
||||
"hr": "HR",
|
||||
"stats": "Statistics"
|
||||
},
|
||||
"schedule": {
|
||||
"week": "Week",
|
||||
"hours": "hours",
|
||||
"editShift": "Edit shift",
|
||||
"status": "Status",
|
||||
"work": "Work",
|
||||
"off": "Off",
|
||||
"vacation": "Vacation",
|
||||
"sick": "Sick",
|
||||
"timeRange": "Time range",
|
||||
"note": "Note",
|
||||
"type": "Type",
|
||||
"single": "Single",
|
||||
"repeat": "Repeat",
|
||||
"repeatInterval": "Repeat",
|
||||
"repeatEnd": "End date",
|
||||
"weekday": "Weekday",
|
||||
"buttonEdit": "Edit",
|
||||
"buttonDone": "Done"
|
||||
},
|
||||
"contact": "Contact information",
|
||||
"personal": "Personal information",
|
||||
"employment": "Employment",
|
||||
|
|
|
|||
|
|
@ -879,6 +879,531 @@ swp-data-row.focus-highlight {
|
|||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
WORK SCHEDULE TABLE
|
||||
=========================================== */
|
||||
swp-schedule-table {
|
||||
display: grid;
|
||||
grid-template-columns: 180px repeat(7, minmax(100px, 1fr));
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
swp-schedule-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 12px 16px;
|
||||
min-height: 60px;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Last column: no right border */
|
||||
swp-schedule-cell:nth-child(8n) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Last row: no bottom border */
|
||||
swp-schedule-cell:nth-last-child(-n+8) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
swp-schedule-cell.header {
|
||||
background: var(--color-background-alt);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
min-height: 48px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-schedule-cell.header.week-number {
|
||||
font-size: 15px;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-schedule-cell.header.closed {
|
||||
background: color-mix(in srgb, #f59e0b 10%, var(--color-background-alt));
|
||||
border-top: 2px solid #f59e0b;
|
||||
border-left: 2px solid #f59e0b;
|
||||
border-right: 2px solid #f59e0b;
|
||||
border-bottom: none;
|
||||
|
||||
swp-day-name {
|
||||
color: #d97706;
|
||||
}
|
||||
}
|
||||
|
||||
swp-schedule-cell.employee {
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
swp-schedule-cell.day {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
swp-schedule-cell.day.closed-day {
|
||||
background: color-mix(in srgb, #f59e0b 6%, var(--color-surface));
|
||||
border-left: 2px solid #f59e0b;
|
||||
border-right: 2px solid #f59e0b;
|
||||
|
||||
swp-time-display {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Last cell in closed column gets bottom border */
|
||||
swp-schedule-cell.day.closed-day:nth-last-child(-n+8) {
|
||||
border-bottom: 2px solid #f59e0b;
|
||||
}
|
||||
|
||||
/* Schedule employee info */
|
||||
swp-schedule-cell swp-employee-name {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-schedule-cell swp-employee-hours {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Day header */
|
||||
swp-day-name {
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-day-date {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
/* Time display variants */
|
||||
swp-time-display {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-teal-light);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
min-width: 90px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
swp-time-display.off {
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
swp-time-display.off.off-override {
|
||||
background: color-mix(in srgb, #7c3aed 12%, white);
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
swp-time-display.vacation {
|
||||
background: color-mix(in srgb, #f59e0b 15%, white);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
swp-time-display.sick {
|
||||
background: color-mix(in srgb, #ef4444 15%, white);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
/* Edit mode */
|
||||
body.schedule-edit-mode swp-schedule-cell.day {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.schedule-edit-mode swp-schedule-cell.day:hover {
|
||||
background: var(--color-background-alt);
|
||||
}
|
||||
|
||||
body.schedule-edit-mode swp-schedule-cell.day.selected {
|
||||
background: color-mix(in srgb, var(--color-teal) 12%, white);
|
||||
border: 2px solid var(--color-teal);
|
||||
margin: -1px;
|
||||
padding: 11px 15px;
|
||||
}
|
||||
|
||||
body.schedule-edit-mode swp-schedule-cell.header:not(.week-number) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.schedule-edit-mode swp-schedule-cell.header:not(.week-number):hover {
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
/* Status options in drawer */
|
||||
swp-status-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
swp-status-option {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
font-size: 13px;
|
||||
font-weight: var(--font-weight-medium);
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&[data-status="work"] {
|
||||
--status-color: var(--color-teal);
|
||||
}
|
||||
&[data-status="off"] {
|
||||
--status-color: #7c3aed;
|
||||
}
|
||||
&[data-status="vacation"] {
|
||||
--status-color: #f59e0b;
|
||||
}
|
||||
&[data-status="sick"] {
|
||||
--status-color: #e53935;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: var(--status-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: color-mix(in srgb, var(--status-color) 15%, white);
|
||||
color: var(--status-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Time range slider */
|
||||
swp-time-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
swp-time-range-slider {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-time-range-track {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: var(--color-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
swp-time-range-fill {
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
background: var(--color-teal);
|
||||
border-radius: 2px;
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
swp-time-range-slider input[type="range"] {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
margin: 0;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-teal);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-teal);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
swp-time-range-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
background: var(--color-background-alt);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
swp-time-range-times {
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
swp-time-range-duration {
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Toggle options (Enkelt/Gentagelse) */
|
||||
swp-toggle-options {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
swp-toggle-option {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm);
|
||||
cursor: pointer;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-alt);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--color-teal);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Schedule drawer employee display */
|
||||
swp-employee-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
swp-employee-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.empty swp-employee-avatar {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
&.multi swp-employee-avatar {
|
||||
background: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SCHEDULE DRAWER (matches POC exactly)
|
||||
=========================================== */
|
||||
|
||||
/* Drawer header with background */
|
||||
#schedule-drawer swp-drawer-header {
|
||||
background: var(--color-background-alt);
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
#schedule-drawer swp-drawer-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Drawer body/content */
|
||||
#schedule-drawer swp-drawer-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* Form row layout */
|
||||
#schedule-drawer swp-form-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Form labels - uppercase style from POC */
|
||||
#schedule-drawer swp-form-label {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
.optional,
|
||||
.auto {
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
/* Form value (read-only display) */
|
||||
#schedule-drawer swp-form-value {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Form divider */
|
||||
#schedule-drawer swp-form-divider {
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Form hint text */
|
||||
#schedule-drawer swp-form-hint {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
margin: -8px 0 16px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Form group - gray card background from POC */
|
||||
#schedule-drawer swp-form-group {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
background: var(--color-background-alt);
|
||||
border-radius: 8px;
|
||||
margin-top: 16px;
|
||||
|
||||
swp-form-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form select wrapper */
|
||||
#schedule-drawer swp-form-select {
|
||||
display: block;
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text);
|
||||
background: var(--color-surface);
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Text inputs in drawer */
|
||||
#schedule-drawer input[type="text"],
|
||||
#schedule-drawer input[type="date"] {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text);
|
||||
background: var(--color-surface);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* Drawer footer with background */
|
||||
#schedule-drawer swp-drawer-footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
background: var(--color-background-alt);
|
||||
|
||||
swp-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
RESPONSIVE
|
||||
=========================================== */
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
export class EmployeesController {
|
||||
private ratesSync: RatesSyncController | null = null;
|
||||
private scheduleController: ScheduleController | null = null;
|
||||
private listView: HTMLElement | null = null;
|
||||
private detailView: HTMLElement | null = null;
|
||||
|
||||
|
|
@ -25,6 +26,7 @@ export class EmployeesController {
|
|||
this.setupHistoryNavigation();
|
||||
this.restoreStateFromUrl();
|
||||
this.ratesSync = new RatesSyncController();
|
||||
this.scheduleController = new ScheduleController();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -397,3 +399,646 @@ class RatesSyncController {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule Controller
|
||||
*
|
||||
* Handles work schedule (vagtplan) functionality:
|
||||
* - Edit mode toggle
|
||||
* - Cell selection (single, ctrl+click, shift+click)
|
||||
* - Drawer interaction
|
||||
* - Time range slider
|
||||
* - Status options
|
||||
*/
|
||||
class ScheduleController {
|
||||
private isEditMode = false;
|
||||
private selectedCells: HTMLElement[] = [];
|
||||
private anchorCell: HTMLElement | null = null;
|
||||
private drawer: HTMLElement | null = null;
|
||||
private editBtn: HTMLElement | null = null;
|
||||
private scheduleTable: HTMLElement | null = null;
|
||||
|
||||
// Time range constants
|
||||
private readonly TIME_RANGE_MAX = 60; // 15 hours (06:00-21:00) * 4 intervals
|
||||
|
||||
constructor() {
|
||||
this.drawer = document.getElementById('schedule-drawer');
|
||||
this.editBtn = document.getElementById('scheduleEditBtn');
|
||||
this.scheduleTable = document.getElementById('scheduleTable');
|
||||
|
||||
if (!this.scheduleTable) return;
|
||||
|
||||
this.setupEditModeToggle();
|
||||
this.setupCellSelection();
|
||||
this.setupStatusOptions();
|
||||
this.setupTypeToggle();
|
||||
this.setupTimeRangeSlider();
|
||||
this.setupDrawerSave();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup edit mode toggle button
|
||||
*/
|
||||
private setupEditModeToggle(): void {
|
||||
this.editBtn?.addEventListener('click', () => {
|
||||
this.isEditMode = !this.isEditMode;
|
||||
document.body.classList.toggle('schedule-edit-mode', this.isEditMode);
|
||||
|
||||
if (this.editBtn) {
|
||||
const icon = this.editBtn.querySelector('i');
|
||||
const text = this.editBtn.childNodes[this.editBtn.childNodes.length - 1];
|
||||
|
||||
if (this.isEditMode) {
|
||||
icon?.classList.replace('ph-pencil-simple', 'ph-check');
|
||||
if (text && text.nodeType === Node.TEXT_NODE) {
|
||||
text.textContent = ' Færdig';
|
||||
}
|
||||
this.openDrawer();
|
||||
this.showEmptyState();
|
||||
} else {
|
||||
icon?.classList.replace('ph-check', 'ph-pencil-simple');
|
||||
if (text && text.nodeType === Node.TEXT_NODE) {
|
||||
text.textContent = ' Rediger';
|
||||
}
|
||||
this.closeDrawer();
|
||||
this.clearSelection();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup cell click selection
|
||||
*/
|
||||
private setupCellSelection(): void {
|
||||
if (!this.scheduleTable) return;
|
||||
|
||||
const dayCells = this.scheduleTable.querySelectorAll<HTMLElement>('swp-schedule-cell.day');
|
||||
|
||||
dayCells.forEach(cell => {
|
||||
// Double-click to enter edit mode
|
||||
cell.addEventListener('dblclick', () => {
|
||||
if (!this.isEditMode) {
|
||||
this.isEditMode = true;
|
||||
document.body.classList.add('schedule-edit-mode');
|
||||
|
||||
if (this.editBtn) {
|
||||
const icon = this.editBtn.querySelector('i');
|
||||
const text = this.editBtn.childNodes[this.editBtn.childNodes.length - 1];
|
||||
icon?.classList.replace('ph-pencil-simple', 'ph-check');
|
||||
if (text && text.nodeType === Node.TEXT_NODE) {
|
||||
text.textContent = ' Færdig';
|
||||
}
|
||||
}
|
||||
|
||||
this.openDrawer();
|
||||
this.clearSelection();
|
||||
cell.classList.add('selected');
|
||||
this.selectedCells = [cell];
|
||||
this.anchorCell = cell;
|
||||
this.updateDrawerFields();
|
||||
}
|
||||
});
|
||||
|
||||
// Click selection in edit mode
|
||||
cell.addEventListener('click', (e: MouseEvent) => {
|
||||
if (!this.isEditMode) return;
|
||||
|
||||
if (e.shiftKey && this.anchorCell) {
|
||||
// Shift+click: range selection
|
||||
this.selectRange(this.anchorCell, cell);
|
||||
} else if (e.ctrlKey || e.metaKey) {
|
||||
// Ctrl/Cmd+click: toggle selection
|
||||
if (cell.classList.contains('selected')) {
|
||||
cell.classList.remove('selected');
|
||||
this.selectedCells = this.selectedCells.filter(c => c !== cell);
|
||||
} else {
|
||||
cell.classList.add('selected');
|
||||
this.selectedCells.push(cell);
|
||||
this.anchorCell = cell;
|
||||
}
|
||||
} else {
|
||||
// Single click: replace selection
|
||||
this.clearSelection();
|
||||
cell.classList.add('selected');
|
||||
this.selectedCells = [cell];
|
||||
this.anchorCell = cell;
|
||||
}
|
||||
|
||||
this.updateDrawerFields();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a range of cells between anchor and target
|
||||
*/
|
||||
private selectRange(anchor: HTMLElement, target: HTMLElement): void {
|
||||
if (!this.scheduleTable) return;
|
||||
|
||||
const allDayCells = Array.from(this.scheduleTable.querySelectorAll<HTMLElement>('swp-schedule-cell.day'));
|
||||
const anchorIdx = allDayCells.indexOf(anchor);
|
||||
const targetIdx = allDayCells.indexOf(target);
|
||||
|
||||
// Calculate grid positions (7 columns for days)
|
||||
const anchorRow = Math.floor(anchorIdx / 7);
|
||||
const anchorCol = anchorIdx % 7;
|
||||
const targetRow = Math.floor(targetIdx / 7);
|
||||
const targetCol = targetIdx % 7;
|
||||
|
||||
const minRow = Math.min(anchorRow, targetRow);
|
||||
const maxRow = Math.max(anchorRow, targetRow);
|
||||
const minCol = Math.min(anchorCol, targetCol);
|
||||
const maxCol = Math.max(anchorCol, targetCol);
|
||||
|
||||
this.clearSelection();
|
||||
|
||||
allDayCells.forEach((c, idx) => {
|
||||
const row = Math.floor(idx / 7);
|
||||
const col = idx % 7;
|
||||
if (row >= minRow && row <= maxRow && col >= minCol && col <= maxCol) {
|
||||
c.classList.add('selected');
|
||||
this.selectedCells.push(c);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all selected cells
|
||||
*/
|
||||
private clearSelection(): void {
|
||||
this.selectedCells.forEach(c => c.classList.remove('selected'));
|
||||
this.selectedCells = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get initials from name
|
||||
*/
|
||||
private getInitials(name: string): string {
|
||||
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show empty state in drawer
|
||||
*/
|
||||
private showEmptyState(): void {
|
||||
const employeeDisplay = document.getElementById('scheduleFieldEmployee');
|
||||
const avatar = document.getElementById('scheduleFieldAvatar');
|
||||
const employeeName = document.getElementById('scheduleFieldEmployeeName');
|
||||
const dateField = document.getElementById('scheduleFieldDate');
|
||||
const weekdayField = document.getElementById('scheduleFieldWeekday');
|
||||
const drawerBody = this.drawer?.querySelector('swp-drawer-body') as HTMLElement;
|
||||
const drawerFooter = this.drawer?.querySelector('swp-drawer-footer') as HTMLElement;
|
||||
|
||||
if (employeeDisplay) employeeDisplay.classList.add('empty');
|
||||
if (employeeDisplay) employeeDisplay.classList.remove('multi');
|
||||
if (avatar) avatar.textContent = '?';
|
||||
if (employeeName) employeeName.textContent = 'Vælg celle...';
|
||||
if (dateField) dateField.textContent = '—';
|
||||
if (weekdayField) weekdayField.textContent = '—';
|
||||
if (drawerBody) {
|
||||
drawerBody.style.opacity = '0.5';
|
||||
drawerBody.style.pointerEvents = 'none';
|
||||
}
|
||||
if (drawerFooter) drawerFooter.style.display = 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* Show edit state in drawer
|
||||
*/
|
||||
private showEditState(): void {
|
||||
const drawerBody = this.drawer?.querySelector('swp-drawer-body') as HTMLElement;
|
||||
const drawerFooter = this.drawer?.querySelector('swp-drawer-footer') as HTMLElement;
|
||||
|
||||
if (drawerBody) {
|
||||
drawerBody.style.opacity = '1';
|
||||
drawerBody.style.pointerEvents = 'auto';
|
||||
}
|
||||
if (drawerFooter) drawerFooter.style.display = 'flex';
|
||||
}
|
||||
|
||||
/**
|
||||
* Update drawer fields based on selected cells
|
||||
*/
|
||||
private updateDrawerFields(): void {
|
||||
if (this.selectedCells.length === 0) {
|
||||
this.showEmptyState();
|
||||
return;
|
||||
}
|
||||
|
||||
this.showEditState();
|
||||
|
||||
const employeeDisplay = document.getElementById('scheduleFieldEmployee');
|
||||
const avatar = document.getElementById('scheduleFieldAvatar');
|
||||
const employeeName = document.getElementById('scheduleFieldEmployeeName');
|
||||
const dateField = document.getElementById('scheduleFieldDate');
|
||||
const weekdayField = document.getElementById('scheduleFieldWeekday');
|
||||
|
||||
employeeDisplay?.classList.remove('empty', 'multi');
|
||||
|
||||
if (this.selectedCells.length === 1) {
|
||||
const cell = this.selectedCells[0];
|
||||
const name = cell.dataset.employee || '';
|
||||
const date = cell.dataset.date || '';
|
||||
const dayName = this.getDayName(cell.dataset.day || '');
|
||||
|
||||
if (employeeName) employeeName.textContent = name;
|
||||
if (avatar) avatar.textContent = this.getInitials(name);
|
||||
if (dateField) dateField.textContent = this.formatDate(date);
|
||||
if (weekdayField) weekdayField.textContent = dayName;
|
||||
|
||||
this.prefillFormFromCell(cell);
|
||||
} else {
|
||||
const employees = [...new Set(this.selectedCells.map(c => c.dataset.employee))];
|
||||
const days = [...new Set(this.selectedCells.map(c => c.dataset.day))];
|
||||
|
||||
if (employees.length === 1) {
|
||||
if (employeeName) employeeName.textContent = employees[0] || '';
|
||||
if (avatar) avatar.textContent = this.getInitials(employees[0] || '');
|
||||
if (dateField) dateField.textContent = `${this.selectedCells.length} dage valgt`;
|
||||
} else {
|
||||
if (employeeName) employeeName.textContent = `${this.selectedCells.length} valgt`;
|
||||
if (avatar) avatar.textContent = String(this.selectedCells.length);
|
||||
employeeDisplay?.classList.add('multi');
|
||||
if (dateField) dateField.textContent = `${employees.length} medarbejdere, ${days.length} dage`;
|
||||
}
|
||||
|
||||
if (days.length === 1) {
|
||||
if (weekdayField) weekdayField.textContent = this.getDayName(days[0] || '');
|
||||
} else {
|
||||
if (weekdayField) weekdayField.textContent = 'Flere dage';
|
||||
}
|
||||
|
||||
this.resetFormToDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format ISO date to display format
|
||||
*/
|
||||
private formatDate(isoDate: string): string {
|
||||
const date = new Date(isoDate);
|
||||
return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get full day name from short name
|
||||
*/
|
||||
private getDayName(shortName: string): string {
|
||||
const dayMap: Record<string, string> = {
|
||||
'Man': 'Mandag', 'Tir': 'Tirsdag', 'Ons': 'Onsdag',
|
||||
'Tor': 'Torsdag', 'Fre': 'Fredag', 'Lør': 'Lørdag', 'Søn': 'Søndag'
|
||||
};
|
||||
return dayMap[shortName] || shortName;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prefill form from cell data
|
||||
*/
|
||||
private prefillFormFromCell(cell: HTMLElement): void {
|
||||
const timeDisplay = cell.querySelector('swp-time-display');
|
||||
if (!timeDisplay) return;
|
||||
|
||||
let status = 'work';
|
||||
if (timeDisplay.classList.contains('off')) status = 'off';
|
||||
else if (timeDisplay.classList.contains('vacation')) status = 'vacation';
|
||||
else if (timeDisplay.classList.contains('sick')) status = 'sick';
|
||||
|
||||
// Update status options
|
||||
document.querySelectorAll('#scheduleStatusOptions swp-status-option').forEach(opt => {
|
||||
opt.classList.toggle('selected', (opt as HTMLElement).dataset.status === status);
|
||||
});
|
||||
|
||||
// Show/hide time row
|
||||
const timeRow = document.getElementById('scheduleTimeRow');
|
||||
if (timeRow) timeRow.style.display = status === 'work' ? 'flex' : 'none';
|
||||
|
||||
// Parse time if work status
|
||||
if (status === 'work') {
|
||||
const timeText = timeDisplay.textContent?.trim() || '';
|
||||
const timeMatch = timeText.match(/(\d{2}:\d{2})\s*-\s*(\d{2}:\d{2})/);
|
||||
if (timeMatch) {
|
||||
this.setTimeRange(timeMatch[1], timeMatch[2]);
|
||||
}
|
||||
}
|
||||
|
||||
// Reset type to template
|
||||
document.querySelectorAll('#scheduleTypeOptions swp-toggle-option').forEach(opt => {
|
||||
opt.classList.toggle('selected', (opt as HTMLElement).dataset.value === 'template');
|
||||
});
|
||||
const repeatGroup = document.getElementById('scheduleRepeatGroup');
|
||||
if (repeatGroup) repeatGroup.style.display = 'block';
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset form to default values
|
||||
*/
|
||||
private resetFormToDefault(): void {
|
||||
document.querySelectorAll('#scheduleStatusOptions swp-status-option').forEach(opt => {
|
||||
opt.classList.toggle('selected', (opt as HTMLElement).dataset.status === 'work');
|
||||
});
|
||||
|
||||
const timeRow = document.getElementById('scheduleTimeRow');
|
||||
if (timeRow) timeRow.style.display = 'flex';
|
||||
|
||||
this.setTimeRange('09:00', '17:00');
|
||||
|
||||
document.querySelectorAll('#scheduleTypeOptions swp-toggle-option').forEach(opt => {
|
||||
opt.classList.toggle('selected', (opt as HTMLElement).dataset.value === 'template');
|
||||
});
|
||||
|
||||
const repeatGroup = document.getElementById('scheduleRepeatGroup');
|
||||
if (repeatGroup) repeatGroup.style.display = 'block';
|
||||
|
||||
const noteField = document.getElementById('scheduleFieldNote') as HTMLInputElement;
|
||||
if (noteField) noteField.value = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup status options click handlers
|
||||
*/
|
||||
private setupStatusOptions(): void {
|
||||
document.querySelectorAll('#scheduleStatusOptions swp-status-option').forEach(option => {
|
||||
option.addEventListener('click', () => {
|
||||
document.querySelectorAll('#scheduleStatusOptions swp-status-option').forEach(o =>
|
||||
o.classList.remove('selected')
|
||||
);
|
||||
option.classList.add('selected');
|
||||
|
||||
const status = (option as HTMLElement).dataset.status;
|
||||
const timeRow = document.getElementById('scheduleTimeRow');
|
||||
if (timeRow) timeRow.style.display = status === 'work' ? 'flex' : 'none';
|
||||
|
||||
this.updateSelectedCellsStatus();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup type toggle (single/repeat)
|
||||
*/
|
||||
private setupTypeToggle(): void {
|
||||
document.querySelectorAll('#scheduleTypeOptions swp-toggle-option').forEach(option => {
|
||||
option.addEventListener('click', () => {
|
||||
document.querySelectorAll('#scheduleTypeOptions swp-toggle-option').forEach(o =>
|
||||
o.classList.remove('selected')
|
||||
);
|
||||
option.classList.add('selected');
|
||||
|
||||
const isTemplate = (option as HTMLElement).dataset.value === 'template';
|
||||
const repeatGroup = document.getElementById('scheduleRepeatGroup');
|
||||
if (repeatGroup) repeatGroup.style.display = isTemplate ? 'block' : 'none';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert slider value to time string
|
||||
*/
|
||||
private valueToTime(value: number): string {
|
||||
const totalMinutes = (value * 15) + (6 * 60);
|
||||
const hours = Math.floor(totalMinutes / 60);
|
||||
const minutes = totalMinutes % 60;
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert time string to slider value
|
||||
*/
|
||||
private timeToValue(timeStr: string): number {
|
||||
const [hours, minutes] = timeStr.split(':').map(Number);
|
||||
const totalMinutes = hours * 60 + minutes;
|
||||
return Math.round((totalMinutes - 6 * 60) / 15);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set time range slider values
|
||||
*/
|
||||
private setTimeRange(startTime: string, endTime: string): void {
|
||||
const timeRange = document.getElementById('scheduleTimeRange');
|
||||
if (!timeRange) return;
|
||||
|
||||
const startInput = timeRange.querySelector<HTMLInputElement>('.range-start');
|
||||
const endInput = timeRange.querySelector<HTMLInputElement>('.range-end');
|
||||
|
||||
if (startInput) startInput.value = String(this.timeToValue(startTime));
|
||||
if (endInput) endInput.value = String(this.timeToValue(endTime));
|
||||
|
||||
this.updateTimeRangeDisplay(timeRange);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update time range display
|
||||
*/
|
||||
private updateTimeRangeDisplay(container: HTMLElement): void {
|
||||
const startInput = container.querySelector<HTMLInputElement>('.range-start');
|
||||
const endInput = container.querySelector<HTMLInputElement>('.range-end');
|
||||
const fill = container.querySelector<HTMLElement>('swp-time-range-fill');
|
||||
const timesEl = container.querySelector('swp-time-range-times');
|
||||
const durationEl = container.querySelector('swp-time-range-duration');
|
||||
|
||||
if (!startInput || !endInput) return;
|
||||
|
||||
let startVal = parseInt(startInput.value);
|
||||
let endVal = parseInt(endInput.value);
|
||||
|
||||
// Ensure start doesn't exceed end
|
||||
if (startVal > endVal) {
|
||||
if (startInput === document.activeElement) {
|
||||
startInput.value = String(endVal);
|
||||
startVal = endVal;
|
||||
} else {
|
||||
endInput.value = String(startVal);
|
||||
endVal = startVal;
|
||||
}
|
||||
}
|
||||
|
||||
// Update fill bar
|
||||
if (fill) {
|
||||
const startPercent = (startVal / this.TIME_RANGE_MAX) * 100;
|
||||
const endPercent = (endVal / this.TIME_RANGE_MAX) * 100;
|
||||
fill.style.left = startPercent + '%';
|
||||
fill.style.width = (endPercent - startPercent) + '%';
|
||||
}
|
||||
|
||||
// Calculate duration
|
||||
const durationMinutes = (endVal - startVal) * 15;
|
||||
const durationHours = durationMinutes / 60;
|
||||
const durationText = durationHours % 1 === 0
|
||||
? `${durationHours} timer`
|
||||
: `${durationHours.toFixed(1).replace('.', ',')} timer`;
|
||||
|
||||
if (timesEl) timesEl.textContent = `${this.valueToTime(startVal)} – ${this.valueToTime(endVal)}`;
|
||||
if (durationEl) durationEl.textContent = durationText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup time range slider
|
||||
*/
|
||||
private setupTimeRangeSlider(): void {
|
||||
const timeRange = document.getElementById('scheduleTimeRange');
|
||||
if (!timeRange) return;
|
||||
|
||||
const startInput = timeRange.querySelector<HTMLInputElement>('.range-start');
|
||||
const endInput = timeRange.querySelector<HTMLInputElement>('.range-end');
|
||||
const fill = timeRange.querySelector<HTMLElement>('swp-time-range-fill');
|
||||
const track = timeRange.querySelector<HTMLElement>('swp-time-range-track');
|
||||
|
||||
this.updateTimeRangeDisplay(timeRange);
|
||||
|
||||
startInput?.addEventListener('input', () => {
|
||||
this.updateTimeRangeDisplay(timeRange);
|
||||
this.updateSelectedCellsTime();
|
||||
});
|
||||
|
||||
endInput?.addEventListener('input', () => {
|
||||
this.updateTimeRangeDisplay(timeRange);
|
||||
this.updateSelectedCellsTime();
|
||||
});
|
||||
|
||||
// Drag fill bar to move entire range
|
||||
if (fill && track && startInput && endInput) {
|
||||
let isDragging = false;
|
||||
let dragStartX = 0;
|
||||
let dragStartValues = { start: 0, end: 0 };
|
||||
|
||||
fill.addEventListener('mousedown', (e: MouseEvent) => {
|
||||
isDragging = true;
|
||||
dragStartX = e.clientX;
|
||||
dragStartValues.start = parseInt(startInput.value);
|
||||
dragStartValues.end = parseInt(endInput.value);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (e: MouseEvent) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const sliderWidth = track.offsetWidth;
|
||||
const deltaX = e.clientX - dragStartX;
|
||||
const deltaValue = Math.round((deltaX / sliderWidth) * this.TIME_RANGE_MAX);
|
||||
|
||||
const duration = dragStartValues.end - dragStartValues.start;
|
||||
let newStart = dragStartValues.start + deltaValue;
|
||||
let newEnd = dragStartValues.end + deltaValue;
|
||||
|
||||
if (newStart < 0) {
|
||||
newStart = 0;
|
||||
newEnd = duration;
|
||||
}
|
||||
if (newEnd > this.TIME_RANGE_MAX) {
|
||||
newEnd = this.TIME_RANGE_MAX;
|
||||
newStart = this.TIME_RANGE_MAX - duration;
|
||||
}
|
||||
|
||||
startInput.value = String(newStart);
|
||||
endInput.value = String(newEnd);
|
||||
this.updateTimeRangeDisplay(timeRange);
|
||||
this.updateSelectedCellsTime();
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
isDragging = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update selected cells with current time
|
||||
*/
|
||||
private updateSelectedCellsTime(): void {
|
||||
const selectedStatus = document.querySelector('#scheduleStatusOptions swp-status-option.selected') as HTMLElement;
|
||||
const status = selectedStatus?.dataset.status || 'work';
|
||||
|
||||
if (status !== 'work') return;
|
||||
|
||||
const timeRange = document.getElementById('scheduleTimeRange');
|
||||
if (!timeRange) return;
|
||||
|
||||
const startInput = timeRange.querySelector<HTMLInputElement>('.range-start');
|
||||
const endInput = timeRange.querySelector<HTMLInputElement>('.range-end');
|
||||
if (!startInput || !endInput) return;
|
||||
|
||||
const startTime = this.valueToTime(parseInt(startInput.value));
|
||||
const endTime = this.valueToTime(parseInt(endInput.value));
|
||||
const formattedTime = `${startTime} - ${endTime}`;
|
||||
|
||||
this.selectedCells.forEach(cell => {
|
||||
const timeDisplay = cell.querySelector('swp-time-display');
|
||||
if (timeDisplay && !timeDisplay.classList.contains('off') &&
|
||||
!timeDisplay.classList.contains('vacation') &&
|
||||
!timeDisplay.classList.contains('sick')) {
|
||||
timeDisplay.textContent = formattedTime;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update selected cells with current status
|
||||
*/
|
||||
private updateSelectedCellsStatus(): void {
|
||||
const selectedStatus = document.querySelector('#scheduleStatusOptions swp-status-option.selected') as HTMLElement;
|
||||
const status = selectedStatus?.dataset.status || 'work';
|
||||
|
||||
const timeRange = document.getElementById('scheduleTimeRange');
|
||||
const startInput = timeRange?.querySelector<HTMLInputElement>('.range-start');
|
||||
const endInput = timeRange?.querySelector<HTMLInputElement>('.range-end');
|
||||
|
||||
const startTime = startInput ? this.valueToTime(parseInt(startInput.value)) : '09:00';
|
||||
const endTime = endInput ? this.valueToTime(parseInt(endInput.value)) : '17:00';
|
||||
|
||||
this.selectedCells.forEach(cell => {
|
||||
const timeDisplay = cell.querySelector('swp-time-display');
|
||||
if (!timeDisplay) return;
|
||||
|
||||
timeDisplay.classList.remove('off', 'off-override', 'vacation', 'sick');
|
||||
|
||||
switch (status) {
|
||||
case 'work':
|
||||
timeDisplay.textContent = `${startTime} - ${endTime}`;
|
||||
break;
|
||||
case 'off':
|
||||
timeDisplay.classList.add('off');
|
||||
timeDisplay.textContent = '—';
|
||||
break;
|
||||
case 'vacation':
|
||||
timeDisplay.classList.add('vacation');
|
||||
timeDisplay.textContent = 'Ferie';
|
||||
break;
|
||||
case 'sick':
|
||||
timeDisplay.classList.add('sick');
|
||||
timeDisplay.textContent = 'Syg';
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup drawer save button
|
||||
*/
|
||||
private setupDrawerSave(): void {
|
||||
const saveBtn = document.getElementById('scheduleDrawerSave');
|
||||
saveBtn?.addEventListener('click', () => {
|
||||
// Changes are already applied in real-time
|
||||
this.clearSelection();
|
||||
this.showEmptyState();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the schedule drawer
|
||||
*/
|
||||
private openDrawer(): void {
|
||||
this.drawer?.classList.add('open');
|
||||
document.getElementById('drawerOverlay')?.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the schedule drawer
|
||||
*/
|
||||
private closeDrawer(): void {
|
||||
this.drawer?.classList.remove('open');
|
||||
document.getElementById('drawerOverlay')?.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
30
PlanTempus.Application/wwwroot/ts/types/WorkSchedule.ts
Normal file
30
PlanTempus.Application/wwwroot/ts/types/WorkSchedule.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* Work Schedule Types
|
||||
*
|
||||
* Types for employee work schedule (arbejdstidsplan)
|
||||
*/
|
||||
|
||||
export type ShiftStatus = 'work' | 'off' | 'vacation' | 'sick';
|
||||
|
||||
export interface WorkScheduleShift {
|
||||
status: ShiftStatus;
|
||||
start?: string; // "09:00" - only when status=work
|
||||
end?: string; // "17:00" - only when status=work
|
||||
note?: string;
|
||||
}
|
||||
|
||||
export interface EmployeeSchedule {
|
||||
employeeId: string;
|
||||
name: string;
|
||||
weeklyHours: number;
|
||||
schedule: Record<string, WorkScheduleShift>; // key = ISO date "2025-12-23"
|
||||
}
|
||||
|
||||
export interface WeekSchedule {
|
||||
weekNumber: number;
|
||||
year: number;
|
||||
startDate: string; // ISO date "2025-12-23"
|
||||
endDate: string; // ISO date "2025-12-29"
|
||||
closedDays: string[]; // ["2025-12-25"]
|
||||
employees: EmployeeSchedule[];
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue