support creating ghost users

resources/js/views/dashboard/UserEdit.vue

@@ -2,19 +2,21 @@
     <SMMastHead
         :title="pageHeading"
         :back-link="
-            route.params.id || isCreatingUser
+            route.params.id || isCreating
                 ? { name: 'dashboard-user-list' }
                 : { name: 'dashboard' }
         "
         :back-title="
-            route.params.id || isCreatingUser
+            route.params.id || isCreating
                 ? 'Back to Users'
                 : 'Back to Dashboard'
         " />
     <SMContainer>
         <SMForm :model-value="form" @submit="handleSubmit">
             <SMRow>
-                <SMColumn><SMInput control="display_name" /></SMColumn>
+                <SMColumn
+                    ><SMInput control="display_name" autofocus
+                /></SMColumn>
             </SMRow>
             <SMRow>
                 <SMColumn><SMInput control="first_name" /></SMColumn>
@@ -60,10 +62,13 @@
                     <SMButtonRow>
                         <template #right>
                             <SMButton
+                                v-if="!isCreating"
                                 type="secondary"
                                 label="Change Password"
                                 @click="handleChangePassword" />
-                            <SMButton type="submit" label="Update" />
+                            <SMButton
+                                type="submit"
+                                :label="computedSubmitLabel" />
                         </template>
                     </SMButtonRow>
                 </SMColumn>
@@ -83,7 +88,7 @@ import SMInput from "../../components/SMInput.vue";
 import { api } from "../../helpers/api";
 import { UserResponse } from "../../helpers/api.types";
 import { Form, FormControl } from "../../helpers/form";
-import { And, Email, Phone, Required } from "../../helpers/validate";
+import { And, Custom, Email, Phone, Required } from "../../helpers/validate";
 import { useUserStore } from "../../store/UserStore";
 import SMMastHead from "../../components/SMMastHead.vue";
 import { useToastStore } from "../../store/ToastStore";
@@ -93,15 +98,28 @@ const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
 
-const isCreatingUser = route.path.endsWith("/create");
+const isCreating = route.path.endsWith("/create");
+
+const customRequire = async (value) => {
+    const control_names = ["display_name", "first_name", "last_name", "phone"];
+
+    if (control_names.every((item) => form.controls[item].value.length == 0)) {
+        control_names.forEach((item) => {
+            form.controls[item].clearValidations();
+        });
+        return true;
+    }
+
+    return "This field is required.";
+};
 
 let form = reactive(
     Form({
-        display_name: FormControl("", And([Required()])),
-        first_name: FormControl("", And([Required()])),
-        last_name: FormControl("", And([Required()])),
+        display_name: FormControl("", Custom(customRequire)),
+        first_name: FormControl("", Custom(customRequire)),
+        last_name: FormControl("", Custom(customRequire)),
         email: FormControl("", And([Required(), Email()])),
-        phone: FormControl("", Phone()),
+        phone: FormControl("", And([Custom(customRequire), Phone()])),
     })
 );
 
@@ -137,7 +155,7 @@ const loadData = async () => {
         } finally {
             form.loading(false);
         }
-    } else if (isCreatingUser == false) {
+    } else if (isCreating == false) {
         form.controls.first_name.value = userStore.firstName;
         form.controls.last_name.value = userStore.lastName;
         form.controls.display_name.value = userStore.displayName;
@@ -154,7 +172,7 @@ const handleSubmit = async () => {
         form.loading(true);
         const id = route.params.id ? route.params.id : userStore.id;
 
-        if (isCreatingUser == false) {
+        if (isCreating == false) {
             const result = await api.put({
                 url: "/users/{id}",
                 params: {
@@ -220,6 +238,10 @@ const pageHeading = computed(() => {
         : "User Details";
 });
 
+const computedSubmitLabel = computed(() => {
+    return isCreating ? "Create" : "Update";
+});
+
 loadData();
 </script>