From ce6ddada780d01f02fd2979ff8f11a5ed8db1442 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Tue, 12 Mar 2024 15:01:07 +0200
Subject: [PATCH] web/satellite: add search and sorting to Applications page

Added the same search/sort component from Object browser card view.
Implemented search and sort functionality on Apps page.

Issue:
https://github.com/storj/storj/issues/6808

Change-Id: If422ce16978e97af0fd53ae489c415939b1f5d4c
---
 .../src/components/ApplicationItem.vue        |   8 +-
 web/satellite/src/types/applications.ts       |  74 ++++++------
 web/satellite/src/views/Applications.vue      | 111 ++++++++++++++++--
 3 files changed, 144 insertions(+), 49 deletions(-)

diff --git a/web/satellite/src/components/ApplicationItem.vue b/web/satellite/src/components/ApplicationItem.vue
index 2893b668a6dc..7be2cf61a1ca 100644
--- a/web/satellite/src/components/ApplicationItem.vue
+++ b/web/satellite/src/components/ApplicationItem.vue
@@ -5,7 +5,7 @@
     <v-col cols="12" md="6" lg="6" xl="3">
         <v-card class="px-2 py-4 h-100 align-content-space-between">
             <v-card-item class="pb-0">
-                <img :src="app.src" :alt="app.title" width="42" class="rounded">
+                <img :src="app.src" :alt="app.name" width="42" class="rounded">
             </v-card-item>
 
             <v-card-item>
@@ -13,7 +13,7 @@
                     {{ app.category }}
                 </v-chip>
                 <h3 class="mb-1">
-                    {{ app.title }}
+                    {{ app.name }}
                 </h3>
                 <p class="mt-1 text-high-emphasis">
                     {{ app.description }}
@@ -36,7 +36,7 @@
             </v-card-item>
         </v-card>
     </v-col>
-    <CreateAccessDialog ref="accessDialog" v-model="dialog" :default-name="app.title" />
+    <CreateAccessDialog ref="accessDialog" v-model="dialog" :default-name="app.name" />
 </template>
 
 <script setup lang="ts">
@@ -50,7 +50,7 @@ import { useTrialCheck } from '@/composables/useTrialCheck';
 
 import CreateAccessDialog from '@/components/dialogs/CreateAccessDialog.vue';
 
-const props = defineProps<{
+defineProps<{
     app: Application
 }>();
 
diff --git a/web/satellite/src/types/applications.ts b/web/satellite/src/types/applications.ts
index da4f3b315e43..26ffda5337d0 100644
--- a/web/satellite/src/types/applications.ts
+++ b/web/satellite/src/types/applications.ts
@@ -48,7 +48,7 @@ export enum AppCategory {
 }
 
 export type Application = {
-    title: string
+    name: string
     description: string
     category: AppCategory
     src: string
@@ -57,252 +57,252 @@ export type Application = {
 
 export const applications: Application[] = [
     {
-        title: 'TrueNAS - iX Systems',
+        name: 'TrueNAS - iX Systems',
         description: 'TrueNAS is a network attached storage (NAS) solution that allows for an off-site backup to your Storj account.',
         category: AppCategory.BackupRecovery,
         src: TrueNASIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/ix-systems-truenas',
     },
     {
-        title: 'Hammerspace',
+        name: 'Hammerspace',
         description: 'Create a global data environment between Storj and all connected data as a single, easily accessible dataset.',
         category: AppCategory.FileManagement,
         src: HammerspaceIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/hammerspace',
     },
     {
-        title: 'OwnCloud',
+        name: 'OwnCloud',
         description: 'ownCloud Infinite Scale is a real-time content collaboration allowing you to use Storj as the primary storage location.',
         category: AppCategory.FileManagement,
         src: OwnCloudIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/ocis',
     },
     {
-        title: 'Livepeer',
+        name: 'Livepeer',
         description: 'Add live and on-demand video experiences by transcoding videos with Livepeer, and storing your media with Storj.',
         category: AppCategory.ContentDelivery,
         src: LivepeerIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/livepeer',
     },
     {
-        title: 'Acronis',
+        name: 'Acronis',
         description: 'Reliable backup and disaster recovery solutions for data archiving and organization, seamlessly integrating with Storj.',
         category: AppCategory.BackupRecovery,
         src: AcronisIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/acronis',
     },
     {
-        title: 'Iconik',
+        name: 'Iconik',
         description: 'A cloud-native solution for media collaboration that integrates with Storj, to allow secure storage of your media assets.',
         category: AppCategory.FileManagement,
         src: IconikIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/iconik',
     },
     {
-        title: 'Photos+',
+        name: 'Photos+',
         description: 'A beautfully designed app for iOS, Android, and Mac to store and manage your photos and videos in your Storj account.',
         category: AppCategory.FileManagement,
         src: PhotosPlusIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/photos-plus',
     },
     {
-        title: 'Veeam',
+        name: 'Veeam',
         description: 'All-in-one backup, recovery, and data security solution integrating Storj for secure, scalable backup and archiving.',
         category: AppCategory.BackupRecovery,
         src: VeeamIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/veeam',
     },
     {
-        title: 'Splunk',
+        name: 'Splunk',
         description: 'Collect, index, and search all types of data generated by your business, and archive it to Storj.',
         category: AppCategory.BackupRecovery,
         src: SplunkIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/splunk',
     },
     {
-        title: 'Arq Backup',
+        name: 'Arq Backup',
         description: 'Arq backs up your filesystem with perfect, point-in-time back ups of your files to Storj.',
         category: AppCategory.BackupRecovery,
         src: ArqIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/arq',
     },
     {
-        title: 'Rclone',
+        name: 'Rclone',
         description: 'Open source command-line interface for sync, backup, restore, mirror, mount, and analyzing your Storj cloud storage.',
         category: AppCategory.BackupRecovery,
         src: RcloneIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/rclone',
     },
     {
-        title: 'Zerto',
+        name: 'Zerto',
         description: 'Simple, scalable disaster recovery and data protection, integrating with Storj for cloud data management.',
         category: AppCategory.BackupRecovery,
         src: ZertoIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/zerto',
     },
     {
-        title: 'Unitrends',
+        name: 'Unitrends',
         description: 'Backup and recovery platform allowing you to easily manage backups between Storj, SaaS, data centers and endpoints.',
         category: AppCategory.BackupRecovery,
         src: UnitrendsIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/unitrends',
     },
     {
-        title: 'S3FS',
+        name: 'S3FS',
         description: 's3fs allows Linux, macOS, and FreeBSD to mount your Storj buckets and work like on a local file system.',
         category: AppCategory.FileManagement,
         src: S3FSIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/s3fs',
     },
     {
-        title: 'Rucio',
+        name: 'Rucio',
         description: 'Organize, manage, and access your Storj data at scale with Rucio, an open-source framework for scientific collaboration.',
         category: AppCategory.Scientific,
         src: RucioIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/rucio',
     },
     {
-        title: 'MSP360',
+        name: 'MSP360',
         description: 'Cross-platform storage, backup, and disaster recovery solution integrating Storj cloud storage for managed service providers.',
         category: AppCategory.BackupRecovery,
         src: MSP360Icon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/msp360',
     },
     {
-        title: 'LucidLink',
+        name: 'LucidLink',
         description: 'LucidLink integrates with Storj for fast and secure file-streaming, enabling real-time collaboration on creative projects.',
         category: AppCategory.FileManagement,
         src: LucidLinkIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/lucidlink',
     },
     {
-        title: 'Elements',
+        name: 'Elements',
         description: 'Store, manage and collaborate on your Storj media content using a secure and scalable asset management platform.',
         category: AppCategory.FileManagement,
         src: ElementsIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/elements',
     },
     {
-        title: 'Docker',
+        name: 'Docker',
         description: 'Storj supports custom Content-Type for any key, so it can be used as a container registry to distribute container images.',
         category: AppCategory.ContentDelivery,
         src: DockerIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/docker',
     },
     {
-        title: 'Pixelfed',
+        name: 'Pixelfed',
         description: 'Learn how to set up Pixelfed decentralized social media platform to Storj.',
         category: AppCategory.ContentDelivery,
         src: PixelfedIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/pixelfed',
     },
     {
-        title: 'Mastodon',
+        name: 'Mastodon',
         description: 'Learn how to set up Mastodon decentralized social media platform to Storj.',
         category: AppCategory.ContentDelivery,
         src: MastodonIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/mastodon',
     },
     {
-        title: 'Dataverse',
+        name: 'Dataverse',
         description: 'Dataverse integrates with Storj to provide researchers secure archiving, controlling, and sharing large research data sets.',
         category: AppCategory.Scientific,
         src: DataverseIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/dataverse',
     },
     {
-        title: 'CyberDuck',
+        name: 'CyberDuck',
         description: 'Open-source cloud storage browser app for macOS, Windows, and Linux, that supports Storj.',
         category: AppCategory.FileManagement,
         src: CyberDuckIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/cyberduck',
     },
     {
-        title: 'Atempo (Miria)',
+        name: 'Atempo (Miria)',
         description: 'Atempo provides high-performance backup, replication, synchronization, and archiving of large data sets to Storj.',
         category: AppCategory.BackupRecovery,
         src: AtempoIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/atempo-miria',
     },
     {
-        title: 'Mountain Duck',
+        name: 'Mountain Duck',
         description: 'Mount Storj as a virtual drive on your computer. Open your Storj files with any application, and work like on a local disk.',
         category: AppCategory.FileManagement,
         src: MountainDuckIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/mountainduck',
     },
     {
-        title: 'Bunny CDN',
+        name: 'Bunny CDN',
         description: 'Set up a static website hosting with Storj, using Bunny CDN as a content delivery network providing a caching layer.',
         category: AppCategory.ContentDelivery,
         src: BunnyCDNIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/bunny',
     },
     {
-        title: 'Fastly',
+        name: 'Fastly',
         description: 'Distribute your content among the Fastly edge cloud service, using your Storj buckets as a source of content.',
         category: AppCategory.ContentDelivery,
         src: FastlyIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/fastly',
     },
     {
-        title: 'Comet',
+        name: 'Comet',
         description: 'Flexible backup platform, integrating with Storj, as a backup and storage destination, to protect and restore data.',
         category: AppCategory.BackupRecovery,
         src: CometIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/comet-backup',
     },
     {
-        title: 'Globus',
+        name: 'Globus',
         description: 'Open-source platform for collaboration and management, for transferring, sharing, and discovering your data on Storj.',
         category: AppCategory.Scientific,
         src: GlobusIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/globus',
     },
     {
-        title: 'HuggingFace',
+        name: 'HuggingFace',
         description: 'Train and deploy open-source AI models, while saving and loading datasets to and from Storj.',
         category: AppCategory.AI,
         src: HuggingFaceIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/hugging-face',
     },
     {
-        title: 'FileZilla',
+        name: 'FileZilla',
         description: 'Learn how to set up FileZilla to transfer your files over Storj, or integrate with FileZilla Pro.',
         category: AppCategory.FileManagement,
         src: FileZillaIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/filezilla',
     },
     {
-        title: 'Kerberos.io',
+        name: 'Kerberos.io',
         description: 'Open-source platform for video analytics and management. Integrate with Storj to store your Kerberos Vault video files.',
         category: AppCategory.FileManagement,
         src: KerberosIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/kerberos-vault',
     },
     {
-        title: 'UpdraftPlus',
+        name: 'UpdraftPlus',
         description: 'Automatically backup your Wordpress site, and use Storj as a remote storage destination.',
         category: AppCategory.BackupRecovery,
         src: UpdraftPlusIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/wordpress-site-with-updraftplus',
     },
     {
-        title: 'Duplicati',
+        name: 'Duplicati',
         description: 'Free and open source backup client, to store encrypted, incremental, compressed backups to Storj.',
         category: AppCategory.BackupRecovery,
         src: DuplicatiIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/duplicati',
     },
     {
-        title: 'Restic',
+        name: 'Restic',
         description: 'Restic is an open source command-line backup tool, optimized for securely backing up data to Storj.',
         category: AppCategory.BackupRecovery,
         src: ResticIcon,
         docs: 'https://docs.storj.io/dcs/third-party-tools/restic',
     },
     {
-        title: 'Starfish',
+        name: 'Starfish',
         description: 'Unstructured data management and metadata for files and objects. Integrate with Storj for large-scale file management.',
         category: AppCategory.FileManagement,
         src: StarfishIcon,
diff --git a/web/satellite/src/views/Applications.vue b/web/satellite/src/views/Applications.vue
index 6b586fbdfeef..c9e4ab2d7e9d 100644
--- a/web/satellite/src/views/Applications.vue
+++ b/web/satellite/src/views/Applications.vue
@@ -33,19 +33,105 @@
             </v-col>
         </v-row>
 
-        <v-row>
-            <ApplicationItem
-                v-for="app in filteredApps"
-                :key="app.title"
-                :app="app"
-            />
-        </v-row>
+        <v-card class="pa-2 my-5">
+            <v-row align="center">
+                <v-col>
+                    <v-text-field
+                        v-model="search"
+                        label="Search"
+                        :prepend-inner-icon="mdiMagnify"
+                        single-line
+                        variant="solo-filled"
+                        flat
+                        hide-details
+                        clearable
+                        density="comfortable"
+                        rounded="lg"
+                    />
+                </v-col>
+                <v-col cols="auto">
+                    <v-menu>
+                        <template #activator="{ props }">
+                            <v-btn
+                                variant="text"
+                                color="default"
+                                :prepend-icon="mdiSort"
+                                :append-icon="mdiChevronDown"
+                                v-bind="props"
+                                class="mr-2 ml-n2"
+                                title="Sort by"
+                            >
+                                <span class="text-body-2 hidden-xs">Sort by</span> <span class="ml-1 text-capitalize">{{ sortKey }}</span>
+                            </v-btn>
+                        </template>
+                        <v-list>
+                            <v-list-item
+                                v-for="(key, index) in sortKeys"
+                                :key="index"
+                                :title="key"
+                                @click="() => sortKey = key.toLowerCase()"
+                            />
+                        </v-list>
+                    </v-menu>
+                    <v-btn-toggle
+                        v-model="sortOrder"
+                        density="comfortable"
+                        variant="outlined"
+                        color="default"
+                        rounded="xl"
+                        class="pa-1"
+                        mandatory
+                    >
+                        <v-btn size="small" value="asc" title="Ascending" variant="text" rounded="xl">
+                            <v-icon :icon="mdiSortAscending" />
+                        </v-btn>
+                        <v-btn size="small" value="desc" title="Descending" variant="text" rounded="xl">
+                            <v-icon :icon="mdiSortDescending" />
+                        </v-btn>
+                    </v-btn-toggle>
+                </v-col>
+            </v-row>
+        </v-card>
+
+        <v-data-iterator
+            :items="filteredApps"
+            :items-per-page="-1"
+            :search="search"
+            :sort-by="sortBy"
+        >
+            <template #no-data>
+                <div class="d-flex justify-center">
+                    <p class="text-body-2">No data found</p>
+                </div>
+            </template>
+            <template #default="{ items }">
+                <v-row>
+                    <ApplicationItem v-for="app in items" :key="app.raw.name" :app="app.raw" />
+                </v-row>
+            </template>
+        </v-data-iterator>
     </v-container>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { VContainer, VRow, VCol, VChipGroup, VChip } from 'vuetify/components';
+import {
+    VContainer,
+    VRow,
+    VCol,
+    VChipGroup,
+    VChip,
+    VCard,
+    VList,
+    VIcon,
+    VBtn,
+    VBtnToggle,
+    VMenu,
+    VTextField,
+    VListItem,
+    VDataIterator,
+} from 'vuetify/components';
+import { mdiChevronDown, mdiMagnify, mdiSort, mdiSortAscending, mdiSortDescending } from '@mdi/js';
 
 import { AppCategory, Application, applications } from '@/types/applications';
 import { useTrialCheck } from '@/composables/useTrialCheck';
@@ -58,6 +144,15 @@ import TrialExpirationBanner from '@/components/TrialExpirationBanner.vue';
 const { isTrialExpirationBanner, isExpired } = useTrialCheck();
 
 const selectedChips = ref<AppCategory[]>([AppCategory.All]);
+const search = ref<string>('');
+const sortKey = ref<string>('name');
+const sortOrder = ref<string>('asc');
+const sortKeys = ['Name', 'Category'];
+
+/**
+ * The sorting criteria to be used for the file list.
+ */
+const sortBy = computed(() => [{ key: sortKey.value, order: sortOrder.value }]);
 
 /**
  * Returns all application categories.