canvasManagement/Management.Web/Pages/Course/Module/Assignment/AssignmentListItem.razor

@using Management.Web.Shared.Components
@using Management.Web.Course.Module.Assignment
@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 existsInCanvas =>
    assignmentInCanvas != null;
  private void OnClick()
  {
    assignmentContext.Assignment = Assignment;
    Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name + "/assignment/" + Assignment.Name);
  }

  private bool NeedsToBeUpdatedInCanvas => 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)
    );
}

<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(existsInCanvas)
            {
              @if(NeedsToBeUpdatedInCanvas)
              {
                <SyncIcon />
              }
              else
              {
                <CheckIcon />
              }
            }
            else
            {
              <SyncIcon />
            }
          </div>
        </div>
      </div>

      @if(
        planner.LocalCourse != null
        && existsInCanvas
        && NeedsToBeUpdatedInCanvas
        && assignmentInCanvas != null
      )
      {
        <div class="mx-3 text-body-tertiary">
          @Assignment.GetUpdateReason(
            (CanvasAssignment)assignmentInCanvas,
            Assignment.GetCanvasAssignmentGroupId(planner.LocalCourse.Settings.AssignmentGroups))
        </div>
      }
      @if(!existsInCanvas)
      {
        <div class="mx-3 text-body-tertiary">
          no assignment with same name in canvas
        </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>