İçeriğe geç →

VueJs ile TodoList Yapımı

Vuejs öğrenmeye yeni başladım ve tecrübelerimi sizlerle bir örnek üzerinden aktarmak istedim.Vuejs İle küçük bir TodoList uygulaması nasıl yapılır bunu anlatacağım.Yaptığım örneği githubdan klonlayabilirsiniz ve Dosyaların içinde açıklama kısmında nelerin yapıldığını görebilirsiniz.

TodoList Gereksinimler:

  • Kategori ekleme
  • Kategoriye özel görev eklemek
  • Yapılanlar listesi
  • Yapılmayanlar listesi
  • Görev Silme

GITHUB : https://github.com/emexxRepo/VuejsTodoListExample

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
    <style>
        header {
            width: 100%;
            margin: auto;
            background: #00a2ed;
            color: #fff0ff;
            font-size: 50px;
            height: 50px;
            padding: 30px;
            text-align: center;
        }

        #left-bar {
            width: 10%;
            height: auto;
            background: #00a2cd;
            float: left;
        }

        #left-bar ul {
            padding: 10px;
            list-style-type: none;
        }

        #right-bar {
            float: left;
            width: 90%;
            height: auto;
            background: #00a2cd;
        }

        #right-bar ul {
            padding: 20px;
            color: #fff0ff;
        }

        #right-bar ul li a{
            color:#000000;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<header>
    todolist
</header>
<div id="app">
    <div id="left-bar">

        <!-- Tüm kategorileri for döngüsü ile gösteriyoruz -->
        <ul v-for="(list,index) in lists">
            <li>
                <!-- eğer tıklanırsa listenin aıdnı tabbed methoduna gönderiyoruz -->
                <a @click="tabbed(list.name)">
                    {{ list.name }}
                </a>
            </li>
        </ul>
        <!-- Yeni kategori oluşturduğumuz input eğer enter tuşuna basar isek listeye ekler-->
        <input type="text" placeholder="new list name" v-model="activeList" v-on:keyup.enter="saveList">
    </div>
    <div id="right-bar">
        <div id="top">
            <h3>To do</h3>
            <input type="text" v-on:keyup.enter="addList" v-model="activeData" placeholder="add Something to do">
            <p v-if="todoList.length === 0">No more work Done..</p>
            <ul>
                <li v-for="(item, index) in todoList">

                    <!-- görevlerin yapılp yapılmadığını kontrol ettiğimi checkbox -->
                    <input type="checkbox" v-model="item.Status">
                    {{ item.Title }}

                    <!-- DeleteMethoduna item'ın id sini gönderiyıruz -->
                    <a  @click="deleteDataList(item.Id)">!Delete</a>
                </li>
            </ul>

        </div>
        <hr>
        <div id="under">
            <h3>Completed</h3>
            <!-- eğer yapılacak iş yoksa alttaki mesajı gönderiyoruz -->
            <p v-if="todoListFinished.length === 0">
                No work to do
            </p>
            <!-- yapılmış işleri gösteriyoruz -->
            <ul>
                <li v-for="(item, index) in todoListFinished ">
                    <input type="checkbox" v-model="item.Status">
                    {{ item.Title }}
                </li>
            </ul>
        </div>


    </div>

</div>
</body>
</html>

App.js


// When document is ready
window.addEventListener('load', function () {
    // yeni bir vue instance'ı oluşturuyoruz
    new Vue({
        el: '#app',
        name: 'TodoList',
        data: {

            //hedeflenen sekmeyi varsayılan olarak Genele eşitliyoruz

            targetTab:'General',

            // Kategoriyi alacağımız değişken
            activeList: '',

            // Görevi alacağımız değişken
            activeData: '',

            // Varsayılan olarak gelen yapılacaklar
            dataList: [
                {
                    Id:1,Title:'Do your homework',
                    Status:true,List:'Special'
                },

                {
                    Id:2,Title:'Learn VueJS',
                    Status:true,List:'General'
                },

                {
                    Id:3,Title:'Learn Smyfony',
                    Status:false,List:'Work'
                },

                {
                    Id:4,Title:'Learn English',
                    Status:false,List:'General'
                }

            ],

            // varsayılan olarak kategoriler
            lists: [
                {name: 'General'},
                {name: 'Work'},
                {name: 'Special'}
            ]
        },
        methods: {
            // kategoriye tıkladığımızda hedeflenen sekme yi eşitliyoruz
            tabbed(target) {
                this.targetTab = target;
            },

            // görevi datalistten siliyoruz
            deleteDataList(Id){
                // idsini aldığımız görevi ilk olarak datalistte varmı yokmu diye kontrol ediyoruz
                let data = this.dataList.find(todo => todo.Id === Id);
                // eğer boş ise false döndürüyoruz
                if (data === null){
                    alert('Todo Not Found ');
                    return false;
                }

                //data listte foreach döngüsünde undefined olduğunu için data list onu bir değişkene aktarıyoruz
                var thatList = this.dataList;

                // datalist değişkeninde dönüyoruz
                this.dataList.forEach(function (item,index) {
                    console.log(data);

                    // eğer data listin id si ve gönderilen id eşit ise değeri datalistten splice ediyoruz
                    if (item.Id === data.Id){
                        thatList.splice(index,1);
                    }

                });

            }
        },
        computed: {

            // Yeni Kategori kaydı yaptığımız computed property
            saveList() {
                // eğer gönderilen kategori mevcut data listte varsa false döndürüyoruz
                var tempData = this.dataList.find(x => x.Title === this.activeList);
                if (tempData != undefined){
                    alert(this.activeList + " is available in lists");
                    return false;
                }

                // eğer yoksa listenin içine ekliyoruz ve activelisti boşaltıyoruz
                this.lists.push({
                    name:this.activeList
                });
                this.activeList = '';
            },

            //Yeni Görev kaydı yaptığımız computed property


            addList() {
                // gönderilen görev listenin içinde varmı diye kontrol ediyıruz
                var tempData = this.lists.find(x => x.name === this.activeData);

                // eğer varsa bu görev var mesajı veriyoruz
                if (tempData != undefined){
                    alert(this.activeData + " is available in lists");
                    return false;
                }

                // eğer yoksa mevcut görevler listesine ekliyoruz
                this.dataList.push({
                    Id: this.activeData.length + 1,
                    Title:this.activeData,
                    Status:false,
                    List: this.targetTab
                });

                this.activeData = '';
            },

            //Yapılacak listesi

            todoList(){
                return this.dataList.filter(todo => todo.Status === false && todo.List === this.targetTab);

            },

            //Yapılmışlar listesi
            todoListFinished(){
                return this.dataList.filter(todo => todo.Status === true && todo.List === this.targetTab);
            },

        },



    })
})

Kategori: VueJs

Yorumlar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir