feat(condo): DOMA-13015 files for news (client-side)

apps/condo/domains/common/utils/next/apollo.ts

@@ -176,6 +176,11 @@ const cacheConfig: InitCacheConfig = (cacheOptions) => {
                         read: listHelper.getReadFunction('paginate'),
                         merge: listHelper.mergeLists,
                     },
+                    allNewsItemFiles: {
+                        keyArgs: ['where'],
+                        read: listHelper.getReadFunction('paginate'),
+                        merge: listHelper.mergeLists,
+                    },
                 },
             },
 
@@ -256,6 +261,9 @@ const cacheConfig: InitCacheConfig = (cacheOptions) => {
                 GetNewsSharingRecipientsOutput: {
                     timeToLive: 60 * 1000, // 1 minute in milliseconds
                 },
+                NewsItemFile: {
+                    timeToLive: 60 * 1000, // 1 minute in milliseconds
+                },
             },
         },
     }

apps/condo/domains/news/access/NewsItemFile.js

@@ -45,9 +45,15 @@ async function canReadNewsItemFiles ({ authentication: { item: user }, context }
         const permittedOrganizations = await getEmployedOrRelatedOrganizationsByPermissions(context, user, 'canReadNewsItems')
 
         return {
-            organization: {
-                id_in: permittedOrganizations,
-            },
+            OR:[
+                { organization: { id_in: permittedOrganizations } },
+                {
+                    AND:[
+                        { organization_is_null: true },
+                        { createdBy: { id: user.id } },
+                    ],
+                },
+            ],
         }
     }
 
@@ -57,18 +63,9 @@ async function canReadNewsItemFiles ({ authentication: { item: user }, context }
 async function canManageNewsItemFiles ({ authentication: { item: user }, originalInput, operation, itemId, itemIds, context }) {
     if (!user) return throwAuthenticationError()
     if (user.deletedAt) return false
+    if (user.isAdmin) return true
 
     const isBulkRequest = Array.isArray(originalInput)
-    const isSoftDeleteOperation = operation === 'update'
-        && (
-            isBulkRequest
-                ? (Array.isArray(itemIds) && originalInput.every(item => isSoftDelete(item?.data)))
-                : (itemId && isSoftDelete(originalInput))
-        )
-
-    if (operation === 'update' && !isSoftDeleteOperation) return false
-
-    if (user.isAdmin) return true
 
     if (user.type === STAFF) {
         if (operation === 'create') {
@@ -81,7 +78,7 @@ async function canManageNewsItemFiles ({ authentication: { item: user }, origina
 
                 return await checkPermissionsInEmployedOrRelatedOrganizations(context, user, organizationId, 'canManageNewsItems')
             }
-            return false
+            return true
         } else if (operation === 'update') {
             if (isBulkRequest) {
                 if (!itemIds || !Array.isArray(itemIds)) return false
@@ -97,8 +94,9 @@ async function canManageNewsItemFiles ({ authentication: { item: user }, origina
                 return await checkPermissionsInEmployedOrRelatedOrganizations(context, user, organizationIds, 'canManageNewsItems')
             } else {
                 const newsItemFile = await getById('NewsItemFile', itemId)
-                const organizationId = newsItemFile?.organization || null
+                if (!newsItemFile) return false
 
+                const organizationId = newsItemFile?.organization || null
                 if (!organizationId) return newsItemFile?.createdBy === user.id
 
                 return await checkPermissionsInEmployedOrRelatedOrganizations(context, user, organizationId, 'canManageNewsItems')

apps/condo/domains/news/components/FilesPreview/DocumentsPreview.tsx

@@ -0,0 +1,21 @@
+import { Row, Col } from 'antd'
+import React from 'react'
+
+import { Typography } from '@open-condo/ui'
+
+
+export const DocumentsPreview = ({ files }) => {
+    return (
+        <Row gutter={[0, 8]} style={{ width: '100%' }}>
+            {
+                files?.map((file, ind) => (
+                    <Col key={file?.id || file?.uid || ind} span={24}  style={{ width: '100%' }}>
+                        <div style={{ borderRadius: 12, border: '1px solid #E6E8F1', padding: 12, width: '100%' }}>
+                            <Typography.Text>{file?.response?.originalName}</Typography.Text>
+                        </div>
+                    </Col>
+                ))
+            }
+        </Row>
+    )
+}

apps/condo/domains/news/components/FilesPreview/ImageOrVideoPreview.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react'
+
+import { useDeepCompareEffect } from '@open-condo/codegen/utils/useDeepCompareEffect'
+
+const getImagePreviewFromUrl = (url: string) => {
+    return new Promise<string>((resolve, reject) => {
+        const img = new Image()
+        img.crossOrigin = 'anonymous'
+
+        img.onload = () => {
+            const canvas = document.createElement('canvas')
+            const ctx = canvas.getContext('2d')
+
+            const WIDTH = 1280
+            const HEIGHT = 720
+
+            canvas.width = WIDTH
+            canvas.height = HEIGHT
+
+            const iw = img.width
+            const ih = img.height
+
+            const scale = Math.max(WIDTH / iw, HEIGHT / ih)
+
+            const drawWidth = iw * scale
+            const drawHeight = ih * scale
+
+            const offsetX = (WIDTH - drawWidth) / 2
+            const offsetY = (HEIGHT - drawHeight) / 2
+
+            ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight)
+
+            resolve(canvas.toDataURL('image/jpeg', 0.85))
+        }
+
+        img.onerror = reject
+        img.src = url
+    })
+}
+
+const createVideoPreviewFromUrl = (url: string) => {
+    return new Promise<string>((resolve, reject) => {
+        const video = document.createElement('video')
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        video.preload = 'metadata'
+        video.src = url
+        video.crossOrigin = 'anonymous'
+        video.muted = true
+        video.playsInline = true
+
+        video.onloadedmetadata = () => {
+            video.currentTime = Math.min(1, video.duration / 2)
+        }
+
+        video.onseeked = () => {
+            const WIDTH = 1280
+            const HEIGHT = 720
+
+            canvas.width = WIDTH
+            canvas.height = HEIGHT
+
+            const vw = video.videoWidth
+            const vh = video.videoHeight
+
+            const scale = Math.max(WIDTH / vw, HEIGHT / vh)
+
+            const drawWidth = vw * scale
+            const drawHeight = vh * scale
+
+            const offsetX = (WIDTH - drawWidth) / 2
+            const offsetY = (HEIGHT - drawHeight) / 2
+
+            ctx.drawImage(video, offsetX, offsetY, drawWidth, drawHeight)
+
+            resolve(canvas.toDataURL('image/jpeg', 0.9))
+        }
+
+        video.onerror = reject
+    })
+}
+
+
+export const ImageOrVideoPreview = ({ file }) => {
+    const [preview, setPreview] = useState<string>(null)
+
+    useDeepCompareEffect(() => {
+        const process = async () => {
+            const url = file?.response?.url || file?.url
+
+            let thumb = ''
+            if (file.response?.mimetype?.startsWith('image/')) {
+                thumb = await getImagePreviewFromUrl(url)
+            }
+            if (file.response?.mimetype?.startsWith('video/')) {
+                thumb = await createVideoPreviewFromUrl(url)
+            }
+
+            setPreview(thumb)
+        }
+
+        process()
+    }, [file])
+
+    return (
+        <img src={preview} style={{ borderRadius: 12, border: '1px solid #E6E8F1', width: '100%' }} />
+    )
+}

apps/condo/domains/news/components/FilesUploadList.module.css

@@ -0,0 +1,134 @@
+.upload-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 104px;
+  padding: 4px;
+  overflow: hidden;
+  background: #f5f5f5;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.upload-item--with-thumb {
+  height: 104px;
+}
+
+.upload-item--no-thumb {
+  height: 130px;
+}
+
+/* Контент */
+.media-wrapper {
+  position: relative;
+  width: 100%;
+  height: 104px;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 48px;
+  background: #e0e0e0;
+  border-radius: 6px;
+}
+
+/* Название */
+.file-name {
+  width: 100%;
+  margin-top: 4px;
+  overflow: hidden;
+  font-size: 12px;
+  white-space: nowrap;
+  text-align: center;
+  text-overflow: ellipsis;
+}
+
+/* Длительность */
+.duration {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  padding: 2px 6px;
+  color: #fff;
+  font-size: 10px;
+  background: rgb(0 0 0 / 70%);
+  border-radius: 4px;
+}
+
+/* Overlay */
+.hover-overlay {
+  position: absolute;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(0 0 0 / 0%);
+  border-radius: 6px;
+  transition: background 0.2s;
+  inset: 0;
+}
+
+/* Кнопки */
+.action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 16px;
+  border-radius: 50%;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.eye-button {
+  color: #000;
+  background: rgb(255 255 255 / 85%);
+}
+
+.delete-button {
+  color: #fff;
+  background: rgb(255 0 0 / 85%);
+}
+
+/* Hover */
+.upload-item:hover .hover-overlay {
+  background-color: rgb(0 0 0 / 35%);
+}
+
+.upload-item:hover .action-button {
+  transform: scale(1.05);
+  opacity: 1;
+}
+
+.video-icon-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.video-duration {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  padding: 2px 6px;
+  color: white;
+  font-size: 10px;
+  background: rgb(0 0 0 / 70%);
+  border-radius: 4px;
+}