feat(wallet): search for address on address book page (#450)

Updated Address Book page: ![image](https://github.com/user-attachments/assets/7793e046-8cd7-4351-adea-2329e925f63c) Updated Recent requests seciton and Dashboard page to match Address book page update: ![image](https://github.com/user-attachments/assets/02be56be-f7df-4cd3-8507-7e334ccdff6d) Mobile: ![image](https://github.com/user-attachments/assets/e4d7af9e-bbd5-4954-9ee9-28fdc80c83cf) --------- Co-authored-by: Kepler Vital <[email protected]>
dfinity · Dec 3, 2024 · 74fa43d · 74fa43d
1 parent 220a53f
commit 74fa43d
Show file tree

Hide file tree

Showing 10 changed files with 330 additions and 225 deletions.
diff --git a/apps/wallet/src/components/requests/RecentRequests.vue b/apps/wallet/src/components/requests/RecentRequests.vue
@@ -8,9 +8,9 @@
   >
     <template #default="{ data, loading }">
       <VCard :loading="data && data.requests.length > 0 ? false : loading" rounded v-bind="$attrs">
-        <VCardText class="py-0">
-          <div class="d-flex pt-4 ga-4 flex-wrap">
-            <div class="text-body-1 font-weight-bold flex-grow-1">
+        <VCardTitle>
+          <div class="d-flex pt-1 ga-4 flex-wrap">
+            <div class="flex-grow-1">
               {{ title && title.length ? title : $t('terms.requests') }}
             </div>
             <div class="d-flex flex-grow-1 justify-end flex-column flex-md-row ga-2">
@@ -27,30 +27,29 @@
               </slot>
             </div>
           </div>
-          <VList bg-color="transparent">
-            <VDivider
-              v-if="data && data.requests.length > 0"
-              class="mb-2 border-opacity-50"
-              thickness="1"
-            />
-            <RequestList
-              v-if="data"
-              :requests="data.requests"
-              :privileges="data.privileges"
-              :additionals="data.additional_info"
-              :hide-not-found="props.hideNotFound"
-              hide-headers
-              :mode="app.isMobile ? 'list' : 'grid'"
-              :show-items-title="props.showItemsTitle"
-              @approved="
-                disablePolling = false;
-                forceReload = true;
-              "
-              @opened="disablePolling = true"
-              @closed="disablePolling = false"
-            />
-          </VList>
-        </VCardText>
+        </VCardTitle>
+        <template v-if="data && data.requests.length">
+          <VDivider class="mb-2" />
+          <VCardText class="py-0 px-0">
+            <VList bg-color="transparent">
+              <RequestList
+                :requests="data.requests"
+                :privileges="data.privileges"
+                :additionals="data.additional_info"
+                :hide-not-found="props.hideNotFound"
+                hide-headers
+                mode="grid"
+                :show-items-title="props.showItemsTitle"
+                @approved="
+                  disablePolling = false;
+                  forceReload = true;
+                "
+                @opened="disablePolling = true"
+                @closed="disablePolling = false"
+              />
+            </VList>
+          </VCardText>
+        </template>
       </VCard>
     </template>
   </DataLoader>
@@ -62,7 +61,6 @@ import { RouteLocationRaw } from 'vue-router';
 import { VBtn, VCard, VCardText, VDivider, VList } from 'vuetify/components';
 import DataLoader from '~/components/DataLoader.vue';
 import { ListRequestsOperationType, RequestStatusCode } from '~/generated/station/station.did';
-import { useAppStore } from '~/stores/app.store';
 import { useStationStore } from '~/stores/station.store';
 import { ListRequestsArgs } from '~/types/station.types';
 import RequestList from './RequestList.vue';
@@ -83,7 +81,7 @@ const props = withDefaults(
   {
     title: undefined,
     types: undefined,
-    limit: 3,
+    limit: 4,
     sortBy: () => ({
       expirationDt: 'asc',
     }),
@@ -96,7 +94,6 @@ const props = withDefaults(
   },
 );
 
-const app = useAppStore();
 const station = useStationStore();
 const forceReload = ref(false);
 const disablePolling = ref(false);

diff --git a/apps/wallet/src/components/requests/RequestList.vue b/apps/wallet/src/components/requests/RequestList.vue
@@ -1,27 +1,25 @@
 <template>
-  <VProgressLinear v-if="props.loading" indeterminate color="primary" data-test-id="loading" />
-  <div
-    v-else
-    class="d-flex flex-wrap ga-2"
-    :class="{ 'flex-row': props.mode === 'grid', 'flex-column': props.mode === 'list' }"
-  >
-    <RequestListItem
-      v-for="request in props.requests"
-      :key="request.id"
-      :request="request"
-      :details="getDetails(request)"
-      :mode="props.mode"
-      :show-title="props.showItemsTitle"
-      @approved="emit('approved', request)"
-      @opened="emit('opened', request)"
-      @closed="emit('closed', request)"
-    />
-    <div
-      v-if="!props.requests.length && !props.hideNotFound"
-      class="d-block"
-      data-test-id="requests-empty-list"
-    >
-      {{ notFoundText }}
+  <div class="container">
+    <VProgressLinear v-if="props.loading" indeterminate color="primary" data-test-id="loading" />
+    <div v-else :class="{ grid: props.mode === 'grid', list: props.mode === 'list' }">
+      <RequestListItem
+        v-for="request in props.requests"
+        :key="request.id"
+        :request="request"
+        :details="getDetails(request)"
+        :mode="props.mode"
+        :show-title="props.showItemsTitle"
+        @approved="emit('approved', request)"
+        @opened="emit('opened', request)"
+        @closed="emit('closed', request)"
+      />
+      <div
+        v-if="!props.requests.length && !props.hideNotFound"
+        class="d-block"
+        data-test-id="requests-empty-list"
+      >
+        {{ notFoundText }}
+      </div>
     </div>
   </div>
 </template>
@@ -81,3 +79,53 @@ const getDetails = (request: Request): RequestDetails => {
   };
 };
 </script>
+
+<style scoped>
+.container {
+  container-type: inline-size;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+@container (max-width: 799px) or ((min-width: 1200px) and (max-width: 1799px)) {
+  .grid > *:nth-child(n + 4) {
+    display: none;
+  }
+}
+@container (min-width: 800px) and (max-width: 1199px) {
+  .grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .grid > *:nth-child(2n + 1) {
+    border-right: 1px solid rgba(255, 255, 255, var(--v-border-opacity));
+  }
+}
+
+@container (min-width: 1200px) and (max-width: 1799px) {
+  .grid {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  .grid > *:not(:nth-child(3)) {
+    border-right: 1px solid rgba(255, 255, 255, var(--v-border-opacity));
+  }
+}
+
+@container (min-width: 1801px) {
+  .grid {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+  .grid > *:not(:nth-child(4)) {
+    border-right: 1px solid rgba(255, 255, 255, var(--v-border-opacity));
+  }
+}
+</style>
diff --git a/apps/wallet/src/components/requests/RequestListItem.vue b/apps/wallet/src/components/requests/RequestListItem.vue
@@ -1,10 +1,9 @@
 <template>
   <VCard
-    :elevation="props.mode === 'grid' ? 0 : undefined"
     density="compact"
     :min-width="props.minWith"
+    :elevation="props.mode === 'grid' ? 0 : undefined"
     :rounded="props.mode === 'grid' ? 0 : undefined"
-    :class="{ 'br-on-background': props.mode === 'grid' }"
   >
     <VCardTitle v-if="props.showTitle" class="text-body-2 font-weight-bold">
       {{

diff --git a/apps/wallet/src/components/requests/operations/AddAddressBookEntryOperation.vue b/apps/wallet/src/components/requests/operations/AddAddressBookEntryOperation.vue
@@ -9,7 +9,9 @@
     <RequestOperationListRow v-if="formValue.address">
       <template #name>{{ $t('terms.address') }}</template>
       <template #content>
-        {{ formValue.address }}
+        <span class="text-break">
+          {{ formValue.address }}
+        </span>
       </template>
     </RequestOperationListRow>
   </div>

diff --git a/apps/wallet/src/components/requests/operations/EditAddressBookEntryOperation.vue b/apps/wallet/src/components/requests/operations/EditAddressBookEntryOperation.vue
@@ -15,7 +15,9 @@
     <RequestOperationListRow v-if="formValue.address">
       <template #name>{{ $t('terms.address') }}</template>
       <template #content>
-        {{ formValue.address }}
+        <span class="text-break">
+          {{ formValue.address }}
+        </span>
       </template>
     </RequestOperationListRow>
   </div>

diff --git a/apps/wallet/src/locales/en.locale.ts b/apps/wallet/src/locales/en.locale.ts
@@ -52,6 +52,7 @@ export default {
     search_users: 'Search users',
     search_user_groups: 'Search user groups',
     search_accounts: 'Search accounts',
+    search_addresses: 'Search addresses...',
     destination_source: 'Destination / Source',
     amount_token: 'Amount, {token}',
     no_transfers: 'No transfer found.',
@@ -889,6 +890,7 @@ export default {
       btn_new_entry: 'New entry',
       no_results_found: 'No address book entry found.',
       error_fetching_address_book: 'Error fetching address book, please try again.',
+      table_title: 'Addresses',
     },
     user_settings: {
       title: 'Account Info & Settings',

diff --git a/apps/wallet/src/locales/fr.locale.ts b/apps/wallet/src/locales/fr.locale.ts
@@ -53,6 +53,7 @@ export default {
     search_users: 'Rechercher des usagers',
     search_user_groups: "Rechercher des groupes d'usagers",
     search_accounts: 'Rechercher des comptes',
+    search_addresses: 'Rechercher des adresses...',
     destination_source: 'Destination / Source',
     amount_token: 'Montant, {token}',
     no_transfers: 'Aucun transfert trouvé.',
@@ -901,6 +902,7 @@ export default {
       no_results_found: "Aucune adresse trouvée dans le carnet d'adresses.",
       error_fetching_address_book:
         "Erreur de chargement du carnet d'adresses, veuillez essayer de nouveau.",
+      table_title: 'Adresses',
     },
     user_settings: {
       title: 'Détails du Compte et Paramètres',

diff --git a/apps/wallet/src/locales/pt.locale.ts b/apps/wallet/src/locales/pt.locale.ts
@@ -52,6 +52,7 @@ export default {
     search_users: 'Procurar usuários',
     search_user_groups: 'Procurar grupos de usuários',
     search_accounts: 'Procurar contas',
+    search_addresses: 'Procurar endereços...',
     destination_source: 'Destino / Origem',
     amount_token: 'Quantidade, {token}',
     no_transfers: 'Nenhuma transferência disponível.',
@@ -894,6 +895,7 @@ export default {
       no_results_found: 'Nenhum resultado encontrado.',
       error_fetching_address_book:
         'Erro ao carregar o livro de endereços, por favor, tente novamente.',
+      table_title: 'Endereços',
     },
     user_settings: {
       title: 'Informaçōes do usuário & Configuraçōes',