[ Laravel + Vue.js ] 나만의 To Do List 만들기 - Navbar 구현

Navbar는 화면의 좌측에 위치하여, 간편하게 카테고리를 선택할 수 있도록 도와줍니다.

 

카테고리에는 전체, 중요, 그룹별, 패턴별이 존재합니다. 

 

그리고 그룹을 생성할 수 있는 버튼도 존재합니다. 

 

 

그룹 / 패턴 DropBox

그룹

<div class="form-floating border-b-2 py-2">
  <select class="form-select bg-gray-400" id="floatingSelect" aria-label="Floating label select example" @change="changeCategory(categoryNum)" v-model="categoryNum" @click="Emptyalert">
    <option value=" " selected></option>
    <template v-for="Group in groupArr" :key="Group.id">                                
    	<option :value="Group.group_name" :ref="`getData${Group.group_name}`">{{ Group.group_name }}</option>
    </template>                       
  </select>
  <label for="floatingSelect" class="text-gray-600">Group with selects</label>
</div>

그룹은 메인 컴포넌트에서 그룹명을 받아온 것을 이용해 v-for를 이용해 select dropbox form을 사용합니다.

 

 

패턴

<div class="form-floating border-b-2 py-2">
  <select class="form-select bg-gray-400" id="floatingSelect2" aria-label="Floating label select example" @change="changeCategory(pattern)" v-model="pattern">
  	<option value=" " selected></option>
  	<template v-for="(value, i) in patternArr" :key="i">            
  		<option :value="value" :ref="`getData${value}`">{{ value }}</option>
  	</template>                       
  </select>
  <label for="floatingSelect2" class="text-gray-600">Pattern</label>
</div>

패턴은 매일, 요일별을 array로 만들어 v-for과 select dropbox form을 이용했습니다. 

 

 

카테고리 변경 함수

<div class="border-b-2 p-2" @click="changeCategory('All')" ref="getDataAll">全体</div>
<div class="border-b-2 p-2 p-2" @click="changeCategory('important')" ref="getData8080">重要</div>

전체과 중요카테고리는 div박스에 @Click 이벤트를 이용해서 changeCategory라는 함수를 실행

 

<select class="form-select bg-gray-400" id="floatingSelect2" aria-label="Floating label select example" @change="changeCategory(pattern)" v-model="pattern">

그룹과 패턴은 select 태그에 @Change 이벤트를 이용합니다. obtion의 값이 변경될 때마다 함수를 실행시킵니다.

 

changeCategory(val) {
  if( val === "All" || val === "important" ) {
    this.pattern = " ";
    this.categoryNum = " ";
  } else if ( this.patternArr.indexOf(val) >= 0 ) {
    this.categoryNum = " ";
  } else {
  	this.pattern = " ";
  }

  this.$emit("getCategoryStatus", val);         
},

changeCategory 함수를 보면,  if문을 사용해서 각 조건마다 categoryNum과 pattern을 초기화 하는데, 이것이 무슨 작업이냐면, 

 

그룹을 선택한 상태에서, 다른 카테고리를 선택했을 경우에는 해당 그룹을 초기화 해줘야하니까

 

위의 사진처럼 그룹을 선택한 상태에서, 패턴을 선택하면 그룹이 초기화 되는 것을 볼 수 있고, 그 반대도 성립합니다.

 

 그리고 함수 맨 아래를 보면, emit을 이용해서 해당 CategoryNum값을 파라미터로 보내줍니다.

 

 

ToDoList.vue

<Navbar :group-arr="Groups" @get-category-status="getcategoryStatus" @show-modal="showModal"/>

getcategoryStatus(val) {
  this.categoryStatus = val;
  this.currentState = 0;
  this.ToDoId = '';
  this.showDetail = false;
},

categoryStatus를 받아온 파라미터로 초기화해주고, currentState와 ToDoId와 showDetail은 다른 기능에서 사용되기 때문에 설명은 넘어가겠습니다. 

 

<div class="text-center mb-4"><span class="fs-1"> {{ categoryStatus }} </span></div>

받아온 categoryStatus변수를 이용해서, 지금 선택된 Category의 이름을 화면에 보여줍니다. 

위의 사진을 보면, 그룹에서 취업활동이 선택되어 있으니, 메인 화면의 타이틀도 취업활동으로 변하는 것을 볼 수  있습니다.

 

 

Empty검사 함수

 

만약에 그룹이 비어있는데, 그룹을 클릭하면 새로운 그룹을 만들어달라는 alert창을 띄어주는 함수이다 .

Emptyalert() {
  if( this.groupArr.length === 0) {
  	alert('グループを作ってください。');
	return; 
  }
},

 

---

카테고리에 맞는 Data 가져오기 

watch: {
        categoryStatus(NewVal, OldVal) {            
            this.getResult(1, NewVal);
        },
    },

여기서 watch를 사용했습니다. 

 

watch를 사용하면, 특정 변수의 값이 변경될 때마다, 원하는 코드를 실행시킬 수 있습니다. 

 

위의 코드는 categoryStatus 변수가 변경될 때마다(카테고리가 변경될 때마다) getResult함수를 실행한다. 라는 의미

 

getResult(pageNum = 1, categoryStatus = "All") {
  axios.get('api/todo?page=' + pageNum, {
    params: {
      currentState: this.currentState,
      categoryStatus: categoryStatus
    }
  }).then(res => {                       
    this.ToDoList = res.data.list_arr.data;
    this.pageList = res.data.list_arr;
    this.lastPage = res.data.list_arr.last_page;
    this.total = res.data.list_arr.total; 
  });
},

getResult함수가 무엇이냐면, DB에서 data를 불러오기 위한 함수입니다. 

 

그래서 axios.get 통신을 통해서 불러오는 것을 볼 수 있습니다. 

 

pageNum은 페이징기능에서 필요한 것이므로 설명은 넘어가겠습니다.

 

 

 

api.php

Route::get('/todo', [ToDoListController::class, 'index']);

 

ToDoListController.php

public function index() {    
        if(request('categoryStatus') == "All") {
            $list_arr = ToDoList::where('completion_is', request('currentState'))->orderBy('important_is', 'DESC')->orderBy('id', 'ASC')->paginate(5);
        } 
        
        else if(request('categoryStatus') == "important") {
            $list_arr = ToDoList::where([
                                        ['important_is', 1],
                                        ['completion_is', request('currentState')],
                                        ])->paginate(5);
        } 

        else if( in_array(request('categoryStatus'), ['매일','월','화','수','목','금','토','일'])) {
            $list_arr = ToDoList::where('pattern', request('categoryStatus'))->paginate(5);
        }
        
        else{
            $list_arr = ToDoList::where([
                                    ['completion_is', request('currentState')],
                                    ['group', request('categoryStatus')],
                                    ])->orderBy('important_is', 'DESC')->paginate(5);
        }                
        
        return response()->json([
            'list_arr' => $list_arr
        ], 200);
    }

index함수가 좀 지저분한데... 그 이유가 카테고리마다 불러와야할 카테고리에 따라서 가져와야할 data가 다르기 때문입니다. 

 

DB를 좀 최적화하면 간단하게 할 수 있을 것 같은데 아직 해결을 못했습니다.

 

그래서 카테고리가 전체일 때, 중요일 때, 패턴일 때, 그룹일 때를 if조건을 이용해서 data를 가져옵니다. 

 

위의 과정을 거쳐 category가 변경함에 따라 그에 맞는 Data를 불러오게 됩니다.

 

---