added ui-calendar

README.md

@@ -25,7 +25,7 @@ EnRecipes is an easy to use, privacy-friendly digital cookbook that lets you cre
 - Add photo, notes and references to your recipes
 - Organise your recipes by category
 - Search for your recipes based on the title
-- Mark recipes as favorites and add them to your Try later list
+- Mark recipes as favorites and add them to your Try Later list
 - Scale your recipe ingredients to serve more or less people
 - Get notified of the last time you tried a recipe
 - Share your recipe to anyone by any means as a nicely formatted message. You can share the recipe photo too.

app/app.scss

@@ -61,7 +61,8 @@ Page,
   .referenceItem,
   .recipeText,
   .overviewItem,
-  .recipeItem {
+  .recipeItem,
+  TextField.combinationToken {
     background: white;
   }
 
@@ -124,7 +125,8 @@ Page,
   .referenceItem,
   .recipeText,
   .overviewItem,
-  .recipeItem {
+  .recipeItem,
+  TextField.combinationToken {
     background: $gray8;
   }
   .sd-item,
@@ -483,6 +485,9 @@ RadListView {
       margin: 0;
       line-height: 6;
     }
+    .linkIcon {
+      padding: 0 16 0 0;
+    }
   }
   .recipeText {
     font-size: 16;
@@ -526,7 +531,6 @@ MDButton.closeBtn {
 }
 TextField.combinationToken {
   border-width: 0;
-  background: white;
 }
 // -----------------------------
 // DIALOGS

app/components/App.vue

@@ -32,7 +32,24 @@
             <Label col="0" row="0" class="bx" :text="icon[item.icon]" />
             <Label col="2" row="0" :text="item.title" />
           </GridLayout>
-          <StackLayout class="hr m-10"></StackLayout>
+          <StackLayout class="hr m-8"></StackLayout>
+          <GridLayout
+            rows="48"
+            columns="auto, 24, *"
+            class="sd-item orkm"
+            :class="{
+              'selected-sd-item': currentComponent === 'MealPlanner',
+            }"
+          >
+            <MDRipple
+              row="0"
+              colSpan="3"
+              @tap="navigateTo(mealPlanner, true, false)"
+            />
+            <Label col="0" row="0" class="bx" :text="icon.calendar" />
+            <Label col="2" row="0" text="Meal Planner" />
+          </GridLayout>
+          <StackLayout class="hr m-8"></StackLayout>
           <GridLayout
             class="sd-group-header orkm"
             rows="auto"
@@ -137,6 +154,7 @@ import * as application from "tns-core-modules/application"
 import { mapActions, mapState } from "vuex"
 
 import EnRecipes from "./EnRecipes.vue"
+import MealPlanner from "./MealPlanner.vue"
 import Settings from "./Settings.vue"
 import About from "./About.vue"
 
@@ -163,8 +181,8 @@ export default {
           icon: "heart",
         },
         {
-          title: "Try later",
+          title: "Try Later",
-          component: "Try later",
+          component: "Try Later",
           icon: "trylater",
         },
       ],
@@ -182,6 +200,7 @@ export default {
       ],
       editCategory: false,
       appTheme: "Light",
+      mealPlanner: MealPlanner,
     }
   },
   computed: {
@@ -313,7 +332,7 @@ export default {
         vm.filterFavorites
           ? vm.setComponent("Favorites")
           : vm.filterTrylater
-          ? vm.setComponent("Try later")
+          ? vm.setComponent("Try Later")
           : vm.selectedCategory
           ? vm.setComponent(vm.selectedCategory)
           : vm.setComponent("EnRecipes")
@@ -323,7 +342,7 @@ export default {
         this.closeDrawer()
         this.editCategory = false
       } else if (
-        ["Favorites", "Try later", this.selectedCategory].includes(
+        ["Favorites", "Try Later", this.selectedCategory].includes(
           this.currentComponent
         )
       ) {
@@ -355,7 +374,7 @@ export default {
         this.setComponent(to)
         this.$navigateBack({ frame: "main-frame", backstackVisible: false })
         this.filterFavorites = to === "Favorites" ? true : false
-        this.filterTrylater = to === "Try later" ? true : false
+        this.filterTrylater = to === "Try Later" ? true : false
         this.selectedCategory = isCategory ? to : null
         this.$refs.enrecipes.updateFilter()
         this.closeDrawer()

app/components/EditRecipe.vue

@@ -126,6 +126,7 @@
               :key="index"
             >
               <TextField
+                ref="ingredient"
                 @loaded="focusField($event, 'sentence')"
                 col="0"
                 v-model="recipeContent.ingredients[index].item"
@@ -146,8 +147,8 @@
                 v-model="recipeContent.ingredients[index].unit"
                 hint="Unit"
                 editable="false"
-                @focus="modalOpen === false && showUnits($event, true)"
+                @focus="modalOpen === false && showUnits($event, true, index)"
-                @tap="showUnits($event, false)"
+                @tap="showUnits($event, false, index)"
               />
               <MDButton
                 variant="text"
@@ -404,7 +405,7 @@ export default {
       if (type) this.setInputTypeText(args, type)
       if (!args.object.text) {
         args.object.focus()
-        setTimeout((e) => Utils.ad.showSoftInput(args.object.android), 1)
+        setTimeout((e) => Utils.ad.showSoftInput(args.object.android), 10)
       }
     },
     setInputTypeText(args, type) {
@@ -549,7 +550,7 @@ export default {
         }
       })
     },
-    showUnits(e, focus) {
+    showUnits(e, focus, index) {
       this.modalOpen = true
       this.releaseBackEvent()
       this.$showModal(ActionDialog, {
@@ -562,7 +563,20 @@ export default {
         if (action) {
           e.object.text = action
           this.modalOpen = false
-          if (focus) this.addIngredient()
+          if (focus) {
+            if (this.recipeContent.ingredients.length - 1 === index) {
+              this.addIngredient()
+            } else {
+              this.$refs.ingredient[index + 1].nativeView.focus()
+              setTimeout(
+                (e) =>
+                  Utils.ad.showSoftInput(
+                    this.$refs.ingredient[index + 1].nativeView.android
+                  ),
+                10
+              )
+            }
+          }
         }
       })
     },

app/components/EnRecipes.vue

@@ -293,7 +293,7 @@ export default {
       this.filterFavorites
         ? this.setComponent("Favorites")
         : this.filterTrylater
-        ? this.setComponent("Try later")
+        ? this.setComponent("Try Later")
         : this.selectedCategory
         ? this.setComponent(this.selectedCategory)
         : this.setComponent("EnRecipes")

app/components/MealPlanner.vue

@@ -0,0 +1,68 @@
+<template>
+  <Page @loaded="onPageLoad">
+    <ActionBar :flat="viewIsScrolled ? false : true">
+      <GridLayout rows="*" columns="auto, *">
+        <MDButton
+          class="bx left"
+          variant="text"
+          :text="icon.menu"
+          automationText="Back"
+          @tap="showDrawer"
+          col="0"
+        />
+        <Label class="title orkm" text="Meal Planner" col="1" />
+      </GridLayout>
+    </ActionBar>
+    <GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer">
+      <StackLayout row="1" class="emptyState">
+        <Label class="title orkm" text="Coming soon!" textWrap="true" />
+      </StackLayout>
+    </GridLayout>
+
+    <!-- <RadCalendar
+      :viewMode="viewMode"
+      :transitionMode="transitionMode"
+    ></RadCalendar> -->
+  </Page>
+</template>
+
+<script>
+import { ApplicationSettings } from "@nativescript/core"
+import {
+  CalendarViewMode,
+  CalendarTransitionMode,
+  CalendarEvent,
+} from "nativescript-ui-calendar"
+import { mapState, mapActions } from "vuex"
+export default {
+  props: ["showDrawer", "releaseGlobalBackEvent"],
+  data() {
+    return {
+      viewIsScrolled: false,
+      appTheme: "Light",
+      viewMode: CalendarViewMode.Day,
+      transitionMode: CalendarTransitionMode.Slide,
+    }
+  },
+  computed: {
+    ...mapState(["icon", "recipes"]),
+  },
+  methods: {
+    ...mapActions(["setCurrentComponentAction"]),
+    onPageLoad() {
+      this.setCurrentComponentAction("MealPlanner")
+      this.releaseGlobalBackEvent()
+    },
+
+    // HELPERS
+    onScroll(args) {
+      args.scrollY
+        ? (this.viewIsScrolled = true)
+        : (this.viewIsScrolled = false)
+    },
+  },
+  created() {
+    this.appTheme = ApplicationSettings.getString("appTheme", "Light")
+  },
+}
+</script>

app/components/Settings.vue

@@ -32,6 +32,7 @@
         <StackLayout class="hr m-10"></StackLayout>
         <Label text="Database" class="group-header orkm" />
         <GridLayout columns="auto, *" class="option">
+          <!-- <MDRipple colSpan="2" @tap="folderPicker" /> -->
           <MDRipple colSpan="2" @tap="exportCheck" />
           <Label col="0" class="bx" :text="icon.export" />
           <StackLayout col="1">
@@ -62,7 +63,7 @@
           <StackLayout col="1">
             <Label text="Import from backup" />
             <Label
-              text="Supports full backups exported by this app."
+              text="Supports full backups exported by this app"
               class="info"
               textWrap="true"
             />
@@ -82,6 +83,7 @@ import {
   Application,
   File,
   Folder,
+  AndroidApplication,
 } from "@nativescript/core"
 import * as Permissions from "@nativescript-community/perms"
 import { Zip } from "@nativescript/zip"
@@ -97,7 +99,6 @@ export default {
   props: [
     "showDrawer",
     "restartApp",
-    "hijackGlobalBackEvent",
     "releaseGlobalBackEvent",
     "openAppSettingsPage",
   ],
@@ -194,9 +195,9 @@ export default {
         ("0" + date.getHours()).slice(-2) +
         ("0" + date.getMinutes()).slice(-2) +
         ("0" + date.getSeconds()).slice(-2)
-      const sdDownloadPath = android.os.Environment.getExternalStoragePublicDirectory(
+      const sdDownloadPath = Folder.fromPath(
-        android.os.Environment.DIRECTORY_DOWNLOADS
+        android.os.Environment.getExternalStorageDirectory().getAbsolutePath()
-      ).toString()
+      ).getFolder("Download").path
       let fromPath = path.join(knownFolders.documents().path, "EnRecipes")
       let destPath = path.join(
         sdDownloadPath,
@@ -216,7 +217,7 @@ export default {
         },
       }).then((success) => {
         Toast.makeText(
-          "Backup file successfully saved to Downloads",
+          "Backup file successfully saved to Download folder",
           "long"
         ).show()
         this.exportFiles("delete")

app/components/ViewRecipe.vue

@@ -413,7 +413,11 @@
                   class="referenceItem"
                   androidElevation="1"
                 >
-                  <MDRipple colSpan="3" @tap="copyURL(reference)" />
+                  <MDRipple
+                    colSpan="2"
+                    @longPress="copyURL(reference)"
+                    @tap="openURL(reference)"
+                  />
                   <Label
                     col="0"
                     verticalAlignment="center"
@@ -421,14 +425,7 @@
                     :text="reference"
                     textWrap="false"
                   />
-                  <MDButton
+                  <Label col="1" class="bx linkIcon" :text="icon.source" />
-                    variant="text"
-                    automationText="openURL"
-                    col="1"
-                    class="bx"
-                    :text="icon.source"
-                    @tap="openURL(reference)"
-                  />
                 </GridLayout>
                 <Label
                   v-else
@@ -516,7 +513,6 @@ import {
 import { Feedback, FeedbackType, FeedbackPosition } from "nativescript-feedback"
 import * as Toast from "nativescript-toast"
 import * as SocialShare from "@nativescript/social-share"
-import { setText } from "nativescript-clipboard"
 import { Application } from "@nativescript/core"
 import { mapActions, mapState } from "vuex"
 
@@ -777,11 +773,11 @@ export default {
     toggleTrylater() {
       this.recipe.tried
         ? this.filterTrylater
-          ? Toast.makeText("Added back to Try later").show()
+          ? Toast.makeText("Added back to Try Later").show()
-          : Toast.makeText("Added to Try later").show()
+          : Toast.makeText("Added to Try Later").show()
         : this.filterTrylater
         ? Toast.makeText("You tried this recipe").show()
-        : Toast.makeText("Removed from Try later").show()
+        : Toast.makeText("Removed from Try Later").show()
       this.toggle("tried")
     },
     recipeTried() {
@@ -794,9 +790,12 @@ export default {
       Utils.openUrl(url)
     },
     copyURL(url) {
-      setText(url).then((e) => {
+      const clipboard = Utils.ad
+        .getApplicationContext()
+        .getSystemService(android.content.Context.CLIPBOARD_SERVICE)
+      const clip = android.content.ClipData.newPlainText("Reference URl", url)
+      clipboard.setPrimaryClip(clip)
       Toast.makeText("URL Copied").show()
-      })
     },
   },
   created() {

app/main.js

@@ -20,6 +20,9 @@ Vue.use(FloatingActionButtonPlugin)
 import ProgressPlugin from "@nativescript-community/ui-material-progress/vue"
 Vue.use(ProgressPlugin)
 
+import CalendarView from "nativescript-ui-calendar/vue"
+Vue.use(CalendarView)
+
 Vue.registerElement(
   "RadSideDrawer",
   () => require("nativescript-ui-sidedrawer").RadSideDrawer

app/store.js

@@ -183,6 +183,7 @@ export default new Vuex.Store({
       export: "\ued07",
       import: "\ued0c",
       outline: "\ueb07",
+      calendar: "\uec55",
     },
     currentComponent: "EnRecipes",
   },

package-lock.json

@@ -5843,11 +5843,6 @@
         "to-regex": "^3.0.1"
       }
     },
-    "nativescript-clipboard": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/nativescript-clipboard/-/nativescript-clipboard-2.0.0.tgz",
-      "integrity": "sha512-w7qRJiWiBeq55f3IW+pAkbrl+v+yqZf3bhcl1wH6Qm1JqZLWDv7HemzHTM5CvaqQ4gfz5dnGhJW1q1fsr5KSOw=="
-    },
     "nativescript-couchbase-plugin": {
       "version": "0.9.6",
       "resolved": "https://registry.npmjs.org/nativescript-couchbase-plugin/-/nativescript-couchbase-plugin-0.9.6.tgz",
@@ -5898,6 +5893,15 @@
       "resolved": "https://registry.npmjs.org/nativescript-toast/-/nativescript-toast-2.0.0.tgz",
       "integrity": "sha512-xqyNfFS894oGfrEVO7CjpioAQLiLNNcd77Euq9XIUTf1U3W0PsIgAJbLP7+kkVGIJxdLtlBkbcQ4wDmf2DCi1w=="
     },
+    "nativescript-ui-calendar": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/nativescript-ui-calendar/-/nativescript-ui-calendar-7.0.2.tgz",
+      "integrity": "sha512-yzSZPLFsboYj73BnVG0IYsiKHpPtmL/35QcXd7hC7kWdfjoaiE1eZgtqIRiTsNJaGAp9MeSrBdvuOCe7hI9rEA==",
+      "requires": {
+        "nativescript-ui-core": "~4.0.0",
+        "ts-node": "^8.10.2"
+      }
+    },
     "nativescript-ui-core": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/nativescript-ui-core/-/nativescript-ui-core-4.0.0.tgz",

package.json

@@ -19,12 +19,12 @@
     "@nativescript/theme": "^3.0.0",
     "@nativescript/zip": "^5.0.0",
     "@nstudio/nativescript-checkbox": "^2.0.4",
-    "nativescript-clipboard": "^2.0.0",
     "nativescript-couchbase-plugin": "^0.9.6",
     "nativescript-feedback": "^2.0.0",
     "nativescript-imagecropper": "^4.0.1",
     "nativescript-plugin-filepicker": "^1.0.0",
     "nativescript-toast": "^2.0.0",
+    "nativescript-ui-calendar": "^7.0.2",
     "nativescript-ui-listview": "^9.0.4",
     "nativescript-ui-sidedrawer": "^9.0.3",
     "nativescript-vue": "^2.6.1",