# 211207 TIL ([Ruby, slim] link_to URL 연결하기, DB 데이터 쿼리 / [React, tsx] useState로 값 설정하기, type 마다 다른 UI 나오도록 수정)

장기현장실습

PLSnote 이슈

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

• 맵/전략/세부전략 에서 새 노트 작성 버튼 클릭 시 link_to 수정

  // activities/index.html
  
  - elsif @detailed_strategy.present? 
    = link_to_if_with_disabled_tooltip @detailed_strategy.allow_new_note_to?(current_user), new_map_activity_path(@map, (@planable.present? ? {detailed_strategy_id: @detailed_strategy, "#{@planable.class.name.underscore}_id": @planable} : {detailed_strategy_id: @detailed_strategy})), method: :get, remote: false, data: nil, htmlclass: "btn btn-outline-success btn-sm", disabled_title: disabled_title_by_map_type

   
  • allow_new_note_to 를 불러오지 못해서 코드를 확인해보니 detailed_strategy 기준으로 작성된 코드가 없어서 이를 추가해주었다.

    # permission.rb
    
    def allow_activity_writing_to(user) 
      class_type = self.class.to_s 
      case class_type 
      when "DetailedStrategy" 
        return false unless (self.users.include? user or self.strategy.users.include? user) 
        projects.included_as_project_user(user, access: :open_permission).present? 
      end 
    end 
    
    def not_allow_new_plan_but_already_has_open_plans_to(user) 
      class_type = self.class.to_s 
      case class_type 
      when "DetailedStrategy" 
        return false unless (self.users.include? user or self.strategy.users.include? user) 
        projects.included_as_project_user(user, access: :open_permission).present? and exists_open_plan?(user) 
      end 
    end 
    
    def exists_open_plan?(user) 
      class_type = self.class.to_s 
      case class_type 
      when "DetailedStrategy" 
        plans.open_plan.teams(self).count > 0 
      end 
    end

• 맵/전략/세부전략 에서 새 노트작성시 나타날 프로젝트 리스트 쿼리 완료
  • 이슈맵이 아닐 때는 has_plan_project_of_detailed_strategy 가 실행되게 하고, 이슈맵일 때는 has_issue_project_of_detailed_strategy가 실행되도록 코드를 수정했다.

    // activities/_form.html.slim
    
    .form-group
      = f.label :project, t('project')
      - if @map.issue_map?
        - if @team.present?
          = f.collection_select :project_id, @team.projects.has_issue_project_of_team(@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)}
        - elsif @detailed_strategy.present?
          = f.collection_select :project_id, @detailed_strategy.projects.has_issue_project_of_detailed_strategy(@detailed_strategy).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)}
      - else
        - if @team.present?
          = f.collection_select :project_id, @team.projects.has_plan_project_of_team(@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)}
        - elsif @detailed_strategy.present?
          = f.collection_select :project_id, @detailed_strategy.projects.has_plan_project_of_detailed_strategy(@detailed_strategy).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)}

    • 각 함수는 현재 선택된 세부 전략의 확인전 계획 또는 이슈 데이터를 가져오고, 그 데이터에서 project_id를 가져와 세부전략의 프로젝트 리스트를 쿼리하는 함수이다.

      # project.rb
      
      def self.has_plan_project_of_detailed_strategy(detailed_strategy) 
        where(id: detailed_strategy.plans.where(status: :open_plan).pluck(:project_id)) 
      end 
      
      def self.has_issue_project_of_detailed_strategy(detailed_strategy) 
        where(id: detailed_strategy.issues.where(status: :open_issue).pluck(:project_id)) 
      end

    • 이슈 맵에서 detailed_strategy_id=300일 때만 프로젝트 리스트가 계획 리스트가 맞지 않는 문제가 있다. 5개가 나오는데 plan에서 체크해보면 7가지이다. 

 

SNU 성문분석 이슈

#50 N:N 분석(시각화) 기능 추가 이슈 진행중 

• 비교 음성 선택 컴포넌트 2개, 선택된 음성 컴포넌트 2개 추가

  

  • 비교 음성 선택 컴포넌트가 2개 있어서 선택된 음성 컴포넌트가 각각 실행되도록 수정

    // ManyToManyAnalysisPage.tsx
    
    export default function ManyToManyAnalysisPage() { 
      const [ selectedVoices1, setSelectedVoices1 ] = useState<Voice[]>([]); 
      const [ selectedVoices2, setSelectedVoices2 ] = useState<Voice[]>([]); 
      return (
        <Col xs="4"> 
          <SelectedVoiceCard analysisType={'multiple'} voices={ selectedVoices1 }/> 
          <SelectedVoiceCard className="mt-4" analysisType={'multiple'} voices={ selectedVoices2 }/> 
        </Col> 
      ); 
    }

    
    
  • N:N일때는 음성 파일의 용량을 보여주지 않도록 하기 위해 코드를 수정
    • 1:N이 사용하는 VoiceCheckBox.tsx를 같이 사용한다. relations이라는 타입을 주어 다르게 보여지도록 수정했다.

      // VoiceCheckBox.tsx
      
      type Props = { 
      voice: Voice, 
      selected: boolean, 
      relations: string, 
      } 
      
      export default function VoiceCheckBox({ voice, selected, relations }: Props):JSX.Element { 
        return ( 
          <Row> 
            <Col xs="1"><FontAwesomeIcon icon={ faCheck } className={selected ? 'text-info' : 'text-secondary'}/></Col> 
            <Col xs={ relations == 'NtoN' ? "6" : "5"}>{ voice.name }</Col> 
            <Col xs={ relations == 'NtoN' ? "5" : "4"}>{ moment(voice.obtained_at).format('YYYY-MM-DD hh:mm:SS') }</Col> 
            { relations == '1toN' &&  
            <Col xs="2">{ `${voice.voice_file_size} MB` }</Col> 
            } 
          </Row> 
        ); 
      }