+
(
void;
toggleModal: () => void;
+ languages: string[];
+ language: string;
}
function isValid(data: { iri: string }) {
@@ -31,36 +33,92 @@ function isValid(data: { iri: string }) {
const CreatePropertyForm: React.FC = ({
onOptionCreate,
toggleModal,
+ languages,
+ language,
}) => {
const { i18n } = useI18n();
const [iri, setIri] = useState("");
- const [label, setLabel] = useState("");
- const [comment, setComment] = useState("");
- const language = useSelector(
- (state: TermItState) => state.configuration.language
- );
+ const [label, setLabel] = useState({} as MultilingualString);
+ const [comment, setComment] = useState({} as MultilingualString);
+ const [modalLanguages, setModalLanguages] = useState([...languages]);
+ const [modalLanguage, setModalLanguage] = useState(language);
+
+ const optimizeOrUndefined = (string: MultilingualString) => {
+ const optimized = Object.assign({}, string);
+ Object.keys(string).forEach((lang) => {
+ if (string[lang] && string[lang].trim() === "") {
+ delete optimized[lang];
+ }
+ });
+ if (Object.keys(optimized).length === 0) {
+ return undefined;
+ }
+ return optimized;
+ };
+
const onCreate = () => {
toggleModal();
+
const newProperty: RdfsResourceData = {
iri,
- label: label!.length > 0 ? langString(label, language) : undefined,
- comment: comment!.length > 0 ? langString(comment, language) : undefined,
+ label: optimizeOrUndefined(label),
+ comment: optimizeOrUndefined(comment),
types: [VocabularyUtils.RDF_PROPERTY],
};
onOptionCreate(newProperty);
};
+ const setMultilingualString = (
+ str: MultilingualString,
+ setter: (value: MultilingualString) => void,
+ value: string
+ ) => {
+ const copy = Object.assign({}, str);
+ copy[modalLanguage] = value;
+ setter(copy);
+ };
+
+ const removeTranslation = (lang: string) => {
+ const newLabel = Object.assign({}, label);
+ delete newLabel[lang];
+ setLabel(newLabel);
+
+ const newComment = Object.assign({}, comment);
+ delete newComment[language];
+ setComment(newComment);
+
+ const newModalLanguages = modalLanguages.filter((l) => l !== lang);
+ setModalLanguages(newModalLanguages);
+ };
+
+ const withMultilingualIcon = (text: string) => (
+ <>
+ {text}
+
+
+ );
+
return (
{i18n("properties.edit.new")}
+
+
+
setIri(e.currentTarget.value)}
hint={i18n("required")}
/>
@@ -68,8 +126,11 @@ const CreatePropertyForm: React.FC = ({
setLabel(e.currentTarget.value)}
+ label={withMultilingualIcon(i18n("properties.edit.new.label"))}
+ value={label[modalLanguage] || ""}
+ onChange={(e) =>
+ setMultilingualString(label, setLabel, e.currentTarget.value)
+ }
hint={i18n("required")}
/>
@@ -77,8 +138,15 @@ const CreatePropertyForm: React.FC = ({