Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: Solutions blank state #4007

Merged
merged 1 commit into from
Jul 21, 2023
Merged

Feature: Solutions blank state #4007

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/assets/images/icons/folder-plus.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 6 additions & 6 deletions app/components/project_submissions/item_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<div id="<%= dom_id(project_submission) %>" data-id="<%= project_submission.id %>" data-sort-target="item" data-sort-code="<%= sort_code %>">
<div data-test-id="submission-item" class="relative py-6 border-solid border-t border-gray-300 flex flex-col md:flex-row justify-between items-center">
<div data-test-id="submission-item" class="relative py-6 border-solid border-t border-gray-300 flex flex-col md:flex-row justify-between md:items-center">

<div class="flex items-center mb-4 md:mb-0">
<div class="flex items-center mb-6 md:mb-0">
<%= render ProjectSubmissions::LikeComponent.new(project_submission) %>
<p class="truncate max-w-xs lgs:max-w-lg font-medium text-lg break-words"><%= project_submission.user.username %></p>
</div>

<div class="flex flex-col md:flex-row md:items-center">
<%= link_to 'View code', project_submission.repo_url, target: '_blank', rel: 'noreferrer', class: 'button button--gray font-semibold md:mr-4', data: { test_id: 'view-code-btn' } %>
<%= link_to 'Live preview', project_submission.live_preview_url, target: '_blank', rel: 'noreferrer', class: 'button button--gray font-semibold mt-5 md:mt-0 md:mr-4', data: { test_id: 'live-preview-btn' } %>
<div class="flex flex-row md:items-center">
<%= link_to 'View code', project_submission.repo_url, target: '_blank', rel: 'noreferrer', class: 'button button--gray font-semibold mr-4', data: { test_id: 'view-code-btn' } %>
<%= link_to 'Live preview', project_submission.live_preview_url, target: '_blank', rel: 'noreferrer', class: 'button button--gray font-semibold mr-4', data: { test_id: 'live-preview-btn' } %>

<div class="relative flex-none" data-controller="visibility" data-action="visibility:click:outside->visibility#off" data-visibility-visible-value="false">
<div class="flex-none absolute top-7 right-0 md:relative md:top-auto md:right-auto" data-controller="visibility" data-action="visibility:click:outside->visibility#off" data-visibility-visible-value="false">
<button type="button" data-action="click->visibility#toggle" data-test-id="submission-action-menu-btn" class="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100" id="options-menu-0-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open options</span>
<%= inline_svg_tag 'icons/ellipsis-vertical.svg', aria: true, title: 'open menu', desc: 'open menu icon' %>
Expand Down
22 changes: 11 additions & 11 deletions app/views/lessons/_project_submissions.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<% if Feature.enabled?(:v2_project_submissions, current_user) %>
<%= turbo_frame_tag dom_id(@lesson, 'project-submissions'), src: lesson_v2_project_submissions_path(lesson, limit: 10) do %>
<div class="flex justify-center">
<%= inline_svg_tag 'icons/spinner.svg', class: 'animate-spin h-12 w-12 text-gray-400 dark:text-gray-300', aria: true, title: 'dismiss', desc: 'dismiss icon' %>
</div>
<% end %>
<%= turbo_frame_tag dom_id(@lesson, 'project-submissions'), src: lesson_v2_project_submissions_path(lesson, limit: 10) do %>
<div class="flex justify-center">
<%= inline_svg_tag 'icons/spinner.svg', class: 'animate-spin h-12 w-12 text-gray-400 dark:text-gray-300', aria: true, title: 'dismiss', desc: 'dismiss icon' %>
</div>
<% end %>

<div>
<p class="text-center py-6 px-0">
<span> Showing <%= limit %> most liked submissions -
<%= link_to 'View full list of solutions', lesson_v2_project_submissions_path(lesson), class: 'underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300', data: { test_id: 'view-all-projects-link' } %>
</p>
</div>
<% if @lesson.project_submissions.any? %>
<p class="text-center py-6 px-0">
<span> Showing <%= limit %> most liked submissions -
<%= link_to 'View full list of solutions', lesson_v2_project_submissions_path(lesson), class: 'underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300', data: { test_id: 'view-all-projects-link' } %>
</p>
<% end %>
<% else %>
<%= react_component(
'project-submissions/index',
Expand Down
8 changes: 8 additions & 0 deletions app/views/lessons/v2_project_submissions/_blank_state.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<div class="p-8 pb-16" id="project-solutions-blank-state">
<div class="text-center">
<%= inline_svg_tag 'icons/folder-plus.svg', class: 'mx-auto h-12 w-12 text-gray-400 dark:text-gray-500', aria: true, title: 'No solutions', desc: 'No solutions icon' %>

<h3 class="mt-2 text-xl font-semibold text-gray-900 dark:text-gray-200">No solutions</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Be the first</p>
</div>
</div>
1 change: 1 addition & 0 deletions app/views/lessons/v2_project_submissions/create.turbo_stream.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
<%= render ProjectSubmissions::ItemComponent.new(project_submission: @project_submission, current_user:) %>
<% end %>

<%= turbo_stream.remove 'project-solutions-blank-state' %>
<%= turbo_stream.update 'add-submission-button', '' %>
6 changes: 6 additions & 0 deletions app/views/lessons/v2_project_submissions/destroy.turbo_stream.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,9 @@
<%= turbo_stream.update 'add-submission-button' do %>
<%= render 'lessons/v2_project_submissions/add_button', lesson: @lesson %>
<% end %>

<% if @lesson.project_submissions.none? %>
<%= turbo_stream.append 'submissions-list' do %>
<%= render 'lessons/v2_project_submissions/blank_state' %>
<% end %>
<% end %>
51 changes: 28 additions & 23 deletions app/views/lessons/v2_project_submissions/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,44 @@
<%= title(@lesson.display_title) %>

<div class="page-container">
<div>
<div>
<%= link_to lesson_path(@lesson, anchor: 'solutions'), class: 'inline-flex items-center pb-10 text-gray-600 text-base hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 gap-2' do %>
<%= inline_svg_tag 'icons/arrow-left-circle.svg', aria: true, title: 'Back to lesson icon' %>
Back to lesson
<% end %>
</div>

<%= turbo_frame_tag dom_id(@lesson, 'project-submissions') do %>
<div class="mb-8 text-left">
<%= turbo_frame_tag dom_id(@lesson, 'project-submissions') do %>
<div class="mb-8 text-left">

<header class="flex flex-col space-y-6 justify-between items-center pb-8 text-center md:space-y-0 md:text-left md:flex-row">
<div class="flex md:flex-start flex-col space-y-1">
<h3 class="text-4xl font-medium" id="solutions">Solutions:</h3>
<h4 data-test-id="course-lesson-title" class="text-xl text-gray-500 dark:text-gray-400">
<%= @lesson.course.title %> : (<%= @lesson.title %>)
</h4>
</div>
<header class="flex flex-col space-y-6 justify-between items-center pb-8 text-center md:space-y-0 md:text-left md:flex-row">
<div class="flex md:flex-start flex-col space-y-1">
<h3 class="text-3xl font-medium text-gray-900 dark:text-gray-200" id="solutions">Solutions:</h3>

<div id="add-submission-button">
<% if @current_user_submission.nil? %>
<%= render 'lessons/v2_project_submissions/add_button', lesson: @lesson %>
<% end %>
</div>
</header>
<h4 data-test-id="course-lesson-title" class="text-lg text-gray-500 dark:text-gray-400">
<%= @lesson.course.title %> : (<%= @lesson.title %>)
</h4>
</div>

<%= turbo_frame_tag 'submissions-list', data: { test_id: 'submissions-list', controller: 'sort' } do %>
<%= render ProjectSubmissions::ItemComponent.new(project_submission: @current_user_submission, current_user:) %>
<%= render ProjectSubmissions::ItemComponent.with_collection(@project_submissions, current_user:) %>
<% end %>
</div>
<% end %>
<div id="add-submission-button">
<% if @current_user_submission.nil? %>
<%= render 'lessons/v2_project_submissions/add_button', lesson: @lesson %>
<% end %>
</div>
</header>

<%= turbo_frame_tag 'submissions-list', data: { test_id: 'submissions-list', controller: 'sort' } do %>
<% if @lesson.project_submissions.any? %>
<%= render ProjectSubmissions::ItemComponent.new(project_submission: @current_user_submission, current_user:) %>
<%= render ProjectSubmissions::ItemComponent.with_collection(@project_submissions, current_user:) %>
<% else %>
<% render 'lessons/v2_project_submissions/blank_state' %>
<% end %>
<% end %>
</div>
<% end %>

<div class="text-center overflow-x-auto">
<div class="text-center overflow-x-auto">
<%== pagy_nav(@pagy) %>
</div>
</div>