# 211129 TIL ([Ruby, slim] DB에서 원하는 데이터 쿼리, 프론트단에 나타내기 / [React] 음성녹음 Modal UI 수정)

장기현장실습

PLSnote 이슈

#2678 노트작성 버튼이 나타나는 곳을 더 확대하고자 합니다 이슈 진행중 

• 맵/본부/팀 에서 새 노트작성시 나타날 프로젝트 리스트 쿼리중 
  • find_by를 사용했더니 1줄만 가져와서 where로 바꿔 쿼리를 했다. 계획에 있는 프로젝트에서 확인되기전 프로젝트 리스트를 가져오기 위해 access: :open_permission인것만 가져왔는데 이것과는 다른 조건인 것 같았다. 결과가 다르게 나왔기 때문이다.

    # project.rb
    # 팀의 프로젝트 리스트 중 새로운 계획 생성 가능한 프로젝트 목록
    
    def self.has_permission(team) 
      joins(:project_teams).where(id: team.project_teams.where(access: :open_permission).pluck(:project_id)) 
    end

  • selected 부분을 추가해주기 위해 팀이 존재할 때의 @planable 값도 선언해 주었다.

    // _form.html.slim
    
    .form-group
      = f.label :project, t('project') 
        - if @team.present? 
          = f.collection_select :project_id, @team.projects.has_permission(@team).proper_order.distinct, :id, :name, {selected: @planable&.id}, {class: 'form-control', data: {action: 'change->activity#selectTeam'}, "select-team-url": select_team_map_activities_path(@map)}

    # activities_controller.rb
    
    if @team.present? 
      @planable = @team.open_planables.for_team(@team).proper_name_order.first 
    elsif @project.present? 
      @project.open_planables.for_user(@project, current_user).proper_name_order.first 
    else 
      @planable = @planable 
    end

 

SNU 성문분석 이슈

#42 음성 녹음하기 Modal UI 수정 이슈 (완료) 

• Modal body contents를 전체적으로 가운데 정렬 
• 녹음, 일시정지, 정지 버튼 UI 수정 
• 녹음 상태에 따라 Text가 바뀌도록 수정 
  • 시작 -> 녹음중 
  • 일시정지 -> 녹음 일시정지 
  • 정지 -> 녹음 완료 파일 
    • Record.js API에 innerHTML이 바뀌도록 코드 수정 
• Format text 필요성이 낮아보여 일단 주석처리로 변경 
• 일시정지 버튼 클릭시, 재개 <-> 일시정지 토글 버튼 처럼 텍스트가 바뀌게 구현되어 있다. 그런데 나는 이미지가 바뀌게 구현하고 싶어 수정중인데 innerHTML에서 FontAwesomeIcon을 인식 못함 
  • 여러 해결 방법을 모색했으나 나타나지 않았다. 그래서 아래 text가 변하는 것이 있으니 버튼 아이콘은 그대로 하는 것으로 마무리했다. 

 

 

before

after