From 2ec84edb5e271e7ba73ffc37e79ba4fb092b186a Mon Sep 17 00:00:00 2001
From: Nicholas Wallace <nicholaslwallace@gmail.com>
Date: Mon, 6 Jan 2025 20:00:42 -0700
Subject: [PATCH 1/4] Add: episode pubdate validation before saving

---
 client/components/modals/podcast/tabs/EpisodeDetails.vue | 6 ++++++
 client/components/ui/TextInputWithLabel.vue              | 9 +++++----
 client/strings/en-us.json                                | 1 +
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/components/modals/podcast/tabs/EpisodeDetails.vue b/client/components/modals/podcast/tabs/EpisodeDetails.vue
index 85cfb4ff..9eaef85e 100644
--- a/client/components/modals/podcast/tabs/EpisodeDetails.vue
+++ b/client/components/modals/podcast/tabs/EpisodeDetails.vue
@@ -150,6 +150,12 @@ export default {
         this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
         return false
       }
+
+      // Check pubdate is valid if it is being updated. Cannot be set to null in the web client
+      if (updatedDetails.pubDate === null) {
+        this.$toast.error(this.$strings.ToastEpisodePubDateUpdateFailed)
+        return null
+      }
       return this.updateDetails(updatedDetails)
     },
     async updateDetails(updatedDetails) {
diff --git a/client/components/ui/TextInputWithLabel.vue b/client/components/ui/TextInputWithLabel.vue
index f653a18b..ee9ffb7a 100644
--- a/client/components/ui/TextInputWithLabel.vue
+++ b/client/components/ui/TextInputWithLabel.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="w-full">
     <slot>
-      <label :for="identifier" class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }"
-        >{{ label }}<em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em></label
-      >
+      <label :for="identifier" class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
+        {{ label }}
+        <em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
+      </label>
     </slot>
     <ui-text-input :placeholder="placeholder || label" :inputId="identifier" ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" class="w-full" :class="inputClass" @blur="inputBlurred" />
   </div>
@@ -57,4 +58,4 @@ export default {
   },
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index f7af6aed..6c89db41 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -976,6 +976,7 @@
   "ToastEpisodeDownloadQueueClearFailed": "Failed to clear queue",
   "ToastEpisodeDownloadQueueClearSuccess": "Episode download queue cleared",
   "ToastEpisodeUpdateSuccess": "{0} episodes updated",
+  "ToastEpisodePubDateUpdateFailed": "Publish date is required",
   "ToastErrorCannotShare": "Cannot share natively on this device",
   "ToastFailedToLoadData": "Failed to load data",
   "ToastFailedToMatch": "Failed to match",

From db17a5c88b98fdcd4978e43963cd65a1ad6edbfb Mon Sep 17 00:00:00 2001
From: Nicholas Wallace <nicholaslwallace@gmail.com>
Date: Mon, 6 Jan 2025 20:22:47 -0700
Subject: [PATCH 2/4] Change: toast date error to be generic

---
 client/components/modals/podcast/tabs/EpisodeDetails.vue | 2 +-
 client/strings/en-us.json                                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/modals/podcast/tabs/EpisodeDetails.vue b/client/components/modals/podcast/tabs/EpisodeDetails.vue
index 9eaef85e..ce751f70 100644
--- a/client/components/modals/podcast/tabs/EpisodeDetails.vue
+++ b/client/components/modals/podcast/tabs/EpisodeDetails.vue
@@ -153,7 +153,7 @@ export default {
 
       // Check pubdate is valid if it is being updated. Cannot be set to null in the web client
       if (updatedDetails.pubDate === null) {
-        this.$toast.error(this.$strings.ToastEpisodePubDateUpdateFailed)
+        this.$toast.error(this.$strings.ToastDateMustBeComplete)
         return null
       }
       return this.updateDetails(updatedDetails)
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 6c89db41..cc9fd574 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -964,6 +964,7 @@
   "ToastCollectionRemoveSuccess": "Collection removed",
   "ToastCollectionUpdateSuccess": "Collection updated",
   "ToastCoverUpdateFailed": "Cover update failed",
+  "ToastDateMustBeComplete": "Date and time cannot be incomplete",
   "ToastDeleteFileFailed": "Failed to delete file",
   "ToastDeleteFileSuccess": "File deleted",
   "ToastDeviceAddFailed": "Failed to add device",
@@ -976,7 +977,6 @@
   "ToastEpisodeDownloadQueueClearFailed": "Failed to clear queue",
   "ToastEpisodeDownloadQueueClearSuccess": "Episode download queue cleared",
   "ToastEpisodeUpdateSuccess": "{0} episodes updated",
-  "ToastEpisodePubDateUpdateFailed": "Publish date is required",
   "ToastErrorCannotShare": "Cannot share natively on this device",
   "ToastFailedToLoadData": "Failed to load data",
   "ToastFailedToMatch": "Failed to match",

From 7fd8178ddefc5bbcee42a685a7482b3b957a6112 Mon Sep 17 00:00:00 2001
From: Nicholas Wallace <nicholaslwallace@gmail.com>
Date: Mon, 6 Jan 2025 20:30:27 -0700
Subject: [PATCH 3/4] Add: datetime check for new episode modal

---
 client/components/modals/item/tabs/Episodes.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/components/modals/item/tabs/Episodes.vue b/client/components/modals/item/tabs/Episodes.vue
index 00e62917..293a75c7 100644
--- a/client/components/modals/item/tabs/Episodes.vue
+++ b/client/components/modals/item/tabs/Episodes.vue
@@ -113,6 +113,10 @@ export default {
           return false
         })
         console.log('updateResult', updateResult)
+      } else if (!lastEpisodeCheck) {
+        this.$toast.error(this.$strings.ToastDateMustBeComplete)
+        this.checkingNewEpisodes = false
+        return false
       }
 
       this.$axios

From bea9d6aff4e000403131f70b1c60065c339acce8 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Tue, 7 Jan 2025 14:08:57 -0600
Subject: [PATCH 4/4] Update date time input validation, add red border for
 invalid datetime

---
 .../components/modals/item/tabs/Episodes.vue  |  2 +-
 .../modals/podcast/tabs/EpisodeDetails.vue    | 13 +++----
 client/components/ui/TextInput.vue            | 35 ++++++++-----------
 client/strings/en-us.json                     |  2 +-
 4 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/client/components/modals/item/tabs/Episodes.vue b/client/components/modals/item/tabs/Episodes.vue
index 293a75c7..8195154a 100644
--- a/client/components/modals/item/tabs/Episodes.vue
+++ b/client/components/modals/item/tabs/Episodes.vue
@@ -114,7 +114,7 @@ export default {
         })
         console.log('updateResult', updateResult)
       } else if (!lastEpisodeCheck) {
-        this.$toast.error(this.$strings.ToastDateMustBeComplete)
+        this.$toast.error(this.$strings.ToastDateTimeInvalidOrIncomplete)
         this.checkingNewEpisodes = false
         return false
       }
diff --git a/client/components/modals/podcast/tabs/EpisodeDetails.vue b/client/components/modals/podcast/tabs/EpisodeDetails.vue
index ce751f70..9a2eb77d 100644
--- a/client/components/modals/podcast/tabs/EpisodeDetails.vue
+++ b/client/components/modals/podcast/tabs/EpisodeDetails.vue
@@ -11,7 +11,7 @@
         <ui-dropdown v-model="newEpisode.episodeType" :label="$strings.LabelEpisodeType" :items="episodeTypes" small />
       </div>
       <div class="w-2/5 p-1">
-        <ui-text-input-with-label v-model="pubDateInput" @input="updatePubDate" type="datetime-local" :label="$strings.LabelPubDate" />
+        <ui-text-input-with-label v-model="pubDateInput" ref="pubdate" type="datetime-local" :label="$strings.LabelPubDate" @input="updatePubDate" />
       </div>
       <div class="w-full p-1">
         <ui-text-input-with-label v-model="newEpisode.title" :label="$strings.LabelTitle" />
@@ -145,17 +145,18 @@ export default {
         return null
       }
 
+      // Check pubdate is valid if it is being updated. Cannot be set to null in the web client
+      if (this.newEpisode.pubDate === null && this.$refs.pubdate?.$refs?.input?.isInvalidDate) {
+        this.$toast.error(this.$strings.ToastDateTimeInvalidOrIncomplete)
+        return null
+      }
+
       const updatedDetails = this.getUpdatePayload()
       if (!Object.keys(updatedDetails).length) {
         this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
         return false
       }
 
-      // Check pubdate is valid if it is being updated. Cannot be set to null in the web client
-      if (updatedDetails.pubDate === null) {
-        this.$toast.error(this.$strings.ToastDateMustBeComplete)
-        return null
-      }
       return this.updateDetails(updatedDetails)
     },
     async updateDetails(updatedDetails) {
diff --git a/client/components/ui/TextInput.vue b/client/components/ui/TextInput.vue
index 6935a1dd..aaccd118 100644
--- a/client/components/ui/TextInput.vue
+++ b/client/components/ui/TextInput.vue
@@ -1,24 +1,6 @@
 <template>
   <div ref="wrapper" class="relative">
-    <input
-      :id="inputId"
-      :name="inputName"
-      ref="input"
-      v-model="inputValue"
-      :type="actualType"
-      :step="step"
-      :min="min"
-      :readonly="readonly"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      dir="auto"
-      class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full"
-      :class="classList"
-      @keyup="keyup"
-      @change="change"
-      @focus="focused"
-      @blur="blurred"
-    />
+    <input :id="inputId" :name="inputName" ref="input" v-model="inputValue" :type="actualType" :step="step" :min="min" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" dir="auto" class="rounded bg-primary text-gray-200 focus:bg-bg focus:outline-none border h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
     <div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
       <span class="material-symbols text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
     </div>
@@ -65,7 +47,8 @@ export default {
       showPassword: false,
       isHovering: false,
       isFocused: false,
-      hasCopied: false
+      hasCopied: false,
+      isInvalidDate: false
     }
   },
   computed: {
@@ -84,6 +67,10 @@ export default {
       if (this.noSpinner) _list.push('no-spinner')
       if (this.textCenter) _list.push('text-center')
       if (this.customInputClass) _list.push(this.customInputClass)
+
+      if (this.isInvalidDate) _list.push('border-error')
+      else _list.push('focus:border-gray-300 border-gray-600')
+
       return _list.join(' ')
     },
     actualType() {
@@ -118,6 +105,14 @@ export default {
     },
     keyup(e) {
       this.$emit('keyup', e)
+
+      if (this.type === 'datetime-local') {
+        if (e.target.validity?.badInput) {
+          this.isInvalidDate = true
+        } else {
+          this.isInvalidDate = false
+        }
+      }
     },
     blur() {
       if (this.$refs.input) this.$refs.input.blur()
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index cc9fd574..2106e86c 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -964,7 +964,7 @@
   "ToastCollectionRemoveSuccess": "Collection removed",
   "ToastCollectionUpdateSuccess": "Collection updated",
   "ToastCoverUpdateFailed": "Cover update failed",
-  "ToastDateMustBeComplete": "Date and time cannot be incomplete",
+  "ToastDateTimeInvalidOrIncomplete": "Date and time is invalid or incomplete",
   "ToastDeleteFileFailed": "Failed to delete file",
   "ToastDeleteFileSuccess": "File deleted",
   "ToastDeviceAddFailed": "Failed to add device",