jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Group apps by popular and all

Browse Source
This commit is contained in:
Johannes Zellner
2025-01-08 12:53:42 +01:00
parent 58bb2d5f93
commit 68e02817a0
1 changed files with 48 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
dashboard/src/components/AppstoreView.vue
View File

@@ -3,25 +3,56 @@
<AppInstallDialog ref="appInstallDialog" />
<div class="filter-bar">
<div></div>
<TextInput ref="searchInput" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="max-width: 100%; width: 500px;"/>
<ButtonGroup>
<Button outline icon="fas fa-exchange-alt">{{ $t('apps.addAppproxyAction') }}</Button>
<Button outline icon="fas fa-link">{{ $t('apps.addApplinkAction') }}</Button>
</ButtonGroup>
</div>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
<div class="item" v-for="app in filteredApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
<img class="icon" :src="app.iconUrl" />
<div class="description">
<div class="title">{{ app.manifest.title }}</div>
<div class="tagline">{{ app.manifest.tagline }}</div>
<div v-if="!search">
<h4>{{ $t('appstore.category.popular') }}</h4>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
<div class="item" v-for="app in filteredPopularApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
<img class="icon" :src="app.iconUrl" />
<div class="description">
<div class="title">{{ app.manifest.title }}</div>
<div class="tagline">{{ app.manifest.tagline }}</div>
</div>
</div>
</div>
</TransitionGroup>
</TransitionGroup>
<h4>{{ $t('appstore.category.all') }}</h4>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
<div class="item" v-for="app in filteredAllApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
<img class="icon" :src="app.iconUrl" />
<div class="description">
<div class="title">{{ app.manifest.title }}</div>
<div class="tagline">{{ app.manifest.tagline }}</div>
</div>
</div>
</TransitionGroup>
</div>
<div v-else>
<TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
<div class="item" v-for="app in filteredApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
<img class="icon" :src="app.iconUrl" />
<div class="description">
<div class="title">{{ app.manifest.title }}</div>
<div class="tagline">{{ app.manifest.tagline }}</div>
</div>
</div>
</TransitionGroup>
</div>
</div>
</template>
<script setup>
import { ref, computed, useTemplateRef, onMounted } from 'vue';
import { TextInput } from 'pankow';
import { Button, ButtonGroup, TextInput } from 'pankow';
import AppstoreModel from '../models/AppstoreModel.js';
import AppInstallDialog from './AppInstallDialog.vue';
@@ -44,6 +75,12 @@ const filteredApps = computed(() => {
return false;
});
});
const filteredAllApps = computed(() => {
return filteredApps.value.filter(a => !a.featured);
});
const filteredPopularApps = computed(() => {
return filteredApps.value.filter(a => a.featured);
});
const appInstallDialog = useTemplateRef('appInstallDialog');
const searchInput = useTemplateRef('searchInput');
@@ -85,9 +122,9 @@ onMounted(async () => {
}
.filter-bar {
width: 90%;
width: 100%;
display: flex;
justify-content: center;
justify-content: space-between;
margin-bottom: 30px;
}