From b61edc9572a01078c966b7466c2c63c35228a56d Mon Sep 17 00:00:00 2001
From: aqordeon <aqordivika@yahoo.co.id>
Date: Thu, 3 Oct 2024 15:54:05 +0800
Subject: [PATCH] #918 feat: Webpage Workshop: border & border radius
 properties

---
 .../web-block-type-categories/text.json       |  1 +
 .../Fulfilment/Website/Block/TextContent.vue  |  8 +++-
 resources/js/Components/Utils/ColorPicker.vue | 28 +++++++++----
 .../Fields/Properties/BackgroundProperty.vue  |  2 +-
 .../Fields/Properties/BorderProperty.vue      | 41 ++++++++++++-------
 resources/js/Layouts/Iris/Header.vue          |  4 +-
 .../js/Pages/Grp/Org/Web/WebpageWorkshop.vue  | 12 ++++--
 .../js/Pages/Grp/Web/PreviewWorkshop.vue      | 16 ++++----
 8 files changed, 74 insertions(+), 38 deletions(-)

diff --git a/database/seeders/datasets/web-block-type-categories/text.json b/database/seeders/datasets/web-block-type-categories/text.json
index 060f954c8f..12f5a05c3b 100644
--- a/database/seeders/datasets/web-block-type-categories/text.json
+++ b/database/seeders/datasets/web-block-type-categories/text.json
@@ -58,6 +58,7 @@
                         "color":  "#000000",
                         "unit": "px",
                         "rounded": {
+                            "unit": "px",
                             "topright" :  {
                                 "value": 0
                             },
diff --git a/resources/js/Components/Fulfilment/Website/Block/TextContent.vue b/resources/js/Components/Fulfilment/Website/Block/TextContent.vue
index ae90f8b31b..1073f3690a 100644
--- a/resources/js/Components/Fulfilment/Website/Block/TextContent.vue
+++ b/resources/js/Components/Fulfilment/Website/Block/TextContent.vue
@@ -20,7 +20,7 @@ const emits = defineEmits<{
 </script>
 
 <template>
-    <div class="relative box-border" id="blockTextContent"
+    <div class="relative box-border overflow-hidden" id="blockTextContent"
         :style="{
             paddingTop: (properties.padding.top.value || 0) + properties.padding.unit, 
             paddingBottom: (properties.padding.bottom.value || 0) + properties.padding.unit, 
@@ -35,6 +35,10 @@ const emits = defineEmits<{
             borderBottom: `${properties.border.bottom.value}${properties.border.unit} solid ${properties.border.color}`,
             borderRight: `${properties.border.right.value}${properties.border.unit} solid ${properties.border.color}`,
             borderLeft: `${properties.border.left.value}${properties.border.unit} solid ${properties.border.color}`,
+            borderTopRightRadius: `${properties.border.rounded.topright.value}${properties.border.rounded.unit}`,
+            borderBottomRightRadius: `${properties.border.rounded.bottomright.value}${properties.border.rounded.unit}`,
+            borderBottomLeftRadius: `${properties.border.rounded.bottomleft.value}${properties.border.rounded.unit}`,
+            borderTopLeftRadius: `${properties.border.rounded.topleft.value}${properties.border.rounded.unit}`,
         }"
     >
         <Editor
@@ -49,7 +53,7 @@ const emits = defineEmits<{
 </template>
 
 
-<style lang="scss">
+<style lang="scss" scoped>
 /* Basic editor styles */
 
 #blockTextContent blockquote {
diff --git a/resources/js/Components/Utils/ColorPicker.vue b/resources/js/Components/Utils/ColorPicker.vue
index 66e5e43ded..88de11a058 100644
--- a/resources/js/Components/Utils/ColorPicker.vue
+++ b/resources/js/Components/Utils/ColorPicker.vue
@@ -43,17 +43,31 @@ const emits = defineEmits<{
     (e: 'changeColor', value: Color): void
 }>()
 
+// Method: change 0.2 to '33' (hexadecimal)
+const opacityToHexCode = (opacity: number) => {
+    if (opacity < 0 || opacity > 1) {
+        return 'ff'
+    }
+
+    // Convert the opacity to a value between 0 and 255
+    const alphaValue = Math.round(opacity * 255);
+    
+    // Return the base color with the new alpha value
+    return alphaValue.toString(16).padStart(2, '0');
+}
+
 </script>
 
 
 <template>
     <Popover v-slot="{ open }" class="relative">
-        <PopoverButton>
-            <div v-bind="$attrs" class="h-12 w-12" :style="{
-                backgroundColor: color
-            }">
-                <slot />
-            </div>
+        <PopoverButton as="template">
+            <slot name="button">
+                <div v-bind="$attrs" class="h-12 w-12 cursor-pointer" :style="{
+                    backgroundColor: color
+                }">
+                </div>
+            </slot>
         </PopoverButton>
 
         <PopoverPanel v-slot="{ close }" class="absolute left-8 top-0 z-10 mt-3">
@@ -64,7 +78,7 @@ const emits = defineEmits<{
                         theme="dark"
                         :color="color"
                         :sucker-hide="true"
-                        @changeColor="(e) => emits('changeColor', e)"
+                        @changeColor="(e) => emits('changeColor', {...e, hex: e.hex + opacityToHexCode(e.rgba.a)})"
                     />
                 </div>
             </div>
diff --git a/resources/js/Components/Websites/Fields/Properties/BackgroundProperty.vue b/resources/js/Components/Websites/Fields/Properties/BackgroundProperty.vue
index 6fc7b650de..45e3b1a9ba 100644
--- a/resources/js/Components/Websites/Fields/Properties/BackgroundProperty.vue
+++ b/resources/js/Components/Websites/Fields/Properties/BackgroundProperty.vue
@@ -89,7 +89,7 @@ const routeList = {
             <ColorPicker
                 :color="model.color"
                 class="h-8 w-8 rounded-md border border-gray-300"
-                @changeColor="(newColor)=> model.color = newColor.hex"
+                @changeColor="(newColor)=> model.color = `rgba(${newColor.rgba.r}, ${newColor.rgba.g}, ${newColor.rgba.b}, ${newColor.rgba.a}`"
                 closeButton
             />
             <!-- <div v-else class="h-8 w-8 rounded-md border border-gray-300 shadow" :style="{background: model.color}" /> -->
diff --git a/resources/js/Components/Websites/Fields/Properties/BorderProperty.vue b/resources/js/Components/Websites/Fields/Properties/BorderProperty.vue
index 58d78e84ef..0f64e26f74 100644
--- a/resources/js/Components/Websites/Fields/Properties/BorderProperty.vue
+++ b/resources/js/Components/Websites/Fields/Properties/BorderProperty.vue
@@ -6,13 +6,16 @@ import { ref } from 'vue'
 import { faBorderTop, faBorderLeft, faBorderBottom, faBorderRight, faBorderOuter } from "@fad"
 import { library } from "@fortawesome/fontawesome-svg-core"
 import { faLink, faUnlink } from "@fal"
+import { faExclamation } from "@fas"
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import ColorPicker from '@/Components/Utils/ColorPicker.vue'
-library.add(faBorderTop, faBorderLeft, faBorderBottom, faBorderRight, faBorderOuter, faLink, faUnlink)
+library.add(faExclamation, faBorderTop, faBorderLeft, faBorderBottom, faBorderRight, faBorderOuter, faLink, faUnlink)
 
 interface Borderproperty {
     color: string
+    unit: string
     rounded: {
+        unit: string
         topright: {
             value: number
         }
@@ -47,7 +50,7 @@ const model = defineModel<Borderproperty>({
 const isBorderSameValue = ref(false)
 const changeBorderValueToSame = (newVal: number) => {
     for (let key in model.value) {
-        if (model.value[key as keyof Borderproperty].hasOwnProperty('value') && model.value[key as keyof Borderproperty] != 'rounded') {
+        if (model.value[key as keyof Borderproperty].hasOwnProperty('value')) {
             model.value[key as keyof Borderproperty].value = newVal; // Set value to 99
         }
     }
@@ -55,9 +58,9 @@ const changeBorderValueToSame = (newVal: number) => {
 
 const isRoundedSameValue = ref(false)
 const changeRoundedValueToSame = (newVal: number) => {
-    for (let key in model.value) {
-        if (model.value[key as keyof Borderproperty].hasOwnProperty('value') && model.value[key as keyof Borderproperty] != 'rounded') {
-            model.value[key as keyof Borderproperty].value = newVal; // Set value to 99
+    for (let key in model.value.rounded) {
+        if (model.value.rounded[key as keyof Borderproperty].hasOwnProperty('value')) {
+            model.value.rounded[key as keyof Borderproperty].value = newVal; // Set value to 99
         }
     }
 }
@@ -89,10 +92,21 @@ const iconRoundedCorner = `<svg xmlns="http://www.w3.org/2000/svg" width="100%"
                 <div class="text-xs">{{ trans('Color') }}</div>
                 <ColorPicker
                     :color="model.color"
-                    class="h-8 w-8 rounded-md border border-gray-300"
-                    @changeColor="(newColor)=> model.color = newColor.hex"
+                    @changeColor="(newColor)=> model.color = `rgba(${newColor.rgba.r}, ${newColor.rgba.g}, ${newColor.rgba.b}, ${newColor.rgba.a}`"
                     closeButton
-                />
+                >
+                    <template #button>
+                        <div v-bind="$attrs" class="overflow-hidden h-7 w-7 rounded-md border border-gray-300 cursor-pointer flex justify-center items-center" :style="{
+                            border: `4px solid ${model.color}`
+                        }"
+                            v-tooltip="!(model.top.value || model.right.value || model.bottom.value || model.left.value) ? trans('Will not show due have no border width') : undefined"
+                        >
+                            <Transition name="spin-to-down">
+                                <FontAwesomeIcon v-if="!(model.top.value || model.right.value || model.bottom.value || model.left.value)" icon='fas fa-exclamation' class='text-gray-400 text-xs' fixed-width aria-hidden='true' />
+                            </Transition>
+                        </div>
+                    </template>
+                </ColorPicker>
             </div>
 
             <!-- Toggle: Border same value -->
@@ -152,6 +166,7 @@ const iconRoundedCorner = `<svg xmlns="http://www.w3.org/2000/svg" width="100%"
                 </Transition>
             </div>
 
+
             <!-- Toggle: Rounded same value -->
             <div class="px-3 flex justify-between items-center mb-2">
                 <div class="text-xs">{{ trans('Rounded same value') }}</div>
@@ -171,12 +186,10 @@ const iconRoundedCorner = `<svg xmlns="http://www.w3.org/2000/svg" width="100%"
             <!-- Rounded -->
             <div class="pl-2 pr-4 flex items-center relative">
                 <Transition name="slide-to-up">
-                    <div v-if="isRoundedSameValue">
-                        <div class="grid grid-cols-5 items-center">
-                            <FontAwesomeIcon icon='fad fa-border-outer' v-tooltip="trans('Padding all')" class='' fixed-width aria-hidden='true' />
-                            <div class="col-span-4">
-                                <PureInputNumber v-model="model.rounded.topright.value" @update:modelValue="(newVal) => isRoundedSameValue ? changeRoundedValueToSame(newVal) : false" class="" suffix="px" />
-                            </div>
+                    <div v-if="isRoundedSameValue" class="grid grid-cols-5 items-center">
+                        <FontAwesomeIcon icon='fad fa-border-outer' v-tooltip="trans('Padding all')" class='' fixed-width aria-hidden='true' />
+                        <div class="col-span-4">
+                            <PureInputNumber v-model="model.rounded.topright.value" @update:modelValue="(newVal) => isRoundedSameValue ? changeRoundedValueToSame(newVal) : false" class="" suffix="px" />
                         </div>
                     </div>
 
diff --git a/resources/js/Layouts/Iris/Header.vue b/resources/js/Layouts/Iris/Header.vue
index 2b3f58fba7..430a62b3c0 100644
--- a/resources/js/Layouts/Iris/Header.vue
+++ b/resources/js/Layouts/Iris/Header.vue
@@ -24,9 +24,9 @@ const props = defineProps<{
 <template>
     <div>
         <component 
-            :is="getRenderComponent(data.data.key)" 
+            :is="getRenderComponent(data?.data?.key)" 
             :loginMode="false" 
-            :loginRoute="data.data.loginRoute" 
+            :loginRoute="data?.data?.loginRoute" 
             :data="data.data" 
             :colorThemed="colorThemed"
             :menu="menu"
diff --git a/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue b/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue
index 894dd9c159..18a2e1038b 100644
--- a/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue
+++ b/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue
@@ -188,7 +188,7 @@ const setIframeView = (view: String) => {
     } else if (view === 'tablet') {
         iframeClass.value = 'w-[768px] h-[1024px] mx-auto'; // iPad size
     } else {
-        iframeClass.value = 'w-full h-full'; // Full width for desktop
+        iframeClass.value = 'w-full h-full mx-auto'; // Full width for desktop
     }
 }
 
@@ -265,9 +265,13 @@ const openFullScreenPreview = () => {
                 </div>
 
                 <div class="h-full w-full bg-white">
-                    <iframe :src="iframeSrc" :title="props.title"
-                        :class="[iframeClass, isIframeLoading ? 'hidden' : '']" @error="handleIframeError"
-                        @load="isIframeLoading = false" />
+                    <iframe
+                        :src="iframeSrc"
+                        :title="props.title"
+                        :class="[iframeClass, isIframeLoading ? 'hidden' : '']"
+                        @error="handleIframeError"
+                        @load="isIframeLoading = false"
+                    />
                 </div>
             </div>
         </div>
diff --git a/resources/js/Pages/Grp/Web/PreviewWorkshop.vue b/resources/js/Pages/Grp/Web/PreviewWorkshop.vue
index d366abdf30..f13ff67d7f 100644
--- a/resources/js/Pages/Grp/Web/PreviewWorkshop.vue
+++ b/resources/js/Pages/Grp/Web/PreviewWorkshop.vue
@@ -85,14 +85,14 @@ console.log('preview',props)
 
 <template>
     <div class="container max-w-7xl mx-auto shadow-xl">
-      <component
-        :is="getComponentsHeader(layout?.header?.header?.key)"
-        :loginMode="true"
-        :previewMode="true"
-        v-model="layout.header.header"
-        :uploadImageRoute="layout.header.uploadImageRoute"
-        :colorThemed="layout.colorThemed"
-      />
+        <component
+            :is="getComponentsHeader(layout?.header?.header?.key)"
+            :loginMode="true"
+            :previewMode="true"
+            v-model="layout.header.header"
+            :uploadImageRoute="layout.header.uploadImageRoute"
+            :colorThemed="layout.colorThemed"
+        />
         <div v-if="data" class="relative">
             <div class="container max-w-7xl mx-auto">
                 <div class="h-full overflow-auto w-full ">