Switch frontend of /projects to Vue

resources/js/app.js

@@ -18,6 +18,7 @@ import HeaderNav from "./components/page-header/HeaderNav.vue";
 import HeaderMenu from "./components/page-header/HeaderMenu.vue";
 import HeaderLogo from "./components/page-header/HeaderLogo.vue";
 import ViewDynamicAnalysis from "./components/ViewDynamicAnalysis.vue";
+import AllProjects from "./components/AllProjects.vue";
 
 const cdash_components = {
  BuildConfigure,
@@ -33,6 +34,7 @@ const cdash_components = {
  HeaderMenu,
  HeaderLogo,
  ViewDynamicAnalysis,
+ AllProjects,
 };
 
 /**

resources/js/components/AllProjects.vue

@@ -0,0 +1,162 @@
+<template>
+ <section v-if="errored">
+ <p>{{ cdash.error }}</p>
+ </section>
+ <section v-else-if="!loading">
+ <h1
+ v-if="cdash.projects.length === 0"
+ class="text-info text-center"
+ >
+ No Projects Found
+ </h1>
+
+ <!-- Main table -->
+ <table
+ v-if="cdash.projects.length > 0"
+ id="indexTable"
+ border="0"
+ cellpadding="4"
+ cellspacing="0"
+ width="100%"
+ class="tabb striped"
+ >
+ <thead>
+ <tr class="table-heading1">
+ <td
+ colspan="6"
+ align="left"
+ class="nob"
+ >
+ <h3>Dashboards</h3>
+ </td>
+ </tr>
+
+ <tr class="table-heading">
+ <th
+ id="sort_0"
+ align="center"
+ width="10%"
+ >
+ <b>Project</b>
+ </th>
+ <td
+ align="center"
+ width="65%"
+ >
+ <b>Description</b>
+ </td>
+ <th
+ id="sort_2"
+ align="center"
+ class="nob"
+ width="13%"
+ >
+ <b>Last activity</b>
+ </th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr
+ v-for="project in cdash.projects"
+ >
+ <td align="center">
+ <a :href="project.link">
+ {{ project.name }}
+ </a>
+ </td>
+ <td align="left">
+ {{ project.description }}
+ </td>
+ <td
+ align="center"
+ class="nob"
+ >
+ <span
+ class="sorttime"
+ style="display: none;"
+ >
+ {{ project.lastbuilddatefull }}
+ </span>
+ <a
+ class="builddateelapsed"
+ :href="project.link + '&date=' + project.lastbuilddate"
+ >
+ {{ project.lastbuild_elapsed }}
+ </a>
+ <img
+ :src="$baseURL + '/img/cleardot.gif'"
+ :class="'activity-level-' + project.activity"
+ >
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table
+ v-if="cdash.projects.length > 0"
+ width="100%"
+ cellspacing="0"
+ cellpadding="0"
+ >
+ <tr>
+ <td
+ height="1"
+ colspan="14"
+ align="left"
+ bgcolor="#888888"
+ />
+ </tr>
+ <tr>
+ <td
+ height="1"
+ colspan="14"
+ align="right"
+ >
+ <div
+ v-if="cdash.showoldtoggle"
+ id="showold"
+ >
+ <a
+ v-show="!cdash.allprojects"
+ :href="$baseURL + '/projects?allprojects=1'"
+ >
+ Show all {{ cdash.nprojects }} projects
+ </a>
+ <a
+ v-show="cdash.allprojects"
+ :href="$baseURL + '/projects'"
+ >
+ Hide old projects
+ </a>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </section>
+</template>
+
+<script>
+import ApiLoader from './shared/ApiLoader';
+export default {
+ name: 'AllProjects',
+
+ data () {
+ return {
+ // API results.
+ cdash: {},
+ loading: true,
+ errored: false,
+ }
+ },
+
+ mounted () {
+ let queryParams = '';
+ const allprojects = (new URL(location.href)).searchParams.get('allprojects');
+ if (allprojects) {
+ queryParams = '?allprojects=1';
+ }
+ ApiLoader.loadPageData(this, '/api/v1/viewProjects.php' + queryParams);
+ },
+}
+</script>

resources/views/project/view-all-projects.blade.php

@@ -1,78 +1,8 @@
 @extends('cdash', [
- 'angular' => true,
- 'angular_controller' => 'ViewProjectsController'
+ 'vue' => true,
+ 'title' => 'Projects',
 ])
 
 @section('main_content')
- @verbatim
- <p ng-show="cdash.upgradewarning" style="color:red">
- <b>
- The current database schema doesn't match the version of CDash
- you are running, upgrade your database structure in the
- <a href="upgrade.php">
- Administration/CDash maintenance panel of CDash
- </a>
- </b>
- </p>
-
- <h1 ng-if="cdash.projects.length == 0"
- class="text-info text-center">
- No Projects Found
- </h1>
-
- <!-- Main table -->
- <table ng-if="cdash.projects.length > 0"
- border="0" cellpadding="4" cellspacing="0" width="100%" id="indexTable" class="tabb">
- <thead>
- <tr class="table-heading1">
- <td colspan="6" align="left" class="nob"><h3>Dashboards</h3></td>
- </tr>
-
- <tr class="table-heading">
- <th align="center" id="sort_0" width="10%"><b>Project</b></th>
- <td align="center" width="65%"><b>Description</b></td>
- <th align="center" class="nob" id="sort_2" width="13%"><b>Last activity</b></th>
- </tr>
- </thead>
-
- <tbody>
- <tr ng-repeat="project in cdash.projects" ng-class-odd="'odd'" ng-class-even="'even'">
- <td align="center" >
- <a ng-href="{{project.link}}">
- {{project.name}}
- </a>
- </td>
- <td align="left">{{project.description}}</td>
- <td align="center" class="nob">
- <span class="sorttime" style="display:none">
- {{project.lastbuilddatefull}}
- </span>
- <a class="builddateelapsed" ng-alt="{{project.lastbuild}}" ng-href="{{project.link}}&date={{project.lastbuilddate}}">
- {{project.lastbuild_elapsed}}
- </a>
- <img src="img/cleardot.gif" ng-class="'activity-level-{{project.activity}}'"/>
- </td>
- </tr>
- </tbody>
- </table>
-
- <table ng-if="cdash.projects.length > 0"
- width="100%" cellspacing="0" cellpadding="0">
- <tr>
- <td height="1" colspan="14" align="left" bgcolor="#888888"></td>
- </tr>
- <tr>
- <td height="1" colspan="14" align="right">
- <div ng-if="cdash.showoldtoggle" id="showold">
- <a ng-show="!cdash.allprojects" href="projects?allprojects=1">
- Show all {{cdash.nprojects}} projects
- </a>
- <a ng-show="cdash.allprojects" href="projects">
- Hide old projects
- </a>
- </div>
- </td>
- </tr>
- </table>
- @endverbatim
+ <all-projects></all-projects>
 @endsection

tests/Feature/CDashTest.php

@@ -98,7 +98,7 @@ public function testViewProjectsRedirectNoPublicProjects(): void
  $this->get('/projects')->assertRedirect('/login');
 
  $normal_user = $this->makeNormalUser();
- $this->actingAs($normal_user)->get('/projects')->assertOk()->assertSeeText('No Projects Found');
+ $this->actingAs($normal_user)->get('/projects')->assertOk()->assertViewIs('project.view-all-projects');
  $normal_user->delete();
  }
 }