sfp_front_vue_diarista_backoffice/src/pages/opportunity/CustomSchedulesPage.vue

<template>
  <q-page>
    <DefaultHeaderPage />
    <DefaultTable
      ref="tableRef"
      :columns="columns"
      :loading="loading"
      :api-call="getCustomSchedules"
      :add-button-label="$t('opportunities.add')"
      :empty-message="$t('opportunities.empty_state')"
      :delete-function="deleteCustomSchedule"
      :mostrar-selecao-de-colunas="false"
      :mostrar-botao-fullscreen="false"
      :mostrar-toggle-inativos="false"
      :open-item="true"
      @on-row-click="onRowClick"
      @on-add-item="onAddItem"
    >
      <template #body-cell-status="template_props">
        <q-td :props="template_props">
          <q-chip
            :label="$t(`schedules.statuses.${template_props.row.schedule?.status}`)"
            :color="getStatusColor(template_props.row.schedule?.status)"
            text-color="white"
            size="sm"
          />
        </q-td>
      </template>

      <template #body-cell-price_range="template_props">
        <q-td :props="template_props">
          {{ formatToBRLCurrency(template_props.row.min_price) }}
          {{ formatToBRLCurrency(template_props.row.max_price) }}
        </q-td>
      </template>

      <template #body-cell-period="template_props">
        <q-td :props="template_props">
          {{ template_props.row.schedule?.period_type }}{{ $t('schedules.hours') }}
        </q-td>
      </template>
    </DefaultTable>
  </q-page>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useQuasar } from 'quasar'
import { getCustomSchedules, deleteCustomSchedule } from 'src/api/customSchedule'
import DefaultTable from 'src/components/defaults/DefaultTable.vue'
import AddEditCustomScheduleDialog from './components/AddEditCustomScheduleDialog.vue'
import { formatToBRLCurrency } from 'src/helpers/utils'
import DefaultHeaderPage from 'src/components/layout/DefaultHeaderPage.vue'

const { t } = useI18n()
const $q = useQuasar()
const tableRef = ref(null)
const loading = ref(false)

const columns = computed(() => [
  {
    name: 'id',
    label: 'ID',
    align: 'left',
    field: row => row.schedule?.id,
    sortable: true
  },
  {
    name: 'client_name',
    label: t('opportunities.client'),
    align: 'left',
    field: row => row.schedule?.client_name,
    sortable: true
  },
  {
    name: 'service_type',
    label: t('opportunities.service_type'),
    align: 'left',
    field: 'service_type_name',
    sortable: true
  },
  {
    name: 'date',
    label: t('opportunities.date'),
    align: 'left',
    field: row => row.schedule?.date,
    sortable: true,
  },
  {
    name: 'period',
    label: t('opportunities.period'),
    align: 'center',
    field: row => row.schedule?.period_type + ' h',
    sortable: true
  },
  {
    name: 'price_range',
    label: t('opportunities.price_range'),
    align: 'right',
    field: row => `${formatToBRLCurrency(row.min_price)} - ${formatToBRLCurrency(row.max_price)}`,
    sortable: false
  },
  {
    name: 'status',
    label: t('common.terms.status'),
    align: 'center',
    field: row => t(`schedules.statuses.${row.schedule?.status}`),
    sortable: true
  },
  {
    name: 'actions',
    label: t('common.terms.actions'),
    align: 'center',
    field: 'actions'
  }
])

const getStatusColor = (status) => {
  const colors = {
    pending: 'orange',
    accepted: 'blue',
    rejected: 'red',
    paid: 'green',
    cancelled: 'grey',
    started: 'purple',
    finished: 'teal'
  }
  return colors[status] || 'grey'
}

const onAddItem = () => {
  $q.dialog({
    component: AddEditCustomScheduleDialog,
    componentProps: {
      title: () => t('opportunities.add')
    }
  }).onOk((success) => {
    if (success) {
      tableRef.value.refresh()
    }
  })
}

const onRowClick = ({ row }) => {
  $q.dialog({
    component: AddEditCustomScheduleDialog,
    componentProps: {
      opportunity: row,
      title: () => t('opportunities.edit')
    }
  }).onOk((success) => {
    if (success) {
      tableRef.value.refresh()
    }
  })
}
</script>