.container-fluid#reportsPage v-cloak="" data-controller="reports" .row .col-md-3 = render partial: "respondent_categories/sidebar" .col-md-9 = render_breadcrumbs([ \ { name: 'Home', path: projects_path }, \ { name: @project.title, path: project_path(@project) }, \ { name: @respondent_category.name, path: [@project, @respondent_category] }, \ { name: "Theme Reports", path: theme_reports_project_respondent_category_path(@project, @respondent_category) }, \ { name: @themes_report.name } \ ]) - if @themes_report.respondent_category.highlight_themes.joins(:transcript_highlights).exists? .fs-16.semi-bold.mb-4 = @themes_report.name .d-flex.justify-content-between .fs-24 | Themes Report .d-flex.mb-2.flex-wrap.gap-2 = button_to delete_report_project_respondent_category_themes_report_path(@project, @respondent_category, @themes_report), method: :delete, data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' }, class: "btn btn-danger fs-12" do i.feather-14 data-feather="trash-2" = link_to download_report_project_respondent_category_themes_report_path(@project, @respondent_category, @themes_report), class: "btn btn-success fs-12", target: "_blank" do i.bi.bi-file-earmark-excel.me-2.fs-10 | Download button.btn.btn-secondary.fs-12[ :class="{ active: isUnthemedView }" @click="toggleUnthemedView(tableViews.UNTHEMED)" ] {{ isUnthemedView ? 'Hide Un-themed Highlights' : 'Show Un-themed Highlights' }} button.btn.btn-secondary.fs-12[ :class="{ active: isHighlightView }" @click="toggleView(tableViews.HIGHLIGHT)" ] {{ isHighlightView ? 'Toggle to Themed Raw Highlights' : 'Toggle to Sectioned Highlights' }} .reports-container .reports-table v-show="isHighlightView" ref="highlightTable" table.table-striped.table.table-bordered.table-responsive style="transform: translate3d(0, 0, 0);" thead.fs-12 tr th button.btn.btn-sm.btn-outline-primary.py-1.px-2.fs-12[ @click="toggleAllInTable" style="width: fit-content; min-height: 22px; line-height: 1.2" ] vue-feather.mt-1[ :type="tableExpanded ? 'minimize-2' : 'maximize-2'" size="16" ] - @respondents_with_highlights.each do |respondent| th.p-4 style="min-width: 300px;" = link_to respondent.name, [respondent.project, respondent.respondent_category, respondent], target: "_blank" - unless respondent.tags.empty? .d-flex.flex-wrap.gap-1.mt-1 - respondent.tags.includes(:tag_category).each do |tag| span.badge.bg-secondary.me-2.text-black.fs-10 = tag.tag_category.name |: = tag.name tbody.fs-12 - @highlight_table_data.each do |section_data| - section_data[:themes_data].each do |theme_data| tr td.p-4.align-top.semi-bold expandable-row[ :section-name="'#{section_data[:section].name} | #{theme_data[:theme].theme}'" :section-id="'#{theme_data[:theme].id}'" :parent-expanded="tableExpanded" @toggle-row="expanded => toggleRowExpansion('#{theme_data[:theme].id}', expanded)" ] - @respondents_with_highlights.each do |respondent| - respondent_data = theme_data[:highlights_by_respondent].find { |h| h[:respondent_id] == respondent.id } td.align-top.p-4 - if respondent_data&.dig(:highlights)&.present? - respondent_data[:highlights].each do |highlight, index| .mb-3 class="#{'border-bottom' unless index == respondent_data[:highlights].length - 1}" expandable-text( :text="#{highlight.verbose_to_text.to_json}" :force-expanded="getRowExpansionState('#{theme_data[:theme].id}')" @expansion-changed="expanded => handleCellExpansion('#{theme_data[:theme].id}')" ) - else .text-muted.fst-italic | No Data Found .reports-table v-show="isUnthemedView" ref="unthemedTable" table.table-striped.table.table-bordered.table-responsive style="transform: translate3d(0, 0, 0);" thead.fs-12 tr th button.btn.btn-sm.btn-outline-primary.py-1.px-2.fs-12[ @click="toggleAllInTable" style="width: fit-content; min-height: 22px; line-height: 1.2" ] vue-feather.mt-1[ :type="tableExpanded ? 'minimize-2' : 'maximize-2'" size="16" ] - @respondents_with_highlights_unthemed.each do |respondent| th.p-4 style="min-width: 300px;" = link_to respondent.name, [respondent.project, respondent.respondent_category, respondent], target: "_blank" - unless respondent.tags.empty? .d-flex.flex-wrap.gap-1.mt-1 - respondent.tags.includes(:tag_category).each do |tag| span.badge.bg-secondary.me-2.text-black.fs-10 = tag.tag_category.name |: = tag.name tbody.fs-12 - @unthemed_highlight_table_data.each do |section_data| tr td.p-4.align-top.semi-bold expandable-row[ :section-name="'#{section_data[:section].name}'" :section-id="'#{section_data[:section].id}'" :parent-expanded="tableExpanded" @toggle-row="expanded => toggleRowExpansion('#{section_data[:section].id}', expanded)" ] - @respondents_with_highlights_unthemed.each do |respondent| - respondent_data = section_data[:highlights_by_respondent].find { |h| h[:respondent_id] == respondent.id } td.align-top.p-4 - if respondent_data&.dig(:highlights)&.present? - respondent_data[:highlights].each do |highlight, index| .mb-3 class="#{'border-bottom' unless index == respondent_data[:highlights].length - 1}" expandable-text( :text="#{highlight.verbose_to_text.to_json}" :force-expanded="getRowExpansionState('#{section_data[:section].id}')" @expansion-changed="expanded => handleCellExpansion('#{section_data[:section].id}')" ) - else .text-muted.fst-italic | No Data Found .reports-table v-show="isRawView" ref="rawTable" table.table-striped.table.table-bordered.table-responsive style="transform: translate3d(0, 0, 0);" thead.fs-12 tr th button.btn.btn-sm.btn-outline-primary.py-1.px-2.fs-12[ @click="toggleAllInTable" style="width: fit-content; min-height: 22px; line-height: 1.2" ] vue-feather.mt-1[ :type="tableExpanded ? 'minimize-2' : 'maximize-2'" size="16" ] - @respondents_with_highlights_raw.each do |respondent| th.p-4 style="min-width: 300px;" = link_to respondent.name, [respondent.project, respondent.respondent_category, respondent], target: "_blank" - unless respondent.tags.empty? .d-flex.flex-wrap.gap-1.mt-1 - respondent.tags.includes(:tag_category).each do |tag| span.badge.bg-secondary.me-2.text-black.fs-10 = tag.tag_category.name |: = tag.name tbody.fs-12 - @raw_highlight_data.each do |theme_data| tr td.p-4.align-top.semi-bold expandable-row[ :section-name="'#{theme_data[:theme].theme}'" :section-id="'#{theme_data[:theme].id}'" :parent-expanded="tableExpanded" @toggle-row="expanded => toggleRowExpansion('#{theme_data[:theme].id}', expanded)" ] - @respondents_with_highlights_raw.each do |respondent| - respondent_data = theme_data[:highlights_by_respondent].find { |h| h[:respondent_id] == respondent.id } td.align-top.p-4 - if respondent_data&.dig(:highlights)&.present? - respondent_data[:highlights].each_with_index do |highlight, index| .mb-3 class="#{'border-bottom' unless index == respondent_data[:highlights].length - 1}" expandable-text( :text="#{highlight.verbose_to_text.to_json}" :force-expanded="getRowExpansionState('#{theme_data[:theme].id}')" @expansion-changed="expanded => handleCellExpansion('#{theme_data[:theme].id}')" ) - else .text-muted.fst-italic | No Data Found - else .text-center.my-5 .custom-card .card.border-primary.shadow-sm.mx-auto style="max-width: 500px" .card-body.p-5 i.bi.bi-inbox.text-primary.fs-1.mb-3 h5.card-title.text-primary.mb-3 No Data Available p.card-text.text-muted.mb-0 There are currently no items to display in this table.