search_ui/components/entity/components/entity-contents/EntityListContent.vue

<template>
  <div
    class="problem-detail__section problem-section"
    v-if="entity[entityContent.key]"
    :id="entityContent.key"
  >
    <div class="problem-section__title text__16">
      <a
        v-if="canUpdateInShowPage(updateKey)"
        :title="entityContent.title"
        :href="entityContent.title"
        @click.prevent="
          $emit('open-modal', {
            ev: $event,
            modal: entityContent.modalName,
            property: entityContent.key,
          })
        "
      >
        <i class="tavasi tavasi-Component-133--1"></i>
      </a>
      <span class="text__pink">
        {{ entityContent.title }}
      </span>
      <div v-if="enableComments">
        <div
          v-if="
            sectionsCommentsToShowGetter == null ||
            sectionsCommentsToShowGetter == entityContent.key
          "
        >
          <div v-if="comments?.length">
            <div
              v-if="
                showComments ||
                `${rootCommentId}_${entityContent.key}` ==
                  `${rootCommentId}_${propertyName}`
              "
            >
              <jahat-comments-list
                :sections="sections"
                :style="{ top: '0em' }"
                :paragraph="{}"
                :commentIndex="0"
                :comments="comments"
                :propertyName="entityContent.key"
                :referenceId="rootCommentId"
              ></jahat-comments-list>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="problem-section__content text__15">
      <ul class="list-unstyled">
        <li
          v-for="(item, index) in entity[entityContent.key]"
          :key="'qa_' + index"
          class="mb-2"
        >
          <div class="d-flex flex-column">
            <div class="d-flex align-items-center">
              <a
              v-if="canUpdateInShowPage(updateKey)"
                :title="$t('Edit')"
                href="javascript:void(0)"
                @click.prevent="
                  $emit('open-modal', {
                    ev: $event,

                    modal: entityContent.modalName,
                    property: entityContent.key,
                    index,
                  })
                "
                class="edit-button"
              >
                <span class="tavasi tavasi-Component-242--1"></span>
              </a>

              <a
                style="color: #00b6e3"
                v-if="entityContent.key == 'crition'"
                class="btn px-3 py-1 d-flex text__14"
                :href="'jahat/critions/' + item.entity_id"
                target="_blank"
              >
                <span>{{ index + 1 }}.&nbsp;</span>
                <span v-if="item.entity_title">{{ item.entity_title }}</span>
                <span v-else-if="item.title">{{ item.title }}</span>
              </a>

              <template v-else>
                <span>{{ index + 1 }}.&nbsp;</span>
                <p v-if="item.entity_title">{{ item.entity_title }}</p>
                <p v-else-if="item.title">{{ item.title }}</p>
              </template>
            </div>
            <div>
              <p
                v-if="item.description"
                class="text__13"
                style="color: #92a2b2"
                v-html="repairNewLine(item.description)"
              ></p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <li style="color: #3f4abc; list-style-type: none">
      <a
        v-if="
          !itemsExpanded &&
          entity[entityContent.key] &&
          entity[entityContent.key].length > maxLength
        "
        @click.prevent="itemsExpanded = true"
        >{{ $t("More") }}</a
      >
      <a v-if="itemsExpanded" @click.prevent="itemsExpanded = false">{{
        $t("Close")
      }}</a>
    </li>
  </div>
</template>

<script>
import { mapState } from "pinia";
export default {
  props: {
    enableComments: {
      default: true,
    },
    sections: {
      type: Array,
      default() {
        return [];
      },
    },
    comments: {
      default() {
        return {};
      },
    },
    entityContent: {
      type: Object,
    },
    updateKey: {
      default: undefined,
    },
    entity: {
      default: null,
    },
    propertyName: {
      default: null,
    },
    rootCommentId: {
      default: null,
    },
  },
  data() {
    return {
      itemsExpanded: false,
      maxLength: 500,
      showComments: false,
    };
  },
  computed: {
    ...mapState("jahat", ["sectionsCommentsToShowGetter"]),
  },
  methods: {
    repairNewLine(text, expand = true) {
      if (!text) return "";

      if (Array.isArray(text)) text = text.join(", ");
      if (!expand && text.length > this.maxLength)
        text = text.substr(0, this.maxLength);

      text = text.replaceAll("\n", "<br>");

      return text;
    },
  },

};
</script>

<style scoped lang="scss">
.problem-section {
  position: relative;

  &:hover {
    .comment-icon {
      opacity: 1;
      transform: scale(1.1);
      transition: all 0.2s;
    }
  }

  .comment-icon {
    position: absolute;
    left: -1em;
    top: 0;
    opacity: 0.5;
    transition: all 0.2s;

    .tavasi {
      font-size: 1.5rem;
    }
  }
}
</style>