add category hints from methodlist

ccp/js/methodeditorcontroller.js

@@ -103,6 +103,18 @@ class CCPMethodEditorController extends HTMLElement{
         color: #0099CC;
         border: solid 1px #0099CC;
       }
+      li.category_list_item{
+        display: inline-block;
+        padding: 0.25em 0.4em;
+        line-height: 1;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: baseline;
+        border-radius: 0.25rem;
+        background-color: #eeffff;
+        color: #0099CC;
+        border: solid 1px #0099CC;
+      }
     </style>
   `
   #erase_icon = `
@@ -498,16 +510,6 @@ class CCPMethodEditorController extends HTMLElement{
       this.#rootdoc.querySelector("span[name=header]").innerText = this.#current.title
     })
     
-    this.#rootdoc.querySelector("input[name=category]").addEventListener("input", ev=>{
-      const category = ev.currentTarget.value ? ev.currentTarget.value : "Uncategorized"
-      const fields = this.#current.metadata.filter(md=>md.role === "category")
-      if(fields.length === 0){
-        this.#current.metadata.push({ "role" : "category", "title" : category}) 
-      }else{
-        fields[0].title = category
-      }
-    })
-    
     this.#rootdoc.querySelector("input[name=version]").addEventListener("input", ev=>{
       this.#current.version = ev.currentTarget.value
     })
@@ -578,6 +580,29 @@ class CCPMethodEditorController extends HTMLElement{
       }
     })
     
+    this.#rootdoc.querySelector("input[name=category-input]").addEventListener("keypress", ev=>{
+      if(ev.key === "Enter" || ev.which === 13){
+        ev.preventDefault()
+        ev.stopPropagation()
+        const val = ev.target.value
+        ev.target.value = null
+        if(this.#current.metadata.filter().length === 0){
+          this.#current.metadata.push({ role : "category", title : val})
+        }
+      }
+    })
+    
+    this.#rootdoc.querySelector("div[name=keyword-list]").addEventListener("click", ev=>{
+      ev.preventDefault()
+      ev.stopPropagation()
+      if(ev.target.getAttribute('name') === "delete-category"){
+        const index = ev.target.getAttribute("data-index")
+        this.#current.metadata.filter(md=>md.role === "category").splice(index, 1)
+        this.reRenderCategories()
+        this.#rootdoc.querySelector("input[name=category-input]").focus()
+      }
+    })
+    
     this.#rootdoc.querySelector("div[name=infrastructures]").addEventListener("change", ev=>{
       if(ev.target.getAttribute("name") === "infrastructure-input" && ev.target.value){
         ev.preventDefault()
@@ -769,16 +794,6 @@ class CCPMethodEditorController extends HTMLElement{
       </datalist>
     `
   }
- 
-  renderCategories(){
-    return `
-      <ul class="category_list">
-      ${ this.#current.metadata.
-          filter(md=>md.role === "category").
-          map(c=>`<li class="category_list_item" title="${c.title}">${c.title}</li>`).join("") }
-      </ul>
-    `
-  }
   
   renderContexts(){
     return `
@@ -853,6 +868,25 @@ class CCPMethodEditorController extends HTMLElement{
       return ""
     }
   }
+  
+  reRenderKeywords(){
+    this.#rootdoc.querySelector("div[name=category-list]").innerHTML = this.renderCategories()
+  }
+  
+  renderCategories(){
+    if(this.#current.keywords){
+      return this.#current.metadata.filter(md=>md.role === "category").map((k,i) => {
+        return `
+          <div class="ccp-option badge ccp-category" title="${k}" alt="${k}">
+            <span>${k}</span>
+            <span class="btn text-danger ccp-toolbar-button" name="delete-category" data-index="${i}">x</span>
+          </div>
+        `
+      }).join("\n")
+    }else{
+      return ""
+    }
+  } 
  
   reRenderInfrastructures(){
     this.#rootdoc.querySelector("select[name=infrastructure-input]").innerHTML = this.renderInfrastructureOptions()