From 04e275e9670ad7677e302b4bd3ae08b5d944fac8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Tue, 14 Nov 2023 14:31:27 +0100
Subject: [PATCH] feat: add share option in detail views

---
 .../app/src/app/modules/data/data.module.ts   |  2 ++
 .../app/modules/data/detail/data-detail.html  |  1 +
 .../data/elements/share-button.component.ts   | 33 +++++++++++++++++++
 .../modules/data/elements/share-button.html   |  4 +++
 .../modules/data/elements/share-button.scss   |  0
 frontend/app/src/assets/i18n/de.json          |  3 ++
 frontend/app/src/assets/i18n/en.json          |  3 ++
 7 files changed, 46 insertions(+)
 create mode 100644 frontend/app/src/app/modules/data/elements/share-button.component.ts
 create mode 100644 frontend/app/src/app/modules/data/elements/share-button.html
 create mode 100644 frontend/app/src/app/modules/data/elements/share-button.scss

diff --git a/frontend/app/src/app/modules/data/data.module.ts b/frontend/app/src/app/modules/data/data.module.ts
index 05829062..f064f371 100644
--- a/frontend/app/src/app/modules/data/data.module.ts
+++ b/frontend/app/src/app/modules/data/data.module.ts
@@ -106,6 +106,7 @@ import {SemesterDetailContentComponent} from './types/semester/semester-detail-c
 import {SemesterListItemComponent} from './types/semester/semester-list-item.component';
 import {VideoDetailContentComponent} from './types/video/video-detail-content.component';
 import {VideoListItemComponent} from './types/video/video-list-item.component';
+import {ShareButtonComponent} from './elements/share-button.component';
 
 /**
  * Module for handling data
@@ -180,6 +181,7 @@ import {VideoListItemComponent} from './types/video/video-list-item.component';
     BookDetailContentComponent,
     PeriodicalListItemComponent,
     PeriodicalDetailContentComponent,
+    ShareButtonComponent,
   ],
   imports: [
     CommonModule,
diff --git a/frontend/app/src/app/modules/data/detail/data-detail.html b/frontend/app/src/app/modules/data/detail/data-detail.html
index e1e77127..dcb2e068 100644
--- a/frontend/app/src/app/modules/data/detail/data-detail.html
+++ b/frontend/app/src/app/modules/data/detail/data-detail.html
@@ -20,6 +20,7 @@
     </ion-buttons>
     <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
     <ion-buttons [slot]="isModal ? 'start' : 'primary'">
+      <stapps-share-button *ngIf="item" [title]="'name' | thingTranslate: item"></stapps-share-button>
       <stapps-favorite-button *ngIf="item" [item]="$any(item)"></stapps-favorite-button>
     </ion-buttons>
     <ion-buttons slot="end" *ngIf="isModal">
diff --git a/frontend/app/src/app/modules/data/elements/share-button.component.ts b/frontend/app/src/app/modules/data/elements/share-button.component.ts
new file mode 100644
index 00000000..f7fc4890
--- /dev/null
+++ b/frontend/app/src/app/modules/data/elements/share-button.component.ts
@@ -0,0 +1,33 @@
+import {Component, Input} from '@angular/core';
+import {ToastController} from '@ionic/angular';
+import {environment} from '../../../../environments/environment';
+
+@Component({
+  selector: 'stapps-share-button',
+  templateUrl: 'share-button.html',
+  styleUrls: ['share-button.scss'],
+})
+export class ShareButtonComponent {
+  canShare = false;
+
+  @Input({required: true}) title: string;
+
+  @Input() url: string;
+
+  constructor(readonly toastController: ToastController) {}
+
+  share(): boolean {
+    const url = this.url ?? new URL(window.location.pathname, `https://${environment.app_host}`);
+
+    if (navigator.share) {
+      void navigator.share({
+        url: url.toString(),
+        text: this.title,
+      });
+      return false;
+    } else {
+      void navigator.clipboard.writeText(`${this.title}\n${url}`);
+      return true;
+    }
+  }
+}
diff --git a/frontend/app/src/app/modules/data/elements/share-button.html b/frontend/app/src/app/modules/data/elements/share-button.html
new file mode 100644
index 00000000..fcf1723c
--- /dev/null
+++ b/frontend/app/src/app/modules/data/elements/share-button.html
@@ -0,0 +1,4 @@
+<ion-button size="small" fill="clear" (click)="share() && toast.present()">
+  <ion-icon size="24" slot="icon-only" name="share" ios="ios_share"></ion-icon>
+</ion-button>
+<ion-toast [message]="'toast.TITLE_COPIED' | translate" #toast [duration]="2000"></ion-toast>
diff --git a/frontend/app/src/app/modules/data/elements/share-button.scss b/frontend/app/src/app/modules/data/elements/share-button.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/app/src/assets/i18n/de.json b/frontend/app/src/assets/i18n/de.json
index 08a5c98b..24b4fd14 100644
--- a/frontend/app/src/assets/i18n/de.json
+++ b/frontend/app/src/assets/i18n/de.json
@@ -25,6 +25,9 @@
     },
     "settings": "Einstellungen"
   },
+  "toast": {
+    "TITLE_COPIED": "In die Zwischenablage kopiert"
+  },
   "app": {
     "ui": {
       "CLOSE": "Schließen",
diff --git a/frontend/app/src/assets/i18n/en.json b/frontend/app/src/assets/i18n/en.json
index 552e0ccd..567697c9 100644
--- a/frontend/app/src/assets/i18n/en.json
+++ b/frontend/app/src/assets/i18n/en.json
@@ -25,6 +25,9 @@
     },
     "settings": "Settings"
   },
+  "toast": {
+    "TITLE_COPIED": "Copied to clipboard"
+  },
   "app": {
     "ui": {
       "CLOSE": "Close",