feat(nuonic-extension): implement installation functionality and enhance UI details

Author: tschaefermedia

src/Resources/app/administration/src/component/nuonic-extension-card/index.js

@@ -8,16 +8,12 @@ const { Utils, Filter } = Shopware;
 Component.register('nuonic-extension-card', {
 	template,
 
-	compatConfig: Shopware.compatConfig,
+	inject: ['installExtensionService'],
 
-	inheritAttrs: false,
-
-	inject: ['shopwareExtensionService', 'extensionStoreActionService', 'cacheApiService'],
+	mixins: [Mixin.getByName('notification')],
 
 	emits: ['update-list'],
 
-	mixins: ['sw-extension-error'],
-
 	props: {
 		extension: {
 			type: Object,
@@ -28,15 +24,6 @@ Component.register('nuonic-extension-card', {
 	data() {
 		return {
 			isLoading: false,
-			showUninstallModal: false,
-			showRemovalModal: false,
-			showPermissionsModal: false,
-			permissionsAccepted: false,
-			showPrivacyModal: false,
-			permissionModalActionLabel: null,
-			openLink: null,
-			showConsentAffirmationModal: false,
-			consentAffirmationDeltas: null,
 		};
 	},
 
@@ -68,8 +55,6 @@ Component.register('nuonic-extension-card', {
 		isInstalled() {
 			const installed = this.extension.pluginId !== null;
 
-			console.log('isInstalled', installed);
-
 			return installed;
 		},
 
@@ -82,5 +67,27 @@ Component.register('nuonic-extension-card', {
 		emitUpdateList() {
 			this.$emit('update-list');
 		},
+
+		onInstall() {
+			this.isLoading = true;
+
+			const data = {
+				openSourcePluginId: this.extension.id,
+			};
+
+			this.installExtensionService
+				.install(data)
+				.then(() => {
+					this.isLoading = false;
+					this.$router.push({ name: 'sw.extension.my-extensions.listing.app', query: { term: this.extension.name } });
+				})
+				.catch((error) => {
+					this.isLoading = false;
+					this.createNotificationError({
+						message: this.$tc('nuonic-plugin-installer.notification.installFailed'),
+						error,
+					});
+				});
+		},
 	},
 });

src/Resources/app/administration/src/component/nuonic-extension-card/nuonic-extension-card.html.twig

@@ -3,43 +3,53 @@
 
 	<sw-extension-icon	:src="imageUrl" />
 
-	{% block nuonic_extension_card_base_activation_switch %}
-		<div	class="nuonic-extension-card-base__info">
-			<section>
-				<span	class="nuonic-extension-card-base__info-name">
-					{{ extension.name }}
-				</span>
-				<br/>
-				<span	class="nuonic-extension-card-base__info-description">
-					{{ extension.description }}
-				</span>
-
-			</section>
-		</div>
-	{% endblock %}
+	<div	class="nuonic-extension-card-base__info">
+		<section>
+			<span	class="nuonic-extension-card-base__info-name">
+				{{ extension.name }}
+			</span>
+			<br/>
+			<span	class="nuonic-extension-card-base__info-description">
+				{{ extension.description }}
+			</span>
+			<br/>
+			<span	v-if="extension.manufacturer"	class="nuonic-extension-card-base__info-manufacturer">
+				{{ $tc('nuonic-plugin-installer.cards.manufacturer') }}
+				{{ extension.manufacturer }}
+			</span>
+			|
+			<span	v-if="extension.license"	class="nuonic-extension-card-base__info-license">
+				{{ $tc('nuonic-plugin-installer.cards.license') }}
+				{{ extension.license }}
+			</span>
+		</section>
+	</div>
+
+	<div	class="nuonic-extension-card-base__main-link">
+		<a	:href="extension.link"	target="_blank"	rel="noopener noreferrer">
+			<sw-icon	name="regular-github"></sw-icon>
+		</a>
+	</div>
 
 	<div	class="nuonic-extension-card-base__meta-info">
-		{% block nuonic_extension_card_base_info_content %}
-			<section>
-				<span	v-if="extension.availableVersion"	class="nuonic-extension-card-base__meta-info-version">
-					Version (TODO):
-					{{ extension.availableVersion }}
-				</span>
-				<br/>
-				<span	v-if="extension.lastCommitTime"	class="nuonic-extension-card-base__meta-info-last-commit">
-					Last Commit (TODO):
-					{{ dateFilter(extension.lastCommitTime, { month: 'numeric', year: 'numeric', hour: undefined, minute: undefined }) }}
-
-				</span>
-
-			</section>
-		{% endblock %}
+		<section>
+			<span	v-if="extension.availableVersion"	class="nuonic-extension-card-base__meta-info-version">
+				{{ $tc('nuonic-plugin-installer.cards.version') }}
+				{{ extension.availableVersion }}
+			</span>
+			<br/>
+			<span	v-if="extension.lastCommitTime"	class="nuonic-extension-card-base__meta-info-last-commit">
+				{{ $tc('nuonic-plugin-installer.cards.lastCommit') }}
+				{{ dateFilter(extension.lastCommitTime, { month: 'numeric', year: 'numeric', hour: undefined, minute: undefined }) }}
+			</span>
+
+		</section>
 
 	</div>
 
 	<div	class="nuonic-extension-card-base__main-action">
-		<span	v-if="!isInstalled"	class="nuonic-extension-card-base__open-extension"	role="button"	tabindex="0">
-			Install (TODO)
+		<span	v-if="!isInstalled"	class="nuonic-extension-card-base__open-extension"	role="button"	tabindex="0"	@click="onInstall">
+			{{ $tc('nuonic-plugin-installer.cards.install') }}
 		</span>
 	</div>
 

src/Resources/app/administration/src/component/nuonic-extension-card/nuonic-extension-card.scss

@@ -9,19 +9,22 @@
 		border-radius: 8px;
 	}
 
-
-
 	.sw-meteor-card__content .sw-meteor-card__content-wrapper {
 		display: grid;
-		grid-column-gap: 24px;
-		grid-template-columns: 56px 5fr 2fr minmax(min-content, 1fr) auto;
+		grid-column-gap: 1rem;
+		grid-template-columns: 56px 5fr 24px 2fr minmax(min-content, 1fr);
 		align-items: center;
 		padding: 16px 32px;
 		border: none;
 	}
 
+	.nuonic-extension-card-base__main-link {
+		a::after {
+			display: none;
+		}
+	}
+
 	.nuonic-extension-card-base__info {
-		margin-left: -8px;
 		overflow: hidden;
 		font-size: $font-size-xxs;
 

src/Resources/app/administration/src/main.js

@@ -3,6 +3,7 @@ import './component/nuonic-plugin-installer-index';
 import './extension/sw-search-bar-item';
 import './decorator/search-type.decorator';
 import './component/nuonic-extension-card';
+import './service/api/install.service';
 
 import deDE from './snippet/de-DE';
 import enGB from './snippet/en-GB';

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

@@ -4,7 +4,9 @@
             <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>
-            {{ $tc('sw-extension.mainMenu.purchased') }}
+            <h2>
+                {{ $tc('nuonic-plugin-installer.list.title') }}
+            </h2>
         </template>
         <template #content>
             <div class="nuonic-plugin-installer-index">

src/Resources/app/administration/src/service/api/install.service.js

@@ -0,0 +1,27 @@
+const ApiService = Shopware.Classes.ApiService;
+const { Application } = Shopware;
+
+class InstallExtensionService extends ApiService {
+	constructor(httpClient, loginService, apiEndpoint = 'nuonic-plugin-installer') {
+		super(httpClient, loginService, apiEndpoint);
+	}
+
+	install(formData) {
+		const headers = this.getBasicHeaders({});
+
+		return this.httpClient
+			.post(`_action/nuonic-plugin-installer/install`, formData, {
+				headers,
+			})
+			.then((response) => {
+				return ApiService.handleResponse(response);
+			});
+	}
+}
+
+Application.addServiceProvider('installExtensionService', (container) => {
+	const initContainer = Application.getContainer('init');
+	return new InstallExtensionService(initContainer.httpClient, container.loginService);
+});
+
+export default InstallExtensionService;

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

@@ -11,6 +11,19 @@
       "listing": {
         "placeholderSearchBar": "Suche nach Plugins..."
       }
+    },
+    "list": {
+      "title": "OpenSource Plugin Installer"
+    },
+    "cards": {
+      "version": "Version:",
+      "install": "Installieren",
+      "lastCommit": "Letzter Commit am:",
+      "license": "Lizenz:",
+      "manufacturer": "Hersteller:"
+    },
+    "notification": {
+      "installFailed": "Installation fehlgeschlagen"
     }
   },
   "ce_plugins": {
@@ -25,4 +38,4 @@
       }
     }
   }
-}
+}

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

@@ -11,6 +11,19 @@
       "listing": {
         "placeholderSearchBar": "Search for plugins..."
       }
+    },
+    "list": {
+      "title": "OpenSource Plugin Installer"
+    },
+    "cards": {
+      "version": "Version:",
+      "install": "Install",
+      "lastCommit": "Last commit on:",
+      "license": "License:",
+      "manufacturer": "Manufacturer:"
+    },
+    "notification": {
+      "installFailed": "Installation failed"
     }
   },
   "ce_plugins": {
@@ -25,4 +38,4 @@
       }
     }
   }
-}
+}