fixed image thumbnail, added file search #137

src/apis/StorageController.php

@@ -69,29 +69,35 @@ public function actionDataFolders()
  return $folders;
  }, 0, new DbDependency(['sql' => 'SELECT MAX(id) FROM admin_storage_folder WHERE is_deleted=false']));
  }
- 
+
  /**
- * Get all files from the storage container.
- *
- * @return array
+ * Internal method to get list of files, also used for search
  */
- public function actionDataFiles($folderId = 0, $page = 0)
+ private function getStorageFiles($folderId, $page, $searchQuery = null)
  {
  $perPage = 50;
- $totalCount = StorageFile::find()->where(['folder_id' => $folderId, 'is_hidden' => false, 'is_deleted' => false])->count();
+ $totalCountQuery = StorageFile::find()->where(['folder_id' => $folderId, 'is_hidden' => false, 'is_deleted' => false]);
+ if ($searchQuery) {
+ $totalCountQuery->andFilterWhere(['like', 'name_original', $searchQuery]);
+ }
+ $totalCount = $totalCountQuery->count();
 
  $tinyCrop = Yii::$app->storage->getFiltersArrayItem(TinyCrop::identifier());
  $mediumThumbnail = Yii::$app->storage->getFiltersArrayItem(MediumThumbnail::identifier());
 
- $files =  $this->getOrSetHasCache(['storageApiDataFiles', (int) $folderId, (int) $page], function() use ($folderId, $page, $perPage, $tinyCrop, $mediumThumbnail) {
+ $fn = function() use ($folderId, $page, $perPage, $tinyCrop, $mediumThumbnail, $searchQuery) {
  $files = [];
- $fileQuery = StorageFile::find()
+ $fileQueryObject = StorageFile::find()
  ->where(['folder_id' => $folderId, 'is_hidden' => false, 'is_deleted' => false])
  ->offset($page*$perPage)
  ->indexBy(['id'])
- ->limit($perPage)
- ->asArray()
- ->all();
+ ->limit($perPage);
+
+ if ($searchQuery) {
+ $fileQueryObject->andFilterWhere(['like', 'name_original', $searchQuery]);
+ }
+
+ $fileQuery = $fileQueryObject->asArray()->all();
 
  // ass the addImage() method requires the list of images and files in Yi::$app->storage we have to inject, them:
  Yii::$app->storage->setFilesArray($fileQuery);
@@ -122,10 +128,17 @@ public function actionDataFiles($folderId = 0, $page = 0)
  }
 
  return $files; 
- }, 0, new DbDependency(['sql' => 'SELECT MAX(upload_timestamp) FROM admin_storage_file WHERE is_deleted=false AND folder_id=:folderId', 'params' => [':folderId' => $folderId]]));
-
+ };
+
+ if (empty($searchQuery)) {
+ $files = $this->getOrSetHasCache(['storageApiDataFiles', (int) $folderId, (int) $page], $fn, 0, new DbDependency(['sql' => 'SELECT MAX(upload_timestamp) FROM admin_storage_file WHERE is_deleted=false AND folder_id=:folderId', 'params' => [':folderId' => $folderId]]));
+ } else {
+ $files = call_user_func($fn);
+ }
  return $this->generatePaginationArrayResponse($page, $perPage, $totalCount, $files);
  }
+
+
 
  /**
  * 
@@ -148,6 +161,21 @@ private function generatePaginationArrayResponse($currentPage, $perPage, $totalC
  ];
  }
 
+ /**
+ * Get all files from the storage container.
+ *
+ * @return array
+ */
+ public function actionDataFiles($folderId = 0, $page = 0)
+ {
+ return $this->getStorageFiles($folderId, $page);
+ }
+
+ public function actionSearch($query, $folderId = 0, $page = 0)
+ {
+ return $this->getStorageFiles($folderId, $page, $query);
+ }
+
  // ACTIONS
 
  /**
@@ -168,7 +196,7 @@ public function actionFileInfo($id)
 
  return $model->toArray([], ['user', 'file', 'images']);
  }
- 
+
  /**
  * 
  * @param integer $id
@@ -184,7 +212,7 @@ public function actionImageInfo($id)
  throw new NotFoundHttpException("Unable to find the given storage image.");
  }
 
- return $model->toArray(['id', 'file_id', 'filter_id', 'resolution_width', 'resolution_height'], ['source']);
+ return $model->toArray(['id', 'file_id', 'filter_id', 'resolution_width', 'resolution_height'], ['source', 'thumbnail']);
  }
 
  /**

src/models/StorageImage.php

@@ -5,6 +5,7 @@
 use Yii;
 use yii\db\ActiveRecord;
 use luya\helpers\FileHelper;
+use luya\admin\filters\TinyCrop;
 
 /**
  * StorageImage Model.
@@ -72,6 +73,13 @@ public function getSource()
  return Yii::$app->storage->fileAbsoluteHttpPath($fileName);
  }
 
+ public function getThumbnail()
+ {
+ // @TODO: check what happens on large file systems?
+ $tinyCrop = Yii::$app->storage->getFiltersArrayItem(TinyCrop::identifier());
+ return Yii::$app->storage->addImage($this->file_id, $tinyCrop['id']);
+ }
+
  /**
  * @return boolean
  */
@@ -91,6 +99,6 @@ public function deleteSource()
 
  public function extraFields()
  {
- return ['source'];
+ return ['source', 'thumbnail'];
  }
 }

src/resources/js/directives.js

@@ -2448,29 +2448,19 @@
  // controller logic
 
  $scope.$watch(function() { return $scope.imageId }, function(n, o) {
- if (n != 0 && n !== undefined) {
-
- ServiceImagesData.getImage(n).then(function(response) {
- $scope.imageSrc = response.source;
- });
-
- /*
- * TODO USE getImage
- var filtering = $filter('findidfilter')($scope.imagesData, n, true);
-
- var file = $filter('findidfilter')($scope.filesData, filtering.fileId, true);
+ if (n == 0 || n == undefined || n == null) {
+ return;
+ }
 
- if (file && file.thumbnail) {
- $scope.imageSrc = file.thumbnail.source;
- }
- */
- }
+ ServiceImagesData.getImage(n).then(function(response) {
+ $scope.imageSrc = response.thumbnail.source;
+ });
  });
 
  $scope.imageSrc = null;
  }],
  template: function() {
- return '<div ng-show="imageSrc!==false"><img ng-src="{{imageSrc}}" /></div>';
+ return '<div ng-show="imageSrc!==false"><img ng-src="{{imageSrc}}" alt="{{imageSrc}}" class="img-fluid" /></div>';
  }
  }
  });
@@ -2794,13 +2784,17 @@
  $scope.getFilesForPageAndFolder = function(folderId, pageId) {
  return $q(function(resolve, reject) {
  $http.get('admin/api-admin-storage/data-files?folderId='+folderId+'&page='+pageId).then(function(response) {
- $scope.filesData = response.data.data;
- $scope.filesMetaToPagination(response.data.__meta);
+ $scope.filesResponseToVars(response);
  return resolve(true);
  });
  });
  };
 
+ $scope.filesResponseToVars = function(response) {
+ $scope.filesData = response.data.data;
+ $scope.filesMetaToPagination(response.data.__meta);
+ };
+
  $scope.filesMetaToPagination = function(meta) {
  var pages = [];
  for (i = 0; i < meta.totalPages; i++) {
@@ -3012,7 +3006,17 @@
 
  // controller logic
 
- $scope.searchQuery = '';
+ $scope.searchQuery = null;
+
+ $scope.runSearch = function() {
+ if ($scope.searchQuery.length > 0) {
+ $http.get('admin/api-admin-storage/search?query=' + $scope.searchQuery).then(function(response) {
+ $scope.filesResponseToVars(response);
+ });
+ } else {
+ $scope.getFilesForCurrentPage();
+ }
+ };
 
  $scope.sortField = 'name';
 
@@ -3105,15 +3109,18 @@
  $scope.fileDetailFull = false;
 
  $scope.nameEditMode = false;
+
+ $scope.fileDetailFolder = false;
 
  $scope.openFileDetail = function(file, force) {
  if ($scope.fileDetail.id == file.id && force !== true) {
  $scope.closeFileDetail();
  } else {
 
  ServiceFilesData.getFile(file.id, force).then(function(responseFile) {
- $scope.fileDetailFull = responseFile;
- });
+ $scope.fileDetailFull = responseFile;
+ $scope.fileDetailFolder = $scope.foldersData[responseFile.folder_id];
+ });
 
  $scope.fileDetail = file;
  }

src/views/layouts/_angulardirectives.php

@@ -266,7 +266,7 @@
  <?= Admin::t('layout_filemanager_upload_files'); ?>
  </div>
 
- <input class="filemanager-search" type="text" ng-model="searchQuery" placeholder="<?= Admin::t('layout_filemanager_search_text') ?>" />
+ <input class="filemanager-search" type="text" ng-change="runSearch()" ng-model="searchQuery" placeholder="<?= Admin::t('layout_filemanager_search_text') ?>" />
 
  </div>
 
@@ -288,7 +288,7 @@
  <thead class="thead-default">
  <tr>
  <th>
- <span ng-hide="allowSelection == 'true'" class="filemanager-check-all" ng-click="toggleSelectionAll()" tooltip tooltip-position="right" tooltip-text="{{ (filesData | filemanagerfilesfilter:currentFolderId:onlyImages:searchQuery | filter:searchQuery).length }} files">
+ <span ng-hide="allowSelection == 'true'" class="filemanager-check-all" ng-click="toggleSelectionAll()" tooltip tooltip-position="right">
  <i class="material-icons">done_all</i>
  </span>
  </th>
@@ -350,7 +350,7 @@
  </thead>
  <tbody>
  <tr
- ng-repeat="file in filesData | filemanagerfilesfilter:currentFolderId:onlyImages:searchQuery | filter:searchQuery | orderBy:sortField" class="filemanager-file"
+ ng-repeat="file in filesData" class="filemanager-file"
  ng-class="{ 'clickable selectable' : allowSelection == 'false', 'filemanager-file-selected': selectedFileFromParent && selectedFileFromParent.id == file.id, 'filemanager-file-detail-open': fileDetail.id === file.id}"
  >
  <th scope="row" ng-click="toggleSelection(file)">
@@ -416,6 +416,13 @@
  <td><small><?= Admin::t('model_pk_id'); ?></small></td>
  <td>{{ fileDetail.id }}</td>
  </tr>
+ <tr>
+ <td><small>Folder</small></td>
+ <td>
+ <a ng-show="fileDetailFolder" ng-click="changeCurrentFolderId(fileDetailFolder.id)">{{ fileDetailFolder.name }}</a>
+ <a ng-show="!fileDetailFolder" ng-click="changeCurrentFolderId(0)"><?= Admin::t('layout_filemanager_root_dir'); ?></a>
+ </td>
+ </tr>
  <tr>
  <td><small><?= Admin::t('layout_filemanager_col_date'); ?></small></td>
  <td>{{fileDetail.uploadTimestamp * 1000 | date:"dd.MM.yyyy, HH:mm"}}</td>