replace imagepicker with filepicker

.update_backup/package.json

@@ -1,46 +0,0 @@
-{
-  "name": "enrecipes",
-  "version": "1.0.0",
-  "description": "A native application built with NativeScript-Vue",
-  "author": "Vishnu Raghav <design@vishnuraghav.com>",
-  "license": "GPL",
-  "scripts": {
-    "run": "ns run android"
-  },
-  "dependencies": {
-    "@nativescript-community/perms": "^2.1.1",
-    "@nativescript-community/ui-material-activityindicator": "^5.0.30",
-    "@nativescript-community/ui-material-button": "^5.1.0",
-    "@nativescript-community/ui-material-floatingactionbutton": "^5.0.30",
-    "@nativescript-community/ui-material-progress": "^5.0.30",
-    "@nativescript-community/ui-material-ripple": "^5.0.30",
-    "@nativescript/core": "~7.0.0",
-    "@nativescript/imagepicker": "^1.0.0",
-    "@nativescript/social-share": "^2.0.1",
-    "@nativescript/theme": "^3.0.0",
-    "@nativescript/webpack": "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-listview": "^9.0.4",
-    "nativescript-ui-sidedrawer": "^9.0.3",
-    "nativescript-vue": "^2.6.1",
-    "vuex": "^3.3.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@nativescript/android": "7.0.1",
-    "@types/node": "^14.0.27",
-    "babel-loader": "^8.1.0",
-    "nativescript-vue-template-compiler": "^2.6.0",
-    "node-sass": "^4.13.1",
-    "vue-loader": "^15.9.1"
-  },
-  "main": "main"
-}

.update_backup/webpack.config.js

@@ -1,369 +0,0 @@
-const { join, relative, resolve, sep } = require("path");
-
-const webpack = require("webpack");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
-const TerserPlugin = require("terser-webpack-plugin");
-
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");
-
-const nsWebpack = require("@nativescript/webpack");
-const nativescriptTarget = require("@nativescript/webpack/nativescript-target");
-const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
-const hashSalt = Date.now().toString();
-
-module.exports = env => {
-    // Add your custom Activities, Services and other android app components here.
-    const appComponents = env.appComponents || [];
-    appComponents.push(...[
-        "@nativescript/core/ui/frame",
-        "@nativescript/core/ui/frame/activity",
-    ]);
-
-    const platform = env && (env.android && "android" || env.ios && "ios" || env.platform);
-    if (!platform) {
-        throw new Error("You need to provide a target platform!");
-    }
-
-    const platforms = ["ios", "android"];
-    const projectRoot = __dirname;
-
-    if (env.platform) {
-        platforms.push(env.platform);
-    }
-
-    // Default destination inside platforms/<platform>/...
-    const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
-
-    const {
-        // The 'appPath' and 'appResourcesPath' values are fetched from
-        // the nsconfig.json configuration file.
-        appPath = "app",
-        appResourcesPath = "app/App_Resources",
-
-        // You can provide the following flags when running 'tns run android|ios'
-        snapshot, // --env.snapshot
-        production, // --env.production
-        report, // --env.report
-        hmr, // --env.hmr
-        sourceMap, // --env.sourceMap
-        hiddenSourceMap, // --env.hiddenSourceMap
-        unitTesting, // --env.unitTesting
-        testing, // --env.testing
-        verbose, // --env.verbose
-        snapshotInDocker, // --env.snapshotInDocker
-        skipSnapshotTools, // --env.skipSnapshotTools
-        compileSnapshot // --env.compileSnapshot
-    } = env;
-
-    const useLibs = compileSnapshot;
-    const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
-    const externals = nsWebpack.getConvertedExternals(env.externals);
-
-    const mode = production ? "production" : "development"
-
-    const appFullPath = resolve(projectRoot, appPath);
-    const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
-    let coreModulesPackageName = "tns-core-modules";
-    const alias = env.alias || {};
-    alias['~/package.json'] = resolve(projectRoot, 'package.json');
-    alias['~'] = appFullPath;
-    alias['@'] = appFullPath;
-    alias['vue'] = 'nativescript-vue';
-
-    if (hasRootLevelScopedModules) {
-        coreModulesPackageName = "@nativescript/core";
-        alias["tns-core-modules"] = coreModulesPackageName;
-    }
-
-    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
-
-    const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] };
-
-    const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
-    const entryPath = `.${sep}${entryModule}`;
-    const entries = env.entries || {};
-    entries.bundle = entryPath;
-
-    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
-    if (platform === "ios" && !areCoreModulesExternal && !testing) {
-        entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
-    };
-    console.log(`Bundling application for entryPath ${entryPath}...`);
-
-    let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
-
-    const itemsToClean = [`${dist}/**/*`];
-    if (platform === "android") {
-        itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
-        itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
-    }
-
-    nsWebpack.processAppComponents(appComponents, platform);
-    const config = {
-        mode: mode,
-        context: appFullPath,
-        externals,
-        watchOptions: {
-            ignored: [
-                appResourcesFullPath,
-                // Don't watch hidden files
-                "**/.*",
-            ],
-        },
-        target: nativescriptTarget,
-        // target: nativeScriptVueTarget,
-        entry: entries,
-        output: {
-            pathinfo: false,
-            path: dist,
-            sourceMapFilename,
-            libraryTarget: "commonjs2",
-            filename: "[name].js",
-            globalObject: "global",
-            hashSalt
-        },
-        resolve: {
-            extensions: [".vue", ".ts", ".js", ".scss", ".css"],
-            // Resolve {N} system modules from @nativescript/core
-            modules: [
-                resolve(__dirname, `node_modules/${coreModulesPackageName}`),
-                resolve(__dirname, "node_modules"),
-                `node_modules/${coreModulesPackageName}`,
-                "node_modules",
-            ],
-            alias,
-            // resolve symlinks to symlinked modules
-            symlinks: true,
-        },
-        resolveLoader: {
-            // don't resolve symlinks to symlinked loaders
-            symlinks: false,
-        },
-        node: {
-            // Disable node shims that conflict with NativeScript
-            "http": false,
-            "timers": false,
-            "setImmediate": false,
-            "fs": "empty",
-            "__dirname": false,
-        },
-        devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
-        optimization: {
-            runtimeChunk: "single",
-            noEmitOnErrors: true,
-            splitChunks: {
-                cacheGroups: {
-                    vendor: {
-                        name: "vendor",
-                        chunks: "all",
-                        test: (module) => {
-                            const moduleName = module.nameForCondition ? module.nameForCondition() : '';
-                            return /[\\/]node_modules[\\/]/.test(moduleName) ||
-                                appComponents.some(comp => comp === moduleName);
-
-                        },
-                        enforce: true,
-                    },
-                },
-            },
-            minimize: Boolean(production),
-            minimizer: [
-                new TerserPlugin({
-                    parallel: true,
-                    cache: true,
-                    sourceMap: isAnySourceMapEnabled,
-                    terserOptions: {
-                        output: {
-                            comments: false,
-                            semicolons: !isAnySourceMapEnabled
-                        },
-                        compress: {
-                            // The Android SBG has problems parsing the output
-                            // when these options are enabled
-                            'collapse_vars': platform !== "android",
-                            sequences: platform !== "android",
-                        },
-                        keep_fnames: true,
-                    },
-                }),
-            ],
-        },
-        module: {
-            rules: [{
-                include: [join(appFullPath, entryPath + ".js"), join(appFullPath, entryPath + ".ts")],
-                use: [
-                    // Require all Android app components
-                    platform === "android" && {
-                        loader: "@nativescript/webpack/helpers/android-app-components-loader",
-                        options: { modules: appComponents },
-                    },
-
-                    {
-                        loader: "@nativescript/webpack/bundle-config-loader",
-                        options: {
-                            registerPages: true, // applicable only for non-angular apps
-                            loadCss: !snapshot, // load the application css if in debug mode
-                            unitTesting,
-                            appFullPath,
-                            projectRoot,
-                            ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
-                        },
-                    },
-                ].filter(loader => Boolean(loader)),
-            },
-            {
-                test: /[\/|\\]app\.css$/,
-                use: [
-                    '@nativescript/webpack/helpers/style-hot-loader',
-                    {
-                        loader: "@nativescript/webpack/helpers/css2json-loader",
-                        options: { useForImports: true }
-                    },
-                ],
-            },
-            {
-                test: /[\/|\\]app\.scss$/,
-                use: [
-                    '@nativescript/webpack/helpers/style-hot-loader',
-                    {
-                        loader: "@nativescript/webpack/helpers/css2json-loader",
-                        options: { useForImports: true }
-                    },
-                    'sass-loader',
-                ],
-            },
-            {
-                test: /\.css$/,
-                exclude: /[\/|\\]app\.css$/,
-                use: [
-                    '@nativescript/webpack/helpers/style-hot-loader',
-                    '@nativescript/webpack/helpers/apply-css-loader.js',
-                    { loader: "css-loader", options: { url: false } },
-                ],
-            },
-            {
-                test: /\.scss$/,
-                exclude: /[\/|\\]app\.scss$/,
-                use: [
-                    '@nativescript/webpack/helpers/style-hot-loader',
-                    '@nativescript/webpack/helpers/apply-css-loader.js',
-                    { loader: "css-loader", options: { url: false } },
-                    'sass-loader',
-                ],
-            },
-            {
-                test: /\.js$/,
-                loader: 'babel-loader',
-            },
-            {
-                test: /\.ts$/,
-                loader: 'ts-loader',
-                options: {
-                    appendTsSuffixTo: [/\.vue$/],
-                    allowTsInNodeModules: true,
-                    compilerOptions: {
-                        declaration: false
-                    },
-                    getCustomTransformers: (program) => ({
-                        before: [
-                            require("@nativescript/webpack/transformers/ns-transform-native-classes").default
-                        ]
-                    })
-                },
-            },
-            {
-                test: /\.vue$/,
-                loader: "vue-loader",
-                options: {
-                    compiler: NsVueTemplateCompiler,
-                },
-            },
-            ],
-        },
-        plugins: [
-            // ... Vue Loader plugin omitted
-            // make sure to include the plugin!
-            new VueLoaderPlugin(),
-            // Define useful constants like TNS_WEBPACK
-            new webpack.DefinePlugin({
-                "global.TNS_WEBPACK": "true",
-                "global.isAndroid": platform === 'android',
-                "global.isIOS": platform === 'ios',
-                "TNS_ENV": JSON.stringify(mode),
-                "process": "global.process"
-            }),
-            // Remove all files from the out dir.
-            new CleanWebpackPlugin({ 
-              cleanOnceBeforeBuildPatterns: itemsToClean,
-              verbose: !!verbose
-            }),
-            // Copy assets
-            new CopyWebpackPlugin({
-              patterns: [
-                { from: 'assets/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
-                { from: 'fonts/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
-                { from: '**/*.+(jpg|png)', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } }
-              ],
-            }),
-            new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
-            // For instructions on how to set up workers with webpack
-            // check out https://github.com/nativescript/worker-loader
-            new NativeScriptWorkerPlugin(),
-            new nsWebpack.PlatformFSPlugin({
-                platform,
-                platforms,
-            }),
-            // Does IPC communication with the {N} CLI to notify events when running in watch mode.
-            new nsWebpack.WatchStateLoggerPlugin()
-        ],
-    };
-
-    if (unitTesting) {
-        config.module.rules.push(
-            {
-                test: /-page\.js$/,
-                use: "@nativescript/webpack/helpers/script-hot-loader"
-            },
-            {
-                test: /\.(html|xml)$/,
-                use: "@nativescript/webpack/helpers/markup-hot-loader"
-            },
-
-            { test: /\.(html|xml)$/, use: "@nativescript/webpack/helpers/xml-namespace-loader" }
-        );
-    }
-
-    if (report) {
-        // Generate report files for bundles content
-        config.plugins.push(new BundleAnalyzerPlugin({
-            analyzerMode: "static",
-            openAnalyzer: false,
-            generateStatsFile: true,
-            reportFilename: resolve(projectRoot, "report", `report.html`),
-            statsFilename: resolve(projectRoot, "report", `stats.json`),
-        }));
-    }
-
-    if (snapshot) {
-        config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
-            chunk: "vendor",
-            requireModules: [
-                "@nativescript/core/bundle-entry-points",
-            ],
-            projectRoot,
-            webpackConfig: config,
-            snapshotInDocker,
-            skipSnapshotTools,
-            useLibs
-        }));
-    }
-
-    if (hmr) {
-        config.plugins.push(new webpack.HotModuleReplacementPlugin());
-    }
-
-    return config;
-};

app/App_Resources/Android/app.gradle

@@ -20,10 +20,10 @@ android {
     applicationId 'com.vishnuraghav.enrecipes'
     minSdkVersion 21
     generatedDensities = []
-    ndk {
+  //   ndk {
-      abiFilters.clear()
+  //     abiFilters.clear()
-      abiFilters.addAll(['arm64-v8a'])
+  //     abiFilters.addAll(['arm64-v8a'])
-  }
+  // }
   }
   aaptOptions {
     additionalParameters "--no-version-vectors"

app/app.scss

@@ -508,8 +508,9 @@ MDFloatingActionButton {
   min-width: 0;
 }
 MDButton.closeBtn {
-  padding: 4;
+  margin: 16 0 0;
-  margin-top: 16;
+  width: 32;
+  height: 32;
   min-width: 0;
   vertical-alignment: top;
 }

app/components/EditRecipe.vue

@@ -43,7 +43,6 @@
                 stretch="aspectFill"
                 decodeWidth="100%"
                 :decodeHeight="screenWidth"
-                loadMode="async"
               />
               <Label
                 v-else
@@ -70,8 +69,7 @@
               <TextField
                 hint="My Healthy Recipe"
                 v-model="recipeContent.title"
-                autocapitalizationType="words"
+                @loaded="setInputTypeText($event, 'words')"
-                autocorrect="true"
               />
               <Label top="0" class="fieldLabel" text="Title" />
             </AbsoluteLayout>
@@ -79,13 +77,15 @@
               <TextField
                 :text="recipeContent.category"
                 editable="false"
-                @tap="showCategories"
+                @focus="modalOpen === false && showCategories(true)"
+                @tap="showCategories(false)"
               />
               <Label top="0" class="fieldLabel" text="Category" />
             </AbsoluteLayout>
             <GridLayout columns="*, 8, *">
               <AbsoluteLayout class="inputField" col="0">
                 <TextField
+                  ref="yieldQuantity"
                   v-model="recipeContent.yield.quantity"
                   hint="1"
                   keyboardType="number"
@@ -96,7 +96,8 @@
                 <TextField
                   :text="recipeContent.yield.unit"
                   editable="false"
-                  @tap="showYieldUnits"
+                  @focus="modalOpen === false && showYieldUnits(true)"
+                  @tap="showYieldUnits(false)"
                 />
                 <Label top="0" class="fieldLabel" text="Yield measured in" />
               </AbsoluteLayout>
@@ -104,9 +105,11 @@
             <GridLayout columns="*, 8, *">
               <AbsoluteLayout class="inputField" col="0">
                 <TextField
+                  ref="timeRequired"
                   :text="timeRequired"
                   editable="false"
-                  @tap="setTimeRequired"
+                  @focus="modalOpen === false && setTimeRequired(true)"
+                  @tap="setTimeRequired(false)"
                 />
                 <Label top="0" class="fieldLabel" text="Time required" />
               </AbsoluteLayout>
@@ -123,12 +126,11 @@
               :key="index"
             >
               <TextField
-                @loaded="focusField"
+                @loaded="focusField($event, 'sentence')"
                 col="0"
                 v-model="recipeContent.ingredients[index].item"
                 :hint="`Item ${index + 1}`"
-                autocapitalizationType="words"
+                returnKeyType="next"
-                autocorrect="true"
               />
               <TextField
                 width="68"
@@ -136,6 +138,7 @@
                 v-model="recipeContent.ingredients[index].quantity"
                 hint="1.00"
                 keyboardType="number"
+                returnKeyType="next"
               />
               <TextField
                 width="68"
@@ -143,7 +146,8 @@
                 v-model="recipeContent.ingredients[index].unit"
                 hint="Unit"
                 editable="false"
-                @tap="showUnits($event)"
+                @focus="modalOpen === false && showUnits($event, true)"
+                @tap="showUnits($event, false)"
               />
               <MDButton
                 variant="text"
@@ -171,12 +175,10 @@
               :key="index"
             >
               <TextView
-                @loaded="focusField"
+                @loaded="focusField($event, 'multiLine')"
                 col="0"
                 :hint="`Step ${index + 1}`"
                 v-model="recipeContent.instructions[index]"
-                editable="true"
-                autocorrect="true"
               />
               <MDButton
                 variant="text"
@@ -190,7 +192,7 @@
               variant="text"
               class="text-btn orkm"
               text="+ ADD STEP"
-              @tap="addInstruction()"
+              @tap="addInstruction"
             />
             <StackLayout class="hr" margin="24 16"></StackLayout>
           </StackLayout>
@@ -203,12 +205,10 @@
               :key="index"
             >
               <TextView
-                @loaded="focusField"
+                @loaded="focusField($event, 'multiLine')"
                 col="0"
-                v-model="recipeContent.notes[index]"
                 :hint="`Note ${index + 1}`"
-                editable="true"
+                v-model="recipeContent.notes[index]"
-                autocorrect="true"
               />
               <MDButton
                 variant="text"
@@ -222,12 +222,12 @@
               variant="text"
               class="text-btn orkm"
               text="+ ADD NOTE"
-              @tap="addNote()"
+              @tap="addNote"
             />
             <StackLayout class="hr" margin="24 16"></StackLayout>
           </StackLayout>
 
-          <StackLayout margin="0 16">
+          <StackLayout margin="0 16 24">
             <Label text="References" class="sectionTitle" />
             <GridLayout
               columns="*,8,auto"
@@ -235,12 +235,10 @@
               :key="index"
             >
               <TextView
-                @loaded="focusField"
+                @loaded="focusField($event, 'multiLine')"
                 col="0"
                 v-model="recipeContent.references[index]"
                 hint="Text or Website/Video URL"
-                editable="true"
-                autocorrect="true"
               />
               <MDButton
                 variant="text"
@@ -254,9 +252,8 @@
               variant="text"
               class="text-btn orkm"
               text="+ ADD REFERENCE"
-              @tap="addReference()"
+              @tap="addReference"
             />
-            <StackLayout margin="32"></StackLayout>
           </StackLayout>
         </StackLayout>
       </ScrollView>
@@ -282,6 +279,7 @@ import {
 import * as Permissions from "@nativescript-community/perms"
 import * as Toast from "nativescript-toast"
 import * as ImagePicker from "@nativescript/imagepicker"
+import * as Filepicker from "nativescript-plugin-filepicker"
 import { ImageCropper } from "nativescript-imagecropper"
 import { mapState, mapActions } from "vuex"
 
@@ -323,6 +321,7 @@ export default {
       },
       tempRecipeContent: {},
       blockModal: false,
+      modalOpen: false,
       newRecipeID: null,
       showFab: false,
       imageLoading: false,
@@ -354,7 +353,7 @@ export default {
       let t = this.recipeContent.timeRequired.split(":")
       let h = parseInt(t[0])
       let m = parseInt(t[1])
-      return h ? (m ? `${h}h ${m}m` : `${h}h`) : `${m}m`
+      return h ? (m ? `${h} hr ${m} min` : `${h} hr`) : `${m} min`
     },
   },
   methods: {
@@ -370,12 +369,42 @@ export default {
     },
 
     // HELPERS
-    focusField(args) {
+    focusField(args, type) {
+      this.setInputTypeText(args, type)
       if (!args.object.text) {
         args.object.focus()
         setTimeout((e) => Utils.ad.showSoftInput(args.object.android), 1)
       }
     },
+    setInputTypeText(args, type) {
+      let field = args.object
+      switch (type) {
+        case "words":
+          field.android.setInputType(
+            android.text.InputType.TYPE_CLASS_TEXT |
+              android.text.InputType.TYPE_TEXT_FLAG_CAP_WORDS |
+              android.text.InputType.TYPE_TEXT_FLAG_AUTO_CORRECT
+          )
+          break
+        case "sentence":
+          field.android.setInputType(
+            android.text.InputType.TYPE_CLASS_TEXT |
+              android.text.InputType.TYPE_TEXT_FLAG_CAP_SENTENCES |
+              android.text.InputType.TYPE_TEXT_FLAG_AUTO_CORRECT
+          )
+          break
+        case "multiLine":
+          field.android.setInputType(
+            android.text.InputType.TYPE_CLASS_TEXT |
+              android.text.InputType.TYPE_TEXT_FLAG_MULTI_LINE |
+              android.text.InputType.TYPE_TEXT_FLAG_CAP_SENTENCES |
+              android.text.InputType.TYPE_TEXT_FLAG_AUTO_CORRECT
+          )
+          break
+        default:
+          break
+      }
+    },
     getRandomID() {
       let res = ""
       let chars = "abcdefghijklmnopqrstuvwxyz0123456789"
@@ -384,13 +413,14 @@ export default {
       }
       return res
     },
-    setTimeRequired() {
+    setTimeRequired(focus) {
+      this.modalOpen = true
       let time = this.recipeContent.timeRequired.split(":")
       let hr = time[0]
       let min = time[1]
       this.$showModal(ListPicker, {
         props: {
-          title: "Approx. time required",
+          title: "Time required",
           action: "SET",
           selectedHr: hr,
           selectedMin: min,
@@ -398,6 +428,8 @@ export default {
       }).then((result) => {
         if (result) {
           this.recipeContent.timeRequired = result
+          this.modalOpen = false
+          if (focus) this.addIngredient()
         }
       })
     },
@@ -408,7 +440,8 @@ export default {
     },
 
     // DATA LIST
-    showCategories() {
+    showCategories(focus) {
+      this.modalOpen = true
       this.releaseBackEvent()
       this.$showModal(ActionDialog, {
         props: {
@@ -429,17 +462,28 @@ export default {
             if (category.length) {
               this.recipeContent.category = category
               this.addCategoryAction(category)
+              if (focus) this.autoFocusField("yieldQuantity")
+              this.modalOpen = false
             }
           })
         } else if (action) {
           this.recipeContent.category = action
           this.hijackBackEvent()
+          if (focus) this.autoFocusField("yieldQuantity")
+          this.modalOpen = false
         } else {
           this.hijackBackEvent()
         }
       })
     },
-    showYieldUnits() {
+    autoFocusField(ref) {
+      this.$refs[ref].nativeView.focus()
+      setTimeout(() => {
+        Utils.ad.showSoftInput(this.$refs[ref].nativeView.android)
+      }, 1)
+    },
+    showYieldUnits(focus) {
+      this.modalOpen = true
       this.releaseBackEvent()
       this.$showModal(ActionDialog, {
         props: {
@@ -460,27 +504,35 @@ export default {
             if (yieldUnit.length) {
               this.recipeContent.yield.unit = yieldUnit
               this.addYieldUnitAction(yieldUnit)
+              this.modalOpen = false
+              if (focus) this.autoFocusField("timeRequired")
             }
           })
         } else if (action) {
           this.recipeContent.yield.unit = action
           this.hijackBackEvent()
+          this.modalOpen = false
+          if (focus) this.autoFocusField("timeRequired")
         } else {
           this.hijackBackEvent()
         }
       })
     },
-    showUnits(e) {
+    showUnits(e, focus) {
+      this.modalOpen = true
       this.releaseBackEvent()
       this.$showModal(ActionDialog, {
         props: {
           title: "Unit",
           list: [...this.units],
-          // height: "420",
         },
       }).then((action) => {
         this.hijackBackEvent()
-        if (action) e.object.text = action
+        if (action) {
+          e.object.text = action
+          this.modalOpen = false
+          if (focus) this.addIngredient()
+        }
       })
     },
 
@@ -540,7 +592,10 @@ export default {
         }).then((action) => {
           this.blockModal = false
           if (action) {
-            this.permissionCheck(this.permissionConfirmation, this.imagePicker)
+            this.permissionCheck(
+              this.permissionConfirmation,
+              this.imagePicker
+            )
           } else if (action != null) {
             this.recipeContent.imageSrc = null
             this.releaseBackEvent()
@@ -596,14 +651,15 @@ export default {
         knownFolders.temp().path,
         `${this.getRandomID()}.jpg`
       )
+      console.log(this.cacheImagePath)
       let screenWidth = Math.round(this.screenWidth * 2)
-      ImagePicker.create({
+      Filepicker.create({
         mode: "single",
-        mediaType: ImagePicker.ImagePickerMediaType.Image,
+        extensions: ["png", "jpeg", "jpg"],
       })
         .present()
         .then((selection) => {
-          let imgPath = selection[0]._android
+          let imgPath = selection[0]
           ImageSource.fromFile(imgPath).then((image) => {
             ImageCropper.prototype
               .show(
@@ -629,8 +685,39 @@ export default {
               })
           })
         })
+      // ImagePicker.create({
+      //   mode: "single",
+      //   mediaType: ImagePicker.ImagePickerMediaType.Image,
+      // })
+      //   .present()
+      //   .then((selection) => {
+      //     let imgPath = selection[0]._android
+      //     ImageSource.fromFile(imgPath).then((image) => {
+      //       ImageCropper.prototype
+      //         .show(
+      //           image,
+      //           {
+      //             width: screenWidth,
+      //             height: screenWidth,
+      //           },
+      //           {
+      //             hideBottomControls: true,
+      //             toolbarTitle: "Crop photo",
+      //             statusBarColor: "#ff5200",
+      //             toolbarTextColor:
+      //               this.appTheme == "light" ? "#212529" : "#f1f3f5",
+      //             toolbarColor:
+      //               this.appTheme == "light" ? "#f1f3f5" : "#212529",
+      //             cropFrameColor: "#ff5200",
+      //           }
+      //         )
+      //         .then((cropped) => {
+      //           cropped.image.saveToFile(this.cacheImagePath, "jpg", 75)
+      //           this.recipeContent.imageSrc = this.cacheImagePath
+      //         })
+      //     })
+      //   })
     },
-
     // INPUT FIELD HANDLERS
     fieldDeletionConfirm(item) {
       return this.$showModal(ConfirmDialog, {

app/components/EnRecipes.vue

@@ -329,7 +329,7 @@ export default {
       let h = parseInt(t[0])
       let m = parseInt(t[1])
       return {
-        time: h ? (m ? `${h}h ${m}m` : `${h}h`) : `${m}m`,
+        time: h ? (m ? `${h} hr ${m} min` : `${h} hr`) : `${m} min`,
         duration: `${h}${m}`,
       }
     },

app/components/Settings.vue

@@ -273,9 +273,7 @@ export default {
         .present()
         .then((selection) => {
           Toast.makeText("Processing...").show()
-          let result = selection[0]
+          let zipPath = selection[0]
-          let zipPath = result
-          let dest = knownFolders.documents().path
           this.validateZipContent(zipPath)
         })
     },

app/components/ViewRecipe.vue

@@ -231,9 +231,7 @@
                 <Label
                   class="title orkm"
                   :text="
-                    `Ingredients for ${
+                    `Ingredients for ${positiveYieldMultiplier} ${recipe.yield.unit.toLowerCase()}`
-                      yieldMultiplier ? yieldMultiplier : 1
-                    } ${recipe.yield.unit.toLowerCase()}`
                   "
                   textWrap="true"
                 />
@@ -486,10 +484,8 @@ export default {
     screenWidth() {
       return Screen.mainScreen.widthDIPs
     },
-    isYieldMultiplierPositive() {
+    positiveYieldMultiplier() {
-      return this.yieldMultiplier && !isNaN(this.yieldMultiplier)
+      return this.yieldMultiplier > 0 ? parseFloat(this.yieldMultiplier) : 1
-        ? parseFloat(this.yieldMultiplier)
-        : 1
     },
     isLightMode() {
       return Application.systemAppearance() === "light"
@@ -545,7 +541,7 @@ export default {
       return (
         Math.round(
           (quantity / this.recipe.yield.quantity) *
-            this.isYieldMultiplierPositive *
+            this.positiveYieldMultiplier *
             100
         ) / 100
       )
@@ -568,7 +564,7 @@ export default {
       let t = time.split(":")
       let h = parseInt(t[0])
       let m = parseInt(t[1])
-      return h ? (m ? `${h}h ${m}m` : `${h}h`) : `${m}m`
+      return h ? (m ? `${h} hr ${m} min` : `${h} hr`) : `${m} min`
     },
     isValidURL(string) {
       let pattern = new RegExp("^https?|www", "ig")
@@ -672,8 +668,7 @@ export default {
         })
         shareContent += references
       }
-      let sharenote =
+      let sharenote = "\nCreated and shared via EnRecipes.\nGet it on F-Droid."
-        "\nCreated and shared via EnRecipes.\nGet it on F-Droid."
 
       shareContent += sharenote
 

app/components/modal/ListPicker.vue

@@ -49,52 +49,52 @@ export default {
   data() {
     return {
       hrs: [
-        "0h",
+        "0 hr",
-        "1h",
+        "1 hr",
-        "2h",
+        "2 hr",
-        "3h",
+        "3 hr",
-        "4h",
+        "4 hr",
-        "5h",
+        "5 hr",
-        "6h",
+        "6 hr",
-        "7h",
+        "7 hr",
-        "8h",
+        "8 hr",
-        "9h",
+        "9 hr",
-        "10h",
+        "10 hr",
-        "11h",
+        "11 hr",
-        "12h",
+        "12 hr",
-        "13h",
+        "13 hr",
-        "14h",
+        "14 hr",
-        "15h",
+        "15 hr",
-        "16h",
+        "16 hr",
-        "17h",
+        "17 hr",
-        "18h",
+        "18 hr",
-        "19h",
+        "19 hr",
-        "20h",
+        "20 hr",
-        "21h",
+        "21 hr",
-        "22h",
+        "22 hr",
-        "23h",
+        "23 hr",
       ],
       mins: [
-        "0m",
+        "0 min",
-        "1m",
+        "1 min",
-        "2m",
+        "2 min",
-        "3m",
+        "3 min",
-        "4m",
+        "4 min",
-        "5m",
+        "5 min",
-        "6m",
+        "6 min",
-        "7m",
+        "7 min",
-        "8m",
+        "8 min",
-        "9m",
+        "9 min",
-        "10m",
+        "10 min",
-        "15m",
+        "15 min",
-        "20m",
+        "20 min",
-        "25m",
+        "25 min",
-        "30m",
+        "30 min",
-        "35m",
+        "35 min",
-        "40m",
+        "40 min",
-        "45m",
+        "45 min",
-        "50m",
+        "50 min",
-        "55m",
+        "55 min",
       ],
       selectedHrs: "00",
       selectedMins: "00",
@@ -103,14 +103,14 @@ export default {
   computed: {
     hrIndex() {
       let hr = this.selectedHr
-      if (hr.charAt(0) == "0") hr = hr.slice(-1) + "h"
+      if (hr.charAt(0) == "0") hr = hr.slice(-1) + " hr"
-      else hr = hr + "h"
+      else hr = hr + " hr"
       return this.hrs.indexOf(hr)
     },
     minIndex() {
       let min = this.selectedMin
-      if (min.charAt(0) == "0") min = min.slice(-1) + "m"
+      if (min.charAt(0) == "0") min = min.slice(-1) + " min"
-      else min = min + "m"
+      else min = min + " min"
       return this.mins.indexOf(min)
     },
     appTheme() {
@@ -128,11 +128,11 @@ export default {
   methods: {
     setHrs(args) {
       let hr = "0" + this.hrs[args.object.selectedIndex]
-      this.selectedHrs = hr.slice(-3).slice(0, -1)
+      this.selectedHrs = hr.slice(-5).slice(0, -3)
     },
     setMins(args) {
       let min = "0" + this.mins[args.object.selectedIndex]
-      this.selectedMins = min.slice(-3).slice(0, -1)
+      this.selectedMins = min.slice(-6).slice(0, -4)
     },
   },
 }

package-lock.json

@@ -1180,15 +1180,6 @@
         "mkdirp": "^1.0.4"
       }
     },
-    "@nativescript/imagepicker": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@nativescript/imagepicker/-/imagepicker-1.0.0.tgz",
-      "integrity": "sha512-PqddowKeeojpN0UwBSjjO8NNRv+An1c8jw/J3bmuejQbiw1DmMKcnqIqyg//ztHygutlRlsFkyHGmm/UXq3h/w==",
-      "requires": {
-        "nativescript-permissions": "~1.3.0",
-        "ts-node": "^8.10.2"
-      }
-    },
     "@nativescript/social-share": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@nativescript/social-share/-/social-share-2.0.1.tgz",

package.json

@@ -15,7 +15,6 @@
     "@nativescript-community/ui-material-progress": "^5.0.30",
     "@nativescript-community/ui-material-ripple": "^5.0.30",
     "@nativescript/core": "~7.0.0",
-    "@nativescript/imagepicker": "^1.0.0",
     "@nativescript/social-share": "^2.0.1",
     "@nativescript/theme": "^3.0.0",
     "@nativescript/zip": "^5.0.0",