Review Examples Side-Car data and Vuex store.

Author: Renoir Boulanger

client/components/Navbar.vue

@@ -60,7 +60,6 @@ export default class Navbar extends Vue {
       this.$store.dispatch('menu/addAll', this.translateMenus(menus))
     }
   }
-
   translateMenus (menus) {
     return menus.map((menu) => {
       const subMenus = menu.children

client/components/examples/activity/NewActivity.vue

@@ -8,8 +8,13 @@
           </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="{span: 10, offset: 2}">
-          <el-form-item :label="$t('activity.area')" prop="region">
-            <el-select v-model="formData.region" filterable allow-create :placeholder="$t('activity.holder.area')">
+          <el-form-item :label="$t('activity.city.label')" prop="city">
+            <el-select
+              v-model="formData.city"
+              filterable
+              allow-create
+              :placeholder="$t('activity.holder.area')"
+            >
               <el-option
                 v-for="item in cities"
                 v-if="!item.disabled"
@@ -41,19 +46,52 @@
         </el-col>
       </el-row>
       <el-row type="flex" justify="flex-start">
-        <el-col :xs="24" :sm="10">
-          <el-form-item :label="$t('activity.type')" prop="type">
+        <el-col
+          :xs="24"
+          :sm="10"
+        >
+          <el-form-item
+            :label="$t('activity.type.label')"
+            prop="type"
+          >
             <el-checkbox-group v-model="formData.type">
-              <el-checkbox :label="$t('activity.price')"></el-checkbox>
-              <el-checkbox :label="$t('activity.rights')"></el-checkbox>
+              <el-checkbox
+                label="activity.type.price"
+              >
+                {{$t('activity.type.price')}}
+              </el-checkbox>
+              <el-checkbox
+                label="activity.type.rights"
+              >
+                {{$t('activity.type.rights')}}
+              </el-checkbox>
             </el-checkbox-group>
           </el-form-item>
         </el-col>
-        <el-col :xs="24" :sm="{span: 10, offset: 2}">
-          <el-form-item :label="$t('activity.priority')" prop="priority">
+        <el-col
+          :xs="24"
+          :sm="{span: 10, offset: 2}"
+        >
+          <el-form-item
+            :label="$t('activity.priority.label')"
+            prop="priority"
+          >
             <el-radio-group v-model="formData.priority">
-              <el-radio :label="$t('activity.medium')"></el-radio>
-              <el-radio :label="$t('activity.high')"></el-radio>
+              <el-radio
+                label="activity.priority.low"
+              >
+                {{$t('activity.priority.low')}}
+              </el-radio>
+              <el-radio
+                label="activity.priority.medium"
+              >
+                {{$t('activity.priority.medium')}}
+              </el-radio>
+              <el-radio
+                label="activity.priority.high"
+              >
+                {{$t('activity.priority.high')}}
+              </el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
@@ -106,9 +144,10 @@
 
 <script>
 import Vue from 'vue'
-import Component, { Getter, namespace } from 'class-component'
+import Component, { Action, Getter, namespace } from 'class-component'
 
-const ExampleGetter = namespace('examples/index', Getter)
+const ActivityGetter = namespace('examples/index', Getter)
+const ActivityAction = namespace('examples/activity', Action)
 
 @Component({
   props: {
@@ -117,12 +156,12 @@ const ExampleGetter = namespace('examples/index', Getter)
       default () {
         return {
           account: '',
-          region: 'activity.city.ly',
+          city: 'activity.city.ly',
           date1: '',
           date2: '',
           delivery: false,
           type: [],
-          priority: '',
+          priority: 'activity.priority.low',
           rate: 0,
           organizer: [],
           desc: '',
@@ -138,8 +177,8 @@ const ExampleGetter = namespace('examples/index', Getter)
           { required: true, message: this.$t('activity.rule.account.required'), trigger: 'blur' },
           { min: 6, message: this.$t('activity.rule.account.length'), trigger: 'blur' }
         ],
-        region: [
-          { required: true, message: this.$t('activity.rule.region.required'), trigger: 'change' }
+        city: [
+          { required: true, message: this.$t('activity.rule.city.required'), trigger: 'change' }
         ],
         date1: [
           { type: 'date', required: true, message: this.$t('activity.rule.date1.required'), trigger: 'change' }
@@ -164,9 +203,10 @@ const ExampleGetter = namespace('examples/index', Getter)
   }
 })
 export default class NewActivity extends Vue {
-  @ExampleGetter labels
-  @ExampleGetter organizers
-  @ExampleGetter cities
+  @ActivityGetter labels
+  @ActivityGetter organizers
+  @ActivityGetter cities
+  @ActivityAction('add') addActivity
 
   submit (formName) {
     /**
@@ -180,7 +220,7 @@ export default class NewActivity extends Vue {
 
     this.$refs[formName].validate((valid) => {
       if (valid) {
-        this.$store.dispatch('examples/activity/add', this.formData)
+        this.addActivity(this.formData)
         this.$message.success(this.$t('activity.success'))
         if (formName === 'popForm') {
           this.popVisible = false

client/locales/examples/en.json

@@ -5,9 +5,12 @@
     },
     "account": "Account",
     "date": "Date",
-    "type": "Type",
-    "area": "Area",
-    "priority": "Priority",
+    "priority": {
+      "label": "Priority",
+      "low": "Low",
+      "medium": "Medium",
+      "high": "High"
+    },
     "organizer": "Organizer",
     "desc": "Description",
     "tag": "Tag",
@@ -28,17 +31,20 @@
       }
     },
     "city": {
+      "label": "City",
       "sh": "ShangHai",
       "bj": "BeiJing",
       "gz": "GuangZhou",
-      "ly": "Lyster",
+      "ly": "Lyster Beach 🌴",
+      "ny": "New-York 🍎",
       "sz": "ShenZhen"
     },
     "instDist": "JD",
-    "price": "Discount",
-    "rights": "Rights",
-    "medium": "Medium",
-    "high": "High",
+    "type": {
+      "label": "Type of activity",
+      "price": "Discount",
+      "rights": "Rights"
+    },
     "rule": {
       "account": {
         "required": "Pls input account name",

client/locales/examples/fr.json

@@ -5,17 +5,20 @@
     },
     "account": "Compte",
     "date": "Date",
-    "type": "Type",
-    "area": "Région",
-    "priority": "Priorité",
+    "priority": {
+      "label": "Priorité",
+      "low": "Basse",
+      "medium": "Moyenne",
+      "high": "Élevée"
+    },
     "organizer": "Organisateur",
     "desc": "Description",
     "tag": "Étiquette",
     "rate": "Appréciation",
     "create": "Créer",
     "reset": "Réinitialiser",
     "holder": {
-      "area": "Choisir une région",
+      "area": "Choisir une ville",
       "tag": "Choisir une étiquette",
       "date": "Choisir une date",
       "time": "Choisir un moment"
@@ -28,17 +31,20 @@
       }
     },
     "city": {
+      "label": "Ville",
       "sh": "ShangHai",
       "bj": "BeiJing",
       "gz": "GuangZhou",
-      "ly": "Lyster",
+      "ly": "Lyster Beach 🌴",
+      "ny": "New-York 🍎",
       "sz": "ShenZhen"
     },
     "instDist": "JD",
-    "price": "Rabais",
-    "rights": "Droit",
-    "medium": "Médium",
-    "high": "Élevé",
+    "type": {
+      "label": "Type d’activité",
+      "price": "Rabais",
+      "rights": "Droit"
+    },
     "rule": {
       "account": {
         "required": "Veuillez spécifier un nom d’utilisateur",

client/locales/examples/zh.json

@@ -5,9 +5,12 @@
     },
     "account": "账号",
     "date": "活动时间",
-    "type": "活动类型",
-    "area": "活动区域",
-    "priority": "优先级",
+    "priority": {
+      "label": "优先级",
+      "low": "低",
+      "medium": "中",
+      "high": "高"
+    },
     "organizer": "承办方",
     "desc": "活动描述",
     "tag": "活动标签",
@@ -28,17 +31,20 @@
       }
     },
     "city": {
+      "label": "活动区域",
       "sh": "上海",
       "bj": "北京",
       "gz": "广州",
       "ly": "🌴",
+      "ny": "🍎",
       "sz": "深圳"
     },
     "instDist": "即时配送",
-    "price": "price",
-    "rights": "rights",
-    "medium": "中",
-    "high": "高",
+    "type": {
+      "label": "活动类型",
+      "price": "价格优惠",
+      "rights": "价格权益"
+    },
     "rule": {
       "account": {
         "required": "请输入活动名称",

client/pages/about.vue

@@ -4,3 +4,17 @@
     <p>Hello, I am the about page :)</p>
   </div>
 </template>
+
+<script>
+import Vue from 'vue'
+import Component from 'class-component'
+
+@Component({
+  head () {
+    return {
+      title: 'About'
+    }
+  }
+})
+export default class About extends Vue {}
+</script>

client/pages/examples/activity/create.vue

@@ -3,7 +3,7 @@
     <el-row type="flex" justify="center" :gutter="0">
       <el-card style="width:90%">
         <div slot="header">
-          <span>{{$t(title)}}</span>
+          <span>{{$t('activity.title.create')}}</span>
         </div>
         <new-activity :form-data="activity" ref="popActivity"></new-activity>
       </el-card>
@@ -13,22 +13,23 @@
 
 <script>
 import Vue from 'vue'
+import Component from 'class-component'
 import NewActivity from '@/components/examples/activity/NewActivity'
-import Component, { Getter, namespace } from 'class-component'
-
-const ActivityGetter = namespace('examples/activity', Getter)
 
 @Component({
   components: {
     NewActivity
+  },
+  head () {
+    return {
+      title: 'Examples Activity Create'
+    }
   }
 })
 export default class Create extends Vue {
-  @ActivityGetter title
-
   activity = {
     account: '',
-    region: '',
+    city: '',
     date1: '',
     date2: '',
     delivery: false,