feat(nuonic-plugin-installer): implement plugin listing page and update navigation

Author: tschaefermedia

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

@@ -1,22 +1,26 @@
+import './page/nuonic-plugin-installer-list';
+
 Shopware.Module.register('nuonic-plugin-installer', {
-  type: 'plugin',
-  name: 'NuonicPluginInstaller',
-  title: 'nuonic-plugin-installer.extension.title',
-  description: 'nuonic-plugin-installer.extension.description',
-  color: '#66bbe3',
-  icon: 'regular-dashboard',
-  navigation: [{
-    label: 'NuonicPluginInstaller',
+    type: 'plugin',
+    name: 'nuonic-plugin-installer.extension.title',
+    title: 'nuonic-plugin-installer.extension.title',
+    description: 'nuonic-plugin-installer.extension.description',
     color: '#66bbe3',
-    path: 'nuonic.plugin.installer.index',
     icon: 'regular-dashboard',
-    parent: 'sw-extension',
-    position: 100
-  }],
-  routes: {
-    index: {
-      component: 'nuonic-plugin-installer-index',
-      path: '/'
+    navigation: [
+        {
+            label: 'nuonic-plugin-installer.extension.title',
+            color: '#66bbe3',
+            path: 'nuonic.plugin.installer.list',
+            icon: 'regular-dashboard',
+            parent: 'sw-extension',
+            position: 100,
+        },
+    ],
+    routes: {
+        list: {
+            component: 'nuonic-plugin-installer-list',
+            path: 'list',
+        },
     },
-  },
 });

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

@@ -0,0 +1,52 @@
+import template from './nuonic-plugin-installer-list.html.twig';
+
+const { Component, Mixin } = Shopware;
+const { Criteria } = Shopware.Data;
+
+Component.register('nuonic-plugin-installer-list', {
+    template,
+
+    inject: ['repositoryFactory'],
+    mixins: [Mixin.getByName('listing')],
+
+    data() {
+        return {
+            availablePlugins: [],
+            page: 1,
+            limit: 20,
+            total: 0,
+            term: null,
+            sortBy: 'name',
+            sortDirection: 'ASC',
+            loading: false,
+        };
+    },
+
+    computed: {
+        availablePluginsRepository() {
+            return this.repositoryFactory.create('nuonic_available_opensource_plugin');
+        },
+        availablePluginsCriteria() {
+            const criteria = new Criteria(this.page, this.limit);
+            criteria.setTerm(this.term);
+            criteria.addSorting(Criteria.sort(this.sortBy, this.sortDirection));
+            return criteria;
+        },
+    },
+
+    methods: {
+        getList() {
+            this.loading = true;
+            this.availablePluginsRepository.search(this.availablePluginsCriteria).then((result) => {
+                this.availablePlugins = result;
+                this.total = result.total;
+                this.loading = false;
+            });
+        },
+        changePage({ page = 1, limit = 10 }) {
+            this.page = page;
+            this.limit = limit;
+            this.getList();
+        },
+    },
+});

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

@@ -0,0 +1,14 @@
+{% block nuonic_plugin_installer_index %}
+	<sw-meteor-page	hide-icon>
+		<div	class="nuonic-plugin-installer-index">
+			<sw-skeleton	v-if="isLoading"	:variant="skeletonVariant" />
+			<div	v-else	class="nuonic-plugin-installer-index__listing-grid">
+				<template	v-for="entry in availablePlugins"	:key="entry.id">
+					{{ entry.name }}
+				</template>
+
+				<sw-pagination	:total="total"	:limit="limit"	:page="page"	@page-change="changePage" />
+			</div>
+		</div>
+	</sw-meteor-page>
+{% endblock %}