<template> <div> <el-collapse @change="onChange"> <el-collapse-item name="1" @keydown.space="launcherSearchSpace"> <template #title> Launcher PRs <el-input class="pr_search_input" v-model="launcherSearch" placeholder="Filter pull requests" @click.stop="() => false"></el-input> </template> <p v-if="pull_requests_launcher.length === 0"> <el-progress :show-text="false" :percentage="100" status="warning" :indeterminate="true" :duration="1" style="margin: 15px" /> </p> <el-card v-else-if="filtered_launcher_pull_requests.length !== 0" shadow="hover" v-for="pull_request in filtered_launcher_pull_requests" v-bind:key="pull_request.url" > <el-button type="primary" @click="installLauncherPR(pull_request)">Install</el-button> <el-button type="primary" @click="downloadLauncherPR(pull_request)">Download</el-button> <a target="_blank" :href="pull_request.html_url"> {{ pull_request.number }}: {{ pull_request.title }} </a> </el-card> <div v-else class="no_matching_pr"> No matching PR found. </div> </el-collapse-item> <el-collapse-item name="2" @keydown.space="modsSearchSpace"> <template #title> Mods PRs <el-input class="pr_search_input" v-model="modsSearch" placeholder="Filter pull requests" @click.stop="() => false"></el-input> </template> <div style="margin: 15px"> <el-alert title="Warning" type="warning" :closable="false" show-icon> Mod PRs are installed into a separate profile. Make sure to launch via 'r2ns-launch-mod-pr-version.bat' or via '-profile=R2Northstar-PR-test-managed-folder' to actually run the PR version! </el-alert> </div> <p v-if="pull_requests_mods.length === 0"> <el-progress :show-text="false" :percentage="100" status="warning" :indeterminate="true" :duration="1" style="margin: 15px" /> </p> <el-card v-else-if="filtered_mods_pull_requests.length !== 0" shadow="hover" v-for="pull_request in filtered_mods_pull_requests" v-bind:key="pull_request.url" > <el-button type="primary" @click="installModsPR(pull_request)">Install</el-button> <el-button type="primary" @click="downloadModsPR(pull_request)">Download</el-button> <a target="_blank" :href="pull_request.html_url"> {{ pull_request.number }}: {{ pull_request.title }} </a> </el-card> <div v-else class="no_matching_pr"> No matching PR found. </div> </el-collapse-item> </el-collapse> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { PullRequestType } from '../../../src-tauri/bindings/PullRequestType'; import { PullsApiResponseElement } from '../../../src-tauri/bindings/PullsApiResponseElement'; export default defineComponent({ name: 'PullRequestsSelector', data: () => ({ launcherSearch: '', modsSearch: '' }), computed: { pull_requests_launcher(): PullsApiResponseElement[] { return this.$store.state.pullrequests.pull_requests_launcher; }, pull_requests_mods(): PullsApiResponseElement[] { return this.$store.state.pullrequests.pull_requests_mods; }, filtered_launcher_pull_requests(): PullsApiResponseElement[] { if (this.launcherSearch.length === 0) { return this.pull_requests_launcher; } return this.pull_requests_launcher.filter(pr => // Check PR id pr.number.toString().indexOf(this.launcherSearch) !== -1 // Check PR title || pr.title.toLowerCase().indexOf(this.launcherSearch.toLowerCase()) !== -1); }, filtered_mods_pull_requests(): PullsApiResponseElement[] { if (this.modsSearch.length === 0) { return this.pull_requests_mods; } return this.pull_requests_mods.filter(pr => // Check PR id pr.number.toString().indexOf(this.modsSearch) !== -1 // Check PR title || pr.title.toLowerCase().indexOf(this.modsSearch.toLowerCase()) !== -1); }, }, methods: { onChange(e: Object) { const openedCollapseNames = Object.values(e); if (openedCollapseNames.includes('1') && this.pull_requests_launcher.length === 0) { this.getPullRequests('Launcher'); } if (openedCollapseNames.includes('2') && this.pull_requests_mods.length === 0) { this.getPullRequests('Mods'); } }, launcherSearchSpace(e: KeyboardEvent) { e.preventDefault(); this.launcherSearch += ' '; }, modsSearchSpace(e: KeyboardEvent) { e.preventDefault(); this.modsSearch += ' '; }, async getPullRequests(pull_request_type: PullRequestType) { this.$store.commit('getPullRequests', pull_request_type); }, async downloadLauncherPR(pull_request: PullsApiResponseElement) { this.$store.commit('downloadLauncherPR', pull_request); }, async downloadModsPR(pull_request: PullsApiResponseElement) { this.$store.commit('downloadModsPR', pull_request); }, async installLauncherPR(pull_request: PullsApiResponseElement) { this.$store.commit('installLauncherPR', pull_request); }, async installModsPR(pull_request: PullsApiResponseElement) { this.$store.commit('installModsPR', pull_request); }, } }) </script> <style scoped> .el-collapse { border-radius: var(--el-border-radius-base); overflow: hidden; } :deep(.el-collapse-item__header) { padding-left: 10px; font-size: 14px; } .el-collapse:deep(.el-collapse-item__arrow) { margin: 0 8px; } .pr_search_input { width: 200px; margin: 0 0 0 auto; } .no_matching_pr { margin: 0 auto; width: max-content; } </style>