QuickTemplates 2/3

.gitignore

@@ -28,6 +28,9 @@ build/Release
 node_modules
 app/node_modules
 
+# NPM package lock
+package-lock.json
+
 # OSX
 .DS_Store
 

README.md

@@ -26,12 +26,16 @@ To run a project you can use either [Yarn](https://yarnpkg.com/lang/en/) or NPM:
 ```
 $ cd your_project
 $ yarn
+$ git submodule update --init
+$ powershell.exe .\_agt_clean.ps1
 $ npm run dev
 ```
 or
 ```
 $ cd your_project
 $ npm install
+$ git submodule update --init
+$ powershell.exe .\_agt_clean.ps1
 $ npm run dev
 ```
 

_aqt_merge.js

@@ -7,7 +7,9 @@ const dirMetadata = 'app/data/aqt';
 
 glob('azure-quickstart-templates/**/metadata.json', (error, files) => {
   if (fs.existsSync(dirMetadata) === false) {
-    fs.mkdirSync(dirMetadata);
+    const dirMetaSplit = dirMetadata.split('/');
+    fs.mkdirSync(`${dirMetaSplit[0]}/${dirMetaSplit[1]}`);
+    fs.mkdirSync(`${dirMetaSplit[0]}/${dirMetaSplit[1]}/${dirMetaSplit[2]}`);
   }
 
   let simpleCounter = 0;

app/components/QuickTemplate.css

@@ -0,0 +1,19 @@
+.quicktemplate {
+    position: relative;
+  }
+
+  .row {
+    padding-top: 2px !important;
+    padding-bottom: 2px !important;
+  }
+
+  .buttonRight {
+    position: absolute;
+    right: 30px;
+  }
+
+  .buttonLeft {
+    position: absolute;
+    left: 30px;
+  }
+

app/components/QuickTemplate.js

@@ -0,0 +1,65 @@
+// @flow
+import React, { Component } from 'react';
+import { Button, Form, Header, Icon, Grid, Modal, Divider } from 'semantic-ui-react';
+
+import styles from './QuickTemplate.css';
+
+const fs = require('fs');
+
+const dirMetadata = 'app/data/aqt';
+export default class QuickTemplate extends Component {
+  props: {
+    dispatchButtonClick: (action: string) => void,
+    openTemplate: (deployPath: string) => void,
+    isQuickTemplateOpen: boolean,
+    changePage: (action: string) => void,
+    currentPage: number
+  }
+
+  openTemplate(deployPath: string) {
+    this.props.openTemplate(deployPath);
+    this.props.dispatchButtonClick('CLOSE_QUICKTEMPLATE');
+  }
+
+  generateGrid() {
+    const templates = JSON.parse(fs.readFileSync(`./${dirMetadata}/output_${this.props.currentPage}.json`, 'utf8'));
+
+    const grid = [];
+    for (let i = 0; i < 10; i += 2) {
+      grid.push(<Grid.Row columns={2} key={i}>
+        <Grid.Column>
+          <Form.Field><Button className="ui button" type="button" fluid onClick={() => this.openTemplate(templates[i].deployPath)}>{templates[i].itemDisplayName}</Button></Form.Field>
+        </Grid.Column>
+        <Grid.Column>
+          <Form.Field><Button className="ui button" type="button" fluid onClick={() => this.openTemplate(templates[i].deployPath)}>{templates[i + 1].itemDisplayName}</Button></Form.Field>
+        </Grid.Column>
+      </Grid.Row>);
+    }
+
+    return grid;
+  }
+
+  render() {
+    return (
+      <Modal open={this.props.isQuickTemplateOpen} onClose={() => this.props.dispatchButtonClick('CLOSE_QUICKTEMPLATE')} closeIcon="close">
+        <Modal.Content className={styles.quicktemplate}>
+          <Header as="h2" icon textAlign="center">
+            <Icon name="key" />
+            Sample templates
+            <Header.Subheader>
+            Select quick template to load.
+            </Header.Subheader>
+          </Header>
+          <Divider />
+          <br />
+          <Grid>
+            {this.generateGrid()}
+          </Grid>
+          <br />
+          <Button color="teal" className={styles.buttonLeft} onClick={() => this.props.changePage('DECREMENT')}><Icon name="arrow left" /></Button>
+          <Button color="teal" className={styles.buttonRight} onClick={() => this.props.changePage('INCREMENT')}><Icon name="arrow right" /></Button>
+          <br />
+        </Modal.Content>
+      </Modal>);
+  }
+}