Added metadata support when publishing resources.

qortal-ui-plugins/plugins/core/qdn/publish/publish.src.js

@@ -22,7 +22,11 @@ class PublishData extends LitElement {
             showName: { type: Boolean },
             showService: { type: Boolean },
             showIdentifier: { type: Boolean },
+            showMetadata: { type: Boolean },
+            tags: { type: Array },
             serviceLowercase: { type: String },
+            metadata: { type: Array },
+            categories: { type: Array },
             names: { type: Array },
             registeredName: { type: String },
             selectedName: { type: String },
@@ -101,11 +105,37 @@ class PublishData extends LitElement {
 					</paper-card>
 					<!-- TODO: adapt this dropdown to list all names on the account. Right now it's hardcoded to a single name -->
 					<p style="display: ${this.showName ? 'block' : 'none'}">
-						<mwc-select id="registeredName" label="Select Name" index="0" @selected=${(e) => this.selectName(e)} style="min-width: 130px; max-width:100%; width:100%;">
+						<mwc-select id="registeredName" label="Select Name" @selected=${(e) => this.selectName(e)} style="min-width: 130px; max-width:100%; width:100%;">
-							<mwc-list-item value="${this.registeredName}">${this.registeredName}</mwc-list-item>
+                            <mwc-list-item selected value=""></mwc-list-item>
+                            <mwc-list-item value="${this.registeredName}">${this.registeredName}</mwc-list-item>
 						</mwc-select>
 					</p>
+
+                    <div style="display: ${this.showMetadata ? 'block' : 'none'}">
+                        <p>
+						    <mwc-textfield style="width:100%;" label="Title" id="title" type="text" value="${this.metadata != null && this.metadata.title != null ? this.metadata.title : ''}" maxLength="80"></mwc-textfield><!--charCounter="true"-->
+                        </p>
+                        <p>
+                            <mwc-textfield style="width:100%;" label="Description" id="description" type="text" value="${this.metadata != null && this.metadata.description != null ? this.metadata.description : ''}" maxLength="500"></mwc-textfield><!--charCounter="true"-->
+                        </p>
+                        <p>
+                            <mwc-select id="category" label="Select Category" index="0" style="min-width: 130px; max-width:100%; width:100%;">
+                                ${this.categories.map((c, index) => html`
+                                    <mwc-list-item value="${c.id}">${c.name}</mwc-list-item>
+                                `)}
+                            </mwc-select>
+					    </p>
+                        <p>
+                            <mwc-textfield style="width:19.5%;" id="tag1" type="text" value="${this.metadata != null && this.metadata.tags != null && this.metadata.tags[0] != null ? this.metadata.tags[0] : ''}" placeholder="Tag 1" maxLength="20"></mwc-textfield>
+                            <mwc-textfield style="width:19.5%;" id="tag2" type="text" value="${this.metadata != null && this.metadata.tags != null && this.metadata.tags[1] != null ? this.metadata.tags[1] : ''}" placeholder="Tag 2" maxLength="20"></mwc-textfield>
+                            <mwc-textfield style="width:19.5%;" id="tag3" type="text" value="${this.metadata != null && this.metadata.tags != null && this.metadata.tags[2] != null ? this.metadata.tags[2] : ''}" placeholder="Tag 3" maxLength="20"></mwc-textfield>
+                            <mwc-textfield style="width:19.5%;" id="tag4" type="text" value="${this.metadata != null && this.metadata.tags != null && this.metadata.tags[3] != null ? this.metadata.tags[3] : ''}" placeholder="Tag 4" maxLength="20"></mwc-textfield>
+                            <mwc-textfield style="width:19.5%;" id="tag5" type="text" value="${this.metadata != null && this.metadata.tags != null && this.metadata.tags[4] != null ? this.metadata.tags[4] : ''}" placeholder="Tag 5" maxLength="20"></mwc-textfield>
+                        </p>
+					</div>
+
 					${this.renderUploadField()}
+
 					<p style="display: ${this.showService ? 'block' : 'none'}">
 						<mwc-textfield style="width:100%;" label="Service" id="service" type="text" value="${this.service}"></mwc-textfield>
 					</p>
@@ -279,15 +309,27 @@ class PublishData extends LitElement {
                 postBody = Buffer.from(fileBuffer).toString('base64');
             }
 
-            let uploadDataUrl = `/arbitrary/${this.service}/${registeredName}${urlSuffix}`
+            // Optional metadata
+            let title = encodeURIComponent(this.shadowRoot.getElementById('title').value);
+            let description = encodeURIComponent(this.shadowRoot.getElementById('description').value);
+            let category = encodeURIComponent(this.shadowRoot.getElementById('category').value);
+            let tag1 = encodeURIComponent(this.shadowRoot.getElementById('tag1').value);
+            let tag2 = encodeURIComponent(this.shadowRoot.getElementById('tag2').value);
+            let tag3 = encodeURIComponent(this.shadowRoot.getElementById('tag3').value);
+            let tag4 = encodeURIComponent(this.shadowRoot.getElementById('tag4').value);
+            let tag5 = encodeURIComponent(this.shadowRoot.getElementById('tag5').value);
+
+            let metadataQueryString = `title=${title}&description=${description}&category=${category}&tags=${tag1}&tags=${tag2}&tags=${tag3}&tags=${tag4}&tags=${tag5}`
+
+            let uploadDataUrl = `/arbitrary/${this.service}/${registeredName}${urlSuffix}?${metadataQueryString}&apiKey=${this.getApiKey()}`
             if (identifier != null && identifier.trim().length > 0) {
-                uploadDataUrl = `/arbitrary/${service}/${registeredName}/${this.identifier}${urlSuffix}`
+                uploadDataUrl = `/arbitrary/${service}/${registeredName}/${this.identifier}${urlSuffix}?${metadataQuery}&apiKey=${this.getApiKey()}`
             }
 
             let uploadDataRes = await parentEpml.request('apiCall', {
                 type: 'api',
                 method: 'POST',
-                url: `${uploadDataUrl}?apiKey=${this.getApiKey()}`,
+                url: `${uploadDataUrl}`,
                 body: `${postBody}`,
             })
 
@@ -389,6 +431,7 @@ class PublishData extends LitElement {
         this.showName = false;
         this.showService = false
         this.showIdentifier = false
+        this.showMetadata = false;
 
         const urlParams = new URLSearchParams(window.location.search)
         this.name = urlParams.get('name')
@@ -406,6 +449,9 @@ class PublishData extends LitElement {
         if (urlParams.get('showIdentifier') === "true") {
             this.showIdentifier = true
         }
+        if (urlParams.get('showMetadata') === "true") {
+            this.showMetadata = true
+        }
 
         if (this.identifier != null) {
             if (this.identifier === "null" || this.identifier.trim().length == 0) {
@@ -413,6 +459,9 @@ class PublishData extends LitElement {
             }
         }
 
+        this.categories = [];
+        this.tags = ["tag 1", "tag 2", "tag 3", "tag 4", "tag 5"];
+
         // Default to true so the message doesn't appear and disappear quickly
         this.portForwardingEnabled = true
         this.names = []
@@ -440,6 +489,17 @@ class PublishData extends LitElement {
             setTimeout(fetchNames, this.config.user.nodeSettings.pingInterval)
         }
 
+        const fetchCategories = () => {
+            parentEpml.request('apiCall', {
+                url: `/arbitrary/categories`
+            }).then(res => {
+
+                setTimeout(() => {
+                    this.categories = res
+                }, 1)
+            })
+        }
+
         const fetchPeersSummary = () => {
             parentEpml.request('apiCall', {
                 url: `/peers/summary`
@@ -463,6 +523,7 @@ class PublishData extends LitElement {
             parentEpml.subscribe('config', c => {
                 if (!configLoaded) {
                     setTimeout(fetchNames, 1)
+                    setTimeout(fetchCategories, 1)
                     setTimeout(fetchPeersSummary, 1)
                     configLoaded = true
                 }
@@ -496,9 +557,30 @@ class PublishData extends LitElement {
         }
     }
 
-    selectName(e) {
+    fetchResourceMetadata() {
-        const name = this.shadowRoot.getElementById('registeredName').innerHTML
+        let identifier = this.identifier != null ? this.identifier : "default";
+
+        parentEpml.request('apiCall', {
+            url: `/arbitrary/metadata/${this.service}/${this.name}/${identifier}?apiKey=${this.getApiKey()}`
+        }).then(res => {
+
+            setTimeout(() => {
+                this.metadata = res
+                if (this.metadata != null && this.metadata.category != null) {
+                    this.shadowRoot.getElementById('category').value = this.metadata.category;
+                }
+                else {
+                    this.shadowRoot.getElementById('category').value = "";
+                }
+            }, 1)
+        })
+    }
+
+    selectName() {
+        const name = this.shadowRoot.getElementById('registeredName').value
         this.selectedName = name
+        this.name = name
+        this.fetchResourceMetadata();
     }
 
     getApiKey() {