canvasManagement/Management.Web/Shared/Module/Assignment/AssignmentDetails.razor

@using Management.Web.Shared.Components
@using Management.Web.Shared.Module.Assignment.AssignmentForm

@inject AssignmentDragContainer dragContainer
@inject CoursePlanner planner

@code {
  [Parameter]
  [EditorRequired]
  public LocalAssignment Assignment { get; set; } = new();
  [Parameter]
  [EditorRequired]
  public LocalModule Module { get; set; } = new();
  private bool showUpdateForm = false;
  
  protected override void OnInitialized()
  {
    planner.StateHasChanged += reload;
  }
  private void reload()
  {
    this.InvokeAsync(this.StateHasChanged);
  }
  public void Dispose()
  {
    planner.StateHasChanged -= reload;
  }
  private Modal? assignmentEditorModal { get; set; }
  private bool showAll { get; set; } = false;

  private void dropOnDate(DateTime dropDate)
  {
    if (planner.LocalCourse == null) return;
    var currentModule = planner
      .LocalCourse
      .Modules
      .First(m => 
        m.Assignments
          .Select(a => a.id)
          .Contains(Assignment.id)
      ) ?? throw new Exception("in day 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 moduleWithUpdatedAssignment = currentModule with 
    {
      Assignments = currentModule.Assignments.Select(a => 
        a.id != Assignment.id
        ? a
        : a with 
        {
          due_at=defaultDueTimeDate
        }
      )
    };
    var updatedModules = planner.LocalCourse.Modules
      .Select(m => 
        m.Name == moduleWithUpdatedAssignment.Name 
          ? moduleWithUpdatedAssignment 
          : m
      );
    var newCourse = planner.LocalCourse with 
    {
      Modules = updatedModules
    };
    planner.LocalCourse = newCourse;
  }
  private void dropOnModule(LocalModule module)
  {
    if (planner.LocalCourse == null) return;
    var newModules = planner.LocalCourse.Modules.Select(m => 
      m.Name != module.Name
        ? m with 
        {
          Assignments = m.Assignments.Where(a => a.id != Assignment.id).DistinctBy(a => a.id)
        }
        : m with 
        {
          Assignments = m.Assignments.Append(Assignment).DistinctBy(a => a.id)
        }
    );

    var newCourse = planner.LocalCourse with 
    {
      Modules = newModules
    };
    planner.LocalCourse = newCourse;
  }

  private void DropCallback (DateTime? dropDate, LocalModule? module) 
  {
    if (module == null)
    {
      dropOnDate(dropDate ?? Assignment.due_at);
    } 
    else
    {
      dropOnModule(module);
    }
  }
  private void HandleDragStart()
  {
    dragContainer.DropCallback = DropCallback;
  }

  private void HandleDragEnd()
  {
    dragContainer.DropCallback = null;
  }

  private bool isSyncedWithCanvas => 
    planner
    .CanvasAssignments?
    .FirstOrDefault(
      a => a.Id == Assignment.canvasId
    ) != null;

}

<div 
  draggable="true"
  @ondragstart="HandleDragStart"
  @ondragend="HandleDragEnd"
  @onclick="@(() => showUpdateForm = true)"
  class="draggableCart"
  role="button"
>
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <div class="row">
          <div class="col">
          </div>
          <div class="col-8">
            <h4 class="text-center">
              @Assignment.name
            </h4>
            
          </div>
          <div class="col text-end">
            @if(isSyncedWithCanvas)
            {
              @if(planner.LocalCourse != null
                && planner.LocalCourse.CanvasId != null
                && planner.CanvasAssignments != null
                && planner.CanvasModules != null 
                && Assignment.NeedsUpdates(
                  planner.CanvasAssignments, 
                  planner.LocalCourse.AssignmentTemplates
                )
              )
              {
                <SyncIcon />
              }
              else
              {
                <CheckIcon />
              }
            }
            else
            {
              <div>Not Synced with Canvas</div>
            }
          </div>
        </div>
      </div>
      @if(!showAll)
      {
        <div class="card-text overflow-hidden" style="max-height: 5rem;">
          @* @if(Assignment.use_template)
          {
            var html = Assignment.GetDescriptionHtml(planner.LocalCourse?.AssignmentTemplates);
            @((MarkupString) html)
          }
          else
          {
            @Assignment.description
          } *@
          <div>Points: @Assignment.points_possible</div>
          <div>Due At: @Assignment.due_at</div>
        </div>
       }
       else
       {
          <div class="card-text">
            @if(Assignment.use_template)
            {
              var html = Assignment.GetDescriptionHtml(planner.LocalCourse?.AssignmentTemplates);
              @((MarkupString) html)
            }
            else
            {
              @Assignment.description
            }
            
            <hr>
            <div>Points: @Assignment.points_possible</div>
            <div>Due At: @Assignment.due_at</div>
            <div>Lock At: @Assignment.lock_at</div>
            <br>
            <h5>
              Rubric
            </h5>
            @foreach(var rubricItem in Assignment.rubric)
            {
              <div class="row m-0">
                <div class="col border-end my-auto">
                  @rubricItem.Label
                </div>
                <div class="col-2 my-auto">
                  @rubricItem.Points
                </div>
              </div>
            }
            <br>
            <div>Submission Types:</div>
            <ul>
              @foreach(var type in Assignment.submission_types)
              {
                <li>
                  @type
                </li>
              }
            </ul>
          </div>
       }
      

      @if(!showAll)
      {
        <div 
          class="text-center" 
          role="button" 
          @onclick:preventDefault="true" 
          @onclick:stopPropagation="true"
          @onclick="() => showAll = true"
        >
          ...
        </div>
      }
      else
      {
        <div 
          class="text-center" 
          role="button" 
          @onclick:preventDefault="true" 
          @onclick:stopPropagation="true"
          @onclick="() => showAll = false"
        >
          ...
        </div>
      }

    </div>
  </div>
</div>

<AssignmentForm
  Assignment="Assignment"
  Show="showUpdateForm"
  OnHide="@(() => showUpdateForm = false)"
  Module="Module"
/>