hrms-edm/Services/client/src/components/FileSearched.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useSearchDataStore } from '@/stores/searched-data'
import { useFileInfoStore } from '@/stores/file-info-data'

const { foundFile } = storeToRefs(useSearchDataStore())
const { isPreview } = storeToRefs(useFileInfoStore())
const { getFileInfo } = useFileInfoStore()
</script>

<template>
  <div class="q-mt-md" v-if="foundFile.length > 0">
    <div class="q-gutter-md">
      <div
        v-for="(value, index) in foundFile"
        :key="value.title"
        class="inline-block"
      >
        <div class="box border-radius-inherit">
          <q-card
            flat
            @click="
              () => {
                getFileInfo(foundFile[index])
                isPreview = true
              }
            "
          >
            <q-card-section class="column justify-center relative q-px-xl">
              <q-icon name="description" size="6em" color="primary" />
              <span class="text-center q-pt-md">{{ value.title }}</span>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </div>

  <div class="q-mt-md" v-if="foundFile.length == 0">
    <span>ไม่พบรายการที่ค้นหา</span>
  </div>
</template>

<style scoped lang="scss">
.box {
  display: inline-block;
  border: 2px solid #f1f2f4;
  border-radius: 8px;
  cursor: pointer;
}
</style>