Merge branch 'ent-11442-consejos-de-bienvenida-tienen-controles-confusos' into 'develop'

Ent 11442 consejos de bienvenida tienen controles confusos

See merge request artica/pandorafms!6414

pandora_console/include/class/TipsWindow.class.php

@@ -47,6 +47,7 @@ class TipsWindow
         'renderPreview',
         'setShowTipsAtStartup',
         'getTips',
+        'getTipById',
     ];
 
     /**
@@ -221,8 +222,13 @@ class TipsWindow
      *
      * @return array   $tip
      */
-    public function getTipById($idTip)
+    public function getTipById($idTip=false, $return=false)
     {
+        if ($idTip === false) {
+            $idTip = get_parameter('idTip');
+        }
+
+        $return = get_parameter('return', false);
         $tip = db_get_row(
             'twelcome_tip',
             'id',
@@ -232,10 +238,21 @@ class TipsWindow
             $tip['title'] = io_safe_output($tip['title']);
             $tip['text'] = io_safe_output($tip['text']);
             $tip['url'] = io_safe_output($tip['url']);
+            $tip['files'] = $this->getFilesFromTip($tip['id']);
         }
 
+        if ($return !== false) {
+            if (empty($tip) === false) {
+                echo json_encode(['success' => true, 'data' => $tip]);
+                return;
+            } else {
+                echo json_encode(['success' => false]);
+                return;
+            }
+        } else {
             return $tip;
         }
+    }
 
 
     /**

pandora_console/include/javascript/tipsWindow.js

@@ -81,14 +81,17 @@ function removeInputImage(e) {
     $("#notices_images").addClass("invisible");
   }
 }
-function render({ title, text, url, files }) {
+function render({ title, text, url, files, method }) {
   $("#title_tip").html(title);
   $("#text_tip").html(text);
   if (url) {
-    $("#url_tip").removeClass("invisible");
+    $("#button-learn_more").removeAttr("disabled");
+    $("#button-learn_more").removeClass("disabled_button");
     $("#url_tip").attr("href", url);
   } else {
-    $("#url_tip").addClass("invisible");
+    $("#button-learn_more").attr("disabled", "disabled");
+    $("#button-learn_more").addClass("disabled_button");
+    $("#url_tip").attr("href", "");
   }
 
   $(".carousel").empty();
@@ -110,7 +113,11 @@ function render({ title, text, url, files }) {
       if (index >= limitRound - 1) {
         $($(".count-round-tip")[0]).addClass("active");
       } else {
+        if (method == "next") {
           $($(".count-round-tip")[index + 1]).addClass("active");
+        } else {
+          $($(".count-round-tip")[index - 1]).addClass("active");
+        }
       }
       return false;
     }
@@ -147,7 +154,11 @@ function render_counter() {
 function next_tip() {
   if (idTips.length >= totalTips) {
     idTips = [];
+    $("#hidden-tip_position").val(-1);
   }
+  let tip_position = parseInt($("#hidden-tip_position").val()) + 1;
+  let idTip = idTips[tip_position];
+  if (idTip === undefined) {
     $.ajax({
       method: "POST",
       url: url,
@@ -159,11 +170,63 @@ function next_tip() {
       },
       success: function({ success, data }) {
         if (success) {
+          let tip_position = parseInt($("#hidden-tip_position").val()) + 1;
+          $("#hidden-tip_position").val(tip_position);
           idTips.push(parseInt(data.id));
+          data.method = "next";
           render(data);
         }
       }
     });
+  } else {
+    $.ajax({
+      method: "POST",
+      url: url,
+      dataType: "json",
+      data: {
+        page: page,
+        method: "getTipById",
+        idTip: idTip,
+        return: true
+      },
+      success: function({ success, data }) {
+        if (success) {
+          let tip_position = parseInt($("#hidden-tip_position").val()) + 1;
+          $("#hidden-tip_position").val(tip_position);
+          data.method = "next";
+          render(data);
+        }
+      }
+    });
+  }
+}
+
+function previous_tip() {
+  let actual_tip_position = parseInt($("#hidden-tip_position").val());
+
+  if (actual_tip_position != 0) {
+    let tip_position = parseInt($("#hidden-tip_position").val()) - 1;
+    let idTip = idTips[tip_position];
+    $.ajax({
+      method: "POST",
+      url: url,
+      dataType: "json",
+      data: {
+        page: page,
+        method: "getTipById",
+        idTip: idTip,
+        return: true
+      },
+      success: function({ success, data }) {
+        if (success) {
+          let tip_position = parseInt($("#hidden-tip_position").val()) - 1;
+          $("#hidden-tip_position").val(tip_position);
+          data.method = "prev";
+          render(data);
+        }
+      }
+    });
+  }
 }
 
 function load_tips_modal(settings) {

pandora_console/include/styles/pandora.css

@@ -12784,6 +12784,28 @@ tr.shown td.details-control {
   background-color: #81b92e3b !important;
 }
 
+.ui-dialog .tips_header.ui-dialog-titlebar {
+  height: fit-content !important;
+}
+
+.arrow_counter:hover {
+  cursor: pointer;
+}
+
+.disabled_button {
+  background-color: #ccc !important;
+  border: 2px solid #444 !important;
+  color: #444 !important;
+}
+
+.disabled_button:hover {
+  cursor: not-allowed;
+}
+
+.counter-tips {
+  margin-right: 20px;
+}
+
 .ui-datepicker-title > span {
   color: #82b92e !important;
 }

pandora_console/include/styles/tips_window.css

@@ -21,7 +21,7 @@
   display: flex !important;
   padding: 0px 20px;
   justify-content: space-between;
-  height: fit-content;
+  height: fit-content !important;
   background-color: white;
   color: #161628;
   border-top-left-radius: 25px !important;
@@ -161,6 +161,7 @@ span.count-round-tip.active {
   margin-top: 10px;
 }
 .arrow_counter {
+  cursor: pointer;
   width: 7px;
   margin: 0px 5px;
 }

pandora_console/views/dashboard/tipsWindow.php

@@ -72,37 +72,36 @@ $output .= '<h2 id="title_tip">'.$title.'</h2>';
 $output .= '<p id="text_tip">';
 $output .= $text;
 $output .= '</p>';
-
-$link_class = 'invisible';
+$disabled_class = 'disabled_button';
+$disabled = true;
 if (empty($url) === false && $url !== '') {
-    $link_class = '';
+    $disabled_class = '';
+    $disabled = false;
 }
 
-$output .= '<a href="'.$url.'" class="'.$link_class.'" target="_blank" id="url_tip">'.__('See more info').'</a>';
-
 $output .= '</div>';
 
 $output .= '<div class="ui-dialog-buttonset">';
-
+$output .= '<a href="'.$url.'" class="" target="_blank" id="url_tip">';
 $output .= html_print_button(
-    __('Maybe later'),
+    __('Learn more'),
+    'learn_more',
+    $disabled,
     '',
-    false,
-    '',
-    [
-        'onclick' => 'close_dialog()',
-        'class'   => 'secondary mini',
-    ],
+    ['class' => 'secondary mini '.$disabled_class],
     true
 );
+$output .= '</a>';
 $output .= '<div class="counter-tips">';
-$output .= html_print_image('images/arrow-left-grey.png', true, ['class' => 'arrow_counter']);
-$output .= html_print_image('images/arrow-right-grey.png', true, ['class' => 'arrow_counter']);
+
+$output .= html_print_image('images/arrow-left-grey.png', true, ['class' => 'arrow_counter', 'onclick' => 'previous_tip()']);
+$output .= html_print_image('images/arrow-right-grey.png', true, ['class' => 'arrow_counter', 'onclick' => 'next_tip()']);
+$output .= html_print_input_hidden('tip_position', 0, true);
 $output .= '</div>';
 if ($preview === true) {
     $output .= html_print_button(
-        __('Ok'),
-        'next_tip',
+        __('Close'),
+        'close_dialog',
         false,
         '',
         [
@@ -113,12 +112,12 @@ if ($preview === true) {
     );
 } else {
     $output .= html_print_button(
-        __('Ok'),
-        'next_tip',
+        __('Close'),
+        'close_dialog',
         false,
         '',
         [
-            'onclick' => 'next_tip()',
+            'onclick' => 'close_dialog()',
             'class'   => ($totalTips === '1') ? 'mini hide-button' : 'mini',
         ],
         true