Add edit validation, availabile api, fix siteName.

xinbenlv · Apr 30, 2020 · 4eb189d · 4eb189d
1 parent e9878e4
commit 4eb189d
Show file tree

Hide file tree

Showing 12 changed files with 211 additions and 113 deletions.
diff --git a/components/QrCodeEditor.vue b/components/QrCodeEditor.vue
@@ -1,29 +1,28 @@
 <template>
 
-  <div class="qr-code-section d-flex my-2">
-    <div>
-      <img class="border qr_code" :src="`/qr/${goLink}.png`"/>
+  <div class="qr-code-section d-flex bg-white p-3 rounded">
+    <div class="mr-3">
+      <div><img class="border qr_code" :src="qrCodeApiUrl"/></div>
+      <div class="w-100 mt-2 "><a class="btn btn-outline-secondary btn-sm width-128" :href="`/qr/d/${goLink}.png`">Download</a></div>
     </div>
-    <div class="ml-3 flex-grow-1">
+    <div class="border-right mr-3"></div>
+    <div >
       <div>
         <div class="input-group">
-          <input :value="caption"
-            @input="$emit('update:caption', $event.target.value)"
-            class="form-control" id="qrcode_caption" type="text" placeholder="add a description" name="caption"/>
-          <div class="input-group-append">
-            <button class="btn btn-outline-secondary" id="btn_update_caption" type="button"><i
-              class="fas fa-pen"></i></button>
-          </div>
+          <b-form-textarea :value="caption" style="width: 200px;height: 100px"
+            @input="updateCaption($event)"
+            class="form-control" id="qrcode_caption"  placeholder="add a description" name="caption"/>
         </div>
       </div>
-      <div><span class="text-secondary"><small>20 character or less</small></span></div>
+      <div>
+        <span class="text-secondary"><small>20 character or less</small></span>
+      </div>
       <div class="my-1 form-check mt-1">
         <input class="form-check-input" id="checkbox_qrcode_logo"
           :checked="addLogo"
           @input="$emit('update:addLogo', $event.target.checked)"
           type="checkbox" name="addLogo"/><label
-        class="ml-2 form-check-label" for="checkbox_qrcode_logo">Add ZaiGeZaiGu logo</label></div>
-      <div><a class="btn btn-outline-secondary btn-sm" :href="`/qr/d/${goLink}.png`">Download</a></div>
+        class="ml-2 form-check-label" for="checkbox_qrcode_logo">Add logo</label></div>
     </div>
   </div>
 </template>
@@ -36,10 +35,23 @@
       @Prop({type: String, required: true}) readonly goLink: string;
       @Prop({type: String, required: true}) readonly caption: string;
       @Prop({type: Boolean, required: true}) readonly addLogo: boolean;
+
+    get qrCodeApiUrl() {
+      let url = `/qr/${this.goLink}.png`;
+      url += `?addLogo=${this.addLogo.toString()}`;
+      if (this.caption) url += `&caption=${ this.caption}`;
+      return encodeURI(url);
+    }
+    updateCaption = function(event) {
+      this.$emit('update:caption', event)
+    }
   }
 </script>
 
 <style scoped>
+  .width-128 {
+    width: 128px;
+  }
   .qr_code {
     width: 128px;
     height: 128px;

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -28,15 +28,17 @@
 </template>
 
 <script>
-
   import {Component, Prop, Vue} from 'nuxt-property-decorator';
   @Component({
   })
   export default class DefaultLayout extends Vue {
-    title = 'zgzg.link';
+    title = '';
     get loggedIn() {
       return this.$store.state.user !== null;
     }
+    mounted () {
+      this.title = this.$env.OPEN_GOLINKS_SITE_HOST;
+    }
   }
 
 </script>

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -82,6 +82,8 @@ export default {
       keys: [
         'HOST',
         'PORT',
+        'OPEN_GOLINKS_SITE_HOST',
+        'OPEN_GOLINKS_SITE_NAME',
       ]
     }],
   ],
@@ -111,7 +113,11 @@ export default {
           ]
         ]
       }
-    }
+    },
+    transpile: [
+      "vee-validate/dist/rules",
+      "vee-validate/dist/vee-validate.full.esm"
+      ],
   },
 
   router: {
@@ -137,7 +143,7 @@ export default {
   */
   plugins: [
     '@/plugins/axios.ts',
+    "@/plugins/vee-validate.ts"
   ],
 
-
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "dev:node": "npx ts-node -r tsconfig-paths/register --project tsconfig.json src/main.ts",
     "dev": "nodemon",
     "nuxt": "nuxt",
-    "start": "npm run dev:node",
+    "start": "npm run prod",
+    "prod": "npm run build && npm run dev:node",
     "heroku-postbuild": "npm run build"
   },
   "repository": {
@@ -67,12 +68,12 @@
     "ts-mongoose": "0.0.21",
     "ts-node": "^8.8.1",
     "tsc": "^1.20150623.0",
+    "tsconfig-paths": "^3.9.0",
     "typescript": "^3.8.3",
     "universal-analytics": "^0.4.20",
     "uuid": "^7.0.0",
     "validator": "^13.0.0",
-    "vue-property-decorator": "^8.4.2",
-    "tsconfig-paths": "^3.9.0"
+    "vee-validate": "^3.3.0"
   },
   "engines": {
     "node": "12.16.1",