mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
uniformize description list and buttons
This commit is contained in:
parent
c0e0b97ae6
commit
7ce154d597
4 changed files with 103 additions and 102 deletions
|
@ -61,27 +61,20 @@ body {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
// <b-row /> elems with <b-col> inside and eventually .sep inside
|
// Descriptive list (<b-row /> elems with <b-col> inside)
|
||||||
.row-line {
|
.row-line {
|
||||||
&:hover > div > :first-child {
|
@include media-breakpoint-up(md) {
|
||||||
background-color: rgba(0, 0, 0, 0.05);
|
&:hover {
|
||||||
border-radius: 0.2rem;
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
padding: 0 .5rem;
|
border-radius: 0.2rem;
|
||||||
margin-right: -.5rem;
|
}
|
||||||
margin-left: -.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& > div {
|
@include media-breakpoint-down(sm) {
|
||||||
align-self: flex-start;
|
flex-direction: column;
|
||||||
display: flex;
|
margin-bottom: 0.5rem;
|
||||||
align-items: center;
|
padding-bottom: 0.5rem;
|
||||||
// display a dashed line between col items
|
border-bottom: $border-width solid $card-border-color;
|
||||||
.sep {
|
|
||||||
height: 0;
|
|
||||||
border-top: 1px dashed rgba(0, 0, 0, 0.25);
|
|
||||||
flex-grow: 1;
|
|
||||||
margin: 0 .75rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,26 +10,29 @@
|
||||||
v-for="(value, prop) in info" :key="prop"
|
v-for="(value, prop) in info" :key="prop"
|
||||||
no-gutters class="row-line"
|
no-gutters class="row-line"
|
||||||
>
|
>
|
||||||
<b-col cols="5" md="3" xl="3">
|
<b-col cols="auto" md="3">
|
||||||
<strong>{{ $t(prop) }}</strong>
|
<strong>{{ $t(prop) }}</strong>
|
||||||
<span class="sep" />
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col>
|
<b-col>
|
||||||
<a v-if="prop === 'url'" :href="value" target="_blank">{{ value }}</a>
|
<a v-if="prop === 'url'" :href="value" target="_blank">{{ value }}</a>
|
||||||
<span v-else>{{ value }}</span>
|
<span v-else>{{ value }}</span>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<hr>
|
<b-row no-gutters class="row-line">
|
||||||
|
<b-col cols="auto" md="3">
|
||||||
<!-- MANAGE USER/GROUP -->
|
<strong>{{ $t('app_info_access_desc') }}</strong>
|
||||||
<p class="mb-2">
|
<span class="sep" />
|
||||||
<strong>{{ $t('app_info_access_desc') }}</strong>
|
</b-col>
|
||||||
<br>
|
<b-col>
|
||||||
{{ allowedGroups.length > 0 ? allowedGroups.join(', ') + '.' : $t('nobody') }}
|
{{ allowedGroups.length > 0 ? allowedGroups.join(', ') + '.' : $t('nobody') }}
|
||||||
</p>
|
<b-button
|
||||||
<b-button size="sm" :to="{ name: 'group-list'}" variant="info">
|
size="sm" :to="{ name: 'group-list'}" variant="info"
|
||||||
<icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
|
class="ml-2"
|
||||||
</b-button>
|
>
|
||||||
|
<icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
|
||||||
|
</b-button>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
</b-card>
|
</b-card>
|
||||||
|
|
||||||
<!-- OPERATIONS -->
|
<!-- OPERATIONS -->
|
||||||
|
@ -39,11 +42,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- CHANGE PERMISSIONS LABEL -->
|
<!-- CHANGE PERMISSIONS LABEL -->
|
||||||
<b-form-group :label="$t('app_manage_label_and_tiles')" label-class="font-weight-bold" :description="$t('app_info_managelabel_desc')">
|
<b-form-group :label="$t('app_manage_label_and_tiles')" label-class="font-weight-bold">
|
||||||
<form-field
|
<form-field
|
||||||
v-for="(perm, i) in app.permissions" :key="i"
|
v-for="(perm, i) in app.permissions" :key="i"
|
||||||
:label="perm.title" :label-for="'perm-' + i"
|
:label="perm.title" :label-for="'perm-' + i"
|
||||||
label-cols="0" label-class=""
|
label-cols="0" label-class="" class="m-0"
|
||||||
:validation="$v.form.labels.$each[i] "
|
:validation="$v.form.labels.$each[i] "
|
||||||
>
|
>
|
||||||
<template #default="{ self }">
|
<template #default="{ self }">
|
||||||
|
@ -237,10 +240,13 @@ export default {
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetchData () {
|
fetchData () {
|
||||||
this.$store.dispatch('FETCH', { uri: 'users/permissions?full', storeKey: 'permissions' }).then(a => {
|
Promise.all([
|
||||||
console.log(a)
|
api.get(`apps/${this.id}?full`),
|
||||||
})
|
this.$store.dispatch('FETCH_ALL', [
|
||||||
api.get(`apps/${this.id}?full`).then((app) => {
|
{ uri: 'users/permissions?full', storeKey: 'permissions' },
|
||||||
|
{ uri: 'domains' }
|
||||||
|
])
|
||||||
|
]).then(([app]) => {
|
||||||
const form = { labels: [] }
|
const form = { labels: [] }
|
||||||
|
|
||||||
const mainPermission = app.permissions[this.id + '.main']
|
const mainPermission = app.permissions[this.id + '.main']
|
||||||
|
@ -263,10 +269,8 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(app.permissions)
|
|
||||||
this.info = {
|
this.info = {
|
||||||
id: this.id,
|
id: this.id,
|
||||||
// FIXME permission
|
|
||||||
label: mainPermission.label,
|
label: mainPermission.label,
|
||||||
description: app.description,
|
description: app.description,
|
||||||
version: app.version,
|
version: app.version,
|
||||||
|
@ -280,22 +284,18 @@ export default {
|
||||||
path: app.settings.path.slice(1)
|
path: app.settings.path.slice(1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// FIXME permission
|
|
||||||
this.form = form
|
this.form = form
|
||||||
this.app = {
|
this.app = {
|
||||||
domain: app.settings.domain,
|
domain: app.settings.domain,
|
||||||
supports_change_url: app.supports_change_url,
|
supports_change_url: app.supports_change_url,
|
||||||
// FIXME permission
|
|
||||||
permissions
|
permissions
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
this.$store.dispatch('FETCH', { uri: 'domains' })
|
|
||||||
},
|
},
|
||||||
|
|
||||||
changeLabel (permName, data) {
|
changeLabel (permName, data) {
|
||||||
data.show_tile = data.show_tile ? 'True' : 'False'
|
data.show_tile = data.show_tile ? 'True' : 'False'
|
||||||
console.log(permName, data)
|
|
||||||
api.put('users/permissions/' + permName, data).then(this.fetchData)
|
api.put('users/permissions/' + permName, data).then(this.fetchData)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -1,72 +1,75 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="service-info">
|
<div class="service-info">
|
||||||
<div class="actions">
|
<!-- INFO CARD -->
|
||||||
<div class="buttons ml-auto">
|
|
||||||
<template v-if="status === 'running'">
|
|
||||||
<b-button
|
|
||||||
variant="warning"
|
|
||||||
@click="action = 'restart'" v-b-modal.action-confirm-modal
|
|
||||||
>
|
|
||||||
<icon iname="refresh" /> {{ $t('restart') }}
|
|
||||||
</b-button>
|
|
||||||
<b-button
|
|
||||||
variant="danger" :disabled="critical"
|
|
||||||
@click="action = 'stop'" v-b-modal.action-confirm-modal
|
|
||||||
>
|
|
||||||
<icon iname="warning" /> {{ $t('stop') }}
|
|
||||||
</b-button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<b-button
|
|
||||||
variant="success"
|
|
||||||
@click="action = 'start'" v-b-modal.action-confirm-modal
|
|
||||||
>
|
|
||||||
<icon iname="play" /> {{ $t('start') }}
|
|
||||||
</b-button>
|
|
||||||
</template>
|
|
||||||
<b-button @click="shareLogs">
|
|
||||||
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
|
|
||||||
</b-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<b-card>
|
<b-card>
|
||||||
<template v-slot:header>
|
<template v-slot:header>
|
||||||
<h2><icon iname="info-circle" /> {{ name }}</h2>
|
<div class="d-sm-flex">
|
||||||
|
<h2><icon iname="info-circle" /> {{ name }}</h2>
|
||||||
|
<div class="ml-auto mt-2 mt-sm-0">
|
||||||
|
<template v-if="status === 'running'">
|
||||||
|
<b-button variant="warning" @click="action = 'restart'" v-b-modal.action-confirm-modal>
|
||||||
|
<icon iname="refresh" /> {{ $t('restart') }}
|
||||||
|
</b-button>
|
||||||
|
<b-button
|
||||||
|
v-if="!critical" variant="danger" class="ml-2"
|
||||||
|
@click="action = 'stop'" v-b-modal.action-confirm-modal
|
||||||
|
>
|
||||||
|
<icon iname="warning" /> {{ $t('stop') }}
|
||||||
|
</b-button>
|
||||||
|
</template>
|
||||||
|
<b-button
|
||||||
|
v-else
|
||||||
|
variant="success" @click="action = 'start'" v-b-modal.action-confirm-modal
|
||||||
|
>
|
||||||
|
<icon iname="play" /> {{ $t('start') }}
|
||||||
|
</b-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<dl>
|
<b-row no-gutters class="row-line">
|
||||||
<dt v-t="'description'" />
|
<b-col cols="auto" md="3"><strong v-t="'description'" /></b-col>
|
||||||
<dd>{{ description }}</dd>
|
<b-col>{{ description }}</b-col>
|
||||||
<hr>
|
</b-row>
|
||||||
|
<b-row no-gutters class="row-line">
|
||||||
<dt v-t="'status'" />
|
<b-col cols="auto" md="3"><strong v-t="'status'" /></b-col>
|
||||||
<dd>
|
<b-col>
|
||||||
<span :class="status === 'running' ? 'text-success' : 'text-danger'">
|
<span :class="status === 'running' ? 'text-success' : 'text-danger'">
|
||||||
<icon :iname="status === 'running' ? 'check-circle' : 'times'" />
|
<icon :iname="status === 'running' ? 'check-circle' : 'times'" />
|
||||||
{{ status }}
|
{{ status }}
|
||||||
</span>
|
</span>
|
||||||
{{ $t('since') }} {{ last_state_change | distanceToNow }}
|
{{ $t('since') }} {{ last_state_change | distanceToNow }}
|
||||||
</dd>
|
</b-col>
|
||||||
<hr>
|
</b-row>
|
||||||
|
<b-row no-gutters class="row-line">
|
||||||
<dt v-t="'service_start_on_boot'" />
|
<b-col cols="auto" md="3"><strong v-t="'service_start_on_boot'" /></b-col>
|
||||||
<dd :class="start_on_boot === 'enabled' ? 'text-success' : 'text-danger'">
|
<b-col>
|
||||||
{{ $t(start_on_boot) }}
|
<span :class="start_on_boot === 'enabled' ? 'text-success' : 'text-danger'">
|
||||||
</dd>
|
{{ $t(start_on_boot) }}
|
||||||
<hr>
|
</span>
|
||||||
|
</b-col>
|
||||||
<dt v-t="'configuration'" />
|
</b-row>
|
||||||
<dd :class="{ 'text-success': configuration === 'valid', 'text-danger': configuration === 'broken' }">
|
<b-row no-gutters class="row-line">
|
||||||
{{ $t(configuration) }}
|
<b-col cols="auto" md="3"><strong v-t="'configuration'" /></b-col>
|
||||||
</dd>
|
<b-col>
|
||||||
</dl>
|
<span :class="{ 'text-success': configuration === 'valid', 'text-danger': configuration === 'broken' }">
|
||||||
|
{{ $t(configuration) }}
|
||||||
|
</span>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
</b-card>
|
</b-card>
|
||||||
|
|
||||||
|
<!-- LOGS CARD -->
|
||||||
<b-card>
|
<b-card>
|
||||||
<template v-slot:header>
|
<template v-slot:header>
|
||||||
<h2><icon iname="book" /> {{ $t('logs') }}</h2>
|
<div class="d-sm-flex justify-content-sm-between">
|
||||||
|
<h2><icon iname="book" /> {{ $t('logs') }}</h2>
|
||||||
|
<b-button variant="success" @click="shareLogs" class="mt-2 mt-sm-0">
|
||||||
|
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
|
||||||
|
</b-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div class="w-100" v-for="{ filename, content} in logs" :key="filename">
|
<div class="w-100" v-for="{ filename, content} in logs" :key="filename">
|
||||||
<h3>{{ filename }}</h3>
|
<h3>{{ filename }}</h3>
|
||||||
<pre class="bg-light p-3"><code>{{ content }}</code></pre>
|
<pre class="bg-light p-3"><code>{{ content }}</code></pre>
|
||||||
|
@ -152,7 +155,7 @@ export default {
|
||||||
: 'services/' + this.name
|
: 'services/' + this.name
|
||||||
|
|
||||||
// FIXME API doesn't return anything to the PUT so => json err
|
// FIXME API doesn't return anything to the PUT so => json err
|
||||||
api.fetch(method, uri).then(() => {
|
api[method](uri).then(() => {
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
|
@ -10,9 +10,8 @@
|
||||||
v-for="(value, prop) in info" :key="prop"
|
v-for="(value, prop) in info" :key="prop"
|
||||||
no-gutters class="row-line"
|
no-gutters class="row-line"
|
||||||
>
|
>
|
||||||
<b-col cols="5" md="3" xl="3">
|
<b-col cols="auto" md="3">
|
||||||
<strong>{{ $t('logs_' + prop) }}</strong>
|
<strong>{{ $t('logs_' + prop) }}</strong>
|
||||||
<span class="sep" />
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col>
|
<b-col>
|
||||||
<span v-if="prop.endsWith('_at')">{{ value | readableDate }}</span>
|
<span v-if="prop.endsWith('_at')">{{ value | readableDate }}</span>
|
||||||
|
@ -41,19 +40,25 @@
|
||||||
<template v-slot:header>
|
<template v-slot:header>
|
||||||
<div class="d-sm-flex justify-content-sm-between">
|
<div class="d-sm-flex justify-content-sm-between">
|
||||||
<h2><icon iname="file-text" /> {{ $t('logs') }}</h2>
|
<h2><icon iname="file-text" /> {{ $t('logs') }}</h2>
|
||||||
<b-button @click="shareLogs">
|
<b-button @click="shareLogs" variant="success">
|
||||||
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
|
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
|
||||||
</b-button>
|
</b-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<b-button
|
<b-button
|
||||||
v-if="moreLogsAvailable"
|
v-if="moreLogsAvailable"
|
||||||
variant="info" class="w-100 rounded-0"
|
variant="white" class="w-100 rounded-0"
|
||||||
@click="fetchData"
|
@click="fetchData"
|
||||||
>
|
>
|
||||||
<icon iname="plus" /> {{ $t('logs_more') }}
|
<icon iname="plus" /> {{ $t('logs_more') }}
|
||||||
</b-button>
|
</b-button>
|
||||||
|
|
||||||
<pre><code v-html="logs" /></pre>
|
<pre><code v-html="logs" /></pre>
|
||||||
|
|
||||||
|
<b-button @click="shareLogs" variant="success" class="w-100 rounded-0">
|
||||||
|
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
|
||||||
|
</b-button>
|
||||||
</b-card>
|
</b-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Add table
Reference in a new issue