Compare commits
2 commits
c841489fe4
...
8ff15b1e67
Author | SHA1 | Date | |
---|---|---|---|
|
8ff15b1e67 | ||
|
3d6f27ef80 |
|
@ -285,7 +285,6 @@ class PluginController extends AbstractController
|
|||
foreach ($plugins as $plugin) {
|
||||
$plugin->setDateExpire($jdate->jdate('Y/n/d', $plugin->getDateExpire()));
|
||||
$plugin->setDateSubmit($jdate->jdate('Y/n/d', $plugin->getDateSubmit()));
|
||||
$plugin->setPrice(number_format($plugin->getPrice()));
|
||||
}
|
||||
|
||||
return $this->json($plugins);
|
||||
|
|
|
@ -1,83 +1,343 @@
|
|||
<script>
|
||||
import {defineComponent, ref} from 'vue'
|
||||
import axios from "axios";
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import axios from "axios"
|
||||
|
||||
export default defineComponent({
|
||||
name: "plugin-my",
|
||||
data: ()=>{return{
|
||||
searchValue: '',
|
||||
loading : ref(true),
|
||||
items:[],
|
||||
headers: [
|
||||
{ text: "افزونه", value: "des"},
|
||||
{ text: "تاریخ ایجاد", value: "dateSubmit", sortable: true},
|
||||
{ text: "تاریخ اعتبار", value: "dateExpire", sortable: true},
|
||||
{ text: "وضعیت", value: "status", sortable: true},
|
||||
{ text: "قیمت (تومان)", value: "price", sortable: true},
|
||||
]
|
||||
}},
|
||||
methods:{
|
||||
loadData(){
|
||||
axios.post('/api/plugin/get/paids').then((response)=>{
|
||||
this.items = response.data;
|
||||
this.loading = false;
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
const searchValue = ref('')
|
||||
const loading = ref(true)
|
||||
const items = ref([])
|
||||
const selectedFilter = ref('all') // 'all', 'success', 'failed'
|
||||
|
||||
const headers = [
|
||||
{ title: "افزونه", key: "des", sortable: true },
|
||||
{ title: "تاریخ ایجاد", key: "dateSubmit", sortable: true },
|
||||
{ title: "تاریخ اعتبار", key: "dateExpire", sortable: true },
|
||||
{ title: "وضعیت", key: "status", sortable: true },
|
||||
{ title: "قیمت (تومان)", key: "price", sortable: true, align: 'end' },
|
||||
]
|
||||
|
||||
// Computed properties for filtered data
|
||||
const filteredItems = computed(() => {
|
||||
let filtered = items.value
|
||||
|
||||
// Filter by status
|
||||
if (selectedFilter.value === 'success') {
|
||||
filtered = filtered.filter(item => item.status == 100)
|
||||
} else if (selectedFilter.value === 'failed') {
|
||||
filtered = filtered.filter(item => item.status != 100)
|
||||
}
|
||||
|
||||
// Filter by search
|
||||
if (searchValue.value) {
|
||||
filtered = filtered.filter(item =>
|
||||
item.des?.toLowerCase().includes(searchValue.value.toLowerCase()) ||
|
||||
item.dateSubmit?.includes(searchValue.value) ||
|
||||
item.dateExpire?.includes(searchValue.value) ||
|
||||
item.price?.toString().includes(searchValue.value)
|
||||
)
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
// Computed properties for summary counts
|
||||
const totalCount = computed(() => items.value.length)
|
||||
const successCount = computed(() => items.value.filter(item => item.status == 100).length)
|
||||
const failedCount = computed(() => items.value.filter(item => item.status != 100).length)
|
||||
|
||||
const loadData = () => {
|
||||
loading.value = true
|
||||
axios.post('/api/plugin/get/paids').then((response) => {
|
||||
items.value = response.data
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
return status == 100 ? 'success' : 'error'
|
||||
}
|
||||
|
||||
const getStatusText = (status) => {
|
||||
return status == 100 ? 'پرداخت شده' : 'پرداخت نشده'
|
||||
}
|
||||
|
||||
const formatPrice = (price) => {
|
||||
return new Intl.NumberFormat('fa-IR').format(price) + ' تومان'
|
||||
}
|
||||
|
||||
const setFilter = (filter) => {
|
||||
selectedFilter.value = filter
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="block block-content-full">
|
||||
<div id="fixed-header" class="block-header block-header-default bg-gray-light" >
|
||||
<h3 class="block-title text-primary-dark">
|
||||
<i class="fa fa-cog"></i>
|
||||
تاریخچه پرداختها
|
||||
</h3>
|
||||
<div class="block-options">
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-content pb-3">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 m-0 p-0">
|
||||
<div class="mb-1">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text"><i class="fa fa-search"></i></span>
|
||||
<input v-model="searchValue" class="form-control" type="text" placeholder="جست و جو ...">
|
||||
</div>
|
||||
</div>
|
||||
<EasyDataTable table-class-name="customize-table"
|
||||
multi-sort
|
||||
show-index
|
||||
alternating
|
||||
<!-- Toolbar -->
|
||||
<v-toolbar title="تاریخچه پرداختها" flat color="toolbar">
|
||||
<template v-slot:prepend>
|
||||
<v-btn icon @click="$router.back()" class="me-2 d-none d-md-flex" variant="text">
|
||||
<v-icon>mdi-arrow-right</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<v-btn icon variant="text" @click="loadData" :loading="loading">
|
||||
<v-icon>mdi-refresh</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-toolbar>
|
||||
|
||||
:search-value="searchValue"
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
theme-color="#1d90ff"
|
||||
header-text-direction="center"
|
||||
body-text-direction="center"
|
||||
rowsPerPageMessage="تعداد سطر"
|
||||
emptyMessage="اطلاعاتی برای نمایش وجود ندارد"
|
||||
rowsOfPageSeparatorMessage="از"
|
||||
:loading="loading"
|
||||
>
|
||||
|
||||
<template #item-status="{ status }">
|
||||
<span v-show="status == 100" class="text-success">پرداخت شده</span>
|
||||
<span v-show="status != 100" class="text-danger">پرداخت نشده</span>
|
||||
<!-- Main Content -->
|
||||
<v-container fluid class="pa-4">
|
||||
<!-- Summary Cards as Filters -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12" md="4">
|
||||
<v-card
|
||||
class="summary-card"
|
||||
elevation="2"
|
||||
rounded="lg"
|
||||
:class="{ 'selected-filter': selectedFilter === 'all' }"
|
||||
@click="setFilter('all')"
|
||||
style="cursor: pointer;"
|
||||
>
|
||||
<v-card-item>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="primary" size="48">
|
||||
<v-icon size="24" color="white">mdi-receipt</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
</EasyDataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<v-card-title class="text-h6">کل پرداختها</v-card-title>
|
||||
<v-card-subtitle>{{ totalCount }} مورد</v-card-subtitle>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-card
|
||||
class="summary-card"
|
||||
elevation="2"
|
||||
rounded="lg"
|
||||
:class="{ 'selected-filter': selectedFilter === 'success' }"
|
||||
@click="setFilter('success')"
|
||||
style="cursor: pointer;"
|
||||
>
|
||||
<v-card-item>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="success" size="48">
|
||||
<v-icon size="24" color="white">mdi-check-circle</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-card-title class="text-h6">پرداختهای موفق</v-card-title>
|
||||
<v-card-subtitle>{{ successCount }} مورد</v-card-subtitle>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-card
|
||||
class="summary-card"
|
||||
elevation="2"
|
||||
rounded="lg"
|
||||
:class="{ 'selected-filter': selectedFilter === 'failed' }"
|
||||
@click="setFilter('failed')"
|
||||
style="cursor: pointer;"
|
||||
>
|
||||
<v-card-item>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar color="error" size="48">
|
||||
<v-icon size="24" color="white">mdi-close-circle</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-card-title class="text-h6">پرداختهای ناموفق</v-card-title>
|
||||
<v-card-subtitle>{{ failedCount }} مورد</v-card-subtitle>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Search Bar - Full Width -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="searchValue"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
placeholder="جستجو در افزونهها، تاریخها یا قیمتها..."
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
hide-details
|
||||
clearable
|
||||
full-width
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Data Table -->
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2" rounded="lg">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="filteredItems"
|
||||
:loading="loading"
|
||||
hover
|
||||
class="elevation-0"
|
||||
:items-per-page="10"
|
||||
:items-per-page-options="[5, 10, 25, 50]"
|
||||
locale="fa"
|
||||
>
|
||||
<!-- Custom Status Column -->
|
||||
<template v-slot:item.status="{ item }">
|
||||
<v-chip
|
||||
:color="getStatusColor(item.status)"
|
||||
size="small"
|
||||
variant="flat"
|
||||
class="font-weight-medium"
|
||||
>
|
||||
<v-icon start size="small">
|
||||
{{ item.status == 100 ? 'mdi-check-circle' : 'mdi-close-circle' }}
|
||||
</v-icon>
|
||||
{{ getStatusText(item.status) }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<!-- Custom Price Column -->
|
||||
<template v-slot:item.price="{ item }">
|
||||
<span class="font-weight-medium text-primary">
|
||||
{{ formatPrice(item.price) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- Custom Date Columns -->
|
||||
<template v-slot:item.dateSubmit="{ item }">
|
||||
<div class="d-flex flex-column">
|
||||
<span class="text-body-2 font-weight-medium">{{ item.dateSubmit }}</span>
|
||||
<span class="text-caption text-grey">تاریخ ایجاد</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.dateExpire="{ item }">
|
||||
<div class="d-flex flex-column">
|
||||
<span class="text-body-2 font-weight-medium">{{ item.dateExpire }}</span>
|
||||
<span class="text-caption text-grey">تاریخ اعتبار</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Empty State -->
|
||||
<template v-slot:no-data>
|
||||
<div class="text-center pa-8">
|
||||
<v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-receipt-text</v-icon>
|
||||
<h3 class="text-h6 text-grey-darken-1 mb-2">هیچ پرداختی یافت نشد</h3>
|
||||
<p class="text-body-2 text-grey">
|
||||
{{ selectedFilter !== 'all' ? 'با فیلتر انتخاب شده هیچ پرداختی یافت نشد.' : 'در حال حاضر هیچ پرداختی در سیستم ثبت نشده است.' }}
|
||||
</p>
|
||||
<v-btn
|
||||
v-if="selectedFilter !== 'all'"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
class="mt-4"
|
||||
@click="setFilter('all')"
|
||||
>
|
||||
<v-icon start>mdi-filter-remove</v-icon>
|
||||
حذف فیلتر
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Loading State -->
|
||||
<template v-slot:loading>
|
||||
<v-skeleton-loader type="table-row@10" />
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.summary-card {
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(var(--v-theme-outline), 0.1);
|
||||
}
|
||||
|
||||
.summary-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.summary-card.selected-filter {
|
||||
border-color: rgba(var(--v-theme-primary), 0.5);
|
||||
background-color: rgba(var(--v-theme-primary), 0.05);
|
||||
box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.2) !important;
|
||||
}
|
||||
|
||||
.summary-card.selected-filter:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(var(--v-theme-primary), 0.3) !important;
|
||||
}
|
||||
|
||||
/* Custom table styles */
|
||||
:deep(.v-data-table) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.v-data-table__wrapper) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:deep(.v-data-table-header) {
|
||||
background-color: rgba(var(--v-theme-primary), 0.05);
|
||||
}
|
||||
|
||||
:deep(.v-data-table-header th) {
|
||||
font-weight: 600;
|
||||
color: rgba(var(--v-theme-on-surface), 0.87);
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
:deep(.v-data-table__tr:hover) {
|
||||
background-color: rgba(var(--v-theme-primary), 0.02);
|
||||
}
|
||||
|
||||
/* Center align all table cells */
|
||||
:deep(.v-data-table td) {
|
||||
text-align: center !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
:deep(.v-data-table th) {
|
||||
text-align: center !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
/* Center align specific content types */
|
||||
:deep(.v-data-table .v-chip) {
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:deep(.v-data-table .d-flex) {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.v-data-table .d-flex.flex-column) {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.summary-card .v-card-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
:deep(.v-data-table) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,68 +1,230 @@
|
|||
<script>
|
||||
import {defineComponent} from 'vue'
|
||||
import axios from "axios";
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import axios from "axios"
|
||||
|
||||
export default defineComponent({
|
||||
name: "plugin-my",
|
||||
data: ()=>{return {
|
||||
plugins:{}
|
||||
}},
|
||||
methods:{
|
||||
loadData(){
|
||||
axios.post('/api/plugin/get/actives').then((response)=>{
|
||||
this.plugins = response.data;
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData();
|
||||
}
|
||||
const plugins = ref([])
|
||||
const loading = ref(true)
|
||||
|
||||
const loadData = () => {
|
||||
loading.value = true
|
||||
axios.post('/api/plugin/get/actives').then((response) => {
|
||||
plugins.value = response.data
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="block block-content-full">
|
||||
<div id="fixed-header" class="block-header block-header-default bg-gray-light" >
|
||||
<h3 class="block-title text-primary-dark">
|
||||
<i class="fa fa-cog"></i>
|
||||
افزونههای فعال
|
||||
</h3>
|
||||
<div class="block-options">
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-content pb-3">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="bg-body-extra-light">
|
||||
<table class="table table-striped table-hover table-borderless table-vcenter">
|
||||
<tbody>
|
||||
<tr v-for="plugin in plugins">
|
||||
<td>
|
||||
<div class="d-sm-flex">
|
||||
<div class="ms-sm-2 me-sm-4 py-3">
|
||||
<a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="javascript:void(0)">
|
||||
<i class="fa fa-fw fa-plug-circle-plus"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="py-3">
|
||||
<RouterLink :to="'/acc/plugins/' + plugin.name + '/intro'" class="link-fx h4 mb-1 d-inline-block text-dark"> {{plugin.des}} </RouterLink>
|
||||
<div class="fs-sm fw-semibold text-muted mb-2"> تاریخ پایان اعتبار : {{plugin.dateExpire}} </div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toolbar -->
|
||||
<v-toolbar title="افزونههای فعال" flat color="toolbar">
|
||||
<template v-slot:prepend>
|
||||
<v-btn icon @click="$router.back()" class="me-2 d-none d-md-flex" variant="text">
|
||||
<v-icon>mdi-arrow-right</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<v-btn icon variant="text" @click="loadData" :loading="loading">
|
||||
<v-icon>mdi-refresh</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-toolbar>
|
||||
|
||||
<!-- Main Content -->
|
||||
<v-container fluid class="pa-4">
|
||||
<!-- Empty State -->
|
||||
<v-row v-if="!loading && plugins.length === 0">
|
||||
<v-col cols="12" class="text-center">
|
||||
<v-card class="pa-8" variant="outlined">
|
||||
<v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-power-plug-off</v-icon>
|
||||
<h3 class="text-h6 text-grey-darken-1 mb-2">هیچ افزونه فعالی یافت نشد</h3>
|
||||
<p class="text-body-2 text-grey">در حال حاضر هیچ افزونهای در سیستم شما فعال نیست.</p>
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
class="mt-4"
|
||||
to="/acc/store/plugin-world"
|
||||
>
|
||||
<v-icon start>mdi-store</v-icon>
|
||||
مشاهده افزونهها
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Plugins Grid -->
|
||||
<v-row v-else>
|
||||
<v-col
|
||||
v-for="plugin in plugins"
|
||||
:key="plugin.name"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
xl="3"
|
||||
>
|
||||
<v-card
|
||||
class="plugin-card mb-4"
|
||||
elevation="2"
|
||||
rounded="lg"
|
||||
hover
|
||||
:to="'/acc/plugins/' + plugin.name + '/intro'"
|
||||
>
|
||||
<!-- Plugin Header -->
|
||||
<v-card-item class="pb-0">
|
||||
<template v-slot:prepend>
|
||||
<v-avatar
|
||||
color="primary"
|
||||
size="48"
|
||||
class="me-3"
|
||||
>
|
||||
<v-icon size="24" color="white">mdi-power-plug</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
|
||||
<v-card-title class="text-h6 font-weight-bold">
|
||||
{{ plugin.des }}
|
||||
</v-card-title>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-chip
|
||||
color="success"
|
||||
size="small"
|
||||
variant="flat"
|
||||
class="ms-2"
|
||||
>
|
||||
<v-icon start size="small">mdi-check-circle</v-icon>
|
||||
فعال
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-card-item>
|
||||
|
||||
<!-- Plugin Content -->
|
||||
<v-card-text class="pt-0">
|
||||
<div class="d-flex align-center justify-space-between mb-3">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon color="warning" size="small" class="me-2">mdi-clock-outline</v-icon>
|
||||
<span class="text-body-2 text-grey-darken-1">تاریخ پایان اعتبار:</span>
|
||||
</div>
|
||||
<v-chip
|
||||
:color="getExpiryColor(plugin.dateExpire)"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
>
|
||||
{{ plugin.dateExpire }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- Plugin Features -->
|
||||
<v-row class="text-center py-2 bg-grey-lighten-5 rounded-lg">
|
||||
<v-col cols="6" class="border-e">
|
||||
<v-icon color="primary" size="small" class="me-1">mdi-shield-check</v-icon>
|
||||
<span class="text-caption">امن</span>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-icon color="primary" size="small" class="me-1">mdi-update</v-icon>
|
||||
<span class="text-caption">بهروزرسانی</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<!-- Plugin Actions -->
|
||||
<v-card-actions class="pt-0">
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="flat"
|
||||
block
|
||||
:to="'/acc/plugins/' + plugin.name + '/intro'"
|
||||
>
|
||||
<v-icon start>mdi-book-open-page-variant</v-icon>
|
||||
مشاهده جزئیات
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Loading State -->
|
||||
<v-row v-if="loading">
|
||||
<v-col cols="12" md="6" lg="4" xl="3" v-for="i in 6" :key="i">
|
||||
<v-card class="mb-4" elevation="2" rounded="lg">
|
||||
<v-card-item>
|
||||
<v-skeleton-loader type="avatar" class="me-3"></v-skeleton-loader>
|
||||
<v-skeleton-loader type="text" width="60%"></v-skeleton-loader>
|
||||
</v-card-item>
|
||||
<v-card-text>
|
||||
<v-skeleton-loader type="text" width="100%"></v-skeleton-loader>
|
||||
<v-skeleton-loader type="text" width="80%"></v-skeleton-loader>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-skeleton-loader type="button" width="100%"></v-skeleton-loader>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<script>
|
||||
// Helper function to determine expiry color
|
||||
const getExpiryColor = (dateExpire) => {
|
||||
if (!dateExpire) return 'grey'
|
||||
|
||||
const today = new Date()
|
||||
const expiryDate = new Date(dateExpire)
|
||||
const daysUntilExpiry = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24))
|
||||
|
||||
if (daysUntilExpiry < 0) return 'error'
|
||||
if (daysUntilExpiry <= 7) return 'warning'
|
||||
if (daysUntilExpiry <= 30) return 'orange'
|
||||
return 'success'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.plugin-card {
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(var(--v-theme-outline), 0.1);
|
||||
}
|
||||
|
||||
.plugin-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
|
||||
border-color: rgba(var(--v-theme-primary), 0.2);
|
||||
}
|
||||
|
||||
.plugin-card .v-card-item {
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.plugin-card .v-card-text {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.plugin-card .v-card-actions {
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
.border-e {
|
||||
border-right: 1px solid rgba(var(--v-theme-outline), 0.2);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.plugin-card .v-card-item {
|
||||
padding: 12px 12px 0 12px;
|
||||
}
|
||||
|
||||
.plugin-card .v-card-text {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.plugin-card .v-card-actions {
|
||||
padding: 0 12px 12px 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in a new issue