updating assignment form to be more real time

This commit is contained in:
2023-08-08 16:27:52 -06:00
parent 7a2ee58617
commit 1494fd1906
15 changed files with 306 additions and 112 deletions

View File

@@ -39,7 +39,7 @@ builder.Services.AddScoped<CanvasService, CanvasService>();
builder.Services.AddScoped<YamlManager>();
builder.Services.AddScoped<CoursePlanner>();
builder.Services.AddScoped<AssignmentDragContainer>();
builder.Services.AddScoped<DragContainer>();
var app = builder.Build();

View File

@@ -4,72 +4,116 @@
@code
{
[Parameter]
protected override void OnInitialized()
{
planner.StateHasChanged += reload;
}
private void reload()
{
this.InvokeAsync(this.StateHasChanged);
}
public void Dispose()
{
planner.StateHasChanged -= reload;
}
[Parameter, EditorRequired]
public LocalAssignment Assignment { get; set; } = default!;
public string Description { get; set; } = default!;
[Parameter]
public EventCallback<string> DescriptionChanged { get; set; }
[Parameter]
public bool UseTemplate { get; set; }
[Parameter]
public EventCallback<bool> UseTemplateChanged { get; set; }
[Parameter]
public string? TemplateId { get; set; }
[Parameter]
public EventCallback<string?> TemplateIdChanged { get; set; }
[Parameter]
public Dictionary<string, string> VariableValues { get; set; } = new Dictionary<string, string>();
[Parameter]
public EventCallback<Dictionary<string, string>> VariableValuesChanged { get; set; }
protected override void OnParametersSet()
{
Description = Assignment.Description;
TemplateId = Assignment.TemplateId;
UseTemplate = Assignment.TemplateId != null && Assignment.TemplateId != "";
}
private AssignmentTemplate? selectedTemplate =>
planner
.LocalCourse?
.AssignmentTemplates
.FirstOrDefault(t => t.Id == TemplateId);
public string Preview => Markdown.ToHtml(Description);
.FirstOrDefault(t => t.Id == Assignment.TemplateId);
public string Preview => Markdown.ToHtml(Assignment.Description);
private void SaveAssignment(LocalAssignment newAssignment)
{
if(planner.LocalCourse != null)
{
var currentModule = planner
.LocalCourse
.Modules
.First(m =>
m.Assignments
.Select(a => a.Id)
.Contains(Assignment.Id)
) ?? throw new Exception("could not find current module in assignment description form");
var updatedModules = planner.LocalCourse.Modules.Select(m =>
m.Name == currentModule.Name
? currentModule with
{
Assignments=currentModule.Assignments.Select(a =>
a.Id == newAssignment.Id
? newAssignment
: a
).ToArray()
}
: m
).ToArray();
planner.LocalCourse = planner.LocalCourse with
{
Modules=updatedModules
};
}
}
}
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
role="switch"
id="useTemplateForDescription"
checked="@UseTemplate"
@onchange="async (e) =>
await UseTemplateChanged.InvokeAsync((bool)(e.Value ?? false))"
>
<label
class="form-check-label"
for="useTemplateForDescription"
>
class="form-check-input"
type="checkbox"
role="switch"
id="useTemplateForDescription"
@bind="UseTemplate"
<label class="form-check-label" for="useTemplateForDescription">
use template for description
</label>
</div>
@if(UseTemplate)
@if (UseTemplate)
{
@if(planner.LocalCourse != null)
@if (planner.LocalCourse != null)
{
<div class="row justify-content-around">
<div class="col-auto text-center">
<form @onsubmit:preventDefault="true">
<label for="templateSelect">Templates</label>
<select
id="templateSelect"
class="form-select"
value="@TemplateId"
@onchange="async (e) =>
await TemplateIdChanged.InvokeAsync(e.Value?.ToString())"
>
<option value=""></option>
@foreach (var template in planner.LocalCourse.AssignmentTemplates)
<div class="col-auto text-center">
<form @onsubmit:preventDefault="true">
<label for="templateSelect">Templates</label>
<select
id="templateSelect"
class="form-select"
@onchange="@((e) =>
{
var newTemplateId = e.Value?.ToString();
SaveAssignment(Assignment with
{
TemplateId = newTemplateId
});
})"
>
<option value=""></option>
@foreach (var template in planner.LocalCourse.AssignmentTemplates)
{
<option value="@template.Id">@template.Name</option>
}
@@ -78,30 +122,30 @@
</div>
<div class="col-auto">
VARIABLES:
@if(selectedTemplate != null)
@if (selectedTemplate != null)
{
var variables = AssignmentTemplate.GetVariables(selectedTemplate.Markdown);
@foreach(var variable in variables)
@foreach (var variable in variables)
{
<div class="my-1">
<label
class="form-label"
>
<label class="form-label">
@variable
</label>
<input
class="form-control"
value="@VariableValues.GetValueOrDefault(variable, String.Empty)"
@oninput="async (e) =>
@oninput="@((e) =>
{
var newValue = e.Value?.ToString() ?? String.Empty;
var newDictionary = new Dictionary<string, string>(VariableValues);
newDictionary[variable] = newValue;
await VariableValuesChanged.InvokeAsync(newDictionary);
}
"
/>
SaveAssignment(Assignment with
{
TemplateVariables = newDictionary
});
})"
/>
</div>
}
}
@@ -113,32 +157,34 @@ else
{
<div class="row">
<div class="col">
<label
for="description"
class="form-label"
>
Description
</label>
</div>
<div class="col">
HTML Preview
</div>
<div class="col">
<label for="description" class="form-label">
Description
</label>
</div>
<div class="col">
HTML Preview
</div>
</div>
<div class="row">
<div class="col">
<textarea
id="description"
class="form-control"
value="@Description"
rows=12
@oninput="async (e) =>
await DescriptionChanged.InvokeAsync(e.Value?.ToString() ?? String.Empty)"
/>
@oninput="@((e) =>
{
var newDescription = e.Value?.ToString();
SaveAssignment(Assignment with
{
Description = newDescription ?? ""
});
})"
/>
</div>
<div class="col">
@((MarkupString) Preview)
@((MarkupString)Preview)
</div>
</div>

View File

@@ -4,6 +4,18 @@
@inject CanvasService canvas
@code {
protected override void OnInitialized()
{
planner.StateHasChanged += reload;
}
private void reload()
{
this.InvokeAsync(this.StateHasChanged);
}
public void Dispose()
{
planner.StateHasChanged -= reload;
}
[Parameter]
[EditorRequired]
@@ -20,12 +32,6 @@
[Parameter]
public Action OnHide { get; set; } = () => { };
public Modal? AssignmentModal { get; set; } = null;
private bool useTemplate { get; set; } = false;
private string? templateId { get; set; }
public Dictionary<string, string> templateVariables { get; set; } =
new Dictionary<string, string>();
private string description { get; set; } = String.Empty;
private string name { get; set; } = String.Empty;
private bool lockAtDueDate { get; set; }
private IEnumerable<RubricItem> rubric { get; set; } = Enumerable.Empty<RubricItem>();
@@ -38,13 +44,9 @@
AssignmentModal?.Show();
}
name = Assignment.Name;
description = Assignment.Description;
lockAtDueDate = Assignment.LockAtDueDate;
rubric = Assignment.Rubric;
submissionTypes = Assignment.SubmissionTypes;
templateId = Assignment.TemplateId;
useTemplate = Assignment.UseTemplate;
templateVariables = Assignment.TemplateVariables;
}
private void submitHandler()
@@ -54,18 +56,13 @@
.Select(s => s.Points)
.Sum();
var newAssignment = Assignment with
{
Name=name,
Description=description,
LockAtDueDate=lockAtDueDate,
Rubric=rubric,
PointsPossible=totalRubricPoints,
SubmissionTypes=submissionTypes,
UseTemplate=useTemplate,
TemplateId=templateId,
TemplateVariables=templateVariables,
};
if(planner.LocalCourse != null)
@@ -97,6 +94,7 @@
}
AssignmentModal?.Hide();
}
private void updateRubric(IEnumerable<RubricItem> newRubric)
{
rubric = newRubric;
@@ -162,10 +160,7 @@
</div>
<div class="m-1">
<AssignmentDescriptionEditor
@bind-Description="description"
@bind-UseTemplate="useTemplate"
@bind-TemplateId="templateId"
@bind-VariableValues="templateVariables"
Assignment="Assignment"
/>
</div>
@@ -196,7 +191,7 @@
Class="btn btn-danger"
OnConfirmAsync="HandleDelete"
/>
<button class="btn btn-primary" @onclick="submitHandler">
<button class="btn btn-primary" @onclick="@(() => AssignmentModal?.Hide())">
Save
</button>
</Footer>

View File

@@ -0,0 +1,77 @@
using Microsoft.AspNetCore.Components;
namespace Management.Web.Shared.Components.Quiz;
public class DroppableQuiz : ComponentBase
{
[Inject]
protected CoursePlanner planner { get; set; } = default!;
[Parameter, EditorRequired]
public LocalQuiz Quiz { get; set; } = default!;
internal void dropCallback(DateTime? dropDate, LocalModule? dropModule)
{
if (dropDate != null)
{
dropOnDate(dropDate ?? throw new Exception("drop date for quiz is null"));
}
else if (dropModule != null)
{
dropOnModule(dropModule);
}
}
private void dropOnDate(DateTime dropDate)
{
if (planner.LocalCourse == null)
return;
var currentModule =
planner.LocalCourse.Modules.First(m => m.Quizzes.Select(q => q.Id).Contains(Quiz.Id))
?? throw new Exception("in quiz callback, could not find module");
var defaultDueTimeDate = new DateTime(
year: dropDate.Year,
month: dropDate.Month,
day: dropDate.Day,
hour: planner.LocalCourse.DefaultDueTime.Hour,
minute: planner.LocalCourse.DefaultDueTime.Minute,
second: 0
);
var NewQuizList = currentModule.Quizzes
.Select(q => q.Id != Quiz.Id ? q : q with { DueAt = defaultDueTimeDate })
.ToArray();
var updatedModule = currentModule with { Quizzes = NewQuizList };
var updatedModules = planner.LocalCourse.Modules
.Select(m => m.Name == updatedModule.Name ? updatedModule : m)
.ToArray();
planner.LocalCourse = planner.LocalCourse with { Modules = updatedModules };
}
private void dropOnModule(LocalModule dropModule)
{
if (planner.LocalCourse == null)
return;
var newModules = planner.LocalCourse.Modules
.Select(
m =>
m.Name != dropModule.Name
? m with
{
Quizzes = m.Quizzes.Where(q => q.Id != Quiz.Id).DistinctBy(q => q.Id)
}
: m with
{
Quizzes = m.Quizzes.Append(Quiz).DistinctBy(q => q.Id)
}
)
.ToArray();
var newCourse = planner.LocalCourse with { Modules = newModules };
planner.LocalCourse = newCourse;
}
}

View File

@@ -1,7 +1,7 @@
@using Management.Web.Shared.Components
@using Management.Web.Shared.Components.AssignmentForm
@inject AssignmentDragContainer dragContainer
@inject DragContainer dragContainer
@inject CoursePlanner planner
@code {
@@ -129,7 +129,6 @@
@ondragstart="HandleDragStart"
@ondragend="HandleDragEnd"
@onclick="@(() => showUpdateForm = true)"
class="draggableCart"
role="button"
>
<div class="card">

View File

@@ -1,11 +1,12 @@
@using Management.Web.Shared.Components
@using Management.Web.Shared.Components.Quiz
@using Management.Web.Shared.Module.Assignment
@using LocalModels
@inject CoursePlanner configurationManagement
@inject CoursePlanner planner
@inject AssignmentDragContainer dragContainer
@inject DragContainer dragContainer
@code {
[Parameter, EditorRequired]
@@ -110,6 +111,11 @@
{
<AssignmentDetails Assignment="a" Module="Module" />
}
<br>
@foreach(var quiz in Module.Quizzes)
{
<QuizDetail Quiz="quiz" />
}
</div>
</div>
</div>

View File

@@ -46,6 +46,7 @@
Modules=newModules
};
}
Name = "";
modal?.Hide();
}
}

View File

@@ -0,0 +1,45 @@
@using Management.Web.Shared.Components.Quiz
@inject DragContainer dragContainer
@inherits DroppableQuiz
@code {
private bool showUpdateForm { get; set; } = false;
private void HandleDragStart()
{
dragContainer.DropCallback = dropCallback;
}
private void HandleDragEnd()
{
dragContainer.DropCallback = null;
}
}
<div
draggable="true"
@ondragstart="HandleDragStart"
@ondragend="HandleDragEnd"
@onclick="@(() => showUpdateForm = true)"
role="button"
>
<div class="card">
<div class="card-body p-0">
<div class="card-title pt-2 px-2 m-0">
<h4>@Quiz.Name</h4>
</div>
<div class="card-text overflow-hidden p-2">
<div>Due At: @Quiz.DueAt</div>
</div>
</div>
</div>
</div>

View File

@@ -1,6 +1,6 @@
@using Management.Web.Shared.Components.AssignmentForm
@inject AssignmentDragContainer dragContainer
@inject DragContainer dragContainer
@inject CoursePlanner planner
@code {

View File

@@ -1,4 +1,4 @@
@inject AssignmentDragContainer dragContainer
@inject DragContainer dragContainer
@inject CoursePlanner configurationManagement
@inject CoursePlanner planner

View File

@@ -1,4 +1,4 @@
public class AssignmentDragContainer
public class DragContainer
{
public Action<DateTime?, LocalModule?>? DropCallback { get; set; }
}

View File

@@ -107,15 +107,40 @@ public static partial class CoursePlannerSyncronizationExtensions
{
var canvasAssignment = canvasAssignments.First(ca => ca.Id == localAssignment.CanvasId);
var localHtmlDescription = localAssignment.GetDescriptionHtml(courseAssignmentTemplates);
var localHtmlDescription = localAssignment.GetDescriptionHtml(courseAssignmentTemplates)
.Replace("&gt;", "")
.Replace("&lt;", "")
.Replace(">", "")
.Replace("<", "");
var canvasHtmlDescription = canvasAssignment.Description;
canvasHtmlDescription = CanvasScriptTagRegex().Replace(canvasHtmlDescription, "");
canvasHtmlDescription = CanvasLinkTagRegex().Replace(canvasHtmlDescription, "");
canvasHtmlDescription = canvasHtmlDescription.Replace("&gt;", ">");
canvasHtmlDescription = canvasHtmlDescription.Replace("&lt;", "<");
canvasHtmlDescription = canvasHtmlDescription
.Replace("&gt;", "")
.Replace("&lt;", "")
.Replace(">", "")
.Replace("<", "");
var dueDatesSame =
canvasAssignment.DueAt != null
&& new DateTime(
year: canvasAssignment.DueAt.Value.Year,
month: canvasAssignment.DueAt.Value.Month,
day: canvasAssignment.DueAt.Value.Day,
hour: canvasAssignment.DueAt.Value.Hour,
minute: canvasAssignment.DueAt.Value.Minute,
second: canvasAssignment.DueAt.Value.Second
)
== new DateTime(
year: localAssignment.DueAt.Year,
month: localAssignment.DueAt.Month,
day: localAssignment.DueAt.Day,
hour: localAssignment.DueAt.Hour,
minute: localAssignment.DueAt.Minute,
second: localAssignment.DueAt.Second
);
var dueDatesSame = canvasAssignment.DueAt == localAssignment.DueAt;
var descriptionSame = canvasHtmlDescription == localHtmlDescription;
var nameSame = canvasAssignment.Name == localAssignment.Name;
var lockDateSame = canvasAssignment.LockAt == localAssignment.LockAt;
@@ -128,7 +153,6 @@ public static partial class CoursePlannerSyncronizationExtensions
{
if (!dueDatesSame)
{
Console.WriteLine(
$"Due dates different for {localAssignment.Name}, local: {localAssignment.DueAt}, in canvas {canvasAssignment.DueAt}"
);

View File

@@ -41,7 +41,7 @@ public record LocalAssignment
public ulong? CanvasId { get; init; } = null;
public string Name { get; init; } = "";
public string Description { get; init; } = "";
public bool UseTemplate { get; init; } = false;
// public bool UseTemplate { get; init; } = false;
public string? TemplateId { get; init; } = string.Empty;
public Dictionary<string, string> TemplateVariables { get; init; } =
new Dictionary<string, string>();
@@ -66,12 +66,12 @@ public record LocalAssignment
public string GetDescriptionHtml(IEnumerable<AssignmentTemplate>? templates)
{
if (UseTemplate && templates == null)
if (TemplateId != null && TemplateId != "" && templates == null)
throw new Exception("cannot get description for assignment if templates not provided");
var rubricHtml = GetRubricHtml();
if (UseTemplate)
if (TemplateId != null && TemplateId != "")
{
var template =
(templates?.FirstOrDefault(t => t.Id == TemplateId))

View File

@@ -16,3 +16,4 @@ Development command: `dotnet watch --project Management.Web/`
Apparently the VSCode razor extension was compiled with a preview of dotnet 6... and only uses openssl 1.1. After installing openssl1.1 you can tell vscode to provide it with `export CLR_OPENSSL_VERSION_OVERRIDE=1.1; code ~/projects/canvasManagement`.
The issue can be tracked [here](https://github.com/dotnet/razor/issues/6241)