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

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

@inject DragContainer 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 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 
        {
          DueAt=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.DueAt);
    } 
    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)"
  role="button"
>
  <div class="card">
    <div class="card-body p-0">
      <div class="card-title pt-2 px-2 m-0">
        <div class="row mx-1">
          <div class="col offset-2 offset-lg-1 ">
            <h4 class="text-center m-0">
              @Assignment.Name
            </h4>
          </div>
          <div class="col-2 col-lg-1 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
            {
              <SyncIcon />
            }
          </div>
        </div>
      </div>

      @if(!showAll)
      {
        <div class="card-text overflow-hidden p-2" style="max-height: 5rem;">
          <div>Points: @Assignment.PointsPossible</div>
          <div>Due At: @Assignment.DueAt</div>
        </div>
       }
       else
       {
          <div class="card-text">
            <div class="px-3 py-1 bg-dark-subtle my-1">

            @((MarkupString) @Assignment.GetDescriptionHtml(planner.LocalCourse?.AssignmentTemplates))
            </div>

            <section class="px-3">
              <div>Points: @Assignment.PointsPossible</div>
              <div>Due At: @Assignment.DueAt</div>
              <div>Lock At: @Assignment.LockAt</div>
              <div>Submission Types:</div>
              <ul>
                @foreach(var type in Assignment.SubmissionTypes)
                {
                  <li>
                    @type
                  </li>
                }
              </ul>
            </section>
          </div>
       }
      

      @if(!showAll)
      {
        <div 
          class="text-center fs-3 fw-bold lh-1 text-primary" 
          role="button" 
          @onclick:preventDefault="true" 
          @onclick:stopPropagation="true"
          @onclick="() => showAll = true"
        >
          <svg 
            width="30" 
            height="30" 
            viewBox="0 0 20 20" 
            xmlns="http://www.w3.org/2000/svg"
          >
            <path 
              d="M6 10a2 2 0 11-4.001-.001A2 2 0 016 10zm6 0a2 2 0 11-4.001-.001A2 2 0 0112 10zm6 0a2 2 0 11-4.001-.001A2 2 0 0118 10z" 
              fill="var(--bs-primary)"
            />
          </svg>
        </div>
      }
      else
      {
        <div 
          class="text-center fs-3 fw-bold lh-1 text-primary" 
          role="button" 
          @onclick:preventDefault="true" 
          @onclick:stopPropagation="true"
          @onclick="() => showAll = false"
        >
          <svg 
            width="30" 
            height="30" 
            viewBox="0 0 20 20" 
            xmlns="http://www.w3.org/2000/svg"
          >
            <path 
              d="M6 10a2 2 0 11-4.001-.001A2 2 0 016 10zm6 0a2 2 0 11-4.001-.001A2 2 0 0112 10zm6 0a2 2 0 11-4.001-.001A2 2 0 0118 10z" 
              fill="var(--bs-primary)"
            />
          </svg>
        </div>
      }

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

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