fix(web): sort the order of tags when saving an item (#1330)

* fix: sort order of tags * fix: overflow
reearth · Dec 5, 2024 · 782dbc5 · 782dbc5
1 parent eeca1e8
commit 782dbc5
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 20 deletions.
diff --git a/web/src/components/molecules/Content/Form/fields/FieldComponents/TagField.tsx b/web/src/components/molecules/Content/Form/fields/FieldComponents/TagField.tsx
@@ -45,7 +45,9 @@ const TagField: React.FC<TagFieldProps> = ({ field, onMetaUpdate, disabled }) =>
         <Select onChange={onMetaUpdate} allowClear disabled={disabled}>
           {field.typeProperty?.tags?.map((tag: { id: string; name: string; color: string }) => (
             <Select.Option key={tag.name} value={tag.id}>
-              <Tag color={tag.color.toLowerCase()}>{tag.name}</Tag>
+              <TagWrapper>
+                <Tag color={tag.color.toLowerCase()}>{tag.name}</Tag>
+              </TagWrapper>
             </Select.Option>
           ))}
         </Select>
@@ -57,6 +59,10 @@ const TagField: React.FC<TagFieldProps> = ({ field, onMetaUpdate, disabled }) =>
 export default TagField;
 
 const StyledMultipleSelect = styled(Select)`
+  .ant-select-selection-overflow {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
   .ant-select-selection-overflow-item {
     margin-right: 4px;
   }
@@ -75,3 +81,8 @@ const StyledMultipleSelect = styled(Select)`
     margin-right: 0;
   }
 `;
+
+const TagWrapper = styled.div`
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
diff --git a/web/src/components/molecules/Content/Form/index.tsx b/web/src/components/molecules/Content/Form/index.tsx
@@ -24,6 +24,7 @@ import {
   ItemField,
   ItemValue,
 } from "@reearth-cms/components/molecules/Content/types";
+import { selectedTagIdsGet } from "@reearth-cms/components/molecules/Content/utils";
 import { Model } from "@reearth-cms/components/molecules/Model/types";
 import {
   Request,
@@ -333,12 +334,17 @@ const ContentForm: React.FC<Props> = ({
     [formItemsData],
   );
 
-  const inputValueGet = useCallback((value: ItemValue, multiple: boolean) => {
-    if (multiple) {
+  const inputValueGet = useCallback((value: ItemValue, field: Field) => {
+    if (field.multiple) {
       if (Array.isArray(value)) {
-        return value.map(v =>
-          v === "" ? undefined : dayjs.isDayjs(v) ? transformDayjsToString(v) : v,
-        );
+        if (field.type === "Tag") {
+          const tags = field.typeProperty?.tags;
+          return tags ? selectedTagIdsGet(value as string[], tags) : [];
+        } else {
+          return value.map(v =>
+            v === "" ? undefined : dayjs.isDayjs(v) ? transformDayjsToString(v) : v,
+          );
+        }
       } else {
         return [];
       }
@@ -364,7 +370,7 @@ const ContentForm: React.FC<Props> = ({
       const metaField = metaFieldsMap.get(key);
       if (metaField) {
         result.push({
-          value: inputValueGet(value as ItemValue, metaField.multiple),
+          value: inputValueGet(value as ItemValue, metaField),
           schemaFieldId: key,
           type: metaField.type,
         });
@@ -394,7 +400,7 @@ const ContentForm: React.FC<Props> = ({
         const modelField = modelFields.get(key);
         if (modelField) {
           fields.push({
-            value: inputValueGet(value as ItemValue, modelField.multiple),
+            value: inputValueGet(value as ItemValue, modelField),
             schemaFieldId: key,
             type: modelField.type,
           });
@@ -403,7 +409,7 @@ const ContentForm: React.FC<Props> = ({
             const groupField = groupFields.get(key);
             if (groupField) {
               fields.push({
-                value: inputValueGet(groupFieldValue, groupField.multiple),
+                value: inputValueGet(groupFieldValue, groupField),
                 schemaFieldId: key,
                 itemGroupId: groupFieldKey,
                 type: groupField.type,

diff --git a/web/src/components/molecules/Content/utils.ts b/web/src/components/molecules/Content/utils.ts
@@ -1,4 +1,5 @@
 import { ColorType, StateType } from "@reearth-cms/components/molecules/Content/Table/types";
+import { Tag } from "@reearth-cms/components/molecules/Schema/types";
 
 export const stateColors: {
   [K in StateType]: ColorType;
@@ -7,3 +8,6 @@ export const stateColors: {
   PUBLIC: "#52C41A",
   REVIEW: "#FA8C16",
 };
+
+export const selectedTagIdsGet = (value: string[], tags: Tag[]) =>
+  value.length ? tags.filter(tag => value.includes(tag.id)).map(({ id }) => id) : [];
diff --git a/web/src/components/molecules/Schema/FieldModal/FieldDefaultInputs/TagField/index.tsx b/web/src/components/molecules/Schema/FieldModal/FieldDefaultInputs/TagField/index.tsx
@@ -31,7 +31,9 @@ const TagField: React.FC<Props> = ({ selectedTags, multiple }) => {
         <Select key={selectedTags?.length} allowClear>
           {selectedTags?.map(tag => (
             <Select.Option key={tag.name} value={tag.name}>
-              <Tag color={tag.color.toLowerCase()}>{tag.name}</Tag>
+              <TagWrapper>
+                <Tag color={tag.color.toLowerCase()}>{tag.name}</Tag>
+              </TagWrapper>
             </Select.Option>
           ))}
         </Select>
@@ -41,6 +43,10 @@ const TagField: React.FC<Props> = ({ selectedTags, multiple }) => {
 };
 
 const StyledMultipleSelect = styled(Select)`
+  .ant-select-selection-overflow {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
   .ant-select-selection-overflow-item {
     margin-right: 4px;
   }
@@ -60,4 +66,9 @@ const StyledMultipleSelect = styled(Select)`
   }
 `;
 
+const TagWrapper = styled.div`
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+
 export default TagField;
diff --git a/web/src/components/molecules/Schema/FieldModal/hooks.ts b/web/src/components/molecules/Schema/FieldModal/hooks.ts
@@ -197,10 +197,20 @@ export default (
         return {
           date: { defaultValue: transformDayjsToString(values.defaultValue) ?? "" },
         };
-      case "Tag":
+      case "Tag": {
+        const defaultValue =
+          Array.isArray(values.defaultValue) && values.defaultValue.length
+            ? values.tags
+                ?.filter(tag => values.defaultValue.includes(tag.name))
+                .map(({ name }) => name)
+            : values.defaultValue;
         return {
-          tag: { defaultValue: values.defaultValue, tags: values.tags ?? [] },
+          tag: {
+            defaultValue,
+            tags: values.tags ?? [],
+          },
         };
+      }
       case "Checkbox":
         return {
           checkbox: { defaultValue: values.defaultValue },

diff --git a/web/src/components/molecules/Schema/types.ts b/web/src/components/molecules/Schema/types.ts
@@ -109,7 +109,7 @@ export type FieldTypePropertyInput = {
   bool?: { defaultValue?: boolean };
   select?: { defaultValue: string; values: string[] };
   tag?: {
-    defaultValue?: string;
+    defaultValue?: string | string[];
     tags: Tag[];
   };
   checkbox?: { defaultValue?: boolean };

diff --git a/web/src/components/organisms/Project/Content/ContentList/hooks.ts b/web/src/components/organisms/Project/Content/ContentList/hooks.ts
@@ -12,6 +12,7 @@ import {
   ItemField,
   Metadata,
 } from "@reearth-cms/components/molecules/Content/types";
+import { selectedTagIdsGet } from "@reearth-cms/components/molecules/Content/utils";
 import { Request, RequestItem } from "@reearth-cms/components/molecules/Request/types";
 import {
   ConditionInput,
@@ -201,6 +202,11 @@ export default () => {
     [getItem],
   );
 
+  const metaFieldsMap = useMemo(
+    () => new Map((currentModel?.metadataSchema.fields || []).map(field => [field.id, field])),
+    [currentModel?.metadataSchema.fields],
+  );
+
   const handleMetaItemUpdate = useCallback(
     async (
       updateItemId: string,
@@ -209,16 +215,21 @@ export default () => {
       index?: number,
     ) => {
       const target = data?.searchItem.nodes.find(item => item?.id === updateItemId);
-      if (!target || !currentModel?.metadataSchema?.id || !currentModel.metadataSchema.fields) {
+      if (!target || !currentModel?.metadataSchema?.id || !metaFieldsMap) {
         Notification.error({ message: t("Failed to update item.") });
         return;
       } else {
         const metadata = itemIdToMetadata.current.get(updateItemId) ?? target.metadata;
         if (metadata?.fields && metadata.id) {
           const fields = metadata.fields.map(field => {
             if (field.schemaFieldId === key) {
-              if (Array.isArray(field.value) && field.type !== "Tag") {
-                field.value[index ?? 0] = value ?? "";
+              if (Array.isArray(field.value)) {
+                if (field.type === "Tag") {
+                  const tags = metaFieldsMap.get(key)?.typeProperty?.tags;
+                  field.value = tags ? selectedTagIdsGet(value as string[], tags) : [];
+                } else {
+                  field.value[index ?? 0] = value ?? "";
+                }
               } else {
                 field.value = value ?? "";
               }
@@ -239,10 +250,10 @@ export default () => {
             return;
           }
         } else {
-          const fields = currentModel.metadataSchema.fields.map(field => ({
-            value: field.id === key ? value : "",
+          const fields = [...metaFieldsMap].map(field => ({
+            value: field[1].id === key ? value : "",
             schemaFieldId: key,
-            type: field.type as SchemaFieldType,
+            type: field[1].type as SchemaFieldType,
           }));
           const metaItem = await createNewItem({
             variables: {
@@ -278,9 +289,9 @@ export default () => {
     [
       createNewItem,
       currentModel?.id,
-      currentModel?.metadataSchema.fields,
       currentModel?.metadataSchema.id,
       data?.searchItem.nodes,
+      metaFieldsMap,
       metadataVersionSet,
       t,
       updateItemMutation,