make right rail work with editor and details

frontend-frame/src/components/RightRail.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="right-rail-container" :class="{'container-open': showContainer}">
+    <div class="right-rail-close-area" :class="{'visible': open, 'hidden': !open}" @click="toggleRightRail"></div>
+    <transition name="slidein"
+                v-on:before-enter="beforeEnter"
+                v-on:after-leave="afterLeave">
+      <div v-if="open" class="right-rail-rail right-rail-slidein">
+        <button type="button" class="close" aria-label="Close" @click="toggleRightRail">
+          <span aria-hidden="true">X<i class="fas fa-times"></i></span>
+        </button>
+        <slot class="rail-content"></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class RightRail extends Vue {
+  @Prop() private open!: boolean;
+
+  private showContainer: boolean = false;
+
+  private toggleRightRail() {
+    this.$emit('toggle-right-rail');
+  }
+
+  private beforeEnter() {
+    this.showContainer = true;
+  }
+
+  private afterLeave() {
+    this.showContainer = false;
+  }
+}
+</script>
+
+<style scoped lang="css">
+.right-rail-container {
+  z-index: 100;
+  position: fixed;
+  right: 0px;
+  top: 0px;
+}
+
+.container-open {
+  height: 100%;
+  width: 100%;
+}
+
+.right-rail-close-area {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.2);
+  /*display: none;*/
+}
+
+.visible {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity .5s ease;
+}
+
+.hidden {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s .5s, opacity .5s ease;
+}
+
+.right-rail-rail {
+  flex-shrink: 0;
+  width: 450px;
+  background: #FFFFFF;
+  border-left: 1px solid rgba(0,0,0,0.2);
+  height: 100%;
+  position: absolute;
+  right: 0px;
+  padding: 10px;
+}
+
+.right-rail-item {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  padding: 10px;
+}
+
+.slidein-enter-active {
+  animation: slidein .5s;
+}
+
+.slidein-leave-active {
+  animation: slidein .5s reverse;
+}
+
+@keyframes slidein {
+  from {
+    right: -650px;
+  }
+  to {
+    right: 0px;
+  }
+}
+
+@media (max-width: 768px) {
+  .right-rail-container.container-open {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+  }
+  .right-rail-rail {
+    position: absolute;
+    right: 0px;
+    width: 80%;
+  }
+
+  .right-rail-close-area {
+    display: block;
+  }
+}
+</style>

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

@@ -11,7 +11,7 @@ import { {{Component}}Config } from './{{component}}Types';
 import { {{component}}Service } from './{{component}}Service';
 
 @Component
-export default class {{Component}}Editor extends Vue {
+export default class {{Component}}Details extends Vue {
   @Prop() private id!: string;
   private {{component}}: {{Component}}Config = {
     // SYSTEM-BUILDER-init-props

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

@@ -18,10 +18,7 @@ import { {{Component}}Config } from './{{component}}Types';
 
 @Component
 export default class {{Component}}Editor extends Vue {
-  @Prop() private {{component}}_id!: string;
-  private {{component}}: {{Component}}Config = {
-    // SYSTEM-BUILDER-init-props
-  };
+  @Prop() private {{component}}!: {{Component}}Config;
   private loading: boolean = false;
   private errorMessage: string = '';
 
@@ -34,18 +31,18 @@ export default class {{Component}}Editor extends Vue {
   }
 
   private mounted() {
-    this.loadDetails();
+    // this.loadDetails();
   }
 
-  private loadDetails() {
-    this.loading = true;
-    this.errorMessage = '';
-    {{component}}Service.get{{Component}}(this.{{component}}_id).then((res: {{Component}}Config) => {
-      this.loading = false;
-      this.errorMessage = '';
-      this.{{component}} = res;
-    }).catch(this.handleError.bind(this));
-  }
+  // private loadDetails() {
+  //   this.loading = true;
+  //   this.errorMessage = '';
+  //   {{component}}Service.get{{Component}}(this.{{component}}_id).then((res: {{Component}}Config) => {
+  //     this.loading = false;
+  //     this.errorMessage = '';
+  //     this.{{component}} = res;
+  //   }).catch(this.handleError.bind(this));
+  // }
 
   private save{{Component}}() {
     this.loading = true;

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

@@ -1,5 +1,6 @@
 <template>
   <div class="{{component}}-editor">
+    <div class="red-text" v-if="errorMessage !== ''">{{errorMessage}}</div>
     <div class="filter-row">
         <!-- SYSTEM-BUILDER-filter-options -->
     </div>
@@ -9,7 +10,10 @@
       <!-- SYSTEM-BUILDER-item-props -->
     </div>
 
-    <div class="red-text" v-if="errorMessage !== ''">{{errorMessage}}</div>
+    <right-rail :open="!!selected{{Component}}.clientId" v-on:toggle-right-rail="toggleEdit{{Component}}">
+      <{{Component}}Details :client="selected{{Component}}" @close-{{component}}-details="toggleEdit{{Component}}"></{{Component}}Details>
+    </right-rail>
+
   </div>
 </template>
 
@@ -26,6 +30,9 @@ export default class {{Component}}Editor extends Vue {
   private filterItems: {{Component}}Config = {
     // SYSTEM-BUILDER-init-props
   };
+  private selected{{Component}} = {
+
+  } ;
   // SYSTEM-BUILDER-component-variables
 
   // SYSTEM-BUILDER-component-functions
@@ -36,6 +43,10 @@ export default class {{Component}}Editor extends Vue {
 
   // TODO: add a search function if there is an endpoint with type 'search'
 
+  private toggleEdit{{Component}}() {
+
+  }
+
   private handleError(err: any) {
     // error
     this.loading = false;

frontend-frame/src/main.ts

@@ -3,6 +3,10 @@ import App from './App.vue'
 import router from './router';
 import './registerServiceWorker'
 
+import RightRail from './components/RightRail.vue';
+
+Vue.component('right-rail', RightRail);
+
 Vue.config.productionTip = false
 
 new Vue({