Зачем-то стал писать JS на свойства конфигурации. Не собирался же!

src/Metadata/Configuration/getWebviewContent.ts

@@ -56,11 +56,18 @@ export function getWebviewContent(webview: Webview, extensionUri: Uri, configura
           <div class="parameter-container">
             <p class="label">Назначение использования</p>
             <p class="description">Указывает назначение использования прикладного решения (Мобильное устройство или Персональный компьютер). Свойство доступно только в том случае, если свойство Основной режим запуска установлено в значение Управляемое приложение.</p>
-            <div class="parameter-list">
+            <div id="purposes-list" class="parameter-list">
               ${configuration.usePurposes.map(up => `<div class="parameter-list-item"><div class="parameter-list-item-text">${up}</div></div>`).join('')}
+              <div id="add-purpose" class="hidden">
+                <vscode-dropdown>
+                  <vscode-option>111</vscode-option>
+                </vscode-dropdown>
+                <vscode-button id="save-purpose-button" class="add-cancel-button">ОК</vscode-button>
+                <vscode-button id="cancel-purpose-button" class="add-cancel-button" appearance="secondary">Отмена</vscode-button>
+              </div>
             </div>
             <div>
-              <vscode-button appearance="primary" class="parameter-button">Добавить назначение</vscode-button>
+              <vscode-button id="add-purpose-button" appearance="primary" class="parameter-button">Добавить назначение</vscode-button>
             </div>
           </div>
           <div class="parameter-container">
@@ -74,11 +81,11 @@ export function getWebviewContent(webview: Webview, extensionUri: Uri, configura
           <div class="parameter-container">
             <p class="label">Основные роли</p>
             <p class="description">Список ролей, которые будут использоваться в том случае, когда список пользователей прикладного решения пустой. В этом случае не выполняется авторизация доступа при начале работы системы и права доступа определяются набором ролей (<vscode-link href="#">подробнее о правиле сочетания ролей</vscode-link>), указанных в свойстве. При этом считается, что пользователь обладает административными правами вне зависимости от значения права Администрирование у всех ролей, указанных в качестве основных. Если не указаны основные роли конфигурации и список пользователей пуст, то пользователь работает без ограничения прав доступа. Роли задаются в ветви дерева конфигурации <vscode-link href="#">Общие – Роли</vscode-link>.</p>
-            <div class="parameter-list">
+            <div id="roles-list" class="parameter-list">
               ${configuration.defaultRoles.map(dr => `<div class="parameter-list-item"><div class="parameter-list-item-text">${dr}</div></div>`).join('')}
             </div>
             <div>
-              <vscode-button appearance="primary" class="parameter-button">Добавить роль</vscode-button>
+              <vscode-button id="add-role-button" appearance="primary" class="parameter-button">Добавить роль</vscode-button>
             </div>
           </div>
           <div class="parameter-container">

src/metadataView.ts

@@ -279,8 +279,6 @@ export class MetadataView {
       
           this.panel.title = newConfiguration.name;
           this.panel.webview.html = getWebviewContent(this.panel.webview, context.extensionUri, newConfiguration);
-      });
-    }
 
           this.panel?.onDidDispose(
             () => {
@@ -289,6 +287,8 @@ export class MetadataView {
             null,
             context.subscriptions
           );
+        });
+    }
   }
 
   private expand(element: TreeItem) {

webview-ui/main.js

@@ -1,2 +1,66 @@
 // Get access to the VS Code API from within the webview context
 const vscode = acquireVsCodeApi();
+
+window.addEventListener("load", main);
+
+function main() {
+  setVSCodeMessageListener();
+
+	setAddPurposeButtonStatus();
+
+  const addPurposeButton = document.getElementById("add-purpose-button");
+  addPurposeButton.addEventListener("click", addPurpose);
+  const okPurposeButton = document.getElementById("save-purpose-button");
+  okPurposeButton.addEventListener("click", okPurpose);
+  const cancelPurposeButton = document.getElementById("cancel-purpose-button");
+  cancelPurposeButton.addEventListener("click", okPurpose);
+
+  const addRoleButton = document.getElementById("add-role-button");
+  addRoleButton.addEventListener("click", addRole);
+}
+
+function setVSCodeMessageListener() {
+  window.addEventListener("message", (event) => {
+  });
+}
+
+function addPurpose() {
+  const addPurposeBlock = document.getElementById("add-purpose");
+	addPurposeBlock.classList.remove('hidden');
+
+	hidePurposeButton();
+}
+
+function okPurpose() {
+
+}
+
+function cancelPurpose() {
+  const addPurposeBlock = document.getElementById("add-purpose");
+	addPurposeBlock.classList.add('hidden');
+
+	showPurposeButton();
+}
+
+function setAddPurposeButtonStatus() {
+  const purposesList = document.getElementById("purposes-list");
+	if (purposesList.querySelectorAll('.parameter-list-item').length === 2) {
+		hidePurposeButton();
+	} else {
+		showPurposeButton();
+	}
+}
+
+function hidePurposeButton() {
+	const addPurposeButton = document.getElementById("add-purpose-button");
+	addPurposeButton.classList.add('hidden');
+}
+
+function showPurposeButton() {
+	const addPurposeButton = document.getElementById("add-purpose-button");
+	addPurposeButton.classList.remove('hidden');
+}
+
+function addRole() {
+  const rolesList = document.getElementById("roles-list");
+}

webview-ui/style.css

@@ -73,6 +73,24 @@ h1 {
   margin-top: 4px;
 }
 
+#add-purpose vscode-dropdown {
+  height: 24px;
+}
+
+.add-cancel-button {
+  margin-right: 4px;
+  height: 24px;
+}
+
+vscode-dropdown {
+  margin-top: 2px;
+  margin-right: 4px;
+}
+
+.hidden {
+  display: none;
+}
+
 @media screen and (min-width: 1024px) {
   #webview-body {
     padding: 0 8rem;