palizvani-front-vite/src/components/EventItem.vue

<template>
  <q-card flat
          class="event-item"
          :class="{'isRegistered' : event.is_current_user_registered }">
    <q-card-section class="thumbnail">
      <div class="RegisteredSign">
        <svg class="ribbon"
             xmlns="http://www.w3.org/2000/svg"
             width="123.945"
             height="123.422"
             viewBox="0 0 123.945 123.422">
          <g id="Group_11524"
             data-name="Group 11524"
             transform="translate(-361 -1111)">
            <g id="Group_7903"
               data-name="Group 7903"
               transform="translate(361 1111)">
              <g id="Group_7901"
                 data-name="Group 7901"
                 transform="translate(0 0)">
                <rect id="Rectangle_1771"
                      data-name="Rectangle 1771"
                      width="13.986"
                      height="39.668"
                      transform="translate(0 83.754)"
                      fill="#cfb184" />
                <rect id="Rectangle_1772"
                      data-name="Rectangle 1772"
                      width="39.668"
                      height="13.986"
                      transform="translate(84.277 0)"
                      fill="#cfb184" />
                <path id="Path_18668"
                      data-name="Path 18668"
                      d="M1938.931,282.651l123.945-123.406-.016-.016h-44a9.041,9.041,0,0,0-6.379,2.631l-70.907,70.6a8.962,8.962,0,0,0-2.642,6.352Z"
                      transform="translate(-1938.931 -159.229)"
                      fill="#eac38a" />
              </g>
            </g>
            <text id="رویداد_های_من"
                  data-name="رویداد‌های من"
                  transform="translate(445.063 1135.174) rotate(-45)"
                  fill="#fff"
                  font-size="18"
                  font-family="SegoeUI-Bold, Segoe UI"
                  font-weight="700"><tspan x="0"
                                           y="0">رویداد‌های من</tspan></text>
          </g>
        </svg>
      </div>
      <img class="thumbnail-img"
           :src="event.thumbnail"
           @click="goToPage">
    </q-card-section>
    <div class="infos">
      <div class="title">
        <router-link :to="{name: 'Public.ShowEventInfo', params: {id: event.id}}">
          {{event.title}}
        </router-link>
      </div>
      <div class="attribute">
        <div class="attribute-item">
          <q-icon name="calendar_month"
                  size="20px" />
          {{ miladiToShamsi() }}
        </div>
      </div>
    </div>
    <q-card-actions class="action-section">
      <q-btn color="primary"
             class="btn-show-event"
             :to="{name: 'Public.ShowEventInfo', params: {id: event.id}}">
        مشاهده و ثبت نام
        <svg xmlns="http://www.w3.org/2000/svg"
             width="18.387"
             height="11.502"
             viewBox="0 0 18.387 11.502">
          <path id="Combined_Shape"
                data-name="Combined Shape"
                d="M-9.338,11.408a.748.748,0,0,0,.388-.656V6.5h8.2A.751.751,0,0,0,0,5.75.75.75,0,0,0-.75,5h-8.2V.75A.751.751,0,0,0-9.338.093.769.769,0,0,0-9.7,0a.735.735,0,0,0-.4.115l-7.938,5a.747.747,0,0,0-.35.635.742.742,0,0,0,.35.634l7.938,5a.751.751,0,0,0,.4.116A.746.746,0,0,0-9.338,11.408ZM-10.45,9.392l-5.78-3.641,5.78-3.642Z"
                transform="translate(18.387)"
                fill="#fff" />
        </svg>
      </q-btn>
    </q-card-actions>
  </q-card>
</template>

<script>
import { defineComponent } from 'vue'
// import { Event } from 'src/models/Event.js'
import { Classroom } from 'src/models/Classroom' //  using Classroom instead of Event to prevent props warning
import Assist from 'src/assets/js/Assist.js'

export default defineComponent({
  name: 'OptionPanel',
  props: {
    event: {
      type: Classroom,
      default: new Classroom()
    }
  },
  data() {
    return {
      size: 'xs',
      sizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
      actionTypes: ['event', 'scroll', 'link'],
      defaultOptions: {
        imageSource: null,
        ratio: null,
        hasAction: false,
        useAEEEvent: false,
        AEEEventBody: {
          id: '-',
          name: '-',
          creative: null,
          position: null
        },
        action: {
          name: null,
          route: null,
          scrollTo: null,
          eventName: null,
          eventArgs: null
        },
        xs: {
          height: null,
          width: null,
          src: null
        },
        sm: {
          height: null,
          width: null,
          src: null
        },
        md: {
          height: null,
          width: null,
          src: null
        },
        lg: {
          height: null,
          width: null,
          src: null
        },
        xl: {
          height: null,
          width: null,
          src: null
        }
      }
    }
  },
  methods: {
    goToPage () {
      this.$router.push({ name: 'Public.ShowEventInfo', params: { id: this.event.id } })
    },
    getHoldingType (event) {
      return new Classroom(event).holding_type_info.label
    },
    miladiToShamsi () {
      if (!this.event.publish_time) {
        return '-'
      }
      return Assist.miladiToShamsi(this.event.publish_time, 'jD jMMMM jYYYY ساعت HH:mm')
    }
  }
})
</script>

<style lang="scss" scoped>
.event-item {
  width: 100%;
  background-color: #F6F6F6;
  border-radius: 8px;
  position: relative;
  z-index: 1;

  &.isRegistered {
    .thumbnail {
      position: relative;
      z-index: 1;
      .RegisteredSign {
        position: absolute;
        right: -13px;
        top: -13px;
        z-index: 2;
        display: block;
      }
    }
  }
  .thumbnail {
    padding-top: 17px;
    padding-left: 22px;
    padding-right: 22px;
    padding-bottom: 26px;
    .RegisteredSign {
      display: none;
    }
    .thumbnail-img {
      width: 100%;
      height: auto;
    }
  }
  .title {
    text-align: left;
    padding-top: 0;
    padding-left: 46px;
    padding-right: 46px;
    padding-bottom: 33px;
  }
  .attribute {
    padding-top: 0;
    padding-left: 46px;
    padding-right: 46px;
    padding-bottom: 44px;
    .attribute-item {
      margin-bottom: 21px;
      display: flex;
      flex-flow: row;
      .attribute-logo {
        margin-right: 15px;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .action-section {
    padding: 0;
    .btn-show-event {
      width: 100%;
      height: 60px;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
    }
  }
}
</style>