feat: add no result view

feat: add language switch

Author: MelvinAchterhuis

src/Resources/app/administration/src/module/nuonic-plugin-installer/page/nuonic-plugin-installer-list/index.js

@@ -127,6 +127,10 @@ Component.register('nuonic-plugin-installer-list', {
 		listFilters() {
 			return this.filterFactory.create('nuonic_available_opensource_plugin', this.listFilterOptions);
 		},
+
+		assetFilter() {
+			return Shopware.Filter.getByName('asset');
+		},
 	},
 
 	methods: {
@@ -151,6 +155,10 @@ Component.register('nuonic-plugin-installer-list', {
 			}
 		},
 
+		onChangeLanguage() {
+			this.getList();
+		},
+
 		changePage({ page = 1, limit = 10 }) {
 			this.page = page;
 			this.limit = limit;

src/Resources/app/administration/src/module/nuonic-plugin-installer/page/nuonic-plugin-installer-list/nuonic-plugin-installer-list.html.twig

@@ -3,14 +3,37 @@
         <template #search-bar>
             <sw-search-bar initial-search-type="nuonic_available_opensource_plugin" :placeholder="$tc('nuonic-plugin-installer.extension.listing.placeholderSearchBar')" @search="onSearch" />
         </template>
+
         <template #smart-bar-header>
             <h2>
-                {{ $tc('nuonic-plugin-installer.list.title') }} ({{ total }})
+                {{ $tc('nuonic-plugin-installer.list.title') }} ({{ availablePlugins.total }})
             </h2>
         </template>
+
+        <template #language-switch>
+            <sw-language-switch @on-change="onChangeLanguage" />
+        </template>
+
         <template #content>
             <div class="nuonic-plugin-installer-index">
                 <sw-skeleton v-if="isLoading" :variant="skeletonVariant" />
+                <sw-card
+                        v-else-if="!isLoading && availablePlugins.total === 0"
+                        class="nuonic-plugin-installer-index__no-results"
+                >
+                    <img
+                        :src="assetFilter('administration/static/img/empty-states/extensions-empty-state.svg')"
+                        alt=""
+                    >
+
+                    <h3>
+                        {{ $tc('nuonic-plugin-installer.list.filters.noResults.title') }}
+                    </h3>
+
+                    <p>
+                        {{ $tc('nuonic-plugin-installer.list.filters.noResults.description') }}
+                    </p>
+                </sw-card>
                 <div v-else class="nuonic-plugin-installer-index__listing-grid">
                     <template v-for="entry in availablePlugins" :key="entry.id">
                         <component :is="'nuonic-extension-card'" :extension="entry" />
@@ -19,6 +42,7 @@
                 </div>
             </div>
         </template>
+
         <template #sidebar>
             <sw-sidebar class="sw-customer-list__sidebar">
                     <sw-sidebar-item

src/Resources/app/administration/src/module/nuonic-plugin-installer/page/nuonic-plugin-installer-list/nuonic-plugin-installer-list.scss

@@ -1,3 +1,22 @@
 .nuonic-plugin-installer-index {
 	padding: 1rem 0;
+}
+
+.nuonic-plugin-installer-index__no-results {
+	text-align: center;
+	margin-top: 48px;
+	padding: 56px 32px;
+	background-color: #fff;
+	.sw-card__content {
+		h3 {
+			font-size: 18px;
+			font-weight: bold;
+		}
+		img {
+			margin-bottom: 24px;
+		}
+		p {
+			font-size: 14px;
+		}
+	}
 }

src/Resources/app/administration/src/snippet/de-DE.json

@@ -34,6 +34,10 @@
       },
       "lastCommitFilter": {
         "label": "Letztes Commit"
+      },
+      "noResults": {
+        "title": "Kleine Plugins gefunden",
+        "description": "Versuche deine Suche oder Filterkriterien zu ändern."
       }
     }
     },

src/Resources/app/administration/src/snippet/en-GB.json

@@ -34,6 +34,10 @@
         },
         "lastCommitFilter": {
           "label": "Last commit"
+        },
+        "noResults": {
+          "title": "No plugins found",
+          "description": "Try changing your search or filter criteria."
         }
       }
     },