Working embeds & renamed frontend to client

client/app/pages/query-snippets/edit.html

@@ -0,0 +1,29 @@
+<settings-screen>
+  <div class="">
+    <form name="snippetForm" class="form">
+      <div class="form-group">
+        <label>Trigger</label>
+        <input type="string" class="form-control" ng-model="$ctrl.snippet.trigger" ng-disabled="!$ctrl.canEdit" required>
+      </div>
+
+      <div class="form-group">
+        <label>Description</label>
+        <input type="string" class="form-control" ng-model="$ctrl.snippet.description" ng-disabled="!$ctrl.canEdit">
+      </div>
+
+      <div class="form-group">
+        <label>Snippet</label>
+        <pre ng-if="!$ctrl.canEdit">{{$ctrl.snippet.snippet}}</pre>
+        <div ui-ace="$ctrl.editorOptions" ng-model="$ctrl.snippet.snippet" style="height:300px" ng-if="$ctrl.canEdit"></div>
+      </div>
+
+      <div class="form-group" ng-if="$ctrl.canEdit">
+        <button class="btn btn-primary" ng-disabled="!snippetForm.$valid" ng-click="$ctrl.saveChanges()">Save</button>
+        <button class="btn btn-danger" ng-if="$ctrl.snippet.id" ng-click="$ctrl.delete()">Delete</button>
+      </div>
+      <small ng-if="$ctrl.snippet.user">
+        Created by: {{$ctrl.snippet.user.name}}
+      </small>
+    </form>
+  </div>
+</settings-screen>

client/app/pages/query-snippets/edit.js

@@ -0,0 +1,64 @@
+import 'brace/mode/snippets';
+import template from './edit.html';
+
+function SnippetCtrl($routeParams, $http, $location, toastr, currentUser, Events, QuerySnippet) {
+  // $scope.$parent.pageTitle = 'Query Snippets';
+  this.snippetId = $routeParams.snippetId;
+  Events.record('view', 'query_snippet', this.snippetId);
+
+  this.editorOptions = {
+    mode: 'snippets',
+    advanced: {
+      behavioursEnabled: true,
+      enableSnippets: false,
+      autoScrollEditorIntoView: true,
+    },
+    onLoad(editor) {
+      editor.$blockScrolling = Infinity;
+      editor.getSession().setUseWrapMode(true);
+      editor.setShowPrintMargin(false);
+    },
+  };
+
+  this.saveChanges = () => {
+    this.snippet.$save((snippet) => {
+      toastr.success('Saved.');
+      if (this.snippetId === 'new') {
+        $location.path(`/query_snippets/${snippet.id}`).replace();
+      }
+    }, () => {
+      toastr.error('Failed saving snippet.');
+    });
+  };
+
+  this.delete = () => {
+    this.snippet.$delete(() => {
+      $location.path('/query_snippets');
+      toastr.sucess('Query snippet deleted.');
+    }, () => {
+      toastr.error('Failed deleting query snippet.');
+    });
+  };
+
+  if (this.snippetId === 'new') {
+    this.snippet = new QuerySnippet({ description: '' });
+    this.canEdit = true;
+  } else {
+    this.snippet = QuerySnippet.get({ id: this.snippetId }, (snippet) => {
+      this.canEdit = currentUser.canEdit(snippet);
+    });
+  }
+}
+
+export default function (ngModule) {
+  ngModule.component('snippetPage', {
+    template,
+    controller: SnippetCtrl,
+  });
+
+  return {
+    '/query_snippets/:snippetId': {
+      template: '<snippet-page></snippet-page>',
+    },
+  };
+}

client/app/pages/query-snippets/index.js

@@ -0,0 +1,8 @@
+import registerList from './list';
+import registerEdit from './edit';
+
+export default function (ngModule) {
+  const routes = Object.assign({}, registerList(ngModule),
+                                   registerEdit(ngModule));
+  return routes;
+}

client/app/pages/query-snippets/list.html

@@ -0,0 +1,41 @@
+<settings-screen>
+    <div class="row voffset1">
+        <div class="col-md-12">
+          <p>
+            <a href="query_snippets/new" class="btn btn-default"><i class="fa fa-plus"></i> New Snippet</a>
+          </p>
+
+          <table class="table table-condensed table-hover">
+            <thead>
+              <tr>
+                <th>Trigger</th>
+                <th>Description</th>
+                <th>Snippet</th>
+                <th>Created By</th>
+                <th>Updated At</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-repeat="row in $ctrl.snippets.getPageRows()">
+                <td>
+                  <a href="query_snippets/{{row.id}}">{{row.trigger}}</a>
+                </td>
+                <td>
+                  {{row.description}}
+                </td>
+                <td>
+                  {{row.snippet}}
+                </td>
+                <td>
+                  {{row.user.name}}
+                </td>
+                <td>
+                  <span am-time-ago="row.created_at"></span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <paginator paginator="$ctrl.snippets"></paginator>
+        </div>
+    </div>
+</settings-screen>

client/app/pages/query-snippets/list.js

@@ -0,0 +1,25 @@
+import { Paginator } from '../../utils';
+import template from './list.html';
+
+function SnippetsCtrl($location, currentUser, Events, QuerySnippet) {
+  Events.record('view', 'page', 'query_snippets');
+  // $scope.$parent.pageTitle = 'Query Snippets';
+
+  this.snippets = new Paginator([], { itemsPerPage: 20 });
+  QuerySnippet.query((snippets) => {
+    this.snippets.updateRows(snippets);
+  });
+}
+
+export default function (ngModule) {
+  ngModule.component('snippetsListPage', {
+    template,
+    controller: SnippetsCtrl,
+  });
+
+  return {
+    '/query_snippets': {
+      template: '<snippets-list-page></snippets-list-page>',
+    },
+  };
+}