I have a View All page. The page has a table with user data with actions that can be performed. The button has two different icons. Spinner icon and a default icon. I want to change the icon of the button until the task executes.

Ex: Showing spinner icon until M_1's disabling/deleting process works and showing back the lock/trash icon.

I know how to update one button icon by putting useState. When 1 row has 2 buttons that mean 2 useStates. So 2 rows mean 4 useStates. But that's not practical noh. I want to know how to do it the correct way.

Table with buttons:
table with buttons

View All Page:

import React, { useEffect, useState } from 'react' import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow, CSpinner, CTable, CTableBody, CTableDataCell, CTableHead, CTableHeaderCell, CTableRow, } from '@coreui/react' import CIcon from '@coreui/icons-react' import { cilTrash, cilLockLocked } from '@coreui/icons' const ViewAll = () => { const [usersData, setUsersData] = useState({}) const [disabled, setDisabled] = useState(false) const handleLoadMembers = async () => { try { const _data = await fetch('http://localhost:4000/api/v1/member/list', { method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + localStorage.getItem('token'), }, }) if (_data.status !== 200) { throw new Error() } const data = await _data.json() setUsersData(data.members) } catch (err) { console.error(err) } } const handleDelete = async (id) => { alert('clicked') try { const _data = await fetch('http://localhost:4000/api/v1/member/remove/' + id, { method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + localStorage.getItem('token'), }, }) window.location.reload() console.log(_data) } catch (err) { console.error(err) } } useEffect(() => { handleLoadMembers() }, []) return ( <CRow> <CCol xs={12}> <CCard className="mb-4"> <CCardHeader> <strong>All Members</strong> </CCardHeader> {usersData.length > 0 ? ( <CCardBody> <p className="text-medium-emphasis small">Here the all members of your community.</p> <CTable hover bordered> <CTableHead color="dark"> <CTableRow> <CTableHeaderCell scope="col">Member ID</CTableHeaderCell> <CTableHeaderCell scope="col">Name</CTableHeaderCell> <CTableHeaderCell scope="col">Email</CTableHeaderCell> <CTableHeaderCell scope="col">Actions</CTableHeaderCell> </CTableRow> </CTableHead> <CTableBody> {usersData.map((item, index) => { return ( <CTableRow key={index}> <CTableHeaderCell scope="row">M_{item.index}</CTableHeaderCell> <CTableDataCell>{item.name}</CTableDataCell> <CTableDataCell>{item.email}</CTableDataCell> <CTableDataCell class="d-flex justify-content-evenly"> <CButton color="danger" size="sm" disabled={disabled} onClick={() => handleDelete(item._id)} > {disabled ? ( <CSpinner component="span" className="me-2" size="sm" aria-hidden="true" /> ) : ( <CIcon icon={cilTrash} className="me-2" /> )} Delete </CButton> <CButton color="warning" size="sm" disabled={disabled} onClick={() => handleDelete(item._id)} > {disabled ? ( <CSpinner component="span" className="me-2" size="sm" aria-hidden="true" /> ) : ( <CIcon icon={cilLockLocked} className="me-2" /> )} Disable </CButton> </CTableDataCell> </CTableRow> ) })} </CTableBody> </CTable> </CCardBody> ) : ( 'No data' )} </CCard> </CCol> </CRow> ) } export default ViewAll

new banner.png

Google Form : - https://forms.gle/Qs4i6DmyDnMNMYt99

What is the best javascript framework to learn? What is popular in sri lanka? Ex: Codgen uses Angular for their frontend development.

Screenshot 2021-05-22 at 12.12.57.png

how reduce space value bet ween 1st column and 2nd column.

code:-

<table>
<tr>
<td><input type="text" class="form-control" [(ngModel)]="inputItem"></td><td><button class="btn btn-primary" (click)="addToDo()">Add To Todo</button></td>
</tr>
<tr *ngFor="let item of todo; let i = index">
{{i}}<td><ul class="list-group"><li class="list-group-item">{{item.content}}</li></ul></td>
<td><button class="btn btn-default" (click)="removeDo(i)"> Remove</button></td>
</tr>
</table>

Parent array

let activity = [ { startDate: 2020-10-21, endDate: 2020-10-22, steps: 100, distance: 100 }, { startDate: 2020-10-22, endDate: 2020-10-23, steps: 100, distance: 100 } ]

මෙන්න මේ උඩ තියෙන Array එකට පහත දක්වලා තියෙන arrays 2න් ඩේටා ගන්න ඕන. මේ උඩ තියෙන ඇරේ එකේ startDate, endDate වලට සමාන අගයන් තියෙන පහල තියෙන ඇරෙස් වලින් ඩේටා අරගෙන ෆිල් කරවන්න ඕන. මේක කොහොමද කරගන්නෙ?

let steps= [ { startDate: 2020-10-21, endDate: 2020-10-22, steps: 100 }, { startDate: 2020-10-22, endDate: 2020-10-23, steps: 100 } ] let activity = [ { startDate: 2020-10-21, endDate: 2020-10-22, distance: 100 }, { startDate: 2020-10-22, endDate: 2020-10-23, distance: 100 } ]

ස්තූතියි

0_1545303782535_AngularJS.jpg

Angular Js කියන්නේ cllient-side MVC/MVVM framework එකක් , මේක හැදුවේ google සමගම නිසා මේක ආපු දවසේ ඉදලම ගොඩක් famous උනා , Angular වලින් කරන්න පුළුවන් වැඩ ගොඩක් තියෙනවා, හැබැයි මේක ගොඩක්ම famous උනේ Single Page Web Applications හදන්න , එත් දැන් websites හදන්නත් මේක use කරනවා. ඒ වගේම තමයි මේ දවස්වල Angular Js base කරගෙන හදපු Ionic ( Hybrid Mobile Application ) development framework එක use කරනවා ගොඩක් mobile application හදන්නත් . Ionic වල තියෙන වාසිය තමයි HTML & CSS , Javascripts විතරක් use කරලා mobile app එකක් හදාගන්න පුළුවන් වෙන එක.

Angular Js install කරන්න ඔයාගේ computer එකේ node JS install කරලා තියෙන්න ඕනේ Angular CLI (Command Line Interface) එක ඕනේ Angular app එක create, test, build, deploy කරන්න, ඒ වගේම තමයි angular වල සමහර codes මේ CLI එක හරහා generate කරගනත් පුළුවන් .

Node Js install කරන විදිය

www.nodejs.org වලට ගිහින් තමන්ගේ platform එකට අදාලව nodejs download කරගෙන install කරගන්න. තව instruction official page එකේ තියෙනවා.

Angular install කරමු

Node JS install කරගත්තට පස්සේ install කරගන්න ඕනේ Angular CLI එක . ඔයාගේ computer එකේ command line / terminal එක open කරලා පල්ලෙහා තියෙන code එක run කරන්න

npm install -g @angular/cli Angular app එක create කරමු

Angular Js install කරගත්තට පස්සේ ඔයාට project එක create කරන්න ඕනේ තැනට ගිහින් terminal එකේ, Angular CLI command එකෙන් workspace එකක් create කරගන්න ඕනේ, මේකේ my-app කියන්නේ ඔයාගේ app එකේ name එක .

cd desktop ng new my-app

මේ ng new command එක run කරාම ඔයාගෙන් අහනවා app එකේ informations ටික , දැනට හැම එකටම enter press කරලා default තියන්න. පස්සේ මේ infomations වෙනස් කරගන්න පුළුවන් ඔයාට.

**Note : ng new command එකෙන් Angular npm packages සහ other dependencies install කරන නිසා app එක create වෙන්න ටිකක් වෙලා ගන්නවා.

Angular app එක run කරමු

ඔයාගේ Angular app name එකෙන් create උන folder එකට යන්න.

cd my-app

folder එකට ගියාට පස්සේ Angular CLI එකෙන් serve කරන්න පුළුවන් අපි හදාගත්ත angular app එක. angular serve එකෙන් start කරනවා local server එකක්, ඒ වගේම ඔයාගේ app එකේ හැම file එකක්ම watch කරනවා, මේකේ තියෙන තවත් වාසියක් තමා අපි මොකක් හරි change එකක් කරොත් file එකකට rebuild කරනවා automatically, (auto reload වෙනවා කියලත් මේකට කියනවා)

ng serve --open

angular serve උනාට පස්සේ automatically open වෙනවා app url (http://localhost:4200/) එක ඔයාගේ computer එකේ default web එකෙන් . එහෙම open උනේ නැත්නම් , angular serve එක ආපහු run කරන්න --open (or just -o) flag එකත් එක්ක .

පහල තියෙන image වගේ default app එකේ view එක ඔයාට බලාගන්න පුළුවන්.

0_1545302907342_app-works.png

next step එකේදී බලමු මේ app එක එඩිට් කරගන්න කොහොමද කියලා සහ angular app එකක් හදන්න දැනගන්න ඕනේ මොනාද කියලා (Controllers, Directives, Services, Factories, Filters) , angular documentation එකේ හැමදේම simple විදියට කියලා තියෙනවා , මම එක තව simple කරලා සිංහලෙන් දාන්නම් . ඉස්සරහටත් lankadeveloeprs.com එකතු වෙලා ඉන්න.

මේක simple start එකක් උනාට , ඔයාට පුළුවන් angular documentation එක refer කරලා advanced පැත්තටම යන්න, angular ගොඩක් ලේසි වගේම ලොකු community එකක් ඉන්න නිසා ඔයා මොකක් හරි දෙකදී හිර උනොත් හෙල්ප් කරන්න කට්ටිය ඉන්නවා.angular ගැන ප්‍රශ්න තියෙනවනම් මෙතන දාන්න , ලංකාවේ angular වැඩ කාරයෝ help කරයි.

Source : https://angular.io/guide/quickstart

Linear Gradients

background:-webkit-linear-gradient(red,blue); -webkit-background-clip:text; -webkit-text-fill-color:transparent }

Radial Gradients

background:-webkit-radial-gradient(red,green,blue); -webkit-background-clip:text; -webkit-text-fill-color:transparent }

Can we use the Angular front-end framework to do all of the things we do use Ajax?
අපිට Angular use කරලා Ajax වලින් කරන දේවල් ඔක්කොම කරගන්න පුලුවන්ද?
නෙත්නම් මේ දෙකේ වෙනස් features මොනවද?

Angular walin front-end develop karanakota apita Ajax uuse kranna oni wenne nedda ?

Matirial Color 200ක්
ගොඩක් අයට තියෙන ප්‍රශ්නයක්නේ Design කරන්න ගියහම ගැලපෙන වර්ණයක් තෝරගන්න අමාරු වෙන එක.ඔන්න ඒකට විසඳුමක් විදිහට වර්ණ 200ක් Style Sheet එකක් විදිහට ගෙනාවා.මේකෙ වාසිය මං මේක හදල තියෙන්නෙ වර්ණ 200යම ඔයාට එක පාරක් බැලුව ගමන් මතක හිටින විදිහට.

වැඩි කතා ඕනි නෑනේ.මෙන්න මෙතනින් download කරගන්න.

පහලින් comment එකක් දාන්න අමතක කරන්න එපා.

මගේ ප්‍රොජෙක්ට් එකේ frontend එක laravel+vuejs, Rest API එක nodeJs. මේ අතර authentication JWT වලින් තමා වෙන්නේ. මන් මේ JWT ගැන හොයල බැලුවම හැමොම කියල කියල තියෙනවා JWT token එක කවදාවත් frontend එකෙ store කරන්න එපා (localStorage/sessionStorage/IndexDB/coockie), simple XSS attack එකකින් පවා read කරන්න පුලුවන් කියල. හැම තැනම තියෙන්නේ රිස්ක් එක අඩුම ක්‍රමේ තමා JWT token එක memory එකේ තියාගෙන refresh token එක httpOnly coockie එකක තියාගන්න කියලා. මේ විදිහට login එකක් ලියලා token එක අරන් memory එකට දාලා home page එකට යැව්වුම httpOnly coockie එක header එකෙන් මැකෙනවා page එක refresh වෙන නිසා. කොහොමත් page refresh වෙද්දි memory එකේ තිබ්බ JWT token එකත් මැකෙන නිසා home page එකට යැව්වම මුකුත් නෑ user ගාව authenticate කරන්න. මෙන්න මේ URL එක refresh වෙද්දි httpOnly coockie එක මැකෙන එකට මොකක් හරි කරන්න පුලුවන්ද? token එක මැකුනත් කමක් නෑ refresh වෙලා page එකට අවාම httpOnly coockie එකේ තියෙන refresh token එක පාවිච්චි කරලා token එකක් ගන්න පුලුවන්නෙ එහෙම ඒක තියෙනව නම්.

Mn fiverr eke font end ptn gann hithagena innee.... html css js knowledge ek thynw.... kauruhr freelance krn knk mt kiynn plwnd freelancer walad apit buyer gen hamben document mnwd kiyl, nthnm buyergn illnn oona dewal....??

VUE JS මුල ඉඳන් සිංහලෙන් ඉගෙන ගන්න කැමති අයට මුල ඉඳන්ම කරන Tutorial Series එකක්.

VueJs 2 – 01 මොකද්ද මේ Vue කියන්නෙ?

VueJs 2 – 02 Vue object instance එකක් හදමු

VueJs 2 – 03 Vue directives කියන්නෙ මොනවද?

VueJs 2 – 04 Event එක්ක වැඩ කරමු

VueJs 2 – 05 filters and computed properties

VueJs 2 – 06 Vue components

VueJs 2 – 07 more about Vue components

VueJs 2 – 08 Handling AJAX

I have to send an estimation for web site maintenance. What should be included there?
Can someone show me an example?

HTML වලින් කරුපු calculator එකක් තියෙනවා. ඒක web pages වල embed කරන්නේ කොහොමද?

Ex : page.html

<div id="stamp-duty-calculator" class="grey-theme hidden"> </div> <script id="stamp-src" type="text/javascript" data-state="All" src="//calculatorsonline.com.au/external/!main/stamp_duty.min.js"></script>

මං iframe වලින් try කරා. ඒත් height එක dynamic කරන්න බැහැ නේද? load වෙද්දිම 100% height එක එන්න ඕන.

npm package එකක් උනත් කමක් නෑ ක්‍රමයක් තියෙනම්.

d003cc13-276e-4a40-932c-8bedf3ee06cb-image.png
Svelte is the hot new front-end framework that has become the talk of the town among web developers. In the recent State of JS survey of 2019, it has been predicted to be the up-and-coming technology that may take over other frameworks like React and Vue in the next decade.

What is different in Svelte?

Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time.

Key Features

Here are some of the key features of Svelte, and also the key differences from other frameworks.

No Virtual DOM
In React and Vue we use the Virtual DOM. There is an elaborate post we wrote earlier explaining Virtual DOM that you can checkout to understand how the Virtual DOM works. Svelte does not use the virtual DOM concept, and instead shifts the work into a compile step that happens when you build your app.

With Svelte the code is compiled into small framework-free vanilla JavaScript code. It is guaranteed to be smaller, and faster and does not require the use of a Virtual DOM.

Less Code
Who doesn’t like writing less code. The lesser the code, the lesser the bugs. I am not talking about cramming all your code into unreadable chunks of code. I am talking about writing less code, without hampering readability. Svelte was created with a goal to reduce the amount of code that developers write. With other modern frontend frameworks, there is quite a bit of boilerplate code that comes with it.

Let’s look at an example to see how Svelte compares with React. Let’s look at an example to update local component state using React and Svelte.

React

// Update state in React const [count, setCount] = useState(0); function increment() { setCount(count + 1); }

Svelte

// Update state in Svelte let count = 0; function increment() { count += 1; }

You can see how a lot of code has been cut out in Svelte.

In React, we would either have to use the useState hook, or set state using setState. Whereas in Svelte, this got drastically simplified. You can update the state with the assignment operator directly.

This aspect of writing less code using Svelte is highly appealing to me. I am sure this is one of the top reasons for the increased interest in this new framework.

Reference

Vue Project ekka db recode ekak update karagen passe update una data show karaganne kohomeda?

Danata thiyea code eka

<template> <div class="col-md-12"> <div class="card"> <div class="card-header"> All Users <button class="btn btn-primary px-4 float-right mt-0 mb-3" @click="showModal = true">Add Author</button> </div> <div class="card-body"> <table class="table table-striped"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> </thead> <tbody> <tr v-for="author in displayedAuthors" :key="author._id"> <td>{{ author.name }}</td> <td>{{ author.email }}</td> <td> <button @click="editAuthor(author)" class="btn btn-primary btn-sm mr-2"><i class="cil-energy"></i>Edit</button> <router-link :to="{name: 'edit', params: { id: author._id }}" class="btn btn-danger btn-sm"><i class="cil-energy"></i>Delete</router-link> </td> </tr> </tbody> </table> </div> <div class="card-footer"> <nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <button type="button" class="page-link" v-if="page != 1" @click="page--"> Previous </button> </li> <li class="page-item" v-for="pageNumber in pages.slice(page-1, page+5)" v-bind:key="pageNumber"><a class="page-link" @click="page = pageNumber">{{pageNumber}}</a></li> <li class="page-item"> <button type="button" @click="page++" v-if="page < pages.length" class="page-link"> Next </button> </li> </ul> </nav> </div> </div> <form @submit.prevent="addAuthor"> <CModal title="Modal title" :show.sync="showModal" color="primary"> <div class="form-group"> <label for="exampleInputEmail1">Full Name</label> <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="author.name"> </div> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="author.email"> </div> <template #header> <h6 class="modal-title">Create Authors</h6> <CButtonClose @click="showModal = false" class="text-white" /> </template> <template #footer> <CButton @click="showModal = false" color="danger">Close</CButton> <CButton color="primary" type="submit">Save</CButton> </template> </CModal> </form> <!--* Update Modal --> <form @submit.prevent="updateAuthor"> <CModal title="Edit Author" :show.sync="editModal" color="success"> <div class="form-group"> <label for="exampleInputEmail1">Full Name</label> <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="author.name"> <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="author._id"> </div> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="author.email"> </div> <template #header> <h6 class="modal-title">Edit Authors</h6> <CButtonClose @click="editModal = false" class="text-white" /> </template> <template #footer> <CButton @click="editModal = false" color="danger">Close</CButton> <CButton color="success" type="submit">Update</CButton> </template> </CModal> </form> </div> </template> <script> export default { data() { return { showModal: false, editModal: false, authors: [], author: {}, page: 1, perPage: 9, pages: [], } }, computed: { displayedAuthors() { return this.paginate(this.authors); } }, watch: { authors() { this.setPages(); } }, created() { this.getAuthors() }, filters: { trimWords(value) { return value.split(" ").splice(0, 20).join(" ") + '...'; } }, methods: { addAuthor() { let uri = 'http://localhost:4000/authors/add'; this.axios.post(uri, this.author).then((response) => { console.log(response.data) this.showModal = false this.author.name = '' this.author.email = '' this.authors.push(response.data) }); }, getAuthors() { let uri = 'http://localhost:4000/authors'; this.axios.get(uri).then(response => { this.authors = response.data; }); }, editAuthor(author){ this.author.name = author.name; this.author.email = author.email; this.author._id = author._id; this.editModal = true }, updateAuthor(){ console.log(this.authors) let uri = `http://localhost:4000/authors/update/${this.author._id}`; this.axios.post(uri, this.author).then(() => { this.editModal = false // UPDATE TABLE HERE }); }, setPages() { let numberOfPages = Math.ceil(this.authors.length / this.perPage); for (let index = 1; index <= numberOfPages; index++) { this.pages.push(index); } }, paginate(authors) { let page = this.page; let perPage = this.perPage; let from = (page * perPage) - perPage; let to = (page * perPage); return authors.slice(from, to); } } } </script>

VUE ඇප් එකක client end & admin end එකක් හදන්න ඕන. එතකොට client end එකට එක template එකකුත් admin end එකට වෙන එකකුත් පාවිච්චි කරනන පුලුවන්ද? ඒක කරන්නේ කොහොමද ?

angular site එකක button එකක් click කරලා අලුත් page එකකට redirect වෙනකොට javascript run වෙන්නෙ නැත්තෙ ඇයි. page eka reload කරොත් run වෙනවා.

alt text
Without any server-side code hosted on a server, you can send emails through your Angular application with smtpJS, a client-side Javascript library.

First you need to download this library and include it into the necessary component of the Angular Application.
Click here to download the library file.
(If any error in download, go to smtpJS.com , where you can directly download or get the CDN link)

Next , put this downloaded js file into the assets folder found in src directory of the project.

Next we have to get the help of an email service provider to send the email. I here use Elastic Email site for this. First go to the Elastic Email site to create an account. Just complete the sign up process, it’s that simple.

After logging into the site, go to Start — → Connect To SMTP API .

alt text

Next, you can see a button to create new credentials. Create a new credentials following the simple steps. The system will generate a password for you. Copy that password and save it somewhere before you close that popup model.

Finally you’ll see something like this.

alt text

Here, your user name and password (You saved it earlier) can be seen .These details are used to access this.

Coding part

Go to your angular project’s relevant component from which an email must be sent.

Import the smtp.js file from assets folder to the component by typing
import ‘./../../../assets/smtp.js’;             <! — path might change — >
declare let Email : any;

Write the code to send the email with the user-inputs within onSubmit() method as below,

import { Component, OnInit } from '@angular/core'; import { ProfileService } from '../profile.service'; import { Model } from './contact-form'; import { NgForm } from '@angular/forms'; import './../../../assets/js/smtp.js '; <! — file path may change → declare let Email: any; @Component({ selector: ‘app-contact’, templateUrl: ‘./contact.component.html’, styleUrls: [‘./contact.component.scss’]}) export class ContactComponent implements OnInit { model: Model = new Model(); constructor( private profile: ProfileService) { } ngOnInit() { } onSubmit(f: NgForm) { Email.send({ Host : ‘smtp.elasticemail.com’, Username : ‘[email protected]’, Password : ‘**************************’, //Enter your password here To : ‘[email protected]’, From : `[email protected]`, Subject : this.model.subject, Body : ` <i>This is sent as a feedback from my resume page.</i> <br/> <b>Name: </b>${this.model.name} <br /> <b>Email: </b>${this.model.email}<br /> <b>Subject: </b>${this.model.subject}<br /> <b>Message:</b> <br /> ${this.model.message} <br> <br> <b>~End of Message.~</b> ` }).then( message => {alert(message); f.resetForm(); } ); } }

Here , within Email.send(….); method, you can give the elastic mail registered email as the username ,
and earlier saved password for the password field.
From: email should be equal to the elastic mail’s registered email and you can set the receiver’s email under To field.

Other fields can be taken from your form created .

That’s it.

Original Post: https://medium.com/@udith.indrakantha/send-emails-without-a-server-side-code-with-angular-e227c3e62dbd

Nuxtjs Auth Module එකේ Custom Strategies හදනවිදිහ දන්න කෙනෙක් ඉන්නව නම් පොඩ්ඩක් කියල දෙන්වද?.. මට ඕනේ
Admin login එකට ට වෙනම endpoint එකක් සහ client login එකට වෙනම endpoint එකක් හදාගන්න..