add change language

2026-03-05 09:21:06 +00:00
parent e1ba24d1bf
commit dba9713d96
74 changed files with 3927 additions and 1256 deletions
--- a/src/routes/notification/Notification.vue
+++ b/src/routes/notification/Notification.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import PageHeader from '@/components/dashboard/PageHeader.vue';
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import PageHeader from '@/components/dashboard/PageHeader.vue';
 import NotificationActions from './components/NotificationActions.vue';
 import NotificationList from './components/NotificationList.vue';
 import NotificationTabs from './components/NotificationTabs.vue';
@@ -20,72 +21,74 @@ interface Notification {

 const loading = ref(false);
 const activeTab = ref('all');
+const { t } = useI18n();

-// Mock notifications data
 const notifications = ref<Notification[]>([
    {
        id: '1',
        type: 'video',
-        title: 'Video processing complete',
-        message: 'Your video "Summer Vacation 2024" has been successfully processed and is now ready to stream.',
-        time: '2 minutes ago',
+        title: t('notification.mocks.videoProcessed.title'),
+        message: t('notification.mocks.videoProcessed.message'),
+        time: t('notification.time.minutesAgo', { count: 2 }),
        read: false,
        actionUrl: '/video',
-        actionLabel: 'View video'
+        actionLabel: t('notification.actions.viewVideo')
    },
    {
        id: '2',
        type: 'payment',
-        title: 'Payment successful',
-        message: 'Your subscription to Pro Plan has been renewed successfully. Next billing date: Feb 25, 2026.',
-        time: '1 hour ago',
+        title: t('notification.mocks.paymentSuccess.title'),
+        message: t('notification.mocks.paymentSuccess.message'),
+        time: t('notification.time.hoursAgo', { count: 1 }),
        read: false,
        actionUrl: '/payments-and-plans',
-        actionLabel: 'View receipt'
+        actionLabel: t('notification.actions.viewReceipt')
    },
    {
        id: '3',
        type: 'warning',
-        title: 'Storage almost full',
-        message: 'You have used 85% of your storage quota. Consider upgrading your plan for more space.',
-        time: '3 hours ago',
+        title: t('notification.mocks.storageWarning.title'),
+        message: t('notification.mocks.storageWarning.message'),
+        time: t('notification.time.hoursAgo', { count: 3 }),
        read: false,
        actionUrl: '/payments-and-plans',
-        actionLabel: 'Upgrade plan'
+        actionLabel: t('notification.actions.upgradePlan')
    },
    {
        id: '4',
        type: 'success',
-        title: 'Upload successful',
-        message: 'Your video "Product Demo v2" has been uploaded successfully.',
-        time: '1 day ago',
+        title: t('notification.mocks.uploadSuccess.title'),
+        message: t('notification.mocks.uploadSuccess.message'),
+        time: t('notification.time.daysAgo', { count: 1 }),
        read: true
    },
    {
        id: '5',
        type: 'system',
-        title: 'Scheduled maintenance',
-        message: 'We will perform scheduled maintenance on Jan 30, 2026 from 2:00 AM to 4:00 AM UTC.',
-        time: '2 days ago',
+        title: t('notification.mocks.maintenance.title'),
+        message: t('notification.mocks.maintenance.message'),
+        time: t('notification.time.daysAgo', { count: 2 }),
        read: true
    },
    {
        id: '6',
        type: 'info',
-        title: 'New feature available',
-        message: 'We just launched video analytics! Track your video performance with detailed insights.',
-        time: '3 days ago',
+        title: t('notification.mocks.newFeature.title'),
+        message: t('notification.mocks.newFeature.message'),
+        time: t('notification.time.daysAgo', { count: 3 }),
        read: true,
        actionUrl: '/video',
-        actionLabel: 'Try it now'
+        actionLabel: t('notification.actions.tryNow')
    }
 ]);

+const unreadCount = computed(() => notifications.value.filter(n => !n.read).length);
+
 const tabs = computed(() => [
-    { key: 'all', label: 'All', icon: 'i-lucide-inbox', count: notifications.value.length },
-    { key: 'unread', label: 'Unread', icon: 'i-lucide-bell-dot', count: unreadCount.value },
-    { key: 'video', label: 'Videos', icon: 'i-lucide-video', count: notifications.value.filter(n => n.type === 'video').length },
-    { key: 'payment', label: 'Payments', icon: 'i-lucide-credit-card', count: notifications.value.filter(n => n.type === 'payment').length }
+    { key: 'all', label: t('notification.tabs.all'), icon: 'i-lucide-inbox', count: notifications.value.length },
+    { key: 'unread', label: t('notification.tabs.unread'), icon: 'i-lucide-bell-dot', count: unreadCount.value },
+    { key: 'video', label: t('notification.tabs.videos'), icon: 'i-lucide-video', count: notifications.value.filter(n => n.type === 'video').length },
+    { key: 'payment', label: t('notification.tabs.payments'), icon: 'i-lucide-credit-card', count: notifications.value.filter(n => n.type === 'payment').length }
 ]);

 const filteredNotifications = computed(() => {
@@ -94,8 +97,6 @@ const filteredNotifications = computed(() => {
    return notifications.value.filter(n => n.type === activeTab.value);
 });

-const unreadCount = computed(() => notifications.value.filter(n => !n.read).length);
-
 const handleMarkRead = (id: string) => {
    const notification = notifications.value.find(n => n.id === id);
    if (notification) notification.read = true;
@@ -116,37 +117,37 @@ const handleClearAll = () => {

 <template>
    <div>
-        <PageHeader 
-            title="Notifications" 
-            description="Stay updated with your latest activities and alerts."
+        <PageHeader
+            :title="t('notification.title')"
+            :description="t('notification.subtitle')"
            :breadcrumbs="[
-                { label: 'Dashboard', to: '/' },
-                { label: 'Notifications' }
+                { label: t('pageHeader.dashboard'), to: '/' },
+                { label: t('nav.notification') }
            ]"
        />
-    <div class="w-full max-w-4xl mx-auto mt-6">
-        <div class="notification-container bg-white rounded-2xl border border-gray-200 p-6 shadow-sm">
-            <NotificationActions
-                :loading="loading"
-                :total-count="notifications.length"
-                :unread-count="unreadCount"
-                @mark-all-read="handleMarkAllRead"
-                @clear-all="handleClearAll"
-            />
+        <div class="w-full max-w-4xl mx-auto mt-6">
+            <div class="notification-container bg-white rounded-2xl border border-gray-200 p-6 shadow-sm">
+                <NotificationActions
+                    :loading="loading"
+                    :total-count="notifications.length"
+                    :unread-count="unreadCount"
+                    @mark-all-read="handleMarkAllRead"
+                    @clear-all="handleClearAll"
+                />

-            <NotificationTabs
-                :tabs="tabs"
-                :active-tab="activeTab"
-                @update:active-tab="activeTab = $event"
-            />
+                <NotificationTabs
+                    :tabs="tabs"
+                    :active-tab="activeTab"
+                    @update:active-tab="activeTab = $event"
+                />

-            <NotificationList
-                :notifications="filteredNotifications"
-                :loading="loading"
-                @mark-read="handleMarkRead"
-                @delete="handleDelete"
-            />
+                <NotificationList
+                    :notifications="filteredNotifications"
+                    :loading="loading"
+                    @mark-read="handleMarkRead"
+                    @delete="handleDelete"
+                />
+            </div>
        </div>
    </div>
-    </div>
-</template>
+</template>
--- a/src/routes/notification/components/NotificationActions.vue
+++ b/src/routes/notification/components/NotificationActions.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
 interface Props {
    loading?: boolean;
    totalCount: number;
@@ -10,6 +12,8 @@ const emit = defineEmits<{
    markAllRead: [];
    clearAll: [];
 }>();
+
+const { t } = useI18n();
 </script>

 <template>
@@ -18,35 +22,35 @@ const emit = defineEmits<{
            <div class="stats flex items-center gap-4">
                <div class="flex items-center gap-2 text-sm">
                    <span class="i-lucide-bell w-4 h-4 text-gray-400"></span>
-                    <span class="text-gray-600">{{ totalCount }} notifications</span>
+                    <span class="text-gray-600">{{ t('notification.stats.total', { count: totalCount }) }}</span>
                </div>
                <div v-if="unreadCount > 0" class="flex items-center gap-2 text-sm">
                    <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
-                    <span class="text-primary font-medium">{{ unreadCount }} unread</span>
+                    <span class="text-primary font-medium">{{ t('notification.stats.unread', { count: unreadCount }) }}</span>
                </div>
            </div>
        </div>

        <div class="actions flex items-center gap-2">
-            <button 
+            <button
                v-if="unreadCount > 0"
                @click="emit('markAllRead')"
                :disabled="loading"
-                class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary 
+                class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary
                       hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-2"
            >
                <span class="i-lucide-check-check w-4 h-4"></span>
-                Mark all read
+                {{ t('notification.actions.markAllRead') }}
            </button>
-            <button 
+            <button
                v-if="totalCount > 0"
                @click="emit('clearAll')"
                :disabled="loading"
-                class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-red-600 
+                class="px-3 py-2 text-sm font-medium text-gray-600 hover:text-red-600
                       hover:bg-red-50 rounded-lg transition-colors flex items-center gap-2"
            >
                <span class="i-lucide-trash w-4 h-4"></span>
-                Clear all
+                {{ t('notification.actions.clearAll') }}
            </button>
        </div>
    </div>
--- a/src/routes/notification/components/NotificationItem.vue
+++ b/src/routes/notification/components/NotificationItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import InfoIcon from '@/components/icons/InfoIcon.vue';
 import CheckCircleIcon from '@/components/icons/CheckCircleIcon.vue';
 import AlertTriangleIcon from '@/components/icons/AlertTriangleIcon.vue';
@@ -31,6 +32,8 @@ const emit = defineEmits<{
    delete: [id: string];
 }>();

+const { t } = useI18n();
+
 const iconComponent = computed(() => {
    const icons: Record<string, any> = {
        info: InfoIcon,
@@ -70,12 +73,10 @@ const bgClass = computed(() => {
        'flex items-start gap-4 group cursor-pointer relative',
        bgClass
    ]" @click="emit('markRead', notification.id)">
-        <!-- Icon -->
        <div v-if="!isDrawer" class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
            <component :is="iconComponent" :class="[iconColorClass, 'w-5 h-5']" />
        </div>

-        <!-- Content -->
        <div class="flex-1 min-w-0">
            <div class="flex items-start justify-between gap-2">
                <h4 :class="['font-semibold text-gray-900', !notification.read && 'text-primary-700']">
@@ -85,30 +86,27 @@ const bgClass = computed(() => {
            </div>
            <p class="text-sm text-gray-600 mt-1 line-clamp-2">{{ notification.message }}</p>

-            <!-- Action Button -->
            <router-link v-if="notification.actionUrl" :to="notification.actionUrl"
                class="inline-flex items-center gap-1 text-sm text-primary font-medium mt-2 hover:underline">
-                {{ notification.actionLabel || 'View Details' }}
+                {{ notification.actionLabel || t('notification.item.viewDetails') }}
                <ArrowRightIcon class="w-4 h-4" />
            </router-link>
        </div>

-        <!-- Actions -->
        <div v-if="!isDrawer"
            class="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
            <button v-if="!notification.read" @click.stop="emit('markRead', notification.id)"
                class="p-2 rounded-lg hover:bg-gray-200 text-gray-500 hover:text-gray-700 transition-colors"
-                title="Mark as read">
+                :title="t('notification.item.markAsRead')">
                <CheckMarkIcon class="w-4 h-4" />
            </button>
            <button @click.stop="emit('delete', notification.id)"
                class="p-2 rounded-lg hover:bg-red-100 text-gray-500 hover:text-red-600 transition-colors"
-                title="Delete">
+                :title="t('notification.item.delete')">
                <TrashIcon class="w-4 h-4" />
            </button>
        </div>

-        <!-- Unread indicator -->
        <div v-if="!notification.read"
            class="absolute left-2 top-1/10 -translate-y-1/2 w-2 h-2 rounded-full bg-primary">
        </div>
--- a/src/routes/notification/components/NotificationList.vue
+++ b/src/routes/notification/components/NotificationList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import NotificationItem from './NotificationItem.vue';

 interface Notification {
@@ -22,15 +23,16 @@ const emit = defineEmits<{
    markRead: [id: string];
    delete: [id: string];
 }>();
+
+const { t } = useI18n();
 </script>

 <template>
    <div class="notification-list space-y-3">
-        <!-- Loading skeleton -->
        <template v-if="loading">
-            <div 
-                v-for="i in 5" 
-                :key="i" 
+            <div
+                v-for="i in 5"
+                :key="i"
                class="p-4 rounded-xl border border-gray-200 animate-pulse"
            >
                <div class="flex items-start gap-4">
@@ -43,7 +45,6 @@ const emit = defineEmits<{
            </div>
        </template>

-        <!-- Notification items -->
        <template v-else-if="notifications.length > 0">
            <NotificationItem
                v-for="notification in notifications"
@@ -54,16 +55,15 @@ const emit = defineEmits<{
            />
        </template>

-        <!-- Empty state -->
-        <div 
-            v-else 
+        <div
+            v-else
            class="py-16 text-center"
        >
            <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
                <span class="i-lucide-bell-off w-10 h-10 text-gray-400"></span>
            </div>
-            <h3 class="text-lg font-semibold text-gray-900 mb-1">No notifications</h3>
-            <p class="text-gray-500">You're all caught up! Check back later.</p>
+            <h3 class="text-lg font-semibold text-gray-900 mb-1">{{ t('notification.empty.title') }}</h3>
+            <p class="text-gray-500">{{ t('notification.empty.subtitle') }}</p>
        </div>
    </div>
 </template>