From 4c7dc78abba851c98f00485c72815ee8e112edd5 Mon Sep 17 00:00:00 2001
From: Kovler10 <tal06030@googlemail.com>
Date: Wed, 30 Dec 2020 19:11:32 +0200
Subject: [PATCH] added validation to max count

---
 src/components/EditableCounter.vue | 73 +++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 26 deletions(-)

diff --git a/src/components/EditableCounter.vue b/src/components/EditableCounter.vue
index d636419..e6f7276 100644
--- a/src/components/EditableCounter.vue
+++ b/src/components/EditableCounter.vue
@@ -2,22 +2,31 @@
   <div class="grid-container">
     <label id="counter-name">
       <input
-          type="text"
-          v-bind:placeholder="this.counter.name"
-          v-model="counterName"
+        type="text"
+        v-bind:placeholder="this.counter.name"
+        v-model="counterName"
       />
     </label>
-    <button id="increase" type="button" class="btn btn-primary rounded-circle counter-button disabled">
+    <button
+      id="increase"
+      type="button"
+      class="btn btn-primary rounded-circle counter-button disabled"
+    >
       +
     </button>
     <label id="counter-max">
       <input
-          type="number"
-          v-bind:placeholder="this.counter.maxCount"
-          v-model="maxCount"
+        type="number"
+        v-bind:placeholder="this.counter.maxCount"
+        min="0"
+        v-model="maxCount"
       />
     </label>
-    <button id="decrease" type="button" class="btn btn-primary rounded-circle counter-button disabled">
+    <button
+      id="decrease"
+      type="button"
+      class="btn btn-primary rounded-circle counter-button disabled"
+    >
       ─
     </button>
     <modal v-bind:modal-name="'confirm-modal' + this.index">
@@ -26,22 +35,34 @@
       </template>
       <template v-slot:modal-footer>
         <div class="footer">
-          <button class="btn btn-danger modal-button" @click="removeCounter" data-dismiss="modal">Yes!</button>
-          <button class="btn btn-dark modal-button" data-dismiss="modal">No</button>
+          <button
+            class="btn btn-danger modal-button"
+            @click="removeCounter"
+            data-dismiss="modal"
+          >
+            Yes!
+          </button>
+          <button class="btn btn-dark modal-button" data-dismiss="modal">
+            No
+          </button>
         </div>
       </template>
     </modal>
-    <button id="delete-button" class="rounded-1 btn btn-primary" data-toggle="modal"
-            v-bind:data-target="'#confirm-modal' + this.index">─
+    <button
+      id="delete-button"
+      class="rounded-1 btn btn-primary"
+      data-toggle="modal"
+      v-bind:data-target="'#confirm-modal' + this.index"
+    >
+      ─
     </button>
   </div>
-
 </template>
 
 <script lang="ts">
-import Vue, {VueConstructor} from "vue";
-import {CounterModel} from "@/types/CounterModel";
-import {mapState} from "vuex";
+import Vue, { VueConstructor } from "vue";
+import { CounterModel } from "@/types/CounterModel";
+import { mapState } from "vuex";
 import Modal from "@/components/Modal.vue";
 
 interface EditableData {
@@ -52,8 +73,8 @@ interface EditableData {
 
 export default (Vue as VueConstructor).extend({
   name: "EditableCounter",
-  components: {Modal},
-  props: {index: Number},
+  components: { Modal },
+  props: { index: Number },
   data(): EditableData {
     return {
       counterName: "",
@@ -63,11 +84,13 @@ export default (Vue as VueConstructor).extend({
   },
   methods: {
     removeCounter(): void {
-      Vue.nextTick().then(() => this.$store.commit("removeCounter", this.index));
-    }
+      Vue.nextTick().then(() =>
+        this.$store.commit("removeCounter", this.index)
+      );
+    },
   },
   computed: {
-    counter: function () {
+    counter: function() {
       return this.$store.getters.counterByIndex(this.index);
     },
     ...mapState(["mode"]),
@@ -75,14 +98,14 @@ export default (Vue as VueConstructor).extend({
   watch: {
     maxCount(newValue: string, oldValue?: string) {
       if (isNaN(Number(newValue))) {
-        if (!oldValue || (newValue.length > oldValue.length)) {
+        if (!oldValue || newValue.length > oldValue.length) {
           this.displayAlert = true;
           this.maxCount = 0;
         }
       } else {
         this.maxCount = Number(newValue);
       }
-    }
+    },
   },
   destroyed() {
     if (this.counter) {
@@ -92,7 +115,7 @@ export default (Vue as VueConstructor).extend({
       }
       let newMax = Number(this.counter.maxCount);
       let newCurrent = Number(this.counter.currentCount);
-      if (this.maxCount !== undefined) {
+      if (this.maxCount !== undefined && this.maxCount > 0) {
         newMax = this.maxCount;
         newCurrent = this.counter.currentCount + (newMax - this.maxCount);
         if (newCurrent > newMax) {
@@ -129,7 +152,6 @@ input {
   grid-row: 2;
 }
 
-
 #counter-name {
   grid-column: 2;
   grid-row: 1;
@@ -154,7 +176,6 @@ input {
   padding-top: 10px;
 }
 
-
 .counter-button {
   width: 50px;
   height: 50px;