Merge pull request #5 from trendy-weshy/choices-editor

Choices editor module complete

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zushar",
   "description": "a form building tool",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "author": "John Waweru <[email protected]>",
   "private": true,
   "scripts": {

src/App.vue

@@ -12,22 +12,21 @@
       </transition>
     </div>
 
-    <zsr-alert></zsr-alert>
+    <zsr-alert :alerts="$store.state.zsrAlert.alerts"></zsr-alert>
 
   </div>
 </template>
 
 <script>
 import {
   hasDbInstance,
-  clearWorkspace,
   retrieveWorkspace,
   getForms
 } from './vuex/database.js'
 
 import titleBar from './components/TitleBar.vue'
 import menuBar from './components/MenuBar.vue'
-import zsrAlert from './components/Alerts.vue'
+import zsrAlert from './components/zsrAlert.vue'
 
 export default {
   name: 'app',
@@ -50,21 +49,6 @@ export default {
         forms
       });
     }
-    
-    // a welcoming message
-    this.$store.dispatch('alert', {
-      TYPE: 'CREATE_ALERT',
-      alert: {
-        content: {
-          heading: 'Welcome to zushar',
-          message: 'This is a simple tool built for create forms and simple questionnaires',
-          icon: 'smile'
-        },
-        level: 'info'
-      },
-      timeout: 3500
-    })
-
   }
 }
 </script>

src/components/Alert.vue

@@ -0,0 +1,54 @@
+<!-- created by waweru -->
+
+<template>
+
+    <transition name="zsrAlert">
+        <div 
+            :class="[
+                'ui', 
+                (alert.icon) ? 'icon' : '',
+                (alert.level==='normal') ? 'black' : alert.level,
+                'message'
+        ]">
+            <i :class="[alert.icon, 'icon']" v-if="alert.icon"></i>
+            <div class="content">
+                <div class="header" v-if="alert.heading">
+                    {{ alert.heading }}
+                </div>
+                <p>{{ alert.message }}</p>
+            </div>
+        </div>
+    </transition>
+
+</template>
+
+<script>
+    export default {
+        name: 'Alert',
+        props: {
+            alert: {
+                type: Object,
+                required: true
+            },
+            timeout: {
+                type: Function,
+                required: true
+            }
+        },
+        mounted() {
+            setTimeout(() => {
+                this.timeout(this.alert.id);
+            }, this.alert.timeout)
+        }
+    }
+</script>
+
+<style>
+    /* transition for zsr-alert */
+.zsrAlert-enter-active{
+  animation: slideInUp .4s;
+}
+.zsrAlert-leave-active{
+  animation: slideOutLeft .3s;
+}
+</style>

src/components/TitleBar.vue

@@ -1,18 +1,20 @@
 
 <template>
   <div id="title-bar">
-    <div class="ui container">
+    <div class="ui fluid container">
       <div class="ui two column grid">
         <div class="column">
           <img class="ui fluid small image logo" src="./../assets/logos/zushar_1.png">
         </div>
-        <div class="right floated five wide column">
-          <router-link :to="{ name: 'helpSupport' }" tag="button" class="ui tiny primary basic button btn">
+        <div class="right floated two wide column">
+          <!--<router-link :to="{ name: 'helpSupport' }" tag="button" class="ui tiny primary basic button btn">
             <i class="help circle outline icon"></i> Help and Support
-          </router-link>
+          </router-link>-->
+          <!--
           <button class="ui tiny basic button btn">
             <i class="sign out icon"></i> Exit
-          </button>
+          </button>-->
+          <h4 id="version_id" class="ui header">version v{{ version }}</h4>
         </div>
       </div>
     </div>
@@ -21,7 +23,12 @@
 
 <script>
   export default {
-    name: 'titleBar'
+    name: 'titleBar',
+    data() {
+      return {
+        version: process.env.version
+      }
+    }
   }
 </script>
 
@@ -35,9 +42,14 @@
   }
   #title-bar .logo{
     margin-top: 5px;
+    margin-left: 100px;
   }
   #title-bar .btn{
     margin-top: 7px;
     margin-left: 10px;
   }
+  #version_id{
+    color: rgba(239,108,0,0.2);
+    margin-top: 16px;
+  }
 </style>

src/components/selection/DropdownPropertiesEditor.vue

@@ -26,9 +26,14 @@
             </div>
         </div>
 
-        <button class="ui teal button">
+        <router-link 
+            class="ui teal button" 
+            v-if="$route.name==='editProperties'"
+            :to="{ name: 'choicesEditor' }"
+            tag="button">
+
             <i class="wizard icon"></i> Add / Edit question choices
-        </button>
+        </router-link>
 
         <div class="ui divider"></div>
 

src/components/selection/MultichoicePropertiesEditor.vue

@@ -51,9 +51,14 @@
             </div>
         </div>
 
-        <button class="ui teal button">
+        <router-link 
+            class="ui teal button" 
+            v-if="$route.name==='editProperties'"
+            :to="{ name: 'choicesEditor' }"
+            tag="button">
+
             <i class="wizard icon"></i> Add / Edit question choices
-        </button>
+        </router-link>
 
         <div class="ui divider"></div>
 

src/components/selection/MultiselectPropertiesEditor.vue

@@ -51,9 +51,14 @@
             </div>
         </div>
 
-        <button class="ui teal button">
+        <router-link 
+            class="ui teal button" 
+            v-if="$route.name==='editProperties'"
+            :to="{ name: 'choicesEditor' }"
+            tag="button">
+
             <i class="wizard icon"></i> Add / Edit question choices
-        </button>
+        </router-link>
 
         <div class="ui divider"></div>
 

src/components/zsrAlert.vue

@@ -0,0 +1,54 @@
+<!-- created by waweru -->
+
+<template>
+
+
+    <div class="zsr-alert-container">
+        <alert v-for="alert in alerts" :key="alert.id" :timeout="alertTimeout" :alert="alert"></alert>
+    </div>
+
+
+</template>
+
+<script>
+    import Alert from './Alert.vue'
+
+    export default {
+        name: 'zsrAlerts',
+        components: {
+            Alert
+        },
+        props: {
+            alerts: {
+                type: Array,
+                required: true
+            }
+        },
+        methods: {
+            alertTimeout(id) {
+                this.$store.dispatch('clear_alert', {
+                    TYPE: 'CLEAR_ALERT',
+                    id
+                })
+            }
+        }
+    }   
+</script>
+
+<style>
+.zsr-alert-container{
+    width: auto;
+    max-width: 450px;
+    height: auto;
+    bottom: 0;
+    display: block;
+    position: fixed;
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    padding-right: 0;
+    z-index: 30;
+    transition: all 1s ease;
+}
+</style>

src/router.js

@@ -11,6 +11,7 @@ import EditProperties from './views/EditProperties.vue'
 import SaveDraft from './views/SaveDraft.vue'
 import ViewDrafts from './views/ViewDrafts.vue'
 import Selection from './views/Selection.vue'
+import ChoicesEditor from './views/ChoicesEditor.vue'
 
 export default new Router({
   mode: 'history',
@@ -24,6 +25,7 @@ export default new Router({
     { path: '/save-draft', component: SaveDraft, name: 'saveDraft' },
     { path: '/drafts', component: ViewDrafts, name: 'viewDrafts' },
     { path: '/selection', component: Selection, name: 'Selection' },
+    { path: '/choices', component: ChoicesEditor, name: 'choicesEditor' },
     { path: '/', redirect: '/workspace' }
   ]
 })