Implement option to change the first day of week in user settings

Implements #2535.

client/components/main/popup.styl

@@ -135,6 +135,10 @@ $popupWidth = 300px
   margin-bottom: 8px
 
 .pop-over-list
+  li
+    display: block
+    clear: both
+
   li > a
     clear: both
     cursor: pointer

client/components/users/userHeader.jade

@@ -117,6 +117,17 @@ template(name="changeSettingsPopup")
           | {{_ 'show-cards-minimum-count'}}
         input#show-cards-count-at.inline-input.left(type="number" value="#{showCardsCountAt}" min="0" max="99" onkeydown="return false")
         input.js-apply-show-cards-at.left(type="submit" value="{{_ 'apply'}}")
+      li
+        label.bold
+          i.fa.fa-calendar
+          | {{_ 'start-day-of-week'}}
+        select#start-day-of-week.inline-input.left
+          each day in weekDays startDayOfWeek
+            if day.isSelected
+              option(selected="true", value="#{day.value}") #{day.name}
+            else
+              option(value="#{day.value}") #{day.name}
+        input.js-apply-start-day-of-week.left(type="submit" value="{{_ 'apply'}}")
 
 template(name="userDeletePopup")
   unless currentUser.isWorker

client/components/users/userHeader.js

@@ -224,6 +224,27 @@ Template.changeSettingsPopup.helpers({
       return cookies.get('limitToShowCardsCount');
     }
   },
+  weekDays(startDay) {
+    return [
+      TAPi18n.__('sunday'),
+      TAPi18n.__('monday'),
+      TAPi18n.__('tuesday'),
+      TAPi18n.__('wednesday'),
+      TAPi18n.__('thursday'),
+      TAPi18n.__('friday'),
+      TAPi18n.__('saturday'),
+    ].map(function(day, index) {
+      return { name: day, value: index, isSelected: index === startDay };
+    });
+  },
+  startDayOfWeek() {
+    currentUser = Meteor.user();
+    if (currentUser) {
+      return currentUser.getStartDayOfWeek();
+    } else {
+      return cookies.get('startDayOfWeek');
+    }
+  },
 });
 
 Template.changeSettingsPopup.events({
@@ -263,4 +284,20 @@ Template.changeSettingsPopup.events({
       Popup.back();
     }
   },
+  'click .js-apply-start-day-of-week'(event, templateInstance) {
+    event.preventDefault();
+    const startDay = parseInt(
+      templateInstance.$('#start-day-of-week').val(),
+      10,
+    );
+    if (!isNaN(startDay)) {
+      currentUser = Meteor.user();
+      if (currentUser) {
+        Meteor.call('changeStartDayOfWeek', startDay);
+      } else {
+        cookies.set('startDayOfWeek', startDay);
+      }
+      Popup.back();
+    }
+  },
 });

client/lib/datepicker.js

@@ -10,13 +10,22 @@ DatePicker = BlazeComponent.extendComponent({
     this.defaultTime = defaultTime;
   },
 
+  startDayOfWeek() {
+    const currentUser = Meteor.user();
+    if (currentUser) {
+      return currentUser.getStartDayOfWeek();
+    } else {
+      return 1;
+    }
+  },
+
   onRendered() {
     const $picker = this.$('.js-datepicker')
       .datepicker({
         todayHighlight: true,
         todayBtn: 'linked',
         language: TAPi18n.getLanguage(),
-        weekStart: 1,
+        weekStart: this.startDayOfWeek(),
       })
       .on(
         'changeDate',

i18n/en.i18n.json

@@ -777,5 +777,13 @@
   "mark-all-as-read": "Mark all as read",
   "remove-all-read": "Remove all read",
   "allow-rename": "Allow Rename",
-  "allowRenamePopup-title": "Allow Rename"
+  "allowRenamePopup-title": "Allow Rename",
+  "start-day-of-week": "Set day of the week start",
+  "monday": "Monday",
+  "tuesday": "Tuesday",
+  "wednesday": "Wednesday",
+  "thursday": "Thursday",
+  "friday": "Friday",
+  "saturday": "Saturday",
+  "sunday": "Sunday"
 }

models/users.js

@@ -190,6 +190,13 @@ Users.attachSchema(
       type: Number,
       optional: true,
     },
+    'profile.startDayOfWeek': {
+      /**
+       * startDayOfWeek field of the user
+       */
+      type: Number,
+      optional: true,
+    },
     'profile.starredBoards': {
       /**
        * list of starred board IDs
@@ -521,6 +528,11 @@ Users.helpers({
     return profile.language || 'en';
   },
 
+  getStartDayOfWeek() {
+    const profile = this.profile || {};
+    return profile.startDayOfWeek || 1;
+  },
+
   getTemplatesBoardId() {
     return (this.profile || {}).templatesBoardId;
   },
@@ -652,6 +664,10 @@ Users.mutations({
     return { $set: { 'profile.showCardsCountAt': limit } };
   },
 
+  setStartDayOfWeek(startDay) {
+    return { $set: { 'profile.startDayOfWeek': startDay } };
+  },
+
   setBoardView(view) {
     return {
       $set: {
@@ -682,6 +698,10 @@ Meteor.methods({
     check(limit, Number);
     Meteor.user().setShowCardsCountAt(limit);
   },
+  changeStartDayOfWeek(startDay) {
+    check(startDay, Number);
+    Meteor.user().setStartDayOfWeek(startDay);
+  },
 });
 
 if (Meteor.isServer) {

public/api/wekan.yml

@@ -2544,6 +2544,10 @@ definitions:
         description: |
            showCardCountAt field of the user
         type: number
+      startDayOfWeek:
+        description: |
+           startDayOfWeek field of the user
+        type: number
       starredBoards:
         description: |
            list of starred board IDs