ouatterrir-app/src/components/contents/PuissanceAgir.vue

<script>

import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'
import { UserStore } from '@/stores/user'
import { CommonStore } from '@/stores/common'

import CartoucheLayout from '@components/layout/CartoucheLayout.vue';

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiChevronRight } from '@mdi/js';
import { mdiChevronDown } from '@mdi/js';
import { mdiPencilPlus } from '@mdi/js';
import { mdiPencilPlusOutline } from '@mdi/js';
import { mdiRhombus } from '@mdi/js';
import { mdiRhombusOutline } from '@mdi/js';


export default {
  props: ['cid'],
  data(){
    return {
      opened_besoin_id: null,
      chevronright_path: mdiChevronRight,
      chevrondown_path: mdiChevronDown,
      pencilplus_path: mdiPencilPlus,
      pencilplusoutline_path: mdiPencilPlusOutline,
      rhombus_path: mdiRhombus,
      rhombusoutline_path: mdiRhombusOutline
    }
  },
  computed: {
    ...mapState(UserStore,['isloggedin']),
    ...mapState(ConcernementsStore,['opened_concernement',
                                    'ct_concernement',
                                    'ct_entite'
                                  ]),
    ...mapState(CommonStore,['hover_elmt'])
  },
  created () {
    console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
  },
  mounted() {
    
  },
  methods: {
    ...mapActions(CommonStore,['setHoverElmt']),
    onClickBesoin(id){
      console.log("onClickBesoin", id);
      this.opened_besoin_id = id === this.opened_besoin_id ? null : id;
    },
    besoinClass(id){
      return this.opened_besoin_id === id ? "opened" : "";
    },
    onHoverItem(type, pid, bid, rid){
      console.log(`onHoverItem type:${type}, paper_id:${pid} bid:${bid}, rid:${rid}`);
      this.setHoverElmt({
        type: type,
        paper_id: pid,
        id: rid ? rid : bid,
        bid: rid ? bid : null,
        no_popup: true
      });
    }
  },
  components: {
    CartoucheLayout,
    SvgIcon
  }
}

</script>

<template>
  <CartoucheLayout :cid="cid">
    <!-- <template v-slot:header>
    </template> -->

    <template v-slot:main>
      <ul class="besoins">
        <li
          v-for="besoin in opened_concernement.besoins"
          :key="besoin.id"
          class="besoin"
          :id="besoin.id"
          :class="besoinClass(besoin.id)"
          @mouseover="onHoverItem('besoin', besoin.paper_id, besoin.id)"
        >
          <svg-icon
            type="mdi" 
            :path="besoin.id !== opened_besoin_id ? chevronright_path : chevrondown_path"
            class="open-btn"
            @click="onClickBesoin(besoin.id)"
            ></svg-icon>
          <header @click="onClickBesoin(besoin.id)">
            <label 
              :class="{ 'hover': hover_elmt 
                              && (hover_elmt.type === 'besoin' || hover_elmt.type === 'reponse') 
                              && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
              >
              <svg-icon
                type="mdi" 
                :path="rhombus_path"
                 />
                Besoin de l'enqueteur
            </label>
            <h4 class="besoin-description" v-html="besoin.description"/>
          </header>
          <ul class="reponses">
            <li
              v-for="reponse in besoin.reponses"
              :key="reponse.id"
              class="reponse"
              :id="reponse.id"
              @mouseover.stop="onHoverItem('reponse', reponse.paper_id, besoin.id, reponse.id)"
            >
              <label 
              :class="{ 'hover': hover_elmt 
                              && hover_elmt.type === 'reponse' 
                              && hover_elmt.id === reponse.id }"
                >
                <svg-icon
                type="mdi" 
                :path="hover_elmt && hover_elmt.type === 'reponse' && hover_elmt.id === reponse.id ? rhombus_path : rhombusoutline_path"
                 />
                Ressource</label>
              <section v-if="reponse.qui">
                <label for="reponse-qui">Qui</label>
                <p name="reponse-qui" v-html="reponse.qui" />
              </section>
              <section v-if="reponse.quoi">
                <label for="reponse-quoi">Quoi</label>
                <p name="reponse-quoi" v-html="reponse.quoi" />
              </section>    
              <section v-if="reponse.ou">
                <label for="reponse-ou">Où</label>
                <p name="reponse-ou" v-html="reponse.ou" />
              </section>    
              <section v-if="reponse.avec">
                <label for="reponse-avec">Avec</label>
                <p name="reponse-avec" v-html="reponse.avec" />
              </section>    
            </li>
          </ul>
          <a 
              v-if="isloggedin"
              :href="'/api/node/add/reponse?besoin_id='+besoin.id" 
              target="_blank" 
              rel="noopener noreferrer"
              class="contribute-link mdi mdi-pencil-plus">
                <svg-icon type="mdi" :path="pencilplusoutline_path" /> contribuer à ce besoin
            </a>
        </li>
      </ul>
    </template>

    <template v-slot:footer>
    
    </template>

  </CartoucheLayout>
  
</template>