mirror of
https://github.com/makeplane/plane.git
synced 2025-12-16 11:57:56 +01:00
* feat: implement cover image handling and static image selection - Added functionality to handle cover image uploads and selections in project and profile forms. - Introduced a new helper for managing cover images, including static images and uploaded assets. - Updated components to utilize the new cover image helper for displaying and processing cover images. - Added a set of static cover images for selection in the image picker. - Enhanced error handling for image uploads and processing. This update improves the user experience by providing a more robust cover image management system. * refactor: rename STATIC_COVER_IMAGES_ARRAY to STATIC_COVER_IMAGES for consistency - Updated the cover image helper to export STATIC_COVER_IMAGES instead of STATIC_COVER_IMAGES_ARRAY. - Adjusted the ImagePickerPopover component to utilize the renamed export for rendering static cover images. * feat: enhance project creation and image handling - Introduced default project form values with a random emoji for logo props. - Updated cover image handling in various components, ensuring consistent usage of the new cover image helper. - Refactored image picker to improve search functionality and loading states. - Removed unused constants and streamlined cover image type checks for better clarity and performance. This update enhances the user experience in project creation and image selection processes. * refactor: simplify cover image type definition and clean up code - Removed duplicate type from TCoverImageType, streamlining the definition. - Cleaned up whitespace in the cover image helper for improved readability. This update enhances code clarity and maintains consistency in cover image handling. * refactor: update cover image type definitions and simplify logic - Changed ICoverImageResult and ICoverImagePayload interfaces to type aliases for better clarity. - Simplified the logic in getCoverImageDisplayURL function to enhance readability and maintainability. This update improves the structure and clarity of the cover image helper code. * refactor: remove unused project cover image endpoint and update cover image handling - Removed the ProjectPublicCoverImagesEndpoint and its associated URL from the project. - Updated the cover image handling in the cover-image helper to utilize imported assets instead of static paths. - Cleaned up the ProjectFavoritesViewSet and FileService by removing the now obsolete getProjectCoverImages method. This update streamlines the cover image management and eliminates unnecessary code, enhancing overall maintainability. * refactor: update cover image imports to new asset structure - Replaced static path imports for cover images with updated paths to the new asset structure. - This change improves organization and maintainability of cover image assets in the project. This update aligns with recent refactoring efforts to streamline cover image handling. * feat: add additional cover images to the helper - Imported new cover images (24 to 29) into the cover-image helper. - This update expands the available cover image options for use in the project, enhancing visual variety. * refactor: remove ProjectPublicCoverImagesEndpoint from project URLs and views * refactor: update cover image imports to include URL query parameter - Modified cover image imports in the cover-image helper to append a URL query parameter for better asset handling. - This change enhances the way cover images are processed and utilized within the project. * refactor: extract default project form values into a utility function - Created a new utility function `getProjectFormValues` to encapsulate the default project form values. - Updated the `CreateProjectForm` component to use this utility function for setting default form values, improving code organization and maintainability. * feat: integrate project update functionality in CreateProjectForm - Added `updateProject` method to the `CreateProjectForm` component for updating project cover images after creation. - Enhanced cover image handling by ensuring the correct URL is set for both uploaded and existing cover images. This update improves the project creation workflow and ensures cover images are accurately updated. * fix: update documentation for cover image handling - Corrected the comment regarding local static images to reflect that they are served from the assets folder instead of the public folder. - This change ensures accurate documentation for the `getCoverImageType` and `getCoverImageDisplayURL` functions, improving clarity for future developers. * feat: implement random cover image selection for project forms - Replaced the default cover image URL with a new utility function `getRandomCoverImage` that selects a random cover image from the available options. - Updated the `getProjectFormValues` function to utilize this new method, enhancing the project creation experience with varied cover images. --------- Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
285 lines
8.5 KiB
TypeScript
285 lines
8.5 KiB
TypeScript
import type { EFileAssetType } from "@plane/types";
|
|
import { getFileURL } from "@plane/utils";
|
|
|
|
import CoverImage1 from "@/app/assets/cover-images/image_1.jpg?url";
|
|
import CoverImage10 from "@/app/assets/cover-images/image_10.jpg?url";
|
|
import CoverImage11 from "@/app/assets/cover-images/image_11.jpg?url";
|
|
import CoverImage12 from "@/app/assets/cover-images/image_12.jpg?url";
|
|
import CoverImage13 from "@/app/assets/cover-images/image_13.jpg?url";
|
|
import CoverImage14 from "@/app/assets/cover-images/image_14.jpg?url";
|
|
import CoverImage15 from "@/app/assets/cover-images/image_15.jpg?url";
|
|
import CoverImage16 from "@/app/assets/cover-images/image_16.jpg?url";
|
|
import CoverImage17 from "@/app/assets/cover-images/image_17.jpg?url";
|
|
import CoverImage18 from "@/app/assets/cover-images/image_18.jpg?url";
|
|
import CoverImage19 from "@/app/assets/cover-images/image_19.jpg?url";
|
|
import CoverImage2 from "@/app/assets/cover-images/image_2.jpg?url";
|
|
import CoverImage20 from "@/app/assets/cover-images/image_20.jpg?url";
|
|
import CoverImage21 from "@/app/assets/cover-images/image_21.jpg?url";
|
|
import CoverImage22 from "@/app/assets/cover-images/image_22.jpg?url";
|
|
import CoverImage23 from "@/app/assets/cover-images/image_23.jpg?url";
|
|
import CoverImage24 from "@/app/assets/cover-images/image_24.jpg?url";
|
|
import CoverImage25 from "@/app/assets/cover-images/image_25.jpg?url";
|
|
import CoverImage26 from "@/app/assets/cover-images/image_26.jpg?url";
|
|
import CoverImage27 from "@/app/assets/cover-images/image_27.jpg?url";
|
|
import CoverImage28 from "@/app/assets/cover-images/image_28.jpg?url";
|
|
import CoverImage29 from "@/app/assets/cover-images/image_29.jpg?url";
|
|
import CoverImage3 from "@/app/assets/cover-images/image_3.jpg?url";
|
|
import CoverImage4 from "@/app/assets/cover-images/image_4.jpg?url";
|
|
import CoverImage5 from "@/app/assets/cover-images/image_5.jpg?url";
|
|
import CoverImage6 from "@/app/assets/cover-images/image_6.jpg?url";
|
|
import CoverImage7 from "@/app/assets/cover-images/image_7.jpg?url";
|
|
import CoverImage8 from "@/app/assets/cover-images/image_8.jpg?url";
|
|
import CoverImage9 from "@/app/assets/cover-images/image_9.jpg?url";
|
|
|
|
import { FileService } from "@/services/file.service";
|
|
|
|
const fileService = new FileService();
|
|
|
|
/**
|
|
* Map of all available static cover images
|
|
* These are pre-loaded images available in the assets/cover-images folder
|
|
*/
|
|
export const STATIC_COVER_IMAGES = {
|
|
IMAGE_1: CoverImage1,
|
|
IMAGE_2: CoverImage2,
|
|
IMAGE_3: CoverImage3,
|
|
IMAGE_4: CoverImage4,
|
|
IMAGE_5: CoverImage5,
|
|
IMAGE_6: CoverImage6,
|
|
IMAGE_7: CoverImage7,
|
|
IMAGE_8: CoverImage8,
|
|
IMAGE_9: CoverImage9,
|
|
IMAGE_10: CoverImage10,
|
|
IMAGE_11: CoverImage11,
|
|
IMAGE_12: CoverImage12,
|
|
IMAGE_13: CoverImage13,
|
|
IMAGE_14: CoverImage14,
|
|
IMAGE_15: CoverImage15,
|
|
IMAGE_16: CoverImage16,
|
|
IMAGE_17: CoverImage17,
|
|
IMAGE_18: CoverImage18,
|
|
IMAGE_19: CoverImage19,
|
|
IMAGE_20: CoverImage20,
|
|
IMAGE_21: CoverImage21,
|
|
IMAGE_22: CoverImage22,
|
|
IMAGE_23: CoverImage23,
|
|
IMAGE_24: CoverImage24,
|
|
IMAGE_25: CoverImage25,
|
|
IMAGE_26: CoverImage26,
|
|
IMAGE_27: CoverImage27,
|
|
IMAGE_28: CoverImage28,
|
|
IMAGE_29: CoverImage29,
|
|
} as const;
|
|
|
|
export const DEFAULT_COVER_IMAGE_URL = STATIC_COVER_IMAGES.IMAGE_1;
|
|
|
|
/**
|
|
* Set of static image URLs for fast O(1) lookup
|
|
*/
|
|
const STATIC_COVER_IMAGES_SET = new Set<string>(Object.values(STATIC_COVER_IMAGES));
|
|
|
|
export type TCoverImageType = "local_static" | "uploaded_asset";
|
|
|
|
export type TCoverImageResult = {
|
|
needsUpload: boolean;
|
|
imageType: TCoverImageType;
|
|
shouldUpdate: boolean;
|
|
};
|
|
|
|
export type TCoverImagePayload = {
|
|
cover_image?: string | null;
|
|
cover_image_url?: string | null;
|
|
cover_image_asset?: string | null;
|
|
};
|
|
|
|
/**
|
|
* Checks if a given URL is a valid static cover image
|
|
*/
|
|
export const isStaticCoverImage = (imageUrl: string | null | undefined): boolean => {
|
|
if (!imageUrl) return false;
|
|
return STATIC_COVER_IMAGES_SET.has(imageUrl);
|
|
};
|
|
|
|
/**
|
|
* Determines the type of cover image URL
|
|
* Uses explicit validation against known static images for better accuracy
|
|
*/
|
|
export const getCoverImageType = (imageUrl: string): TCoverImageType => {
|
|
// Check against the explicit set of static images
|
|
if (isStaticCoverImage(imageUrl)) return "local_static";
|
|
|
|
if (imageUrl.startsWith("http")) return "uploaded_asset";
|
|
|
|
return "uploaded_asset";
|
|
};
|
|
|
|
/**
|
|
* Gets the correct display URL for a cover image
|
|
* - Local static images: returned as-is (served from assets folder)
|
|
* - Uploaded assets: processed through getFileURL (adds backend URL)
|
|
*/
|
|
export function getCoverImageDisplayURL(imageUrl: string | null | undefined, fallbackUrl: string): string;
|
|
export function getCoverImageDisplayURL(imageUrl: string | null | undefined, fallbackUrl: null): string | null;
|
|
export function getCoverImageDisplayURL(
|
|
imageUrl: string | null | undefined,
|
|
fallbackUrl: string | null
|
|
): string | null {
|
|
if (!imageUrl) {
|
|
return fallbackUrl;
|
|
}
|
|
|
|
const imageType = getCoverImageType(imageUrl);
|
|
|
|
if (imageType === "local_static") {
|
|
return imageUrl;
|
|
}
|
|
|
|
if (imageType === "uploaded_asset") {
|
|
return getFileURL(imageUrl) || imageUrl;
|
|
}
|
|
|
|
return imageUrl;
|
|
}
|
|
|
|
/**
|
|
* Analyzes cover image change and determines what action to take
|
|
*/
|
|
export const analyzeCoverImageChange = (
|
|
currentImage: string | null | undefined,
|
|
newImage: string | null | undefined
|
|
): TCoverImageResult => {
|
|
const hasChanged = currentImage !== newImage;
|
|
|
|
if (!hasChanged) {
|
|
return {
|
|
needsUpload: false,
|
|
imageType: "uploaded_asset",
|
|
shouldUpdate: false,
|
|
};
|
|
}
|
|
|
|
const imageType = getCoverImageType(newImage ?? "");
|
|
|
|
return {
|
|
needsUpload: imageType === "local_static",
|
|
imageType,
|
|
shouldUpdate: hasChanged,
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Uploads a local static image to S3
|
|
*/
|
|
export const uploadCoverImage = async (
|
|
imageUrl: string,
|
|
uploadConfig: {
|
|
workspaceSlug?: string;
|
|
entityIdentifier: string;
|
|
entityType: EFileAssetType;
|
|
isUserAsset?: boolean;
|
|
}
|
|
): Promise<string> => {
|
|
const { workspaceSlug, entityIdentifier, entityType, isUserAsset = false } = uploadConfig;
|
|
|
|
// Fetch the local image
|
|
const response = await fetch(imageUrl);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch image: ${response.statusText}`);
|
|
}
|
|
|
|
const blob = await response.blob();
|
|
|
|
// Validate it's actually an image
|
|
if (!blob.type.startsWith("image/")) {
|
|
throw new Error("Invalid file type. Please select an image.");
|
|
}
|
|
|
|
const fileName = imageUrl.split("/").pop() || "cover.jpg";
|
|
const file = new File([blob], fileName, { type: blob.type });
|
|
|
|
// Upload based on context
|
|
if (isUserAsset) {
|
|
const uploadResult = await fileService.uploadUserAsset(
|
|
{
|
|
entity_identifier: entityIdentifier,
|
|
entity_type: entityType,
|
|
},
|
|
file
|
|
);
|
|
return uploadResult.asset_url;
|
|
} else {
|
|
if (!workspaceSlug) {
|
|
throw new Error("Workspace slug is required for workspace asset upload");
|
|
}
|
|
|
|
const uploadResult = await fileService.uploadWorkspaceAsset(
|
|
workspaceSlug,
|
|
{
|
|
entity_identifier: entityIdentifier,
|
|
entity_type: entityType,
|
|
},
|
|
file
|
|
);
|
|
return uploadResult.asset_url;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Main utility to handle cover image changes with upload
|
|
* Returns the payload fields that should be updated
|
|
*/
|
|
export const handleCoverImageChange = async (
|
|
currentImage: string | null | undefined,
|
|
newImage: string | null | undefined,
|
|
uploadConfig: {
|
|
workspaceSlug?: string;
|
|
entityIdentifier: string;
|
|
entityType: EFileAssetType;
|
|
isUserAsset?: boolean;
|
|
}
|
|
): Promise<TCoverImagePayload | null> => {
|
|
const analysis = analyzeCoverImageChange(currentImage, newImage);
|
|
|
|
// No change detected
|
|
if (!analysis.shouldUpdate) {
|
|
return null;
|
|
}
|
|
|
|
// Image removed
|
|
if (!newImage) {
|
|
return {
|
|
cover_image: null,
|
|
cover_image_url: null,
|
|
cover_image_asset: null,
|
|
};
|
|
}
|
|
|
|
// Local static image - needs upload
|
|
if (analysis.needsUpload) {
|
|
const uploadedUrl = await uploadCoverImage(newImage, uploadConfig);
|
|
|
|
// For BOTH user assets AND project assets:
|
|
// The backend auto-links when entity_identifier is set correctly
|
|
// For project assets: auto-linked server-side, no payload needed
|
|
// For user assets: return URL for immediate UI feedback
|
|
|
|
if (uploadConfig.isUserAsset) {
|
|
return {
|
|
cover_image_url: uploadedUrl,
|
|
};
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Returns a random cover image from the STATIC_COVER_IMAGES object
|
|
* @returns {string} A random cover image URL
|
|
*/
|
|
export const getRandomCoverImage = (): string =>
|
|
Object.values(STATIC_COVER_IMAGES)[Math.floor(Math.random() * Object.keys(STATIC_COVER_IMAGES).length)];
|