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

@using Management.Web.Shared.Components
@using Management.Web.Shared.Components.AssignmentForm
@using CanvasModel.Assignments;

@inject DragContainer dragContainer
@inject NavigationManager Navigation
@inject AssignmentEditorContext assignmentContext

@inherits DroppableAssignment

@code {
  [Parameter]
  [EditorRequired]
  public LocalModule Module { get; set; } = new();
  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 HandleDragStart()
  {
    dragContainer.DropCallback = DropCallback;
  }

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

  private CanvasAssignment? assignmentInCanvas => planner
    .CanvasAssignments?
    .FirstOrDefault(
      a => a.Name == Assignment.Name
    );

  private bool isSyncedWithCanvas => 
    assignmentInCanvas != null;
  private void OnClick() 
  {
    assignmentContext.Assignment = Assignment;
    Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name + "/assignment/" + Assignment.Name);
  }
}

<div 
  draggable="true"
  @ondragstart="HandleDragStart"
  @ondragend="HandleDragEnd"
  @onclick="OnClick"
  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.Settings.CanvasId != null
                && planner.CanvasAssignments != null
                && planner.CanvasModules != null 
                && assignmentInCanvas != null
                && Assignment.NeedsUpdates(
                  (CanvasAssignment)assignmentInCanvas, 
                  Assignment.GetCanvasAssignmentGroupId(planner.LocalCourse.Settings.AssignmentGroups)
                )
              )
              {
                <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())
            </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>