@feedmepos/mf-inventory-portal 0.0.5

package/dist/SupplierView-CZhM2ie3.js

@@ -0,0 +1,607 @@
+import { defineComponent as K, computed as c, ref as P, resolveComponent as k, openBlock as R, createBlock as N, withCtx as U, createElementVNode as u, createVNode as n, unref as d, isRef as se, normalizeStyle as pe, createElementBlock as ce, createCommentVNode as fe, Teleport as be } from "vue";
+import { u as ue } from "./supplier-DTiiOLtg.js";
+import { D as ne, R as I, F as v } from "./row-action.enum-BwQbURNh.js";
+import { c as ve, _ as Ve, F as L, u as ge } from "./layout-BvUjg6JS.js";
+import { c as re, b as ye } from "./app-BzDhmCVx.js";
+import { useSnackbar as ie, useProxiedModel as de, useDialog as we, useBreakpoints as Se } from "@feedmepos/ui-library";
+import { _ as he } from "./SingleColumnLayout.vue_vue_type_script_setup_true_lang-CFjO4TPG.js";
+import { _ as _e } from "./ChangeLocationComponent.vue_vue_type_script_setup_true_lang-DcixBOcX.js";
+import { R as S } from "./rules-DHfAMDW3.js";
+function xe(A, g) {
+  function V(t, r) {
+    if (t === I.Edit) {
+      A(re(r));
+      return;
+    }
+    if (t === I.Delete) {
+      g(re(r));
+      return;
+    }
+  }
+  return { columnDefs: [
+    {
+      accessorKey: "name",
+      header: "Supplier",
+      enableSorting: !0,
+      size: 200
+    },
+    {
+      accessorKey: "contactName",
+      header: "PIC",
+      enableSorting: !1,
+      size: 250
+    },
+    {
+      accessorKey: "phoneNumber",
+      header: "Contact",
+      enableSorting: !1,
+      size: 200
+    },
+    {
+      accessorKey: "email",
+      header: "Email",
+      enableSorting: !1,
+      size: "auto"
+    },
+    {
+      id: "action",
+      header: "",
+      cell(t) {
+        return ve(
+          [ne[I.Edit], ne[I.Delete]],
+          (r) => {
+            V(r, t.row.original);
+          }
+        );
+      },
+      size: 40,
+      meta: {
+        cellClass: "",
+        headerClass: ""
+      }
+    }
+  ] };
+}
+const Ce = { class: "flex flex-col gap-40" }, ke = { class: "flex flex-col gap-16" }, De = { class: "flex flex-col gap-8" }, Ae = /* @__PURE__ */ u("div", { class: "fm-typo-en-title-sm-800" }, "Address", -1), Fe = { class: "grid grid-cols-2 gap-24" }, Ee = { class: "flex flex-col gap-8" }, $e = /* @__PURE__ */ u("div", { class: "fm-typo-en-title-sm-800" }, "Contact", -1), Pe = { class: "flex flex-col gap-16" }, Re = /* @__PURE__ */ K({
+  __name: "SupplierForm",
+  props: {
+    modelValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue", "validation-success"],
+  setup(A, { expose: g, emit: V }) {
+    const a = A, t = V, r = c({
+      get() {
+        var l;
+        return ((l = a.modelValue) == null ? void 0 : l.name) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.name = l, t("update:modelValue", e);
+      }
+    }), f = c({
+      get() {
+        var l;
+        return ((l = a.modelValue) == null ? void 0 : l.registrationNumber) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.registrationNumber = l, t("update:modelValue", e);
+      }
+    }), D = c({
+      get() {
+        var l, e;
+        return ((e = (l = a.modelValue) == null ? void 0 : l.address) == null ? void 0 : e.line1) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.address ?? (e.address = {}), e.address.line1 = l, t("update:modelValue", e);
+      }
+    }), i = c({
+      get() {
+        var l, e;
+        return ((e = (l = a.modelValue) == null ? void 0 : l.address) == null ? void 0 : e.line2) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.address ?? (e.address = {}), e.address.line2 = l, t("update:modelValue", e);
+      }
+    }), F = c({
+      get() {
+        var l, e;
+        return ((e = (l = a.modelValue) == null ? void 0 : l.address) == null ? void 0 : e.city) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.address ?? (e.address = {}), e.address.city = l, t("update:modelValue", e);
+      }
+    }), b = c({
+      get() {
+        var l, e;
+        return ((e = (l = a.modelValue) == null ? void 0 : l.address) == null ? void 0 : e.postcode) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.address ?? (e.address = {}), e.address.postcode = l, t("update:modelValue", e);
+      }
+    }), h = c({
+      get() {
+        var l, e;
+        return ((e = (l = a.modelValue) == null ? void 0 : l.address) == null ? void 0 : e.state) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.address ?? (e.address = {}), e.address.state = l, t("update:modelValue", e);
+      }
+    }), m = c({
+      get() {
+        var l, e;
+        return ((e = (l = a.modelValue) == null ? void 0 : l.address) == null ? void 0 : e.country) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.address ?? (e.address = {}), e.address.country = l, t("update:modelValue", e);
+      }
+    }), E = c({
+      get() {
+        var l;
+        return ((l = a.modelValue) == null ? void 0 : l.contactName) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.contactName = l, t("update:modelValue", e);
+      }
+    }), $ = c({
+      get() {
+        var l;
+        return ((l = a.modelValue) == null ? void 0 : l.phoneNumber) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.phoneNumber = l, t("update:modelValue", e);
+      }
+    }), _ = c({
+      get() {
+        var l;
+        return ((l = a.modelValue) == null ? void 0 : l.email) ?? "";
+      },
+      set(l) {
+        const e = a.modelValue ?? {};
+        e.email = l, t("update:modelValue", e);
+      }
+    }), y = P();
+    return g({
+      validateInputs: () => {
+        var l, e;
+        (e = (l = y.value) == null ? void 0 : l.validateInputs) == null || e.call(l);
+      },
+      resetInputsValidation: () => {
+        var l, e;
+        (e = (l = y.value) == null ? void 0 : l.resetInputsValidation) == null || e.call(l);
+      },
+      resetInputs: () => {
+        var l, e;
+        (e = (l = y.value) == null ? void 0 : l.resetInputs) == null || e.call(l);
+      }
+    }), (l, e) => {
+      const o = k("FmTextField"), p = k("FmPhoneNumber"), x = k("FmForm");
+      return R(), N(x, {
+        ref_key: "formRef",
+        ref: y,
+        onValidationSuccess: e[11] || (e[11] = (s) => t("validation-success"))
+      }, {
+        default: U(() => [
+          u("div", Ce, [
+            u("div", ke, [
+              n(o, {
+                disabled: l.disabled,
+                rules: [d(S)()],
+                "label-mark": "required",
+                label: "Company name",
+                modelValue: r.value,
+                "onUpdate:modelValue": e[0] || (e[0] = (s) => r.value = s)
+              }, null, 8, ["disabled", "rules", "modelValue"]),
+              n(o, {
+                disabled: l.disabled,
+                rules: [d(S)()],
+                "label-mark": "required",
+                label: "Registration no.",
+                modelValue: f.value,
+                "onUpdate:modelValue": e[1] || (e[1] = (s) => f.value = s)
+              }, null, 8, ["disabled", "rules", "modelValue"])
+            ]),
+            u("div", De, [
+              Ae,
+              u("div", Fe, [
+                n(o, {
+                  disabled: l.disabled,
+                  rules: [d(S)()],
+                  "label-mark": "required",
+                  label: "Line 1",
+                  modelValue: D.value,
+                  "onUpdate:modelValue": e[2] || (e[2] = (s) => D.value = s)
+                }, null, 8, ["disabled", "rules", "modelValue"]),
+                n(o, {
+                  disabled: l.disabled,
+                  "label-mark": "optional",
+                  label: "Line 2",
+                  modelValue: i.value,
+                  "onUpdate:modelValue": e[3] || (e[3] = (s) => i.value = s)
+                }, null, 8, ["disabled", "modelValue"]),
+                n(o, {
+                  disabled: l.disabled,
+                  rules: [d(S)()],
+                  "label-mark": "required",
+                  label: "City",
+                  modelValue: F.value,
+                  "onUpdate:modelValue": e[4] || (e[4] = (s) => F.value = s)
+                }, null, 8, ["disabled", "rules", "modelValue"]),
+                n(o, {
+                  disabled: l.disabled,
+                  rules: [d(S)()],
+                  "label-mark": "required",
+                  label: "Postal code",
+                  modelValue: b.value,
+                  "onUpdate:modelValue": e[5] || (e[5] = (s) => b.value = s)
+                }, null, 8, ["disabled", "rules", "modelValue"]),
+                n(o, {
+                  disabled: l.disabled,
+                  rules: [d(S)()],
+                  "label-mark": "required",
+                  label: "State",
+                  modelValue: h.value,
+                  "onUpdate:modelValue": e[6] || (e[6] = (s) => h.value = s)
+                }, null, 8, ["disabled", "rules", "modelValue"]),
+                n(o, {
+                  disabled: l.disabled,
+                  rules: [d(S)()],
+                  "label-mark": "required",
+                  label: "Country",
+                  modelValue: m.value,
+                  "onUpdate:modelValue": e[7] || (e[7] = (s) => m.value = s)
+                }, null, 8, ["disabled", "rules", "modelValue"])
+              ])
+            ]),
+            u("div", Ee, [
+              $e,
+              u("div", Pe, [
+                n(o, {
+                  disabled: l.disabled,
+                  rules: [d(S)()],
+                  "label-mark": "required",
+                  label: "PIC",
+                  modelValue: E.value,
+                  "onUpdate:modelValue": e[8] || (e[8] = (s) => E.value = s)
+                }, null, 8, ["disabled", "rules", "modelValue"]),
+                n(p, {
+                  disabled: l.disabled,
+                  rules: [d(S)()],
+                  "label-mark": "required",
+                  label: "Phone number",
+                  modelValue: $.value,
+                  "onUpdate:modelValue": e[9] || (e[9] = (s) => $.value = s)
+                }, null, 8, ["disabled", "rules", "modelValue"]),
+                n(o, {
+                  disabled: l.disabled,
+                  "label-mark": "optional",
+                  label: "Email",
+                  modelValue: _.value,
+                  "onUpdate:modelValue": e[10] || (e[10] = (s) => _.value = s)
+                }, null, 8, ["disabled", "modelValue"])
+              ])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), Ue = { class: "flex gap-4" }, Ne = /* @__PURE__ */ K({
+  __name: "SupplierDialog",
+  props: {
+    mode: {},
+    supplier: {},
+    show: { type: Boolean }
+  },
+  emits: ["update:show", "submitted"],
+  setup(A, { expose: g, emit: V }) {
+    const a = A, t = V, r = P(!1), f = ie(), D = ue(), i = c(() => {
+      switch (a.mode) {
+        case v.CREATE:
+          return "Add supplier";
+        case v.READ:
+          return "View";
+        case v.UPDATE:
+          return "Edit supplier";
+      }
+      return "";
+    }), F = c(() => {
+      switch (a.mode) {
+        case v.READ:
+          return "";
+        case v.UPDATE:
+          return "Save";
+        case v.CREATE:
+          return "Add";
+      }
+      return "";
+    }), b = P();
+    g({
+      validateInputs: () => {
+        var l, e;
+        (e = (l = b.value) == null ? void 0 : l.validateInputs) == null || e.call(l);
+      },
+      resetInputsValidation: () => {
+        var l, e;
+        (e = (l = b.value) == null ? void 0 : l.resetInputsValidation) == null || e.call(l);
+      },
+      resetInputs: () => {
+        var l, e;
+        (e = (l = b.value) == null ? void 0 : l.resetInputs) == null || e.call(l);
+      }
+    });
+    const h = de(a, "show"), m = de(a, "supplier");
+    function E() {
+      var l, e;
+      (e = (l = b.value) == null ? void 0 : l.validateInputs) == null || e.call(l);
+    }
+    function $() {
+      switch (a.mode) {
+        case v.READ:
+          return;
+        case v.UPDATE:
+          return y();
+        case v.CREATE:
+          return _();
+      }
+    }
+    async function _() {
+      r.value = !0;
+      try {
+        await Promise.all([
+          D.createSupplier(m.value),
+          new Promise((l) => setTimeout(l, 1e3))
+        ]), f.open({
+          title: "Success",
+          message: `Created ${m.value.name} supplier`,
+          type: "success"
+        }), t("update:show", !1), t("submitted");
+      } catch (l) {
+        f.open({
+          title: "Something went wrong",
+          message: `Cannot create ${m.value.name} supplier. Please try again`,
+          type: "error"
+        }), console.error("cannot create supplier", l);
+      } finally {
+        r.value = !1;
+      }
+    }
+    async function y() {
+      if (m.value === null) {
+        f.open({
+          title: "Something went wrong",
+          message: "Cannot update empty supplier info",
+          type: "error"
+        });
+        return;
+      }
+      r.value = !0;
+      try {
+        await Promise.all([
+          D.updateSupplier(m.value),
+          new Promise((l) => setTimeout(l, 1e3))
+        ]), f.open({
+          title: "Success",
+          message: `Updated ${m.value.name} supplier`,
+          type: "success"
+        }), t("update:show", !1), t("submitted");
+      } catch (l) {
+        f.open({
+          title: "Something went wrong",
+          message: `Cannot update ${m.value.name} supplier. Please try again`,
+          type: "error"
+        }), console.error("cannot update supplier", l);
+      } finally {
+        r.value = !1;
+      }
+    }
+    return (l, e) => {
+      const o = k("FmButton"), p = k("FmSideSheet");
+      return R(), N(p, {
+        header: i.value,
+        modelValue: d(h),
+        "onUpdate:modelValue": e[1] || (e[1] = (x) => se(h) ? h.value = x : null),
+        "dismiss-away": !r.value,
+        "close-button": "",
+        "max-width": 500
+      }, {
+        default: U(() => {
+          var x;
+          return [
+            (R(), N(Re, {
+              class: "w-full",
+              ref_key: "formRef",
+              ref: b,
+              modelValue: d(m),
+              "onUpdate:modelValue": e[0] || (e[0] = (s) => se(m) ? m.value = s : null),
+              onValidationSuccess: $,
+              key: ((x = l.supplier) == null ? void 0 : x._id) ?? "",
+              disabled: r.value
+            }, null, 8, ["modelValue", "disabled"]))
+          ];
+        }),
+        "side-sheet-footer": U(() => [
+          u("div", Ue, [
+            n(o, {
+              loading: r.value,
+              label: F.value,
+              onClick: E
+            }, null, 8, ["loading", "label"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["header", "modelValue", "dismiss-away"]);
+    };
+  }
+}), Te = { class: "px-24 xs:p-0 sm:p-0 flex flex-col gap-8 max-h-full" }, Me = { class: "px-8 flex gap-8 items-center xs:gap-0 xs:flex-col-reverse sm:gap-0 sm:flex-col-reverse" }, qe = { class: "xs:w-full sm:w-full flex gap-8 items-center overflow-x-auto no-scrollbar py-8" }, ze = { class: "flex-grow xs:w-full" }, Ie = { class: "flex flex-col py-8" }, Le = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, Ke = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Be = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, He = {
+  key: 0,
+  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
+}, el = /* @__PURE__ */ K({
+  __name: "SupplierView",
+  setup(A) {
+    const g = ue(), V = ye(), a = P(!1), t = we(), r = ie();
+    V.watchLocation(f);
+    async function f(o) {
+      if (o) {
+        a.value = !0;
+        try {
+          await g.readSuppliers();
+        } catch {
+          r.open({
+            title: "Cannot fetch supplier list",
+            type: "error"
+          });
+        } finally {
+          a.value = !1;
+        }
+      }
+    }
+    const D = c(() => g.suppliers), i = P({});
+    function F() {
+      i.value.mode = v.CREATE, i.value.supplier = {}, i.value.show = !0;
+    }
+    function b(o) {
+      i.value.mode = v.UPDATE, i.value.supplier = o, i.value.show = !0;
+    }
+    async function h(o) {
+      t.open({
+        title: "Delete supplier?",
+        message: `Confirm deleting ${o.name}?`,
+        primaryActions: {
+          text: "Delete",
+          close: !0,
+          variant: "destructive"
+        },
+        secondaryActions: {
+          text: "Cancel",
+          close: !0
+        }
+      }).onPrimary(() => m(o));
+    }
+    async function m(o) {
+      t.open({
+        title: "Deleting supplier...",
+        closeButton: !1
+      });
+      try {
+        await g.deleteSupplier(o), r.open({
+          title: "Success",
+          message: `Deleted ${o == null ? void 0 : o.name}.`,
+          type: "success"
+        }), f(V.currentLocation);
+      } catch (p) {
+        r.open({
+          title: "Something went wrong",
+          message: `Cannot delete ${o == null ? void 0 : o.name}. Please try again.`,
+          type: "error"
+        }), console.error("failed to delete supplier", p);
+      } finally {
+        t.close();
+      }
+    }
+    const { columnDefs: E } = xe(b, h);
+    function $(o) {
+      o === "create" && F();
+    }
+    const _ = P(""), { breakpoints: y } = Se(), l = c(() => y.value.xs || y.value.sm ? 10 : 20), e = ge();
+    return (o, p) => {
+      const x = k("FmTableToolbar"), s = k("FmMenuDivider"), me = k("FmTable");
+      return R(), N(he, {
+        title: "Supplier",
+        actions: [{ label: "Create supplier", value: "create", isPrimary: !0, prependIcon: "add" }],
+        "onClick:action": $
+      }, {
+        default: U(() => [
+          u("div", Te, [
+            u("div", Me, [
+              u("div", qe, [
+                n(_e)
+              ]),
+              u("div", ze, [
+                n(x, {
+                  searchable: "",
+                  "search-model": _.value,
+                  "onUpdate:searchModel": p[0] || (p[0] = (w) => _.value = w)
+                }, null, 8, ["search-model"]),
+                n(s, { class: "hidden xs:block" })
+              ])
+            ]),
+            n(me, {
+              style: pe(d(e).tableHeight),
+              "column-defs": d(E),
+              "row-data": D.value,
+              "search-value": _.value,
+              loading: !d(V)._currentLocation || a.value,
+              onRowClick: p[1] || (p[1] = (w) => b(w.original)),
+              "page-size": l.value
+            }, {
+              "list-row": U((w) => [
+                n(Ve, {
+                  row: w,
+                  onRowClick: b
+                }, {
+                  default: U((C) => {
+                    var B, H, j, T, G, J, O, Q, M, W, X, Y, Z, q, ee, le, ae, oe, z, te;
+                    return [
+                      u("div", Ie, [
+                        u("div", Le, [
+                          n(d(L), {
+                            render: (j = (H = (B = C.name) == null ? void 0 : B.column) == null ? void 0 : H.columnDef) == null ? void 0 : j.cell,
+                            props: (G = (T = C.name) == null ? void 0 : T.getContext) == null ? void 0 : G.call(T)
+                          }, null, 8, ["render", "props"])
+                        ]),
+                        u("div", Ke, [
+                          n(d(L), {
+                            render: (Q = (O = (J = C.contactName) == null ? void 0 : J.column) == null ? void 0 : O.columnDef) == null ? void 0 : Q.cell,
+                            props: (W = (M = C.contactName) == null ? void 0 : M.getContext) == null ? void 0 : W.call(M)
+                          }, null, 8, ["render", "props"])
+                        ]),
+                        u("div", Be, [
+                          n(d(L), {
+                            render: (Z = (Y = (X = C.phoneNumber) == null ? void 0 : X.column) == null ? void 0 : Y.columnDef) == null ? void 0 : Z.cell,
+                            props: (ee = (q = C.phoneNumber) == null ? void 0 : q.getContext) == null ? void 0 : ee.call(q)
+                          }, null, 8, ["render", "props"])
+                        ]),
+                        w.original.email ? (R(), ce("div", He, [
+                          n(d(L), {
+                            render: (oe = (ae = (le = C.email) == null ? void 0 : le.column) == null ? void 0 : ae.columnDef) == null ? void 0 : oe.cell,
+                            props: (te = (z = C.email) == null ? void 0 : z.getContext) == null ? void 0 : te.call(z)
+                          }, null, 8, ["render", "props"])
+                        ])) : fe("", !0)
+                      ])
+                    ];
+                  }),
+                  _: 2
+                }, 1032, ["row"])
+              ]),
+              _: 1
+            }, 8, ["style", "column-defs", "row-data", "search-value", "loading", "page-size"])
+          ]),
+          (R(), N(be, { to: "body" }, [
+            n(Ne, {
+              show: i.value.show,
+              "onUpdate:show": p[2] || (p[2] = (w) => i.value.show = w),
+              supplier: i.value.supplier,
+              mode: i.value.mode,
+              onSubmitted: p[3] || (p[3] = (w) => f(d(V).currentLocation))
+            }, null, 8, ["show", "supplier", "mode"])
+          ]))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  el as default
+};