Widgets düzenlemeleri
This commit is contained in:
Sedat Öztürk
parent
bf5088609e
commit
a2a0d46488
14 changed files with 359 additions and 334 deletions
|
|
@ -352,10 +352,11 @@ const MessengerWidget = () => {
|
|||
if (!auth.session.signedIn) return null
|
||||
|
||||
const panelClassName = maximized
|
||||
? 'pointer-events-auto fixed inset-2 z-[51] overflow-hidden rounded-xl border border-blue-300 bg-slate-50 shadow-[0_24px_80px_rgba(15,23,42,0.45)] dark:border-blue-800 dark:bg-slate-900 sm:inset-4'
|
||||
: 'pointer-events-auto fixed inset-x-2 bottom-20 top-3 z-[51] overflow-hidden rounded-xl border border-blue-300 bg-slate-50 shadow-[0_24px_80px_rgba(15,23,42,0.45)] dark:border-blue-800 dark:bg-slate-900 sm:inset-auto sm:bottom-20 sm:right-5 sm:h-[min(75vh,680px)] sm:w-[min(78vw,800px)]'
|
||||
? 'pointer-events-auto fixed inset-2 z-[51] overflow-hidden rounded-xl border border-gray-200 bg-white/80 shadow-[0_24px_80px_rgba(15,23,42,0.35)] backdrop-blur-xl dark:border-gray-700 dark:bg-gray-900/85 sm:inset-4'
|
||||
: 'pointer-events-auto fixed inset-x-2 bottom-20 top-3 z-[51] overflow-hidden rounded-xl border border-gray-200 bg-white/80 shadow-[0_24px_80px_rgba(15,23,42,0.35)] backdrop-blur-xl dark:border-gray-700 dark:bg-gray-900/85 sm:inset-auto sm:bottom-20 sm:right-5 sm:h-[min(75vh,680px)] sm:w-[min(78vw,800px)]'
|
||||
|
||||
const headerActionClassName = 'text-white hover:bg-white/15 hover:text-white active:bg-white/25'
|
||||
const headerActionClassName =
|
||||
'text-gray-600 hover:bg-gray-900/10 hover:text-gray-900 active:bg-gray-900/15 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-white dark:active:bg-white/15'
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -372,13 +373,13 @@ const MessengerWidget = () => {
|
|||
<div className={panelClassName} role="dialog" aria-modal="true">
|
||||
<div className="flex h-full min-h-0">
|
||||
<aside
|
||||
className={`min-h-0 w-full shrink-0 flex-col bg-slate-100 dark:bg-slate-950 sm:flex sm:w-72 ${
|
||||
className={`min-h-0 w-full shrink-0 flex-col bg-gray-50/75 backdrop-blur-xl dark:bg-gray-950/70 sm:flex sm:w-72 ${
|
||||
selectedIds.length > 0 ? 'hidden' : 'flex'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
'flex h-16 items-center justify-between border-b border-r-2 border-blue-500/40 bg-blue-700 px-4 text-white dark:bg-blue-950'
|
||||
'flex h-16 items-center justify-between border-b border-r-2 border-gray-200 bg-white/70 px-4 text-gray-900 backdrop-blur-xl dark:border-gray-700 dark:bg-gray-800/70 dark:text-gray-100'
|
||||
}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
|
|
@ -388,12 +389,12 @@ const MessengerWidget = () => {
|
|||
src={auth.user.avatar || AVATAR_URL(auth.user.id, tenantId)}
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-semibold text-white">
|
||||
<div className="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||
{auth.user.name ||
|
||||
auth.user.userName ||
|
||||
translate('::MessengerWidget.Title')}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs text-blue-100">
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-300">
|
||||
<span
|
||||
className={`h-2 w-2 rounded-full ${connected ? 'bg-emerald-500' : 'bg-gray-400'}`}
|
||||
/>
|
||||
|
|
@ -521,7 +522,7 @@ const MessengerWidget = () => {
|
|||
>
|
||||
<div
|
||||
className={
|
||||
'flex h-16 items-center justify-between border-b border-blue-500/40 bg-blue-700 px-4 text-white dark:bg-blue-950'
|
||||
'flex h-16 items-center justify-between border-b border-gray-200 bg-white/70 px-4 text-gray-900 backdrop-blur-xl dark:border-gray-700 dark:bg-gray-800/70 dark:text-gray-100'
|
||||
}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
|
|
@ -548,14 +549,14 @@ const MessengerWidget = () => {
|
|||
</Avatar>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-semibold text-white">
|
||||
<div className="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||
{selectedContacts.length === 1
|
||||
? selectedContacts[0].fullName
|
||||
: selectedContacts.length > 1
|
||||
? `${selectedContacts.length} ${translate('::MessengerWidget.PeopleSelected')}`
|
||||
: translate('::MessengerWidget.Chat')}
|
||||
</div>
|
||||
<div className="truncate text-xs text-blue-100">
|
||||
<div className="truncate text-xs text-gray-500 dark:text-gray-300">
|
||||
{selectedContacts.length === 1
|
||||
? `${selectedContacts[0].isOnline ? translate('::MessengerWidget.Online') : translate('::MessengerWidget.Offline')} - ${
|
||||
selectedContacts[0].email || selectedContacts[0].userName
|
||||
|
|
@ -591,7 +592,7 @@ const MessengerWidget = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto bg-slate-50 px-4 py-3 dark:bg-slate-900">
|
||||
<div className="flex-1 overflow-y-auto bg-white/55 px-4 py-3 backdrop-blur-xl dark:bg-gray-900/55">
|
||||
{visibleMessages.length === 0 && (
|
||||
<div className="flex h-full items-center justify-center text-sm text-gray-400">
|
||||
{translate('::MessengerWidget.NoMessagesYet')}
|
||||
|
|
|
|||
|
|
@ -284,7 +284,7 @@ const FormButtons = (props: {
|
|||
<Button
|
||||
size="sm"
|
||||
variant="solid"
|
||||
color="gray-800"
|
||||
color="purple-500"
|
||||
icon={<FaSistrix />}
|
||||
title={translate('::App.Reports.Form')}
|
||||
onClick={openDynamicGridReport}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
|
|||
import useLocale from '@/utils/hooks/useLocale'
|
||||
import { currentLocalDate } from '@/utils/dateUtils'
|
||||
import { useStoreState } from '@/store/store'
|
||||
import UpcomingEvents from './widgets/UpcomingEvents'
|
||||
import Events from './widgets/Events'
|
||||
import Button from '@/components/ui/Button'
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
|
@ -104,6 +104,38 @@ const IntranetDashboard: React.FC = () => {
|
|||
setSelectedSurvey(null)
|
||||
}
|
||||
|
||||
const handleEventLikeChange = (updatedEvent: EventDto) => {
|
||||
setSelectedEvent((current) => (current ? { ...current, ...updatedEvent } : updatedEvent))
|
||||
setIntranetDashboard((current) =>
|
||||
current
|
||||
? {
|
||||
...current,
|
||||
events: current.events.map((event) =>
|
||||
event.id === updatedEvent.id ? { ...event, ...updatedEvent } : event,
|
||||
),
|
||||
}
|
||||
: current,
|
||||
)
|
||||
}
|
||||
|
||||
const handleAnnouncementLikeChange = (updatedAnnouncement: AnnouncementDto) => {
|
||||
setSelectedAnnouncement((current) =>
|
||||
current ? { ...current, ...updatedAnnouncement } : updatedAnnouncement,
|
||||
)
|
||||
setIntranetDashboard((current) =>
|
||||
current
|
||||
? {
|
||||
...current,
|
||||
announcements: current.announcements.map((announcement) =>
|
||||
announcement.id === updatedAnnouncement.id
|
||||
? { ...announcement, ...updatedAnnouncement }
|
||||
: announcement,
|
||||
),
|
||||
}
|
||||
: current,
|
||||
)
|
||||
}
|
||||
|
||||
// Widget metadata (component'lar yerine sadece meta bilgiler)
|
||||
const widgetMetadata = [
|
||||
{ id: 'today-birthdays', permission: 'AbpIdentity.Users.Widget', column: 'left' },
|
||||
|
|
@ -247,7 +279,7 @@ const IntranetDashboard: React.FC = () => {
|
|||
switch (widgetId) {
|
||||
case 'upcoming-events':
|
||||
return (
|
||||
<UpcomingEvents
|
||||
<Events
|
||||
events={intranetDashboard?.events || []}
|
||||
onEventClick={setSelectedEvent}
|
||||
/>
|
||||
|
|
@ -640,7 +672,11 @@ const IntranetDashboard: React.FC = () => {
|
|||
|
||||
<AnimatePresence>
|
||||
{selectedEvent && (
|
||||
<EventModal event={selectedEvent} onClose={() => setSelectedEvent(null)} />
|
||||
<EventModal
|
||||
event={selectedEvent}
|
||||
onClose={() => setSelectedEvent(null)}
|
||||
onLikeChange={handleEventLikeChange}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
|
|
@ -649,6 +685,7 @@ const IntranetDashboard: React.FC = () => {
|
|||
<AnnouncementModal
|
||||
announcement={selectedAnnouncement}
|
||||
onClose={() => setSelectedAnnouncement(null)}
|
||||
onLikeChange={handleAnnouncementLikeChange}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,13 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
|
|||
const [activeTab, setActiveTab] = useState<'upload' | 'url'>('upload')
|
||||
const [urlInput, setUrlInput] = useState('')
|
||||
const [mediaType, setMediaType] = useState<'image' | 'video'>('image')
|
||||
const tabClassName = (tab: 'upload' | 'url') =>
|
||||
classNames(
|
||||
'!h-auto !items-center gap-2 !rounded-none border-b-2 !bg-transparent !px-4 !py-3 font-medium transition-colors hover:!bg-gray-50 active:!bg-transparent focus:!bg-transparent dark:hover:!bg-gray-700/50',
|
||||
activeTab === tab
|
||||
? '!border-blue-600 !text-blue-600 dark:!border-blue-400 dark:!text-blue-300'
|
||||
: '!border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100',
|
||||
)
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files
|
||||
|
|
@ -92,12 +99,7 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
|
|||
variant="plain"
|
||||
shape="none"
|
||||
icon={<FaUpload className="h-5 w-5" />}
|
||||
className={classNames(
|
||||
'!h-auto !items-center gap-2 !rounded-none border-b-2 !px-4 !py-3 font-medium transition-colors',
|
||||
activeTab === 'upload'
|
||||
? 'border-blue-600 !text-blue-600'
|
||||
: 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200',
|
||||
)}
|
||||
className={tabClassName('upload')}
|
||||
>
|
||||
<span>
|
||||
{translate('::App.Platform.Intranet.SocialWall.MediaManager.SelectFromComputer')}
|
||||
|
|
@ -108,12 +110,7 @@ const MediaManager: React.FC<MediaManagerProps> = ({ media, onChange, onClose })
|
|||
variant="plain"
|
||||
shape="none"
|
||||
icon={<FaLink className="h-5 w-5" />}
|
||||
className={classNames(
|
||||
'!h-auto !items-center gap-2 !rounded-none border-b-2 !px-4 !py-3 font-medium transition-colors',
|
||||
activeTab === 'url'
|
||||
? 'border-blue-600 !text-blue-600'
|
||||
: 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200',
|
||||
)}
|
||||
className={tabClassName('url')}
|
||||
>
|
||||
<span>{translate('::App.Platform.Intranet.SocialWall.MediaManager.AddByUrl')}</span>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -321,12 +321,15 @@ const PostItem: React.FC<PostItemProps> = ({ post, onLike, onComment, onDelete,
|
|||
onClick={() => onLike(post.id)}
|
||||
variant="plain"
|
||||
shape="none"
|
||||
icon={post.isLiked ? <FaHeart className="h-5 w-5" /> : <FaRegHeart className="h-5 w-5" />}
|
||||
icon={
|
||||
post.isLiked ? (
|
||||
<FaHeart className="h-5 w-5 text-red-500" />
|
||||
) : (
|
||||
<FaRegHeart className="h-5 w-5" />
|
||||
)
|
||||
}
|
||||
className={classNames(
|
||||
'!h-auto !items-center gap-2 !rounded-none !px-0 !py-0 transition-colors hover:!bg-transparent active:!bg-transparent focus:!bg-transparent',
|
||||
post.isLiked
|
||||
? 'text-red-600 hover:text-red-700'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-red-600',
|
||||
'!h-auto !items-center gap-2 !rounded-none !border-0 !bg-transparent !px-0 !py-0 text-gray-600 transition-colors hover:!bg-transparent active:!bg-transparent focus:!bg-transparent dark:text-gray-400',
|
||||
)}
|
||||
>
|
||||
<span className="text-sm font-medium">{postLikeCount}</span>
|
||||
|
|
@ -337,7 +340,7 @@ const PostItem: React.FC<PostItemProps> = ({ post, onLike, onComment, onDelete,
|
|||
variant="plain"
|
||||
shape="none"
|
||||
icon={<FaRegCommentAlt className="h-5 w-5" />}
|
||||
className="!h-auto !items-center gap-2 !rounded-none !px-0 !py-0 text-gray-600 transition-colors hover:!bg-transparent hover:text-blue-600 active:!bg-transparent focus:!bg-transparent dark:text-gray-400"
|
||||
className="!h-auto !items-center gap-2 !rounded-none !border-0 !bg-transparent !px-0 !py-0 text-gray-600 transition-colors hover:!bg-transparent hover:text-blue-600 active:!bg-transparent focus:!bg-transparent dark:text-gray-400"
|
||||
>
|
||||
<span className="text-sm font-medium">{postComments.length}</span>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
FaTimes,
|
||||
FaEye,
|
||||
FaClipboard,
|
||||
FaChevronLeft,
|
||||
|
|
@ -11,7 +8,6 @@ import {
|
|||
FaExpand,
|
||||
FaCommentAlt,
|
||||
FaPaperPlane,
|
||||
FaHeart,
|
||||
} from 'react-icons/fa'
|
||||
import { Button, Dialog } from '@/components/ui'
|
||||
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
|
||||
|
|
@ -23,15 +19,19 @@ import { AVATAR_URL } from '@/constants/app.constant'
|
|||
import { intranetService } from '@/services/intranet.service'
|
||||
import dayjs from 'dayjs'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import ImageLightbox from './ImageLightbox'
|
||||
import LikeButton from './LikeButton'
|
||||
import { categoryColor, imageSrc } from './widgetUtils'
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
interface AnnouncementModalProps {
|
||||
announcement: AnnouncementDto
|
||||
onClose: () => void
|
||||
onLikeChange?: (announcement: AnnouncementDto) => void
|
||||
}
|
||||
|
||||
function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalProps) {
|
||||
function AnnouncementModalContent({ announcement, onClose, onLikeChange }: AnnouncementModalProps) {
|
||||
const { translate } = useLocalization()
|
||||
const currentLocale = useLocale()
|
||||
const { isMaximized } = useDialogContext()
|
||||
|
|
@ -51,14 +51,6 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
|
|||
setLightboxOpen(true)
|
||||
}
|
||||
const closeLightbox = () => setLightboxOpen(false)
|
||||
const prevLightbox = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
setLightboxIndex((i) => (i - 1 + images.length) % images.length)
|
||||
}
|
||||
const nextLightbox = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
setLightboxIndex((i) => (i + 1) % images.length)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
intranetService.incrementAnnouncementViewCount(announcement.id)
|
||||
|
|
@ -107,8 +99,14 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
|
|||
try {
|
||||
const res = await intranetService.likeAnnouncement(announcement.id)
|
||||
if (res.data) {
|
||||
setLikes(res.data.likes ?? 0)
|
||||
setIsLiked(res.data.isLiked ?? false)
|
||||
const updatedAnnouncement = {
|
||||
...announcement,
|
||||
likes: res.data.likes ?? 0,
|
||||
isLiked: res.data.isLiked ?? false,
|
||||
}
|
||||
setLikes(updatedAnnouncement.likes ?? 0)
|
||||
setIsLiked(updatedAnnouncement.isLiked ?? false)
|
||||
onLikeChange?.(updatedAnnouncement)
|
||||
}
|
||||
} catch {
|
||||
setIsLiked((prev) => !prev)
|
||||
|
|
@ -127,25 +125,6 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
|
|||
const attachments = Array.isArray(announcement.attachments) ? announcement.attachments : []
|
||||
const category = announcement.category || 'general'
|
||||
|
||||
const imgSrc = (img: string) =>
|
||||
img.startsWith('data:') ||
|
||||
img.startsWith('http://') ||
|
||||
img.startsWith('https://') ||
|
||||
img.startsWith('/')
|
||||
? img
|
||||
: `data:image/jpeg;base64,${img}`
|
||||
|
||||
const getCategoryColor = (category: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
general: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
||||
hr: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
|
||||
it: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
|
||||
event: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
||||
urgent: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
|
||||
}
|
||||
return colors[category] || colors.general
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog.Body className="flex flex-col min-h-0">
|
||||
|
|
@ -155,7 +134,7 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
|
|||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span
|
||||
className={`px-3 py-1 text-xs font-medium rounded-full ${getCategoryColor(category)}`}
|
||||
className={`px-3 py-1 text-xs font-medium rounded-full ${categoryColor(category)}`}
|
||||
>
|
||||
{category === 'general' &&
|
||||
`📢 ${translate('::App.Platform.Intranet.AnnouncementDetailModal.Category.General')}`}
|
||||
|
|
@ -197,21 +176,12 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
|
|||
{announcement.viewCount}{' '}
|
||||
{translate('::App.Platform.Intranet.AnnouncementDetailModal.Views')}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
<LikeButton
|
||||
onClick={handleLike}
|
||||
disabled={liking}
|
||||
variant="plain"
|
||||
size="xs"
|
||||
className={`!h-auto !items-center gap-2 !rounded !border-0 !px-2 !py-1 text-xs font-medium transition-colors ${
|
||||
isLiked
|
||||
? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/40'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600'
|
||||
} disabled:opacity-50 disabled:cursor-not-allowed`}
|
||||
>
|
||||
<FaHeart className={`w-4 h-4 ${isLiked ? 'text-red-500' : ''}`} />
|
||||
{likes > 0 && likes}
|
||||
</Button>
|
||||
isLiked={isLiked}
|
||||
likes={likes}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -241,7 +211,7 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
|
|||
<div className="mx-auto border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="mt-3 w-full relative rounded-lg overflow-hidden dark:bg-gray-900 mb-2">
|
||||
<img
|
||||
src={imgSrc(images[activePhoto])}
|
||||
src={imageSrc(images[activePhoto])}
|
||||
alt={`${announcement.title} ${activePhoto + 1}`}
|
||||
className="w-full h-56 object-contain cursor-zoom-in"
|
||||
onClick={() => openLightbox(activePhoto)}
|
||||
|
|
@ -298,7 +268,7 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
|
|||
}`}
|
||||
>
|
||||
<img
|
||||
src={imgSrc(img)}
|
||||
src={imageSrc(img)}
|
||||
alt={`${announcement.title} thumbnail ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
|
@ -416,7 +386,7 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
|
|||
'::App.Platform.Intranet.SocialWall.PostItem.CommentPlaceholder',
|
||||
)}
|
||||
rows={1}
|
||||
className="flex-1 resize-none px-2 py-1 text-sm rounded-xl border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
|
||||
className="flex-1 resize-none px-2 py-1 text-sm rounded-xl bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 transition-colors"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
|
|
@ -438,86 +408,31 @@ function AnnouncementModalContent({ announcement, onClose }: AnnouncementModalPr
|
|||
</Button>
|
||||
</Dialog.Footer>
|
||||
|
||||
{/* Lightbox */}
|
||||
{createPortal(
|
||||
<AnimatePresence>
|
||||
{lightboxOpen && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/95 z-[1100]"
|
||||
onClick={closeLightbox}
|
||||
/>
|
||||
<div className="fixed inset-0 z-[1110] flex items-center justify-center">
|
||||
<Button
|
||||
onClick={closeLightbox}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
icon={<FaTimes className="h-8 w-8" />}
|
||||
className="absolute top-4 right-4 z-10 !h-12 !w-12 !px-0 text-white transition-colors hover:text-gray-300"
|
||||
/>
|
||||
{images.length > 1 && (
|
||||
<>
|
||||
<Button
|
||||
onClick={prevLightbox}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
icon={<FaChevronLeft className="h-6 w-6" />}
|
||||
className="absolute left-4 top-1/2 z-10 !h-12 !w-12 -translate-y-1/2 !px-0 bg-black/50 text-white transition-colors hover:!bg-black/70"
|
||||
/>
|
||||
<Button
|
||||
onClick={nextLightbox}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
icon={<FaChevronRight className="h-6 w-6" />}
|
||||
className="absolute right-4 top-1/2 z-10 !h-12 !w-12 -translate-y-1/2 !px-0 bg-black/50 text-white transition-colors hover:!bg-black/70"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<motion.img
|
||||
key={lightboxIndex}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
src={imgSrc(images[lightboxIndex])}
|
||||
alt={`${announcement.title} ${lightboxIndex + 1}`}
|
||||
className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
{images.length > 1 && (
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
|
||||
{images.map((_, idx) => (
|
||||
<Button
|
||||
key={idx}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setLightboxIndex(idx)
|
||||
}}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
className={`!h-2.5 !w-2.5 !min-w-2.5 !px-0 transition-all ${
|
||||
idx === lightboxIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/70'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body,
|
||||
)}
|
||||
<ImageLightbox
|
||||
images={images}
|
||||
activeIndex={lightboxIndex}
|
||||
isOpen={lightboxOpen}
|
||||
altPrefix={announcement.title}
|
||||
getSrc={imageSrc}
|
||||
onClose={closeLightbox}
|
||||
onChangeIndex={setLightboxIndex}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const AnnouncementModal: React.FC<AnnouncementModalProps> = ({ announcement, onClose }) => {
|
||||
const AnnouncementModal: React.FC<AnnouncementModalProps> = ({
|
||||
announcement,
|
||||
onClose,
|
||||
onLikeChange,
|
||||
}) => {
|
||||
return (
|
||||
<Dialog isOpen onClose={onClose} onRequestClose={onClose} width={768}>
|
||||
<AnnouncementModalContent announcement={announcement} onClose={onClose} />
|
||||
<AnnouncementModalContent
|
||||
announcement={announcement}
|
||||
onClose={onClose}
|
||||
onLikeChange={onLikeChange}
|
||||
/>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React from 'react'
|
||||
import { FaBell, FaClipboardCheck, FaEye } from 'react-icons/fa'
|
||||
import { FaBell, FaClipboardCheck, FaEye, FaHeart } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { AnnouncementDto } from '@/proxy/intranet/models'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { Avatar } from '@/components/ui'
|
||||
import { AVATAR_URL } from '@/constants/app.constant'
|
||||
import { categoryColor } from './widgetUtils'
|
||||
|
||||
interface AnnouncementsProps {
|
||||
announcements: AnnouncementDto[]
|
||||
|
|
@ -16,17 +17,6 @@ const Announcements: React.FC<AnnouncementsProps> = ({ announcements, onAnnounce
|
|||
const pinnedAnnouncements = safeAnnouncements.filter((a) => a?.isPinned).slice(0, 3)
|
||||
const { translate } = useLocalization()
|
||||
|
||||
const getCategoryColor = (category: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
general: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
||||
hr: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
|
||||
it: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
|
||||
event: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
||||
urgent: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
|
||||
}
|
||||
return colors[category] || colors.general
|
||||
}
|
||||
|
||||
const getUserName = (announcement: AnnouncementDto) => {
|
||||
const announcementUser = announcement.user
|
||||
return (
|
||||
|
|
@ -61,7 +51,7 @@ const Announcements: React.FC<AnnouncementsProps> = ({ announcements, onAnnounce
|
|||
</h3>
|
||||
{announcement.category && (
|
||||
<span
|
||||
className={`px-2 py-1 text-center text-xs rounded-full ${getCategoryColor(announcement.category || 'general')}`}
|
||||
className={`px-2 py-1 text-center text-xs rounded-full ${categoryColor(announcement.category)}`}
|
||||
>
|
||||
{(() => {
|
||||
const key = `::App.Platform.Intranet.Widgets.Announcements.Category.${announcement.category.charAt(0).toUpperCase() + announcement.category.slice(1)}`
|
||||
|
|
@ -88,6 +78,19 @@ const Announcements: React.FC<AnnouncementsProps> = ({ announcements, onAnnounce
|
|||
<FaEye className="w-3 h-3" />
|
||||
{announcement.viewCount ?? 0}
|
||||
</span>
|
||||
{(announcement.likes ?? 0) > 0 && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span
|
||||
className={`flex items-center gap-1 ${
|
||||
announcement.isLiked ? 'text-red-500' : ''
|
||||
}`}
|
||||
>
|
||||
<FaHeart className="w-3 h-3" />
|
||||
{announcement.likes}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
FaTimes,
|
||||
FaChevronLeft,
|
||||
FaChevronRight,
|
||||
FaMapMarkerAlt,
|
||||
|
|
@ -11,7 +8,6 @@ import {
|
|||
FaExpand,
|
||||
FaCommentAlt,
|
||||
FaPaperPlane,
|
||||
FaHeart,
|
||||
} from 'react-icons/fa'
|
||||
import { Button, Dialog } from '@/components/ui'
|
||||
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
|
||||
|
|
@ -24,26 +20,19 @@ import { intranetService } from '@/services/intranet.service'
|
|||
import dayjs from 'dayjs'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import ImageLightbox from './ImageLightbox'
|
||||
import LikeButton from './LikeButton'
|
||||
import { imageSrc } from './widgetUtils'
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
interface EventModalProps {
|
||||
event: EventDto
|
||||
onClose: () => void
|
||||
onLikeChange?: (event: EventDto) => void
|
||||
}
|
||||
|
||||
const imgSrc = (img: string) => {
|
||||
if (
|
||||
img.startsWith('data:') ||
|
||||
img.startsWith('http://') ||
|
||||
img.startsWith('https://') ||
|
||||
img.startsWith('/')
|
||||
)
|
||||
return img
|
||||
return `data:image/jpeg;base64,${img}`
|
||||
}
|
||||
|
||||
function EventModalContent({ event, onClose }: EventModalProps) {
|
||||
function EventModalContent({ event, onClose, onLikeChange }: EventModalProps) {
|
||||
const currentLocale = useLocale()
|
||||
const photos = (event.photos || '').split('|').filter(Boolean)
|
||||
const { translate } = useLocalization()
|
||||
|
|
@ -108,8 +97,14 @@ function EventModalContent({ event, onClose }: EventModalProps) {
|
|||
try {
|
||||
const res = await intranetService.likeEvent(event.id)
|
||||
if (res.data) {
|
||||
setLikes(res.data.likes)
|
||||
setIsLiked(res.data.isLiked)
|
||||
const updatedEvent = {
|
||||
...event,
|
||||
likes: res.data.likes,
|
||||
isLiked: res.data.isLiked,
|
||||
}
|
||||
setLikes(updatedEvent.likes)
|
||||
setIsLiked(updatedEvent.isLiked)
|
||||
onLikeChange?.(updatedEvent)
|
||||
}
|
||||
} catch {
|
||||
// Revert on error
|
||||
|
|
@ -127,16 +122,6 @@ function EventModalContent({ event, onClose }: EventModalProps) {
|
|||
|
||||
const closeLightbox = () => setLightboxOpen(false)
|
||||
|
||||
const prevLightbox = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
setLightboxIndex((i) => (i - 1 + photos.length) % photos.length)
|
||||
}
|
||||
|
||||
const nextLightbox = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
setLightboxIndex((i) => (i + 1) % photos.length)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog.Body className="flex flex-col min-h-0">
|
||||
|
|
@ -165,20 +150,12 @@ function EventModalContent({ event, onClose }: EventModalProps) {
|
|||
</span>
|
||||
)}
|
||||
<div>
|
||||
<Button
|
||||
<LikeButton
|
||||
onClick={handleLike}
|
||||
disabled={liking}
|
||||
variant="plain"
|
||||
size="xs"
|
||||
className={`!h-auto !items-center gap-2 !rounded !border-0 !px-2 !py-1 text-xs font-xs transition-colors ${
|
||||
isLiked
|
||||
? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/40'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600'
|
||||
} disabled:opacity-50 disabled:cursor-not-allowed`}
|
||||
>
|
||||
<FaHeart className={`w-4 h-4 ${isLiked ? 'text-red-500' : ''}`} />
|
||||
{likes > 0 && likes}
|
||||
</Button>
|
||||
isLiked={isLiked}
|
||||
likes={likes}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -206,7 +183,7 @@ function EventModalContent({ event, onClose }: EventModalProps) {
|
|||
{/* Main photo */}
|
||||
<div className="relative w-full rounded-lg overflow-hidden dark:bg-gray-900 mb-2 mx-auto">
|
||||
<img
|
||||
src={imgSrc(photos[activePhoto])}
|
||||
src={imageSrc(photos[activePhoto])}
|
||||
alt={`${event.name} ${activePhoto + 1}`}
|
||||
className="w-full h-56 object-contain cursor-zoom-in"
|
||||
onClick={() => openLightbox(activePhoto)}
|
||||
|
|
@ -260,7 +237,7 @@ function EventModalContent({ event, onClose }: EventModalProps) {
|
|||
}`}
|
||||
>
|
||||
<img
|
||||
src={imgSrc(photo)}
|
||||
src={imageSrc(photo)}
|
||||
alt={`Thumbnail ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
|
@ -336,7 +313,7 @@ function EventModalContent({ event, onClose }: EventModalProps) {
|
|||
onKeyDown={handleKeyDown}
|
||||
placeholder={translate('::App.Intranet.Events.EventAttendance')}
|
||||
rows={1}
|
||||
className="flex-1 resize-none px-2 py-1 text-sm rounded-xl border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors"
|
||||
className="flex-1 resize-none px-2 py-1 text-sm rounded-xl bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 transition-colors"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
|
|
@ -357,86 +334,23 @@ function EventModalContent({ event, onClose }: EventModalProps) {
|
|||
</Button>
|
||||
</Dialog.Footer>
|
||||
|
||||
{/* Lightbox */}
|
||||
{createPortal(
|
||||
<AnimatePresence>
|
||||
{lightboxOpen && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/95 z-[1100]"
|
||||
onClick={closeLightbox}
|
||||
/>
|
||||
<div className="fixed inset-0 z-[1110] flex items-center justify-center">
|
||||
<Button
|
||||
onClick={closeLightbox}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
icon={<FaTimes className="h-8 w-8" />}
|
||||
className="absolute top-4 right-4 z-10 !h-12 !w-12 !px-0 text-white transition-colors hover:text-gray-300"
|
||||
/>
|
||||
{photos.length > 1 && (
|
||||
<>
|
||||
<Button
|
||||
onClick={prevLightbox}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
icon={<FaChevronLeft className="h-6 w-6" />}
|
||||
className="absolute left-4 top-1/2 z-10 !h-12 !w-12 -translate-y-1/2 !px-0 bg-black/50 text-white transition-colors hover:!bg-black/70"
|
||||
/>
|
||||
<Button
|
||||
onClick={nextLightbox}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
icon={<FaChevronRight className="h-6 w-6" />}
|
||||
className="absolute right-4 top-1/2 z-10 !h-12 !w-12 -translate-y-1/2 !px-0 bg-black/50 text-white transition-colors hover:!bg-black/70"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<motion.img
|
||||
key={lightboxIndex}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
src={imgSrc(photos[lightboxIndex])}
|
||||
alt={`${event.name} ${lightboxIndex + 1}`}
|
||||
className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
{photos.length > 1 && (
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
|
||||
{photos.map((_, idx) => (
|
||||
<Button
|
||||
key={idx}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setLightboxIndex(idx)
|
||||
}}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
className={`!h-2.5 !w-2.5 !min-w-2.5 !px-0 transition-all ${
|
||||
idx === lightboxIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/70'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body,
|
||||
)}
|
||||
<ImageLightbox
|
||||
images={photos}
|
||||
activeIndex={lightboxIndex}
|
||||
isOpen={lightboxOpen}
|
||||
altPrefix={event.name}
|
||||
getSrc={imageSrc}
|
||||
onClose={closeLightbox}
|
||||
onChangeIndex={setLightboxIndex}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const EventModal: React.FC<EventModalProps> = ({ event, onClose }) => {
|
||||
const EventModal: React.FC<EventModalProps> = ({ event, onClose, onLikeChange }) => {
|
||||
return (
|
||||
<Dialog isOpen onClose={onClose} onRequestClose={onClose} width={768}>
|
||||
<EventModalContent event={event} onClose={onClose} />
|
||||
<EventModalContent event={event} onClose={onClose} onLikeChange={onLikeChange} />
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ import { currentLocalDate } from '@/utils/dateUtils'
|
|||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
import { Avatar } from '@/components/ui'
|
||||
import { AVATAR_URL } from '@/constants/app.constant'
|
||||
import { imageSrc } from './widgetUtils'
|
||||
|
||||
interface UpcomingEventsProps {
|
||||
interface EventsProps {
|
||||
events: EventDto[]
|
||||
onEventClick?: (event: EventDto) => void
|
||||
}
|
||||
|
|
@ -19,18 +20,7 @@ const getFirstPhoto = (photos?: string): string | null => {
|
|||
return parts.length > 0 ? parts[0] : null
|
||||
}
|
||||
|
||||
const photoSrc = (img: string) => {
|
||||
if (
|
||||
img.startsWith('data:') ||
|
||||
img.startsWith('http://') ||
|
||||
img.startsWith('https://') ||
|
||||
img.startsWith('/')
|
||||
)
|
||||
return img
|
||||
return `data:image/jpeg;base64,${img}`
|
||||
}
|
||||
|
||||
const UpcomingEvents: React.FC<UpcomingEventsProps> = ({ events, onEventClick }) => {
|
||||
const Events: React.FC<EventsProps> = ({ events, onEventClick }) => {
|
||||
const currentLocale = useLocale()
|
||||
const { translate } = useLocalization()
|
||||
|
||||
|
|
@ -96,7 +86,7 @@ const UpcomingEvents: React.FC<UpcomingEventsProps> = ({ events, onEventClick })
|
|||
</div>
|
||||
{firstPhoto && (
|
||||
<img
|
||||
src={photoSrc(firstPhoto)}
|
||||
src={imageSrc(firstPhoto)}
|
||||
alt={event.name}
|
||||
className="w-14 h-14 rounded-lg object-cover flex-shrink-0"
|
||||
/>
|
||||
|
|
@ -120,5 +110,5 @@ const UpcomingEvents: React.FC<UpcomingEventsProps> = ({ events, onEventClick })
|
|||
)
|
||||
}
|
||||
|
||||
export default UpcomingEvents
|
||||
export default Events
|
||||
|
||||
104
ui/src/views/intranet/widgets/ImageLightbox.tsx
Normal file
104
ui/src/views/intranet/widgets/ImageLightbox.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import { createPortal } from 'react-dom'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { FaChevronLeft, FaChevronRight, FaTimes } from 'react-icons/fa'
|
||||
import { Button } from '@/components/ui'
|
||||
import type { MouseEvent } from 'react'
|
||||
|
||||
interface ImageLightboxProps {
|
||||
images: string[]
|
||||
activeIndex: number
|
||||
isOpen: boolean
|
||||
altPrefix: string
|
||||
getSrc: (img: string) => string
|
||||
onClose: () => void
|
||||
onChangeIndex: (index: number) => void
|
||||
}
|
||||
|
||||
const ImageLightbox = ({
|
||||
images,
|
||||
activeIndex,
|
||||
isOpen,
|
||||
altPrefix,
|
||||
getSrc,
|
||||
onClose,
|
||||
onChangeIndex,
|
||||
}: ImageLightboxProps) => {
|
||||
const changeBy = (delta: number) => (event: MouseEvent) => {
|
||||
event.stopPropagation()
|
||||
onChangeIndex((activeIndex + delta + images.length) % images.length)
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/95 z-[1100]"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="fixed inset-0 z-[1110] flex items-center justify-center">
|
||||
<Button
|
||||
onClick={onClose}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
icon={<FaTimes className="h-8 w-8" />}
|
||||
className="absolute top-4 right-4 z-10 !h-12 !w-12 !px-0 text-white transition-colors hover:text-gray-300"
|
||||
/>
|
||||
{images.length > 1 && (
|
||||
<>
|
||||
<Button
|
||||
onClick={changeBy(-1)}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
icon={<FaChevronLeft className="h-6 w-6" />}
|
||||
className="absolute left-4 top-1/2 z-10 !h-12 !w-12 -translate-y-1/2 !px-0 bg-black/50 text-white transition-colors hover:!bg-black/70"
|
||||
/>
|
||||
<Button
|
||||
onClick={changeBy(1)}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
icon={<FaChevronRight className="h-6 w-6" />}
|
||||
className="absolute right-4 top-1/2 z-10 !h-12 !w-12 -translate-y-1/2 !px-0 bg-black/50 text-white transition-colors hover:!bg-black/70"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<motion.img
|
||||
key={activeIndex}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
src={getSrc(images[activeIndex])}
|
||||
alt={`${altPrefix} ${activeIndex + 1}`}
|
||||
className="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
/>
|
||||
{images.length > 1 && (
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
|
||||
{images.map((_, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation()
|
||||
onChangeIndex(index)
|
||||
}}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
className={`!h-2.5 !w-2.5 !min-w-2.5 !px-0 transition-all ${
|
||||
index === activeIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/70'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
|
||||
export default ImageLightbox
|
||||
25
ui/src/views/intranet/widgets/LikeButton.tsx
Normal file
25
ui/src/views/intranet/widgets/LikeButton.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { FaHeart } from 'react-icons/fa'
|
||||
import { Button } from '@/components/ui'
|
||||
|
||||
interface LikeButtonProps {
|
||||
likes?: number
|
||||
isLiked?: boolean
|
||||
disabled?: boolean
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const LikeButton = ({ likes = 0, isLiked = false, disabled, onClick }: LikeButtonProps) => (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
variant="plain"
|
||||
size="xs"
|
||||
className="!inline-flex !h-auto !flex-row !items-center gap-2 whitespace-nowrap !rounded-none !border-0 !bg-transparent !px-0 !py-0 text-xs font-xs text-gray-600 transition-colors hover:!bg-transparent active:!bg-transparent focus:!bg-transparent disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-300"
|
||||
>
|
||||
<FaHeart className={`h-4 w-4 flex-shrink-0 ${isLiked ? 'text-red-500' : ''}`} />
|
||||
{likes > 0 && <span className="leading-none">{likes}</span>}
|
||||
</Button>
|
||||
)
|
||||
|
||||
export default LikeButton
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from 'react'
|
||||
import { Button, Dialog } from '@/components/ui'
|
||||
import { Button, Dialog, Rate } from '@/components/ui'
|
||||
import { useDialogContext } from '@/components/ui/Dialog/Dialog'
|
||||
import { SurveyAnswerDto, SurveyDto, SurveyQuestionDto } from '@/proxy/intranet/models'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
|
|
@ -93,24 +93,14 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
|
|||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{questionNumber}. {question.questionText} {question.isRequired && '*'}
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Button
|
||||
key={star}
|
||||
type="button"
|
||||
onClick={() => handleAnswerChange(question.id, star)}
|
||||
variant="plain"
|
||||
shape="circle"
|
||||
className={`!h-8 !w-8 !px-0 text-2xl transition-colors ${
|
||||
(answers[question.id] ?? 0) >= star
|
||||
? 'text-yellow-400'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-yellow-300'
|
||||
}`}
|
||||
>
|
||||
★
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<Rate
|
||||
value={answers[question.id] ?? 0}
|
||||
onChange={(value) => handleAnswerChange(question.id, value)}
|
||||
allowClear={false}
|
||||
size={20}
|
||||
gap={8}
|
||||
color="yellow"
|
||||
/>
|
||||
{hasError && (
|
||||
<p className="text-sm text-red-600 dark:text-red-400">{errors[question.id]}</p>
|
||||
)}
|
||||
|
|
@ -246,7 +236,7 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
|
|||
</div>
|
||||
|
||||
<div
|
||||
className={`py-6 space-y-6 overflow-y-auto ${
|
||||
className={`p-2 space-y-6 overflow-y-auto [scrollbar-color:#6b7280_transparent] [scrollbar-width:thin] ${
|
||||
isMaximized ? 'flex-1 min-h-0' : 'max-h-[65vh]'
|
||||
}`}
|
||||
>
|
||||
|
|
@ -277,7 +267,7 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
|
|||
<Dialog.Footer className="flex gap-3 pt-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
|
||||
<Button
|
||||
block
|
||||
size="sm"
|
||||
size="md"
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
variant="default"
|
||||
|
|
@ -286,7 +276,7 @@ function SurveyModalContent({ survey, onClose, onSubmit }: SurveyModalProps) {
|
|||
</Button>
|
||||
<Button
|
||||
block
|
||||
size="sm"
|
||||
size="md"
|
||||
type="submit"
|
||||
variant="solid"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { FaClipboardCheck, FaQuestionCircle, FaUsers, FaClock, FaArrowRight } from 'react-icons/fa'
|
||||
import dayjs from 'dayjs'
|
||||
import { SurveyDto } from '@/proxy/intranet/models'
|
||||
|
|
@ -15,6 +15,7 @@ interface SurveysProps {
|
|||
const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
||||
const currentLocale = useLocale()
|
||||
const { translate } = useLocalization()
|
||||
const [hoveredSurveyId, setHoveredSurveyId] = useState<string | null>(null)
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-lg border border-gray-200/50 dark:border-gray-700/50 overflow-hidden">
|
||||
|
|
@ -32,20 +33,31 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
const daysLeft = dayjs(survey.deadline).diff(dayjs(), 'day')
|
||||
const urgency = daysLeft <= 3 ? 'urgent' : daysLeft <= 7 ? 'warning' : 'normal'
|
||||
const isCompleted = !!survey.myResponse
|
||||
const isHovered = hoveredSurveyId === survey.id
|
||||
|
||||
return (
|
||||
<div
|
||||
key={survey.id}
|
||||
onClick={() => onTakeSurvey(survey)}
|
||||
className={`group relative p-5 rounded-xl border cursor-pointer transition-all duration-300 hover:shadow-lg hover:-translate-y-1 ${
|
||||
onMouseEnter={() => setHoveredSurveyId(survey.id)}
|
||||
onMouseLeave={() => setHoveredSurveyId(null)}
|
||||
className={`relative p-5 rounded-xl border cursor-pointer transition-all duration-300 ${
|
||||
isHovered ? '-translate-y-1 shadow-lg' : ''
|
||||
} ${
|
||||
isCompleted
|
||||
? 'bg-green-50 dark:bg-green-900/30 border-green-300 dark:border-green-700 hover:border-green-400 dark:hover:border-green-500'
|
||||
: 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500'
|
||||
? `bg-green-50 dark:bg-green-900/30 border-green-300 dark:border-green-700 ${
|
||||
isHovered ? 'border-green-400 dark:border-green-500' : ''
|
||||
}`
|
||||
: `bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 ${
|
||||
isHovered ? 'border-purple-300 dark:border-purple-500' : ''
|
||||
}`
|
||||
}`}
|
||||
>
|
||||
{/* Background gradient on hover */}
|
||||
<div
|
||||
className={`absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none ${
|
||||
className={`absolute inset-0 rounded-xl transition-opacity duration-300 pointer-events-none ${
|
||||
isHovered ? 'opacity-100' : 'opacity-0'
|
||||
} ${
|
||||
isCompleted
|
||||
? 'bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20'
|
||||
: 'bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20'
|
||||
|
|
@ -72,8 +84,12 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
<h4
|
||||
className={`text-base font-semibold transition-colors ${
|
||||
isCompleted
|
||||
? 'text-green-800 dark:text-green-300 group-hover:text-green-700 dark:group-hover:text-green-200'
|
||||
: 'text-gray-900 dark:text-white group-hover:text-purple-700 dark:group-hover:text-purple-300'
|
||||
? isHovered
|
||||
? 'text-green-700 dark:text-green-200'
|
||||
: 'text-green-800 dark:text-green-300'
|
||||
: isHovered
|
||||
? 'text-purple-700 dark:text-purple-300'
|
||||
: 'text-gray-900 dark:text-white'
|
||||
}`}
|
||||
>
|
||||
{survey.title}
|
||||
|
|
@ -167,9 +183,15 @@ const Surveys: React.FC<SurveysProps> = ({ surveys, onTakeSurvey }) => {
|
|||
<Button
|
||||
variant="plain"
|
||||
icon={
|
||||
<FaArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-1" />
|
||||
<FaArrowRight
|
||||
className={`h-3 w-3 transition-transform ${
|
||||
isHovered ? 'translate-x-1' : ''
|
||||
}`}
|
||||
/>
|
||||
}
|
||||
className={`w-full !h-auto !justify-center gap-2 !rounded-lg !px-4 !py-3 text-sm font-medium text-white shadow-sm transition-all duration-300 hover:shadow-md group-hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-purple-400 ${
|
||||
className={`w-full !h-auto !justify-center gap-2 !rounded-lg !px-4 !py-3 text-sm font-medium text-white shadow-sm transition-all duration-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-purple-400 ${
|
||||
isHovered ? 'scale-[1.02]' : ''
|
||||
} ${
|
||||
isCompleted
|
||||
? 'bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 dark:from-green-600 dark:to-emerald-600 dark:hover:from-green-700 dark:hover:to-emerald-700'
|
||||
: 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 dark:from-purple-700 dark:to-pink-700 dark:hover:from-purple-800 dark:hover:to-pink-800'
|
||||
|
|
|
|||
24
ui/src/views/intranet/widgets/widgetUtils.ts
Normal file
24
ui/src/views/intranet/widgets/widgetUtils.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
export const imageSrc = (img: string) => {
|
||||
if (
|
||||
img.startsWith('data:') ||
|
||||
img.startsWith('http://') ||
|
||||
img.startsWith('https://') ||
|
||||
img.startsWith('/')
|
||||
) {
|
||||
return img
|
||||
}
|
||||
|
||||
return `data:image/jpeg;base64,${img}`
|
||||
}
|
||||
|
||||
export const categoryColor = (category?: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
general: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
||||
hr: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
|
||||
it: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
|
||||
event: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
||||
urgent: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
|
||||
}
|
||||
|
||||
return colors[category || 'general'] || colors.general
|
||||
}
|
||||
Loading…
Reference in a new issue