Refactor source states

2020-07-21 00:30:59 +02:00 · 2020-07-21 00:30:59 +02:00 · 3f96397a19
commit 3f96397a19
parent 8dd9243f00
7 changed files with 94 additions and 137 deletions
--- a/htdocs/src/components/hModalAddSource.vue
+++ b/htdocs/src/components/hModalAddSource.vue
@ -32,9 +32,9 @@
  -->

 <template>
-  <b-modal id="modal-add-source" scrollable size="lg" title="New Source Form" :ok-title="state >= 0 ? 'OK' : 'Next >'" :ok-disabled="!sourceSpecsSelected" @ok="handleModalSourceSubmit">
+  <b-modal id="modal-add-source" scrollable size="lg" title="New Source Form" ok-title="Next >" :ok-disabled="!sourceSpecsSelected" @ok="nextState">
    <template v-if="state >= 0 && form" v-slot:modal-footer>
-      <h-source-state-buttons :form="form" :next-is-working="nextIsWorking" :previous-is-working="previousIsWorking" @previousState="handleModalSourcePrevious" @nextState="handleModalSourceSubmit" />
+      <h-source-state-buttons :form="form" submit-form="source-state-form" :next-is-working="nextIsWorking" :previous-is-working="previousIsWorking" @previousState="previousState" />
    </template>

    <div v-if="state < 0">
@ -44,9 +44,9 @@
      <h-new-source-selector v-model="sourceSpecsSelected" />
    </div>

-    <div v-else-if="sourceSpecsSelected">
-      <h-source-state v-model="settings" class="mt-2 mb-2" :form="form" :source-name="sourceSpecs[sourceSpecsSelected].name" :state="state" @submit="handleModalSourceSubmit" />
-    </div>
+    <b-form v-else-if="sourceSpecsSelected" id="source-state-form" @submit.stop.prevent="nextState">
+      <h-source-state v-model="settings" class="mt-2 mb-2" :form="form" :source-name="sourceSpecs[sourceSpecsSelected].name" :state="state" />
+    </b-form>
  </b-modal>
 </template>

@ -72,51 +72,16 @@ export default {
  },

  methods: {
-    handleModalSourcePrevious () {
-      this.previousIsWorking = true
-      if (this.form.previousButtonState <= 0) {
-        this.state = this.form.previousButtonState
-        this.form = null
-        this.previousIsWorking = false
-      } else {
-        this.loadState(this.form.previousButtonState)
-      }
-    },
-
-    handleModalSourceSubmit (bvModalEvt) {
-      if (bvModalEvt) {
-        bvModalEvt.preventDefault()
-      }
-      this.nextIsWorking = true
-      if (this.form) {
-        if (this.form.nextButtonState !== undefined) {
-          if (this.form.nextButtonState === -1) {
-            this.state = this.form.nextButtonState
-            this.form = null
-          } else {
-            this.loadState(
-              this.form.nextButtonState,
-              null,
-              (_, newSource) => {
-                if (newSource) {
-                  this.hide()
-                  this.$emit('done', newSource)
-                }
-              }
-            )
-          }
-        } else if (this.form.nextButtonLink !== undefined) {
-          window.location = this.form.nextButtonLink
-        }
-      } else {
-        this.loadState(0)
-      }
-    },
-
    hide () {
      this.$bvModal.hide('modal-add-source')
    },

+    reactOnSuccess (toState, newSource) {
+      if (newSource) {
+        this.hide()
+      }
+    },
+
    show () {
      this.sourceSpecsSelected = ''
      this.resetSettings()
--- a/htdocs/src/components/hSourceState.vue
+++ b/htdocs/src/components/hSourceState.vue
@ -32,7 +32,7 @@
  -->

 <template>
-  <form @submit.stop.prevent="$emit('submit')">
+  <div>
    <p v-if="form.beforeText" class="lead text-indent">
      {{ form.beforeText }}
    </p>
@ -64,7 +64,7 @@
    <p v-if="form.afterText">
      {{ form.afterText }}
    </p>
-  </form>
+  </div>
 </template>

 <script>
--- a/htdocs/src/components/hSourceStateButtons.vue
+++ b/htdocs/src/components/hSourceStateButtons.vue
@ -37,7 +37,7 @@
      <b-spinner v-if="previousIsWorking" label="Spinning" small />
      {{ form.previousButtonText }}
    </b-button>
-    <b-button v-if="(!form.nextEditButtonText || !edit) && form.nextButtonText" type="button" variant="primary" class="mx-1" :disabled="btnDisabled" @click="$emit('nextState')">
+    <b-button v-if="(!form.nextEditButtonText || !edit) && form.nextButtonText" type="submit" variant="primary" class="mx-1" :disabled="btnDisabled" :form="submitForm">
      <b-spinner v-if="nextIsWorking" label="Spinning" small />
      {{ form.nextButtonText }}
    </b-button>
@ -45,7 +45,7 @@
      <b-spinner v-if="previousIsWorking" label="Spinning" small />
      {{ form.previousEditButtonText }}
    </b-button>
-    <b-button v-if="edit && form.nextEditButtonText" type="button" variant="primary" class="mx-1" :disabled="btnDisabled" @click="$emit('nextState')">
+    <b-button v-if="edit && form.nextEditButtonText" type="submit" variant="primary" class="mx-1" :disabled="btnDisabled" :form="submitForm">
      <b-spinner v-if="nextIsWorking" label="Spinning" small />
      {{ form.nextEditButtonText }}
    </b-button>
@ -72,6 +72,10 @@ export default {
    previousIsWorking: {
      type: Boolean,
      default: false
+    },
+    submitForm: {
+      type: String,
+      default: null
    }
  },

--- a/htdocs/src/mixins/sourceState.js
+++ b/htdocs/src/mixins/sourceState.js
@ -77,7 +77,6 @@ export default {
                  toaster: 'b-toaster-content-right'
                }
              )
-              this.state = toState
              if (response.data.redirect && window.location.pathname !== response.data.redirect) {
                this.$router.push(response.data.redirect)
              } else if (cbSuccess) {
@ -104,6 +103,49 @@ export default {
          })
    },

+    nextState (bvModalEvt) {
+      if (bvModalEvt) {
+        bvModalEvt.preventDefault()
+      }
+      this.nextIsWorking = true
+      if (this.form) {
+        if (this.form.nextButtonLink !== undefined) {
+          window.location = this.form.nextButtonLink
+        } else if (this.form.nextButtonState === -1) {
+          this.state = this.form.nextButtonState
+          this.form = null
+          this.nextButtonState = false
+        } else if (this.form.nextButtonState) {
+          this.loadState(
+            this.form.nextButtonState,
+            null,
+            this.reactOnSuccess
+          )
+        } else {
+          this.loadState(0)
+        }
+      } else {
+        this.loadState(0)
+      }
+    },
+
+    previousState () {
+      this.previousIsWorking = true
+      if (this.form.previousButtonState <= 0) {
+        this.state = this.form.previousButtonState
+        this.form = null
+        this.previousIsWorking = false
+      } else if (this.form.previousButtonState) {
+        this.loadState(
+          this.form.previousButtonState,
+          null,
+          this.reactOnSuccess
+        )
+      } else {
+        this.loadState(0)
+      }
+    },
+
    resetSettings () {
      this.settings = {
        Source: {},
--- a/htdocs/src/views/domain-new.vue
+++ b/htdocs/src/views/domain-new.vue
@ -54,7 +54,7 @@
      </b-col>
    </b-row>

-    <h-modal-add-source ref="addSrcModal" @done="doneAdd" />
+    <h-modal-add-source ref="addSrcModal" @updateMySource="doneAdd" />
  </b-container>
 </template>

--- a/htdocs/src/views/source-new-state.vue
+++ b/htdocs/src/views/source-new-state.vue
@ -56,8 +56,10 @@
      </b-col>

      <b-col lg="8" md="7">
-        <h-source-state v-model="settings" class="mt-2 mb-2" :form="form" :source-name="sourceSpecs[$route.params.provider].name" :state="parseInt($route.params.state)" @submit="submitSettings" />
-        <h-source-state-buttons class="d-flex justify-content-end" :form="form" :next-is-working="nextIsWorking" :previous-is-working="previousIsWorking" @previousState="previousState" @nextState="submitSettings" />
+        <b-form @submit.stop.prevent="nextState">
+          <h-source-state v-model="settings" class="mt-2 mb-2" :form="form" :source-name="sourceSpecs[$route.params.provider].name" :state="parseInt($route.params.state)" />
+          <h-source-state-buttons class="d-flex justify-content-end" :form="form" :next-is-working="nextIsWorking" :previous-is-working="previousIsWorking" @previousState="previousState" />
+        </b-form>
      </b-col>
    </b-row>
  </b-container>
@ -82,6 +84,16 @@ export default {
    }
  },

+  watch: {
+    state: function (state) {
+      if (state === -1) {
+        this.$router.push('/sources/new/')
+      } else if (state !== undefined && state !== this.$route.params.state) {
+        this.$router.push('/sources/new/' + encodeURIComponent(this.sourceSpecsSelected) + '/' + state)
+      }
+    }
+  },
+
  created () {
    this.sourceSpecsSelected = this.$route.params.provider
    this.state = parseInt(this.$route.params.state)
@ -89,42 +101,9 @@ export default {
  },

  methods: {
-    previousState () {
-      this.previousIsWorking = true
-      if (this.form.previousButtonState !== undefined) {
-        if (this.form.previousButtonState === -1) {
-          this.$router.push('/sources/new/')
-        } else {
-          this.loadState(
-            this.form.previousButtonState,
-            null,
-            this.reactOnSuccess,
-            () => {
-              this.$router.push('/sources/new')
-            }
-          )
-        }
-      }
-    },
-
    reactOnSuccess (toState, newSource) {
      if (newSource) {
        this.$router.push('/sources/' + encodeURIComponent(newSource._id) + '/domains')
-      } else {
-        this.$router.push('/sources/new/' + encodeURIComponent(this.mySource) + '/' + toState)
-      }
-    },
-
-    submitSettings () {
-      this.nextIsWorking = true
-      if (this.form.nextButtonState !== undefined) {
-        if (this.form.nextButtonState === -1) {
-          this.$router.push('/sources/new/')
-        } else {
-          this.loadState(this.form.nextButtonState, null, this.reactOnSuccess)
-        }
-      } else if (this.form.nextButtonLink !== undefined) {
-        window.location = this.form.nextButtonLink
      }
    }
  }
--- a/htdocs/src/views/source-update.vue
+++ b/htdocs/src/views/source-update.vue
@ -32,8 +32,8 @@
  -->

 <template>
-  <form v-if="!isLoading" class="mt-2 mb-5" @submit.stop.prevent="submitSource">
-    <b-button v-if="!edit" class="float-right" type="button" size="sm" variant="outline-primary" @click="editSource()">
+  <b-form v-if="!isLoading" class="mt-2 mb-5" @submit.stop.prevent="nextState">
+    <b-button v-if="!edit" class="float-right" type="button" size="sm" variant="outline-primary" @click="editSource">
      <b-icon icon="pencil" />
      Edit
    </b-button>
@ -49,14 +49,14 @@
      :placeholder="sources[sourceSpecsSelected].name + ' 1'"
      required
    />
-    <h-source-state v-else-if="form" v-model="settings" class="mt-2 mb-2" :form="form" :source-name="sources[sourceSpecsSelected].name" :state="state" @submit="nextState" />
+    <h-source-state v-else-if="form" v-model="settings" class="mt-2 mb-2" :form="form" :source-name="sources[sourceSpecsSelected].name" :state="state" />

    <hr>

    <h-fields v-if="!edit" v-model="mySource.Source" :fields="sourceSpecs.fields" />

-    <h-source-state-buttons v-else-if="form" class="d-flex justify-content-end" edit :form="form" :next-is-working="nextIsWorking" :previous-is-working="previousIsWorking" @previousState="previousState" @nextState="nextState" />
-  </form>
+    <h-source-state-buttons v-else-if="form" class="d-flex justify-content-end" edit :form="form" :next-is-working="nextIsWorking" :previous-is-working="previousIsWorking" @previousState="previousState" />
+  </b-form>
 </template>

 <script>
@ -98,23 +98,24 @@ export default {

  data: function () {
    return {
-      edit: false,
-      prevRoute: null
+      edit: false
    }
  },

-  beforeRouteEnter (to, from, next) {
-    next(vm => {
-      vm.prevRoute = from
-    })
-  },
-
  computed: {
    isLoading () {
      return this.parentLoading
    }
  },

+  watch: {
+    state: function (state) {
+      if (state === -1) {
+        this.edit = false
+      }
+    }
+  },
+
  methods: {
    editSource () {
      this.settings = Object.assign({}, this.mySource)
@ -122,46 +123,12 @@ export default {
      this.edit = true
    },

-    previousState () {
-      this.previousIsWorking = true
-      if (this.form.previousButtonState <= 0) {
-        this.state = this.form.previousButtonState
-        this.form = null
+    reactOnSuccess (toState, newSource) {
+      if (newSource) {
+        this.$emit('updateMySource', newSource)
        this.edit = false
-        this.previousIsWorking = false
-      } else {
-        this.loadState(this.form.previousButtonState)
-      }
-    },
-
-    nextState () {
-      this.nextIsWorking = true
-      if (this.form) {
-        if (this.form.nextButtonState !== undefined) {
-          if (this.form.nextButtonState === -1) {
-            this.state = this.form.nextButtonState
-            this.form = null
-            this.nextIsWorking = false
-          } else {
-            this.loadState(
-              this.form.nextButtonState,
-              null,
-              (_, newSource) => {
-                if (newSource) {
-                  this.$emit('updateMySource', newSource)
-                  this.edit = false
-                }
-              }
-            )
-          }
-        } else if (this.form.nextButtonLink !== undefined) {
-          window.location = this.form.nextButtonLink
-        }
-      } else {
-        this.loadState(0)
      }
    }
-
  }
 }
 </script>