From 4e6c8f3fe9ffc8502801469030e2db28b277cfa0 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Fri, 30 Aug 2024 13:44:20 +0200
Subject: [PATCH] feat(dashboard/components): added FormSection component

feat(dashboard/user-profile): removed dialog for changing pin, added form section for changing pin
---
 apps/dashboard/src/components/FormSection.vue | 77 +++++++++++++++++++
 .../user/components/UserSettingsComponent.vue | 26 ++++---
 .../user/components/forms/ChangePinForm.vue   | 13 +++-
 3 files changed, 104 insertions(+), 12 deletions(-)
 create mode 100644 apps/dashboard/src/components/FormSection.vue

diff --git a/apps/dashboard/src/components/FormSection.vue b/apps/dashboard/src/components/FormSection.vue
new file mode 100644
index 00000000..4366efa2
--- /dev/null
+++ b/apps/dashboard/src/components/FormSection.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="flex flex-column gap-2">
+    <div class="flex flex-row align-items-center">
+      <h4 class="flex-grow-1">{{ header }}</h4>
+      <div class="flex flex-row ">
+        <Button v-if="simpleSave" icon="pi pi-save" class="my-0" @click="toggleEdit(true)" label="Save" ></Button>
+        <Button v-else-if="!edit" icon="pi pi-pencil" class="my-0" @click="toggleEdit(true)" label="Edit" ></Button>
+        <div v-else class="flex flex-row gap-2">
+          <Button icon ="pi pi-check" class="my-0" @click="handleSave" />
+          <Button icon="pi pi-times" class="my-0" @click="cancel" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <slot :edit="edit" />
+  <Divider class="w-full" v-if="divider" />
+</template>
+
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+import Divider from "primevue/divider";
+import Button from "primevue/button";
+
+const props = defineProps({
+  header: {
+    type: String,
+    required: true
+  },
+  enableEdit: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  modelValue: {
+    type: Boolean,
+    required: false,
+  },
+  divider: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  simpleSave: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'save', 'cancel']);
+
+const edit = ref(props.modelValue);
+const toggleEdit = (value: boolean) => {
+  edit.value = value;
+  emit('update:modelValue', value);
+};
+
+const cancel = () => {
+  emit('cancel');
+  toggleEdit(false);
+};
+
+const handleSave = () => {
+  emit('save');
+  toggleEdit(false);
+};
+
+onMounted(() => {
+  if (props.simpleSave) {
+    toggleEdit(true);
+  }
+});
+</script>
+
+<style scoped>
+
+</style>
diff --git a/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue b/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
index 8dd3d54b..e442344e 100644
--- a/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
+++ b/apps/dashboard/src/modules/user/components/UserSettingsComponent.vue
@@ -5,15 +5,18 @@
       :action="undefined"
       class="w-5"
   >
+
     <div class="flex flex-column">
-      <h4 class="mt-0">{{ t('userSettings.changeCredentials') }}</h4>
-      <div class="flex flex-row align-items-center w-11">
-        <p class="flex-grow-1 my-1">{{ t('userSettings.changePin') }}</p>
-        <i
-            class="pi pi-external-link text-gray-500 flex align-items-center"
-            @click="showPinDialog = true"
-        />
-      </div>
+      <FormSection
+          :header="t('userSettings.changePin')"
+          @cancel="pinForm.context.resetForm"
+          @save="pinForm.submit"
+          :enableEdit="true"
+          :simpleSave="true"
+          @update:modelValue="editPin = $event"
+          divider>
+        <ChangePinForm :form="pinForm" :edit="editPin"/>
+      </FormSection>
       <div class="flex flex-row align-items-center w-11">
         <p class="flex-grow-1 my-1">{{ t('userSettings.changePassword') }}</p>
         <i
@@ -41,13 +44,12 @@
         <InputSwitch />
       </div>
     </div>
-  </CardComponent>
 
+  </CardComponent>
   <FormDialog
       v-model="showPinDialog"
       :form="pinForm"
       :header="$t('userSettings.changePin')"
-
   >
     <template #form="slotProps">
       <ChangePinForm :form="slotProps.form" @submit:success="showPinDialog = false"/>
@@ -67,6 +69,7 @@ import ChangePinForm from "@/modules/user/components/forms/ChangePinForm.vue";
 import FormDialog from "@/components/FormDialog.vue";
 import { editPinSchema } from "@/utils/validation-schema";
 import { schemaToForm } from "@/utils/formUtils";
+import FormSection from "@/components/FormSection.vue";
 
 defineProps({
   user: {
@@ -78,6 +81,9 @@ defineProps({
 const { t } = useI18n();
 const showPinDialog = ref(false);
 const pinForm = schemaToForm(editPinSchema);
+const editPin = ref(true);
+
+
 </script>
 
 <style scoped></style>
diff --git a/apps/dashboard/src/modules/user/components/forms/ChangePinForm.vue b/apps/dashboard/src/modules/user/components/forms/ChangePinForm.vue
index f82c994c..e358325b 100644
--- a/apps/dashboard/src/modules/user/components/forms/ChangePinForm.vue
+++ b/apps/dashboard/src/modules/user/components/forms/ChangePinForm.vue
@@ -5,13 +5,17 @@
                :attributes="form.model.pin.attr.value"
                @update:value="form.context.setFieldValue('pin', $event)"
                :errors="form.context.errors.value.pin"
-               id="pin" type="pin"/>
+               id="pin" type="pin"
+               :disabled="!edit"
+    />
     <InputSpan :label="t('profile.pinConfirm')"
                :value="form.model.pinConfirm.value.value"
                :attributes="form.model.pinConfirm.attr.value"
                @update:value="form.context.setFieldValue('pinConfirm', $event)"
                :errors="form.context.errors.value.pinConfirm"
-               id="pinConfirm" type="pin"/>
+               id="pinConfirm" type="pin"
+               :disabled="!edit"
+    />
   </div>
 </template>
 
@@ -32,6 +36,11 @@ const props = defineProps({
     type: Object as PropType<Form<yup.InferType<typeof editPinSchema>>>,
     required: true,
   },
+  edit: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const { t } = useI18n();