added ui-calendar

2020-11-16 02:43:06 +05:30 · 2020-11-16 02:43:06 +05:30 · fd0b8ac4c0
parent 01c9c32162
commit fd0b8ac4c0
12 changed files with 158 additions and 45 deletions
--- a/README.md
+++ b/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.
--- a/app/app.scss
+++ b/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
--- a/app/components/App.vue
+++ b/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",
-          component: "Try later",
+          title: "Try Later",
+          component: "Try Later",
          icon: "trylater",
        },
      ],
@ -182,6 +200,7 @@ export default {
      ],
      editCategory: false,
      appTheme: "Light",
+      mealPlanner: MealPlanner,
    }
  },
  computed: {
@ -216,7 +235,7 @@ export default {
        // window.setNavigationBarColor(new Color("#e0e0e0").android)
      }
    },
-    
+
    // HELPERS
    toggleCatEdit() {
      this.editCategory = !this.editCategory
@ -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()
--- a/app/components/EditRecipe.vue
+++ b/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)"
-                @tap="showUnits($event, false)"
+                @focus="modalOpen === false && showUnits($event, true, index)"
+                @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
+              )
+            }
+          }
        }
      })
    },
--- a/app/components/EnRecipes.vue
+++ b/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")
--- a/app/components/MealPlanner.vue
+++ b/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>
--- a/app/components/Settings.vue
+++ b/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(
-        android.os.Environment.DIRECTORY_DOWNLOADS
-      ).toString()
+      const sdDownloadPath = Folder.fromPath(
+        android.os.Environment.getExternalStorageDirectory().getAbsolutePath()
+      ).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")
--- a/app/components/ViewRecipe.vue
+++ b/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
-                    variant="text"
-                    automationText="openURL"
-                    col="1"
-                    class="bx"
-                    :text="icon.source"
-                    @tap="openURL(reference)"
-                  />
+                  <Label col="1" class="bx linkIcon" :text="icon.source" />
                </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 to Try later").show()
+          ? Toast.makeText("Added back 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) => {
-        Toast.makeText("URL Copied").show()
-      })
+      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() {
--- a/app/main.js
+++ b/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
--- a/app/store.js
+++ b/app/store.js
@ -183,6 +183,7 @@ export default new Vuex.Store({
      export: "\ued07",
      import: "\ued0c",
      outline: "\ueb07",
+      calendar: "\uec55",
    },
    currentComponent: "EnRecipes",
  },
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",