working frontend build

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

@@ -1,10 +1,5 @@
 <template>
-  <div class="{{component}}-editor">
-    <div class="property-row">
-      <label>Grant Name: </label>
-      <div>grant.name</div>
-    </div>
-
+  <div class="{{component}}-details">
     <!-- SYSTEM-BUILDER-property-row -->
 
   </div>
@@ -13,10 +8,36 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { {{Component}}Config } from './{{component}}Types.ts';
+import { {{component}}Service } from './{{component}}Service.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 = '';
+
+  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 handleError(err: any) {
+    // error
+    this.loading = false;
+    this.errorMessage = err.message;
+  }
 }
 </script>
 

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;

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

@@ -1,12 +1,15 @@
 <template>
   <div class="{{component}}-editor">
-    <div>TODO: search</div>
-
-    <div v-for="item in items" :key="item.id" class="input-row">
-      <div class="">{{ item.id }}</div>
+    <div class="filter-row">
+        <!-- SYSTEM-BUILDER-filter-options -->
     </div>
 
-    <div class="errorMessage" v-if="errorMessage != ''">{{errorMessage}}</div>
+    <div v-for="item in items" :key="item.{{component}}_id" class="input-row">
+      <div class="">{{ item.{{component}}_id }}</div>
+      <!-- SYSTEM-BUILDER-item-props -->
+    </div>
+
+    <div class="red-text" v-if="errorMessage !== ''">{{errorMessage}}</div>
   </div>
 </template>
 
@@ -17,22 +20,18 @@ import { {{Component}}Config } from './{{component}}Types.ts';
 
 @Component
 export default class {{Component}}Editor extends Vue {
-  private items!: {{Component}}Config[];
+  private items: {{Component}}Config[] = [];
   private loading: boolean = false;
   private errorMessage: string = '';
+  private filterItems: {{Component}}Config = {
+    // SYSTEM-BUILDER-init-props
+  };
   // SYSTEM-BUILDER-component-variables
 
   // SYSTEM-BUILDER-component-functions
 
-  private get{{Component}}s() {
-    this.loading = true;
-    this.errorMessage = '';
-    {{component}}Service.get{{Component}}s().then((listItems: {{Component}}Config[]) => {
-      // success
-      this.loading = false;
-      this.errorMessage = '';
-      this.items = listItems;
-    }).catch(this.handleError.bind(this));
+  private mounted() {
+    get{{Components}}();
   }
 
   // TODO: add a search function if there is an endpoint with type 'search'
@@ -46,7 +45,17 @@ export default class {{Component}}Editor extends Vue {
 </script>
 
 <style scoped lang="css">
-.errorMessage {
+.red-text {
   color: red;
 }
+.input-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.filter-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 </style>

frontend-frame/src/components/{{component}}/{{component}}Types.ets

@@ -2,9 +2,12 @@
 // SYSTEM-BUILDER-{{component}}-interfaces
 
 // e.g.
-// interface {{Component}}Config {
-// }
+interface {{Component}}Config {
+    {{component}}_id: string;
+    // SYSTEM-BUILDER-init-props
+}
 
 export {
+    {{Component}}Config,
     // SYSTEM-BUILDER-{{component}}-exports
 };