feat: UI improvements

This commit is contained in:
Vlad Stan
2023-01-18 14:14:16 +02:00
parent d89128fb93
commit 3295c6bebe

View File

@@ -139,34 +139,47 @@
<q-dialog v-model="showUpgradeDialog"> <q-dialog v-model="showUpgradeDialog">
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card"> <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
<div class="col-12 col-md-5 q-gutter-y-md" v-if="selectedExtensionRepos"> <div class="col-12 col-md-5 q-gutter-y-md" v-if="selectedExtensionRepos">
<q-card v-for="repo of Object.keys(selectedExtensionRepos)" :key="repo"> <q-card
<q-card-section> flat
<h6 class="text-subtitle1 q-my-none">Repository</h6> bordered
<q-badge color="primary" rounded class="my-card"
><small v-text="repo"></small v-for="repoName of Object.keys(selectedExtensionRepos)"
></q-badge> :key="repoName"
</q-card-section> >
<q-expansion-item
:key="repoName"
group="repos"
label="Repository"
:caption="repoName"
:content-inset-level="0.5"
:icon="selectedExtensionRepos[repoName].isInstalled ? 'download_done': ''"
:header-class="selectedExtensionRepos[repoName].isInstalled ? 'text-green' : ''"
>
<q-card-section class="q-pa-none"> <q-card-section class="q-pa-none">
<q-separator></q-separator> <q-separator></q-separator>
<q-list> <q-list>
<q-expansion-item <q-expansion-item
v-for="release of selectedExtensionRepos[repo]" v-for="release of selectedExtensionRepos[repoName].releases"
:key="release.version" :key="release.version"
group="extras" group="releases"
:icon="isInstalledVersion(selectedExtension, release) ? 'download_done' : 'download'" :icon="release.isInstalled ? 'download_done' : 'download'"
:label="release.description" :label="release.description"
:caption="release.version" :caption="release.version"
:content-inset-level="0.5" :content-inset-level="0.5"
:header-class="isInstalledVersion(selectedExtension, release) ? 'text-green' : ''" :header-class="release.isInstalled ? 'text-green' : ''"
> >
<q-card> <q-card>
<q-card-section> <q-card-section>
<q-btn <q-btn
v-if="!isInstalledVersion(selectedExtension, release)" v-if="!release.isInstalled"
@click="installExtension(release)" @click="installExtension(release)"
color="primary unelevated mt-lg pt-lg" color="primary unelevated mt-lg pt-lg"
>Install</q-btn >Install</q-btn
> >
<q-btn v-else @click="showUninstall()" flat color="red">
Uninstall</q-btn
>
<a <a
v-if="release.html_url" v-if="release.html_url"
class="text-secondary float-right" class="text-secondary float-right"
@@ -181,11 +194,11 @@
v-if="release.details_html" v-if="release.details_html"
v-html="release.details_html" v-html="release.details_html"
></div> ></div>
<q-separator></q-separator> <q-separator></q-separator> </q-card
</q-card></q-expansion-item ></q-expansion-item>
>
</q-list> </q-list>
</q-card-section> </q-card-section>
</q-expansion-item>
</q-card> </q-card>
</div> </div>
<q-spinner v-else color="primary" size="2.55em"></q-spinner> <q-spinner v-else color="primary" size="2.55em"></q-spinner>
@@ -318,8 +331,18 @@
) )
this.selectedExtensionRepos = data.reduce((repos, release) => { this.selectedExtensionRepos = data.reduce((repos, release) => {
repos[release.source_repo] = repos[release.source_repo] || [] repos[release.source_repo] = repos[release.source_repo] || {
repos[release.source_repo].push(release) releases: [],
isInstalled: false
}
release.isInstalled = this.isInstalledVersion(
this.selectedExtension,
release
)
if (release.isInstalled) {
repos[release.source_repo].isInstalled = true
}
repos[release.source_repo].releases.push(release)
return repos return repos
}, {}) }, {})
console.log('### repos', this.selectedExtensionRepos) console.log('### repos', this.selectedExtensionRepos)