Merge pull request #1872 from RitvikSardana/develop-ritvik-customer-refactor

fix: reactivity in customer page
2024-07-19 22:45:23 +05:30
parent b1b6d35438 e6a8a3fa26
commit a152df492b
8 changed files with 130 additions and 106 deletions
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -68,9 +68,12 @@ jobs:
      - uses: actions/setup-python@v4
        with:
          python-version: '3.10'
+
      - name: Download Semgrep rules
        run: git clone --depth 1 https://github.com/frappe/semgrep-rules.git frappe-semgrep-rules
+      
+      - name: Download semgrep
+        run: pip install semgrep
+
      - name: Run Semgrep rules
-        run: |
-          pip install semgrep==0.97.0
-          semgrep ci --config ./frappe-semgrep-rules/rules --config r/python.lang.correctness
+        run: semgrep ci --config ./frappe-semgrep-rules/rules --config r/python.lang.correctness
--- a/desk/src/components/desk/global/NewCustomerDialog.vue
+++ b/desk/src/components/desk/global/NewCustomerDialog.vue
@@ -1,11 +1,14 @@
 <template>
  <div>
-    <Dialog v-model="open" :options="{ title: 'Add New Customer', size: 'sm' }">
+    <Dialog
+      v-model="model"
+      :options="{ title: 'Add New Customer', size: 'sm' }"
+    >
      <template #body-content>
        <div class="space-y-4">
          <div class="space-y-1">
            <Input
-              v-model="customer"
+              v-model="state.customer"
              label="Customer Name"
              type="text"
              placeholder="Tesla Inc."
@@ -13,7 +16,7 @@
          </div>
          <div class="space-y-1">
            <Input
-              v-model="domain"
+              v-model="state.domain"
              label="Domain"
              type="text"
              placeholder="eg: tesla.com, mycompany.com"
@@ -24,13 +27,7 @@
              label="Add"
              theme="gray"
              variant="solid"
-              @click="
-                () => {
-                  addCustomer();
-                  close();
-                  $router.go();
-                }
-              "
+              @click.prevent="addCustomer"
            />
          </div>
        </div>
@@ -39,69 +36,63 @@
  </div>
 </template>

-<script>
-import { Input, Dialog, ErrorMessage } from "frappe-ui";
-import { computed, ref, inject } from "vue";
-export default {
-  name: "NewCustomerDialog",
-  components: {
-    Dialog,
-    Input,
-  },
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: true,
+<script setup lang="ts">
+import { reactive } from "vue";
+import { Input, Dialog, createResource } from "frappe-ui";
+import { createToast } from "@/utils";
+
+const emit = defineEmits(["customerCreated"]);
+const model = defineModel<boolean>();
+
+const state = reactive({
+  customer: "",
+  domain: "",
+});
+
+const customerResource = createResource({
+  url: "frappe.client.insert",
+  method: "POST",
+  data: {
+    doc: {
+      doctype: "HD Customer",
+      customer_name: state.customer,
+      domain: state.domain,
    },
  },
-  setup(props, { emit }) {
-    let open = computed({
-      get: () => props.modelValue,
-      set: (val) => {
-        emit("update:modelValue", val);
-        if (!val) {
-          emit("close");
-        }
-      },
+  onSuccess: () => {
+    state.customer = "";
+    state.domain = "";
+    createToast({
+      title: "Customer Created Successfully ",
+      icon: "check",
+      iconClasses: "text-green-600",
    });
-    return {
-      open,
-    };
+    emit("customerCreated");
  },
-  data() {
-    return {
-      customer: "",
-      domain: "",
-    };
+  onError: (err) => {
+    createToast({
+      title: err.messages[0],
+      icon: "x",
+      iconClasses: "text-red-600",
+    });
  },
-  methods: {
-    addCustomer() {
-      const inputParams = {
-        customer_name: this.customer,
-        domain: this.domain,
-      };
-      this.$resources.newCustomer.submit({
-        doc: {
-          doctype: "HD Customer",
-          ...inputParams,
-        },
-      });
+});
+
+function addCustomer() {
+  if (!state.customer) {
+    createToast({
+      title: "Customer Name is required",
+      icon: "x",
+      iconClasses: "text-red-600",
+    });
+    return;
+  }
+  customerResource.submit({
+    doc: {
+      doctype: "HD Customer",
+      customer_name: state.customer,
+      domain: state.domain,
    },
-    close() {
-      this.customer = "";
-      this.domain = "";
-      this.$emit("close");
-    },
-  },
-  resources: {
-    newCustomer() {
-      return {
-        url: "frappe.client.insert",
-        onSuccess: (doc) => {
-          this.$router.push(`/customers`);
-        },
-      };
-    },
-  },
-};
+  });
+}
 </script>
--- a/desk/src/pages/desk/contact/ContactDialog.vue
+++ b/desk/src/pages/desk/contact/ContactDialog.vue
@@ -147,7 +147,9 @@ const contact = createDocumentResource({
    onSuccess() {
      emit("contactUpdated");
    },
-    onError: useError({ title: "Error updating contact" }),
+    onError() {
+      useError({ title: "Error updating contact" });
+    },
  },
 });

--- a/desk/src/pages/desk/customer/CustomerDialog.vue
+++ b/desk/src/pages/desk/customer/CustomerDialog.vue
@@ -53,6 +53,8 @@ const props = defineProps({
  },
 });

+const emit = defineEmits(["customer-updated"]);
+
 const domain = computed({
  get() {
    return customer.doc?.domain;
@@ -90,15 +92,17 @@ const options = computed(() => ({
  ],
 }));

-function update() {
-  customer.setValue.submit({
+async function update() {
+  await customer.setValue.submit({
    domain: domain.value,
  });
+  emit("customer-updated");
 }

 function updateImage(file) {
  customer.setValue.submit({
    image: file?.file_url || null,
  });
+  emit("customer-updated");
 }
 </script>
--- a/desk/src/pages/desk/customer/CustomerList.vue
+++ b/desk/src/pages/desk/customer/CustomerList.vue
@@ -29,12 +29,13 @@
    </ListView>
    <NewCustomerDialog
      v-model="isDialogVisible"
-      @close="isDialogVisible = false"
+      @customer-created="handleCustomer"
    />
    <span v-if="isCustomerDialogVisible">
      <CustomerDialog
        v-model="isCustomerDialogVisible"
        :name="selectedCustomer"
+        @customer-updated="handleCustomer(true)"
      />
    </span>
  </div>
@@ -52,7 +53,7 @@ import IconPlus from "~icons/lucide/plus";
 const isDialogVisible = ref(false);
 const isCustomerDialogVisible = ref(false);
 const selectedCustomer = ref(null);
-const emptyMessage = "No Customers Found";
+// const emptyMessage = "No Customers Found";
 const columns = [
  {
    label: "Name",
@@ -88,4 +89,10 @@ function openCustomer(id: string) {
  selectedCustomer.value = id;
  isCustomerDialogVisible.value = true;
 }
+function handleCustomer(updated = false) {
+  updated
+    ? (isCustomerDialogVisible.value = false)
+    : (isDialogVisible.value = false);
+  customers.reload();
+}
 </script>
--- a/helpdesk/extends/client.py
+++ b/helpdesk/extends/client.py
@@ -138,6 +138,7 @@ def apply_hook(doctype: str, query):
 	"""
 	try:
 		_module_path = "helpdesk.helpdesk.hooks." + doctype.lower()
+		# nosemgrep
 		_module = importlib.import_module(_module_path)
 		_class = getattr(_module, doctype)
 		_function = getattr(_class, "get_list_filters")
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
 		"eslint-plugin-json": "^3.1.0",
 		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-tailwindcss": "^3.8.3",
-		"eslint-plugin-vue": "^9.9.0",
+		"eslint-plugin-vue": "^9.27.0",
 		"husky": "^8.0.3",
 		"lint-staged": "^13.1.2",
 		"prettier": "2.8.4",
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,6 +9,13 @@
  dependencies:
    eslint-visitor-keys "^3.3.0"

+"@eslint-community/eslint-utils@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
 "@eslint-community/regexpp@^4.4.0":
  version "4.4.0"
  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.4.0.tgz#3e61c564fcd6b921cb789838631c5ee44df09403"
@@ -502,17 +509,18 @@ eslint-plugin-tailwindcss@^3.8.3:
    fast-glob "^3.2.5"
    postcss "^8.4.4"

-eslint-plugin-vue@^9.9.0:
-  version "9.9.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.9.0.tgz#ac788ebccd2eb94d846a507df55da50693b80c91"
-  integrity sha512-YbubS7eK0J7DCf0U2LxvVP7LMfs6rC6UltihIgval3azO3gyDwEGVgsCMe1TmDiEkl6GdMKfRpaME6QxIYtzDQ==
+eslint-plugin-vue@^9.27.0:
+  version "9.27.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz#c22dae704a03d9ecefa81364ff89f60ce0481f94"
+  integrity sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==
  dependencies:
-    eslint-utils "^3.0.0"
+    "@eslint-community/eslint-utils" "^4.4.0"
+    globals "^13.24.0"
    natural-compare "^1.4.0"
-    nth-check "^2.0.1"
-    postcss-selector-parser "^6.0.9"
-    semver "^7.3.5"
-    vue-eslint-parser "^9.0.1"
+    nth-check "^2.1.1"
+    postcss-selector-parser "^6.0.15"
+    semver "^7.6.0"
+    vue-eslint-parser "^9.4.3"
    xml-name-validator "^4.0.0"

 eslint-scope@^5.1.1:
@@ -531,18 +539,6 @@ eslint-scope@^7.1.1:
    esrecurse "^4.3.0"
    estraverse "^5.2.0"

-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
-
 eslint-visitor-keys@^3.3.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
@@ -789,6 +785,13 @@ globals@^13.19.0:
  dependencies:
    type-fest "^0.20.2"

+globals@^13.24.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+  dependencies:
+    type-fest "^0.20.2"
+
 globby@^11.1.0:
  version "11.1.0"
  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
@@ -1099,7 +1102,7 @@ npm-run-path@^5.1.0:
  dependencies:
    path-key "^4.0.0"

-nth-check@^2.0.1:
+nth-check@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
@@ -1258,7 +1261,7 @@ postcss-nested@6.0.0:
  dependencies:
    postcss-selector-parser "^6.0.10"

-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11:
  version "6.0.11"
  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
  integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
@@ -1266,6 +1269,14 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-select
    cssesc "^3.0.0"
    util-deprecate "^1.0.2"

+postcss-selector-parser@^6.0.15:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz#5be94b277b8955904476a2400260002ce6c56e38"
+  integrity sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
@@ -1379,13 +1390,18 @@ rxjs@^7.8.0:
  dependencies:
    tslib "^2.1.0"

-semver@^7.3.5, semver@^7.3.6, semver@^7.3.7:
+semver@^7.3.6, semver@^7.3.7:
  version "7.3.8"
  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
  dependencies:
    lru-cache "^6.0.0"

+semver@^7.6.0:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 shebang-command@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -1626,10 +1642,10 @@ vscode-uri@^3.0.3:
  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.7.tgz#6d19fef387ee6b46c479e5fb00870e15e58c1eb8"
  integrity sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==

-vue-eslint-parser@^9.0.1:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz#0e121d1bb29bd10763c83e3cc583ee03434a9dd5"
-  integrity sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==
+vue-eslint-parser@^9.4.3:
+  version "9.4.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz#9b04b22c71401f1e8bca9be7c3e3416a4bde76a8"
+  integrity sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
  dependencies:
    debug "^4.3.4"
    eslint-scope "^7.1.1"