From 7584b835759a5d59e1c36696f1aff66fff14e029 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Mon, 4 Sep 2023 10:39:08 +0300 Subject: [PATCH 1/5] uncoment the publish tabs --- web/src/beta/features/Editor/tabs/publish/Nav/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx b/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx index aaed90d134..933b1c2e51 100644 --- a/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx +++ b/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx @@ -4,6 +4,7 @@ import Icon from "@reearth/beta/components/Icon"; import * as Popover from "@reearth/beta/components/Popover"; import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent"; // import TabButton from "@reearth/beta/components/TabButton"; +import TabButton from "@reearth/beta/components/TabButton"; import Text from "@reearth/beta/components/Text"; import SecondaryNav from "@reearth/beta/features/Editor/SecondaryNav"; import { config } from "@reearth/services/config"; @@ -24,7 +25,7 @@ type Props = { onProjectTypeChange: (type: ProjectType) => void; }; -const Nav: React.FC = ({ projectId }) => { +const Nav: React.FC = ({ projectId, selectedProjectType, onProjectTypeChange }) => { const t = useT(); const { @@ -55,7 +56,7 @@ const Nav: React.FC = ({ projectId }) => { <> - {/* onProjectTypeChange("default")} @@ -64,7 +65,7 @@ const Nav: React.FC = ({ projectId }) => { selected={selectedProjectType === "story"} label={t("Story")} onClick={() => onProjectTypeChange("story")} - /> */} + /> Date: Mon, 4 Sep 2023 16:50:17 +0300 Subject: [PATCH 2/5] added publish story mutation --- web/src/services/api/projectApi.ts | 10 +---- web/src/services/api/storytellingApi/index.ts | 41 ++++++++++++++++++- web/src/services/api/toGqlStatus.ts | 10 +++++ web/src/services/gql/__gen__/gql.ts | 5 +++ web/src/services/gql/__gen__/graphql.ts | 21 +++++++--- web/src/services/gql/queries/storytelling.ts | 12 ++++++ 6 files changed, 84 insertions(+), 15 deletions(-) create mode 100644 web/src/services/api/toGqlStatus.ts diff --git a/web/src/services/api/projectApi.ts b/web/src/services/api/projectApi.ts index 321bd214f9..92b45b3101 100644 --- a/web/src/services/api/projectApi.ts +++ b/web/src/services/api/projectApi.ts @@ -5,7 +5,6 @@ import { type PublishStatus } from "@reearth/beta/features/Editor/tabs/publish/N import { UpdateProjectInput, ProjectPayload, - PublishmentStatus, Visualizer, DeleteProjectInput, ArchiveProjectMutationVariables, @@ -28,6 +27,7 @@ import { useT } from "@reearth/services/i18n"; import { useNotification } from "../state"; +import { toGqlStatus } from "./toGqlStatus"; import { MutationReturn } from "./types"; export type Project = ProjectPayload["project"]; @@ -253,11 +253,3 @@ export default () => { useUpdateProjectAlias, }; }; - -const toGqlStatus = (status?: PublishStatus) => { - return status === "limited" - ? PublishmentStatus.Limited - : status == "published" - ? PublishmentStatus.Public - : PublishmentStatus.Private; -}; diff --git a/web/src/services/api/storytellingApi/index.ts b/web/src/services/api/storytellingApi/index.ts index 798f6a0743..1f8cbf9ecf 100644 --- a/web/src/services/api/storytellingApi/index.ts +++ b/web/src/services/api/storytellingApi/index.ts @@ -1,6 +1,7 @@ import { useMutation } from "@apollo/client"; import { useCallback } from "react"; +import { PublishStatus } from "@reearth/beta/features/Editor/tabs/publish/Nav/PublishModal/hooks"; import { MutationReturn } from "@reearth/services/api/types"; import { CreateStoryInput, @@ -8,10 +9,15 @@ import { MutationCreateStoryArgs, UpdateStoryInput, } from "@reearth/services/gql/__gen__/graphql"; -import { CREATE_STORY, UPDATE_STORY } from "@reearth/services/gql/queries/storytelling"; +import { + CREATE_STORY, + PUBLISH_STORY, + UPDATE_STORY, +} from "@reearth/services/gql/queries/storytelling"; import { useT } from "@reearth/services/i18n"; import { useNotification } from "../../state"; +import { toGqlStatus } from "../toGqlStatus"; import useBlocks from "./blocks"; import usePages from "./pages"; @@ -64,6 +70,38 @@ export default function useStorytellingAPI() { [updateStoryMutation, t, setNotification], ); + const [publishStoryMutation] = useMutation(PUBLISH_STORY); + + const usePublishStory = useCallback( + async (s: PublishStatus, storyId?: string, alias?: string) => { + if (!storyId) return; + + const gqlStatus = toGqlStatus(s); + + const { data, errors } = await publishStoryMutation({ + variables: { storyId, alias, status: gqlStatus }, + }); + + if (errors || !data?.publishStory) { + setNotification({ type: "error", text: t("Failed to publish story.") }); + + return { status: "error" }; + } + + setNotification({ + type: s === "limited" ? "success" : s == "published" ? "success" : "info", + text: + s === "limited" + ? t("Successfully published your story!") + : s == "published" + ? t("Successfully published your story with search engine indexing!") + : t("Successfully unpublished your story. Now nobody can access your story."), + }); + return { data: data.publishStory.story, status: "success" }; + }, + [publishStoryMutation, t, setNotification], + ); + return { useCreateStory, useUpdateStory, @@ -75,5 +113,6 @@ export default function useStorytellingAPI() { useCreateStoryBlock, useDeleteStoryBlock, useMoveStoryBlock, + usePublishStory, }; } diff --git a/web/src/services/api/toGqlStatus.ts b/web/src/services/api/toGqlStatus.ts new file mode 100644 index 0000000000..6dad40412d --- /dev/null +++ b/web/src/services/api/toGqlStatus.ts @@ -0,0 +1,10 @@ +import { PublishStatus } from "@reearth/beta/features/Editor/tabs/publish/Nav/PublishModal/hooks"; +import { PublishmentStatus } from "@reearth/services/gql/__gen__/graphql"; + +export const toGqlStatus = (status?: PublishStatus) => { + return status === "limited" + ? PublishmentStatus.Limited + : status == "published" + ? PublishmentStatus.Public + : PublishmentStatus.Private; +}; diff --git a/web/src/services/gql/__gen__/gql.ts b/web/src/services/gql/__gen__/gql.ts index 9e9c306020..f14b21000b 100644 --- a/web/src/services/gql/__gen__/gql.ts +++ b/web/src/services/gql/__gen__/gql.ts @@ -47,6 +47,7 @@ const documents = { "\n mutation CreateStory($input: CreateStoryInput!) {\n createStory(input: $input) {\n story {\n id\n }\n }\n }\n": types.CreateStoryDocument, "\n mutation UpdateStory($input: UpdateStoryInput!) {\n updateStory(input: $input) {\n story {\n id\n }\n }\n }\n": types.UpdateStoryDocument, "\n mutation DeleteStory($input: DeleteStoryInput!) {\n deleteStory(input: $input) {\n storyId\n }\n }\n": types.DeleteStoryDocument, + "\n mutation PublishStory($storyId: ID!, $alias: String, $status: PublishmentStatus!) {\n publishStory(input: { storyId: $storyId, alias: $alias, status: $status }) {\n story {\n id\n alias\n publishmentStatus\n }\n }\n }\n": types.PublishStoryDocument, "\n mutation CreateStoryPage($input: CreateStoryPageInput!) {\n createStoryPage(input: $input) {\n story {\n id\n }\n }\n }\n": types.CreateStoryPageDocument, "\n mutation UpdateStoryPage($input: UpdateStoryPageInput!) {\n updateStoryPage(input: $input) {\n story {\n id\n }\n }\n }\n": types.UpdateStoryPageDocument, "\n mutation DeleteStoryPage($input: DeleteStoryPageInput!) {\n removeStoryPage(input: $input) {\n story {\n id\n }\n }\n }\n": types.DeleteStoryPageDocument, @@ -215,6 +216,10 @@ export function gql(source: "\n mutation UpdateStory($input: UpdateStoryInput!) * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ export function gql(source: "\n mutation DeleteStory($input: DeleteStoryInput!) {\n deleteStory(input: $input) {\n storyId\n }\n }\n"): (typeof documents)["\n mutation DeleteStory($input: DeleteStoryInput!) {\n deleteStory(input: $input) {\n storyId\n }\n }\n"]; +/** + * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function gql(source: "\n mutation PublishStory($storyId: ID!, $alias: String, $status: PublishmentStatus!) {\n publishStory(input: { storyId: $storyId, alias: $alias, status: $status }) {\n story {\n id\n alias\n publishmentStatus\n }\n }\n }\n"): (typeof documents)["\n mutation PublishStory($storyId: ID!, $alias: String, $status: PublishmentStatus!) {\n publishStory(input: { storyId: $storyId, alias: $alias, status: $status }) {\n story {\n id\n alias\n publishmentStatus\n }\n }\n }\n"]; /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/web/src/services/gql/__gen__/graphql.ts b/web/src/services/gql/__gen__/graphql.ts index be7a4588d3..cc1b7fc3df 100644 --- a/web/src/services/gql/__gen__/graphql.ts +++ b/web/src/services/gql/__gen__/graphql.ts @@ -109,8 +109,8 @@ export type AddNlsLayerSimpleInput = { config?: InputMaybe; index?: InputMaybe; layerType: Scalars['String']['input']; - parentLayerId: Scalars['ID']['input']; - sceneID: Scalars['ID']['input']; + sceneId: Scalars['ID']['input']; + title: Scalars['String']['input']; }; export type AddNlsLayerSimplePayload = { @@ -858,7 +858,7 @@ export type Mutation = { addLayerGroup?: Maybe; addLayerItem?: Maybe; addMemberToTeam?: Maybe; - addNLSLayerSimple?: Maybe; + addNLSLayerSimple: AddNlsLayerSimplePayload; addPageLayer: StoryPagePayload; addPropertyItem?: Maybe; addStyle?: Maybe; @@ -903,7 +903,7 @@ export type Mutation = { removeLayer?: Maybe; removeMemberFromTeam?: Maybe; removeMyAuth?: Maybe; - removeNLSLayer?: Maybe; + removeNLSLayer: RemoveNlsLayerPayload; removePageLayer: StoryPagePayload; removePropertyField?: Maybe; removePropertyItem?: Maybe; @@ -921,7 +921,7 @@ export type Mutation = { updateLayer?: Maybe; updateMe?: Maybe; updateMemberOfTeam?: Maybe; - updateNLSLayer?: Maybe; + updateNLSLayer: UpdateNlsLayerPayload; updateProject?: Maybe; updatePropertyItems?: Maybe; updatePropertyValue?: Maybe; @@ -1353,6 +1353,7 @@ export type MutationUploadPluginArgs = { }; export type NlsLayer = { + config?: Maybe; id: Scalars['ID']['output']; infobox?: Maybe; layerType: Scalars['String']['output']; @@ -3044,6 +3045,15 @@ export type DeleteStoryMutationVariables = Exact<{ export type DeleteStoryMutation = { __typename?: 'Mutation', deleteStory: { __typename?: 'DeleteStoryPayload', storyId: string } }; +export type PublishStoryMutationVariables = Exact<{ + storyId: Scalars['ID']['input']; + alias?: InputMaybe; + status: PublishmentStatus; +}>; + + +export type PublishStoryMutation = { __typename?: 'Mutation', publishStory: { __typename?: 'StoryPayload', story: { __typename?: 'Story', id: string, alias: string, publishmentStatus: PublishmentStatus } } }; + export type CreateStoryPageMutationVariables = Exact<{ input: CreateStoryPageInput; }>; @@ -3241,6 +3251,7 @@ export const CreateSceneDocument = {"kind":"Document","definitions":[{"kind":"Op export const CreateStoryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateStory"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateStoryInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createStory"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode; export const UpdateStoryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateStory"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateStoryInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateStory"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode; export const DeleteStoryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteStory"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"DeleteStoryInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteStory"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}}]}}]}}]} as unknown as DocumentNode; +export const PublishStoryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"PublishStory"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"alias"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"status"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"PublishmentStatus"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"publishStory"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"storyId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"storyId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"alias"},"value":{"kind":"Variable","name":{"kind":"Name","value":"alias"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"status"},"value":{"kind":"Variable","name":{"kind":"Name","value":"status"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"alias"}},{"kind":"Field","name":{"kind":"Name","value":"publishmentStatus"}}]}}]}}]}}]} as unknown as DocumentNode; export const CreateStoryPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateStoryPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateStoryPageInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createStoryPage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode; export const UpdateStoryPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateStoryPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateStoryPageInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateStoryPage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode; export const DeleteStoryPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteStoryPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"DeleteStoryPageInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"removeStoryPage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode; diff --git a/web/src/services/gql/queries/storytelling.ts b/web/src/services/gql/queries/storytelling.ts index 06d4708b7f..67c3cd5f3d 100644 --- a/web/src/services/gql/queries/storytelling.ts +++ b/web/src/services/gql/queries/storytelling.ts @@ -28,6 +28,18 @@ export const DELETE_STORY = gql(` } `); +export const PUBLISH_STORY = gql(` + mutation PublishStory($storyId: ID!, $alias: String, $status: PublishmentStatus!) { + publishStory(input: { storyId: $storyId, alias: $alias, status: $status }) { + story { + id + alias + publishmentStatus + } + } + } +`); + export const CREATE_STORY_PAGE = gql(` mutation CreateStoryPage($input: CreateStoryPageInput!) { createStoryPage(input: $input) { From 4ed61f2649945abb9711e0ac5e75f3b478c98e04 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Tue, 5 Sep 2023 21:03:40 +0300 Subject: [PATCH 3/5] fix translation issue --- web/src/services/i18n/translations/en.yml | 6 +++++- web/src/services/i18n/translations/ja.yml | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml index e80d2c0dcd..6a971ade8d 100644 --- a/web/src/services/i18n/translations/en.yml +++ b/web/src/services/i18n/translations/en.yml @@ -11,6 +11,7 @@ Scene: Scene Outline: Outline Published: Published Unpublished: Unpublished +Story: Story Unpublish: Unpublish Publish: Publish Publishing Settings: Publishing Settings @@ -39,7 +40,6 @@ Your project will be unpublished.: Your project will be unpublished. This means that anybody with the URL will become unable to view this project.: This means that anybody with the URL will become unable to view this project. '**Warning**: This includes websites where this project is embedded.': '**Warning**: This includes websites where this project is embedded.' New Page: New Page -Story: Story Page: Page Page Settings: Page Settings Align System: Align System @@ -470,6 +470,10 @@ Failed to create story.: Failed to create story. Successfully created a story!: '' Failed to update story.: '' Successfully updated a story!: '' +Failed to publish story.: '' +Successfully published your story!: '' +Successfully published your story with search engine indexing!: '' +Successfully unpublished your story. Now nobody can access your story.: '' Failed to create page.: Failed to create page. Successfullly created a page!: Successfullly created a page! Failed to delete page.: Failed to delete page. diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml index 679da7f255..bd93c386ac 100644 --- a/web/src/services/i18n/translations/ja.yml +++ b/web/src/services/i18n/translations/ja.yml @@ -11,6 +11,7 @@ Scene: シーン Outline: アウトライン Published: 一般公開 Unpublished: 非公開 +Story: ストーリー Unpublish: 非公開にする Publish: 公開 Publishing Settings: 公開設定 @@ -35,7 +36,6 @@ Your project will be unpublished.: プロジェクトを非公開にする This means that anybody with the URL will become unable to view this project.: URLを知っている人もこのプロジェクトを見ることができなくなります。 '**Warning**: This includes websites where this project is embedded.': '**Warning**このプロジェクトを埋め込んだWebサイトへ影響を及ぼす可能性があります。' New Page: 新しいページ -Story: ストーリー Page: ページ Page Settings: ページ設定 Align System: アラインシステム @@ -431,6 +431,10 @@ Failed to create story.: ストーリーの作成に失敗しました。 Successfully created a story!: '' Failed to update story.: '' Successfully updated a story!: '' +Failed to publish story.: '' +Successfully published your story!: '' +Successfully published your story with search engine indexing!: '' +Successfully unpublished your story. Now nobody can access your story.: '' Failed to create page.: ページの作成に失敗しました。 Successfullly created a page!: '' Failed to delete page.: '' From 10633c2e916f51d8200edbdf7ba3079d37aa5dcd Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Wed, 6 Sep 2023 08:29:52 +0300 Subject: [PATCH 4/5] removed commented line --- web/src/beta/features/Editor/tabs/publish/Nav/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx b/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx index 933b1c2e51..c13a15ea3d 100644 --- a/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx +++ b/web/src/beta/features/Editor/tabs/publish/Nav/index.tsx @@ -3,7 +3,6 @@ import { useMemo } from "react"; import Icon from "@reearth/beta/components/Icon"; import * as Popover from "@reearth/beta/components/Popover"; import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent"; -// import TabButton from "@reearth/beta/components/TabButton"; import TabButton from "@reearth/beta/components/TabButton"; import Text from "@reearth/beta/components/Text"; import SecondaryNav from "@reearth/beta/features/Editor/SecondaryNav"; From 8df092f71e4f24ca4fe30edeca29b163d79719f6 Mon Sep 17 00:00:00 2001 From: mkumbobeaty Date: Wed, 6 Sep 2023 12:10:25 +0300 Subject: [PATCH 5/5] merge with main --- web/codegen.ts | 1 + .../beta/components/Icon/Icons/addLayer.svg | 12 + web/src/beta/components/Icon/icons.ts | 2 + web/src/beta/components/Modal/index.tsx | 21 +- .../Editor/DataSourceManager/Asset/index.tsx | 153 +++++ .../DataSourceManager/DelimitedText/index.tsx | 113 ++++ .../DataSourceManager/ThreeDTiles/index.tsx | 65 ++ .../DataSourceManager/index.stories.tsx | 8 + .../Editor/DataSourceManager/index.tsx | 45 ++ .../Editor/DataSourceManager/utils.tsx | 91 +++ .../Editor/Visualizer/CanvasArea/convert.ts | 71 ++- .../Editor/Visualizer/CanvasArea/hooks.ts | 30 +- web/src/beta/features/Editor/hooks.ts | 2 +- web/src/beta/features/Editor/index.tsx | 33 +- .../tabs/map/LeftPanel/GroupField/index.tsx | 39 +- .../map/LeftPanel/Layers/index.stories.tsx | 40 ++ .../tabs/map/LeftPanel/Layers/index.tsx | 133 +++++ .../Editor/tabs/map/LeftPanel/index.tsx | 23 +- web/src/beta/features/Editor/useLayers.ts | 91 +++ web/src/beta/features/Editor/useLeftPanel.tsx | 40 +- .../beta/lib/lexical/RichTextEditor/index.css | 557 ++++++++---------- .../beta/lib/lexical/RichTextEditor/index.tsx | 9 +- .../themes/DefaultLexicalEditorTheme.css | 19 + .../lexical/RichTextEditor/ui/ColorPicker.css | 20 +- .../lib/lexical/RichTextEditor/ui/Input.css | 6 +- web/src/services/api/index.ts | 1 + web/src/services/api/layersApi/index.ts | 105 ++++ web/src/services/api/layersApi/utils.ts | 28 + web/src/services/api/sceneApi.ts | 2 + web/src/services/gql/__gen__/gql.ts | 24 +- web/src/services/gql/__gen__/graphql.ts | 36 +- web/src/services/gql/fragments/index.ts | 7 +- web/src/services/gql/fragments/layer.ts | 54 ++ web/src/services/gql/queries/layer.ts | 29 + web/src/services/gql/queries/scene.ts | 3 + web/src/services/i18n/translations/en.yml | 8 +- web/src/services/i18n/translations/ja.yml | 8 +- web/src/services/state/index.ts | 10 + 38 files changed, 1556 insertions(+), 383 deletions(-) create mode 100644 web/src/beta/components/Icon/Icons/addLayer.svg create mode 100644 web/src/beta/features/Editor/DataSourceManager/Asset/index.tsx create mode 100644 web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx create mode 100644 web/src/beta/features/Editor/DataSourceManager/ThreeDTiles/index.tsx create mode 100644 web/src/beta/features/Editor/DataSourceManager/index.stories.tsx create mode 100644 web/src/beta/features/Editor/DataSourceManager/index.tsx create mode 100644 web/src/beta/features/Editor/DataSourceManager/utils.tsx create mode 100644 web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.stories.tsx create mode 100644 web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.tsx create mode 100644 web/src/beta/features/Editor/useLayers.ts create mode 100644 web/src/services/api/layersApi/index.ts create mode 100644 web/src/services/api/layersApi/utils.ts create mode 100644 web/src/services/gql/queries/layer.ts diff --git a/web/codegen.ts b/web/codegen.ts index 3d875a038e..a4541974b2 100644 --- a/web/codegen.ts +++ b/web/codegen.ts @@ -25,6 +25,7 @@ const config: CodegenConfig = { URL: "string", Lang: "string", TranslatedString: "{ [lang in string]?: string } | null", + JSON: "any", }, }, }, diff --git a/web/src/beta/components/Icon/Icons/addLayer.svg b/web/src/beta/components/Icon/Icons/addLayer.svg new file mode 100644 index 0000000000..dbbb40315a --- /dev/null +++ b/web/src/beta/components/Icon/Icons/addLayer.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts index ecaa0f000b..cc17776933 100644 --- a/web/src/beta/components/Icon/icons.ts +++ b/web/src/beta/components/Icon/icons.ts @@ -38,6 +38,7 @@ import Bin from "./Icons/bin.svg"; import Install from "./Icons/install.svg"; import UploadSimple from "./Icons/uploadSimple.svg"; import Search from "./Icons/search.svg"; +import AddLayerIcon from "./Icons/addLayer.svg"; // MSIC import CheckCircle from "./Icons/checkCircle.svg"; @@ -107,6 +108,7 @@ import PublicGitHubRepo from "./Icons/publicGitHubRepo.svg"; import Marketplace from "./Icons/marketplace.svg"; export default { + addLayer: AddLayerIcon, file: File, dl: InfoTable, infobox: Infobox, diff --git a/web/src/beta/components/Modal/index.tsx b/web/src/beta/components/Modal/index.tsx index 38d7fe32a3..4cdb5361b9 100644 --- a/web/src/beta/components/Modal/index.tsx +++ b/web/src/beta/components/Modal/index.tsx @@ -23,6 +23,7 @@ type Props = { children?: ReactNode; isVisible?: boolean; onClose?: () => void; + onTabChange?: (tabId: string) => void; sidebarTabs?: SidebarTab[]; }; @@ -35,6 +36,7 @@ const Modal: React.FC = ({ children, isVisible, onClose, + onTabChange, sidebarTabs, }) => { const [TabsFields, setTabsFields] = useState[]>([]); @@ -56,8 +58,9 @@ const Modal: React.FC = ({ const handleTabChange = useCallback( (tabId: string) => { handleActivate(tabId); + onTabChange?.(tabId); }, - [handleActivate], + [handleActivate, onTabChange], ); return ( @@ -79,11 +82,13 @@ const Modal: React.FC = ({ )} {tabs.length > 0 && {tabs.find(tab => tab.active === true)?.content}} - {children} - - {tabs.find(tab => tab.active === true)?.tabButton1 ?? button1} - {tabs.find(tab => tab.active === true)?.tabButton2 ?? button2} - + {children && {children}} + {button1 || button2 ? ( + + {tabs.find(tab => tab.active === true)?.tabButton1 ?? button1} + {tabs.find(tab => tab.active === true)?.tabButton2 ?? button2} + + ) : null} @@ -99,6 +104,7 @@ const NavBarWrapper = styled.div` flex-direction: column; padding: 16px; gap: 10px; + background: ${({ theme }) => theme.bg[0]}; border-right: 1px solid ${({ theme }) => theme.bg[3]}; `; @@ -107,13 +113,14 @@ const Tab = styled.button<{ isSelected?: boolean }>` padding: 4px 8px; border-radius: 4px; background: ${({ isSelected, theme }) => (isSelected ? theme.bg[2] : "transparent")}; - color: ${({ isSelected, theme }) => (isSelected ? theme.content.main : theme.bg[2])}; + color: ${({ isSelected, theme }) => (isSelected ? theme.content.main : theme.content.weak)}; `; const ContentWrapper = styled.div` display: flex; flex-direction: column; flex: 1; + background: ${({ theme }) => theme.bg[0]}; `; const Content = styled.div` diff --git a/web/src/beta/features/Editor/DataSourceManager/Asset/index.tsx b/web/src/beta/features/Editor/DataSourceManager/Asset/index.tsx new file mode 100644 index 0000000000..95af66785d --- /dev/null +++ b/web/src/beta/features/Editor/DataSourceManager/Asset/index.tsx @@ -0,0 +1,153 @@ +import React from "react"; + +import Button from "@reearth/beta/components/Button"; +import Toggle from "@reearth/beta/components/Toggle"; +import generateRandomString from "@reearth/beta/utils/generate-random-string"; +import RadioButton from "@reearth/classic/components/atoms/RadioButton"; +import Select from "@reearth/classic/components/atoms/Select"; +import { Option } from "@reearth/classic/components/atoms/SelectOption"; + +import { DataProps } from ".."; +import { + ColJustiftBetween, + AssetWrapper, + InputGroup, + Input, + SourceTypeWrapper, + RadioButtonLabel, + SubmitWrapper, + TextArea, +} from "../utils"; + +const Asset: React.FC = ({ sceneId, onSubmit, onClose }) => { + const [sourceType, setSourceType] = React.useState("url"); // ["url", "local", "value"] + const [fileFormat, setFileFormat] = React.useState("GeoJSON"); + const [value, setValue] = React.useState(""); + const [prioritizePerformance, setPrioritizePerformance] = React.useState(false); + + const handleSubmit = () => { + onSubmit({ + layerType: "simple", + sceneId, + title: generateRandomString(5), + visible: true, + config: { + data: { + url: sourceType === "url" && value !== "" ? value : null, + type: fileFormat.toLowerCase(), + value: sourceType === "value" && value !== "" ? value : null, + }, + resource: { + clampToGround: true, + }, + marker: { + heightReference: "clamp", + }, + polygon: { + heightReference: "clamp", + }, + polyline: { + clampToGround: true, + }, + }, + }); + onClose(); + }; + + return ( + + + + + + c && setSourceType("url")} + /> + From URL + + + c && setSourceType("value")} + /> + From Value + + + + {sourceType == "url" && ( + <> + + + + + setValue(e.target.value)} + /> + + {fileFormat === "GeoJSON" && ( + + setPrioritizePerformance(v)} + /> + + )} + + )} + {sourceType == "value" && ( + <> + + + + +