thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

feat: cover image selector for project create

Browse Source
This commit is contained in:
Dakshesh Jain 2023-02-28 20:54:55 +05:30
parent 1b369feb6a
commit b660b1d814
6 changed files with 175 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/app/components/core/index.ts
View File

@ -9,3 +9,4 @@ export * from "./issues-view";
export * from "./link-modal";
export * from "./not-authorized-view";
export * from "./multi-level-select";
export * from "./unsplash-modal";

108
apps/app/components/core/unsplash-modal.tsx Normal file
View File

@ -0,0 +1,108 @@
import React, { useState } from "react";
import Image from "next/image";
import useSWR from "swr";
import { Dialog, Transition } from "@headlessui/react";
// services
import fileService from "services/file.service";
// ui
import { Button, Input, Spinner } from "components/ui";
type Props = {
isOpen: boolean;
handleClose: () => void;
onSelect: (url: string) => void;
};
export const UnsplashImageModal: React.FC<Props> = (props) => {
const { isOpen, handleClose, onSelect } = props;
const [searchQuery, setSearchQuery] = useState<string>("");
const [formData, setFormData] = useState({
search: "",
});
const { data: images } = useSWR(`UNSPLASH_IMAGES_${searchQuery.toUpperCase()}`, () =>
fileService.getUnsplashImages(1, searchQuery)
);
const onClose = () => {
handleClose();
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={onClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative h-[35rem] space-y-5 transform overflow-y-auto rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl sm:p-6">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
Select an image
</Dialog.Title>
<form
onSubmit={(e) => {
e.preventDefault();
setSearchQuery(formData.search);
}}
className="flex items-center"
>
<Input
name="search"
value={formData.search}
onChange={(e) => setFormData({ ...formData, search: e.target.value })}
placeholder="Search for images"
/>
<Button type="submit">Search</Button>
</form>
{images ? (
<div className="grid grid-cols-3 gap-5">
{images.map((image) => (
<button
key={image.id}
className="w-full relative h-32 bg-gray-200 rounded-md overflow-hidden"
type="button"
onClick={() => onSelect(image.urls.small)}
>
<Image src={image.urls.small} layout="fill" objectFit="cover" />
</button>
))}
</div>
) : (
<div className="flex h-96 w-full items-center justify-center">
<Spinner />
</div>
)}
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};

22
apps/app/components/project/create-project-modal.tsx
View File

@ -14,7 +14,10 @@ import workspaceService from "services/workspace.service";
import useToast from "hooks/use-toast";
// ui
import { Button, Input, TextArea, CustomSelect } from "components/ui";
// icons
import { PhotoIcon } from "@heroicons/react/24/outline";
// components
import { UnsplashImageModal } from "components/core";
import EmojiIconPicker from "components/emoji-icon-picker";
// helpers
import { getRandomEmoji } from "helpers/common.helper";
@ -36,6 +39,7 @@ const defaultValues: Partial<IProject> = {
description: "",
network: 2,
icon: getRandomEmoji(),
cover_image: null,
};
const IsGuestCondition: React.FC<{
@ -58,6 +62,7 @@ const IsGuestCondition: React.FC<{
export const CreateProjectModal: React.FC<Props> = (props) => {
const { isOpen, setIsOpen } = props;
const [isUnsplashModalOpen, setIsUnsplashModalOpen] = useState(false);
const [isChangeIdentifierRequired, setIsChangeIdentifierRequired] = useState(true);
const { setToastAlert } = useToast();
@ -173,6 +178,15 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl sm:p-6">
<div className="absolute border-2 rounded-md p-2 bg-red-a500 right-4 top-4">
<button
type="button"
className="w-full h-full flex items-center justify-center outline-none"
onClick={() => setIsUnsplashModalOpen(true)}
>
<PhotoIcon className="w-5 h-5 text-gray-700" />
</button>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-5">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
@ -299,6 +313,14 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
</Transition.Child>
</div>
</div>
<UnsplashImageModal
handleClose={() => setIsUnsplashModalOpen(false)}
isOpen={isUnsplashModalOpen}
onSelect={(imageUrl) => {
setValue("cover_image", imageUrl);
setIsUnsplashModalOpen(false);
}}
/>
</Dialog>
</Transition.Root>
);

1
apps/app/next.config.js
View File

@ -9,6 +9,7 @@ const nextConfig = {
"vinci-web.s3.amazonaws.com",
"planefs-staging.s3.ap-south-1.amazonaws.com",
"planefs.s3.amazonaws.com",
"images.unsplash.com",
],
},
output: "standalone",

42
apps/app/services/file.service.ts
View File

@ -3,6 +3,30 @@ import APIService from "services/api.service";
const { NEXT_PUBLIC_API_BASE_URL } = process.env;
interface UnSplashImage {
id: string;
created_at: Date;
updated_at: Date;
promoted_at: Date;
width: number;
height: number;
color: string;
blur_hash: string;
description: null;
alt_description: string;
urls: UnSplashImageUrls;
[key: string]: any;
}
interface UnSplashImageUrls {
raw: string;
full: string;
regular: string;
small: string;
thumb: string;
small_s3: string;
}
class FileServices extends APIService {
constructor() {
super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
@ -15,6 +39,24 @@ class FileServices extends APIService {
throw error?.response?.data;
});
}
async getUnsplashImages(page: number = 1, query?: string): Promise<UnSplashImage[]> {
const clientId = process.env.NEXT_PUBLIC_UNSPLASH_ACCESS;
const url = query
? `https://api.unsplash.com/search/photos/?client_id=${clientId}&query=${query}&page=${page}&per_page=20`
: `https://api.unsplash.com/photos/?client_id=${clientId}&page=${page}&per_page=20`;
return this.request({
method: "get",
url,
})
.then((response) => {
return response?.data?.results ?? response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
}
export default new FileServices();

1
apps/app/types/projects.d.ts vendored
View File

@ -1,6 +1,7 @@
import type { IUserLite, IWorkspace } from "./";
export interface IProject {
cover_image: string | null;
created_at: Date;
created_by: string;
cycle_view: boolean;