Merge pull request #347 from shariquerik/settings-page

feat: display depends on & success/error message in settings page

crm/api/doc.py

@@ -682,6 +682,9 @@ def get_fields(doctype: str, allow_all_fieldtypes: bool = False):
 				"mandatory": field.reqd,
 				"read_only": field.read_only,
 				"hidden": field.hidden,
+				"depends_on": field.depends_on,
+				"mandatory_depends_on": field.mandatory_depends_on,
+				"read_only_depends_on": field.read_only_depends_on,
 			})
 
 	return _fields

frontend/src/components/Fields.vue

@@ -23,9 +23,11 @@
         <div v-for="field in section.fields" :key="field.name">
           <div
             v-if="
-              field.type == 'Check' ||
+              (field.type == 'Check' ||
-              (field.read_only && data[field.name]) ||
+                (field.read_only && data[field.name]) ||
-              !field.read_only || !field.hidden
+                !field.read_only ||
+                !field.hidden) &&
+              field.display_depends_on
             "
           >
             <div

frontend/src/components/Icons/CRMLogo.vue

@@ -1,18 +1,18 @@
 <template>
   <svg
-    width="118"
+    width="300"
-    height="118"
+    height="300"
-    viewBox="0 0 118 118"
+    viewBox="0 0 300 300"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M93.7101 0H23.8141C10.7986 0 0.247559 10.5511 0.247559 23.5665V93.4626C0.247559 106.478 10.7986 117.029 23.8141 117.029H93.7101C106.726 117.029 117.277 106.478 117.277 93.4626V23.5665C117.277 10.5511 106.726 0 93.7101 0Z"
+      d="M214.286 0H85.7143C38.3756 0 0 38.3756 0 85.7143V214.286C0 261.624 38.3756 300 85.7143 300H214.286C261.624 300 300 261.624 300 214.286V85.7143C300 38.3756 261.624 0 214.286 0Z"
-      fill="#DB4EE0"
+      fill="#EF0BF5"
     />
     <path
-      d="M21.2487 27.5115V38.0121H85.7749V45.8875L62.5161 68.4638V80.9999H54.9556V68.4638C54.9556 68.4638 41.1474 55.0755 36.3171 50.3503H21.3013L42.6174 71.0889C43.825 72.244 44.5076 73.8716 44.5076 75.5517V87.9424L73.0167 88.0474V75.5517C73.0167 73.8716 73.6992 72.244 74.9068 71.0889L96.2755 50.2978V27.5115H21.2487Z"
+      d="M64.2858 90.9642V112.393H214.286V140.571L160.179 193.178V208.929L139.714 208.821V193.178L85.7143 140.571H64.2858V149.571L118.286 202.179V230.035L181.607 230.571V202.179L235.714 149.571V90.9642H64.2858Z"
-      fill="#F1FCFF"
+      fill="white"
     />
   </svg>
 </template>

frontend/src/components/Settings/SettingsPage.vue

@@ -37,6 +37,7 @@ import {
   Spinner,
   Badge,
 } from 'frappe-ui'
+import { evaluate_depends_on_value, createToast } from '@/utils'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -44,6 +45,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  successMessage: {
+    type: String,
+    default: 'Updated Successfully',
+  },
 })
 
 const fields = createResource({
@@ -62,6 +67,24 @@ const data = createDocumentResource({
   fields: ['*'],
   cache: props.doctype,
   auto: true,
+  setValue: {
+    onSuccess: () => {
+      createToast({
+        title: __('Success'),
+        text: __(props.successMessage),
+        icon: 'check',
+        iconClasses: 'text-green-600',
+      })
+    },
+    onError: (err) => {
+      createToast({
+        title: __('Error'),
+        text: err.message + ': ' + err.messages[0],
+        icon: 'x',
+        iconClasses: 'text-red-600',
+      })
+    },
+  },
 })
 
 const sections = computed(() => {
@@ -90,6 +113,10 @@ const sections = computed(() => {
     } else {
       _sections[_sections.length - 1].fields.push({
         ...field,
+        display_depends_on: evaluate_depends_on_value(
+          field.depends_on,
+          data.doc,
+        ),
         name: field.value,
       })
     }

frontend/src/utils/index.js

@@ -241,3 +241,45 @@ export function isTouchScreenDevice() {
 export function convertArrayToString(array) {
   return array.map((item) => item).join(',')
 }
+
+export function _eval(code, context = {}) {
+  let variable_names = Object.keys(context)
+  let variables = Object.values(context)
+  code = `let out = ${code}; return out`
+  try {
+    let expression_function = new Function(...variable_names, code)
+    return expression_function(...variables)
+  } catch (error) {
+    console.log('Error evaluating the following expression:')
+    console.error(code)
+    throw error
+  }
+}
+
+export function evaluate_depends_on_value(expression, doc) {
+  if (!expression) return true
+  if (!doc) return true
+
+  let out = null
+
+  if (typeof expression === 'boolean') {
+    out = expression
+  } else if (typeof expression === 'function') {
+    out = expression(doc)
+  } else if (expression.substr(0, 5) == 'eval:') {
+    try {
+      out = _eval(expression.substr(5), { doc })
+    } catch (e) {
+      out = true
+    }
+  } else {
+    let value = doc[expression]
+    if (Array.isArray(value)) {
+      out = !!value.length
+    } else {
+      out = !!value
+    }
+  }
+
+  return out
+}