Update edit series sequence to show error when sequence has spaces #4314

client/components/modals/EditSeriesInputInnerModal.vue

@@ -14,6 +14,7 @@
               <ui-text-input-with-label ref="sequenceInput" v-model="selectedSeries.sequence" :label="$strings.LabelSequence" />
             </div>
           </div>
+          <div v-if="error" class="text-error text-sm mt-2 p-1">{{ error }}</div>
           <div class="flex justify-end mt-2 p-1">
             <ui-btn type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
           </div>
@@ -34,12 +35,17 @@ export default {
     existingSeriesNames: {
       type: Array,
       default: () => []
+    },
+    originalSeriesSequence: {
+      type: String,
+      default: null
     }
   },
   data() {
     return {
       el: null,
-      content: null
+      content: null,
+      error: null
     }
   },
   watch: {
@@ -85,10 +91,17 @@ export default {
       }
     },
     submitSeriesForm() {
+      this.error = null
+
       if (this.$refs.newSeriesSelect) {
         this.$refs.newSeriesSelect.blur()
       }
 
+      if (this.selectedSeries.sequence !== this.originalSeriesSequence && this.selectedSeries.sequence.includes(' ')) {
+        this.error = this.$strings.MessageSeriesSequenceCannotContainSpaces
+        return
+      }
+
       this.$emit('submit')
     },
     clickClose() {
@@ -100,6 +113,7 @@ export default {
       }
     },
     setShow() {
+      this.error = null
       if (!this.el || !this.content) {
         this.init()
       }

client/components/widgets/SeriesInputWidget.vue

@@ -2,7 +2,7 @@
   <div>
     <ui-multi-select-query-input v-model="seriesItems" text-key="displayName" :label="$strings.LabelSeries" :disabled="disabled" readonly show-edit @edit="editSeriesItem" @add="addNewSeries" />
 
-    <modals-edit-series-input-inner-modal v-model="showSeriesForm" :selected-series="selectedSeries" :existing-series-names="existingSeriesNames" @submit="submitSeriesForm" />
+    <modals-edit-series-input-inner-modal v-model="showSeriesForm" :selected-series="selectedSeries" :existing-series-names="existingSeriesNames" :original-series-sequence="originalSeriesSequence" @submit="submitSeriesForm" />
   </div>
 </template>
 
@@ -18,6 +18,7 @@ export default {
   data() {
     return {
       selectedSeries: null,
+      originalSeriesSequence: null,
       showSeriesForm: false
     }
   },
@@ -59,6 +60,7 @@ export default {
         ..._series
       }
 
+      this.originalSeriesSequence = _series.sequence
       this.showSeriesForm = true
     },
     addNewSeries() {
@@ -68,6 +70,7 @@ export default {
         sequence: ''
       }
 
+      this.originalSeriesSequence = null
       this.showSeriesForm = true
     },
     submitSeriesForm() {

client/strings/en-us.json

@@ -856,6 +856,7 @@
   "MessageScheduleRunEveryWeekdayAtTime": "Run every {0} at {1}",
   "MessageSearchResultsFor": "Search results for",
   "MessageSelected": "{0} selected",
+  "MessageSeriesSequenceCannotContainSpaces": "Series sequence cannot contain spaces",
   "MessageServerCouldNotBeReached": "Server could not be reached",
   "MessageSetChaptersFromTracksDescription": "Set chapters using each audio file as a chapter and chapter title as the audio file name",
   "MessageShareExpirationWillBe": "Expiration will be <strong>{0}</strong>",