customize date formats

README.md

@@ -8,7 +8,7 @@
   </a> -->
 
   <h1 align="center" style="margin-bottom:0">Hammond</h1>
-  <p align="center">Current Version - 2021.06.27</p>
+  <p align="center">Current Version - 2021.07.14</p>
 
   <p align="center">
     A self-hosted vehicle expense tracking system with support for multiple users.

server/controllers/masters.go

@@ -51,7 +51,7 @@ func udpateSettings(c *gin.Context) {
 func udpateMySettings(c *gin.Context) {
 	var model models.UpdateSettingModel
 	if err := c.ShouldBind(&model); err == nil {
-		err := service.UpdateUserSettings(c.MustGet("userId").(string), model.Currency, *model.DistanceUnit)
+		err := service.UpdateUserSettings(c.MustGet("userId").(string), model.Currency, *model.DistanceUnit, model.DateFormat)
 		if err != nil {
 			c.JSON(http.StatusUnprocessableEntity, common.NewError("udpateMySettings", err))
 			return

server/db/clarkson.go

@@ -138,6 +138,7 @@ func MigrateClarkson(connectionString string) (bool, error) {
 			DistanceUnit: distanceUnitMap[v.DistanceUnit],
 			Role:         role,
 			Name:         v.Username,
+			DateFormat:   "MM/dd/yyyy",
 		}
 		user.SetPassword("hammond")
 		err = CreateUser(&user)

server/db/dbModels.go

@@ -14,6 +14,7 @@ type User struct {
 	Password     string       `json:"-"`
 	Currency     string       `json:"currency"`
 	DistanceUnit DistanceUnit `json:"distanceUnit"`
+	DateFormat   string       `json:"dateFormat"`
 	Role         Role         `json:"role"`
 	Name         string       `json:"name"`
 	Vehicles     []Vehicle    `gorm:"many2many:user_vehicles;" json:"vehicles"`

server/models/misc.go

@@ -4,6 +4,7 @@ import "github.com/akhilrex/hammond/db"
 
 type UpdateSettingModel struct {
 	Currency     string           `json:"currency" form:"currency" query:"currency"`
+	DateFormat   string           `json:"dateFormat" form:"dateFormat" query:"dateFormat"`
 	DistanceUnit *db.DistanceUnit `json:"distanceUnit" form:"distanceUnit" query:"distanceUnit" `
 }
 

server/service/miscService.go

@@ -14,7 +14,7 @@ func UpdateSettings(currency string, distanceUnit db.DistanceUnit) error {
 	setting.DistanceUnit = distanceUnit
 	return db.UpdateSettings(setting)
 }
-func UpdateUserSettings(userId, currency string, distanceUnit db.DistanceUnit) error {
+func UpdateUserSettings(userId, currency string, distanceUnit db.DistanceUnit, dateFormat string) error {
 	user, err := db.GetUserById(userId)
 	if err != nil {
 		return err
@@ -22,6 +22,7 @@ func UpdateUserSettings(userId, currency string, distanceUnit db.DistanceUnit) e
 
 	user.Currency = currency
 	user.DistanceUnit = distanceUnit
+	user.DateFormat = dateFormat
 	return db.UpdateUser(user)
 }
 

server/service/userService.go

@@ -13,6 +13,7 @@ func CreateUser(userModel *models.RegisterRequest, role db.Role) error {
 		Role:         role,
 		Currency:     setting.Currency,
 		DistanceUnit: setting.DistanceUnit,
+		DateFormat:   "MM/dd/yyyy",
 	}
 
 	toCreate.SetPassword(userModel.Password)

ui/src/router/views/createExpense.vue

@@ -4,6 +4,7 @@ import QuickEntryDisplay from '@components/quickEntryDisplay.vue'
 import { mapState } from 'vuex'
 import axios from 'axios'
 import store from '@state/store'
+import { format } from 'date-fns'
 
 export default {
   page: {
@@ -61,6 +62,10 @@ export default {
     }
   },
   methods: {
+    formatDate(date) {
+      const finalFormat = this.me.dateFormat ? this.me.dateFormat : 'MM/dd/yyyy'
+      return format(date, finalFormat)
+    },
     getEmptyExpense() {
       return {
         vehicleId: this.selectedVehicle.id,
@@ -172,7 +177,14 @@ export default {
         </b-select>
       </b-field>
       <b-field label="Expense Date">
-        <b-datepicker v-model="expenseModel.date" placeholder="Click to select..." icon="calendar" :max-date="new Date()"> </b-datepicker>
+        <b-datepicker
+          v-model="expenseModel.date"
+          :date-formatter="formatDate"
+          placeholder="Click to select..."
+          icon="calendar"
+          :max-date="new Date()"
+        >
+        </b-datepicker>
       </b-field>
       <b-field label="Expense Type*">
         <b-input v-model="expenseModel.expenseType" expanded required></b-input>

ui/src/router/views/createFillup.vue

@@ -6,6 +6,7 @@ import store from '@state/store'
 import { mapState } from 'vuex'
 import axios from 'axios'
 import { round } from 'lodash'
+import { format } from 'date-fns'
 
 export default {
   page: {
@@ -69,6 +70,10 @@ export default {
     }
   },
   methods: {
+    formatDate(date) {
+      const finalFormat = this.me.dateFormat ? this.me.dateFormat : 'MM/dd/yyyy'
+      return format(date, finalFormat)
+    },
     fetchVehicleUsers() {
       store
         .dispatch('vehicles/fetchUsersByVehicleId', { vehicleId: this.selectedVehicle.id })
@@ -186,7 +191,15 @@ export default {
         </b-select>
       </b-field>
       <b-field label="Fillup Date">
-        <b-datepicker v-model="fillupModel.date" placeholder="Click to select..." icon="calendar" trap-focus :max-date="new Date()"> </b-datepicker>
+        <b-datepicker
+          v-model="fillupModel.date"
+          :date-formatter="formatDate"
+          placeholder="Click to select..."
+          icon="calendar"
+          trap-focus
+          :max-date="new Date()"
+        >
+        </b-datepicker>
       </b-field>
       <b-field label="Quantity*" addons>
         <b-input v-model.number="fillupModel.fuelQuantity" type="number" step=".001" min="0" expanded required></b-input>

ui/src/router/views/settings.vue

@@ -24,6 +24,7 @@ export default {
       settingsModel: {
         currency: this.me.currency,
         distanceUnit: this.me.distanceUnit,
+        dateFormat: this.me.dateFormat,
       },
       tryingToSave: false,
       changePassModel: {
@@ -31,6 +32,7 @@ export default {
         new: '',
         renew: '',
       },
+      dateFormatMasters: ['dd/MM/yyyy', 'MM/dd/yyyy', 'yyyy/MM/dd'],
     }
   },
   computed: {
@@ -69,9 +71,9 @@ export default {
             .catch((err) => console.log('error:', err))
         })
         .catch((ex) => {
-          let errorMessage= ex.message;
+          let errorMessage = ex.message
-          if(ex.response && ex.response.data?.errors?.changePassword){
+          if (ex.response && ex.response.data?.errors?.changePassword) {
-            errorMessage=ex.response.data?.errors?.changePassword
+            errorMessage = ex.response.data?.errors?.changePassword
           }
           this.$buefy.toast.open({
             duration: 5000,
@@ -134,6 +136,13 @@ export default {
               </option>
             </b-select>
           </b-field>
+          <b-field label="Date Format">
+            <b-select v-model.number="settingsModel.dateFormat" placeholder="Date Format" required expanded>
+              <option v-for="option in dateFormatMasters" :key="option" :value="option">
+                {{ `${option}` }}
+              </option>
+            </b-select>
+          </b-field>
           <br />
           <b-field>
             <b-button tag="input" native-type="submit" :disabled="tryingToSave" type="is-primary" value="Save" expanded> </b-button>
@@ -172,7 +181,7 @@ export default {
         <table class="table is-hoverable">
           <tr>
             <td>Current Version</td>
-            <td>2021.06.27</td>
+            <td>2021.07.14</td>
           </tr>
           <tr>
             <td>Website</td>
@@ -202,7 +211,7 @@ export default {
           </tr>
           <tr>
             <td>Support the developer</td>
-            <td><a href="https://www.buymeacoffee.com/akhilrex" target="_blank" rel="noopener noreferrer">Support here</a></td>
+            <td><a href="https://www.buymeacoffee.com/akhilrex" target="_blank" rel="noopener noreferrer">Buy him a beer!</a></td>
           </tr>
         </table>
       </div>