#254: display documents in grid + concept of main file

docs-web/src/dev/resources/config.properties

@@ -1,3 +1,3 @@
 api.current_version=${project.version}
 api.min_version=1.0
-db.version=20
+db.version=21

docs-web/src/main/java/com/sismics/docs/rest/resource/DocumentResource.java

@@ -326,6 +326,7 @@ public class DocumentResource extends BaseResource {
      * @apiSuccess {Object[]} documents List of documents
      * @apiSuccess {String} documents.id ID
      * @apiSuccess {String} documents.highlight Search highlight (for fulltext search)
+     * @apiSuccess {String} documents.file_id Main file ID
      * @apiSuccess {String} documents.title Title
      * @apiSuccess {String} documents.description Description
      * @apiSuccess {Number} documents.create_date Create date (timestamp)
@@ -395,6 +396,7 @@ public class DocumentResource extends BaseResource {
             documents.add(Json.createObjectBuilder()
                     .add("id", documentDto.getId())
                     .add("highlight", JsonUtil.nullable(documentDto.getHighlight()))
+                    .add("file_id", JsonUtil.nullable(documentDto.getFileId()))
                     .add("title", documentDto.getTitle())
                     .add("description", JsonUtil.nullable(documentDto.getDescription()))
                     .add("create_date", documentDto.getCreateTimestamp())

docs-web/src/main/java/com/sismics/docs/rest/resource/FileResource.java

@@ -367,6 +367,12 @@ public class FileResource extends BaseResource {
                 file.setOrder(order);
             }
         }
+
+        // Raise a document updated event
+        DocumentUpdatedAsyncEvent event = new DocumentUpdatedAsyncEvent();
+        event.setUserId(principal.getId());
+        event.setDocumentId(documentId);
+        ThreadLocalContext.get().addAsyncEvent(event);
         
         // Always return OK
         JsonObjectBuilder response = Json.createObjectBuilder()

docs-web/src/main/webapp/src/app/docs/controller/document/Document.js

@@ -12,6 +12,7 @@ angular.module('docs').controller('Document', function ($scope, $rootScope, $tim
   $scope.offset = 0;
   $scope.currentPage = 1;
   $scope.limit = _.isUndefined(localStorage.documentsPageSize) ? '10' : localStorage.documentsPageSize;
+  $scope.displayMode = _.isUndefined(localStorage.displayMode) ? 'list' : localStorage.displayMode;
   $scope.search = $state.params.search ? $state.params.search : '';
   $scope.setSearch = function (search) { $scope.search = search };
   $scope.searchOpened = false;
@@ -113,7 +114,14 @@ angular.module('docs').controller('Document', function ($scope, $rootScope, $tim
     }
     $scope.loadDocuments();
   });
-  
+
+  /**
+   * Watch for display mode change.
+   */
+  $scope.$watch('displayMode', function (next) {
+    localStorage.displayMode = next;
+  });
+
   /**
    * Display a document.
    */

docs-web/src/main/webapp/src/locale/en.json

@@ -41,6 +41,8 @@
   "document": {
     "navigation_up": "Go up one level",
     "toggle_navigation": "Toggle folder navigation",
+    "display_mode_list": "Display documents in list",
+    "display_mode_grid": "Display documents in grid",
     "search_simple": "Simple search",
     "search_fulltext": "Fulltext search",
     "search_creator": "Creator",

docs-web/src/main/webapp/src/partial/docs/document.html

@@ -169,6 +169,22 @@
         </li>
       </ol>
 
+      <!-- Display mode (list or grid) -->
+      <div class="btn-group mt-10 ml-10 pull-right">
+          <span class="btn btn-default" ng-class="{ active: displayMode == 'list' }"
+                uib-tooltip="{{ 'document.display_mode_list' | translate }}"
+                tooltip-append-to-body="true"
+                ng-click="displayMode = 'list'">
+            <span class="fas fa-list"></span>
+          </span>
+        <span class="btn btn-default" ng-class="{ active: displayMode == 'grid' }"
+              uib-tooltip="{{ 'document.display_mode_grid' | translate }}"
+              tooltip-append-to-body="true"
+              ng-click="displayMode = 'grid'">
+            <span class="fas fa-th"></span>
+          </span>
+      </div>
+
       <div class="btn-group mt-10 pull-right">
         <!-- Go up in the navigation -->
         <button class="btn btn-default" ng-click="navigateUp()"
@@ -209,7 +225,7 @@
       </table>
 
       <!-- Document list -->
-      <table class="row table table-hover table-documents">
+      <table class="row table table-hover table-documents" ng-show="displayMode == 'list'">
         <thead>
         <tr>
           <th class="col-xs-6" ng-click="sortDocuments(1)">{{ 'document.title' | translate }} <span class="fas fa-chevron-{{ sortColumn == 1 ? (asc ? 'down' : 'up') : '' }}"></span></th>
@@ -253,6 +269,39 @@
         </tbody>
       </table>
 
+      <!-- Document grid -->
+      <div class="row table-documents" ng-show="displayMode == 'grid'">
+        <div ng-if="!documents" class="col-md-12 text-center">
+          <span class="fas fa-circle-notch fa-spin"></span>
+        </div>
+
+        <div ng-if="totalDocuments == 0" class=" col-md-12 text-center">
+          <span ng-if="search.length == 0">{{ 'document.no_documents' | translate }}</span>
+          <span ng-if="search.length > 0" translate="document.search_empty" translate-values="{ search: search }"></span>
+        </div>
+
+        <div class="col-md-12 row">
+          <div ng-repeat-start="document in documents" class="col-md-4">
+            <div class="thumbnail" ng-class="{ active: $stateParams.id == document.id }">
+              <a href="#/document/view/{{ document.id }}" class="file-thumbnail">
+                <img class="img-responsive" ng-src="../api/file/{{ document.file_id }}/data?size=thumb" />
+              </a>
+
+              <div class="file-info">
+                <div></div>
+                <div class="v-align file-name text-center">
+                  {{ document.title }} ({{ document.file_count }})
+                  <span class="fas fa-share" ng-if="document.shared" uib-tooltip="{{ 'document.shared' | translate }}"></span>
+                  <span class="fas fa-random" ng-if="document.active_route" uib-tooltip="{{ document.current_step_name }}"></span>
+                </div>
+                <div></div>
+              </div>
+            </div>
+          </div>
+          <div class="clearfix" ng-repeat-end ng-if="($index + 1) % 3 == 0"></div>
+        </div>
+      </div>
+
       <div class="text-center pagination-box">
         <ul uib-pagination
             ng-if="paginationShown"

docs-web/src/main/webapp/src/style/main.less

@@ -187,6 +187,10 @@ ul.tag-tree {
 
 // File thumbnails
 .thumbnail {
+  &.active {
+    border: 1px solid #2ab2dc;
+  }
+
   .file-processing-indicator {
     position: absolute;
     z-index: 2;

docs-web/src/prod/resources/config.properties

@@ -1,3 +1,3 @@
 api.current_version=${project.version}
 api.min_version=1.0
-db.version=20
+db.version=21

docs-web/src/stress/resources/config.properties

@@ -1,3 +1,3 @@
 api.current_version=${project.version}
 api.min_version=1.0
-db.version=20
+db.version=21

docs-web/src/test/java/com/sismics/docs/rest/TestDocumentResource.java

@@ -117,6 +117,7 @@ public class TestDocumentResource extends BaseJerseyTest {
         Assert.assertNotNull(documents.getJsonObject(0).get("update_date"));
         Assert.assertEquals(document1Id, documents.getJsonObject(0).getString("id"));
         Assert.assertEquals("eng", documents.getJsonObject(0).getString("language"));
+        Assert.assertEquals(file1Id, documents.getJsonObject(0).getString("file_id"));
         Assert.assertEquals(1, documents.getJsonObject(0).getInt("file_count"));
         Assert.assertEquals(2, tags.size());
         Assert.assertEquals(tag2Id, tags.getJsonObject(0).getString("id"));