feat: Display the date and time of the next reminder (#1704)

monicahq · Aug 17, 2018 · ba417b0 · ba417b0
1 parent 1d35dea
commit ba417b0
Show file tree

Hide file tree

Showing 12 changed files with 153 additions and 31 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -11,6 +11,7 @@ UNRELEASED CHANGES:
 * Render timezone listbox dynamically
 * Use a new formatter to display money (debts), with right locale handle
 * Get first existing gravatar if contact has multiple emails
+* Display the date and time of the next reminder sent in settings page
 
 RELEASED VERSIONS:
 

diff --git a/app/Http/Controllers/SettingsController.php b/app/Http/Controllers/SettingsController.php
@@ -84,7 +84,9 @@ public function index()
                 ->withLocales(LocaleHelper::getLocaleList())
                 ->withHours(DateHelper::getListOfHours())
                 ->withSelectedTimezone(TimezoneHelper::adjustEquivalentTimezone(DateHelper::getTimezone()))
-                ->withTimezones(TimezoneHelper::getListOfTimezones());
+                ->withTimezones(collect(TimezoneHelper::getListOfTimezones())->map(function ($timezone) {
+                    return ['id' => $timezone['timezone'], 'name'=>$timezone['name']];
+                }));
     }
 
     /**

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "lodash": "^4.17.5",
     "marked": "^0.4.0",
     "moment": "^2.22.1",
+    "moment-timezone": "^0.5.21",
     "pretty-checkbox-vue": "^1.1.8",
     "sweet-modal-vue": "^2.0.0",
     "tachyons": "^4.9.1",

diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/js/langs/en.json b/public/js/langs/en.json
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=7dd1a610af425991f0ad",
+    "/js/app.js": "/js/app.js?id=38213d96d3dbfa44dd07",
     "/css/app.css": "/css/app.css?id=10b48a582263122f8bc7",
     "/css/stripe.css": "/css/stripe.css?id=64c68c04c4e475fcc7c6",
     "/js/vendor.js": "/js/vendor.js?id=490bf428af4c7224b600",

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -172,6 +172,10 @@ Vue.component(
     'reminder-rules',
     require('./components/settings/ReminderRules.vue')
 );
+Vue.component(
+    'reminder-time',
+    require('./components/settings/ReminderTime.vue')
+);
 Vue.component(
     'mfa-activate',
     require('./components/settings/MfaActivate.vue')

diff --git a/resources/assets/js/components/partials/form/Select.vue b/resources/assets/js/components/partials/form/Select.vue
@@ -12,15 +12,15 @@ select:focus {
 
 <template>
   <div>
-    <p class="mb2" v-bind:class="{ b: required }" v-if="title">{{ title }}</p>
+    <label :for="id" class="mb2" v-bind:class="{ b: required }" v-if="title">{{ title }}</label>
     <select
-        v-model="selectedOption"
-        @input="event => { $emit('input', event.target.value) }"
+        :value="selectedOption"
+        v-on:input="$emit('input', $event)"
         :id="id"
         :name="id"
         required
-        class="br2 f5 w-100 ba b--black-40 pa2 outline-0">
-        <option v-for="option in options" :value="option.id" v-if="option.id != excludedId">{{ option.name }}</option>
+        :class="formClass != null ? formClass : 'br2 f5 w-100 ba b--black-40 pa2 outline-0'">
+        <option v-for="option in options" :key="option.id" :value="option.id" v-if="option.id != excludedId">{{ option.name }}</option>
     </select>
   </div>
 </template>
@@ -32,7 +32,7 @@ select:focus {
          */
         data() {
             return {
-                selectedOption: null
+                selectedOption: null,
             };
         },
 
@@ -60,6 +60,9 @@ select:focus {
             required: {
               type: Boolean,
             },
+            formClass: {
+                type: String,
+            },
         },
 
         watch: {

diff --git a/resources/assets/js/components/settings/ReminderTime.vue b/resources/assets/js/components/settings/ReminderTime.vue
@@ -0,0 +1,110 @@
+<style scoped>
+</style>
+
+<template>
+    <div>
+        <!-- Timezone -->
+        <div class="form-group">
+            <form-select
+                :value="timezone"
+                :id="'timezone'"
+                :options="timezones"
+                :title="$t('settings.timezone')"
+                @input="timezoneUpdate"
+                :required="true"
+                :formClass="'form-control'">
+            </form-select>
+        </div>
+
+        <!-- Reminders -->
+        <div class="form-group">
+            <form-select
+                :value="reminder"
+                :id="'reminder_time'"
+                :options="hours"
+                :title="$t('settings.reminder_time_to_send')"
+                @input="reminderUpdate"
+                :required="true"
+                :formClass="'form-control'">
+            </form-select>
+            <small class="form-text text-muted">
+                {{ $t('settings.reminder_time_to_send_help', {dateTime:formatted}) }}
+            </small>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        /*
+         * The component's data.
+         */
+        data() {
+            return {
+                formatted: '',
+                formattedUtc: '',
+            };
+        },
+
+        props: {
+            timezone: {
+                type: String,
+            },
+            timezones: {
+                type: Array,
+            },
+            reminder: {
+                type: String,
+            },
+            hours: {
+                type: Array,
+            }
+        },
+
+        /**
+         * Prepare the component (Vue 1.x).
+         */
+        ready() {
+            this.prepareComponent();
+        },
+
+        /**
+         * Prepare the component (Vue 2.x).
+         */
+        mounted() {
+            this.prepareComponent();
+        },
+
+        methods: {
+            /**
+             * Prepare the component.
+             */
+            prepareComponent() {
+                var moment = require('moment-timezone');
+                moment.locale(this._i18n.locale);
+                moment.tz.setDefault('UTC');
+
+                var now = moment();
+                var t = now.format('YYYY-MM-DD '+this.reminder+':00');
+
+                var date = moment.tz(t, this.timezone);
+
+                if (date.isBefore(now)) {
+                  date = date.add(1, 'days');
+                }
+
+                this.formatted = date.format('lll');
+            },
+
+            timezoneUpdate: function(event) {
+                this.timezone = event.target.value;
+                this.prepareComponent();
+            },
+
+            reminderUpdate: function(event) {
+                this.reminder = event.target.value;
+                this.prepareComponent();
+            },
+        }
+    }
+</script>
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
@@ -309,6 +309,7 @@
     'personalisation_paid_upgrade' => 'This is a premium feature that requires a Paid subscription to be active. Upgrade your account by visiting Settings > Subscription.',
 
     'reminder_time_to_send' => 'Time of the day reminders should be sent',
+    'reminder_time_to_send_help' => 'For your information, your next reminder will be sent on {dateTime}.',
 
     'personalization_activity_type_category_title' => 'Activity type categories',
     'personalization_activity_type_category_add' => 'Add a new activity type category',

diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
@@ -47,12 +47,12 @@
 
               {{-- names --}}
               <div class="form-group">
-                <label for="firstname">{{ trans('settings.firstname') }}</label>
+                <label for="first_name">{{ trans('settings.firstname') }}</label>
                 <input type="text" class="form-control" name="first_name" id="first_name" required value="{{ auth()->user()->first_name }}">
               </div>
 
               <div class="form-group">
-                <label for="firstname">{{ trans('settings.lastname') }}</label>
+                <label for="last_name">{{ trans('settings.lastname') }}</label>
                 <input type="text" class="form-control" name="last_name" id="last_name" required value="{{ auth()->user()->last_name }}">
               </div>
 
@@ -75,30 +75,20 @@
 
               {{-- currency for user --}}
               <div class="form-group">
-                <label for="layout">{{ trans('settings.currency') }}</label>
+                <label for="currency_id">{{ trans('settings.currency') }}</label>
                 @include('partials.components.currency-select', ['selectionID' => auth()->user()->currency_id ])
               </div>
 
               {{-- Way of displaying names --}}
               <div class="form-group">
                 <label for="name_order">{{ trans('settings.name_order') }}</label>
-                <select name="name_order" class="form-control">
+                <select id="name_order" name="name_order" class="form-control">
                   @foreach ($namesOrder as $nameOrder)
                   <option value="{{ $nameOrder }}" {{ (auth()->user()->name_order == $nameOrder) ? 'selected':'' }}>{{ trans('settings.name_order_'.$nameOrder) }}</option>
                   @endforeach
                 </select>
               </div>
 
-              {{-- Timezone --}}
-              <div class="form-group">
-                <label for="timezone">{{ trans('settings.timezone') }}</label>
-                <select name="timezone" id="timezone" class="form-control">
-                  @foreach ($timezones as $timezone)
-                  <option value="{{ $timezone['timezone'] }}" {{ $selectedTimezone == $timezone['timezone'] ? 'selected="selected"' : '' }}>{{ $timezone['name'] }}</option>
-                  @endforeach
-                </select>
-              </div>
-
               {{-- Layout --}}
               <div class="form-group">
                 <label for="layout">{{ trans('settings.layout') }}</label>
@@ -108,14 +98,14 @@
                 </select>
               </div>
 
-              {{-- Layout --}}
+              {{-- Reminder --}}
               <div class="form-group">
-                <form-select
-                  :value="'{{ auth()->user()->account->default_time_reminder_is_sent }}'"
-                  :options="{{ $hours }}"
-                  v-bind:id="'reminder_time'"
-                  v-bind:title="'{{ trans('settings.reminder_time_to_send') }}'">
-                </form-select>
+                <reminder-time
+                :reminder="'{{ auth()->user()->account->default_time_reminder_is_sent }}'"
+                :timezone="'{{ $selectedTimezone }}'"
+                :timezones="{{ json_encode($timezones) }}"
+                :hours="{{ json_encode($hours) }}">
+                </reminder-time>
               </div>
 
               <button type="submit" class="btn btn-primary">{{ trans('settings.save') }}</button>

diff --git a/yarn.lock b/yarn.lock
@@ -5346,6 +5346,16 @@ mocha@^5.2.0:
     mkdirp "0.5.1"
     supports-color "5.4.0"
 
+moment-timezone@^0.5.21:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.21.tgz#3cba247d84492174dbf71de2a9848fa13207b845"
+  dependencies:
+    moment ">= 2.9.0"
+
+"moment@>= 2.9.0":
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+
 moment@^2.22.1:
   version "2.22.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.1.tgz#529a2e9bf973f259c9643d237fda84de3a26e8ad"