src/Products/NotificationsBundle/Resources/views/dashboard/messages/update.html.twig line 1

Open in your IDE?
  1. {% extends '@ProductsNotifications/base--full.html.twig' %}
  2. {% form_theme form with [
  3.     '@ui2022/forms/themes/messages.html.twig',
  4.     _self
  5. ] %}
  6. {% block topbar %}
  7.     {% set steps =
  8.         [
  9.             {
  10.                 active: true,
  11.                 text: 'Create message',
  12.             },
  13.             {
  14.                 text: 'Review and test',
  15.                 button: {
  16.                     button: 'form',
  17.                     type: 'submit',
  18.                     styles: 'wizard',
  19.                     attr: {
  20.                         class: 'btn__next',
  21.                     },
  22.                     form: {
  23.                         form: form.vars.id,
  24.                         formaction: path(app.request.attributes.get('_route'), app.request.query.all()|merge(app.request.attributes.get('_route_params'))|merge({
  25.                             saved: false
  26.                         })),
  27.                     },
  28.                 },
  29.             },
  30.         ]
  31.     %}
  32.     {% include '@ui2022/topbar--wizard.html.twig' with {
  33.         steps: steps,
  34.         subactions: [
  35.             {
  36.                 text: 'Exit',
  37.                 link: path('app.notifications.dashboard.messages.main'),
  38.                 styles: 'lighter md',
  39.                 attr: {
  40.                     id: 'btn__exit',
  41.                 },
  42.             },
  43.             {
  44.                 button: 'form',
  45.                 type: 'submit',
  46.                 text: 'Save',
  47.                 styles: 'lighter md',
  48.                 form: {
  49.                     form: form.vars.id,
  50.                     formaction: path(app.request.attributes.get('_route'), app.request.query.all()|merge(app.request.attributes.get('_route_params'))|merge({
  51.                         saved: false,
  52.                         jump: (message.id is defined and message.id is not empty) ? path('app.notifications.dashboard.messages.update', {message: message.id, saved: true}) : path('app.notifications.dashboard.messages.main')
  53.                     })),
  54.                 },
  55.             },
  56.         ],
  57.         actions: [
  58.             {
  59.                 button: 'form',
  60.                 type: 'submit',
  61.                 text: 'Next',
  62.                 styles: 'primary wide md',
  63.                 attr: {
  64.                     class: 'btn__next',
  65.                 },
  66.                 form: {
  67.                     form: form.vars.id,
  68.                     formaction: path(app.request.attributes.get('_route'), app.request.query.all()|merge(app.request.attributes.get('_route_params'))|merge({
  69.                         saved: false
  70.                     })),
  71.                 },
  72.             },
  73.         ],
  74.     } %}
  75. {% endblock %}
  76. {% block content %}
  77.     {{ form_start(form) }}
  78.         {% if form_errors(form) %}
  79.             <div class="container-md pl-0 pt-3">
  80.                 {{ form_errors(form) }}
  81.             </div>
  82.         {% endif %}
  83.         {% if form.recording is defined and form_errors(form.recording) %}
  84.             <div class="container-md pl-0 pt-3">
  85.                 {{ form_errors(form.recording) }}
  86.             </div>
  87.         {% endif %}
  88.         <div class="{% if not form_errors(form) %}pt-3{% endif %} pb-4 mb-2">
  89.             <div class="featured__block featured__block--md container-md">
  90.                 {{ form_row(form.lists) }}
  91.             </div>
  92.         </div>
  93.         <div class="container-md">
  94.             {{ form_row(form.title, {
  95.                 limit_help: {
  96.                     text: 'Learn best practices',
  97.                     icon: 'icon-play',
  98.                     toggle: 'modal',
  99.                     link: '#modal__%s'|format(
  100.                         form.title.vars.id
  101.                     ),
  102.                 },
  103.             }) }}
  104.             {{ form_row(form.description) }}
  105.             <div class="pt-0 mb-4">
  106.                 <a href="#" data-toggle="modal" data-target="#modal__merge_fields">Show available merge fields</a>
  107.             </div>
  108.             {% if form.script is defined %}
  109.                 {{ form_row(form.script) }}
  110.             {% endif %}
  111.             {% if form.recording is defined %}
  112.                 <div class="pt-0 mb-5">
  113.                     {{ form_label(form.recording) }}
  114.                     {{ form_widget(form.recording) }}
  115.                 </div>
  116.             {% endif %}
  117.             {{ form_rest(form) }}
  118.         </div>
  119.     {{ form_end(form) }}
  120.     <script type="text/javascript">
  121.         (function (window, document, $, undefined) {
  122.             $(function () {
  123.                 {% if app.request.get('saved') == 1 %}
  124.                     toastr.options = {
  125.                         positionClass: "toast-top-left mt-5 pt-4",
  126.                         fadeIn: 1000,
  127.                         timeOut: 3000,
  128.                         fadeOut: 1000,
  129.                     };
  130.                     toastr.success('Saved');
  131.                 {% endif %}
  132.                 let initialState = null;
  133.                 setTimeout(function () {
  134.                     initialState = $('#{{ form.vars.id }}').serialize();
  135.                 }, 500);
  136.                 $('#btn__exit').on('click', function (e) {
  137.                     var $this = $(this),
  138.                         $modal = $('#modal__exit'),
  139.                         currentState = $('#{{ form.vars.id }}').serialize();
  140.                     if (currentState !== initialState) {
  141.                         $modal.modal();
  142.                         return false;
  143.                     }
  144.                 });
  145.                 {% if hasManualTranslation is defined and hasManualTranslation == true %}
  146.                     $('.btn__next').on('click', function () {
  147.                         const button = $(this);
  148.                         button.prop('disabled', true);
  149.                         let isFormValid = false;
  150.                         $.ajax({
  151.                             type: "POST",
  152.                             async: false,
  153.                             url: ('/_dashboard/notifications/messages/' + {{ message.id }} + '/update/check_form'),
  154.                             data: $('#message_data_form').serialize(),
  155.                             success: function(response)
  156.                             {
  157.                                 if (response && response.isValid) {
  158.                                     isFormValid = true;
  159.                                 }
  160.                             },
  161.                             complete: function ()
  162.                             {
  163.                                 button.prop('disabled', false);
  164.                             }
  165.                         });
  166.                         if (isFormValid === true) {
  167.                             $('#modal__next').modal();
  168.                             return false;
  169.                         }
  170.                     });
  171.                 {% endif %}
  172.                 {% if form.script is defined and form.recording is defined %}
  173.                     $('#{{ form.script.vars.id }}').on('input', function (e) {
  174.                         let $target = $(e.currentTarget),
  175.                             react = $('#{{ form.recording.vars.id }}').data('react');
  176.                             react.api.setSpeech($target.val());
  177.                     });
  178.                     $('#{{ form.script.vars.id }}').trigger('input');
  179.                 {% endif %}
  180.             });
  181.         })(window, document, jQuery);
  182.     </script>
  183. {% endblock %}
  184. {% block modals %}
  185.     {{ parent() }}
  186.     {% embed '@ui2022/modal.html.twig' with {
  187.         dialog_styles: 'video dialog-centered dialog-scrollable',
  188.         attr: {
  189.             id: 'modal__%s'|format(
  190.                 form.title.vars.id
  191.             ),
  192.         },
  193.     } %}
  194.         {% block content %}
  195.             <div class="embed-responsive embed-responsive-16by9">
  196.                 <!--YouTube Video-->
  197.                 <iframe src="https://player.vimeo.com/video/662382869?h=3381ea9177" width="640" height="360" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; fullscreen; picture-in-picture" allowfullscreen></iframe>
  198.                 <p><a href="https://vimeo.com/662382869">Message Compose Best Practices</a> from <a href="https://vimeo.com/campussuite">SchoolStatus Sites &amp; Apps</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
  199.                 <!--Video File-->
  200.                 <!-- <video class="embed-responsive-item" controls >
  201.                     <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1280_10MG.mp4"></source>
  202.                 </video> -->
  203.             </div>
  204.             <button class="modal-video--close" type="button" data-dismiss="modal">
  205.                 <i class="icon-plus"></i>
  206.             </button>
  207.         {% endblock %}
  208.     {% endembed %}
  209.     {% embed '@ui2022/modal.html.twig' with {
  210.         attr: {
  211.             id: 'modal__next',
  212.         },
  213.     } %}
  214.         {% block content %}
  215.             {% embed '@ui2022/modal__content.html.twig' with {
  216.                 styles: 'bg-gray',
  217.             } %}
  218.                 {% block body %}
  219.                     <div class="msggroup msggroup__prompts pt-0">
  220.                         <div class="msggroup__promptsblock">
  221.                             <div class="prompt-block dismiss-prompt next-modal-submit" data-force="1">
  222.                                 <a href="javascript:void(0)" class="prompt-container">
  223.                                     <div class="prompt-text-block">
  224.                                         <h3>Dismiss edits</h3>
  225.                                         <p>Changes that have been made to other languages will be overwritten.</p>
  226.                                     </div>
  227.                                 </a>
  228.                             </div>
  229.                             <div class="prompt-block keep-prompt next-modal-submit" data-force="0">
  230.                                 <a href="javascript:void(0)" class="prompt-container">
  231.                                     <div class="prompt-text-block">
  232.                                         <h3>Keep edits</h3>
  233.                                         <p>Edits made to other languages will not be modified and retain edits.</p>
  234.                                     </div>
  235.                                 </a>
  236.                             </div>
  237.                         </div>
  238.                     </div>
  239.                 {% endblock %}
  240.             {% endembed %}
  241.         {% endblock %}
  242.     {% endembed %}
  243.     {% embed '@ui2022/modal.html.twig' with {
  244.         attr: {
  245.             id: 'modal__exit',
  246.         },
  247.     } %}
  248.         {% block content %}
  249.             {% embed '@ui2022/modal__content.html.twig' with {
  250.                 styles: 'bg-gray',
  251.             } %}
  252.                 {% block body %}
  253.                     <div class="crmsg__dialogs">
  254.                         <img class="crmsg__icon" src="/ui2022/images/icon-createmsg-exit.svg" width="77.48" height="71.37" />
  255.                         <h2 class="crmsg__title">
  256.                             Exiting?
  257.                         </h2>
  258.                         <p class="crmsg__desc font-18">
  259.                             Please confirm if you would like to save a draft.
  260.                         </p>
  261.                         <div class="crmsg__btngroup">
  262.                             {% include '@ui2022/button--a.html.twig' with {
  263.                                 text: 'Do not save',
  264.                                 link: path('app.notifications.dashboard.messages.main'),
  265.                                 styles: 'white',
  266.                             } %}
  267.                             {% include '@ui2022/button--form.html.twig' with {
  268.                                 type: 'submit',
  269.                                 text: 'Save draft',
  270.                                 styles: 'success',
  271.                                 form: {
  272.                                     form: form.vars.id,
  273.                                     formaction: path(app.request.attributes.get('_route'), app.request.query.all()|merge(app.request.attributes.get('_route_params'))|merge({
  274.                                         jump: path('app.notifications.dashboard.messages.main'),
  275.                                     })),
  276.                                 },
  277.                             } %}
  278.                         </div>
  279.                     </div>
  280.                 {% endblock %}
  281.             {% endembed %}
  282.         {% endblock %}
  283.     {% endembed %}
  284.     {% embed '@ui2022/modal.html.twig' with {
  285.         attr: {
  286.             id: 'modal__merge_fields',
  287.         },
  288.     } %}
  289.         {% block content %}
  290.             {% embed '@ui2022/modal__content.html.twig' with {
  291.                 styles: 'bg-gray',
  292.                 title: 'Available merge fields',
  293.             } %}
  294.                 {% block body %}
  295.                     <div class="crmsg__dialogs">
  296.                         <ul class="list-inline"style="text-align: left">
  297.                             {% for param in mergeParams %}
  298.                                 <li class="list-inline-item clippy mb-2" data-dismiss="modal" data-clipboard-text="{{ '{{%s}}'|format(param) }}"><span class="btn btn-lightgray"> {{ '{{%s}}'|format(param) }} <i class="fa fa-copy"></i></span></li>
  299.                             {% endfor %}
  300.                         </ul>
  301.                     </div>
  302.                     <script>
  303.                         $(function() {
  304.                             (new ClipboardJS('.clippy'))
  305.                                 .on('success', function (e) {
  306.                                     toastr.success('Merge field copied to clipboard!');
  307.                                 })
  308.                                 .on('error', function (e) {
  309.                                     toastr.error('Unable to copy merge field to clipboard!');
  310.                                 });
  311.                         });
  312.                     </script>
  313.                 {% endblock %}
  314.             {% endembed %}
  315.         {% endblock %}
  316.     {% endembed %}
  317.     <script type="text/javascript">
  318.         $("#modal__message_data_form_title").on('hidden.bs.modal', function (e) {
  319.             var div = document.getElementById("modal__message_data_form_title");
  320.             var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
  321.             iframe.postMessage('{"method":"pause"}', '*');
  322.         });
  323.         $(".next-modal-submit").on('click', function () {
  324.             const forceTranslations = $(this).data('force');
  325.             const hiddenFields = $('.force-translation');
  326.             if (hiddenFields.length > 0) {
  327.                 hiddenFields.first().val(forceTranslations)
  328.             }
  329.             $('#{{ form.vars.id }}').submit();
  330.         });
  331.         {% if form_errors(form) or (form.recording is defined and form_errors(form.recording)) %}
  332.             setTimeout(() => {
  333.                 react = $('#{{ form.recording.vars.id }}').data('react');
  334.                 react.api.setSpeech($('#{{ form.script.vars.id }}').val());
  335.             }, 1000);
  336.         {% endif %}
  337.     </script>
  338. {% endblock %}