pleno-vue/src/components/displays/department/pos/sync/ordersSyncPossibleDuplicateTable.vue

<script setup>
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";

const props = defineProps({
  objects: {
    type: Object,
    required: true,
  },
  allowSelectMultiple: {
    type: Boolean,
    default: false,
  },
});
import {ref, watch} from 'vue';
import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import {orderBy, orderDirection, setOrder, loadList} from "@/components/pagination/paginatedList.vue";
import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
import Swal from "sweetalert2";
import ActionSettingsWheelItemLabel from "@/components/displays/buttons/ActionSettingsWheelItemLabel.vue";


const redirectDepartmentOrderPage = (orderId, departmentId) => {
  // Send the user to the order page (In a new tab)
  // `/admin/${departmentId}/modules/pos/orders/${orderId}`
  window.open(`/admin/${departmentId}/modules/pos/orders/${orderId}`, '_blank');
};

const redirectSuperUserInvoiceCollectionPage = (invoiceCollectionId) => {
  // Send the user to the invoice collection page (In a new tab)
  window.open(`/superuser/invoices/${invoiceCollectionId}`, '_blank');
};

// Get the departments (If the departments are not already loaded)
if (departments.value.length === 0) {
  getDepartments();
}

const clickUser = (customer_id) => {
  if (!SessionUser.canAccessSuperUser()) {
    return;
  }
  // Send the user to the user page
  SessionUser.adminUser.customers.fromCustomerNumber.getUserId(customer_id).then(response => window.open('/superuser/users/' + response.data.data.user_id, '_blank'));
};

const isColumnCurrentlyBeingSortedBy = (column) => {
  // Check if the column is currently being sorted by
  return orderBy.value === column;
};

const isCurrentSortDirectionAscending = () => {
  // Check if the current sort direction is ascending
  return orderDirection.value === 'asc';
};

const isCurrentSortDirectionDescending = () => {
  // Check if the current sort direction is descending
  return orderDirection.value === 'desc';
};

const onTableHeaderClick = (column) => {
  // Check if the column is already sorted
  if (orderBy.value === column) {
    // If the column is already sorted, toggle the direction
    const direction = orderDirection.value === 'asc' ? 'desc' : 'asc';
    setOrder(
        column,
        direction
    );
  } else {
    // If the column is not sorted, set the order to the new column and default to ascending
    const direction = 'asc';
    setOrder(
        column,
        direction
    );
  }
  // Load the list
  loadList();
};

const tableHeaders = ref([
  {
    name: 'id',
    title: 'Id',
    sortable: true,
  },
  {
    name: 'department',
    title: 'Afdeling',
    sortable: true,
  },
  {
    name: 'customer_number',
    title: SessionUser.objects.global.language.customer,
    sortable: true,
  },
  {
    name: 'order_id',
    title: SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single),
    sortable: true,
  },
  {
    name: 'created_at',
    title: 'Dato',
    sortable: true,
  },
  {
    name: 'actions',
    title: '',
    sortable: false,
  }
]);

const onClickMarkAsNotDuplicate = (object) => {
  // Mark the order as not a duplicate
  SessionUser.request(
      '/orders/sync/potential-matches/ignore-duplicate',
      'POST',
      {
        id: object.id,
      }
  ).then(() => {
    Swal.fire({
      title: 'Success',
      text: 'Transaktionen er nu markeret som ikke en duplikat.',
      icon: 'success',
      confirmButtonText: 'OK',
    });
    // Reload the list
    loadList();
  }).catch((error) => {
    Swal.fire({
      title: 'Fejl',
      text: 'Der opstod en fejl under markering af transaktionen som ikke en duplikat.',
    });
    console.error(error);
  });
};

const onClickAttachToOrder = (object) => {
  // Redirect the user to the order page
  SessionUser.objects.orders.set.wash_id(object.order_id, object.wash_id)
      .then(() => {
        Swal.fire({
          title: 'Success',
          text: 'Vasken er nu tilknyttet til transaktionen.',
          icon: 'success',
          confirmButtonText: 'OK',
        });
        // Since the order is now attached, we no longer consider it a (possible) duplicate.
        onClickMarkAsNotDuplicate(object);
      })
      .catch((error) => {
        Swal.fire({
          title: 'Fejl',
          text: 'Der opstod en fejl under tilknytning af vasken til transaktionen.',
        });
        console.error(error);
      });
};

</script>

<template>
  <table class="table is-fullwidth is-hoverable">
    <thead>
    <tr>
      <template v-for="tableHeaders in tableHeaders" :key="tableHeaders">
        <th
            v-if="tableHeaders.sortable"
            :class="{
                'is-clickable': tableHeaders.sortable,
                'has-text-centered': tableHeaders.name === 'id'
            }"
            @click="onTableHeaderClick(tableHeaders.name)"
        >
          <span class="is-flex-wrap-nowrap pleno-table-header-content">
            <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
            <span
                v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
                :class="{
                    'fas fa-sort-up': isCurrentSortDirectionAscending(),
                    'fas fa-sort-down': isCurrentSortDirectionDescending()
                }"
                class="icon is-small"
            />
          </span>
        </th>
        <th
            v-else
            :class="{
                'has-text-centered': tableHeaders.name === 'id'
            }"
        >
          <span class="is-flex-wrap-nowrap pleno-table-header-content">
            <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
          </span>
        </th>
      </template>
    </tr>
    </thead>
    <tbody>
    <template v-for="object in objects" :key="object.id">
      <tr>
        <!-- Id -->
        <td class="has-text-centered">
          {{object.id}}
        </td>
        <!-- Department -->
        <td>
          {{ getDepartmentName(object.department) }}
        </td>
        <!-- Customer Number -->
        <td>
          {{ object.customer_number }}
        </td>
        <!-- Order Id -->
        <td>
          {{ object.order_id }}
        </td>
        <!-- Created At -->
        <td>
          {{ object.created_at }}
        </td>
        <td class="is-float-right">
        <!-- Actions -->
        <ActionSettingsWheelButton
          :order_id="object.order_id"
          :refreshFunction="loadList"
        >
          <template #actions>
            <!-- Label -->
            <ActionSettingsWheelItemLabel
              :label="'Mulig duplikat af ' + object.order_id"
              />
            <!-- Compare
            <ActionSettingsWheelItem
              :icon="'fas fa-search-plus'"
              :label="SessionUser.objects.global.language.compare"
              @click="onClickCompare(object)"
            />
            -->
            <!-- Mark as duplicate (Link to order) -->
            <ActionSettingsWheelItem
              :icon="'fas fa-link'"
              :label="SessionUser.objects.global.language.attach_to_order"
              @click="onClickAttachToOrder(object)"
            />
            <!-- Mark as not duplicate -->
            <ActionSettingsWheelItem
              :icon="'fas fa-check'"
              :label="SessionUser.objects.global.language.mark_as_not_duplicate"
              @click="onClickMarkAsNotDuplicate(object)"
            />
          </template>
        </ActionSettingsWheelButton>
        </td>
      </tr>
    </template>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="100%">Viser {{ objects.length }} transaktioner</td>
    </tr>
    </tfoot>
  </table>
</template>

<style scoped>
</style>