How to rename button name after click on "Aprove Button" in Angular

  angular, mongodb, mongoose, node.js

I have two role "user & tax-collector". if user apply new/renew form then forms show on tax-collector dashboard and tax-collector click on approve button then button switch to approved with disable. after approved never should show approve button.

"i m using mongodb, express, angular and nodejs"

please help me!

You may see picture here

When i click approve button then i want to show disable button "approved". You may check in this picture what i am saying exactly

Modals


//this modal inside user.js

const mongoose = require("mongoose");
const bcrypt = require("bcrypt");

const userSchema = new mongoose.Schema({
  name: { type: String },
  email: { type: String },
  phoneNumber: { type: String },
  password: { type: String },
  role: {
    type: String,
    default: "user",
    enum: ["user", "tax-collector",],
  },
  created: { type: Date, default: Date.now() },

  taxCollectorAprove: [
    {
      formsId: { type: mongoose.Schema.Types.ObjectId, ref: "User" },
      applicantname: { type: String, default: '' },
      applicationId: { type: String, default: '' },
      status: { type: String, default: '' },
    },
  ],
  totalCltrAproved: { type: Number, default: 0 },
});


module.exports = mongoose.model("User", userSchema);


// this modal of inside usersForm.js

const mongoose = require('mongoose');

const applySchame = new mongoose.Schema({
    userId: { type: mongoose.Schema.Types.ObjectId , ref: 'User' },
    name: { type: String, ref: 'User', default: ''},
    // renews: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Apply_Renew' }],
    zone: { type: String, },
    ward: { type: String },
    applicantname: { type: String, },
    imagePath: { type: String,},
    gender: { type: String,  },
    age: { type: String,  },
    organization: { type: String, },
    typeoforg: { type: String, },
    applicantaddress: { type: String, },
    kindoftrade:{type: String, },
    kindoftradedata:{type: String,},
    periodoflicence: { type: String, },
    gstnumber: { type: String, },
    pannumber: { type: String, },
    contactnumber: { type: String, },
    emailid: { type: String, },
    businessarea: { type: String, },
    establishment: { type: String, },
    holdingowner: { type: String, },
    turnover: { type: String, },
    check: { type: String, },
    status: { type: String, default:'New', enum: ['New', 'Renewal'] },
    oldLicence: { type: String },
    unitname: { type: String },
    applicationId: { type: String },
    fathersname: { type: String },
    created: { type: Date, Default: Date.now() },
})

module.exports = mongoose.model('User_Forms', applySchame);

Here my taxcolletor.js code

const UserForm = require("../models/userForms");
const User = require("../models/users");

module.exports = {

  // Tax collector get forms
  AllForms(req, res) {
    UserForm.find({})
      .populate("userId")
      .then((data) => {
        return res.status(200).json({
          message: "All new apply forms",
          data,
        });
      })
      .catch((err) => {
        res.status(403).json({ message: "Not found of forms", err });
      });
  },

 
  // Tax collector aprove forms

  async taxCollectorAproved(req, res) {
    await User.updateOne(
      {
        _id: req.user._id,
          // "taxCollectorAprove.formsId": {$ne: req.body._id}
      },
      {
        $push: {
          taxCollectorAprove: {
            formsId: req.body._id,
            applicantname: req.body.applicantname,
            applicationId: req.body.applicationId,
            status: req.body.status,
          },
        },
        $inc: { totalCltrAproved: 1 },
      }
    )
      .then((data) => {
        console.log(data);
        res
          .status(200)
          .json({ message: "User form aproved by tax-collector", data });
      })
      .catch((err) => {
        res.status(403).json({ message: "User Form Not Aproved", err });
      });
  },
}

in application.ts file

import { Component, OnInit } from '@angular/core';
import { CollectorService } from 'src/app/services/collector.service';
import * as moment from 'moment';
import { io } from 'socket.io-client';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/auth/auth.service';

@Component({
  selector: 'app-application',
  templateUrl: './application.component.html',
  styleUrls: ['./application.component.css'],
})
export class ApplicationComponent implements OnInit {
  newFormsData = [];
  socket: any;
  renewFormsData = [];
  newForms: any;
  loggedInUser: any;

  constructor(
    private collectorService: CollectorService,
    private router: Router,
    private authService: AuthService
  ) {
    this.socket = io('http://localhost:5000');
  }

  ngOnInit(): void {
    this.loggedInUser = this.authService.currentUserValue;

    this.getAllForms();
    this.getUserByid();

    this.socket.on('refreshPage', (data) => {
      this.getAllForms();
      this.getUserByid();
    });
  }
  getAllForms() {
    this.collectorService.GetAllForms().subscribe((res) => {
      // console.log(res);
      this.newFormsData = res.data.reverse();
    });
  }

  userApproved(newForm) {
    this.collectorService.AproveForm(newForm).subscribe(res => {
      console.log(res);
      this.socket.emit('refresh', {});
    });
  }

  getUserByid() {
    this.collectorService
      .GetUserById(this.loggedInUser.user._id)
      .subscribe(res => {
        console.log(res);
      });
  }

  TimeFromNow(time) {
    return moment(time).calendar();
  }
}

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.