Implementation template

Use this to organize the template

API Helpers

should go into js package provided by link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

  // ====================================================
  // API Helpers
  // ====================================================
  function apiGet(url, payload = {}) {
    return request(url, {
      method: "GET",
      params: { pds: 1, ...payload }
    });
  }

  function apiPost(url, payload) {
    return request(url, { method: "POST", params: { pds: 1, ...payload } });
  }

  function apiPut(url, payload) {
    return request(url, { method: "PUT", params: { pds: 1, ...payload } });
  }

  function apiDelete(url) {
    return request(url, { method: "DELETE" });
  }

  async function request(url, { method = "GET", params, payload } = {}) {
    let fullUrl = url;

    if (params) {
      fullUrl += `?${new URLSearchParams(params).toString()}`;
    }

    const res = await fetch(fullUrl, {
      method,
      headers: {
        "X-CSRF-TOKEN": CSRF_TOKEN,
        "Content-Type": "application/json"
      },
      body: payload ? JSON.stringify(payload) : undefined
    });

    if (!res.ok) {
      let errorBody = null;
      try {
        errorBody = await res.json();
      } catch {}

      throw { status: res.status, body: errorBody };
    }

    const contentLength = res.headers.get("content-length");
    if (res.status === 204 || contentLength === "0") {
      return null;
    }

    // Some servers send empty body with 200
    const text = await res.text();
    return text ? JSON.parse(text) : null;
  }

DB Accessors, create url and format data for db

example

1
2
3
4
5
6
7
8
9
10

// ====================================================
// DB Accessors, create url and format data for db
// ====================================================
async function getLot(lotId) {
  const url = `${baseUrl}slug/lots/${lotId}`

  payload = {}
  const response = await apiGet(url, payload);
  return response?.data || [];
}

Initialize 

1
2
3
4
5

// ====================================================
// Initialize,
// ====================================================
const CSRF_TOKEN 	 = 'csrf';
const baseUrl		 = '/api/v1/';

Listeners

Extract data and pass it on to the handlers

1
2
3
4
5
6
7

// ====================================================
// Listeners
// ====================================================
$(document).ready(async function () {
  await handleDocumentReady();
  focusScanner();
});

Handlers 

1
2
3
4
5
6
7
8
9
10
11

// ====================================================
// Handlers
// ====================================================
async function confirmAndCloseOrderHandler() {
  try {
    await confirmAndCloseOrder();
  } catch (err) {
    console.error(err);
    alert(err?.message || 'Ett fel uppstod.');
  }
}

Accessors, CRUD actions against the API 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    async function getProductionOrder({orderId}) {
      const url =
        `${baseUrl}slug/orders/production/${orderId}`;
      
      const payload = {
        quantity: dbValue,
        quantity_parcels: totalBoxes
      };
      
      const payload = {}

      try {
        await apiPut(url, payload);
      } catch (err) {
        throw err;
      }  
    }

Render methods 

1
2
3
4
5
6

// ====================================================
// Renders 
// ====================================================
function renderWeightForLot(lotId, weight) {
  $(`#total-weight_${lotId}`).val(formatQuantityWithUnit(weight));
}

Helpers 

1
2
3
4
5
6
7
8
9
10
11

// ====================================================
// Helpers
// ====================================================
function formatWeight(num) {
  return (
    new Intl.NumberFormat('sv-SE', {
      minimumFractionDigits: 3,
      maximumFractionDigits: 3
    }).format(Number(num)) + ' kg'
  );
}