Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

会社個別 > 提出物一覧を vue.js 化した #4549

Merged
merged 14 commits into from
Apr 20, 2022
4 changes: 3 additions & 1 deletion app/controllers/api/products_controller.rb
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
# frozen_string_literal: true

class API::ProductsController < API::BaseController
before_action :require_staff_login_for_api, only: :index
before_action :require_login_for_api, only: :index

def index
@company = Company.find(params[:company_id]) if params[:company_id]
@products = Product
.list
.ascending_by_date_of_publishing_and_id
.page(params[:page])
@products_grouped_by_elapsed_days = @products.group_by { |product| product.elapsed_days >= 7 ? 7 : product.elapsed_days }
@products = @products.joins(:user).where(users: { company_id: params[:company_id] }) if params[:company_id]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

なるほど、joinsメソッドでテーブルを結合させて絞り込んでいるんですね👍

end
end
6 changes: 0 additions & 6 deletions app/controllers/companies/products_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,5 @@ class Companies::ProductsController < ApplicationController

def index
@company = Company.find(params[:company_id])
@products = Product
.includes(:user)
.where(users: { company: @company })
.list
.order_for_list
.page(params[:page])
end
end
24 changes: 24 additions & 0 deletions app/javascript/company-products.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Vue from 'vue'
import CompanyProducts from './company-products.vue'

document.addEventListener('DOMContentLoaded', () => {
const selector = '#js-company-products'
const products = document.querySelector(selector)
if (products) {
const title = products.getAttribute('data-title')
const companyID = products.getAttribute('company-id')
const isMentor = products.getAttribute('data-mentor-login')
const currentUserId = products.getAttribute('data-current-user-id')
new Vue({
render: (h) =>
h(CompanyProducts, {
props: {
title: title,
companyID: companyID,
isMentor: isMentor === 'true',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

文字列で渡すことでwarningを回避しているんですね!

currentUserId: currentUserId
}
})
}).$mount(selector)
}
})
123 changes: 123 additions & 0 deletions app/javascript/company-products.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<template lang="pug">
.page-body
.container(v-if='products.length === 0')
.o-empty-message
.o-empty-message__icon
i.far.fa-smile
p.o-empty-message__text
| {{ title }}はありません
.container.is-md(v-else)
nav.pagination(v-if='totalPages > 1')
pager(v-bind='pagerProps')
.thread-list.a-card
.thread-list__items
product(
v-for='product in products',
:key='product.id',
:product='product',
:currentUserId='currentUserId',
:isMentor='isMentor'
)
nav.pagination(v-if='totalPages > 1')
pager(v-bind='pagerProps')
</template>

<script>
import Pager from 'pager.vue'
import Product from 'product.vue'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Productをインポートすることで提出者orメンターが出てしまうので、何かしら対応が必要になってくるのかな〜と思いました💦
スクリーンショット

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

コメント有難うございます!komagataさんに確認いたします。
@komagata さん
こちら、この表記(提出者、メンター)が表示されても問題ないでしょうか?元来誰がコメントしているのかまでアイコンで見えることから、この表記が出ても論理的に問題ないのかなとは思います。またはこの表記を消した方が良いでしょうか?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@clio209 こちらそのままで問題ございません〜

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@garammasala29 さん
レビュー有難うございます!修正しましたので、お時間ある時にご確認いただけますと幸いです。


export default {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export default {
export default {

公式ドキュメントなど1行空いていることが多い気がしますね

components: {
product: Product,
pager: Pager
},
props: {
companyID: { type: String, required: true },
title: { type: String, required: true },
isMentor: { type: Boolean, required: true },
currentUserId: { type: String, required: true }
},
data() {
return {
products: [],
currentPage: Number(this.getParams().page) || 1,
totalPages: 0,
params: this.getParams()
}
},
computed: {
url() {
return (
'/api/products/' +
`?page=${this.currentPage}` +
(this.companyID ? `&company_id=${this.companyID}` : '')
)
},
pagerProps() {
return {
initialPageNumber: this.currentPage,
pageCount: this.totalPages,
pageRange: 5,
clickHandle: this.paginateClickCallback
}
}
},
created() {
window.onpopstate = () => {
location.replace(location.href)
}
this.getProducts()
},
methods: {
token() {
const meta = document.querySelector('meta[name="csrf-token"]')
return meta ? meta.getAttribute('content') : ''
},
getProducts() {
fetch(this.url, {
method: 'GET',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-Token': this.token()
},
credentials: 'same-origin',
redirect: 'manual'
})
.then((response) => {
return response.json()
})
.then((json) => {
this.products = []
json.products.forEach((product) => {
this.products.push(product)
})
this.totalPages = json.total_pages
})
.catch((error) => {
console.warn(error)
})
},
getParams() {
const params = {}
location.search
.slice(1)
.split('&')
.forEach((query) => {
const queryArr = query.split('=')
params[queryArr[0]] = queryArr[1]
})
return params
},
paginateClickCallback(pageNumber) {
this.currentPage = pageNumber
this.getProducts()
history.pushState(null, null, this.newUrl(pageNumber))
window.scrollTo(0, 0)
},
newUrl(pageNumber) {
return location.pathname + (pageNumber === 1 ? '' : `?page=${pageNumber}`)
}
}
}
</script>
1 change: 1 addition & 0 deletions app/javascript/packs/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,4 @@ import '../users-questions.js'
import '../company-select.js'
import '../users-answers.js'
import '../training-info-toggler.js'
import '../company-products.js'
7 changes: 1 addition & 6 deletions app/views/companies/products/index.html.slim
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,4 @@ header.page-header
= render 'companies/tabs', company: @company

.page-body
.container.is-md
= paginate @products
- if @products.present?
.thread-list.a-card
= render partial: 'products/product', collection: @products, as: :product
= paginate @products
#js-company-products(company-id="#{@company.id}" data-title="#{title}" data-mentor-login="#{mentor_login?}" data-current-user-id="#{current_user.id}")
2 changes: 1 addition & 1 deletion app/views/products/index.html.slim
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ header.page-header
- if current_user.admin? || current_user.mentor?
= render 'products/tabs'

#js-products(data-title="#{title}" data-selected-tab="all" data-mentor-login="#{mentor_login?}" data-current-user-id="#{current_user.id}")
#js-products(data-title="#{title}" data-selected-tab="all" data-mentor-login="#{mentor_login?}" data-current-user-id="#{current_user.id}")
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

今回のissueに関連はないかなと思うので、差分が出ていて気になりました!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

すいません、毎回コンフリクトが起こり、色々弄って先祖返りしたりしたためかと思われます。。恥💦💦

13 changes: 11 additions & 2 deletions test/integration/api/products_test.rb
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
require 'test_helper'

class API::ProductsTest < ActionDispatch::IntegrationTest
fixtures :products

test 'GET /api/products.json' do
get api_products_path(format: :json)
assert_response :unauthorized
Expand Down Expand Up @@ -54,4 +52,15 @@ class API::ProductsTest < ActionDispatch::IntegrationTest
actual = response.parsed_body['products'].map { |product| product['practice']['title'] }
assert_equal expected, actual
end

test 'GET /api/products.json?company_id=362477616' do
company = companies(:company4)
get api_products_path(company_id: company.id, format: :json)
assert_response :unauthorized

token = create_token('kimura', 'testtest')
get api_products_path(company_id: company.id, format: :json),
headers: { 'Authorization' => "Bearer #{token}" }
assert_response :ok
end
end