working frontend build

frontend-frame/src/components/{{component}}/{{component}}Editor.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="{{component}}-editor">
-    <div class="input-row">
-      <label>Grant Name: </label>
-      <input class="form-control" type="text" ref="name" placeholder="Grant Name" v-model="grant.name" />
-    </div>
 
     <!-- SYSTEM-BUILDER-input-row -->
 
@@ -22,7 +18,10 @@ import { {{Component}}Config } from './{{component}}Types.ts';
 
 @Component
 export default class {{Component}}Editor extends Vue {
-  @Prop() private {{component}}!: {{Component}}Config;
+  @Prop() private id!: string;
+  private {{component}}!: {{Component}}Config = {
+    // SYSTEM-BUILDER-init-props
+  };
   private loading: boolean = false;
   private errorMessage: string = '';
 
@@ -30,11 +29,29 @@ export default class {{Component}}Editor extends Vue {
     return true;
   }
 
+  private close() {
+    this.$emit('close-editor');
+  }
+
+  private mounted() {
+    this.loadDetails();
+  }
+
+  private loadDetails() {
+    this.loading = true;
+    this.errorMessage = '';
+    {{component}}Service.get{{Component}}(this.id).then((res: {{Component}}Config) => {
+      this.loading = false;
+      this.errorMessage = '';
+      this.{{component}} = res;
+    }).catch(this.handleError.bind(this));
+  }
+
   private save{{Component}}() {
     this.loading = true;
     this.errorMessage = '';
     // either create or update...
-    if (this.{{component}}.id === '') { // TODO: use the primary key instead of 'id' here
+    if (this.{{component}}.{{component}}_id === '') {
       {{component}}Service.create{{Component}}(this.{{component}}).then(() => {
         // success
         this.loading = false;