Follow upstream recommendation to have html templates below script in .vue files
This commit is contained in:
Johannes Zellner
@@ -1,100 +1,3 @@
|
||||
<template>
|
||||
<div>
|
||||
<ApplinkDialog ref="applinkDialog" @success="refreshApps()"/>
|
||||
|
||||
<h1 class="section-header">
|
||||
{{ $t('apps.title') }}
|
||||
<div>
|
||||
<TextInput v-model="filter" placeholder="Filter ..." />
|
||||
<ButtonGroup>
|
||||
<Dropdown outline tool :options="tagFilterOptions" option-key="id" option-label="name" v-model="tagFilter"></Dropdown>
|
||||
<Dropdown outline tool :options="stateFilterOptions" option-key="id" v-model="stateFilter"></Dropdown>
|
||||
<Dropdown outline tool :options="domainFilterOptions" option-key="id" option-label="domain" v-model="domainFilter"></Dropdown>
|
||||
</ButtonGroup>
|
||||
<Button tool @click="toggleView()" :icon="viewType === VIEW_TYPE.GRID ? 'fas fa-list' : 'fas fa-grip'"></Button>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<div v-show="ready">
|
||||
<TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
|
||||
<a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" v-tooltip="app.fqdn">
|
||||
<div class="config" v-show="isOperator(app)" @click.prevent="openAppEdit(app)"><Icon icon="fa-solid fa-cog" /></div>
|
||||
<img :src="API_ORIGIN + app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
|
||||
<div class="grid-item-label">{{ app.label || app.subdomain || app.fqdn }}</div>
|
||||
<div class="grid-item-task-label">{{ installationStateLabel(app) }}</div>
|
||||
<div class="apps-progress" v-show="isOperator(app)">
|
||||
<div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
|
||||
</div>
|
||||
</a>
|
||||
</TransitionGroup>
|
||||
|
||||
<div class="list" v-if="viewType === VIEW_TYPE.LIST">
|
||||
<TableView :columns="listColumns" :model="filteredApps">
|
||||
<template #icon="slotProps">
|
||||
<a :href="'https://' + slotProps.fqdn" target="_blank">
|
||||
<img class="list-icon" :src="API_ORIGIN + slotProps.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
|
||||
</a>
|
||||
</template>
|
||||
<template #label="slotProps">
|
||||
<a :href="'https://' + slotProps.fqdn" target="_blank" v-tooltip="slotProps.fqdn">
|
||||
{{ slotProps.label || slotProps.subdomain || slotProps.fqdn }}
|
||||
</a>
|
||||
</template>
|
||||
<template #appTitle="slotProps">
|
||||
{{ slotProps.manifest.title }}
|
||||
</template>
|
||||
<template #domain="slotProps">
|
||||
<a :href="'https://' + slotProps.fqdn" target="_blank">
|
||||
{{ slotProps.fqdn }}
|
||||
</a>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<div class="list-status">
|
||||
{{ installationStateLabel(slotProps) }}
|
||||
<div class="apps-progress" v-show="isOperator(slotProps)">
|
||||
<div class="apps-progress-filled" :style="{ width: slotProps.progress+'%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #sso="slotProps">
|
||||
<div v-show="slotProps.type !== APP_TYPES.LINK">
|
||||
<Icon icon="fa-brands fa-openid" v-show="slotProps.ssoAuth && slotProps.manifest.addons.oidc" v-tooltip="$t('apps.auth.openid')" />
|
||||
<Icon icon="fas fa-user" v-show="slotProps.ssoAuth && (!slotProps.manifest.addons.oidc && !slotProps.manifest.addons.email)" v-tooltip="$t('apps.auth.sso')" />
|
||||
<Icon icon="far fa-user" v-show="!slotProps.ssoAuth && !slotProps.manifest.addons.email" v-tooltip="$t('apps.auth.nosso')" />
|
||||
<Icon icon="fas fa-envelope" v-show="slotProps.manifest.addons.email" v-tooltip="$t('apps.auth.email')" />
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="slotProps">
|
||||
<div class="actions">
|
||||
<ButtonGroup>
|
||||
<Button tool v-if="slotProps.type !== APP_TYPES.LINK" :href="'/logs.html?appId=' + slotProps.id" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fas fa-align-left"></Button>
|
||||
<Button tool v-if="slotProps.type !== APP_TYPES.PROXIED && slotProps.type !== APP_TYPES.LINK" :href="'/terminal.html?id=' + slotProps.id" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal"></Button>
|
||||
<Button tool v-if="slotProps.manifest.addons.localstorage" :href="'/filemanager.html#/home/app/' + slotProps.id" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fas fa-folder"></Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<Button tool @click="openAppEdit(slotProps)" icon="fa-solid fa-cog"></Button>
|
||||
</div>
|
||||
</template>
|
||||
</TableView>
|
||||
</div>
|
||||
|
||||
<div class="empty-placeholder" v-if="apps.length === 0">
|
||||
<!-- for admins -->
|
||||
<div v-if="profile.isAtLeastAdmin">
|
||||
<h4>{{ $t('apps.noApps.title') }}</h4>
|
||||
<h5 v-html="$t('apps.noApps.description', { appStoreLink: '#/appstore' })"></h5>
|
||||
</div>
|
||||
|
||||
<!-- for non-admins -->
|
||||
<div v-if="!profile.isAtLeastAdmin">
|
||||
<h4>{{ $t('apps.noAccess.title') }}</h4>
|
||||
<h5>{{ $t('apps.noAccess.description') }}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { Button, ButtonGroup, Dropdown, Icon, TableView, TextInput } from 'pankow';
|
||||
@@ -294,6 +197,103 @@ export default {
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ApplinkDialog ref="applinkDialog" @success="refreshApps()"/>
|
||||
|
||||
<h1 class="section-header">
|
||||
{{ $t('apps.title') }}
|
||||
<div>
|
||||
<TextInput v-model="filter" placeholder="Filter ..." />
|
||||
<ButtonGroup>
|
||||
<Dropdown outline tool :options="tagFilterOptions" option-key="id" option-label="name" v-model="tagFilter"></Dropdown>
|
||||
<Dropdown outline tool :options="stateFilterOptions" option-key="id" v-model="stateFilter"></Dropdown>
|
||||
<Dropdown outline tool :options="domainFilterOptions" option-key="id" option-label="domain" v-model="domainFilter"></Dropdown>
|
||||
</ButtonGroup>
|
||||
<Button tool @click="toggleView()" :icon="viewType === VIEW_TYPE.GRID ? 'fas fa-list' : 'fas fa-grip'"></Button>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<div v-show="ready">
|
||||
<TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
|
||||
<a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" v-tooltip="app.fqdn">
|
||||
<div class="config" v-show="isOperator(app)" @click.prevent="openAppEdit(app)"><Icon icon="fa-solid fa-cog" /></div>
|
||||
<img :src="API_ORIGIN + app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
|
||||
<div class="grid-item-label">{{ app.label || app.subdomain || app.fqdn }}</div>
|
||||
<div class="grid-item-task-label">{{ installationStateLabel(app) }}</div>
|
||||
<div class="apps-progress" v-show="isOperator(app)">
|
||||
<div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
|
||||
</div>
|
||||
</a>
|
||||
</TransitionGroup>
|
||||
|
||||
<div class="list" v-if="viewType === VIEW_TYPE.LIST">
|
||||
<TableView :columns="listColumns" :model="filteredApps">
|
||||
<template #icon="slotProps">
|
||||
<a :href="'https://' + slotProps.fqdn" target="_blank">
|
||||
<img class="list-icon" :src="API_ORIGIN + slotProps.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
|
||||
</a>
|
||||
</template>
|
||||
<template #label="slotProps">
|
||||
<a :href="'https://' + slotProps.fqdn" target="_blank" v-tooltip="slotProps.fqdn">
|
||||
{{ slotProps.label || slotProps.subdomain || slotProps.fqdn }}
|
||||
</a>
|
||||
</template>
|
||||
<template #appTitle="slotProps">
|
||||
{{ slotProps.manifest.title }}
|
||||
</template>
|
||||
<template #domain="slotProps">
|
||||
<a :href="'https://' + slotProps.fqdn" target="_blank">
|
||||
{{ slotProps.fqdn }}
|
||||
</a>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<div class="list-status">
|
||||
{{ installationStateLabel(slotProps) }}
|
||||
<div class="apps-progress" v-show="isOperator(slotProps)">
|
||||
<div class="apps-progress-filled" :style="{ width: slotProps.progress+'%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #sso="slotProps">
|
||||
<div v-show="slotProps.type !== APP_TYPES.LINK">
|
||||
<Icon icon="fa-brands fa-openid" v-show="slotProps.ssoAuth && slotProps.manifest.addons.oidc" v-tooltip="$t('apps.auth.openid')" />
|
||||
<Icon icon="fas fa-user" v-show="slotProps.ssoAuth && (!slotProps.manifest.addons.oidc && !slotProps.manifest.addons.email)" v-tooltip="$t('apps.auth.sso')" />
|
||||
<Icon icon="far fa-user" v-show="!slotProps.ssoAuth && !slotProps.manifest.addons.email" v-tooltip="$t('apps.auth.nosso')" />
|
||||
<Icon icon="fas fa-envelope" v-show="slotProps.manifest.addons.email" v-tooltip="$t('apps.auth.email')" />
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="slotProps">
|
||||
<div class="actions">
|
||||
<ButtonGroup>
|
||||
<Button tool v-if="slotProps.type !== APP_TYPES.LINK" :href="'/logs.html?appId=' + slotProps.id" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fas fa-align-left"></Button>
|
||||
<Button tool v-if="slotProps.type !== APP_TYPES.PROXIED && slotProps.type !== APP_TYPES.LINK" :href="'/terminal.html?id=' + slotProps.id" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal"></Button>
|
||||
<Button tool v-if="slotProps.manifest.addons.localstorage" :href="'/filemanager.html#/home/app/' + slotProps.id" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fas fa-folder"></Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<Button tool @click="openAppEdit(slotProps)" icon="fa-solid fa-cog"></Button>
|
||||
</div>
|
||||
</template>
|
||||
</TableView>
|
||||
</div>
|
||||
|
||||
<div class="empty-placeholder" v-if="apps.length === 0">
|
||||
<!-- for admins -->
|
||||
<div v-if="profile.isAtLeastAdmin">
|
||||
<h4>{{ $t('apps.noApps.title') }}</h4>
|
||||
<h5 v-html="$t('apps.noApps.description', { appStoreLink: '#/appstore' })"></h5>
|
||||
</div>
|
||||
|
||||
<!-- for non-admins -->
|
||||
<div v-if="!profile.isAtLeastAdmin">
|
||||
<h4>{{ $t('apps.noAccess.title') }}</h4>
|
||||
<h5>{{ $t('apps.noAccess.description') }}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.grid-animation-move,
|
||||
|
||||
Reference in New Issue
Block a user