Last active
November 5, 2019 14:16
-
-
Save amorfati0310/fed9b682bd1ce7763b6a28cd8804b56f to your computer and use it in GitHub Desktop.
Refactoring191105.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="MyBookMarks"> | |
<MainWrapper> | |
<div class="container"> | |
<div class="row margin-top-40"> | |
<SideBarHeading | |
:title="title" | |
/> | |
</div> | |
<div class="row margin-top-35"> | |
<div class="col-xs-2"> | |
<SideCategoryList | |
:sideCategoryList="bookMarkSideCategories" | |
:portfolioTotalCount="portfolioBookmarksCount" | |
/> | |
</div> | |
<div class="col-xs-10"> | |
<GigCardLoaderList | |
v-if="isLoading" | |
:row=row | |
:col=col | |
/> | |
<BookMarkList | |
v-else | |
:myBookMarkList="getBookMarkList" | |
/> | |
<div class="paginate-container" v-if="hasPaginate"> | |
<Paginate | |
:page-count="bookMarkData.last_page" | |
:click-handler="goToPage" | |
prev-text="<<" | |
next-text=">>" | |
container-class="paginate" | |
/> | |
</div> | |
</div> | |
</div> | |
</div> | |
</MainWrapper> | |
</div> | |
</template> | |
<script> | |
import { mapActions, mapState, mapGetters } from 'vuex'; | |
import MainWrapper from '../../shared/MainWrapper.vue'; | |
import SideBarHeading from '../../shared/SideBarHeading.vue'; | |
import SideCategoryList from '../../shared/SideCategoryList.vue'; | |
import GigCardLoaderList from '../../shared/GigCardLoaderList.vue'; | |
import BookMarkList from './BookMarkList.vue'; | |
import Paginate from 'vuejs-paginate'; | |
export default { | |
name: 'MyBookMarks', | |
components: { | |
MainWrapper, | |
SideCategoryList, | |
BookMarkList, | |
SideBarHeading, | |
GigCardLoaderList, | |
Paginate | |
}, | |
props: [], | |
data() { | |
return { | |
sideCategoryList: [], | |
isLoading: false, | |
title: '찜한 서비스', | |
row: 4, | |
col: 4, | |
}; | |
}, | |
computed: { | |
...mapState('common', [ | |
'portfolioBookmarksCount', | |
'bookMarkData', | |
'bookMarkSideCategories' | |
]), | |
...mapGetters('common', [ | |
'getBookMarkList' | |
]), | |
getQuery() { | |
return this.$route.query; | |
}, | |
hasPaginate() { | |
return this.bookMarkData && this.bookMarkData.last_page > 1; | |
}, | |
}, | |
watch: { | |
$route: 'updateBookMarkList', | |
bookMarkData: 'closeLoading', | |
}, | |
methods: { | |
...mapActions('common/', [ | |
'setNavBarCategoryListAction', | |
'updateBookMarkListAction', | |
'getBookMarkSideListAction' | |
]), | |
updateBookMarkList() { | |
this.isLoading = true; | |
this.updateBookMarkListAction(this.getQuery); | |
}, | |
closeLoading() { | |
this.isLoading = false; | |
}, | |
goToPage(pageNum) { | |
this.$router.push({ | |
path: '/my_bookmarks', | |
query: { ...this.getQuery, page: pageNum } | |
}); | |
} | |
}, | |
created() { | |
// fix navCategory | |
this.setNavBarCategoryListAction('category'); | |
// getCategoryCount | |
this.getBookMarkSideListAction(); | |
this.updateBookMarkList(); | |
} | |
}; | |
</script> | |
<style lang="scss"> | |
.MyBookMarks { | |
.paginate-container { | |
display: flex; | |
justify-content: center; | |
} | |
.paginate { | |
display: flex; | |
a { | |
padding: 11px 14px; | |
width: 42px; | |
height: 42px; | |
font-size: 11px; | |
color: #373a3c; | |
background-color: #fff; | |
cursor: default; | |
border: 1px solid #ccc; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
text-decoration: none; | |
} | |
.disabled { | |
a { | |
pointer-events: none; | |
} | |
} | |
} | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="MyBookMarksPortfolio"> | |
<MainWrapper> | |
<div class="container"> | |
<div class="row margin-top-40"> | |
<SideBarHeading | |
:title="title" | |
/> | |
</div> | |
<div class="row margin-top-35"> | |
<div class="col-xs-2"> | |
<SideCategoryList | |
:sideCategoryList="bookMarkSideCategories" | |
:portfolioTotalCount="portfolioBookmarksCount" | |
/> | |
</div> | |
<div class="col-xs-10"> | |
<GigCardLoaderList | |
v-if="isLoading" | |
:row=row | |
:col=col | |
/> | |
<PortfolioList | |
v-else | |
:portfolioList="getPortfolioList" | |
/> | |
<div class="paginate-container" v-if="hasPaginate"> | |
<Paginate | |
:page-count="Number(portfolioData.last_page)" | |
:click-handler="goToPage" | |
prev-text="<<" | |
next-text=">>" | |
container-class="paginate" | |
/> | |
</div> | |
</div> | |
</div> | |
</div> | |
</MainWrapper> | |
</div> | |
</template> | |
<script> | |
import { mapActions, mapState, mapGetters } from 'vuex'; | |
import MainWrapper from '../../shared/MainWrapper.vue'; | |
import SideBarHeading from '../../shared/SideBarHeading.vue'; | |
import SideCategoryList from '../../shared/SideCategoryList.vue'; | |
import GigCardLoaderList from '../../shared/GigCardLoaderList.vue'; | |
import PortfolioList from './PortfolioList.vue'; | |
import Paginate from 'vuejs-paginate'; | |
export default { | |
name: 'MyBookMarksPortfolio', | |
components: { | |
MainWrapper, | |
SideCategoryList, | |
PortfolioList, | |
SideBarHeading, | |
GigCardLoaderList, | |
Paginate | |
}, | |
props: [], | |
data() { | |
return { | |
sideCategoryList: [], | |
isLoading: false, | |
title: '포트폴리오 찜한 서비스', | |
row: 4, | |
col: 4, | |
}; | |
}, | |
computed: { | |
...mapState('common', [ | |
'portfolioBookmarksCount', | |
'portfolioData', | |
'bookMarkSideCategories' | |
]), | |
...mapGetters('common', [ | |
'getPortfolioList' | |
]), | |
getQuery() { | |
return this.$route.query; | |
}, | |
hasPaginate() { | |
return this.portfolioData && this.portfolioData.last_page > 1; | |
}, | |
}, | |
watch: { | |
$route: 'updatePortfolioList', | |
portfolioData: 'closeLoading', | |
}, | |
methods: { | |
...mapActions('common/', [ | |
'setNavBarCategoryListAction', | |
'updatePortfolioListAction', | |
'getBookMarkSideListAction', | |
'setCurrentServiceTypeAction' | |
]), | |
updatePortfolioList() { | |
this.isLoading = true; | |
this.updatePortfolioListAction(this.getQuery); | |
}, | |
closeLoading() { | |
this.isLoading = false; | |
}, | |
goToPage(pageNum) { | |
this.$router.push({ | |
path: '/my_bookmarks/portfolio', | |
query: { ...this.getQuery, page: pageNum } | |
}); | |
} | |
}, | |
created() { | |
// fix navCategory | |
this.setCurrentServiceTypeAction('MARKET'); | |
this.setNavBarCategoryListAction('category'); | |
// getCategoryCount | |
this.getBookMarkSideListAction(); | |
this.updatePortfolioList(); | |
} | |
}; | |
</script> | |
<style lang="scss"> | |
.MyBookMarksPortfolio { | |
.paginate-container { | |
display: flex; | |
justify-content: center; | |
} | |
.paginate { | |
display: flex; | |
a { | |
padding: 11px 14px; | |
width: 42px; | |
height: 42px; | |
font-size: 11px; | |
color: #373a3c; | |
background-color: #fff; | |
cursor: default; | |
border: 1px solid #ccc; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
text-decoration: none; | |
} | |
.disabled { | |
a { | |
pointer-events: none; | |
} | |
} | |
} | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
기타
삽질들 1.
Image default Src 랑 error Handlig 매번 같은 부분 처리하는 부분 때문에 따로 컴포넌트로 뺐는데
Image.vue라는 이름으로 인식을 못 함 ! tag네이밍이랑 뭔가 겹치게 되어 있는 것 같다. 이상하네 React는 되었는데
결국 이 부분 다시 적어줌
삽질들 2 .
php router 에서 다시 vue router에 인식하는 구조이므로
bookmarks/
-> router 설계에 대한 부분
param으로 하고 쿼리로 하는 거는 뭐 통일 시키면 된다고 하는데
my_bookmarks/ 각 아이템 마다 query로 달라지고
my_bookmarks/portfolio만
이상하다고 느꼈던 부분
my_bookmarks/categories/all
my_bookmarks/categories/1
my_bookmarks/categories/2
my_bookmarks/portfolio
my_bookmarks 면 카테고리만 나오는 부분? -> 근데 어느정도 보통 일반 아이템들은 카테고리 안에 있는 거니까 명시 안 해줬다고 해도 무방?
php 에서는 my_bookmarks 이렇게 받고