Categories
JavaScript Vue

Validate Phone Number with vee-validate

To validate phone numbers with vee-validate, we can use the regex rule so that we can validate any phone number format we want.

First, we install the package by running:

npm i vee-validate

Next, we register the plugin in our Vue app by writing:

import Vue from "vue";
import App from "./App.vue";
import { ValidationProvider, extend } from "vee-validate";
import { regex } from "vee-validate/dist/rules";

extend("regex", regex);

Vue.component("ValidationProvider", ValidationProvider);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

We used the ValidationProvider package which is used to add form validation capabilities to all components in our app.

Also, we import the regex rule from the package and register it with extend so we can use the regex rule.

Then in App.vue, we write:

<template>
  <div id="app">
    <ValidationProvider :rules="{ regex:/^[2-9]\d{2}[2-9]\d{2}\d{4}$/ }" v-slot="{ errors }">
      <input name="phone" type="text" v-model="phone">
      <p>{{ errors[0] }}</p>
    </ValidationProvider>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      phone: ""
    };
  }
};
</script>

to add a phone input field.

We wrap the ValidationProvider around the input box. The validation rule is defined by passion in an object as the value of the rules prop.

Also, we have the errors object obtained from the ValidationProvider component so that we can display form validation errors.

The name attribute must be set since it’s used for by the form validation message.

The regex /^[2-9]\d{2}[2-9]\d{2}\d{4}$/ is the regex for a North American phone number.

Once we did that, when we type in anything other than a North American phone number, we’ll see an error message displayed.

Categories
JavaScript Vue

Build a Drag and Drop Grid with Vuejs

We can create a draggable and sortable grid with the vue-js-grid package.

It’s easy to use.

First, we install it by running:

npm install vue-js-grid

Next, we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Grid from "vue-js-grid";

Vue.use(Grid);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

We registered the Grid component from vue-js-grid globally with Vue.use.

App.vue

<template>
  <div id="app">
    <grid :draggable="true" :sortable="true" :items="items" :height="100" :width="100">
      <template slot="cell" scope="props">
        <div>{{props.item}}</div>
      </template>
    </grid>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      items: Array(50)
        .fill()
        .map((_, i) => i)
    };
  }
};
</script>

We created an array with 50 minutes as the property of items.

To do that we created an array with 50 elements with Array(50).

Then we called fill and map to fill the entries with numbers.

In the template, we have the grid component with a few props.

draggable is set to true to make the grid items draggable.

sortable is also set to true so that we can sort then entries.

items is set to items. This is the prop for setting the grid items.

height sets the height of the grid in percentage.

width sets the width as a percentage.

In the grid component, we have the template to render to grid items.

Now we get a responsive grid with 50 numbers displayed as the content.

It responds to resizing so it’s responsive.

We can drag and drop them grid items as we wish.

This is one of the easiest components for creating a drag and drop grid.

Categories
JavaScript Nodejs

How To Run Multiple Versions of Node.js on Linux

If you are managing multiple Node.js projects, they might be running different versions of Node.js.

Node.js does not support running different versions of the runtime concurrently. This means you have to use third-party software to do it.

To do this on Linux, all you have to do is install some extra packages and then you can install different versions of Node.js on your computer. One of the easiest ways to get different versions of Node.js on your computer is to use [nvm](https://github.com/nvm-sh/nvm).

nvm is available for free for anyone to download. To download it, download with curl and install it:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

Or, alternatively, you can do the same thing with wget:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

What the script does is clone the nvm repository to ~/.nvm and add the source line to your profile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

To load nvm, put the following in your profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc):

export NVM_DIR="${XDG_CONFIG_HOME/:-$HOME/.}nvm"  
[ -s "$NV_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

The --no-use option is available if you add the --no-use after nvm.sh, so that it won’t pick the default version of Node.js.

You can check the nvm version by running nvm -v.

Alternatively, you can clone the Git repository for nvm manually and install it. You can do this by running:

$ cd ~/  
$ git clone https://github.com/nvm-sh/nvm.git .nvm

Then, add the following to your ~/.bashrc, ~/.profile, or ~/.zshrc file to have it run on login:

export NVM_DIR="$HOME/.nvm"  
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm  
[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

nvm is ready to use once you install at least one version of Node.js.

To install the latest one, run nvm install node, or to install an earlier version, run nvm install 6.14.4. The first version of Node.js installed will be the default version.

To list the versions of Node.js installed, run:

nvm ls-remote

When you open a new shell, you have to run nvm again.

You can also run the node command with nvm run.

For example, nvm run node -v. To choose the version you want to run, run nvm exec 4.2 node — v.

To install the path of one version of Node.js runtime, run:

nvm which 10.16

You can install the latest long term support (LTS) version without specifying the version. To do this, run nvm install --lts.

To install other LTS versions of Node.js, you can specify those by their codename, for example, nvm install — lts=carbon.

Other example commands include:

  • nvm install lts/carbon: Installs the latest 8.x version of Node.js.
  • nvm uninstall --lts: Remove the latest LTS version.
  • nvm uninstall --lts=carbon: Remove the latest 8.x version of Node.js.
  • nvm uninstall 'lts/*': Uninstall all LTS versions of Node.js.
  • nvm uninstall lts/carbon: Uninstall the latest 8.x version of Node.js.
  • nvm use --lts: Use the latest LTS version of Node.js.
  • nvm use --lts=carbon: Use the latest 8.x version of Node.js.
  • nvm use 'lts/*': Use the latest LTS version of Node.js installed.
  • nvm use lts/carbon: Use the 8.x version of Node.js.
  • nvm exec --lts: Run a Node.js script with the latest LTS version of Node.js.
  • nvm exec --lts=carbon: Run the Node.js script with the latest 8.x version of Node.js.
  • nvm exec 'lts/*': Run a Node.js script with the latest LTS version of Node.js.
  • nvm exec lts/carbon: Run a Node.js script with the latest 8.x version of Node.js.
  • nvm run --lts: Run a Node.js script with the latest LTS version of Node.js.
  • nvm run --lts=carbon: Run a Node.js script with the latest 8.x version of Node.js.
  • nvm run 'lts/*': Run a Node.js script with the latest LTS version of Node.js.
  • nvm run lts/carbon: Run a Node.js script with the latest 8.x version of Node.js.
  • nvm ls-remote --lts: List all the LTS versions of Node.js.
  • nvm ls-remote --lts=carbon: List all 8.x versions of Node.js.
  • nvm ls-remote 'lts/*': List all the LTS versions of Node.js.
  • nvm ls-remote lts/carbon: List all 8.x versions of Node.js.
  • nvm version-remote --lts: List the latest LTS version of Node.js.
  • nvm version-remote --lts=carbon: List the latest 8.x version of Node.js.
  • nvm version-remote 'lts/*': List the latest LTS version of Node.js.
  • nvm version-remote lts/carbon: List the latest 8.x version of Node.js.

To migration global packages while installing nvm, run:

nvm install node --reinstall-packages-from=node

It will identify the version of Node you are migration from, by running nvm version node before migrating. Then, it will run nvm reinstall-packages to reinstall the packages into your new environment.

You can also specify the versions of Node.js migrate to and from:

nvm install 8--reinstall-packages-from=5  
nvm install 8--reinstall-packages-from=argon

To use the system version of Node.js, run:

nvm use system

To list the versions of Node.js installed, run:

nvm ls

And, to see the available versions you can install, run:

nvm ls-remote

By default, nvm ls, nvm ls-remote, and nvm alias output in color text. You can disable color text output by running:

nvm ls --no-colors

Run nvm deactivate to deactivate nvm and restore your original PATH environment variable.

Finally, to set the default Node.js version for a new shell, run:

nvm alias default node

nvm is one of the easiest programs to manage multiple Node.js versions on your Linux computer. It also works with Windows Subsystem for Linux.

Categories
JavaScript React

Make Expandable Rows with React-Bootstrap-Table2

With react-bootstrap-table-2, we can create expandable rows with the built in BoostrapTable component.

To use it, we install it by running:

npm install react-bootstrap-table-next --save

Then we write:

import React from "react";
import BootstrapTable from "react-bootstrap-table-next";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";

const expandRow = {
  renderer: row => <div>age: {row.age}</div>
};

const columns = [
  {
    dataField: "id",
    text: "ID"
  },
  {
    dataField: "firstName",
    text: "first name"
  },
  {
    dataField: "lastName",
    text: "last name"
  }
];

const persons = [
  { id: 1, firstName: "james", lastName: "smith", age: 20 },
  { id: 2, firstName: "alex", lastName: "green", age: 20 },
  { id: 3, firstName: "may", lastName: "jones", age: 18 }
];

export default function App() {
  return (
    <div className="App">
      <BootstrapTable
        keyField="id"
        data={persons}
        columns={columns}
        expandRow={expandRow}
      />
    </div>
  );
}

We import the BootstrapTable component and the css that comes with react-bootstrap-table-2.

Then we create an object called expandRow that displays something in the expanded row.

row has the data for an entry, so we just access the property in the component we return.

columns has the columns data. dataField is for the key for the field of the entry.

text is the column heading text that’s corresponds to the key name.

persons has the data we want to display.

In App, we use the BootstrapTable component by passing in the objects that we created before.

expandRow has the object that’s used to display them items when the row is expanded.

data has the data. keyField has the property name for the unique key.

columns has the data for the columns.

Once we wrote the code above, we see the age field when we click on a row.

With react-bootstrap-table-2, we can make tables with expandable rows without much hassle.

Categories
JavaScript React

React Bootstrap Table Example

We can create tables with React Bootstrap easily.

First, we install React Bootstrap by running:

npm install react-bootstrap bootstrap

Then we can use the built-in Table component as follows:

import React from "react";
import { Table } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  return (
    <div className="App">
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>jacob</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

striped bordered hover means that we have a striped table with borders on each cell.

We also need the Bootstrap CSS to style the components.

We can also add variant="dark" as a prop of Table to turn on dark mode.

Also, we can add the responsive prop to Table to make it responsive.

We can make a table easily with React Bootstrap.