felicity-lims/webapp/views/inventory/Index.tsx

import { defineComponent, computed, ref } from 'vue';
import { InventoryDashboard } from './InvDashboard';
import { InventoryAdjustments } from './InvAdjustments';
import { InventoryListing } from './InvListing';
import { InventoryTransactions } from './InvTransactions';
import { InventoryOrders } from './InvOrders';
import Drawer from '../../components/Drawer.vue';
import { ADD_STOCK_ORDER } from '../../graphql/inventory.mutations';
import { useApiUtil } from '../../composables';

import { useInventoryStore, useStorageStore, useSetupStore, useUserStore } from '../../stores';

const InventoryHome = defineComponent({
  name: 'inventory-home',
  setup() {
    const { withClientMutation } = useApiUtil();

    // Prefetch data
    const inventoryStore = useInventoryStore();
    const setupStore = useSetupStore();
    const storageStore = useStorageStore();
    const userStore = useUserStore();
    inventoryStore.fetchItems({
      first: 10000,
      after: '',
      text: '',
      sortBy: ['-uid'],
    });
    userStore.fetchUsers({});
    setupStore.fetchSuppliers();
    setupStore.fetchDepartments({});
    inventoryStore.fetchCategories();
    inventoryStore.fetchHazards();
    storageStore.fetchStoreRooms();
    inventoryStore.fetchUnits();
    inventoryStore.fetchPackages();
    inventoryStore.fetchProducts({
      first: 50,
      after: '',
      text: '',
      sortBy: ['uid'],
    });
    inventoryStore.fetchStockOrders({
      first: 50,
      after: '',
      text: '',
      sortBy: ['uid'],
    });
    inventoryStore.fetchTransactions({
      first: 50,
      after: '',
      text: '',
      sortBy: ['uid'],
    });
    inventoryStore.fetchAdjustments({
      first: 50,
      after: '',
      text: '',
      sortBy: ['uid'],
    });

    const currentTab = ref('dashboard');
    const inventoryTabs = ref([
      'dashboard',
      'orders',
      'stock-listing',
      'transactions',
      'adjustments',
    ]);
    const currentTabComponent = computed(() => 'tab-' + currentTab.value);

    const viewBasket = ref(false);

    return {
      currentTab,
      inventoryTabs,
      currentTabComponent,
      basket: computed(() => inventoryStore.getBasket),
      viewBasket,
      inventoryStore,
      createOrder: () => {
        const basket = inventoryStore.getBasket;
        withClientMutation(
          ADD_STOCK_ORDER,
          {
            payload: {
              orderProducts: basket.map((order) => ({
                productUid: order.product.uid,
                quantity: order.quantity,
                remarks: '',
              })),
              departmentUid: undefined,
            },
          },
          'createStockOrder',
        ).then((result) => {
          inventoryStore.addStockOrder(result?.stockOrder);
          inventoryStore.clearBasket();
          viewBasket.value = false;
        });
      },
    };
  },
  render() {
    return (
      <>
        <section class="col-span-12 mt-2">
          <nav class="flex justify-between bg-white shadow-md mt-2">
            <div class="-mb-px flex justify-start">
              {this.inventoryTabs?.map((tab) => (
                <a
                  key={tab}
                  class={[
                    'no-underline text-gray-500 uppercase tracking-wide font-bold text-xs py-1 px-4 tab hover:bg-sky-600 hover:text-gray-200',
                    { 'tab-active': this.currentTab === tab },
                  ]}
                  onClick={() => (this.currentTab = tab)}
                  href="#"
                >
                  {tab}
                </a>
              ))}
            </div>
            {this.basket.length > 0 && (
              <button
                type="button"
                class="flex items-center mr-4"
                onClick={() => (this.viewBasket = true)}
              >
                <span class="mr-2">View</span> <font-awesome-icon icon="cart-shopping" />
              </button>
            )}
          </nav>

          <div>
            {this.currentTab === 'dashboard' && <InventoryDashboard />}
            {this.currentTab === 'orders' && <InventoryOrders />}
            {this.currentTab === 'stock-listing' && <InventoryListing />}
            {this.currentTab === 'transactions' && <InventoryTransactions />}
            {this.currentTab === 'adjustments' && <InventoryAdjustments />}
          </div>

          <Drawer show={this.viewBasket} onClose={() => (this.viewBasket = false)}>
            {{
              header: () => 'Your Order Basket',
              body: () => (
                <>
                  <div class="overflow-x-auto mt-2 mb-4">
                    <div class="align-middle inline-block min-w-full shadow overflow-hidden bg-white shadow-dashboard px-2 pt-1 rounded-bl-lg rounded-br-lg">
                      <table class="min-w-full">
                        <thead>
                          <tr>
                            <th class="px-1 py-1 border-b-2 border-gray-300 text-left leading-4 text-gray-800 tracking-wider">
                              Product Name
                            </th>
                            <th class="px-1 py-1 border-b-2 border-gray-300 text-left text-sm leading-4 text-gray-800 tracking-wider">
                              Quantity
                            </th>
                            <th class="px-1 py-1 border-b-2 border-gray-300 text-left leading-4 text-gray-800 tracking-wider"></th>
                          </tr>
                        </thead>
                        <tbody class="bg-white">
                          {this.basket.map((item) => (
                            <tr key={item.product.uid} v-motion-slide-right>
                              <td>
                                <p>{item.product.name}</p>
                              </td>
                              <td class="px-1 py-1 whitespace-no-wrap">
                                <label class="block">
                                  <input
                                    class="form-input"
                                    type="number"
                                    v-model={item.quantity}
                                    placeholder={item.quantity}
                                  />
                                </label>
                              </td>
                              <td class="px-1 whitespace-no-wrap">
                                <button
                                  type="button"
                                  class="bg-sky-800 text-white rounded-sm leading-none px-2 py-1"
                                  onClick={() =>
                                    this.inventoryStore.removeFromBasket(item.product.uid)
                                  }
                                >
                                  Remove
                                </button>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <hr />
                  <button
                    type="button"
                    class="mt-4 bg-sky-800 text-white rounded-sm leading-none px-2 py-1"
                    onClick={() => this.createOrder()}
                  >
                    Create Order
                  </button>
                </>
              ),
              footer: () => [],
            }}
          </Drawer>
        </section>
      </>
    );
  },
});

export { InventoryHome };