:fire: add button

dashboard/src/components/template/Wbw/WbwDetailRelation.tsx

@@ -21,6 +21,7 @@ export interface IRelation {
   dest_id: string;
   dest_spell: string;
   relation?: string;
+  is_new?: Boolean;
 }
 interface IWidget {
   data: IWbw;
@@ -28,8 +29,19 @@ interface IWidget {
   onAdd?: Function;
 }
 const WbwDetailRelationWidget = ({ data, onChange, onAdd }: IWidget) => {
+  const getSourId = () => `${data.book}-${data.para}-` + data.sn.join("-");
+
   const intl = useIntl();
   const [relation, setRelation] = useState<IRelation[]>([]);
+  const [newRelationName, setNewRelationName] = useState<string>();
+  const newRelationRow: IRelation = {
+    sour_id: getSourId(),
+    sour_spell: data.word.value,
+    dest_id: "",
+    dest_spell: "",
+    relation: undefined,
+    is_new: true,
+  };
   const [options, setOptions] = useState<IOptions[]>();
   const terms = useAppSelector(getTerm);
   const relations = useAppSelector(getRelation);
@@ -42,12 +54,14 @@ const WbwDetailRelationWidget = ({ data, onChange, onAdd }: IWidget) => {
       addParam.target_spell
     ) {
       const newRelation: IRelation = {
-        sour_id: `${data.book}-${data.para}-` + data.sn.join("-"),
+        sour_id: getSourId(),
         sour_spell: data.word.value,
         dest_id: addParam.target_id ? addParam.target_id : "",
         dest_spell: addParam.target_spell,
+        relation: newRelationName,
       };
       setRelation([...relation, newRelation]);
+      setNewRelationName(undefined);
     }
   }, [addParam?.command]);
 
@@ -126,55 +140,61 @@ const WbwDetailRelationWidget = ({ data, onChange, onAdd }: IWidget) => {
     relations,
     terms,
   ]);
+  const addButton = (
+    <Button
+      type="dashed"
+      icon={<PlusOutlined />}
+      onClick={() => {
+        if (typeof onAdd !== "undefined") {
+          onAdd();
+        }
+        store.dispatch(
+          add({
+            book: data.book,
+            para: data.para,
+            src_sn: data.sn.join("-"),
+            command: "add",
+          })
+        );
+      }}
+    >
+      {intl.formatMessage({ id: "buttons.add" })}
+    </Button>
+  );
   return (
     <List
       itemLayout="vertical"
       size="small"
-      header={
-        <Button
-          type="dashed"
-          icon={<PlusOutlined />}
-          onClick={() => {
-            if (typeof onAdd !== "undefined") {
-              onAdd();
-            }
-            store.dispatch(
-              add({
-                book: data.book,
-                para: data.para,
-                src_sn: data.sn.join("-"),
-                command: "add",
-              })
-            );
-          }}
-        >
-          {intl.formatMessage({ id: "buttons.add" })}
-        </Button>
-      }
-      dataSource={relation}
+      dataSource={[...relation, newRelationRow]}
       renderItem={(item, index) => (
         <List.Item>
           <Space>
-            <Button
-              type="text"
-              icon={<DeleteOutlined />}
-              onClick={() => {
-                let arrRelation: IRelation[] = [...relation];
-                arrRelation.splice(index, 1);
-                setRelation(arrRelation);
-                if (typeof onChange !== "undefined") {
-                  onChange({
-                    field: "relation",
-                    value: JSON.stringify(arrRelation),
-                  });
-                }
-              }}
-            />
-            {item.dest_spell}
+            {item.is_new ? undefined : (
+              <Button
+                type="text"
+                icon={<DeleteOutlined />}
+                onClick={() => {
+                  let arrRelation: IRelation[] = [...relation];
+                  arrRelation.splice(index, 1);
+                  setRelation(arrRelation);
+                  if (typeof onChange !== "undefined") {
+                    onChange({
+                      field: "relation",
+                      value: JSON.stringify(arrRelation),
+                    });
+                  }
+                }}
+              />
+            )}
+            {item.dest_spell ? item.dest_spell : addButton}
             <Select
               defaultValue={item.relation}
               style={{ width: 180 }}
               onChange={(value: string) => {
+                if (item.is_new) {
+                  setNewRelationName(value);
+                  return;
+                }
                 console.log(`selected ${value}`);
                 let arrRelation: IRelation[] = [...relation];
                 arrRelation[index].relation = value;