feat(qrspot): replace qr-code

client/src/components/QRSpotUpdate.vue

@@ -70,6 +70,10 @@
         />
       </div>
       <br />
+      <a class="replaceQRCode" @click="replaceQRCode">
+        {{ $t("qr-spot.replace-qrcode") }}
+      </a>
+      <br />
       <button
         type="button"
         class="saveBtn"
@@ -110,6 +114,7 @@ export default Vue.extend({
     }
   },
   methods: {
+    ...mapMutations("scan", ["toggleScan"]),
     ...mapMutations("qrSpot", ["setMode", "setModalState"]),
     ...mapActions("qrSpot", ["create", "edit", "updateQrSpotLocation"]),
     view() {
@@ -171,6 +176,10 @@ export default Vue.extend({
           }
         ]
       });
+    },
+    replaceQRCode() {
+      this.setMode(QR_SPOT_MODE.REPLACE_CODE);
+      this.toggleScan();
     }
   }
 });
@@ -222,6 +231,10 @@ textarea:focus {
   }
 }
 
+.replaceQRCode {
+  text-decoration: underline;
+}
+
 .deleteBtn {
   color: white;
   background-color: $danger;

client/src/constants.ts

@@ -7,7 +7,8 @@ export const QR_SPOT_PANEL = {
 export const QR_SPOT_MODE = {
   VIEW: "VIEW",
   EDIT: "EDIT",
-  CREATE: "CREATE"
+  CREATE: "CREATE",
+  REPLACE_CODE: "REPLACE_CODE"
 };
 
 export const EVENT_TYPE = {

client/src/locales/en.json

@@ -52,7 +52,8 @@
     "loading-coordinates": "Loading amazing coordinates...",
     "update-hint": "Do you want to change the hint of where the spot can be found?",
     "update-name": "Update the awesome name for your spot",
-    "view-hint-question": "Do you need a hint?"
+    "view-hint-question": "Do you need a hint?",
+    "replace-qrcode": "Replace missing QR code?"
   },
   "scanner": {
     "title": "QR Scan"

client/src/locales/sv.json

@@ -52,7 +52,8 @@
     "loading-coordinates": "Laddar fantastiska koordinater...",
     "update-hint": "Vill du ändra ledtråden på var din QR kod finns någonstans?",
     "update-name": "Uppdatera namnet på din fantastiska plats",
-    "view-hint-question": "Behöver du en ledtråd?"
+    "view-hint-question": "Behöver du en ledtråd?",
+    "replace-qrcode": "Ersätt försvunnen QR kod?"
   },
   "scanner": {
     "title": "QR Scanner"

client/src/store/store-qr-spot.ts

@@ -26,7 +26,30 @@ export default {
     }
   },
   actions: {
-    async prompt({ commit, dispatch }, { qrcode }) {
+    async prompt({ state, commit, dispatch }, { qrcode }) {
+      if (state.mode === QR_SPOT_MODE.REPLACE_CODE) {
+        commit(
+          "popup/setPopup",
+          {
+            title: "Replace QR Code",
+            subtitle: "Do you want to replace a QR Code?",
+            options: [
+              {
+                name: "Replace",
+                type: "success",
+                action: async () => {
+                  commit("popup/setPopup", false, { root: true });
+                  commit("setMode", QR_SPOT_MODE.EDIT);
+                  dispatch("edit", { qrcode });
+                }
+              }
+            ]
+          },
+          { root: true }
+        );
+        return;
+      }
+
       commit("setQRSpot", { qrcode });
       commit(
         "popup/setPopup",

server/src/qrspot/qrspot-model.js

@@ -51,7 +51,7 @@ module.exports = db => ({
   },
 
   update: async (user, id, qrspot) => {
-    const valid = ["title", "lat", "lng", "note", "hint"];
+    const valid = ["qrcode", "title", "lat", "lng", "note", "hint"];
     const { keyIndices, values } = keyValuePairs(valid, qrspot);
     const sql = `
       UPDATE qrspots SET ${keyIndices}