added work meta info

Frontend/src/components/bundel/UserWorkListElement.jsx

@@ -15,6 +15,7 @@ import ISO6391 from "iso-639-1"; //https://www.npmjs.com/package/iso-639-1
 import InputField from "./InputField";
 import WorkCreatorFormView from "./WorkCreatorFormView";
 import moment from "moment";
+import WorkMetaInfoView from "./WorkMetaInfoView";
 
 //TODO add save elements into Backend
 
@@ -135,7 +136,10 @@ const UserWorkListElement = (props) => {
                     <div
                       onClick={(event) => {
                         event.stopPropagation();
-                        ApiService.getDownload(props.userWork.id, props.userWork.filename);
+                        ApiService.getDownload(
+                          props.userWork.id,
+                          props.userWork.filename,
+                        );
                       }}
                     >
                       <div class="flex items-center justify-center">
@@ -152,7 +156,10 @@ const UserWorkListElement = (props) => {
                       onClick={(event) => {
                         console.log(props.userWork.grid);
                         event.stopPropagation();
-                        ApiService.getPublicDownload(props.userWork.grid, props.userWork.filename);
+                        ApiService.getPublicDownload(
+                          props.userWork.grid,
+                          props.userWork.filename,
+                        );
                       }}
                     >
                       <div class="flex items-center justify-center">
@@ -513,6 +520,30 @@ const UserWorkListElement = (props) => {
                     </Collapsible>
                   </div>
                 </div>
+
+                <div className="shadow border-fairblue border-2 mb-5 overflow-hidden sm:rounded-md">
+                  <div className="px-4 py-5 bg-white space-y-6 sm:p-6">
+                    <Collapsible
+                      trigger={
+                        <div className="flex">
+                          <h4 className="flex-initial w-full text-lg font-medium leading-6 text-gray-900">
+                            <EasyTrans>
+                              MyWorks.WorkListElement.MetaInfo
+                            </EasyTrans>
+                          </h4>
+                          <ArrowDownIcon
+                            className="flex-initial h-6 w-6"
+                            aria-hidden="true"
+                          />
+                        </div>
+                      }
+                    >
+                      <dl className="mt-7">
+                        <WorkMetaInfoView userWork={props.userWork} />
+                      </dl>
+                    </Collapsible>
+                  </div>
+                </div>
               </div>
             </dl>
           </Collapsible>

Frontend/src/components/bundel/WorkMetaInfoView.jsx

+import EasyTrans from "./EasyTrans";
+import React from "react";
+import InputField from "./InputField";
+
+const WorkMetaInfoView = (props) => {
+  var metaInfo = {
+    hashFile: props?.userWork?.hashFile?.hexValue,
+    hashFileAlgorithm: props?.userWork?.hashFile?.algorithm,
+    hashMeta: props?.userWork?.hashMeta?.hexValue,
+    hashMetaAlgorithm: props?.userWork?.hashMeta?.algorithm,
+    ipfsFileCid: props?.userWork?.ipfsFile?.cid,
+    ipfsMetaCid: props?.userWork?.ipfsMeta?.cid,
+    visibility: props?.userWork?.visibility,
+  };
+
+  return (
+    <>
+      <div className="mt-7">
+        <InputField
+          label={<EasyTrans>MyWorks.WorkListElement.HashFile</EasyTrans>}
+          type="text"
+          name="hashFile"
+          id="hashFile"
+          defaultValue={metaInfo.hashFile}
+          className="focus:ring-fairblue focus:border-fairblue enabled:hover:ring-green-300 enabled:hover:border-green-300 block w-full shadow-sm sm:text-sm border-gray-300 disabled:border-white rounded-md"
+          disabled={true}
+        />
+        <InputField
+          label={
+            <EasyTrans>MyWorks.WorkListElement.HashFileAlgorithm</EasyTrans>
+          }
+          type="text"
+          name="hashFileAlgorithm"
+          id="hashFileAlgorithm"
+          defaultValue={metaInfo.hashFileAlgorithm}
+          className="focus:ring-fairblue focus:border-fairblue enabled:hover:ring-green-300 enabled:hover:border-green-300 block w-full shadow-sm sm:text-sm border-gray-300 disabled:border-white rounded-md"
+          disabled={true}
+        />
+        <InputField
+          label={<EasyTrans>MyWorks.WorkListElement.HashMeta</EasyTrans>}
+          type="text"
+          name="hashMeta"
+          id="hashMeta"
+          defaultValue={metaInfo.hashMeta}
+          className="focus:ring-fairblue focus:border-fairblue enabled:hover:ring-green-300 enabled:hover:border-green-300 block w-full shadow-sm sm:text-sm border-gray-300 disabled:border-white rounded-md"
+          disabled={true}
+        />
+        <InputField
+          label={
+            <EasyTrans>MyWorks.WorkListElement.HashMetaAlgorithm</EasyTrans>
+          }
+          type="text"
+          name="hashMetaAlgorithm"
+          id="hashMetaAlgorithm"
+          defaultValue={metaInfo.hashMetaAlgorithm}
+          className="focus:ring-fairblue focus:border-fairblue enabled:hover:ring-green-300 enabled:hover:border-green-300 block w-full shadow-sm sm:text-sm border-gray-300 disabled:border-white rounded-md"
+          disabled={true}
+        />
+        <InputField
+          label={<EasyTrans>MyWorks.WorkListElement.IpfsFileCid</EasyTrans>}
+          type="text"
+          name="ipfsFileCid"
+          id="ipfsFileCid"
+          defaultValue={metaInfo.ipfsFileCid}
+          className="focus:ring-fairblue focus:border-fairblue enabled:hover:ring-green-300 enabled:hover:border-green-300 block w-full shadow-sm sm:text-sm border-gray-300 disabled:border-white rounded-md"
+          disabled={true}
+        />
+        <InputField
+          label={<EasyTrans>MyWorks.WorkListElement.IpfsMetaCid</EasyTrans>}
+          type="text"
+          name="ipfsMetaCid"
+          id="ipfsMetaCid"
+          defaultValue={metaInfo.ipfsMetaCid}
+          className="focus:ring-fairblue focus:border-fairblue enabled:hover:ring-green-300 enabled:hover:border-green-300 block w-full shadow-sm sm:text-sm border-gray-300 disabled:border-white rounded-md"
+          disabled={true}
+        />
+        <InputField
+          label={<EasyTrans>MyWorks.WorkListElement.Visibility</EasyTrans>}
+          type="text"
+          name="visibility"
+          id="visibility"
+          defaultValue={metaInfo.visibility}
+          className="focus:ring-fairblue focus:border-fairblue enabled:hover:ring-green-300 enabled:hover:border-green-300 block w-full shadow-sm sm:text-sm border-gray-300 disabled:border-white rounded-md"
+          disabled={true}
+        />
+      </div>
+    </>
+  );
+};
+
+export default WorkMetaInfoView;

Frontend/src/locate/de/translate.json

@@ -266,7 +266,15 @@
         "Hash": "Hash",
         "BlockchainData": "Blockchain Data",
         "Actions": "Aktionen",
-        "Certificate": "Zertifikat"
+        "Certificate": "Zertifikat",
+        "MetaInfo": "Meta Data",
+        "HashFile": "Hash Werk",
+        "HashFileAlgorithm": "Hash-Algorithm Werk",
+        "HashMeta": "Hash Meta",
+        "HashMetaAlgorithm": "Hash-Algorithm Meta",
+        "IpfsFileCid": "IPFS CID File",
+        "IpfsMetaCid": "IPFS CID Meta",
+        "Visibility": "Visibility"
       },
       "WalletRequired": "A Wallet is Required",
       "ConnectWallet": "Connect Wallet",

Frontend/src/locate/en/translate.json

@@ -266,7 +266,15 @@
         "Hash": "Hash",
         "BlockchainData": "Blockchain Data",
         "Actions": "Actions",
-        "Certificate": "Certificate"
+        "Certificate": "Certificate",
+        "MetaInfo": "Meta Data",
+        "HashFile": "Hash Work",
+        "HashFileAlgorithm": "Hash-Algorithm Work",
+        "HashMeta": "Hash Meta",
+        "HashMetaAlgorithm": "Hash-Algorithm Meta",
+        "IpfsFileCid": "IPFS CID File",
+        "IpfsMetaCid": "IPFS CID Meta",
+        "Visibility": "Visibility"
       },
       "WalletRequired": "A Wallet is Required",
       "ConnectWallet": "Connect Wallet",