feat: add 'let me choose' option

package.json

@@ -85,7 +85,7 @@
 		"@types/lodash": "^4.14.138",
 		"@types/node": "^10.12.21",
 		"@types/uuid": "^3.4.5",
-		"@types/vscode": "^1.38.0",
+		"@types/vscode": "^1.37.0",
 		"@typescript-eslint/eslint-plugin": "^2.3.0",
 		"@typescript-eslint/parser": "^2.3.0",
 		"coveralls": "^3.0.6",

src/__mocks__/vscode.ts

@@ -19,3 +19,9 @@ export const window = {
 export const commands = {
     registerCommand: jest.fn(),
 } as {[key in keyof typeof vscode.commands]: jest.Mock};
+
+export const Uri = {
+    file: jest.fn(() => ({
+        with: jest.fn(() => '')
+    })),
+};

src/extension.ts

@@ -18,6 +18,7 @@ export function activate(context: vscode.ExtensionContext) {
     const settingProvider = vscode.workspace.getConfiguration('awesomeTree');
     const fileSystemWatcher = vscode.workspace.createFileSystemWatcher('**/*',false, true, true);
     const outputChannel = vscode.window.createOutputChannel('Awesome tree');
+    const chooseFilesTemplateWebView = getWebViewTemplate('chooseFiles');
 
     context.subscriptions.push(vscode.commands.registerCommand('extension.saveAsTemplate', saveAsTemplate));
     outputChannel.appendLine('Listening for file changes started!');
@@ -52,7 +53,8 @@ export function activate(context: vscode.ExtensionContext) {
         const uniquePathFiles = deleteSameTemplates(siblingTemplatePathFiles);
 
         const answersQuestion = [
-            'Yes, generate files', 
+            'Yes, generate files',
+            'Yes, let me choose', 
             'No, thanks'
         ];
 
@@ -61,27 +63,86 @@ export function activate(context: vscode.ExtensionContext) {
             ...answersQuestion
         );
 
-        if (resultQuestion !== answersQuestion[0]) {
+        if (resultQuestion === answersQuestion[2]) {
             return;
         }
 
-        uniquePathFiles.forEach(async (filePathTemplate) => {
-            const filePath: string = path.join(createdItemUri.fsPath, renderVariableTemplate(filePathTemplate, [infoAboutNewDirectory]));
+        let chooseFilesPanel: vscode.WebviewPanel | null = null;
+
+        if (resultQuestion === answersQuestion[1]) {
+            chooseFilesPanel = await showWebView(chooseFilesTemplateWebView, 'Choose files to create');
+        }
+
+        const filesWithContent = uniquePathFiles.map( (filePathTemplate) => {
+            const relativePathFile = renderVariableTemplate(filePathTemplate, [infoAboutNewDirectory]);
+            const filePath: string = path.join(createdItemUri.fsPath, relativePathFile);
             const savedTemplate = getMatchingTemplate(filePath);
 
             let content: string;
+            let fromTemplate: boolean = false;
             if (savedTemplate === null) {
                 content = createFileContent(filePathTemplate, infoAboutSiblingDirectories, [infoAboutNewDirectory]);
             } else {
+                fromTemplate = true;
                 content = savedTemplate.map(line => 
                     renderVariableTemplate(line, [infoAboutNewDirectory])
                 ).join('\n');
             }
-
-            const textDocument = await createDocument(filePath, content);
 
-            vscode.window.showTextDocument(textDocument);
+            return { 
+                filePath, 
+                filePathTemplate, 
+                content, 
+                fromTemplate, 
+                relativePath: path.join(relativePath, relativePathFile)
+            };
+
         });
+
+        if (resultQuestion === answersQuestion[0]) {
+            filesWithContent.forEach(async({filePath, content}) => {
+                const textDocument = await createDocument(filePath, content);
+                vscode.window.showTextDocument(textDocument);
+            });
+        } else {
+            type WebViewInfoAboutFiles = {
+                content: string;
+                filePath: string;
+                relativePath: string;
+                [key:string]: any;
+            };
+            const countSiblingDirectories = Object.keys(infoAboutSiblingDirectories).length;
+            const allSiblingHave: WebViewInfoAboutFiles[] = [];
+            const notAllSiblingHave: WebViewInfoAboutFiles[] = [];
+            const fromTemplate: WebViewInfoAboutFiles[] = [];
+
+            filesWithContent.forEach(async(fileInfo) => {
+                if (fileInfo.fromTemplate) {
+                    fromTemplate.push(fileInfo);
+                } else if (countSameTemplates(siblingTemplatePathFiles, fileInfo.filePathTemplate) === countSiblingDirectories) {
+                    allSiblingHave.push(fileInfo);
+                } else {
+                    notAllSiblingHave.push(fileInfo);
+                }
+            });
+
+            chooseFilesPanel && chooseFilesPanel.webview.postMessage({ 
+                type: 'SET_DATA', 
+                payload : {
+                    createdFolderName: path.basename(createdItemUri.fsPath),
+                    allSiblingHave,
+                    notAllSiblingHave,
+                    fromTemplate
+                }
+            });
+
+            chooseFilesPanel && chooseFilesPanel.webview.onDidReceiveMessage((action) => {
+                if (action.type === 'GENERATE_FILE') {
+                    const { filePath, content } = action.payload;
+                    createDocument(filePath, content);
+                }
+            });
+        }
     }
 
     async function tryCreateFileContentForNewFile(createdItemUri: vscode.Uri) {
@@ -164,6 +225,27 @@ export function activate(context: vscode.ExtensionContext) {
         return lineToGenerate.join('\n');
     }
 
+    function getWebViewTemplate (viewName: string) {
+        let html = fs.readFileSync(path.join(context.extensionPath, 'webViews', 'views', `${viewName}.html`)).toString();
+        html = html.replace(/\{\{basePath\}\}/gi,vscode.Uri.file(path.join(context.extensionPath, 'webViews')).with({
+            scheme: 'vscode-resource'
+        }).toString());
+
+        return html;
+    }
+
+    function showWebView (html: string, title: string): Promise<vscode.WebviewPanel> {
+        return new Promise((resolve) => {
+            const panel =  vscode.window.createWebviewPanel(
+                'vscode-awesome-tree', title, vscode.ViewColumn.One, {
+                    enableScripts: true,
+                }
+            );
+            panel.webview.html = html;
+            resolve(panel);
+        });
+    }
+
     function allFilesIncludeThisLine(files: Array<string[]>, line: string): boolean{
         for (let i = 0; i < files.length; i++) {
             const file = files[i];
@@ -184,6 +266,17 @@ export function activate(context: vscode.ExtensionContext) {
         return false;
     }
 
+    function countSameTemplates (templates: string [], templateToFind: string) {
+        let counter = 0;
+        for (let j = 0; j < templates.length; j++) {
+            const template = templates[j];
+            if (compareVariableTemplate(template, templateToFind)) {
+                counter++;
+            }
+        }
+        return counter;
+    }
+
     function deleteSameTemplates(templates: string[]){
         return templates.reduce((uniqueTemplates, template) => {
             if(!includesThisTemplate(uniqueTemplates, template)){

src/extenstion.test.ts

@@ -19,7 +19,8 @@ describe('extenstion', () => {
         mockContext = {
             subscriptions: {
                 push: jest.fn()
-            }
+            },
+            extensionPath : ''
         } as any as vscode.ExtensionContext;
         const createSystemWatcher = vscode.workspace.createFileSystemWatcher as jest.Mock;
         createSystemWatcher.mockReturnValueOnce(mockWatcher);

webViews/style.css

@@ -0,0 +1,118 @@
+
+.container {
+    margin: auto;
+    padding-left: 24px;
+    padding-right: 24px;
+    max-width: 1000px;
+    box-sizing: border-box;
+}
+
+.footer {
+    border-top: 1px solid var(--vscode-dropdown-border);
+    margin-top: 32px;
+    padding: 16px 0;
+    text-align: center;
+}
+
+.tab {
+    border-bottom: 1px solid var(--vscode-dropdown-border);
+    display:flex;
+    padding:0;
+}
+
+.tab__item {
+    list-style: none;
+    cursor: pointer;
+    font-size: 13px;
+    padding: 7px 8px;
+    color: var(--vscode-foreground);
+    border-bottom: 1px solid transparent;
+    margin: 0 0 -1px 0;
+}
+
+.tab__item:hover {
+    color: var(--vscode-panelTitle-activeForeground);
+}
+
+.tab__item--active {
+    color: var(--vscode-panelTitle-activeForeground);
+    border-bottom-color: var(--vscode-panelTitle-activeForeground);
+}
+
+.field {
+    padding: 1em 0;
+}
+
+.field--checkbox {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row-reverse;
+    align-items: center;
+}
+
+.field__label {
+    display: block;
+    margin: 2px 0;
+    cursor: pointer;
+}
+
+.field__code {
+    overflow: auto;
+    max-width: 100%;
+    max-height: 200px;
+}
+
+.field--checkbox .field__label {
+    margin: 2px 4px;
+}
+
+.field__input {
+    background: var(--vscode-input-background);
+    border: 1px solid var(--vscode-dropdown-border);
+    color: var(--vscode-input-foreground);
+    padding: 4px;
+    margin: 2px 0;
+}
+
+.field__input:focus {
+    border-color: var(--vscode-focusBorder);
+    outline: 0;
+}
+
+.button {
+    width: auto;
+    padding: 2px 14px;
+    border: 0;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.button--primary {
+    color: var(--vscode-button-foreground);
+    background-color: var(--vscode-button-background);
+}
+
+.button--primary:hover {
+    background-color: var(--vscode-button-hoverBackground);
+}
+
+.panel {
+    margin: 0 7px 0 5px;
+    padding: 0 16px 0 10px;
+    /* border-left-width: 5px;
+    border-left-style: solid; */
+    background: var(--vscode-textBlockQuote-background);
+    /* border-color: var(--vscode-inputValidation-errorBorder); */
+}
+
+.panel__text{
+    line-height: 2;
+}
+
+.panel__button {
+    visibility: hidden;
+}
+
+.panel:hover .panel__button {
+    visibility: visible;
+}