BUG: SCRIPT - cannot select TITLE text area to enter text #486 (#493)

* intial commit

* sonar issue fixed

* test issue fixws

* merge

* fixed

* stable

cypress/e2e/podcasts.cy.js

@@ -245,12 +245,6 @@ describe("newsdesk logged in", () => {
       "https://twitter.com/PoliticusSarah/status/15207595...",
     )
   })
-  it("should script section", () => {
-    switchPodCast("dev sandbox")
-    for (let section = 1; section <= 7; section++) {
-      cy.get("#script-data span").should("contain", `${section} title`)
-    }
-  })
   it("should be able to enter in input fields", () => {
     switchPodCast("dev sandbox")
     cy.get("#scriptTitleInput").type("Script Title Input{enter}", {
@@ -307,6 +301,10 @@ describe("newsdesk logged in", () => {
     dragDraftToScript()
     cy.reload()
   })
+  it("should be able to enter title in script slot title", () => {
+    switchPodCast("dev sandbox")
+    dragDraftToScript()
+  })
 })
 
 import firebaseConfig from "../../firebase.json"

src/components/Script.vue

@@ -1,13 +1,6 @@
 <!-- eslint-disable prettier/prettier -->
 <template>
-  <div id="script-{{ slotno }}" class="border script-section rounded-lg border-gray-400">
-    <label class="w-full p-4 flex">
-      {{ slotno }} :
-      <span @click="updateClipField" class="text-gray-400 flex justify-between items-center w-11/12">{{ slotno }} title
-        <VolumeUpIcon class="h-8" />
-      </span>
-    </label>
-
+  <div id="script-{{ slotno }}" class="script-section">
     <div v-for="(itemMain, index) in clipFieldData" :key="index">
       <span v-for="(itemIn, indexNew) in itemMain.params" :key="indexNew">
         <div @dragend="dropped($event, indexNew)" draggable="true">
@@ -27,7 +20,6 @@ import { useItemStore } from "@/store/item"
 
 import Input from "@/components/atoms/Input.vue"
 import ClipField from "@/components/atoms/ClipField.vue"
-import { VolumeUpIcon } from "@heroicons/vue/outline"
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const itemStore = useItemStore()
 const props = defineProps({

src/components/atoms/ClipField.vue

@@ -2,36 +2,62 @@
   <div class="clip-field">
     <div class="clip-section">
       <label for="">CLIP URL:</label>
-      <div class="relative"> <input class="input break-all bg-transparent text-transparent workSans" id="clip_url"
-          placeholder="URL" v-model="clipField.clip_url" /><a class="text-blue-600 left-0" id="clip_url_link"
-          target="_blank" @click="redirectTo(clipField.clip_url)">{{ clipField.clip_url }}</a></div>
+      <div class="relative">
+        <input
+          class="input break-all bg-transparent text-transparent workSans"
+          id="clip_url"
+          placeholder="URL"
+          v-model="clipField.clip_url"
+        /><a
+          class="text-blue-600 left-0"
+          id="clip_url_link"
+          target="_blank"
+          @click="redirectTo(clipField.clip_url)"
+          >{{ clipField.clip_url }}</a
+        >
+      </div>
     </div>
     <div class="clip-section border-l border-gray-400">
       <label for="">In:</label>
-      <input class="input break-all bg-transparent w-8/12 text-gray-600 workSans" id="in_time" placeholder="In"
-        v-model="clipField.in_time" />
+      <input
+        class="input break-all bg-transparent w-8/12 text-gray-600 workSans"
+        id="in_time"
+        placeholder="In"
+        v-model="clipField.in_time"
+      />
     </div>
     <div class="clip-section border-l border-gray-400">
-      <input class="input break-all bg-transparent w-10/12 text-gray-600" id="in_msg" placeholder="message"
-        v-model="clipField.in_msg" />
+      <input
+        class="input break-all bg-transparent w-10/12 text-gray-600"
+        id="in_msg"
+        placeholder="message"
+        v-model="clipField.in_msg"
+      />
     </div>
     <div class="clip-section border-l border-gray-400">
       <label for="">Out:</label>
-      <input class="input break-all bg-transparent w-8/12 text-gray-600 workSans" id="out_time" placeholder="Out"
-        v-model="clipField.out_time" />
+      <input
+        class="input break-all bg-transparent w-8/12 text-gray-600 workSans"
+        id="out_time"
+        placeholder="Out"
+        v-model="clipField.out_time"
+      />
     </div>
     <div class="clip-section border-l border-gray-400">
-      <input class="input break-all bg-transparent w-10/12 text-gray-600" id="out_msg" placeholder="message"
-        v-model="clipField.out_msg" />
+      <input
+        class="input break-all bg-transparent w-10/12 text-gray-600"
+        id="out_msg"
+        placeholder="message"
+        v-model="clipField.out_msg"
+      />
     </div>
     <div class="clip-section border-l border-gray-400">
       <BackspaceIcon class="w-5 h-5" @click="emits('delete', index)" />
     </div>
   </div>
 </template>
-
-  <script lang="ts" setup>
 
+<script lang="ts" setup>
 import { BackspaceIcon } from "@heroicons/vue/outline"
 import { PropType } from "vue"
 const props = defineProps({
@@ -45,83 +71,81 @@ const props = defineProps({
   },
 })
 const redirectTo = (url: string) => {
-  window.open(url, '_blank');
+  window.open(url, "_blank")
 }
 const emits = defineEmits(["delete"])
 </script>
-
-  <style scoped lang="scss">
-  .title {
-    @apply appearance-none text-5xl focus:outline-none;
-    width: 47vw;
-    font-size: .9rem;
-    font-weight: 200;
-    color: #414141;
-    line-height: 1.5rem;
-  }
-  
-  label {
-    @apply text-5xl;
-    font-size: .9rem;
-    font-weight: 200;
-    color: #414141;
-    line-height: 1.5rem;
-  }
-  
-  .clip-field {
-    @apply rounded-b-lg flex border-gray-400;
-    background-color: #e3e4e4;
-    margin: 0px !important;
-    font-size: .9rem;
-    font-weight: 200;
-    color: #414141;
-    line-height: 1.5rem;
-  }
-  
-  .clip-field label {
-    @apply text-base whitespace-nowrap mr-2;
-    font-size: .9rem;
-    font-weight: 200;
-    color: #414141;
-    line-height: 1.5rem;
-  }
-  
-  .clip-field .clip-section {
-    @apply p-2 flex;
-    height: 40px;
-    font-size: .9rem;
-    font-weight: 200;
-    color: #414141;
-    line-height: 1.5rem;
-  }
-  
-  .clip-field .clip-section a {
-    transform: translate(0px, -100%);
-    @apply block;
-    
-  }
-  
-  .clip-field .clip-section input {
-    @apply font-semibold outline-none;
-    font-size: .9rem;
-    font-weight: 200;
-    color: #414141;
-    line-height: 1.5rem;
-  }
-  
-  .script-section textarea.input {
-    font-size: 16px !important;
-    font-size: .9rem;
-    font-weight: 200;
-    color: #414141;
-    line-height: 1.5rem;
-  }
-  .workSans {
-    font-family: 'Work Sans', sans-serif !important;
-    font-size: .9rem;
-    font-weight: 200;
-    color: #414141;
-    line-height: 1.5rem;
-  }
-  </style>
-
+
+<style scoped lang="scss">
+.title {
+  @apply appearance-none text-5xl focus:outline-none;
+  width: 47vw;
+  font-size: 0.9rem;
+  font-weight: 200;
+  color: #414141;
+  line-height: 1.5rem;
+}
+
+label {
+  @apply text-5xl;
+  font-size: 0.9rem;
+  font-weight: 200;
+  color: #414141;
+  line-height: 1.5rem;
+}
+
+.clip-field {
+  @apply rounded-b-lg flex border-gray-400;
+  background-color: #e3e4e4;
+  margin: 0px !important;
+  font-size: 0.9rem;
+  font-weight: 200;
+  color: #414141;
+  line-height: 1.5rem;
+}
+
+.clip-field label {
+  @apply text-base whitespace-nowrap mr-2;
+  font-size: 0.9rem;
+  font-weight: 200;
+  color: #414141;
+  line-height: 1.5rem;
+}
+
+.clip-field .clip-section {
+  @apply p-2 flex;
+  height: 40px;
+  font-size: 0.9rem;
+  font-weight: 200;
+  color: #414141;
+  line-height: 1.5rem;
+}
+
+.clip-field .clip-section a {
+  transform: translate(0px, -100%);
+  @apply block;
+}
+
+.clip-field .clip-section input {
+  @apply font-semibold outline-none;
+  font-size: 0.9rem;
+  font-weight: 200;
+  color: #414141;
+  line-height: 1.5rem;
+}
+
+.script-section textarea.input {
+  font-size: 16px !important;
+  font-size: 0.9rem;
+  font-weight: 200;
+  color: #414141;
+  line-height: 1.5rem;
+}
+.workSans {
+  font-family: "Work Sans", sans-serif !important;
+  font-size: 0.9rem;
+  font-weight: 200;
+  color: #414141;
+  line-height: 1.5rem;
+}
+</style>

src/components/atoms/SlotTitleInput.vue

@@ -1,13 +1,23 @@
 <template>
-  <label class="w-11/12">
-    {{ slotno }}:
+  <label :class="{ 'flex w-flull': script, 'w-11/12': !script }">
+   <span v-if="!script">{{ slotno }}:</span> 
     <input
+      v-if="!script"
       class="input break-all max-w-full"
       :placeholder="`${slotno} title`"
       v-model="value"
       @keydown.enter.prevent="updateEvent"
       @blur="updateEvent"
     />
+    <input
+      v-else
+      class="input break-all max-w-full"
+      :placeholder="`${slotno} Enter title`"
+      id="scriptSlotTitle"
+      v-model="value"
+      @keydown.enter.prevent="updateEvent"
+      @blur="updateEvent"
+    />
   </label>
 </template>
 
@@ -18,11 +28,13 @@ const props = withDefaults(
   defineProps<{
     modelValue?: string | number
     slotno: number
+    script: boolean
     updateEvent: () => void
   }>(),
   {
     modelValue: "",
     slotno: 0,
+    script: false,
   },
 )
 

src/pages/Home.vue

@@ -85,8 +85,14 @@
           </span>
         </div>
         <div v-for="slot in Array.from({ length: 7 }, (_, i) => 7 - i)" :key="slot">
+          <div id="script-{{ slotno }}" class="border rounded-lg border-gray-400 pt-4 mb-5">
+            <span class="pl-4">
+          <SlotTitleInput v-model="itemStore.getScriptSlotTitleList[slot]" :slotno="slot"
+            :updateEvent="events.onUpdateSaveDoc" />
+            </span>
           <Scripts class="my-5" :slotno="slot" :clipFieldData="itemStore.getScriptList(slot)" :podcastId="podcastId"
             @save="events.onClickScriptsSave" @change="checkUpdate()" :date="date" />
+          </div>
         </div>
       </div>
     </div>

src/store/item.ts

@@ -18,6 +18,7 @@ import { db } from "@/plugins/firebase"
 interface State {
   itemList: Item[]
   slotTitleList: string[]
+  scriptSlotTitleList: string[]
   slotList: string[]
   scriptItemList: any[]
   title: string
@@ -30,6 +31,7 @@ export const useItemStore = defineStore("item", {
   state: (): State => ({
     itemList: [],
     slotTitleList: [],
+    scriptSlotTitleList: [],
     slotList: [],
     title: "",
     special_day: "",
@@ -127,6 +129,7 @@ export const useItemStore = defineStore("item", {
         return await updateDoc(docRef, {
           items: this.itemList,
           slotTitles: this.slotTitleList,
+          scriptSlotTitleList: this.scriptSlotTitleList,
           script: this.scriptItemList,
         })
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -135,6 +138,8 @@ export const useItemStore = defineStore("item", {
           return await setDoc(docRef, {
             items: this.itemList,
             slotTitles: this.slotTitleList,
+            scriptSlotTitleList: this.scriptSlotTitleList,
+            script: this.scriptItemList,
           })
         } else throw e
       }
@@ -228,6 +233,12 @@ export const useItemStore = defineStore("item", {
             : Array.from({ length: 7 }, () => "") ??
               Array.from({ length: 7 }, () => "")
         ) as string[]
+        this.scriptSlotTitleList = (
+          doc.data()?.scriptSlotTitleList && doc.data()?.scriptSlotTitleList.length > 0
+            ? doc.data()?.scriptSlotTitleList
+            : Array.from({ length: 7 }, () => "") ??
+              Array.from({ length: 7 }, () => "")
+        ) as string[]
         this.itemList = (doc.data()?.items ?? []) as Item[]
         this.scriptItemList = (doc.data()?.script ?? []) as Item[]
       })
@@ -237,6 +248,7 @@ export const useItemStore = defineStore("item", {
     getList: (state: State) => state.itemList,
     getScriptListClips: (state: State) => state.scriptItemList,
     getSlotTitleList: (state: State) => state.slotTitleList,
+    getScriptSlotTitleList: (state: State) => state.scriptSlotTitleList,
     getSlotList: (state) => {
       return (slot: number) =>
         state.itemList.filter((item) => item.slot === slot)