feat(web): add meta items (#825)

* Add meta tab * Add query * Add fields * Add meta fields * Fix date metadata * fix metadata * Fix saved value retreival * Add update * Add checkbox * Save * Save change * Fix linting * add translations * Fix typing issues * Fix typing issues * Add meta changes --------- Co-authored-by: mimoham24 <69579255+mimoham24@users.noreply.github.com>
reearth · Sep 7, 2023 · 68082d9 · 68082d9
1 parent 3888e97
commit 68082d9
Show file tree

Hide file tree

Showing 26 changed files with 906 additions and 120 deletions.
diff --git a/web/src/components/atoms/InnerContents/complex.tsx b/web/src/components/atoms/InnerContents/complex.tsx
@@ -24,7 +24,7 @@ export default ComplexInnerContents;
 const PaddedContent = styled.div`
   display: flex;
   margin: 16px 0 0 16px;
-  height: calc(100vh - 66px);
+  min-height: calc(100% - 66px);
 `;
 
 const Main = styled.div`

diff --git a/web/src/components/atoms/Tabs/index.tsx b/web/src/components/atoms/Tabs/index.tsx
@@ -1,3 +1,4 @@
 import { Tabs } from "antd";
 
+export type { TabsProps } from "antd";
 export default Tabs;
diff --git a/web/src/components/molecules/Content/Details/index.tsx b/web/src/components/molecules/Content/Details/index.tsx
@@ -5,7 +5,6 @@ import { Asset } from "@reearth-cms/components/molecules/Asset/asset.type";
 import { UploadType } from "@reearth-cms/components/molecules/Asset/AssetList";
 import Sidebar from "@reearth-cms/components/molecules/Common/Sidebar";
 import ContentForm from "@reearth-cms/components/molecules/Content/Form";
-import ContentSidebarWrapper from "@reearth-cms/components/molecules/Content/Form/SidebarWrapper";
 import { Item, FormItem, ItemField } from "@reearth-cms/components/molecules/Content/types";
 import { Request, RequestState } from "@reearth-cms/components/molecules/Request/types";
 import { Model } from "@reearth-cms/components/molecules/Schema/types";
@@ -24,6 +23,7 @@ export type Props = {
   modelsMenu: React.ReactNode;
   formItemsData: FormItem[];
   initialFormValues: { [key: string]: any };
+  initialMetaFormValues: { [key: string]: any };
   item?: Item;
   itemId?: string;
   loading: boolean;
@@ -63,8 +63,20 @@ export type Props = {
   onUploadModalCancel: () => void;
   setUploadUrl: (uploadUrl: { url: string; autoUnzip: boolean }) => void;
   setUploadType: (type: UploadType) => void;
-  onItemCreate: (data: { schemaId: string; fields: ItemField[] }) => Promise<void>;
+  onItemCreate: (data: {
+    schemaId: string;
+    metaSchemaId: string;
+    fields: ItemField[];
+    metaFields: ItemField[];
+  }) => Promise<void>;
   onItemUpdate: (data: { itemId: string; fields: ItemField[] }) => Promise<void>;
+  onMetaItemUpdate: (data: {
+    itemId: string;
+    metaItemId?: string;
+    metaSchemaId: string;
+    fields: ItemField[];
+    metaFields: ItemField[];
+  }) => Promise<void>;
   onBack: (modelId?: string) => void;
   onAssetsCreate: (files: UploadFile[]) => Promise<(Asset | undefined)[]>;
   onAssetCreateFromUrl: (url: string, autoUnzip: boolean) => Promise<Asset | undefined>;
@@ -97,6 +109,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
   modelsMenu,
   formItemsData,
   initialFormValues,
+  initialMetaFormValues,
   item,
   itemId,
   loading,
@@ -133,6 +146,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
   setUploadType,
   onItemCreate,
   onItemUpdate,
+  onMetaItemUpdate,
   onBack,
   onAssetsCreate,
   onAssetCreateFromUrl,
@@ -162,6 +176,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
       }
       center={
         <ContentForm
+          item={item}
           linkItemModalTotalCount={linkItemModalTotalCount}
           linkItemModalPage={linkItemModalPage}
           linkItemModalPageSize={linkItemModalPageSize}
@@ -181,6 +196,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
           model={model}
           formItemsData={formItemsData}
           initialFormValues={initialFormValues}
+          initialMetaFormValues={initialMetaFormValues}
           assetList={assetList}
           onAssetTableChange={onAssetTableChange}
           totalCount={totalCount}
@@ -201,6 +217,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
           onBack={onBack}
           onItemCreate={onItemCreate}
           onItemUpdate={onItemUpdate}
+          onMetaItemUpdate={onMetaItemUpdate}
           onAssetsCreate={onAssetsCreate}
           onAssetCreateFromUrl={onAssetCreateFromUrl}
           onAssetsReload={onAssetsReload}
@@ -217,12 +234,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
           workspaceUserMembers={workspaceUserMembers}
         />
       }
-      right={
-        <>
-          {item && <ContentSidebarWrapper item={item} />}
-          {commentsPanel}
-        </>
-      }
+      right={commentsPanel}
     />
   );
 };

diff --git a/web/src/components/molecules/Content/Form/SidebarWrapper.tsx b/web/src/components/molecules/Content/Form/SidebarWrapper.tsx
@@ -8,7 +8,7 @@ import { useT } from "@reearth-cms/i18n";
 import { dateTimeFormat } from "@reearth-cms/utils/format";
 
 export type Props = {
-  item: Item;
+  item?: Item;
 };
 
 const ContentSidebarWrapper: React.FC<Props> = ({ item }) => {
@@ -35,36 +35,34 @@ const ContentSidebarWrapper: React.FC<Props> = ({ item }) => {
   };
 
   return (
-    <SideBarWrapper>
-      <SidebarCard title={t("Enter Information")}>
-        <DataRow>
-          <DataTitle>ID</DataTitle>
-          <StyledTag>{item.id}</StyledTag>
-        </DataRow>
-        <DataRow>
-          <DataTitle>{t("Created At")}</DataTitle>
-          <DataText>{dateTimeFormat(item.createdAt)}</DataText>
-        </DataRow>
-        <DataRow>
-          <DataTitle>{t("Updated At")}</DataTitle>
-          <DataText>{dateTimeFormat(item.updatedAt)}</DataText>
-        </DataRow>
-      </SidebarCard>
-      <SidebarCard title={t("Publish State")}>
-        <DataRow>
-          <DataTitle>{getStatusBadge(item.status)}</DataTitle>
-        </DataRow>
-      </SidebarCard>
-    </SideBarWrapper>
+    <>
+      {item && (
+        <>
+          <SidebarCard title={t("Enter Information")}>
+            <DataRow>
+              <DataTitle>ID</DataTitle>
+              <StyledTag>{item.id}</StyledTag>
+            </DataRow>
+            <DataRow>
+              <DataTitle>{t("Created At")}</DataTitle>
+              <DataText>{dateTimeFormat(item.createdAt)}</DataText>
+            </DataRow>
+            <DataRow>
+              <DataTitle>{t("Updated At")}</DataTitle>
+              <DataText>{dateTimeFormat(item.updatedAt)}</DataText>
+            </DataRow>
+          </SidebarCard>
+          <SidebarCard title={t("Publish State")}>
+            <DataRow>
+              <DataTitle>{getStatusBadge(item.status)}</DataTitle>
+            </DataRow>
+          </SidebarCard>
+        </>
+      )}
+    </>
   );
 };
 
-const SideBarWrapper = styled.div`
-  background-color: #fafafa;
-  padding: 8px;
-  width: 272px;
-`;
-
 const DataRow = styled.div`
   display: flex;
   margin: 0 -4px;