mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
public: true,
|
|
})
|
|
|
|
const { t, locale } = useI18n()
|
|
const isLoggedIn = await useIsLoggedIn()
|
|
const settings = await useSettings()
|
|
const appsData = await useApps()
|
|
|
|
useHead({
|
|
title: t('app_list'),
|
|
})
|
|
|
|
const intro = computed(() => {
|
|
const {
|
|
portal_user_intro: userIntro,
|
|
portal_public_intro: publicIntro,
|
|
public: isPublic,
|
|
} = settings.value
|
|
return isLoggedIn.value ? userIntro : isPublic ? publicIntro : null
|
|
})
|
|
|
|
const apps = Object.entries(appsData.value).map(([id, app]) => {
|
|
return {
|
|
...app,
|
|
url: '//' + app.url,
|
|
description: app.description[locale.value] || app.description.en
|
|
}
|
|
})
|
|
|
|
const search = ref('')
|
|
|
|
async function onSearchSubmit() {
|
|
await navigateTo(
|
|
settings.value.search_engine + search.value,
|
|
{
|
|
open: {
|
|
target: '_blank',
|
|
}
|
|
}
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<CustomText v-if="intro" :content="intro" />
|
|
|
|
<form v-if="settings.search_engine" class="flex my-16" @submit.prevent>
|
|
<div class="join w-full max-w-xl mx-auto">
|
|
<input
|
|
v-model="search"
|
|
type="search"
|
|
class="input input-bordered join-item w-full"
|
|
name="search"
|
|
:placeholder="t('search_engine_placeholder', { engine: settings.search_engine_name })"
|
|
>
|
|
<button type="submit" class="btn btn-primary join-item px-2" @click="onSearchSubmit">
|
|
<YIcon name="magnify" aria-hidden="true" class="m-0" />
|
|
<span class="sr-only">{{ t('search') }}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<section id="apps" class="my-16">
|
|
<PageTitle :text="t('app_list')" tag="h2" sr-only class="mb-4" />
|
|
|
|
<div v-if="!apps.length">
|
|
<em>{{ t('no_apps') }}</em>
|
|
</div>
|
|
<ul v-else class="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
<li
|
|
v-for="app in apps"
|
|
:key="app.label"
|
|
class="flex flex-auto border border-neutral rounded p-4 relative hover:bg-neutral hover:text-neutral-content"
|
|
>
|
|
<img
|
|
v-if="app.logo"
|
|
aria-hidden="true"
|
|
:src="app.logo"
|
|
class="w-24 h-24 rounded me-4 bg-white"
|
|
/>
|
|
<div>
|
|
<h4 class="text-xl font-bold">
|
|
<a :href="app.url" class="">{{ app.label }}</a>
|
|
</h4>
|
|
<div v-if="app.description" v-html="app.description" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.grid li a::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
}
|
|
</style>
|