issuechecker: detailed issue list on click

public/js/components/Issues/IssueChecker.js

@@ -1,9 +1,13 @@
+import IssueList from './IssueList.js';
+
 export default {
 	name: 'IssueChecker',
 	expose: ['countPersonOpenIssues', 'checkPerson'],
 	//emits: ['issuesLoaded'],
 	 components: {
+		IssueList,
 		"p-skeleton": primevue.skeleton,
+		"p-overlaypanel": primevue.overlaypanel
 	 },
 	 props: {
 		person_id: Number,
@@ -16,6 +20,16 @@ export default {
 		endpoint: {
 			type: Object,
 			required: true
+		},
+		issueListEndpoint: {
+			type: Object,
+			required: true
+		},
+		issueListStyle: {
+			type: String
+		},
+		issueListStyleBreakpoints: {
+			type: String
 		}
 	},
 	 data() {
@@ -59,12 +73,26 @@ export default {
 			})
 			.catch(this.$fhcAlert.handleSystemError);
 		},
+		toggle(event) {
+			this.$refs.issuesOverlay.toggle(event);
+		}
 	 },
 	 template: `
 		<div class="px-2">
 			<h4 class="mb-1">Issues<a class="refresh-issues" title="erneut prüfen" href="javascript:void(0);" @click="checkPerson"><i class="fas fa-sync"></i></a></h4>
-			<h6 v-if="!isFetching" class="text-muted">{{ openissuescount }}</h6>
+			<h6 v-if="!isFetching" class="text-muted" role="button" @click="toggle">{{ openissuescount }}</h6>
 			<h6 v-else class="mb-2"><p-skeleton v-if="isFetching" style="width:45%"></p-skeleton></h6>
 		</div>
+
+		<p-overlaypanel ref="issuesOverlay" :style="issueListStyle" :breakpoints="issueListStyleBreakpoints">
+			<issue-list
+				ref="issueListRef"
+				:person_id = "person_id"
+				:apps = "apps"
+				:hauptzustaendig = "hauptzustaendig"
+				:endpoint = "issueListEndpoint"
+			>
+			</issue-list>
+		</p-overlaypanel>
 	 `
 }