mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 16:32:15 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,36 +1,28 @@
|
||||
<template>
|
||||
<div :class="{'mb-7': !isLast}" class="sm:flex justify-between sm:space-x-8 sm:space-x-2 sm:space-y-0 space-y-4 w-full">
|
||||
<div :class="{ 'mb-7': !isLast }" class="w-full justify-between space-y-4 sm:flex sm:space-x-8 sm:space-x-2 sm:space-y-0">
|
||||
<!--Label for input-->
|
||||
<div class="leading-5">
|
||||
<label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
|
||||
|
||||
<!--Label for input-->
|
||||
<div class="leading-5">
|
||||
<label class="text-sm font-bold dark:text-gray-200 text-gray-700 mb-1.5 block">
|
||||
{{ title }}:
|
||||
</label>
|
||||
<!--Input Description-->
|
||||
<span v-if="description" class="block text-xs leading-4 text-gray-500" v-html="description"></span>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></span>
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Form element-->
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<!--Form element-->
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppInputButton',
|
||||
props: [
|
||||
'description',
|
||||
'isLast',
|
||||
'title',
|
||||
'error',
|
||||
]
|
||||
}
|
||||
</script>
|
||||
export default {
|
||||
name: 'AppInputButton',
|
||||
props: ['description', 'isLast', 'title', 'error'],
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,36 +1,28 @@
|
||||
<template>
|
||||
<div :class="{'mb-7': !isLast}" class="flex items-center justify-between sm:space-x-8 space-x-2 w-full">
|
||||
<div :class="{ 'mb-7': !isLast }" class="flex w-full items-center justify-between space-x-2 sm:space-x-8">
|
||||
<!--Label for input-->
|
||||
<div class="leading-5">
|
||||
<label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
|
||||
|
||||
<!--Label for input-->
|
||||
<div class="leading-5">
|
||||
<label class="text-sm font-bold dark:text-gray-200 text-gray-700 mb-1.5 block">
|
||||
{{ title }}:
|
||||
</label>
|
||||
<!--Input Description-->
|
||||
<span v-if="description" class="block text-xs leading-4 text-gray-500" v-html="description"></span>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></span>
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Form element-->
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<!--Form element-->
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppInputSwitch',
|
||||
props: [
|
||||
'description',
|
||||
'isLast',
|
||||
'title',
|
||||
'error',
|
||||
]
|
||||
}
|
||||
</script>
|
||||
export default {
|
||||
name: 'AppInputSwitch',
|
||||
props: ['description', 'isLast', 'title', 'error'],
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,32 +1,24 @@
|
||||
<template>
|
||||
<div :class="{'mb-7': !isLast}">
|
||||
<div :class="{ 'mb-7': !isLast }">
|
||||
<!--Label for input-->
|
||||
<label v-if="title" class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
|
||||
|
||||
<!--Label for input-->
|
||||
<label v-if="title" class="text-sm font-bold dark:text-gray-200 text-gray-700 mb-1.5 block">
|
||||
{{ title }}:
|
||||
</label>
|
||||
<!--Form element-->
|
||||
<slot></slot>
|
||||
|
||||
<!--Form element-->
|
||||
<slot></slot>
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="pt-2 text-xs text-red-800">
|
||||
{{ error }}
|
||||
</span>
|
||||
|
||||
<!--Input Description-->
|
||||
<span v-if="error" class="text-red-800 pt-2 text-xs">
|
||||
{{ error }}
|
||||
</span>
|
||||
|
||||
<!--Input Description-->
|
||||
<small v-if="description" class="text-xs text-gray-500 pt-2 leading-4 block" v-html="description"></small>
|
||||
</div>
|
||||
<!--Input Description-->
|
||||
<small v-if="description" class="block pt-2 text-xs leading-4 text-gray-500" v-html="description"></small>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppInputText',
|
||||
props: [
|
||||
'description',
|
||||
'isLast',
|
||||
'title',
|
||||
'error',
|
||||
]
|
||||
}
|
||||
</script>
|
||||
export default {
|
||||
name: 'AppInputText',
|
||||
props: ['description', 'isLast', 'title', 'error'],
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,45 +1,50 @@
|
||||
<template>
|
||||
<div id="card-navigation" style="height: 62px" class="mb-7">
|
||||
<div :class="{'fixed top-0 left-0 right-0 px-6 rounded-none backdrop-filter backdrop-blur-lg dark:bg-dark-foreground bg-white bg-opacity-50 z-10': fixedNav}">
|
||||
<div class="whitespace-nowrap overflow-x-auto">
|
||||
<router-link
|
||||
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
|
||||
:class="{'text-theme': routeName === page.route, 'dark:text-gray-100 text-gray-600': routeName !== page.route}"
|
||||
v-for="(page, i) in pages"
|
||||
:to="{name: page.route}"
|
||||
:key="i"
|
||||
replace
|
||||
>
|
||||
{{ page.title }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="card-navigation" style="height: 62px" class="mb-7">
|
||||
<div
|
||||
:class="{
|
||||
'fixed top-0 left-0 right-0 z-10 rounded-none bg-white bg-opacity-50 px-6 backdrop-blur-lg backdrop-filter dark:bg-dark-foreground': fixedNav,
|
||||
}"
|
||||
>
|
||||
<div class="overflow-x-auto whitespace-nowrap">
|
||||
<router-link
|
||||
class="border-bottom-theme inline-block border-b-2 border-transparent px-4 py-5 text-sm font-bold"
|
||||
:class="{
|
||||
'text-theme': routeName === page.route,
|
||||
'text-gray-600 dark:text-gray-100': routeName !== page.route,
|
||||
}"
|
||||
v-for="(page, i) in pages"
|
||||
:to="{ name: page.route }"
|
||||
:key="i"
|
||||
replace
|
||||
>
|
||||
{{ page.title }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CardNavigation',
|
||||
props: [
|
||||
'pages'
|
||||
],
|
||||
computed: {
|
||||
routeName() {
|
||||
return this.$route.name
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fixedNav: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// Handle fixed mobile navigation
|
||||
window.addEventListener("scroll", () => {
|
||||
let card = document.getElementById('card-navigation')
|
||||
name: 'CardNavigation',
|
||||
props: ['pages'],
|
||||
computed: {
|
||||
routeName() {
|
||||
return this.$route.name
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fixedNav: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// Handle fixed mobile navigation
|
||||
window.addEventListener('scroll', () => {
|
||||
let card = document.getElementById('card-navigation')
|
||||
|
||||
this.fixedNav = card.getBoundingClientRect().top < 0;
|
||||
});
|
||||
}
|
||||
this.fixedNav = card.getBoundingClientRect().top < 0
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -8,61 +8,57 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DotLabel',
|
||||
props: [
|
||||
'color',
|
||||
'title',
|
||||
],
|
||||
}
|
||||
export default {
|
||||
name: 'DotLabel',
|
||||
props: ['color', 'title'],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label-dot {
|
||||
margin-right: 10px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
flex: none;
|
||||
|
||||
.label-dot {
|
||||
margin-right: 10px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
flex: none;
|
||||
|
||||
&.success {
|
||||
background: #0ABB87;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: #fd397a;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: #ffb822;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: #5578eb;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: red;
|
||||
}
|
||||
|
||||
&.purple {
|
||||
background: #9d66fe;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #e1e1ef;
|
||||
}
|
||||
&.success {
|
||||
background: #0abb87;
|
||||
}
|
||||
|
||||
.label-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
&.danger {
|
||||
background: #fd397a;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: #ffb822;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: #5578eb;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: red;
|
||||
}
|
||||
|
||||
&.purple {
|
||||
background: #9d66fe;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #e1e1ef;
|
||||
}
|
||||
}
|
||||
|
||||
.label-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,91 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center mb-4 rounded dark:bg-2x-dark-foreground bg-light-300 h-2.5">
|
||||
<div v-for="(chart, i) in data" :key="i" :style="{width: (chart.progress > 1 ? chart.progress : 0) + '%'}" class="chart-wrapper">
|
||||
<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
|
||||
<div class="mb-4 flex h-2.5 items-center rounded bg-light-300 dark:bg-2x-dark-foreground">
|
||||
<div
|
||||
v-for="(chart, i) in data"
|
||||
:key="i"
|
||||
:style="{
|
||||
width: (chart.progress > 1 ? chart.progress : 0) + '%',
|
||||
}"
|
||||
class="chart-wrapper"
|
||||
>
|
||||
<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
|
||||
|
||||
<!--Only singe line-->
|
||||
<span
|
||||
v-if="data.length === 1"
|
||||
:class="[{
|
||||
'border-r-2 dark:border-gray-800 border-white rounded-tl-lg rounded-bl-lg': chart.progress < 100,
|
||||
'border-none rounded-lg': chart.progress >= 100
|
||||
}, chart.color]"
|
||||
class="chart-progress w-full h-2.5 block"
|
||||
>
|
||||
<!--Only singe line-->
|
||||
<span
|
||||
v-if="data.length === 1"
|
||||
:class="[
|
||||
{
|
||||
'rounded-tl-lg rounded-bl-lg border-r-2 border-white dark:border-gray-800': chart.progress < 100,
|
||||
'rounded-lg border-none': chart.progress >= 100,
|
||||
},
|
||||
chart.color,
|
||||
]"
|
||||
class="chart-progress block h-2.5 w-full"
|
||||
>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
|
||||
<!--Multiple line-->
|
||||
<span
|
||||
v-if="data.length > 1 && chart.progress > 0"
|
||||
:class="[{
|
||||
'rounded-tl-lg rounded-bl-lg border-r-2 dark:border-gray-800 border-white': i === 0,
|
||||
'border-r-2 dark:border-gray-800 border-white': i < (data.length - 1),
|
||||
'rounded-tr-lg rounded-br-lg': i === (data.length - 1),
|
||||
}, chart.color]"
|
||||
class="chart-progress w-full h-2.5 block"
|
||||
></span>
|
||||
<!--Multiple line-->
|
||||
<span
|
||||
v-if="data.length > 1 && chart.progress > 0"
|
||||
:class="[
|
||||
{
|
||||
'rounded-tl-lg rounded-bl-lg border-r-2 border-white dark:border-gray-800': i === 0,
|
||||
'border-r-2 border-white dark:border-gray-800': i < data.length - 1,
|
||||
'rounded-tr-lg rounded-br-lg': i === data.length - 1,
|
||||
},
|
||||
chart.color,
|
||||
]"
|
||||
class="chart-progress block h-2.5 w-full"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="flex items-center w-full overflow-x-auto">
|
||||
<footer class="flex w-full items-center overflow-x-auto">
|
||||
<DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" class="mr-5" />
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DotLabel from "./DotLabel";
|
||||
import DotLabel from './DotLabel'
|
||||
|
||||
export default {
|
||||
name: 'ProgressLine',
|
||||
props: [
|
||||
'data',
|
||||
],
|
||||
components: {
|
||||
DotLabel,
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'ProgressLine',
|
||||
props: ['data'],
|
||||
components: {
|
||||
DotLabel,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-progress {
|
||||
&.success {
|
||||
background: #0ABB87;
|
||||
box-shadow: 0 3px 10px rgba(#0ABB87, 0.5);
|
||||
}
|
||||
.chart-progress {
|
||||
&.success {
|
||||
background: #0abb87;
|
||||
box-shadow: 0 3px 10px rgba(#0abb87, 0.5);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: #fd397a;
|
||||
box-shadow: 0 3px 10px rgba(#fd397a, 0.5);
|
||||
}
|
||||
&.danger {
|
||||
background: #fd397a;
|
||||
box-shadow: 0 3px 10px rgba(#fd397a, 0.5);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: #ffb822;
|
||||
box-shadow: 0 3px 10px rgba(#ffb822, 0.5);
|
||||
}
|
||||
&.warning {
|
||||
background: #ffb822;
|
||||
box-shadow: 0 3px 10px rgba(#ffb822, 0.5);
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: #5578eb;
|
||||
box-shadow: 0 3px 10px rgba(#5578eb, 0.5);
|
||||
}
|
||||
&.info {
|
||||
background: #5578eb;
|
||||
box-shadow: 0 3px 10px rgba(#5578eb, 0.5);
|
||||
}
|
||||
|
||||
&.purple {
|
||||
background: #9d66fe;
|
||||
box-shadow: 0 3px 10px rgba(#9d66fe, 0.5);
|
||||
}
|
||||
&.purple {
|
||||
background: #9d66fe;
|
||||
box-shadow: 0 3px 10px rgba(#9d66fe, 0.5);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: #e1e1ef;
|
||||
box-shadow: 0 3px 10px rgba(#e1e1ef, 0.5);
|
||||
}
|
||||
}
|
||||
&.secondary {
|
||||
background: #e1e1ef;
|
||||
box-shadow: 0 3px 10px rgba(#e1e1ef, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.dark .chart-progress {
|
||||
&.secondary {
|
||||
background: #282A2F !important;
|
||||
box-shadow: 0 3px 10px rgba(#282A2F, 0.5) !important;
|
||||
}
|
||||
}
|
||||
.dark .chart-progress {
|
||||
&.secondary {
|
||||
background: #282a2f !important;
|
||||
box-shadow: 0 3px 10px rgba(#282a2f, 0.5) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,313 +1,339 @@
|
||||
<template>
|
||||
<DatatableWrapper @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="overflow-x-auto mt-6">
|
||||
<template slot-scope="{ row }">
|
||||
<!--Not a subscription-->
|
||||
<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
|
||||
<td class="py-3 md:pr-1 pr-3">
|
||||
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar
|
||||
:is-border="false"
|
||||
:size="44"
|
||||
:member="row.data.relationships.settings"
|
||||
/>
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ row.data.relationships.settings.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ row.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.used_formatted }}
|
||||
</span>
|
||||
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
|
||||
-
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3" v-if="config.storageLimit">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.capacity_formatted }}
|
||||
</span>
|
||||
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
|
||||
-
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:pl-1 pl-3 text-right">
|
||||
<div class="flex space-x-2 w-full justify-end">
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
|
||||
<Trash2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<DatatableWrapper @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="mt-6 overflow-x-auto">
|
||||
<template slot-scope="{ row }">
|
||||
<!--Not a subscription-->
|
||||
<tr v-if="config.subscriptionType === 'none'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
|
||||
<td class="py-3 pr-3 md:pr-1">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'UserDetail',
|
||||
params: { id: row.data.id },
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
|
||||
{{ row.data.relationships.settings.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs text-gray-600 dark:text-gray-500">
|
||||
{{ row.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.used_formatted }}
|
||||
</span>
|
||||
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> - </span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1" v-if="config.storageLimit">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.capacity_formatted }}
|
||||
</span>
|
||||
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> - </span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="pl-3 text-right md:pl-1">
|
||||
<div class="flex w-full justify-end space-x-2">
|
||||
<router-link
|
||||
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-green-100 dark:bg-2x-dark-foreground"
|
||||
:to="{
|
||||
name: 'UserDetail',
|
||||
params: { id: row.data.id },
|
||||
}"
|
||||
>
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
<router-link
|
||||
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-red-100 dark:bg-2x-dark-foreground"
|
||||
:to="{
|
||||
name: 'UserDelete',
|
||||
params: { id: row.data.id },
|
||||
}"
|
||||
>
|
||||
<Trash2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!--Fixed subscription-->
|
||||
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
|
||||
<td class="py-3 md:pr-1 pr-3">
|
||||
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar
|
||||
:is-border="false"
|
||||
:size="44"
|
||||
:member="row.data.relationships.settings"
|
||||
/>
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ row.data.relationships.settings.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ row.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="md:px-1 px-3" v-if="config.isSaaS">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.used_formatted }}
|
||||
</span>
|
||||
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
|
||||
-
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3" v-if="config.storageLimit">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.capacity_formatted }}
|
||||
</span>
|
||||
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
|
||||
-
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:pl-1 pl-3 text-right">
|
||||
<div class="flex space-x-2 w-full justify-end">
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
|
||||
<Trash2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--Fixed subscription-->
|
||||
<tr v-if="config.subscriptionType === 'fixed'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
|
||||
<td class="py-3 pr-3 md:pr-1">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'UserDetail',
|
||||
params: { id: row.data.id },
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
|
||||
{{ row.data.relationships.settings.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs text-gray-600 dark:text-gray-500">
|
||||
{{ row.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="px-3 md:px-1" v-if="config.isSaaS">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.used_formatted }}
|
||||
</span>
|
||||
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> - </span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1" v-if="config.storageLimit">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.capacity_formatted }}
|
||||
</span>
|
||||
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> - </span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="pl-3 text-right md:pl-1">
|
||||
<div class="flex w-full justify-end space-x-2">
|
||||
<router-link
|
||||
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-green-100 dark:bg-2x-dark-foreground"
|
||||
:to="{
|
||||
name: 'UserDetail',
|
||||
params: { id: row.data.id },
|
||||
}"
|
||||
>
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
<router-link
|
||||
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-red-100 dark:bg-2x-dark-foreground"
|
||||
:to="{
|
||||
name: 'UserDelete',
|
||||
params: { id: row.data.id },
|
||||
}"
|
||||
>
|
||||
<Trash2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!--Metered subscription-->
|
||||
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
|
||||
<td class="py-3 md:pr-1 pr-3">
|
||||
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar
|
||||
:is-border="false"
|
||||
:size="44"
|
||||
:member="row.data.relationships.settings"
|
||||
/>
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ row.data.relationships.settings.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ row.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.meta.usages.featureEstimates.storage.usage }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.meta.usages.costEstimate }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:pl-1 pl-3 text-right">
|
||||
<div class="flex space-x-2 w-full justify-end">
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}">
|
||||
<Trash2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
<!--Metered subscription-->
|
||||
<tr v-if="config.subscriptionType === 'metered'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
|
||||
<td class="py-3 pr-3 md:pr-1">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'UserDetail',
|
||||
params: { id: row.data.id },
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
|
||||
{{ row.data.relationships.settings.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs text-gray-600 dark:text-gray-500">
|
||||
{{ row.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.meta.usages.featureEstimates.storage.usage }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.meta.usages.costEstimate }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="pl-3 text-right md:pl-1">
|
||||
<div class="flex w-full justify-end space-x-2">
|
||||
<router-link
|
||||
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-green-100 dark:bg-2x-dark-foreground"
|
||||
:to="{
|
||||
name: 'UserDetail',
|
||||
params: { id: row.data.id },
|
||||
}"
|
||||
>
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
<router-link
|
||||
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-red-100 dark:bg-2x-dark-foreground"
|
||||
:to="{
|
||||
name: 'UserDelete',
|
||||
params: { id: row.data.id },
|
||||
}"
|
||||
>
|
||||
<Trash2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DatatableCellImage from "../Others/Tables/DatatableCellImage";
|
||||
import DatatableWrapper from "../Others/Tables/DatatableWrapper";
|
||||
import ColorLabel from "../Others/ColorLabel";
|
||||
import {Trash2Icon, Edit2Icon} from "vue-feather-icons"
|
||||
import MemberAvatar from "../FilesView/MemberAvatar";
|
||||
import { mapGetters } from 'vuex'
|
||||
import DatatableCellImage from '../Others/Tables/DatatableCellImage'
|
||||
import DatatableWrapper from '../Others/Tables/DatatableWrapper'
|
||||
import ColorLabel from '../Others/ColorLabel'
|
||||
import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
|
||||
import MemberAvatar from '../FilesView/MemberAvatar'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'WidgetLatestRegistrations',
|
||||
props: [
|
||||
'icon',
|
||||
'title'
|
||||
],
|
||||
components: {
|
||||
DatatableCellImage,
|
||||
DatatableWrapper,
|
||||
MemberAvatar,
|
||||
Trash2Icon,
|
||||
ColorLabel,
|
||||
Edit2Icon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config',
|
||||
]),
|
||||
columns() {
|
||||
return {
|
||||
metered: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'email',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'role',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: this.$t('Billing Est.'),
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
sortable: false
|
||||
},
|
||||
],
|
||||
fixed: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'email',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'role',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.plan'),
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: this.$t('Max Storage'),
|
||||
sortable: false,
|
||||
hidden: ! this.config.storageLimit,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
sortable: false
|
||||
},
|
||||
],
|
||||
none: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'email',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'role',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: this.$t('Max Storage'),
|
||||
sortable: false,
|
||||
hidden: ! this.config.storageLimit,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
sortable: false
|
||||
},
|
||||
],
|
||||
}[this.config.subscriptionType]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
export default {
|
||||
name: 'WidgetLatestRegistrations',
|
||||
props: ['icon', 'title'],
|
||||
components: {
|
||||
DatatableCellImage,
|
||||
DatatableWrapper,
|
||||
MemberAvatar,
|
||||
Trash2Icon,
|
||||
ColorLabel,
|
||||
Edit2Icon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
columns() {
|
||||
return {
|
||||
isLoading: false,
|
||||
}
|
||||
metered: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'email',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'role',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: this.$t('Billing Est.'),
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'created_at',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
sortable: false,
|
||||
},
|
||||
],
|
||||
fixed: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'email',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'role',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.plan'),
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: this.$t('Max Storage'),
|
||||
sortable: false,
|
||||
hidden: !this.config.storageLimit,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'created_at',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
sortable: false,
|
||||
},
|
||||
],
|
||||
none: [
|
||||
{
|
||||
label: this.$t('admin_page_user.table.name'),
|
||||
field: 'email',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.role'),
|
||||
field: 'role',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: this.$t('Max Storage'),
|
||||
sortable: false,
|
||||
hidden: !this.config.storageLimit,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.created_at'),
|
||||
field: 'created_at',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
sortable: false,
|
||||
},
|
||||
],
|
||||
}[this.config.subscriptionType]
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,135 +1,122 @@
|
||||
<template>
|
||||
<DatatableWrapper
|
||||
api="/api/admin/dashboard/transactions"
|
||||
:columns="columns"
|
||||
class="overflow-x-auto"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
|
||||
<td class="py-5 md:pr-1 pr-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.note }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<div v-if="row.data.relationships.user" class="flex items-center">
|
||||
<MemberAvatar
|
||||
:is-border="false"
|
||||
:size="36"
|
||||
:member="row.data.relationships.user"
|
||||
/>
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ row.data.relationships.user.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ row.data.relationships.user.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
|
||||
{{ $t('User was deleted') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
|
||||
{{ row.data.attributes.status }}
|
||||
</ColorLabel>
|
||||
<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
|
||||
{{ row.data.attributes.type }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
|
||||
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:pl-1 pl-3">
|
||||
<div class="text-right md:w-full w-32">
|
||||
<img class="w-32 md:inline-block" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<DatatableWrapper api="/api/admin/dashboard/transactions" :columns="columns" class="overflow-x-auto">
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
|
||||
<td class="py-5 pr-3 md:pr-1">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.note }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<div v-if="row.data.relationships.user" class="flex items-center">
|
||||
<MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
|
||||
<div class="ml-3 pr-10">
|
||||
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
|
||||
{{ row.data.relationships.user.data.attributes.name }}
|
||||
</b>
|
||||
<span class="block text-xs text-gray-600 dark:text-gray-500">
|
||||
{{ row.data.relationships.user.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="!row.data.relationships.user" class="text-xs font-bold text-gray-500">
|
||||
{{ $t('User was deleted') }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
|
||||
{{ row.data.attributes.status }}
|
||||
</ColorLabel>
|
||||
<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
|
||||
{{ row.data.attributes.type }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
|
||||
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 md:px-1">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="pl-3 md:pl-1">
|
||||
<div class="w-32 text-right md:w-full">
|
||||
<img class="w-32 md:inline-block" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<!--Empty page-->
|
||||
<template v-slot:empty-page>
|
||||
<InfoBox style="margin-bottom: 0">
|
||||
<p>{{ $t("There aren't any transactions.") }}</p>
|
||||
</InfoBox>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
<!--Empty page-->
|
||||
<template v-slot:empty-page>
|
||||
<InfoBox style="margin-bottom: 0">
|
||||
<p>{{ $t("There aren't any transactions.") }}</p>
|
||||
</InfoBox>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DatatableCellImage from "../Others/Tables/DatatableCellImage";
|
||||
import DatatableWrapper from "../Others/Tables/DatatableWrapper";
|
||||
import ColorLabel from "../Others/ColorLabel";
|
||||
import {Trash2Icon, Edit2Icon} from "vue-feather-icons"
|
||||
import MemberAvatar from "../FilesView/MemberAvatar"
|
||||
import InfoBox from "../Others/Forms/InfoBox"
|
||||
import { mapGetters } from 'vuex'
|
||||
import DatatableCellImage from '../Others/Tables/DatatableCellImage'
|
||||
import DatatableWrapper from '../Others/Tables/DatatableWrapper'
|
||||
import ColorLabel from '../Others/ColorLabel'
|
||||
import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
|
||||
import MemberAvatar from '../FilesView/MemberAvatar'
|
||||
import InfoBox from '../Others/Forms/InfoBox'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'WidgetLatestTransactions',
|
||||
props: [
|
||||
'icon',
|
||||
'title'
|
||||
],
|
||||
components: {
|
||||
DatatableCellImage,
|
||||
DatatableWrapper,
|
||||
MemberAvatar,
|
||||
Trash2Icon,
|
||||
ColorLabel,
|
||||
Edit2Icon,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
label: this.$t('Note'),
|
||||
field: 'note',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('User'),
|
||||
field: 'user_id',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Status'),
|
||||
field: 'status',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_invoices.table.total'),
|
||||
field: 'amount',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Payed At'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Service'),
|
||||
field: 'driver',
|
||||
sortable: true
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: 'WidgetLatestTransactions',
|
||||
props: ['icon', 'title'],
|
||||
components: {
|
||||
DatatableCellImage,
|
||||
DatatableWrapper,
|
||||
MemberAvatar,
|
||||
Trash2Icon,
|
||||
ColorLabel,
|
||||
Edit2Icon,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
label: this.$t('Note'),
|
||||
field: 'note',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('User'),
|
||||
field: 'user_id',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('Status'),
|
||||
field: 'status',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_invoices.table.total'),
|
||||
field: 'amount',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('Payed At'),
|
||||
field: 'created_at',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: this.$t('Service'),
|
||||
field: 'driver',
|
||||
sortable: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="widget-card w-full">
|
||||
<div class="widget-content dark:bg-dark-foreground bg-white">
|
||||
<div class="widget-content bg-white dark:bg-dark-foreground">
|
||||
<div class="flex items-center">
|
||||
<users-icon v-if="icon === 'users'" size="16" class="vue-feather text-theme mr-3 "/>
|
||||
<star-icon v-if="icon === 'star'" size="16" class="vue-feather text-theme mr-3 "/>
|
||||
<hard-drive-icon v-if="icon === 'hard-drive'" size="16" class="vue-feather text-theme mr-3 "/>
|
||||
<b class="font-bold text-base">
|
||||
{{ title }}
|
||||
</b>
|
||||
<users-icon v-if="icon === 'users'" size="16" class="vue-feather text-theme mr-3" />
|
||||
<star-icon v-if="icon === 'star'" size="16" class="vue-feather text-theme mr-3" />
|
||||
<hard-drive-icon v-if="icon === 'hard-drive'" size="16" class="vue-feather text-theme mr-3" />
|
||||
<b class="text-base font-bold">
|
||||
{{ title }}
|
||||
</b>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
@@ -15,16 +15,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UsersIcon, StarIcon, HardDriveIcon, ChevronRightIcon } from 'vue-feather-icons'
|
||||
import { UsersIcon, StarIcon, HardDriveIcon, ChevronRightIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'WidgetWrapper',
|
||||
props: ['icon', 'title'],
|
||||
components: {
|
||||
ChevronRightIcon,
|
||||
HardDriveIcon,
|
||||
StarIcon,
|
||||
UsersIcon
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'WidgetWrapper',
|
||||
props: ['icon', 'title'],
|
||||
components: {
|
||||
ChevronRightIcon,
|
||||
HardDriveIcon,
|
||||
StarIcon,
|
||||
UsersIcon,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user