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'
import FileIcon from '@/components/FileIcon.vue'
import type { QTableProps } from 'quasar'
import { onMounted, ref, watch } from 'vue'

defineProps<{
  viewMode: 'view_list' | 'view_module'
}>()

const { foundFile } = storeToRefs(useSearchDataStore())
const { getFileInfo, getSize, getType } = useFileInfoStore()
const keywordList = ref<string[]>([])
const categoryList = ref<string[]>([])
const selectKeyword = ref<string[]>([])
const selectCategory = ref<string[]>([])
const filterFoundFile = ref<any>()
const columns: QTableProps['columns'] = [
  {
    name: 'name',
    required: true,
    label: 'ชื่อไฟล์',
    align: 'left',
    field: (row) => row.fileName,
    format: (val) => `${val}`,
    sortable: true,
    style: 'width: 200px',
  },
  {
    name: 'title',
    align: 'center',
    label: 'ชื่อเรื่อง',
    field: 'title',
    style: 'width: 200px',
    sortable: true,
  },
  {
    name: 'fileType',
    align: 'center',
    label: 'ประเภทของไฟล์',
    field: 'fileType',
    sortable: true,
    style: 'width: 200px',
  },
  {
    name: 'actions',
    align: 'center',
    label: '',
    field: '',
    style: 'width: 20px',
  },
]

function filterSearch() {
  function updateList() {
    keywordList.value = []
    categoryList.value = []
    foundFile.value.forEach((obj) => {
      obj.keyword.forEach((keyword) => {
        if (!keywordList.value.includes(keyword)) {
          keywordList.value.push(keyword)
        }
      })
      obj.category.forEach((category) => {
        if (!categoryList.value.includes(category)) {
          categoryList.value.push(category)
        }
      })
    })
  }

  function filterArray() {
    if (!(selectKeyword.value.length || selectCategory.value.length)) {
      filterFoundFile.value = foundFile.value
    } else {
      filterFoundFile.value = foundFile.value.filter(
        (entry) =>
          entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
          entry.category.some((kw) => selectCategory.value.includes(kw)),
      )
    }
  }
  updateList()
  filterArray()
}

watch(
  [
    () => foundFile.value,
    () => selectKeyword.value,
    () => selectCategory.value,
  ],
  filterSearch,
)

onMounted(() => {
  filterSearch()
})
</script>

<template>
  <div class="row grid q-pt-md q-gutter-sm">
    <q-select
      outlined
      dense
      multiple
      use-chips
      v-model="selectKeyword"
      :options="keywordList"
      style="width: 100%"
      label="คำสำคัญ"
    />
    <q-select
      outlined
      dense
      multiple
      use-chips
      v-model="selectCategory"
      :options="categoryList"
      style="width: 100%"
      label="กลุ่ม/หมวดหมู่"
    />
  </div>

  <div v-if="viewMode === 'view_list' && foundFile.length > 0">
    <div class="grid q-mt-md">
      <div v-for="(value, index) in filterFoundFile" :key="value.title">
        <div
          :style="{
            position: 'relative',
            display: 'flex',
            gap: '0.5rem',
            flexDirection: 'column',
            alignItems: 'center',
            padding: '1rem',
            maxWidth: '100%',
          }"
          class="box"
          @click="() => getFileInfo(filterFoundFile[index])"
        >
          <div class="q-px-md flex items-center justify-center">
            <file-icon
              size="preview"
              :fileMimeType="value.fileType ? value.fileType : 'unknow'"
            />
          </div>
          <div
            class="text-overflow-handle block q-px-md text-center"
            style="max-width: 100%"
          >
            {{ value.title }}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div v-if="viewMode === 'view_module' && foundFile.length > 0">
    <q-table
      flat
      bordered
      :rows="filterFoundFile"
      :columns="columns"
      row-key="name"
      hide-bottom
      :rows-per-page-options="[0]"
      class="cursor"
    >
      <template v-slot:body-cell-name="nameData">
        <q-td style="width: 50%" @click="() => getFileInfo(nameData.row)">
          <file-icon size="list" :fileMimeType="nameData.row.fileType" />
          {{ nameData.row.fileName }}
        </q-td>
      </template>

      <template v-slot:body-cell-fileType="typeData">
        <q-td>
          <div class="justify-center">
            {{ getType(typeData.row.fileType) }}
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-actions="sizeData">
        <q-td class="justify-center">
          <div>
            <q-icon class="q-ma-sm" name="info" size="2em" color="primary" />
            <q-tooltip
              anchor="center left"
              self="center right"
              :offset="[5, 1]"
            >
              {{ getSize(sizeData.row.fileSize) }}
            </q-tooltip>
          </div>
        </q-td>
      </template>
    </q-table>
  </div>

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

<style scoped lang="scss">
.box {
  border: 2px solid $separator-color;
  border-radius: 8px;
  cursor: pointer;
}

.cursor {
  cursor: pointer;
}

.text-overflow-handle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: $breakpoint-md-min) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grid .box {
  position: relative;
}
</style>