Fix(WEB-114): Implement modern empty state for Group list

src/app/groups/groups.component.html

@@ -25,8 +25,18 @@
       </button>
     </div>
   </div>
+  <div *ngIf="(dataSource?.records$ | async) === 0" class="empty-state-container">
+    <div class="m-t-40 m-b-40 text-center">
+      <fa-icon icon="users" size="6x" class="gray-text m-b-20"></fa-icon>
+      <h2 class="mat-h2">{{ 'labels.text.No Groups Found' | translate }}</h2>
+      <p class="gray-text">{{ 'labels.text.No Groups Found Description' | translate }}</p>
+      <button mat-raised-button color="primary" [routerLink]="['create']">
+        <fa-icon icon="plus" class="m-r-10"></fa-icon> {{ 'labels.buttons.Create Your First Group' | translate }}
+      </button>
+    </div>
+  </div>
 
-  <table mat-table [dataSource]="dataSource" matSort class="bordered-table">
+  <table *ngIf="(dataSource?.records$ | async) > 0" mat-table [dataSource]="dataSource" matSort class="bordered-table">
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
       <td mat-cell *matCellDef="let group">{{ group.name }}</td>

src/app/groups/groups.component.scss

@@ -7,3 +7,31 @@
  */
 
 @use '../shared/styles/list-layout' as *;
+@use '../../assets/styles/colours' as *;
+
+.empty-state-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 24px;
+  background-color: $light-grey;
+  border: 2px dashed $silver;
+  border-radius: 8px;
+  margin: 24px 0;
+
+  .gray-text {
+    color: $asbestos;
+    font-size: 1.1rem;
+    margin-bottom: 24px;
+  }
+
+  fa-icon {
+    color: $silver;
+  }
+
+  h2 {
+    margin-top: 8px;
+    font-weight: 500;
+  }
+}

src/assets/translations/cs-CS.json

@@ -350,6 +350,7 @@
       "Home": "Domov"
     },
     "buttons": {
+      "Create Your First Group": "Create Your First Group",
       "Accept Transfer": "Přijmout převod",
       "Actions": "Akce",
       "Activate": "aktivovat",
@@ -3025,6 +3026,8 @@
       "the Transaction Type": "typ transakce"
     },
     "text": {
+      "No Groups Found": "No Groups Found",
+      "No Groups Found Description": "We couldn't find any groups. Try a different search or create one now.",
       "Loading data": "Načítání dat",
       "No repayment schedule available": "Není k dispozici žádný splátkový kalendář",
       "About Us": "O Nás",

src/assets/translations/de-DE.json

@@ -350,6 +350,7 @@
       "Home": "Heim"
     },
     "buttons": {
+      "Create Your First Group": "Erstellen Sie Ihre erste Gruppe",
       "Accept Transfer": "Akzeptieren Sie die Übertragung",
       "Actions": "Aktionen",
       "Activate": "aktivieren Sie",
@@ -3026,6 +3027,8 @@
       "the Transaction Type": "der Transaktionstyp"
     },
     "text": {
+      "No Groups Found": "Keine Gruppen gefunden",
+      "No Groups Found Description": "Wir konnten keine Gruppen finden. Versuchen Sie eine andere Suche oder erstellen Sie jetzt eine.",
       "Loading data": "Daten werden geladen",
       "No repayment schedule available": "Kein Rückzahlungsplan verfügbar",
       "About Us": "Über Uns",

src/assets/translations/en-US.json

@@ -351,6 +351,7 @@
       "Home": "Home"
     },
     "buttons": {
+      "Create Your First Group": "Create Your First Group",
       "Accept Transfer": "Accept Transfer",
       "Actions": "Actions",
       "Activate": "Activate",
@@ -3059,6 +3060,8 @@
       "the Transaction Type": "the Transaction Type"
     },
     "text": {
+      "No Groups Found": "No Groups Found",
+      "No Groups Found Description": "We couldn't find any groups. Try a different search or create one now.",
       "About Us": "About Us",
       "A": "A",
       "Account Transfers": "Account Transfers",

src/assets/translations/es-CL.json

@@ -350,6 +350,7 @@
       "Home": "Inicio"
     },
     "buttons": {
+      "Create Your First Group": "Crea tu primer grupo",
       "Accept Transfer": "Aceptar transferencia",
       "Actions": "Acciones",
       "Activate": "Activar",
@@ -3025,6 +3026,8 @@
       "the Transaction Type": "el tipo de transacción"
     },
     "text": {
+      "No Groups Found": "No se encontraron grupos",
+      "No Groups Found Description": "No pudimos encontrar ningún grupo. Intente una búsqueda diferente o cree uno ahora.",
       "Loading data": "Cargando datos",
       "No repayment schedule available": "No hay cronograma de pagos disponible",
       "About Us": "Sobre Nosotros",

src/assets/translations/es-MX.json

@@ -350,6 +350,7 @@
       "Home": "Inicio"
     },
     "buttons": {
+      "Create Your First Group": "Crea tu primer grupo",
       "Accept Transfer": "Aceptar transferencia",
       "Actions": "Acciones",
       "Activate": "Activar",
@@ -3040,6 +3041,8 @@
       "the Transaction Type": "el tipo de transacción"
     },
     "text": {
+      "No Groups Found": "No se encontraron grupos",
+      "No Groups Found Description": "No pudimos encontrar ningún grupo. Intente una búsqueda diferente o cree uno ahora.",
       "Unable to load vendors. Please check your connection and try again.": "No se pudieron cargar los proveedores. Verifique su conexión e intente de nuevo.",
       "This remittance has a terminal status and cannot be processed further.": "Esta remesa tiene un estado terminal y no puede ser procesada.",
       "This remittance has already been paid successfully.": "Esta remesa ya ha sido pagada exitosamente.",

src/assets/translations/fr-FR.json

@@ -350,6 +350,7 @@
       "Home": "Maison"
     },
     "buttons": {
+      "Create Your First Group": "Créez votre premier groupe",
       "Accept Transfer": "Accepter le transfert",
       "Actions": "Actions",
       "Activate": "Activer",
@@ -3027,6 +3028,8 @@
       "the Transaction Type": "le type de transaction"
     },
     "text": {
+      "No Groups Found": "Aucun groupe trouvé",
+      "No Groups Found Description": "Nous n'avons trouvé aucun groupe. Essayez une autre recherche ou créez-en un maintenant.",
       "Loading data": "Chargement des données",
       "No repayment schedule available": "Aucun calendrier de remboursement disponible",
       "About Us": "À Propos de Nous",

src/assets/translations/it-IT.json

@@ -350,6 +350,7 @@
       "Home": "Casa"
     },
     "buttons": {
+      "Create Your First Group": "Crea il tuo primo gruppo",
       "Accept Transfer": "Accetta trasferimento",
       "Actions": "Azioni",
       "Activate": "Attivare",
@@ -3023,6 +3024,8 @@
       "the Transaction Type": "il tipo di transazione"
     },
     "text": {
+      "No Groups Found": "Nessun gruppo trovato",
+      "No Groups Found Description": "Non siamo riusciti a trovare alcun gruppo. Prova una ricerca diversa o creane uno ora.",
       "Loading data": "Caricamento dati",
       "No repayment schedule available": "Nessun piano di rimborso disponibile",
       "About Us": "Chi Siamo",

src/assets/translations/ko-KO.json

@@ -350,6 +350,7 @@
       "Home": "집"
     },
     "buttons": {
+      "Create Your First Group": "첫 번째 그룹 생성",
       "Accept Transfer": "전송 수락",
       "Actions": "행위",
       "Activate": "활성화",
@@ -3023,6 +3024,8 @@
       "the Transaction Type": "거래 유형"
     },
     "text": {
+      "No Groups Found": "그룹을 찾을 수 없습니다",
+      "No Groups Found Description": "그룹을 찾을 수 없습니다. 다른 검색을 시도하거나 지금 하나를 생성하십시오.",
       "Loading data": "데이터 로딩 중",
       "No repayment schedule available": "상환 일정을 사용할 수 없습니다",
       "About Us": "회사 소개",

src/assets/translations/lt-LT.json

@@ -350,6 +350,7 @@
       "Home": "Namai"
     },
     "buttons": {
+      "Create Your First Group": "Sukurkite savo pirmąją grupę",
       "Accept Transfer": "Priimti perkėlimą",
       "Actions": "Veiksmai",
       "Activate": "Suaktyvinti",
@@ -3024,6 +3025,8 @@
       "the Transaction Type": "operacijos tipas"
     },
     "text": {
+      "No Groups Found": "Nerasta grupių",
+      "No Groups Found Description": "Nepavyko rasti jokių grupių. Pabandykite kitą paiešką arba sukurkite vieną dabar.",
       "Loading data": "Duomenų įkėlimas",
       "No repayment schedule available": "Nėra galimo grąžinimo grafiko",
       "About Us": "Apie Mus",

src/assets/translations/lv-LV.json

@@ -350,6 +350,7 @@
       "Home": "Mājas"
     },
     "buttons": {
+      "Create Your First Group": "Izveidot savu pirmo grupu",
       "Accept Transfer": "Pieņemt pārsūtīšanu",
       "Actions": "Darbības",
       "Activate": "Aktivizēt",
@@ -3024,6 +3025,8 @@
       "the Transaction Type": "Darījuma veids"
     },
     "text": {
+      "No Groups Found": "Nav atrasta neviena grupa",
+      "No Groups Found Description": "Mēs nevarējām atrast nevienu grupu. Mēģiniet citu meklēšanu vai izveidojiet jaunu tagad.",
       "Loading data": "Ielādē datus",
       "No repayment schedule available": "Nav pieejams atmaksas grafiks",
       "About Us": "Par Mums",

src/assets/translations/ne-NE.json

@@ -350,6 +350,7 @@
       "Home": "घर"
     },
     "buttons": {
+      "Create Your First Group": "आफ्नो पहिलो समूह सिर्जना गर्नुहोस्",
       "Accept Transfer": "स्थानान्तरण स्वीकार गर्नुहोस्",
       "Actions": "कार्यहरू",
       "Activate": "सक्रिय गर्नुहोस्",
@@ -3021,6 +3022,8 @@
       "the Transaction Type": "लेनदेन प्रकार"
     },
     "text": {
+      "No Groups Found": "समूह फेला परेन",
+      "No Groups Found Description": "हामी कुनै समूह फेला पार्न सकेनौं। फरक खोज प्रयास गर्नुहोस् वा अहिले एउटा सिर्जना गर्नुहोस्।",
       "Loading data": "डाटा लोड गर्दै",
       "No repayment schedule available": "कुनै पुनर्भुक्तानी तालिका उपलब्ध छैन",
       "About Us": "हाम्रो बारेमा",

src/assets/translations/pt-PT.json

@@ -350,6 +350,7 @@
       "Home": "Lar"
     },
     "buttons": {
+      "Create Your First Group": "Crie seu primeiro grupo",
       "Accept Transfer": "Aceitar transferência",
       "Actions": "Ações",
       "Activate": "Ativar",
@@ -3024,6 +3025,8 @@
       "the Transaction Type": "o tipo de transação"
     },
     "text": {
+      "No Groups Found": "Nenhum grupo encontrado",
+      "No Groups Found Description": "Não conseguimos encontrar nenhum grupo. Tente uma busca diferente ou crie um agora.",
       "Loading data": "Carregando dados",
       "No repayment schedule available": "Nenhum cronograma de reembolso disponível",
       "About Us": "Sobre Nós",

src/assets/translations/sw-SW.json

@@ -350,6 +350,7 @@
       "Home": "Nyumbani"
     },
     "buttons": {
+      "Create Your First Group": "Unda Kikundi Chako Cha Kwanza",
       "Accept Transfer": "Kubali Uhamisho",
       "Actions": "Vitendo",
       "Activate": "Amilisha",
@@ -3021,6 +3022,8 @@
       "the Transaction Type": "Aina ya Muamala"
     },
     "text": {
+      "No Groups Found": "Hakuna Vikundi Vilivyopatikana",
+      "No Groups Found Description": "Hatuwezi kupata vikundi vyovyote. Jaribu utafutaji tofauti au unda kimoja sasa.",
       "Loading data": "Inapakia data",
       "No repayment schedule available": "Hakuna ratiba ya malipo inayopatikana",
       "About Us": "Kuhusu Sisi",