kavehhn/mbmanager-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
kavehhn
2025-04-15 12:16:17 +03:30
parent 57d328bbfe
commit 47de2bf54c
20 changed files with 1557 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/RecentSalesWidget.vue
+8 -7
View File
@@ -1,6 +1,7 @@
<script setup>
import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
import { BelongingService } from '@/service/BelongingService';
const products = ref(null);
@@ -9,26 +10,26 @@ function formatCurrency(value) {
}
onMounted(() => {
ProductService.getProductsSmall().then((data) => (products.value = data));
BelongingService.getAllBelongings().then((data) => (products.value = data));
});
</script>
<template>
<div class="card">
<div class="font-semibold text-xl mb-4">Recent Sales</div>
<div class="font-semibold text-xl mb-4">آخرین دارایی های افزوده شده</div>
<DataTable :value="products" :rows="5" :paginator="true" responsiveLayout="scroll">
<Column style="width: 15%" header="Image">
<template #body="slotProps">
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" width="50" class="shadow" />
<img :src="`${slotProps.data.mainImageUrl}`" :alt="slotProps.data.name" width="50" class="shadow" />
</template>
</Column>
<Column field="name" header="Name" :sortable="true" style="width: 35%"></Column>
<Column field="price" header="Price" :sortable="true" style="width: 35%">
<Column field="name" header="نام" :sortable="true" style="width: 35%"></Column>
<Column field="price" header="دسته بندی" :sortable="true" style="width: 35%">
<template #body="slotProps">
{{ formatCurrency(slotProps.data.price) }}
{{ slotProps.data.category.nativeName }}
</template>
</Column>
<Column style="width: 15%" header="View">
<Column style="width: 15%" header="نمایش">
<template #body>
<Button icon="pi pi-search" type="button" class="p-button-text"></Button>
</template>
src/components/dashboard/RevenueStreamWidget.vue
+23 -24
View File
@@ -11,32 +11,17 @@ function setChartData() {
const documentStyle = getComputedStyle(document.documentElement);
return {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
labels: ['زمین', 'ساختمان', 'خودرو', 'ارز'],
datasets: [
{
type: 'bar',
label: 'Subscriptions',
label: 'تعداد دارایی ها',
backgroundColor: documentStyle.getPropertyValue('--p-primary-400'),
data: [4000, 10000, 15000, 4000],
barThickness: 32
},
{
type: 'bar',
label: 'Advertising',
backgroundColor: documentStyle.getPropertyValue('--p-primary-300'),
data: [2100, 8400, 2400, 7500],
barThickness: 32
},
{
type: 'bar',
label: 'Affiliate',
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
data: [4100, 5200, 3400, 7400],
borderRadius: {
topLeft: 8,
topRight: 8
font: {
family: 'Estedad', // Set custom font for y-axis labels
size: 14 // Set font size
},
borderSkipped: true,
data: [18, 13, 5, 11],
barThickness: 32
}
]
@@ -55,7 +40,11 @@ function setChartOptions() {
x: {
stacked: true,
ticks: {
color: textMutedColor
color: textMutedColor,
font: {
family: 'Estedad', // Set custom font for y-axis labels
size: 14 // Set font size
}
},
grid: {
color: 'transparent',
@@ -65,7 +54,11 @@ function setChartOptions() {
y: {
stacked: true,
ticks: {
color: textMutedColor
color: textMutedColor,
font: {
family: 'Estedad', // Set custom font for y-axis labels
size: 14 // Set font size
}
},
grid: {
color: borderColor,
@@ -90,7 +83,13 @@ onMounted(() => {
<template>
<div class="card">
<div class="font-semibold text-xl mb-4">Revenue Stream</div>
<div class="font-semibold text-xl mb-4">تقسیم بندی دارایی ها</div>
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
</div>
</template>
<style>
.card {
font-family: 'Estedad', sans-serif !important;
}
</style>
src/components/dashboard/StatsWidget.vue
+6 -27
View File
@@ -3,60 +3,39 @@
<div class="card mb-0">
<div class="flex justify-between mb-4">
<div>
<span class="block text-muted-color font-medium mb-4">Orders</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
<span class="block text-muted-color font-medium mb-4">تعداد دارایی ها</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">100</div>
</div>
<div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
</div>
</div>
<span class="text-primary font-medium">24 new </span>
<span class="text-muted-color">since last visit</span>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0">
<div class="flex justify-between mb-4">
<div>
<span class="block text-muted-color font-medium mb-4">Revenue</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
<span class="block text-muted-color font-medium mb-4">ارز ها</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">2800 دلار</div>
</div>
<div class="flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-dollar text-orange-500 !text-xl"></i>
</div>
</div>
<span class="text-primary font-medium">%52+ </span>
<span class="text-muted-color">since last week</span>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0">
<div class="flex justify-between mb-4">
<div>
<span class="block text-muted-color font-medium mb-4">Customers</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
<span class="block text-muted-color font-medium mb-4">تعداد کاربران</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">3 عدد</div>
</div>
<div class="flex items-center justify-center bg-cyan-100 dark:bg-cyan-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-users text-cyan-500 !text-xl"></i>
</div>
</div>
<span class="text-primary font-medium">520 </span>
<span class="text-muted-color">newly registered</span>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0">
<div class="flex justify-between mb-4">
<div>
<span class="block text-muted-color font-medium mb-4">Comments</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
</div>
<div class="flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-comment text-purple-500 !text-xl"></i>
</div>
</div>
<span class="text-primary font-medium">85 </span>
<span class="text-muted-color">responded</span>
</div>
</div>
</template>
src/router/index.js
+5
View File
@@ -43,6 +43,11 @@ const router = createRouter({
name: 'create-belonging',
component: () => import('@/views/pages/Belonging/CreateBelonging.vue')
},
{
path: '/belonging/edit-belonging/:belongingId',
name: 'edit-belonging',
component: () => import('@/views/pages/Belonging/CreateBelonging.vue')
},
{
path: '/belonging/list-belongings',
name: 'list-belongings',
src/service/BelongingService.js
+50 -7
View File
@@ -1,17 +1,60 @@
import axios from 'axios';
export const BelongingService = {
getAllBelongings: async ()=> {
getBelonging: async (belongingId) => {
const config = {
method: 'get',
url: '/api/belongings/admin/get-one/' + belongingId,
withCredentials: true
};
try {
const response = await axios(config);
return response.data.data;
} catch (err) {
console.log(err);
}
},
getAllBelongings: async () => {
const config = {
method: 'get',
url: '/api/belongings/admin/get-all',
withCredentials: true,
}
withCredentials: true
};
try {
const response = await axios(config)
return response.data.data
const response = await axios(config);
return response.data.data;
} catch (err) {
console.log(err)
console.log(err);
}
},
createBelonging: async (data) => {
const config = {
method: 'post',
url: '/api/belongings/admin/create',
withCredentials: true,
data
};
try {
const response = await axios(config);
return 'success';
} catch (err) {
console.log(err);
return err.response.data.message;
}
},
updateBelonging: async (belongingId, data) => {
const config = {
method: 'put',
url: '/api/belongings/admin/update/' + belongingId,
withCredentials: true,
data
};
try {
const response = await axios(config);
return 'success';
} catch (err) {
console.log(err);
return err.response.data.message;
}
}
}
};
src/views/Dashboard.vue
+2 -2
View File
@@ -12,11 +12,11 @@ import StatsWidget from '@/components/dashboard/StatsWidget.vue';
<div class="col-span-12 xl:col-span-6">
<RecentSalesWidget />
<BestSellingWidget />
<!-- <BestSellingWidget />-->
</div>
<div class="col-span-12 xl:col-span-6">
<RevenueStreamWidget />
<NotificationsWidget />
<!-- <NotificationsWidget />-->
</div>
</div>
</template>
src/views/pages/Belonging/CreateBelonging.vue
+115 -13
View File
@@ -1,21 +1,98 @@
<script setup>
import { Listbox, InputText } from 'primevue';
import { onBeforeMount, ref } from 'vue';
import { onBeforeMount, ref, watch } from 'vue';
import { CategoryService } from '@/service/CategoryService';
import ImageUploader from '@/views/uikit/ImageUploader.vue';
import ImageGallery from '@/views/uikit/ImageGallery.vue';
import KiwiChips from '@/views/uikit/KiwiChips.vue';
import { useToast } from 'primevue/usetoast';
import { BelongingService } from '@/service/BelongingService';
import { useRoute, useRouter } from 'vue-router';
import MapComponent from '@/views/uikit/MapComponent.vue';
const toast = useToast();
const categories = ref([]);
const selectedCategory = ref();
const belongingName = ref('');
const description = ref('');
const imageNames = ref([]);
const features = ref([]);
const featuresValues = ref({});
const documentNames = ref([]);
const documentData = ref([]);
const mainImageName = ref([]);
const tags = ref('');
const signedImageUrls = ref([{ url: 'https://upload.hitromall.com/product-images/0ff87b0cc333539a361e007d20aa9685-co3.jpg' }]);
const belonging = ref({
location: {
type: 'Point',
coordinates: [0, 0]
}
});
const tags = ref([]);
const signedImageUrls = ref([]);
const signedDocumentsUrls = ref([]);
const route = useRoute();
const router = useRouter();
const mapKey = 'web.79abbab4970e401781f434da3e41cfa6';
const serviceKey = 'service.11d860f52c434bd29e5f84d0a0a41108';
const mapRef = ref();
onBeforeMount(async () => {
categories.value = await CategoryService.getAllCategories();
console.log(route.name);
if (route.name === 'edit-belonging') {
belonging.value = await BelongingService.getBelonging(route.params.belongingId);
}
});
const handleSelectCategory = ($event) => {
if ($event.value) {
belonging.value.category = $event.value;
selectedCategory.value = categories.value.find((x) => x._id === $event.value);
features.value = selectedCategory.value.features;
} else {
belonging.value = {
location: {
type: 'Point',
coordinates: [0, 0]
}
};
selectedCategory.value = {};
}
};
const saveBelonging = async () => {
let status = 'failed';
console.log(belonging);
if (belonging?.value._id?.trim()) {
status = await BelongingService.updateBelonging(belonging.value._id, belonging.value);
} else {
status = await BelongingService.createBelonging(belonging.value);
}
if (status === 'success') {
toast.add({ severity: 'success', summary: 'موفق', detail: 'ویژگی جدید ساخته شد.', life: 3000 });
} else {
toast.add({ severity: 'error', summary: 'ناموفق', detail: status, life: 3000 });
}
await router.push('/belonging/list-belongings');
};
watch(
() => mapRef.value?.state.map,
(nv, ol) => {
if (ol) return;
setTimeout(() => {
mapRef.value?.state.map?.setMapType('standard-night');
if (mapRef.value?.state.mapType) mapRef.value.state.mapType = 'standard-night';
}, 2000);
setTimeout(() => {
mapRef.value?.search({
term: 'ولی عصر',
coords: [51.36281969540723, 35.69672648316882]
});
}, 3000);
}
);
</script>
<template>
<div className="card">
@@ -26,38 +103,63 @@ onBeforeMount(async () => {
<div class="w-3/4 ml-3">
<div class="">
<label> نام دارایی </label>
<InputText v-model="belongingName" class="w-full my-2" placeholder="مثلا: 100 عدد کولر گازی" />
<InputText v-model="belonging.name" class="w-full my-2" placeholder="مثلا: 100 عدد کولر گازی" />
</div>
<div class="my-6">
<label> توضیحات </label>
<Textarea v-model="description" class="w-full my-2" placeholder="مثلا: در تاریخ 1403/09/11 خریداری شد." rows="6" />
<Textarea v-model="belonging.description" class="w-full my-2" placeholder="مثلا: در تاریخ 1403/09/11 خریداری شد." rows="6" />
</div>
<div class="my-6" v-if="signedImageUrls.length">
<label> تصاویر </label>
<ImageGallery v-model="signedImageUrls" gallery-id="images" />
<div class="my-6">
<label> تصاویر، فایل ها و مدارک </label>
<ImageUploader v-model="belonging.documentNames" :max-files="50" mode="private" delete-endpoint="/api/files/bucket/delete/belonging-documents" upload-endpoint="/api/files/bucket/upload-multi-filepond/belonging-documents" />
<div v-if="signedImageUrls.length > 0">
<ImageGallery v-model="documentData" gallery-id="images" />
</div>
</div>
<div class="my-6" v-if="signedImageUrls.length">
<div class="my-6" v-if="signedDocumentsUrls.length > 0">
<label> فایل ها و مدارک </label>
</div>
<div class="my-6 max-h-96 overflow-y-auto" v-if="features.length > 0">
<label> اطلاعات دارایی </label>
<div class="my-6 mr-10" v-for="feature of features">
<label>{{ feature.nativeName }}</label>
<InputText v-model="featuresValues[feature._id]" class="w-1/3 my-2 block" placeholder="" />
</div>
</div>
<div class="my-10">
<label> موقعیت دارایی </label>
<MapComponent v-model="belonging.location.coordinates" />
<!-- <MapIrComponent />-->
</div>
</div>
<div class="w-1/4">
<div>
<label> دسته بندی </label>
<Listbox v-model="selectedCategory" :options="categories" optionLabel="nativeName" optionValue="_id" checkmark :highlightOnSelect="false" class="w-full my-2" />
<Listbox @change="handleSelectCategory($event)" :options="categories" optionLabel="nativeName" optionValue="_id" checkmark :highlightOnSelect="false" class="w-full my-2" />
</div>
<div class="my-6">
<label> تصویر اصلی </label>
<ImageUploader v-model="mainImageName" :max-files="1" mode="private" delete-endpoint="/api/files/bucket/delete/belonging-images" upload-endpoint="/api/files/bucket/upload-multi-filepond/belonging-images" />
<ImageUploader
v-model="belonging.mainImageName"
accepted-files="image/*"
:max-files="1"
mode="private"
delete-endpoint="/api/files/bucket/delete/belonging-images"
upload-endpoint="/api/files/bucket/upload-multi-filepond/belonging-images"
/>
</div>
<div class="my-8">
<label> برچسب ها </label>
<Chips v-model="tags" separator="," class="w-full" placeholder="مثلا: زمین، ملک، کیانپارس..." />
<KiwiChips v-model="belonging.tags" class="w-full" placeholder="مثلا: زمین، ملک، کیانپارس..." />
</div>
</div>
</div>
<div class="flex justify-center">
<Button>ذخیره</Button>
<Button @click="saveBelonging">ذخیره</Button>
</div>
</div>
</template>
<style>
@import url('leaflet/dist/leaflet.css');
</style>
src/views/pages/Belonging/ListBelongings.vue
+17 -26
View File
@@ -4,6 +4,7 @@ import { FilterMatchMode } from '@primevue/core/api';
import { useToast } from 'primevue/usetoast';
import { onMounted, ref } from 'vue';
import { BelongingService } from '@/service/BelongingService';
import { useRouter } from 'vue-router';
onMounted(() => {
BelongingService.getAllBelongings().then((data) => (belongings.value = data));
@@ -15,22 +16,12 @@ const belongings = ref();
const productDialog = ref(false);
const deleteProductDialog = ref(false);
const deleteProductsDialog = ref(false);
const product = ref({});
const belonging = ref({});
const selectedBelongings = ref();
const filters = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
});
const submitted = ref(false);
const statuses = ref([
{ label: 'INSTOCK', value: 'instock' },
{ label: 'LOWSTOCK', value: 'lowstock' },
{ label: 'OUTOFSTOCK', value: 'outofstock' }
]);
function formatCurrency(value) {
if (value) return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
return;
}
function openNew() {
product.value = {};
@@ -65,9 +56,10 @@ function saveProduct() {
}
}
function editProduct(prod) {
product.value = { ...prod };
productDialog.value = true;
const router = useRouter();
function editBelonging(belongingId) {
router.push('/belonging/edit-belonging/' + belongingId);
}
function confirmDeleteProduct(prod) {
@@ -112,7 +104,7 @@ function confirmDeleteSelected() {
}
function deleteSelectedBelongings() {
products.value = products.value.filter((val) => !selectedBelongings.value.includes(val));
belonging.value = belonging.value.filter((val) => !selectedBelongings.value.includes(val));
deleteProductsDialog.value = false;
selectedBelongings.value = null;
toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
@@ -144,8 +136,7 @@ function getStatusLabel(status) {
<Button label="حذف دارایی" icon="pi pi-trash" severity="secondary" @click="confirmDeleteSelected" :disabled="!selectedBelongings || !selectedBelongings.length" />
</template>
<template #end>
</template>
<template #end> </template>
</Toolbar>
<DataTable
@@ -175,20 +166,20 @@ function getStatusLabel(status) {
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
<Column header="تصویر">
<template #body="slotProps">
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="rounded" style="width: 64px" />
<img :src="`${slotProps.data.mainImageUrl}`" :alt="slotProps.data.name" class="rounded" style="width: 64px" />
</template>
</Column>
<Column field="belongingCode" header="کد" style="min-width: 12rem"></Column>
<Column field="name" header="نام" sortable style="min-width: 16rem"></Column>
<Column field="category" header="دسته بندی" sortable style="min-width: 10rem">
<template #body="slotProps">
{{ slotProps.data.nativeName }}
{{ slotProps.data.category.nativeName }}
</template>
</Column>
<Column :exportable="false" style="min-width: 12rem">
<template #body="slotProps">
<Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
<Button icon="pi pi-pencil" outlined rounded class="mr-2 mx-3" @click="editBelonging(slotProps.data._id)" />
<Button icon="pi pi-trash" outlined rounded severity="danger" class="mx-3" @click="confirmDeleteProduct(slotProps.data)" />
</template>
</Column>
</DataTable>
@@ -196,7 +187,7 @@ function getStatusLabel(status) {
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
<div class="flex flex-col gap-6">
<img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
<img v-if="belonging.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
<div>
<label for="name" class="block font-bold mb-3">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
@@ -255,13 +246,13 @@ function getStatusLabel(status) {
<div class="flex items-center gap-4">
<i class="pi pi-exclamation-triangle !text-3xl" />
<span v-if="product"
>Are you sure you want to delete <b>{{ product.name }}</b
>?</span
>Are you sure you want to delete <b>{{ product.name }}</b
>?</span
>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
<Button label="Yes" icon="pi pi-check" @click="deleteProduct" />
<Button label="خیر" icon="pi pi-times" text @click="deleteProductDialog = false" />
<Button label="بله" icon="pi pi-check" @click="deleteProduct" />
</template>
</Dialog>
src/views/pages/Category/ListCategories.vue
+1 -1
View File
@@ -125,7 +125,7 @@ function deleteSelectedCategories() {
>
<template #header>
<div class="flex flex-wrap gap-2 items-center justify-between">
<h4 class="m-0">مدیریت اموال</h4>
<h4 class="m-0">مدیریت دسته بندی ها</h4>
<IconField>
<InputIcon>
<i class="pi pi-search" />
src/views/pages/Crud.vue
-9
View File
@@ -93,15 +93,6 @@ function findIndexById(id) {
return index;
}
function createId() {
let id = '';
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 5; i++) {
id += chars.charAt(Math.floor(Math.random() * chars.length));
}
return id;
}
function exportCSV() {
dt.value.exportCSV();
}
src/views/pages/Features/ListFeatures.vue
+1
View File
@@ -5,6 +5,7 @@ import { Tabs, TabList, Tab } from 'primevue';
import { useToast } from 'primevue/usetoast';
import axios from 'axios';
import { FeatureService } from '@/service/FeatureService';
const toast = useToast();
const selectedTab = ref('');
const selectedFeature = ref();
src/views/uikit/ImageGallery.vue
+124 -76
View File
@@ -1,95 +1,143 @@
<template>
<div
:id="galleryId"
class="pswp-gallery pswp-gallery--single-column my-3 flex min-w-0 flex-row flex-nowrap overflow-x-auto rounded-md bg-brand-dark-3 p-3"
>
<div v-for="(image, key) in imagesData" :key="key" class="relative">
<a
:href="image.url"
:data-pswp-width="image.width"
:data-pswp-height="image.height"
target="_blank"
rel="noreferrer"
class="mx-3 block flex-shrink-0"
>
<img :src="image.url" alt="" class="max-h-60 rounded-md" :style="{ height: '150px' }" />
</a>
<button
class="absolute right-4 top-2 flex h-6 w-6 items-center justify-center rounded-full text-brand-danger"
@click="removeImage(key)"
>
<font-awesome-icon icon="fa-solid fa-x" />
</button>
<div :id="galleryId" class="pswp-gallery pswp-gallery--single-column my-3 flex min-w-0 flex-row flex-nowrap overflow-x-auto rounded-md bg-brand-dark-3 p-3">
<div v-for="(item, key) in itemsData" :key="key" class="relative mx-3 flex-shrink-0">
<!-- Image Display -->
<template v-if="isImageFile(item.url)">
<a :href="item.url" :data-pswp-width="item.width" :data-pswp-height="item.height" target="_blank" rel="noreferrer" class="block">
<img :src="item.url" alt="" class="max-h-60 rounded-md" :style="{ height: '150px' }" />
</a>
</template>
<!-- File Display -->
<template v-else>
<div class="flex h-[150px] w-[200px] flex-col items-center justify-center rounded-md border-2 border-gray-200 bg-white p-4">
<!-- File Icon -->
<font-awesome-icon :icon="getFileIcon(item.url)" class="mb-2 text-4xl" :class="getIconColor(item.url)" />
<!-- File Name -->
<p class="mb-2 max-w-full truncate text-sm font-medium text-gray-700">
{{ getFileName(item.url) }}
</p>
<!-- Download Button -->
<Button icon="pi pi-download" severity="secondary" size="small" @click="downloadFile(item.url)" class="p-button-sm"> Download </Button>
</div>
</template>
<!-- Remove Button -->
<button class="absolute right-4 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-white/80 text-red-500 hover:bg-white" @click="removeItem(key)">
<font-awesome-icon icon="fa-solid fa-x" />
</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
import PhotoSwipeLightbox from 'photoswipe/lightbox'
import 'photoswipe/style.css'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { ref, watch, onMounted } from 'vue';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { Button } from 'primevue';
function updateImagesData(images) {
for (let i = 0; i < images.length; i++) {
const img = new Image()
img.src = images[i].url
img.onload = function () {
images[i].height = img.naturalHeight
images[i].width = img.naturalWidth
}
}
// File type checking functions
function isImageFile(url) {
const extension = url.toLowerCase().split('.').pop();
return ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(extension);
}
return images
function getFileIcon(url) {
const extension = url.toLowerCase().split('.').pop();
const iconMap = {
pdf: 'fa-solid fa-file-pdf',
doc: 'fa-solid fa-file-word',
docx: 'fa-solid fa-file-word',
xls: 'fa-solid fa-file-excel',
xlsx: 'fa-solid fa-file-excel',
txt: 'fa-solid fa-file-lines',
zip: 'fa-solid fa-file-zipper'
// Add more file types as needed
};
return iconMap[extension] || 'fa-solid fa-file';
}
function getIconColor(url) {
const extension = url.toLowerCase().split('.').pop();
const colorMap = {
pdf: 'text-red-500',
doc: 'text-blue-500',
docx: 'text-blue-500',
xls: 'text-green-500',
xlsx: 'text-green-500',
txt: 'text-gray-500',
zip: 'text-yellow-600'
// Add more file types as needed
};
return colorMap[extension] || 'text-gray-400';
}
function getFileName(url) {
return url.split('/').pop();
}
function downloadFile(url) {
window.open(url, '_blank');
}
function updateItemsData(items) {
return items.map((item) => {
if (isImageFile(item.url)) {
// Handle images
const img = new Image();
img.src = item.url;
img.onload = function () {
item.height = img.naturalHeight;
item.width = img.naturalWidth;
};
}
return item;
});
}
// Props
const props = defineProps({
galleryId: {
type: String,
required: true
},
modelValue: {
type: Array,
required: true
}
})
galleryId: {
type: String,
required: true
},
modelValue: {
type: Array,
required: true
}
});
const imagesData = ref([])
const itemsData = ref([]);
let lightbox = null;
let lightbox = null
// Lifecycle hook: mounted
onMounted(() => {
if (!lightbox) {
console.log('Launching Gallery')
console.log({
gallery: '#' + props.galleryId,
children: 'a'
})
lightbox = new PhotoSwipeLightbox({
gallery: '#' + props.galleryId,
children: 'a',
pswpModule: () => import('photoswipe')
})
lightbox.init()
}
imagesData.value = updateImagesData(props.modelValue)
})
if (!lightbox) {
lightbox = new PhotoSwipeLightbox({
gallery: '#' + props.galleryId,
children: 'a',
pswpModule: () => import('photoswipe')
});
lightbox.init();
}
itemsData.value = updateItemsData(props.modelValue);
});
watch(
() => props.modelValue,
(newImages) => {
console.log('propsimages', newImages)
imagesData.value = updateImagesData(newImages)
},
{ deep: true, immediate: true }
)
() => props.modelValue,
(newItems) => {
itemsData.value = updateItemsData(newItems);
},
{ deep: true, immediate: true }
);
const emit = defineEmits(['update:modelValue'])
function removeImage(index) {
const newImages = [...props.modelValue]
newImages.splice(index, 1)
emit('update:modelValue', newImages)
const emit = defineEmits(['update:modelValue']);
function removeItem(index) {
const newItems = [...props.modelValue];
newItems.splice(index, 1);
emit('update:modelValue', newItems);
}
</script>
src/views/uikit/ImageUploader.vue
+5 -2
View File
@@ -25,12 +25,11 @@
onload: (response) => handleRevertResponse(response)
}
}"
label-idle="برای آپلود تصاویر کلیک کنید"
label-idle="برای آپلود کلیک کنید"
label-tap-to-undo=" برای حذف کلیک کنید "
label-file-processing=" در حال آپلود "
label-file-processing-complete=" آپلود فایل تکمیل شد "
:allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
v-model="uploadedFiles"
/>
</div>
@@ -59,6 +58,10 @@ const props = defineProps({
type: Number,
default: 1
},
acceptedFiles: {
type: String,
default: ''
},
mode: {
type: String,
required: true,
src/views/uikit/KiwiChips.vue
+57
View File
@@ -0,0 +1,57 @@
<template>
<!-- Outer container that mimics a text field with a green border -->
<div class="flex flex-wrap items-center gap-2 rounded p-2 cursor-text" @click="focusInput">
<InputText v-model="inputValue" @keyup.enter="addChip" :placeholder="placeholder" class="w-full min-w-[100px]" />
<Chip v-for="(tag, index) in localTags" :key="tag" :label="tag" removable @remove="removeChip(index)" class="text-sm" />
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import Chip from 'primevue/chip';
import InputText from 'primevue/inputtext';
const props = defineProps({
modelValue: {
type: Array,
default: () => []
},
placeholder: {
type: String,
default: 'Example: Building, 500 sqft...'
}
});
const emit = defineEmits(['update:modelValue']);
// Local reactive references
const localTags = ref([...props.modelValue]);
const inputValue = ref('');
const inputRef = ref(null);
watch(
() => props.modelValue,
(newVal) => {
localTags.value = [...newVal];
}
);
function addChip() {
const value = inputValue.value.trim();
if (value && !localTags.value.includes(value)) {
localTags.value.push(value);
emit('update:modelValue', localTags.value);
}
inputValue.value = '';
}
function removeChip(index) {
localTags.value.splice(index, 1);
emit('update:modelValue', localTags.value);
}
</script>
<!--
No <style> block is needed if you're using Tailwind CSS utility classes.
However, if you need to override or add custom CSS, do it here or in a global stylesheet.
-->
src/views/uikit/MapComponent.vue
+122
View File
@@ -0,0 +1,122 @@
<template>
<div class="map-container">
<!-- Search box -->
<div class="search-container">
<input v-model="searchQuery" @keyup.enter="handleSearch" placeholder="جستجو" class="search-input" />
</div>
<l-map ref="map" v-model:zoom="zoom" :center="center" :use-global-leaflet="false" @click="handleClick($event)">
<!-- Base layers -->
<l-control-layers position="topright" />
<!-- OpenStreetMap layer (default) -->
<l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="نمای نقشه ای" :attribution="attribution" />
<!-- Satellite layer (optional) -->
<l-tile-layer
:visible="false"
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
layer-type="base"
name="نمای ماهواره ای"
attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
/>
<!-- Marker -->
<l-marker v-if="marker.length > 0" :lat-lng="marker">
<l-popup> نقطه انتخاب شده </l-popup>
</l-marker>
</l-map>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import 'leaflet/dist/leaflet.css';
import { LMap, LTileLayer, LMarker, LPopup, LControlLayers } from '@vue-leaflet/vue-leaflet';
import axios from 'axios';
// Props and emits
const props = defineProps({
modelValue: {
type: Array,
default: () => []
}
});
const emit = defineEmits(['update:modelValue']);
// Map configuration
const zoom = ref(13);
const center = ref([31.3183, 48.6706]);
const attribution = ref('© OpenStreetMap contributors');
const marker = ref([...props.modelValue]);
const map = ref(null);
// Search functionality
const searchQuery = ref('');
const handleSearch = async () => {
if (!searchQuery.value) return;
try {
const response = await axios.get(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery.value)}`);
if (response.data && response.data.length > 0) {
const { lat, lon } = response.data[0];
center.value = [parseFloat(lat), parseFloat(lon)];
zoom.value = 16;
marker.value = [parseFloat(lat), parseFloat(lon)];
emit('update:modelValue', marker.value);
}
} catch (error) {
console.error('Search failed:', error);
}
};
// Watch for changes in modelValue and sync with marker
watch(
() => props.modelValue,
(newValue) => {
marker.value = [...newValue];
},
{ immediate: true }
);
// Update marker and emit changes to modelValue
const handleClick = (event) => {
marker.value = [event.latlng.lat, event.latlng.lng];
emit('update:modelValue', marker.value);
};
</script>
<style scoped>
.map-container {
font-family: 'Estedad', sans-serif !important;
height: 500px;
width: 100%;
position: relative;
}
.leaflet-container {
font-family: 'Estedad', serif !important;
}
.search-container {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
background: white;
padding: 5px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.search-input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 250px;
font-family: 'Estedad', sans-serif;
}
</style>
src/views/uikit/MapIrComponent.vue
+45
View File
@@ -0,0 +1,45 @@
<script setup>
import { VMap } from 'v-mapbox';
import { ref, onMounted } from 'vue';
import mapbox from 'mapbox-gl'; // Import the Mapbox GL library
if (mapbox.getRTLTextPluginStatus() === 'unavailable') {
mapbox.setRTLTextPlugin(
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
null,
true // Lazy load the plugin
);
}
// Define your map style and Map.ir API token
const mapStyle = 'https://map.ir/vector/styles/main/mapir-style-dark.json'; // Replace it with your chosen style
const MAPIR_TOKEN =
'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6Ijk2MWQyMWVjZmQyODI1NzY0NDdmMjczNTE0NTA5NGVjYjgxMjBmOWU0ZmM5Mjc2N2QxNGRmZmRmMjMzNDkzMWVmNDlkMGZiMzhkNmUzYTY4In0.eyJhdWQiOiIzMDM0NSIsImp0aSI6Ijk2MWQyMWVjZmQyODI1NzY0NDdmMjczNTE0NTA5NGVjYjgxMjBmOWU0ZmM5Mjc2N2QxNGRmZmRmMjMzNDkzMWVmNDlkMGZiMzhkNmUzYTY4IiwiaWF0IjoxNzM2MDc0MTI0LCJuYmYiOjE3MzYwNzQxMjQsImV4cCI6MTczODU3OTcyNCwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.Uz6Becl2wXziCtOooCirPeQQilnxFXKRs-zBYqfiHpj-MeVMLV99O2xqpb-dqOp32_wH0uwim1tqf_yI2VSYpVWyGxCqSBGAP4Exo_3Tf9oyOOHy77VMBhbkqJUL_PxQ7VgQShCFas_CH3pz0Mkmeo03-gBOT9qEGOJOk5P_ExFUyS-6z6vADBclsallGnggP7iOwsTkoIz-qzqaBoJUptqmUOeYObHxGv3DbWT3zWuoaNY1FFj289wbx3EANkD_XrPrfoYHDvc_Ibj4HDjEGjSg2F94Y3Cqnau7mZXQEukzKgHyhsHFanjA44gQg5O5IixoUu3MQKK4WymopfwA8g'; // Replace it with your Map.ir API token
// Method to transform the request
const transformRequest = (url) => {
return {
url,
headers: {
'x-api-key': MAPIR_TOKEN // Mapir API key
}
};
};
// Assign mapbox to be available when the component is created
let mapboxInstance;
onMounted(() => {
mapboxInstance = mapbox;
});
</script>
<template>
<VMap
:options="{
style: mapStyle,
transformRequest,
zoom: 11,
center: [51.375433528216654, 35.73356434056531]
}"
/>
</template>