Disable buttons on actions and add loading.

trustbit · Jun 21, 2024 · 019fa33 · 019fa33
1 parent 76adaee
commit 019fa33
Show file tree

Hide file tree

Showing 22 changed files with 1,910 additions and 544 deletions.
diff --git a/frontend-vue/package-lock.json b/frontend-vue/package-lock.json
diff --git a/frontend-vue/package.json b/frontend-vue/package.json
@@ -20,11 +20,12 @@
     "@vueuse/core": "^10.7.2",
     "@vueuse/router": "^10.7.2",
     "d3": "^7.8.5",
-    "oidc-client-ts": "^2.4.0",
     "fuse.js": "^7.0.0",
+    "oidc-client-ts": "^2.4.0",
     "pinia": "^2.1.7",
     "vee-validate": "^4.12.4",
-    "vue": "^3.4.13",
+    "vite-plugin-pages": "^0.32.2",
+    "vue": "^3.4.29",
     "vue-i18n": "^9.9.0",
     "vue-router": "^4.2.5",
     "zod": "^3.22.4"
@@ -57,7 +58,7 @@
     "unplugin-vue-components": "^0.24.0",
     "vite": "^4.5.1",
     "vitest": "^0.29.1",
-    "vue-loader": "^16.8.3",
-    "vue-tsc": "^1.1.7"
+    "vue-loader": "^17.4.2",
+    "vue-tsc": "^1.8.27"
   }
-}
+}
diff --git a/frontend-vue/src/components/bounded-context/ContextureMoveBoundedContextModal.vue b/frontend-vue/src/components/bounded-context/ContextureMoveBoundedContextModal.vue
@@ -36,8 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Ref } from "vue";
-import { ref } from "vue";
+import { Ref, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import ContextureAutocomplete from "~/components/primitives/autocomplete/ContextureAutocomplete.vue";
 import ContexturePrimaryButton from "~/components/primitives/button/ContexturePrimaryButton.vue";
@@ -70,7 +69,7 @@ const suggestions: Ref<Domain[]> = ref<Domain[]>(allDomains);
 let submitError = ref<HelpfulErrorProps>();
 
 async function onSubmit() {
-  submitError.value = null;
+  submitError.value = undefined;
   const res = await moveBoundedContext(props.boundedContext.id, selectedDomain.value!.id);
 
   if (res.error.value) {

diff --git a/frontend-vue/src/components/bounded-context/canvas/BCCBusinessDecisions.vue b/frontend-vue/src/components/bounded-context/canvas/BCCBusinessDecisions.vue
@@ -42,7 +42,7 @@
             label: t('bounded_context_canvas.business_decisions.actions.open.add'),
             size: 'sm',
           }"
-          @submit="onBusinessDecisionAdd"
+          :action="onBusinessDecisionAdd"
         />
       </ContextureCollapsable>
     </div>
@@ -60,8 +60,9 @@ import ContextureBoundedContextCanvasElement from "~/components/bounded-context/
 import ContextureCollapsable from "~/components/primitives/collapsable/ContextureCollapsable.vue";
 import ContextureDynamicForm from "~/components/primitives/dynamic-form/ContextureDynamicForm.vue";
 import { DynamicFormSchema } from "~/components/primitives/dynamic-form/dynamicForm";
-import { HelpfulErrorProps } from "~/components/primitives/alert/ContextureHelpfulErrorAlert.vue";
-import ContextureHelpfulErrorAlert from "~/components/primitives/alert/ContextureHelpfulErrorAlert.vue";
+import ContextureHelpfulErrorAlert, {
+  HelpfulErrorProps,
+} from "~/components/primitives/alert/ContextureHelpfulErrorAlert.vue";
 import ContextureInputText from "~/components/primitives/input/ContextureInputText.vue";
 import { isUniqueIn } from "~/core/validation";
 import { useBoundedContextsStore } from "~/stores/boundedContexts";
@@ -115,7 +116,7 @@ const businessDecisionSchema: DynamicFormSchema<BusinessDecision> = {
 };
 
 async function onBusinessDecisionAdd(businessDecision: BusinessDecision) {
-  submitError.value = null;
+  submitError.value = undefined;
   const res = await store.addBusinessDecision(activeBoundedContext.value.id, businessDecision);
 
   if (res.error.value) {
@@ -141,7 +142,7 @@ async function onBusinessDecisionDelete(businessDecision: BusinessDecision) {
 }
 
 async function deleteBusinessDecision(businessDecision: BusinessDecision) {
-  submitError.value = null;
+  submitError.value = undefined;
   const res = await store.deleteBusinessDecision(activeBoundedContext.value.id, businessDecision);
 
   if (res.error.value) {

diff --git a/frontend-vue/src/components/bounded-context/canvas/BCCConnection.vue b/frontend-vue/src/components/bounded-context/canvas/BCCConnection.vue
@@ -49,7 +49,7 @@
                 {{ t("bounded_context_canvas.collaborators.unknown_relationship") }}
               </p>
               <p
-                v-if="
+                v-else-if="
                   collaboration.relationshipType?.upstreamDownstream?.downstreamType ||
                   collaboration.relationshipType?.upstreamDownstream?.upstreamType
                 "
@@ -59,16 +59,16 @@
                   collaboration.relationshipType?.upstreamDownstream.upstreamType
                 }}
               </p>
-              <p v-if="collaboration.relationshipType?.upstreamDownstream?.role" class="text-xs">
+              <p v-else-if="collaboration.relationshipType?.upstreamDownstream?.role" class="text-xs">
                 {{ collaboration.relationshipType?.upstreamDownstream?.role }}
               </p>
               <span
-                v-if="collaboration.relationshipType?.upstreamDownstream"
+                v-else-if="collaboration.relationshipType?.upstreamDownstream"
                 class="border-l-2 border-black pl-1 text-xs font-bold"
                 >Upstream/Downstream</span
               >
               <span
-                v-if="collaboration.relationshipType?.symmetric"
+                v-else-if="collaboration.relationshipType?.symmetric"
                 class="border-l-2 border-black pl-1 text-xs font-bold"
                 >{{ t("bounded_context_canvas.collaborators.symmetric") }}</span
               >
@@ -141,15 +141,17 @@
             />
 
             <div>
-              <ContexturePrimaryButton
-                type="submit"
-                :label="t('bounded_context_canvas.collaborators.add_connection')"
-                size="sm"
-              >
-                <template #left>
-                  <Icon:material-symbols:add class="mr-2" />
-                </template>
-              </ContexturePrimaryButton>
+              <LoadingWrapper :is-loading="isSubmitting">
+                <ContexturePrimaryButton
+                  type="submit"
+                  :label="t('bounded_context_canvas.collaborators.add_connection')"
+                  size="sm"
+                >
+                  <template #left>
+                    <Icon:material-symbols:add class="mr-2" />
+                  </template>
+                </ContexturePrimaryButton>
+              </LoadingWrapper>
             </div>
           </form>
         </div>
@@ -199,6 +201,7 @@ import { useDomainsStore } from "~/stores/domains";
 import { BoundedContext } from "~/types/boundedContext";
 import { Collaboration, CollaborationId, CollaboratorKeys } from "~/types/collaboration";
 import { Domain } from "~/types/domain";
+import LoadingWrapper from "~/components/primitives/button/util/LoadingWrapper.vue";
 
 interface Props {
   collaborations: Collaboration[];
@@ -243,14 +246,14 @@ const initialValues: CollaboratorFormValue = {
   description: "",
 };
 
-const { values, handleSubmit, resetForm, setFieldValue } = useForm({
+const { values, isSubmitting, handleSubmit, resetForm, setFieldValue } = useForm<CollaboratorFormValue>({
   validationSchema: validationSchema,
   initialValues: initialValues,
 });
 
 const onSubmit = handleSubmit(async (formValue: CollaboratorFormValue) => {
   await createCollaborator(formValue);
-  resetForm(initialValues);
+  resetForm();
 });
 
 function searchSuggestions(query: string): void {

diff --git a/frontend-vue/src/components/bounded-context/canvas/BCCDescription.vue b/frontend-vue/src/components/bounded-context/canvas/BCCDescription.vue
@@ -59,7 +59,7 @@ const editMode = ref(false);
 const requiredString = toFieldValidator(zod.string().min(1, t("validation.required")));
 
 async function onUpdate() {
-  submitError.value = null;
+  submitError.value = undefined;
   const res = await store.updateDescription(activeBoundedContext.value.id, description.value);
 
   if (res.error.value) {
@@ -74,7 +74,7 @@ async function onUpdate() {
 }
 
 function onClose() {
-  submitError.value = null;
+  submitError.value = undefined;
   editMode.value = false;
   description.value = activeBoundedContext.value?.description;
 }

diff --git a/frontend-vue/src/components/bounded-context/canvas/BCCDomainRoles.vue b/frontend-vue/src/components/bounded-context/canvas/BCCDomainRoles.vue
@@ -43,7 +43,7 @@
           label: t('bounded_context_canvas.domain_roles.actions.open.add'),
           size: 'sm',
         }"
-        @submit="onDomainRoleAdd"
+        :action="onDomainRoleAdd"
       />
     </ContextureCollapsable>
     <ContextureCollapsable

diff --git a/frontend-vue/src/components/bounded-context/canvas/BCCKey.vue b/frontend-vue/src/components/bounded-context/canvas/BCCKey.vue
@@ -51,7 +51,7 @@ const submitError = ref<HelpfulErrorProps | undefined>();
 const editMode = ref(false);
 
 async function onUpdate() {
-  submitError.value = null;
+  submitError.value = undefined;
   const res = await store.updateKey(activeBoundedContext.value.id, key.value);
 
   if (res.error.value) {

diff --git a/frontend-vue/src/components/bounded-context/canvas/BCCUbiquitousLanguage.vue b/frontend-vue/src/components/bounded-context/canvas/BCCUbiquitousLanguage.vue
@@ -42,7 +42,7 @@
             label: t('bounded_context_canvas.ubiquitous_language.actions.open.add'),
             size: 'sm',
           }"
-          @submit="onUbiquitousLanguageAdd"
+          :action="onUbiquitousLanguageAdd"
         />
       </ContextureCollapsable>
     </div>
@@ -115,7 +115,7 @@ const ubiquitousLanguageSchema: DynamicFormSchema<UbiquitousLanguageItem> = {
 };
 
 async function onUbiquitousLanguageAdd(ubiquitousLanguageItem: UbiquitousLanguageItem) {
-  submitError.value = null;
+  submitError.value = undefined;
   const res = await store.addUbiquitousLanguageItem(activeBoundedContext.value.id, ubiquitousLanguageItem);
 
   if (res.error.value) {
@@ -141,7 +141,7 @@ async function onDeleteUbiquitousLanguage(ubiquitousLanguageKey: string) {
 }
 
 async function deleteUbiquitousLanguage(ubiquitousLanguageKey: string) {
-  submitError.value = null;
+  submitError.value = undefined;
   const res = await store.deleteUbiquitousLanguage(activeBoundedContext.value.id, ubiquitousLanguageKey);
 
   if (res.error.value) {

diff --git a/frontend-vue/src/components/bounded-context/canvas/ContextureEditBoundedContextForm.vue b/frontend-vue/src/components/bounded-context/canvas/ContextureEditBoundedContextForm.vue
@@ -17,11 +17,13 @@
     />
 
     <div>
-      <ContexturePrimaryButton :label="t('common.save')" type="submit">
-        <template #left>
-          <Icon:material-symbols:check class="mr-1 h-6 w-6" />
-        </template>
-      </ContexturePrimaryButton>
+      <LoadingWrapper :is-loading="isLoading">
+        <ContexturePrimaryButton :label="t('common.save')" type="submit">
+          <template #left>
+            <Icon:material-symbols:check class="mr-1 h-6 w-6" />
+          </template>
+        </ContexturePrimaryButton>
+      </LoadingWrapper>
     </div>
   </Form>
 </template>
@@ -36,20 +38,23 @@ import ContexturePrimaryButton from "~/components/primitives/button/ContexturePr
 import ContextureChangeKey from "~/components/core/change-short-name/ContextureChangeShortName.vue";
 import ContextureInputText from "~/components/primitives/input/ContextureInputText.vue";
 import { BoundedContext } from "~/types/boundedContext";
+import { ActionProps, useActionWithLoading } from "~/components/primitives/button/util/useActionWithLoading";
+import LoadingWrapper from "~/components/primitives/button/util/LoadingWrapper.vue";
 
-interface Props {
+interface Props extends ActionProps {
   initialValue: BoundedContext;
 }
 
 const props = defineProps<Props>();
 const emit = defineEmits(["submit"]);
 const { t } = useI18n();
 const editModel: Ref<BoundedContext> = toRef(props, "initialValue");
-
+const { isLoading, handleAction } = useActionWithLoading(props);
 const requiredString = toFieldValidator(zod.string().min(1, t("validation.required")));
 
-function submit(values: any) {
+async function submit(values: any) {
   emit("submit", values);
+  await handleAction(values);
 }
 </script>
 

diff --git a/frontend-vue/src/components/bounded-context/canvas/layouts/BCCV3.vue b/frontend-vue/src/components/bounded-context/canvas/layouts/BCCV3.vue
@@ -21,13 +21,13 @@
             <h3 class="text-base font-bold">
               {{ t("bounded_context_canvas.messages.consumed.title") }}
             </h3>
-            <BCCMessagesConsumed version="V3" />
+            <BCCMessagesConsumed :version="BoundedContextVersion.V3" />
           </div>
           <div class="flex w-1/2 flex-col gap-y-4 rounded p-4">
             <h3 class="text-base font-bold">
               {{ t("bounded_context_canvas.messages.produced.title") }}
             </h3>
-            <BCCMessagesProduced version="V3" />
+            <BCCMessagesProduced :version="BoundedContextVersion.V3" />
           </div>
         </div>
       </ContextureBoundedContextCanvasElement>
@@ -73,6 +73,7 @@ import BCCOutboundConnections from "~/components/bounded-context/canvas/BCCOutbo
 import BCCStrategicClassification from "~/components/bounded-context/canvas/BCCStrategicClassification.vue";
 import BCCUbiquitousLanguage from "~/components/bounded-context/canvas/BCCUbiquitousLanguage.vue";
 import ContextureBoundedContextCanvasElement from "~/components/bounded-context/canvas/ContextureBoundedContextCanvasElement.vue";
+import { BoundedContextVersion } from "~/components/bounded-context/canvas/layouts/version";
 
 const { t } = useI18n();
 </script>
diff --git a/frontend-vue/src/components/domains/ContextureCreateDomainModal.vue b/frontend-vue/src/components/domains/ContextureCreateDomainModal.vue
@@ -4,7 +4,7 @@
       <ContextureHelpfulErrorAlert v-bind="submitError" />
       <ContextureDynamicForm
         class="mt-4"
-        @submit="onAddNewDomain"
+        :action="onAddNewDomain"
         :schema="form"
         :button-props="{ label: t('domains.modal.create.form.submit') }"
         button-class="flex justify-center w-full"
@@ -81,7 +81,7 @@ const form: DynamicFormSchema<CreateDomain> = {
 const submitError = ref<HelpfulErrorProps>();
 
 async function onAddNewDomain(domain: CreateDomain) {
-  submitError.value = null;
+  submitError.value = undefined;
   const { error, data } = await createDomain(domain);
 
   if (error.value) {

diff --git a/frontend-vue/src/components/domains/ContextureMoveDomainModal.vue b/frontend-vue/src/components/domains/ContextureMoveDomainModal.vue
@@ -48,8 +48,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Ref } from "vue";
-import { computed, ref } from "vue";
+import { computed, Ref, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import ContextureAutocomplete from "~/components/primitives/autocomplete/ContextureAutocomplete.vue";
 import ContexturePrimaryButton from "~/components/primitives/button/ContexturePrimaryButton.vue";
@@ -100,7 +99,7 @@ const showAutocomplete = computed(() => {
 });
 
 async function onSubmit() {
-  submitError.value = null;
+  submitError.value = undefined;
   const res = await moveDomain(props.domain.id, selectedDomain.value?.id);
 
   if (res.error.value) {

diff --git a/frontend-vue/src/components/domains/details/ContextureCreateBoundedContextModal.vue b/frontend-vue/src/components/domains/details/ContextureCreateBoundedContextModal.vue
@@ -3,7 +3,7 @@
     <ContextureHelpfulErrorAlert v-bind="submitError" />
     <div class="pt-8 sm:w-96">
       <ContextureDynamicForm
-        @submit="onAddNewBoundedContext"
+        :action="onAddNewBoundedContext"
         :schema="form"
         :button-props="{
           label: t('domains.modal.create_bounded_context.form.submit'),
@@ -83,7 +83,7 @@ const form: DynamicFormSchema<CreateBoundedContext> = {
 const submitError = ref<HelpfulErrorProps>();
 
 async function onAddNewBoundedContext(createDomain: CreateBoundedContext) {
-  submitError.value = null;
+  submitError.value = undefined;
   const { error, data } = await createBoundedContext(props.parentDomain.id, createDomain);
 
   if (error.value) {

diff --git a/frontend-vue/src/components/domains/details/ContextureCreateSubdomainModal.vue b/frontend-vue/src/components/domains/details/ContextureCreateSubdomainModal.vue
@@ -3,7 +3,7 @@
     <ContextureHelpfulErrorAlert v-bind="submitError" />
     <div class="pt-8 sm:w-96">
       <ContextureDynamicForm
-        @submit="onAddNewSubdomain"
+        :action="onAddNewSubdomain"
         :schema="form"
         :button-props="{
           label: t('domains.modal.create_subdomain.form.submit'),
@@ -28,8 +28,7 @@ import ContextureHelpfulErrorAlert, {
 import ContextureInputText from "~/components/primitives/input/ContextureInputText.vue";
 import ContextureModal from "~/components/primitives/modal/ContextureModal.vue";
 import { useDomainsStore } from "~/stores/domains";
-import { Domain } from "~/types/domain";
-import { CreateDomain } from "~/types/domain";
+import { CreateDomain, Domain } from "~/types/domain";
 
 interface Props {
   isOpen: boolean;
@@ -84,9 +83,8 @@ const form: DynamicFormSchema<CreateDomain> = {
 const submitError = ref<HelpfulErrorProps>();
 
 async function onAddNewSubdomain(createDomain: CreateDomain) {
-  submitError.value = null;
+  submitError.value = undefined;
   const { error, data } = await createSubDomain(props.parentDomain.id, createDomain);
-
   if (error.value) {
     submitError.value = {
       friendlyMessage: t("domains.modal.create_subdomain.error.submit"),