@mirrormedia/lilith-draft-editor 1.0.0-beta

package/lib/website/readr/custom/selector/post-selector.tsx

@@ -0,0 +1,367 @@
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { Drawer, DrawerController } from '@keystone-ui/modals'
+import { gql, useLazyQuery } from '@keystone-6/core/admin-ui/apollo'
+import { ImageEntity } from './image-selector'
+import { SearchBox, SearchBoxOnChangeFn } from './search-box'
+import { Pagination } from './pagination'
+
+const postsQuery = gql`
+  query Posts($searchText: String!, $take: Int, $skip: Int) {
+    postsCount(where: { name: { contains: $searchText } })
+    posts(
+      where: { name: { contains: $searchText } }
+      take: $take
+      skip: $skip
+    ) {
+      id
+      slug
+      name
+      subtitle
+      heroImage {
+        id
+        name
+        imageFile {
+          url
+        }
+        resized {
+          original
+        }
+      }
+      ogImage {
+        id
+        name
+        imageFile {
+          url
+        }
+        resized {
+          original
+        }
+      }
+    }
+  }
+`
+
+const PostSearchBox = styled(SearchBox)`
+  margin-top: 10px;
+`
+
+const PostSelectionWrapper = styled.div`
+  overflow: auto;
+  margin-top: 10px;
+`
+
+const PostGridsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+`
+
+const PostGridWrapper = styled.div`
+  flex: 0 0 33.3333%;
+  cursor: pointer;
+  padding: 0 10px 10px;
+`
+
+const PostMetaGridsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+`
+
+const PostMetaGridWrapper = styled.div`
+  flex: 0 0 33.3333%;
+  cursor: pointer;
+  padding: 0 10px 10px;
+`
+
+const Post = styled.div`
+  width: 100%;
+`
+
+const SeparationLine = styled.div`
+  border: #e1e5e9 1px solid;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`
+
+const ErrorHint = styled.span`
+  color: red;
+`
+
+const PostSelected = styled.div`
+  height: 1.4rem;
+`
+
+const PostImage = styled.img`
+  display: block;
+  width: 100%;
+  aspect-ratio: 2;
+  object-fit: cover;
+`
+
+const PostTitle = styled.div`
+  padding: 0 5px;
+`
+
+const ErrorWrapper = styled.div`
+  & * {
+    margin: 0;
+  }
+`
+
+type ID = string
+
+export type PostEntity = {
+  id: ID
+  name: string
+  slug: string
+  heroImage: ImageEntity
+  ogImage: ImageEntity
+}
+
+export type PostEntityWithMeta = {
+  post: PostEntity
+}
+
+type PostEntityOnSelectFn = (param: PostEntity) => void
+
+function PostGrids(props: {
+  posts: PostEntity[]
+  selected: PostEntity[]
+  onSelect: PostEntityOnSelectFn
+}): React.ReactElement {
+  const { posts, selected, onSelect } = props
+
+  return (
+    <PostGridsWrapper>
+      {posts.map((post) => {
+        return (
+          <PostGrid
+            key={post.id}
+            isSelected={selected?.includes(post)}
+            onSelect={() => onSelect(post)}
+            post={post}
+          />
+        )
+      })}
+    </PostGridsWrapper>
+  )
+}
+
+function PostGrid(props: {
+  post: PostEntity
+  isSelected: boolean
+  onSelect: PostEntityOnSelectFn
+}) {
+  const { post, onSelect, isSelected } = props
+  return (
+    <PostGridWrapper key={post?.id} onClick={() => onSelect(post)}>
+      <PostSelected>
+        {isSelected ? <i className="fas fa-check-circle"></i> : null}
+      </PostSelected>
+      <Post>
+        <PostImage
+          src={post.heroImage?.resized?.original}
+          onError={(e) =>
+            (e.currentTarget.src = post.heroImage?.imageFile?.url)
+          }
+        />
+        <PostTitle>{post.name}</PostTitle>
+      </Post>
+    </PostGridWrapper>
+  )
+}
+
+function PostMetaGrids(props: { postMetas: PostEntityWithMeta[] }) {
+  const { postMetas } = props
+  return (
+    <PostMetaGridsWrapper>
+      {postMetas.map((postMetas) => (
+        <PostMetaGrid key={postMetas?.post?.id} postMeta={postMetas} />
+      ))}
+    </PostMetaGridsWrapper>
+  )
+}
+
+function PostMetaGrid(props: {
+  postMeta: PostEntityWithMeta
+}): React.ReactElement {
+  const { postMeta } = props
+  const { post } = postMeta
+
+  return (
+    <PostMetaGridWrapper>
+      <Post>
+        <PostImage
+          src={post?.heroImage?.resized?.original}
+          onError={(e) =>
+            (e.currentTarget.src = post?.heroImage?.imageFile?.url)
+          }
+        />
+        <PostTitle>{post?.name}</PostTitle>
+      </Post>
+    </PostMetaGridWrapper>
+  )
+}
+
+type PostSelectorOnChangeFn = (params: PostEntityWithMeta[]) => void
+
+export function PostSelector(props: {
+  onChange: PostSelectorOnChangeFn
+  enableMultiSelect?: boolean
+  minSelectCount?: number
+  maxSelectCount?: number
+}) {
+  const [
+    queryPosts,
+    { loading, error, data: { posts = [], postsCount = 0 } = {} },
+  ] = useLazyQuery(postsQuery, { fetchPolicy: 'no-cache' })
+  const [currentPage, setCurrentPage] = useState(0) // page starts with 1, 0 is used to detect initialization
+  const [searchText, setSearchText] = useState('')
+  const [selected, setSelected] = useState<PostEntityWithMeta[]>([])
+  const [showErrorHint, setShowErrorHint] = useState(false)
+
+  const pageSize = 6
+
+  const {
+    onChange,
+    enableMultiSelect = false,
+    minSelectCount = 1,
+    maxSelectCount = 3,
+  } = props
+
+  const onSave = () => {
+    if (
+      enableMultiSelect &&
+      minSelectCount &&
+      selected.length < minSelectCount
+    ) {
+      setShowErrorHint(true)
+      return
+    }
+
+    onChange(selected)
+  }
+
+  const onCancel = () => {
+    onChange([])
+  }
+
+  const onSearchBoxChange: SearchBoxOnChangeFn = async (searchInput) => {
+    setSearchText(searchInput)
+    setCurrentPage(1)
+  }
+
+  const onPostsGridSelect: PostEntityOnSelectFn = (postEntity) => {
+    setSelected((selected) => {
+      const filterdSelected = selected.filter(
+        (ele) => ele.post?.id !== postEntity.id
+      )
+
+      // deselect the post
+      if (filterdSelected.length !== selected.length) {
+        return filterdSelected
+      }
+
+      // add new selected one and check shrink the array if there is a limit
+      if (enableMultiSelect) {
+        let newSelected = selected.concat([{ post: postEntity }])
+
+        if (maxSelectCount && newSelected.length >= maxSelectCount) {
+          newSelected = newSelected.slice(-maxSelectCount)
+        }
+
+        return newSelected
+      }
+
+      // single select
+      return [{ post: postEntity }]
+    })
+  }
+
+  const selectedPosts = selected.map((ele: PostEntityWithMeta) => {
+    return ele.post
+  })
+
+  useEffect(() => {
+    if (currentPage !== 0) {
+      queryPosts({
+        variables: {
+          searchText: searchText,
+          skip: (currentPage - 1) * pageSize,
+          take: pageSize,
+        },
+      })
+    }
+  }, [currentPage, searchText])
+
+  let searchResult = (
+    <React.Fragment>
+      <PostGrids
+        posts={posts}
+        selected={selectedPosts}
+        onSelect={onPostsGridSelect}
+      />
+      <Pagination
+        currentPage={currentPage}
+        total={postsCount}
+        pageSize={pageSize}
+        onChange={(pageIndex) => {
+          setCurrentPage(pageIndex)
+        }}
+      />
+    </React.Fragment>
+  )
+  if (loading) {
+    searchResult = <p>searching...</p>
+  }
+  if (error) {
+    searchResult = (
+      <ErrorWrapper>
+        <h3>Errors occurs in the `posts` query</h3>
+        <div>
+          <br />
+          <b>Message:</b>
+          <div>{error.message}</div>
+          <br />
+          <b>Stack:</b>
+          <div>{error.stack}</div>
+          <br />
+          <b>Query:</b>
+          <pre>{postsQuery.loc.source.body}</pre>
+        </div>
+      </ErrorWrapper>
+    )
+  }
+
+  return (
+    <DrawerController isOpen={true}>
+      <Drawer
+        title="Select post"
+        actions={{
+          cancel: {
+            label: 'Cancel',
+            action: onCancel,
+          },
+          confirm: {
+            label: 'Confirm',
+            action: onSave,
+          },
+        }}
+      >
+        <div>
+          <PostSearchBox onChange={onSearchBoxChange} />
+          <PostSelectionWrapper>
+            <div>{searchResult} </div>
+            {!!selected.length && <SeparationLine />}
+            <PostMetaGrids postMetas={selected} />
+            {showErrorHint && (
+              <ErrorHint>請至少選擇{minSelectCount}則文章</ErrorHint>
+            )}
+          </PostSelectionWrapper>
+        </div>
+      </Drawer>
+    </DrawerController>
+  )
+}

package/lib/website/readr/custom/selector/search-box.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Button } from '@keystone-ui/button'
+import { TextInput } from '@keystone-ui/fields'
+
+const SearchBoxWrapper = styled.div`
+  display: flex;
+`
+
+export type SearchBoxOnChangeFn = (param: string) => void
+
+export function SearchBox(props: {
+  onChange: SearchBoxOnChangeFn
+  className: string
+}): React.ReactElement {
+  const { onChange, className } = props
+  const [searchInput, setSearchInput] = useState('')
+
+  return (
+    <SearchBoxWrapper className={className}>
+      <TextInput
+        type="text"
+        placeholder="請輸入關鍵字搜尋"
+        value={searchInput}
+        onChange={(e) => {
+          setSearchInput(e.target.value)
+        }}
+      ></TextInput>
+
+      <Button
+        onClick={() => {
+          onChange(searchInput)
+        }}
+      >
+        Search
+      </Button>
+    </SearchBoxWrapper>
+  )
+}

package/lib/website/readr/custom/selector/video-selector.tsx

@@ -0,0 +1,310 @@
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { Drawer, DrawerController } from '@keystone-ui/modals'
+import { gql, useLazyQuery } from '@keystone-6/core/admin-ui/apollo'
+import { ImageEntity } from './image-selector'
+import { SearchBox, SearchBoxOnChangeFn } from './search-box'
+import { Pagination } from './pagination'
+
+const videosQuery = gql`
+  query Videos($searchText: String!, $take: Int, $skip: Int) {
+    videosCount(where: { name: { contains: $searchText } })
+    videos(
+      where: { name: { contains: $searchText } }
+      take: $take
+      skip: $skip
+    ) {
+      id
+      name
+      url
+      file {
+        filename
+        filesize
+        url
+      }
+      coverPhoto {
+        id
+        name
+        imageFile {
+          url
+        }
+        resized {
+          original
+        }
+      }
+    }
+  }
+`
+
+const VideoSearchBox = styled(SearchBox)`
+  margin-top: 10px;
+`
+
+const VideoSelectionWrapper = styled.div`
+  overflow: auto;
+  margin-top: 10px;
+`
+
+const VideoGridsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+`
+
+const VideoGridWrapper = styled.div`
+  flex: 0 0 33.3333%;
+  cursor: pointer;
+  padding: 0 10px 10px;
+`
+
+const VideoMetaGridsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+`
+
+const VideoMetaGridWrapper = styled.div`
+  flex: 0 0 33.3333%;
+  cursor: pointer;
+  padding: 0 10px 10px;
+`
+
+const Video = styled.video`
+  display: block;
+  width: 100%;
+  aspect-ratio: 2;
+  object-fit: cover;
+`
+
+const SeparationLine = styled.div`
+  border: #e1e5e9 1px solid;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`
+
+const VideoSelected = styled.div`
+  height: 1.4rem;
+`
+
+const ErrorWrapper = styled.div`
+  & * {
+    margin: 0;
+  }
+`
+
+type ID = string
+
+export type VideoEntity = {
+  id: ID
+  name?: string
+  url: string
+  youtubeUrl?: string
+  file: {
+    filename?: string
+    filesize: number
+    url: string
+  }
+  coverPhoto: ImageEntity
+}
+
+export type VideoEntityWithMeta = {
+  video: VideoEntity
+}
+
+type VideoEntityOnSelectFn = (param: VideoEntity) => void
+
+function VideosGrids(props: {
+  videos: VideoEntity[]
+  selected: VideoEntity[]
+  onSelect: VideoEntityOnSelectFn
+}): React.ReactElement {
+  const { videos, selected, onSelect } = props
+
+  return (
+    <VideoGridsWrapper>
+      {videos.map((video) => {
+        return (
+          <VideoGrid
+            key={video.id}
+            isSelected={selected?.includes(video)}
+            onSelect={() => onSelect(video)}
+            video={video}
+          />
+        )
+      })}
+    </VideoGridsWrapper>
+  )
+}
+
+function VideoGrid(props: {
+  video: VideoEntity
+  isSelected: boolean
+  onSelect: VideoEntityOnSelectFn
+}) {
+  const { video, onSelect, isSelected } = props
+  return (
+    <VideoGridWrapper key={video?.id} onClick={() => onSelect(video)}>
+      <VideoSelected>
+        {isSelected ? <i className="fas fa-check-circle"></i> : null}
+      </VideoSelected>
+      <Video muted loop>
+        <source src={video?.url} />
+        <source src={video?.file?.url} />
+      </Video>
+    </VideoGridWrapper>
+  )
+}
+
+function VideoMetaGrids(props: { videoMetas: VideoEntityWithMeta[] }) {
+  const { videoMetas } = props
+  return (
+    <VideoMetaGridsWrapper>
+      {videoMetas.map((videoMeta) => (
+        <VideoMetaGrid key={videoMeta?.video?.id} videoMeta={videoMeta} />
+      ))}
+    </VideoMetaGridsWrapper>
+  )
+}
+
+function VideoMetaGrid(props: {
+  videoMeta: VideoEntityWithMeta
+}): React.ReactElement {
+  const { videoMeta } = props
+  const { video } = videoMeta
+
+  return (
+    <VideoMetaGridWrapper>
+      <Video muted autoPlay loop>
+        <source src={video?.url} />
+        <source src={video?.file?.url} />
+      </Video>
+    </VideoMetaGridWrapper>
+  )
+}
+
+type VideoSelectorOnChangeFn = (params: VideoEntityWithMeta[]) => void
+
+export function VideoSelector(props: { onChange: VideoSelectorOnChangeFn }) {
+  const [
+    queryVideos,
+    { loading, error, data: { videos = [], videosCount = 0 } = {} },
+  ] = useLazyQuery(videosQuery, { fetchPolicy: 'no-cache' })
+  const [currentPage, setCurrentPage] = useState(0) // page starts with 1, 0 is used to detect initialization
+  const [searchText, setSearchText] = useState('')
+  const [selected, setSelected] = useState<VideoEntityWithMeta[]>([])
+
+  const pageSize = 6
+
+  const { onChange } = props
+
+  const onSave = () => {
+    onChange(selected)
+  }
+
+  const onCancel = () => {
+    onChange([])
+  }
+
+  const onSearchBoxChange: SearchBoxOnChangeFn = async (searchInput) => {
+    setSearchText(searchInput)
+    setCurrentPage(1)
+  }
+
+  const onVideosGridSelect: VideoEntityOnSelectFn = (videoEntity) => {
+    setSelected((selected) => {
+      const filterdSelected = selected.filter(
+        (ele) => ele.video?.id !== videoEntity.id
+      )
+
+      // deselect the video
+      if (filterdSelected.length !== selected.length) {
+        return filterdSelected
+      }
+
+      // single select
+      return [{ video: videoEntity }]
+    })
+  }
+
+  const selectedVideos = selected.map((ele: VideoEntityWithMeta) => {
+    return ele.video
+  })
+
+  useEffect(() => {
+    if (currentPage !== 0) {
+      queryVideos({
+        variables: {
+          searchText: searchText,
+          skip: (currentPage - 1) * pageSize,
+          take: pageSize,
+        },
+      })
+    }
+  }, [currentPage, searchText])
+
+  let searchResult = (
+    <React.Fragment>
+      <VideosGrids
+        videos={videos}
+        selected={selectedVideos}
+        onSelect={onVideosGridSelect}
+      />
+      <Pagination
+        currentPage={currentPage}
+        total={videosCount}
+        pageSize={pageSize}
+        onChange={(pageIndex) => {
+          setCurrentPage(pageIndex)
+        }}
+      />
+    </React.Fragment>
+  )
+  if (loading) {
+    searchResult = <p>searching...</p>
+  }
+  if (error) {
+    searchResult = (
+      <ErrorWrapper>
+        <h3>Errors occurs in the `videos` query</h3>
+        <div>
+          <br />
+          <b>Message:</b>
+          <div>{error.message}</div>
+          <br />
+          <b>Stack:</b>
+          <div>{error.stack}</div>
+          <br />
+          <b>Query:</b>
+          <pre>{videosQuery.loc.source.body}</pre>
+        </div>
+      </ErrorWrapper>
+    )
+  }
+
+  return (
+    <DrawerController isOpen={true}>
+      <Drawer
+        title="Select video"
+        actions={{
+          cancel: {
+            label: 'Cancel',
+            action: onCancel,
+          },
+          confirm: {
+            label: 'Confirm',
+            action: onSave,
+          },
+        }}
+      >
+        <div>
+          <VideoSearchBox onChange={onSearchBoxChange} />
+          <VideoSelectionWrapper>
+            <div>{searchResult}</div>
+            {!!selected.length && <SeparationLine />}
+            <VideoMetaGrids videoMetas={selected} />
+          </VideoSelectionWrapper>
+        </div>
+      </Drawer>
+    </DrawerController>
+  )
+}