drags-and-nerds/v1-com-officielle/src/infoComponents/InboxContent.vue

<script setup>
  import CloseIcon from '../assets/icons/close.svg'
  import { loadMsgData } from '@/data/msgData.js'
</script>

<template>
    <div id="inboxContainer" class="uiStyle">
      <div id="inboxHeader">
        <div id="inboxTitle">
          <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
        </div>
        <div id="msgNumberStyle">
          <p>{{msgNumber}}</p>
        </div>
      </div>

      <div id="inboxList">
        <div :class="{msgStyle: true, selectedStyle: item.isSelected, unreadStyle: !item.wasRead}" v-for="item in msgList" @click="selectMsg(item)">
          <div class="msgTitle">
            <p><strong>{{item.date}}</strong><br>{{item.title}}</p>
          </div>
          <div class="msgReact">
            <p class="reactStatStyle">{{item.like}}</p>
            <CloseIcon name="testLike" class="icon" :class="{reactedStyle: item.isLiked}"/>
            <p class="reactStatStyle"v-show="item.isEvent">{{item.going}}</p>
            <p v-show="item.isEvent && !item.isGoing" >PARTICIPAN.X.S</p>
            <p v-show="item.isEvent && item.isGoing" class="reactedStyle">JE PARTICIPE!</p>
          </div>
        </div>
      </div>
    </div>
</template>

<style scoped>
  /*================= Mise en page:
    => Mobile First : par défaut, moins de 500px
    => Tablette et PC format haut : de 500 à 1000px
    => PC large : à partir de 1000px
  */

  /*+++++++++++++++++ COPYBOX
      ================ PC HAUT/IPAD
      @media(min-width:500px){}
      ================ PC LARGE
      @media(min-width:1000px){}
  */

  #inboxContainer{
    width:100%;
    position:relative;
    height:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  #inboxHeader{
    width: 100%;
    height: 20%;
    position: relative;
    background-color: var(--main-color);
    color: var(--back-color);
    font-size: 16.1px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #inboxTitle{
    font-family: 'velvelyne';
    font-weight: bold;
    padding-left: 33px;
  }
  #msgNumberStyle{
    font-family: 'lineal';
    font-size: 33px;
    padding-right: 44px;
  }

  #inboxList{
    width:100%;
    height: 75%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
  }

  .msgStyle{
    width:100%;
    height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: var(--main-color);
    border-style: solid;
    border-color: var(--main-color);
    border-width: thin;
    border-radius: 0;
    font-family: 'velvelyne';
    font-weight: bold;
  }

  .selectedStyle{
    background-color: var(--main-color);
    color: var(--accent-color);
    border-color: var(--accent-color);
    font-family: 'lineal';
  }
  .selectedStyle .msgTitle{
    opacity: 1;
  }

  .unreadStyle{
    font-family: 'lineal';
  }
  .unreadStyle .msgTitle{
    opacity: 1;
  }

  .msgStyle:hover{
    background-color: var(--accent-color);
    color: var(--main-color);
  }
  .selectedStyle:hover{
    color: var(--back-color);
    background-color: var(--main-color);
    border-color: var(--back-color);
  }

  .msgTitle{
    padding-left: 33px;
    width: 47%;
    font-size: 16.1px;
    align-items: center;
    opacity: 0.333;
  }
  .msgTitle:hover{
    opacity: inherit;
  }
  .msgTitle strong{
    font-family: 'velvelyne';
    font-size: 11px;
    font-weight: bold;
  }

  .msgReact{
    padding-right: 33px;
    padding-top:16.1px;
    width: 47%;
    height: 33.3%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background-color: transparent;
    font-family: 'velvelyne';
    font-weight: bold;
    font-size: 13.12px;
  }
  @media(min-width:1000px){
    .msgReact{
      font-size: 16.1px;
    }
  }

  .reactStatStyle{
    font-family: 'lineal';
    font-weight: normal;
    width: 20px;
    padding-right: 7.77px;
    text-align: right;
  }

  .msgReact .icon{
    height: 16.1px;
    width: auto;
    margin-top: -3.33px;
  }

  .reactedStyle{
    color: var(--accent-color);
  }

  .msgStyle:hover .reactedStyle{
    color: var(--back-color);
  }

  /*================ PC LARGE*/
  @media(min-width:1000px){}
</style>

<script>
  import Moveable from 'vue3-moveable';
  import { dataStorage } from '../dataExchange.js'

  export default {
    name : 'InboxContent',
    emits: ['open'],
    methods:{
      onDrag({ target, transform }) {
        target.style.transform = transform;
      },
      selectMsg(e){
        for(let i in this.msgList){
          this.msgList[i].isSelected = false;
        }
        this.selectedMsg = e;
        dataStorage.selectedMsg = this.selectedMsg;
        this.$emit('open');
        e.isSelected = true;
        e.wasRead = true;
        this.unreadMsg();
      },
      unreadMsg(){
        this.msgNumber = 0;
        for(let j in this.msgList){
          if (!this.msgList[j].wasRead)
          this.msgNumber += 1;
        }
      }
    },
    data(){
      return{
          msgList: [],
          msgNumber: 0,
          selectedMsg: {
            title: '',
            date: '',
            content: '',
            like: 0,
            isLiked: false,
            going: 0,
            isGoing: false,
            wasRead: false,
            isSelected: false,
            isEvent: false
          }
      }
    },
    async mounted(){
      this.msgList = await loadMsgData();
      console.log(this.msgList);
      this.msgNumber = this.msgList.length
      console.log("Inbox content is loaded!");
    }
  };
</script>