Report UX improvements

resources/js/components/reporting/IndexScore.vue

@@ -2,7 +2,7 @@
 
  <div>
  <div v-if="score">
- <seo-pro-status-icon :status="status" class="inline-block ml-1 mr-3"></seo-pro-status-icon>
+ <seo-pro-status-icon :status="status" class="inline-block ml-1 mr-3" />
  {{ score }}%
  </div>
  <loading-graphic v-else :text="null" :inline="true" />

resources/js/components/reporting/Details.vue → resources/js/components/reporting/PageDetails.vue

@@ -22,7 +22,7 @@
  </div>
 
  <footer class="px-5 py-3 bg-gray-200 rounded-b-lg border-t flex items-center font-mono text-xs">
- {{ item.url }}
+ <a :href="item.url" target="_blank" class="font-normal text-gray-700 hover:text-gray-800 mr-4" v-text="item.url" />
  </footer>
  </div>
  </modal>

resources/js/components/reporting/Report.vue

@@ -37,7 +37,8 @@
  </div>
  </div>
 
- <div class="card p-0 mt-6">
+ <h3 class="little-heading pl-0 mt-4">{{ __('Summary') }}</h3>
+ <div class="card p-0 mt-2">
  <table class="data-table">
  <tbody>
  <tr v-for="item in report.results">
@@ -53,33 +54,42 @@
 
  </div>
 
- <div v-if="loading" class="card loading mt-6">
- <loading-graphic v-if="isGenerating" :text="__('seo-pro::messages.report_is_being_generated')" />
- <loading-graphic v-else />
+ <div v-if="loading && isGenerating" class="card loading">
+ <loading-graphic :text="__('seo-pro::messages.report_is_being_generated')" />
  </div>
 
- <div v-else class="card p-0 mt-6">
- <table class="data-table">
- <tbody>
- <tr v-for="item in report.pages">
- <td class="w-8 text-center">
- <status-icon :status="item.status"></status-icon>
- </td>
- <td class="pl-0">
- <a href="" @click.prevent="selected = item.id">{{ item.url }}</a>
- <report-details
- v-if="selected === item.id"
- :item="item"
- @closed="selected = null"
- ></report-details>
- </td>
- <td class="text-right text-xs pr-0 whitespace-no-wrap">
- <a @click.prevent="selected = item.id" class="text-gray-700 mr-4 hover:text-grey-80" v-text="__('Details')"></a>
- <a v-if="item.edit_url" target="_blank" :href="item.edit_url" class="mr-4 text-gray-700 hover:text-gray-800" v-text="__('Edit')"></a>
+ <div v-else>
+ <h3 class="little-heading pl-0 mt-4 mb-2">{{ __('seo-pro::messages.page_details') }}</h3>
+ <div v-if="loading" class="card loading">
+ <loading-graphic />
+ </div>
+ <data-list v-else ref="dataList" :columns="report.columns" :rows="report.pages">
+ <div class="card overflow-hidden p-0" slot-scope="{ filteredRows: rows }">
+ <data-list-table :rows="report.pages">
+ <template slot="cell-status" slot-scope="{ row: page }">
+ <status-icon :status="page.status" class="inline-block w-5" />
+ {{ __('seo-pro::messages.rules.'+page.status) }}
+ </template>
+ <template slot="cell-page" slot-scope="{ row: page }">
+ <a :href="page.edit_url" target="_blank" v-text="page.url" />
+ </template>
+ <template slot="cell-actionable" slot-scope="{ row: page }">
+ <page-details v-if="selected === page.id" :item="page" @closed="selected = null" />
+ <a @click.prevent="selected = page.id" class="flex" style="gap: 0.25rem;">
+ <span
+ v-for="pill in actionablePageResults(page)"
+ :key="page.id+'_actionable_pill_'+pill"
+ class="inline-block text-xs bg-gray-300 hover:bg-gray-800 text-gray-800 shrink rounded-full px-2 py-0.5 text-center justify-center"
+ style="padding-top: 2px; padding-bottom: 2px;"
+ >{{ pill }}</span>
+ </a>
+ </template>
+ <td slot="actions" slot-scope="{ row: page }" class="text-right text-xs pr-0 whitespace-no-wrap">
+ <a v-if="page.url" :href="page.url" target="_blank" class="font-normal text-gray-700 hover:text-gray-800 mr-4" v-text="__('Visit')" />
  </td>
- </tr>
- </tbody>
- </table>
+ </data-list-table>
+ </div>
+ </data-list>
  </div>
 
  </div>
@@ -89,14 +99,14 @@
 </template>
 
 <script>
-import ReportDetails from './Details.vue';
+import PageDetails from './PageDetails.vue';
 import RelativeDate from './RelativeDate.vue';
 import StatusIcon from './StatusIcon.vue';
 
 export default {
 
  components: {
- ReportDetails,
+ PageDetails,
  RelativeDate,
  StatusIcon,
  },
@@ -148,7 +158,15 @@ export default {
  this.report = response.data;
  this.loading = false;
  });
- }
+ },
+
+ actionablePageResults(page) {
+ return _.chain(page.results)
+ .reject(result => result.status === 'pass')
+ .map(result => result.actionable_pill)
+ .unique()
+ .value();
+ },
 
  }
 

resources/js/components/reporting/StatusIcon.vue

@@ -10,7 +10,9 @@
  'bg-green-600': status === 'pass',
  'bg-red-500': status === 'fail',
  'bg-yellow-dark': status === 'warning'
- }"></span>
+ }"
+ />
+
  </div>
 
 </template>

resources/lang/en/messages.php

@@ -49,18 +49,25 @@
  'never' => 'Never',
 
  'rules' => [
+ 'pass' => 'Pass',
+ 'warning' => 'Warning',
+ 'fail' => 'Fail',
  'site_name' => 'A site name must be defined.',
+ 'unique_title_actionable_pill' => 'Title',
  'unique_title_site' => 'Each page should have a unique title tag.',
  'unique_title_page' => 'The title tag should be unique.',
  'unique_title_site_failing' => ':count pages with duplicate titles.',
  'unique_title_page_failing' => ':count pages with ":title" as the title.',
+ 'unique_description_actionable_pill' => 'Description',
  'unique_description_site' => 'Each page should have a unique meta description.',
  'unique_description_page' => 'The meta description should be unique.',
  'unique_description_site_failing' => ':count pages with duplicate meta descriptions.',
  'unique_description_page_failing' => ':count pages with ":description" as the meta description.',
+ 'no_underscores_in_url_actionable_pill' => 'URL',
  'no_underscores_in_url_site' => 'Page URLs should not contain underscores.',
  'no_underscores_in_url_page' => 'The URL should not contain underscores.',
  'no_underscores_in_url_site_failing' => ':count page with underscores in URL.|:count pages with underscores in their URLs.',
+ 'three_segment_urls_actionable_pill' => 'URL',
  'three_segment_urls_site' => 'Page URLs should be a maximum of 3 segments.',
  'three_segment_urls_page' => 'The URL should be a maximum of 3 segments.',
  'three_segment_urls_site_warning' => ':count page with more than 3 segments in URL.|:count pages with more than 3 segments in their URLs.',

src/Reporting/Page.php

@@ -108,6 +108,7 @@ public function getRuleResults()
  'description' => $rule->description(),
  'status' => $rule->status(),
  'comment' => $rule->comment(),
+ 'actionable_pill' => $rule->actionablePill(),
  ];
  }
 

src/Reporting/Report.php

@@ -7,6 +7,7 @@
 use Illuminate\Contracts\Support\Jsonable;
 use Illuminate\Support\Facades\Artisan;
 use Illuminate\Support\Facades\Cache;
+use Statamic\CP\Column;
 use Statamic\Facades\Entry;
 use Statamic\Facades\File;
 use Statamic\Facades\Folder;
@@ -211,16 +212,13 @@ public function toArray()
  'results' => $this->resultsToArray(),
  ];
 
- if ($this->isGenerated() && $pages = $this->pages()) {
- $array['pages'] = $pages->map(function ($page) {
- return [
- 'status' => $page->status(),
- 'url' => $page->url(),
- 'id' => $page->id(),
- 'edit_url' => $page->editUrl(),
- 'results' => $page->getRuleResults(),
- ];
- });
+ if ($this->isGenerated() && $this->pages()) {
+ $array['pages'] = $this->pagesToArray();
+ $array['columns'] = [
+ Column::make('status')->label(__('Status')),
+ Column::make('page')->label(__('URL')),
+ Column::make('actionable')->label(__('Actionable'))->sortable(false),
+ ];
 
  Cache::put($this->cacheKey(static::TO_ARRAY_CACHE_KEY_SUFFIX), $array);
  }
@@ -253,6 +251,24 @@ protected function resultsToArray()
  return $array;
  }
 
+ protected function pagesToArray()
+ {
+ return $this
+ ->pages()
+ ->map(fn ($page) => $this->pageToArray($page));
+ }
+
+ protected function pageToArray($page)
+ {
+ return [
+ 'status' => $page->status(),
+ 'url' => $page->url(),
+ 'id' => $page->id(),
+ 'edit_url' => $page->editUrl(),
+ 'results' => $page->getRuleResults(),
+ ];
+ }
+
  public function toJson($options = 0)
  {
  return json_encode($this->toArray());

src/Reporting/Rule.php

@@ -149,6 +149,11 @@ public function status()
  return $this->isValidatingPage() ? $this->pageStatus() : $this->siteStatus();
  }
 
+ public function actionablePill()
+ {
+ //
+ }
+
  public function siteStatus()
  {
  //

src/Reporting/Rules/NoUnderscoresInUrl.php

@@ -11,6 +11,11 @@ class NoUnderscoresInUrl extends Rule
 
  protected $passes;
 
+ public function actionablePill()
+ {
+ return __('seo-pro::messages.rules.no_underscores_in_url_actionable_pill');
+ }
+
  public function siteDescription()
  {
  return __('seo-pro::messages.rules.no_underscores_in_url_site');

src/Reporting/Rules/ThreeSegmentUrls.php

@@ -10,6 +10,11 @@ class ThreeSegmentUrls extends Rule
 
  protected $slashes;
 
+ public function actionablePill()
+ {
+ return __('seo-pro::messages.rules.three_segment_urls_actionable_pill');
+ }
+
  public function siteDescription()
  {
  return __('seo-pro::messages.rules.three_segment_urls_site');

src/Reporting/Rules/UniqueMetaDescription.php

@@ -14,6 +14,11 @@ class UniqueMetaDescription extends Rule
  */
  protected $count;
 
+ public function actionablePill()
+ {
+ return __('seo-pro::messages.rules.unique_description_actionable_pill');
+ }
+
  public function siteDescription()
  {
  return __('seo-pro::messages.rules.unique_description_site');

src/Reporting/Rules/UniqueTitleTag.php

@@ -14,6 +14,11 @@ class UniqueTitleTag extends Rule
  */
  protected $count;
 
+ public function actionablePill()
+ {
+ return __('seo-pro::messages.rules.unique_title_actionable_pill');
+ }
+
  public function siteDescription()
  {
  return __('seo-pro::messages.rules.unique_title_site');