sfp_front_vue_diarista_backoffice/src/pages/provider/ProviderPage.vue

<template>
  <div>
    <DefaultHeaderPage />
    <div>
      <DefaultTable
        ref="tableRef"
        :columns="columns"
        :api-call="getProviders"
        :delete-function="deleteProvider"
        :mostrar-selecao-de-colunas="false"
        :mostrar-botao-fullscreen="false"
        :mostrar-toggle-inativos="false"
        class="provider-table"
        open-item
        add-item
        @on-row-click="onRowClick"
        @on-add-item="onAddItem"
      >
        <template #body-cell-approval_status="slotProps">
          <q-td :props="slotProps">
            <q-badge
              :class="[
                'approval-status-label',
                `approval-status-label--${slotProps.row.approval_status}`,
              ]"
              :label="
                $t(`provider.approval_status.${slotProps.row.approval_status}`)
              "
            />
          </q-td>
        </template>
      </DefaultTable>
    </div>
  </div>
</template>
<script setup>
import { defineAsyncComponent, useTemplateRef } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { permissionStore } from "src/stores/permission";
import { getProviders, deleteProvider } from "src/api/provider";

import DefaultTable from "src/components/defaults/DefaultTable.vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

const AddEditProviderDialog = defineAsyncComponent(
  () => import("src/pages/provider/components/AddEditProviderDialog.vue"),
);

const permission_store = permissionStore();
const $q = useQuasar();
const tableRef = useTemplateRef("tableRef");
const { t } = useI18n();

const columns = [
  {
    name: "document",
    label: t("provider.fields.document"),
    field: "document",
    align: "left",
    sortable: true,
  },
  {
    name: "user",
    label: t("common.terms.user"),
    field: (row) => row.user?.name || "-",
    align: "left",
    sortable: true,
  },
  {
    name: "birth_date",
    label: t("provider.fields.birth_date"),
    field: "birth_date",
    align: "center",
    sortable: true,
  },
  {
    name: "approval_status",
    label: t("provider.fields.approval_status"),
    field: (row) => t(`provider.approval_status.${row.approval_status}`),
    align: "center",
    sortable: true,
  },
  {
    name: "average_rating",
    label: t("provider.fields.average_rating"),
    field: (row) => row.average_rating || "-",
    align: "center",
    sortable: true,
  },
  {
    name: "total_services",
    label: t("provider.fields.total_services"),
    field: "total_services",
    align: "center",
    sortable: true,
  },
  {
    name: "daily_price_8h",
    label: t("provider.fields.daily_price_8h"),
    field: (row) => (row.daily_price_8h ? `R$ ${row.daily_price_8h}` : "-"),
    align: "center",
    sortable: true,
  },
  {
    name: "actions",
    required: true,
  },
];

const onRowClick = ({ row }) => {
  if (permission_store.getAccess("config.provider", "edit") === false) {
    $q.loading.hide();
    $q.notify({
      type: "negative",
      message: t("validation.permissions.edit"),
    });
    return;
  }
  $q.dialog({
    component: AddEditProviderDialog,
    componentProps: {
      provider: row,
      title: () =>
        useI18n().t("common.actions.edit") +
        " " +
        useI18n().t("ui.navigation.provider"),
    },
  }).onOk(async (success) => {
    if (success) {
      tableRef.value.refresh();
    }
  });
};

const onAddItem = () => {
  if (permission_store.getAccess("config.provider", "add") === false) {
    $q.loading.hide();
    $q.notify({
      type: "negative",
      message: t("validation.permissions.add"),
    });
    return;
  }
  $q.dialog({
    component: AddEditProviderDialog,
    componentProps: {
      title: () =>
        useI18n().t("common.actions.add") +
        " " +
        useI18n().t("ui.navigation.provider"),
    },
  }).onOk(async (success) => {
    if (success) {
      tableRef.value.refresh();
    }
  });
};
</script>

<style scoped>
:deep(.provider-table th.sortable) {
  position: relative;
}

:deep(.provider-table .q-table__sort-icon) {
  position: absolute;
  top: 50%;
  right: 8px;
  margin: -0.6em 0 0;
}

:deep(.provider-table .q-table__sort-icon--right) {
  right: auto;
  left: 8px;
}

.approval-status-label {
  width: 96px;
  padding: 6px 10px;
  justify-content: center;
  color: #424242;
  background: #eeeeee;
  border-radius: 12px;
  font-weight: 500;
}

.approval-status-label--pending {
  color: #8a5a00;
  background: #fff3cd;
}

.approval-status-label--accepted {
  color: #1b5e20;
  background: #d9f2df;
}

.approval-status-label--rejected {
  color: #8e1b1b;
  background: #f8d7da;
}
</style>