fix: Countdown: improved editor functionality and localization

inikoo · Dec 12, 2024 · c4cb57d · c4cb57d
1 parent 36e8f42
commit c4cb57d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 14 deletions.
diff --git a/resources/js/Components/CMS/Fields/Countdown.vue b/resources/js/Components/CMS/Fields/Countdown.vue
@@ -5,6 +5,8 @@ import PureDatePicker from '@/Components/Pure/PureDatePicker.vue'
 import PureInput from '@/Components/Pure/PureInput.vue'
 import { get, set } from 'lodash'
 import SideEditorInputHTML from './SideEditorInputHTML.vue'
+import Editor2 from '@/Components/Forms/Fields/BubleTextEditor/EditorV2.vue'
+import { EditorContent } from '@tiptap/vue-3'
 
 const Countdown = {
     date: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000),
@@ -46,14 +48,38 @@ onMounted(() => {
             <div class="text-xs">{{ trans('Enter text (when countdown expired)') }}</div>
 
             <!-- Text -->
-            <div class="flex items-center gap-x-2 py-1" >
-                <SideEditorInputHTML
+            <div class="flex items-center gap-x-2 py-1 w-full" >
+                <Editor2
                     :modelValue="get(model, 'expired_text', '')"
                     @update:modelValue="(e) => set(model, 'expired_text', e)"
-                />
+                    v-bind="$attrs"
+                    class="w-full"
+                    :placeholder="trans('Enter text')"
+                >
+                    <template #editor-content="{ editor }">
+                        <div class="bg-gray-200 editor-wrapper border-2 border-gray-300 rounded-lg px-3 py-2 shadow-sm focus-within:border-blue-400">
+                            <EditorContent :editor="editor" class="focus:outline-none" />
+                        </div>
+                    </template>
+                </Editor2>
+
+                <!-- <SideEditorInputHTML
+                    :modelValue="get(model, 'expired_text', '')"
+                    @update:modelValue="(e) => (console.log(e), set(model, 'expired_text', e))"
+                /> -->
             </div>
         </div>
     </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.editor-wrapper {
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+:deep(.editor-class) {
+  min-height: 150px;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+</style>
diff --git a/resources/js/Components/CMS/Fields/MultiEditorInputHTML.vue b/resources/js/Components/CMS/Fields/MultiEditorInputHTML.vue
@@ -154,7 +154,7 @@ const transitionList = [
 
             <Popover ref="_popover">
                     <div>
-                        <div class="text-sm font-medium mb-3">Are you sure to delete this ?</div>
+                        <div class="text-sm font-medium mb-3">{{ trans("Are you sure to delete this?") }}</div>
                         <div class="flex justify-end gap-2">
                             <Button :style="'white'" label="No" size="xs" @click="()=>_popover.hide()" />
                             <Button label="Yes" size="xs" @click="onDeleteText" />

diff --git a/...urces/js/Components/Workshop/Announcement/Templates/Promo/AnnouncementPromo2Countdown.vue b/...urces/js/Components/Workshop/Announcement/Templates/Promo/AnnouncementPromo2Countdown.vue
@@ -87,15 +87,16 @@ const fieldSideEditor = [
             tooltip: "Time countdown"
         },
         replaceForm: [
-            // {
-            //     key: ['fields', 'countdown', 'block_properties'],
-            //     type: "background",
-            // },
             {
                 key: ['fields', 'countdown'],
                 type: "countdown",
                 props_data: {
-                    noToday: true
+                    noToday: true,
+                    toogle: [
+                        'heading', 'fontSize', 'bold', 'italic', 'underline', "fontFamily",
+                        'alignLeft', 'alignRight', "link",
+                        'alignCenter', 'undo', 'redo', 'highlight', 'color', 'clear'
+                    ]
                 }
             }
         ]
@@ -413,7 +414,7 @@ const compTimeLeft = computed(() => {
     if (props.announcementData?.fields?.countdown?.date) {
         return new Date(props.announcementData?.fields?.countdown?.date).getTime()
     } else {
-        return new Date().getTime() + initialTime
+        return 0
     }
 })
 
@@ -489,7 +490,7 @@ defineExpose({
             <div v-if="announcementData?.fields.text_1.text" @click="() => (onClickOpenFieldWorkshop(1))" class="announcement-component-editable text-center md:text-left" v-html="announcementData?.fields.text_1.text" :style="propertiesToHTMLStyle(announcementData?.fields?.text_1.block_properties)">
 
             </div>
-
+            
             <div v-if="compTimeLeft > new Date().getTime()" @click="() => (onClickOpenFieldWorkshop(2))" class="announcement-component-editable grid grid-cols-4 gap-x-2 font-sans mx-auto">
                 <div class="flex flex-col items-center">
                     <div id="countdown-days" class="text-base w-fit flex justify-center overflow-hidden relative rounded-md tabular-nums">
@@ -517,8 +518,7 @@ defineExpose({
                 </div>
             </div>
 
-            <div v-else class="flex justify-center">
-                {{ announcementData?.fields?.countdown?.expired_text }}
+            <div v-else class="flex justify-center" v-html="announcementData?.fields?.countdown?.expired_text">
             </div>
 
             <div v-if="announcementData?.fields.button_1.text" class="relative justify-self-center md:justify-self-end">