DEV Community: VIPS

Add Vue and Vuetify DataTable

VIPS — Wed, 26 Apr 2023 12:28:55 +0000

https://www.bezkoder.com/vue-3-crud/
vue create projectName vue add vuetify npm install axios npm install vue-router@4 npm remove @vue/cli-plugin-eslint

https://www.bezkoder.com/vue-3-crud/

https://vuetifyjs.com/en/components/data-tables/basics/

Create Router.js file

import { createWebHistory, createRouter } from "vue-router";

const routes =  [
  {
    path: "/",
    alias: "/Tutorial",
    name: "Tutorial",
    component: () => import("./components/Tutorial")
  }

];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Update Main.js

import 'vuetify/styles'
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import 'vuetify/labs/VDataTable'
loadFonts()

createApp(App)
  .use(vuetify)
  .mount('#app')

add http-common.js please update 7017 to our port number

import axios from "axios";

export default axios.create({
  baseURL: "https://localhost:7017/api", 
  headers: {
    "Content-type": "application/json",
    "Access-Control-Allow-Origin":"*",
  }
});

Update App.vue

<template>
  <v-app>
    <v-main>
      <Tutorial/>
    </v-main>
  </v-app>
</template>

<script>
import Tutorial from './components/Tutorial.vue'

export default {
  name: 'App',

  components: {
    Tutorial,
  },

  data: () => ({
    //
  }),
}
</script>

Create services folder then create TutorialDataService.js file.

import http from "../http-common";

class TutorialDataService {
  getAll() {
    return http.get("/Tutorial");
  }

  get(id) {
    return http.get(`/Tutorial/${id}`);
  }

  update(id, data) {
    return http.put(`/Tutorial/${id}`, data);
  }
  create(data) {
    return http.post("/Tutorial", data);
  }
}

export default new TutorialDataService();

Update plugin-->vuetify.js to below code.

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

import { createVuetify } from 'vuetify'
import * as labs from 'vuetify/labs/components'

export default createVuetify({
  components: {
    ...labs,
  },
})

Create New Componenet Tutorial.vue

<template>
  <v-data-table :headers="headers" :items="communities" :sort-by="[{ key: 'surname', order: 'asc' }]" class="elevation-1">
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>My CRUD</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px">
          <template v-slot:activator="{ props }">
            <v-btn color="primary" dark class="mb-2" v-bind="props">
              New Item
            </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="text-h5">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field disabled hide-details v-model="editedItem.id" label=""></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field :rules="['Required']" v-model="editedItem.givenName" label="Given Name"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field :rules="['Required']" v-model="editedItem.surname" label="Sur Name"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field :rules="['Required']" v-model="editedItem.birthDate" label="Birth Date"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.email" label="Email"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.phoneNumber" label="Phone Number"></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue-darken-1" variant="text" @click="close">
                Cancel
              </v-btn>
              <v-btn color="blue-darken-1" variant="text" @click="save">
                Save
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-dialog v-model="dialogDelete" max-width="500px">
          <v-card>
            <v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue-darken-1" variant="text" @click="closeDelete">Cancel</v-btn>
              <v-btn color="blue-darken-1" variant="text" @click="deleteItemConfirm">OK</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>

    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">
        mdi-pencil
      </v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize">
        Reset
      </v-btn>
    </template>
  </v-data-table>
</template>

<script>
import TutorialDataService from '@/services/TutorialDataService'
export default {

  data: () => ({
    dialog: false,
    dialogDelete: false,
    headers: [
      {
        title: 'Given Name',
        align: 'start',
        sortable: false,
        key: 'givenName',
      },
      { title: 'SurName', key: 'surname' },
      { title: 'Birth Date', key: 'birthDate' },
      { title: 'Email', key: 'email' },
      { title: 'Phone Number', key: 'phoneNumber' },
      { title: 'Actions', key: 'actions', sortable: false },
    ],
    communities: [],
    editedIndex: -1,
    editedItem: {
      id: null,
      givenName: '',
      surname: '',
      birthDate: new Date().toISOString().substr(0, 10),
      email: '',
      phoneNumber: '',
    },

  }),

  computed: {

  },

  watch: {
    dialog(val) {
      val || this.close()
    }
  },

  created() {
    this.initialize()
  },

  methods: {

    initialize() {

    // Call get api

    },


    editItem(item) {
      //call edit api
    },


    close() {
      this.dialog = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },

    save() {

      call update api
      this.close()
    },
  },
}
</script>

.net 6 API for PBSA

VIPS — Wed, 26 Apr 2023 12:10:55 +0000

Or you can create separate Project for vue.

Migration into API Project.
Create Return folder under project.
Create TutorialReturn.cs file under Return folder.
Below is example. Make sure if may be null then add ?.
Create Service folder
1. Create iterface ITutorialServices.cs file


        List<TutorialReturn> GetTutorialList();
        TutorialReturn GetTutorialById(int id);
// Here if you want to return all data then use below one.
        //TblTutorial GetTutorialById(int id);
        int CreateTutorial(TblTutorial Tutorial);
        int UpdateTutorial (TblTutorial Tutorial);
        int DeleteTutorial (int id);

2. Create class as TutorialServices.cs

public class TutorialServices : ITutorialServices

    {
        public int CreateTutorial(TblTutorial Tutorial)
        {
            throw new NotImplementedException();
        }

        public int DeleteTutorial(int id)
        {
            throw new NotImplementedException();
        }

        public TutorialReturn GetTutorialById(int id)
        {
            TutorialReturn TutorialReturn = new TutorialReturn();
            try
            {
                using (var db = new PeopleContext())
                {
                   TutorialReturn =  (from x in db.TblTutorials
                                        where x.Id == id
                                        select new TutorialReturn
                                        {
                                            Id = x.Id,
                                            Address = x.Address,
                                            BirthDate = x.BirthDate,
                                            Email = x.Email,
                                            GivenName = x.GivenName,
                                            PhoneNumber = x.PhoneNumber,
                                            Surname = x.Surname
                                        }).FirstOrDefault();
                    return TutorialReturn;
                }

            }
            catch (Exception ex)
            {
                return TutorialReturn;
            }

        }

        //public TblTutorial GetTutorialById(int id)
        //{
        //    try
        //    {
        //        using (var db = new PeopleContext())
        //        {
        //            var result = db.TblTutorials.Where(x => x.Id == id).FirstOrDefault();

        //            return result;
        //        }

        //    }
        //    catch (Exception ex)
        //    {
        //        return null;
        //    }

        //}

        public List<TutorialReturn> GetTutorialList()
        {
            using (var db = new PeopleContext())
            {
                var lstTutorial = (from x in db.TblTutorials
                                    select new TutorialReturn
                                    {
                                        Id = x.Id,
                                        Address = x.Address,
                                        BirthDate = x.BirthDate,
                                        Email = x.Email,
                                        GivenName = x.GivenName,
                                        PhoneNumber = x.PhoneNumber,
                                        Surname = x.Surname
                                    }).Take(50).ToList();
                return lstTutorial;
            } 
        }

        public int UpdateTutorial(TblTutorial Tutorial)
        {
            if (Tutorial != null)
            {
                using (var udb = new PeopleContext())
                {
                    var update = udb.TblTutorials.Where(o => o.Id == Tutorial.Id).FirstOrDefault();
                    if (update != null)
                    {
                        update.Surname = Tutorial.Surname;
                        update.GivenName = Tutorial.GivenName;
                        update.Email = Tutorial.Email;
                        update.BirthDate = Tutorial.BirthDate;
                        update.PhoneNumber = Tutorial.PhoneNumber;
                        update.Address = Tutorial.Address;
                        udb.Update(update);
                        udb.SaveChanges();
                    }

                    return Tutorial.Id;
                }
            }
            return Tutorial.Id;
        }

Then create New controller as Tutorial

[Route("api/[controller]")]
    [ApiController]
    public class TutorialController : ControllerBase
    {
        private ITutorialServices TutorialServices;

        public TutorialController(ITutorialServices TutorialServices)
        {
            this.TutorialServices = TutorialServices;
        }


        // GET: api/<TutorialController>
        [HttpGet]
        public IEnumerable<TutorialReturn> Get()
        {
            return TutorialServices.GetTutorialList();
        }

        [HttpGet("{id}")]
        public TutorialReturn GetTutorialByID(int id)
        {
            return TutorialServices.GetTutorialById(id);
        }

        // GET api/<TutorialController>/5
        //[HttpGet("{id}")]
        //public TblTutorial GetTutorialbyID(int id)
        //{
        //    return TutorialServices.GetTutorialById(id);
        //}

        // POST api/<TutorialController>
        [HttpPost]
        public void Post([FromBody] string value)
        {
        }

        // PUT api/<TutorialController>/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody] TblTutorial value)
        {
             TutorialServices.UpdateTutorial(value);
        }

        // DELETE api/<TutorialController>/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }

Also add below thing into Program.cs file

// Add services to the container.\
builder.Services.AddDbContext<PeopleContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("People")));

builder.Services.AddScoped<ITutorialService, TutorialService>();
builder.Services.AddScoped<PeopleContext, PeopleContext>();

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllOrigins",
        builder =>
        {
            builder.AllowAnyHeader()
                           .AllowAnyOrigin()
                          .AllowAnyMethod();
        });
});


app.UseCors("AllOrigins");

Appsetting.json

{
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "People": "Data Source=DT13\\SQLEXPRESS2019;Initial Catalog=People;Integrated Security=True;TrustServerCertificate=True;"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}

PeopleContext file replace with below thing


    protected readonly IConfiguration Configuration;
    //public PeopleContext()
    //{
    //}

    //public PeopleContext(DbContextOptions<PeopleContext> options)
    //    : base(options)
    //{
    //}
    public PeopleContext(IConfiguration configuration)
    {
        Configuration = configuration;
    }
    protected override void OnConfiguring(DbContextOptionsBuilder options)
    {
        options.UseSqlServer(Configuration.GetConnectionString("People"));
    }

Updated service with new connection string thing.


    public class TutorialServices : ITutorialServices

    {
        private readonly PeopleContext _dbContext;
        public TutorialServices(PeopleContext dbContext)
        {
            _dbContext = dbContext;
        }


        public TutorialReturn GetTutorialById(int id)
        {

            get data from database

        }

        public List<TutorialReturn> GetTutorialList()
        {
            var lstTutorial = (from x in _dbContext.TblTutorials
                                select new TutorialReturn
                                {
                                    Id = x.Id,
                                    Address = x.Address,
                                    BirthDate = x.BirthDate,
                                    Email = x.Email,
                                    GivenName = x.GivenName,
                                    PhoneNumber = x.PhoneNumber,
                                    Surname = x.Surname
                                }).Take(50).ToList();
            return lstTutorial;

        }

        public int UpdateTutorial(TblTutorial Tutorial)
        {

            var update = _dbContext.TblTutorials.Where(o => o.Id == Tutorial.Id).FirstOrDefault();
            if (update != null)
            {
                update.Surname = Tutorial.Surname;
                update.GivenName = Tutorial.GivenName;
                update.Email = Tutorial.Email;
                update.BirthDate = Tutorial.BirthDate;
                update.PhoneNumber = Tutorial.PhoneNumber;
                update.Address = Tutorial.Address;
                _dbContext.Update(update);
                _dbContext.SaveChanges();
            }

            return Tutorial.Id;
        }
    }
}