feat: implement file sorting

Signed-off-by: Victor Bianchi <[email protected]>

lib/Controller/FileController.php

@@ -197,6 +197,8 @@ public function validate(?string $type = null, $identifier = null): DataResponse
  * @param int|null $length Total of elements to return
  * @param int|null $start Start date of signature request (UNIX timestamp)
  * @param int|null $end End date of signature request (UNIX timestamp)
+ * @param string|null $sortBy Name of the column to sort by
+ * @param string|null $sortDirection Ascending or descending order
  * @return DataResponse<Http::STATUS_OK, array{pagination: LibresignPagination, data: ?LibresignFile[]}, array{}>
  *
  * 200: OK
@@ -212,6 +214,8 @@ public function list(
  ?array $status = null,
  ?int $start = null,
  ?int $end = null,
+ ?string $sortBy = null,
+ ?string $sortDirection = null,
  ): DataResponse {
  $filter = array_filter([
  'signer_uuid' => $signer_uuid,
@@ -220,9 +224,13 @@ public function list(
  'start' => $start,
  'end' => $end,
  ], static function ($var) { return $var !== null; });
+ $sort = [
+ 'sortBy' => $sortBy,
+ 'sortDirection' => $sortDirection,
+ ];
  $return = $this->fileService
  ->setMe($this->userSession->getUser())
- ->listAssociatedFilesOfSignFlow($page, $length, $filter);
+ ->listAssociatedFilesOfSignFlow($page, $length, $filter, $sort);
  return new DataResponse($return, Http::STATUS_OK);
  }
 

lib/Db/SignRequestMapper.php

@@ -329,11 +329,12 @@ public function getFilesAssociatedFilesWithMeFormatted(
  array $filter,
  ?int $page = null,
  ?int $length = null,
+ ?array $sort = [],
  ): array {
  $filter['email'] = $user->getEMailAddress();
  $filter['length'] = $length;
  $filter['page'] = $page;
- $pagination = $this->getFilesAssociatedFilesWithMeStmt($user->getUID(), $filter);
+ $pagination = $this->getFilesAssociatedFilesWithMeStmt($user->getUID(), $filter, $sort);
  $pagination->setMaxPerPage($length);
  $pagination->setCurrentPage($page);
  $currentPageResults = $pagination->getCurrentPageResults();
@@ -493,7 +494,11 @@ private function getFilesAssociatedFilesWithMeQueryBuilder(string $userId, ?arra
  return $qb;
  }
 
- private function getFilesAssociatedFilesWithMeStmt(string $userId, ?array $filter = []): Pagination {
+ private function getFilesAssociatedFilesWithMeStmt(
+ string $userId,
+ ?array $filter = [],
+ ?array $sort = [],
+ ): Pagination {
  $qb = $this->getFilesAssociatedFilesWithMeQueryBuilder($userId, $filter);
  $qb->select(
  'f.id',
@@ -504,6 +509,12 @@ private function getFilesAssociatedFilesWithMeStmt(string $userId, ?array $filte
  'f.status',
  'f.metadata',
  );
+ if (!empty($sort) && in_array($sort['sortBy'], ['name', 'status', 'created_at'])) {
+ $qb->orderBy(
+ $qb->func()->lower('f.' . $sort['sortBy']),
+ $sort['sortDirection'] == 'asc' ? 'asc' : 'desc'
+ );
+ }
  $qb->selectAlias('f.created_at', 'request_date');
 
  $countQueryBuilderModifier = function (IQueryBuilder $qb): int {

lib/Service/FileService.php

@@ -432,7 +432,12 @@ public function setFileByPath(string $path): self {
  *
  * @psalm-return array{data: array, pagination: array}
  */
- public function listAssociatedFilesOfSignFlow($page = null, $length = null, array $filter = []): array {
+ public function listAssociatedFilesOfSignFlow(
+ $page = null,
+ $length = null,
+ array $filter = [],
+ array $sort = [],
+ ): array {
  $page = $page ?? 1;
  $length = $length ?? (int)$this->appConfig->getAppValue('length_of_page', '100');
 
@@ -441,6 +446,7 @@ public function listAssociatedFilesOfSignFlow($page = null, $length = null, arra
  $filter,
  $page,
  $length,
+ $sort,
  );
 
  $signers = $this->signRequestMapper->getByMultipleFileId(array_column($return['data'], 'id'));

src/Components/File/File.vue

@@ -11,10 +11,10 @@
  @load="backgroundFailed = false">
  <FileIcon v-else v-once :size="128" />
  <div class="enDot">
- <div :class="filesStore.files[currentNodeId].statusText !== 'none' ? 'dot ' + statusToClass(filesStore.files[currentNodeId].status) : '' " />
- <span>{{ filesStore.files[currentNodeId].statusText !== 'none' ? filesStore.files[currentNodeId].statusText : '' }}</span>
+ <div :class="filesStore.files.get(currentNodeId).statusText !== 'none' ? 'dot ' + statusToClass(filesStore.files.get(currentNodeId).status) : '' " />
+ <span>{{ filesStore.files.get(currentNodeId).statusText !== 'none' ? filesStore.files.get(currentNodeId).statusText : '' }}</span>
  </div>
- <h1>{{ filesStore.files[currentNodeId].name }}</h1>
+ <h1>{{ filesStore.files.get(currentNodeId).name }}</h1>
  </div>
 </template>
 
@@ -60,7 +60,7 @@ export default {
  return null
  }
  let previewUrl = ''
- if (this.filesStore.files[this.currentNodeId]?.uuid?.length > 0) {
+ if (this.filesStore.files.get(this.currentNodeId)?.uuid?.length > 0) {
  previewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/{nodeId}', {
  nodeId: this.currentNodeId,
  })

src/store/files.js

@@ -20,7 +20,7 @@ export const useFilesStore = function(...args) {
  const store = defineStore('files', {
  state: () => {
  return {
- files: {},
+ files: new Map(),
  selectedNodeId: 0,
  identifyingSigner: false,
  loading: false,
@@ -30,7 +30,7 @@ export const useFilesStore = function(...args) {
 
  actions: {
  addFile(file) {
- set(this.files, file.nodeId, file)
+ this.files.set(file.nodeId, file)
  this.hydrateFile(file.nodeId)
  },
  selectFile(nodeId) {
@@ -44,13 +44,13 @@ export const useFilesStore = function(...args) {
  sidebarStore.activeRequestSignatureTab()
  },
  getFile() {
- return this.files[this.selectedNodeId] ?? {}
+ return this.files.get(this.selectedNodeId) ?? {}
  },
  async flushSelectedFile() {
  const files = await this.getAllFiles({
  nodeId: this.selectedNodeId,
  })
- this.addFile(files[this.selectedNodeId])
+ this.addFile(files.get(this.selectedNodeId))
  },
  enableIdentifySigner() {
  this.identifyingSigner = true
@@ -65,7 +65,7 @@ export const useFilesStore = function(...args) {
  if (!Object.hasOwn(this.getFile(), 'signers')) {
  return false
  }
- return this.files[this.selectedNodeId].signers.length > 0
+ return this.files.get(this.selectedNodeId).signers.length > 0
  },
  isPartialSigned() {
  if (this.selectedNodeId === 0) {
@@ -74,7 +74,7 @@ export const useFilesStore = function(...args) {
  if (!Object.hasOwn(this.getFile(), 'signers')) {
  return false
  }
- return this.files[this.selectedNodeId].signers
+ return this.files.get(this.selectedNodeId).signers
  .filter(signer => signer.signed?.length > 0).length > 0
  },
  isFullSigned() {
@@ -84,15 +84,15 @@ export const useFilesStore = function(...args) {
  if (!Object.hasOwn(this.getFile(), 'signers')) {
  return false
  }
- return this.files[this.selectedNodeId].signers.length > 0
- && this.files[this.selectedNodeId].signers
- .filter(signer => signer.signed?.length > 0).length === this.files[this.selectedNodeId].signers.length
+ return this.files.get(this.selectedNodeId).signers.length > 0
+ && this.files.get(this.selectedNodeId).signers
+ .filter(signer => signer.signed?.length > 0).length === this.files.get(this.selectedNodeId).signers.length
  },
  getSubtitle() {
  if (this.selectedNodeId === 0) {
  return ''
  }
- const file = this.files[this.selectedNodeId]
+ const file = this.files.get(this.selectedNodeId)
  if ((file?.requested_by?.userId ?? '').length === 0 || file?.request_date.length === 0) {
  return ''
  }
@@ -102,18 +102,18 @@ export const useFilesStore = function(...args) {
  })
  },
  async hydrateFile(nodeId) {
- if (Object.hasOwn(this.files[nodeId], 'uuid')) {
+ if (Object.hasOwn(this.files.get(nodeId), 'uuid')) {
  return
  }
  await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/validate/file_id/{fileId}', {
  fileId: nodeId,
  }))
  .then((response) => {
- set(this.files, nodeId, response.data.ocs.data)
- this.addUniqueIdentifierToAllSigners(this.files[nodeId].signers)
+ this.files.set(nodeId, response.data.ocs.data)
+ this.addUniqueIdentifierToAllSigners(this.files.get(nodeId).signers)
  })
  .catch(() => {
- set(this.files[nodeId], 'signers', [])
+ set(this.files.get(nodeId), 'signers', [])
  })
  },
  addUniqueIdentifierToAllSigners(signers) {
@@ -134,17 +134,17 @@ export const useFilesStore = function(...args) {
  signerUpdate(signer) {
  this.addIdentifierToSigner(signer)
  // Remove if already exists
- for (let i = this.files[this.selectedNodeId].signers.length - 1; i >= 0; i--) {
- if (this.files[this.selectedNodeId].signers[i].identify === signer.identify) {
- this.files[this.selectedNodeId].signers.splice(i, 1)
+ for (let i = this.files.get(this.selectedNodeId).signers.length - 1; i >= 0; i--) {
+ if (this.files.get(this.selectedNodeId).signers[i].identify === signer.identify) {
+ this.files.get(this.selectedNodeId).signers.splice(i, 1)
  break
  }
- if (this.files[this.selectedNodeId].signers[i].signRequestId === signer.identify) {
- this.files[this.selectedNodeId].signers.splice(i, 1)
+ if (this.files.get(this.selectedNodeId).signers[i].signRequestId === signer.identify) {
+ this.files.get(this.selectedNodeId).signers.splice(i, 1)
  break
  }
  }
- this.files[this.selectedNodeId].signers.push(signer)
+ this.files.get(this.selectedNodeId).signers.push(signer)
  },
  async deleteSigner(signer) {
  if (!isNaN(signer.signRequestId)) {
@@ -155,9 +155,9 @@ export const useFilesStore = function(...args) {
  }))
  }
  set(
- this.files[this.selectedNodeId],
+ this.files.get(this.selectedNodeId),
  'signers',
- this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
+ this.files.get(this.selectedNodeId).signers.filter((i) => i.identify !== signer.identify),
  )
  },
  async getAllFiles(filter) {
@@ -172,9 +172,14 @@ export const useFilesStore = function(...args) {
  filter.end = Math.floor(end / 1000)
  }
  const { sortingMode, sortingDirection } = useFilesSortingStore()
- // TODO: pass sortingMode and sortingDirection to API call
+ if (sortingMode) {
+ filter.sortBy = sortingMode
+ }
+ if (sortingDirection) {
+ filter.sortDirection = sortingDirection
+ }
  const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
- this.files = {}
+ this.files = new Map()
  response.data.ocs.data.data.forEach(file => {
  this.addFile(file)
  })

src/store/filesSorting.js

@@ -11,7 +11,7 @@ const DEFAULT_SORTING_DIRECTION = 'asc'
 
 export const useFilesSortingStore = defineStore('filesSorting', {
  state: () => ({
- sortingMode: 'basename',
+ sortingMode: 'name',
  sortingDirection: DEFAULT_SORTING_DIRECTION,
  }),
 

src/views/FilesList/FilesList.vue

@@ -150,7 +150,7 @@ export default {
  return this.dirContentsFiltered
  },
  isEmptyDir() {
- return this.filesStore.files.length === 0
+ return this.filesStore.files.size === 0
  },
  isRefreshing() {
  return !this.isEmptyDir

src/views/FilesList/FilesListTableHeader.vue

@@ -13,7 +13,7 @@
  <span class="files-list__row-icon" />
 
  <!-- Name -->
- <FilesListTableHeaderButton :name="t('files', 'Name')" mode="basename" />
+ <FilesListTableHeaderButton :name="t('files', 'Name')" mode="name" />
  </th>
 
  <!-- Actions -->
@@ -59,8 +59,8 @@ export default {
  sort: true,
  },
  {
- title: t('libresign', 'Modified'),
- id: 'modified',
+ title: t('libresign', 'Created at'),
+ id: 'created_at',
  sort: true,
  },
  ],

src/views/FilesList/VirtualList.vue

@@ -14,7 +14,7 @@
  :class="userConfigStore.grid_view ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
  data-cy-files-list-tbody>
  <component :is="dataComponent"
- v-for="item in filesStore.files"
+ v-for="item in filesStore.files.values()"
  :key="item.nodeId"
  :source="item"
  :loading="loading" />