From e0435c3c1ef6b30c742a70a11e6ed84c13f1b361 Mon Sep 17 00:00:00 2001
From: Johndiddles <johnadepelumi@gmail.com>
Date: Tue, 17 Dec 2024 21:32:38 +0100
Subject: [PATCH 1/7] add user profile page

---
 pages/community/Profile/index.vue | 169 ++++++++++++++++++++++++++++++
 1 file changed, 169 insertions(+)
 create mode 100644 pages/community/Profile/index.vue

diff --git a/pages/community/Profile/index.vue b/pages/community/Profile/index.vue
new file mode 100644
index 0000000..f01346f
--- /dev/null
+++ b/pages/community/Profile/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="container-xxl flex-grow-1 container-p-y">
+    <div class="d-flex justify-content-between align-items-center gap-2 mb-3">
+      <p class="fw-bold mb-0">My Profile</p>
+      <div
+        class="flex-grow-1"
+        style="height: 1px; background-color: #ced4da75"
+      ></div>
+    </div>
+    <div
+      class="d-flex gap-3 bg-white py-3 py-sm-4 px-3 px-sm-5 align-items-center mb-3 rounded-3"
+    >
+      <div
+        class="rounded-circle bg-secondary d-flex justify-content-center align-items-center overflow-hidden user-avatar"
+      >
+        <img :src="user.avatar" alt="" class="h-100 object-cover" />
+      </div>
+      <div class="d-flex flex-column gap-sm-1">
+        <p class="fw-bold text-dark mb-0">
+          {{ user.firstName }} {{ user.lastName }}
+        </p>
+        <p class="mb-0">{{ user.role }}</p>
+        <p class="mb-0">{{ user.location }}</p>
+      </div>
+    </div>
+
+    <div class="bg-white py-4 px-5 rounded-3 mb-3">
+      <div
+        class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-3"
+      >
+        <p class="fw-bold text-dark mb-0 fs-5">Personal Information</p>
+        <div>
+          <button
+            class="rounded-3 btn btn-outline-dark d-flex align-items-center gap-2"
+          >
+            <p class="mb-0">Edit</p>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              class="bi bi-pencil-square"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"
+              />
+              <path
+                fill-rule="evenodd"
+                d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="d-flex flex-column gap-3">
+        <div class="row g-3">
+          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+            <p class="mb-0 text-secondary">First Name</p>
+            <p class="mb-0 text-dark">{{ user.firstName }}</p>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+            <p class="mb-0 text-secondary">Last Name</p>
+            <p class="mb-0 text-dark">{{ user.lastName }}</p>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+            <p class="mb-0 text-secondary">Email</p>
+            <p class="mb-0 text-dark">{{ user.email }}</p>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+            <p class="mb-0 text-secondary">Phone Number</p>
+            <p class="mb-0 text-dark">{{ user.phone }}</p>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+            <p class="mb-0 text-secondary">User Role</p>
+            <p class="mb-0 text-dark">{{ user.role }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bg-white py-4 px-5 rounded-3 mb-3">
+      <div
+        class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-3"
+      >
+        <p class="fw-bold text-dark mb-0 fs-5">Socials</p>
+        <div>
+          <button
+            class="rounded-3 btn btn-outline-dark d-flex align-items-center gap-2"
+          >
+            <p class="mb-0">Edit</p>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              class="bi bi-pencil-square"
+              viewBox="0 0 16 16"
+            >
+              <path
+                d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"
+              />
+              <path
+                fill-rule="evenodd"
+                d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="d-flex flex-column gap-3">
+        <div class="row g-3">
+          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+            <p class="mb-0 text-secondary">Twitter</p>
+            <p class="mb-0 text-dark text-truncate">{{ user.twitterUrl }}</p>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+            <p class="mb-0 text-secondary">LinkedIn</p>
+            <p class="mb-0 text-dark text-truncate">{{ user.linkedinUrl }}</p>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+            <p class="mb-0 text-secondary">Github</p>
+            <p class="mb-0 text-dark text-truncate">{{ user.githubUrl }}</p>
+          </div>
+          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+            <p class="mb-0 text-secondary">Behance</p>
+            <p class="mb-0 text-dark text-truncate">{{ user.behanceUrl }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import avatar from "../../../assets/img/avatars/6.png";
+const user = {
+  firstName: "Alexandra",
+  lastName: "Seraphinius",
+  email: "alexandra.seraph@email.com",
+  phone: "(+234) 8123456789",
+  role: "Admin",
+  id: 1,
+  location: "Lagos, Nigeria",
+  avatar,
+  twitterUrl: "https://x.com/alexandraSeraph",
+  githubUrl: "https://github.com/alexandraSeraph",
+  linkedinUrl: "https://linkedin.com/in/alexandraSeraph",
+  behanceUrl: "",
+};
+</script>
+
+<style scoped>
+.user-avatar {
+  height: 100px;
+  width: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+@media screen and (max-width: 568px) {
+  .user-avatar {
+    height: 64px;
+    width: 64px;
+  }
+}
+</style>

From 3487c108fd1190fa0640d3c63a50b2b5d00efa79 Mon Sep 17 00:00:00 2001
From: Johndiddles <johnadepelumi@gmail.com>
Date: Wed, 18 Dec 2024 09:52:40 +0100
Subject: [PATCH 2/7] add edit user personal information and socials modals

---
 components/profile/EditModalToggler.vue       |  31 +++++
 .../profile/EditPersonalInformationModal.vue  | 110 +++++++++++++++++
 components/profile/EditSocialsModal.vue       | 115 ++++++++++++++++++
 components/profile/InputField.vue             |  54 ++++++++
 pages/community/Profile/index.vue             |  77 ++++--------
 5 files changed, 332 insertions(+), 55 deletions(-)
 create mode 100644 components/profile/EditModalToggler.vue
 create mode 100644 components/profile/EditPersonalInformationModal.vue
 create mode 100644 components/profile/EditSocialsModal.vue
 create mode 100644 components/profile/InputField.vue

diff --git a/components/profile/EditModalToggler.vue b/components/profile/EditModalToggler.vue
new file mode 100644
index 0000000..2e3db39
--- /dev/null
+++ b/components/profile/EditModalToggler.vue
@@ -0,0 +1,31 @@
+<template>
+  <button
+    :data-bs-target="target"
+    data-bs-toggle="modal"
+    class="rounded-3 btn btn-outline-dark d-flex align-items-center gap-2"
+  >
+    <p class="mb-0">Edit</p>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      class="bi bi-pencil-square"
+      viewBox="0 0 16 16"
+    >
+      <path
+        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"
+      />
+      <path
+        fill-rule="evenodd"
+        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"
+      />
+    </svg>
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  target: String,
+});
+</script>
diff --git a/components/profile/EditPersonalInformationModal.vue b/components/profile/EditPersonalInformationModal.vue
new file mode 100644
index 0000000..a681dd4
--- /dev/null
+++ b/components/profile/EditPersonalInformationModal.vue
@@ -0,0 +1,110 @@
+<template>
+  <ProfileEditModalToggler target="#editPersonalInformationModal" />
+
+  <div class="modal fade" tabindex="-1" id="editPersonalInformationModal">
+    <div class="modal-dialog">
+      <div class="modal-content" style="border-radius: 14px">
+        <div class="modal-header p-0">
+          <div
+            class="d-flex justify-content-between align-items-center w-100"
+            style="padding: 8px 0px 8px 24px"
+          >
+            <h5 class="fw-bold mb-0" style="font-size: 1rem">
+              Edit Personal Information
+            </h5>
+            <button
+              type="button"
+              class="btn text-secondary"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                fill="currentColor"
+                class="bi bi-x-square-fill m-0"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="modal-body py-2">
+          <form action="" class="m-0">
+            <div class="row mt-0">
+              <div class="col-12 col-md-6 mb-3">
+                <ProfileInputField
+                  :id="'firstName'"
+                  :label="'First Name'"
+                  :type="'text'"
+                  :value="userInfo.firstName"
+                />
+              </div>
+              <div class="col-12 col-md-6 mb-3">
+                <ProfileInputField
+                  :id="'lastName'"
+                  :label="'Last Name'"
+                  :type="'text'"
+                  style="border-radius: 10px; font-size: 0.8rem"
+                  id="lastName"
+                  :value="userInfo.lastName"
+                />
+              </div>
+
+              <div class="col-12 mb-3">
+                <ProfileInputField
+                  :id="'email'"
+                  :label="'Email'"
+                  :type="'email'"
+                  :value="userInfo.email"
+                />
+              </div>
+
+              <div class="col-12 mb-3">
+                <ProfileInputField
+                  :id="'phone'"
+                  :label="'Phone'"
+                  :type="'text'"
+                  :value="userInfo.phone"
+                />
+              </div>
+
+              <div class="col-12 mb-3">
+                <label
+                  class="form-label fw-normal text-secondary text-capitalize mb-1"
+                  for="role"
+                  >User Role</label
+                >
+                <select
+                  class="form-select py-2"
+                  style="border-radius: 10px; font-size: 0.8rem"
+                  id="role"
+                  :value="userInfo.role"
+                  disabled
+                >
+                  <option value="Admin">Admin</option>
+                  <option value="User">User</option>
+                </select>
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-dark">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  user: Object,
+});
+const userInfo = ref(props.user);
+console.log({ userInfo });
+</script>
diff --git a/components/profile/EditSocialsModal.vue b/components/profile/EditSocialsModal.vue
new file mode 100644
index 0000000..641a28d
--- /dev/null
+++ b/components/profile/EditSocialsModal.vue
@@ -0,0 +1,115 @@
+<template>
+  <button
+    data-bs-toggle="modal"
+    data-bs-target="#editSocialsModal"
+    class="rounded-3 btn btn-outline-dark d-flex align-items-center gap-2"
+  >
+    <p class="mb-0">Edit</p>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      class="bi bi-pencil-square"
+      viewBox="0 0 16 16"
+    >
+      <path
+        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"
+      />
+      <path
+        fill-rule="evenodd"
+        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"
+      />
+    </svg>
+  </button>
+
+  <!-- Modal -->
+  <div class="modal fade" tabindex="-1" id="editSocialsModal">
+    <div class="modal-dialog">
+      <div class="modal-content" style="border-radius: 14px">
+        <div class="modal-header p-0">
+          <div
+            class="d-flex justify-content-between align-items-center w-100"
+            style="padding: 8px 0px 8px 24px"
+          >
+            <h5 class="fw-bold mb-0" style="font-size: 1rem">Edit Socials</h5>
+            <button
+              type="button"
+              class="btn text-secondary"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                fill="currentColor"
+                class="bi bi-x-square-fill m-0"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="modal-body py-2">
+          <form action="" class="m-0">
+            <div class="row mt-0">
+              <div class="col-12 mb-3">
+                <ProfileInputField
+                  :id="'twitter'"
+                  :label="'Twitter'"
+                  :type="'text'"
+                  :value="socialInfo.twitterUrl"
+                />
+              </div>
+              <div class="col-12 mb-3">
+                <ProfileInputField
+                  :id="'linkedin'"
+                  :label="'Linkedin'"
+                  :type="'text'"
+                  :value="socialInfo.linkedinUrl"
+                />
+              </div>
+
+              <div class="col-12 mb-3">
+                <ProfileInputField
+                  :id="'github'"
+                  :label="'Github'"
+                  :type="'text'"
+                  :value="socialInfo.githubUrl"
+                />
+              </div>
+              <div class="col-12 mb-3">
+                <ProfileInputField
+                  :id="'behance'"
+                  :label="'Behance'"
+                  :type="'text'"
+                  :value="socialInfo.behanceUrl"
+                />
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-dark" @click="handleSubmit">
+            Save changes
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  user: Object,
+});
+const socialInfo = ref(props.user.socials);
+
+const handleSubmit = () => {
+  console.log({ socialInfo });
+};
+</script>
diff --git a/components/profile/InputField.vue b/components/profile/InputField.vue
new file mode 100644
index 0000000..5ce5346
--- /dev/null
+++ b/components/profile/InputField.vue
@@ -0,0 +1,54 @@
+<template>
+  <label
+    class="form-label fw-normal text-secondary text-capitalize mb-1"
+    :for="id"
+    >{{ label }}</label
+  >
+  <input
+    :type="type"
+    class="form-control py-2 text-dark"
+    style="border-radius: 10px; font-size: 0.8rem"
+    :id="id"
+    :value="inputValue"
+  />
+</template>
+<script setup>
+const props = defineProps({
+  id: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: [String, Number],
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String,
+    default: "text",
+    validator: (value) =>
+      ["text", "email", "password", "number", "tel"].includes(value),
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: "",
+  },
+});
+
+const inputValue = ref(props.value);
+</script>
diff --git a/pages/community/Profile/index.vue b/pages/community/Profile/index.vue
index f01346f..161b592 100644
--- a/pages/community/Profile/index.vue
+++ b/pages/community/Profile/index.vue
@@ -26,32 +26,11 @@
 
     <div class="bg-white py-4 px-5 rounded-3 mb-3">
       <div
-        class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-3"
+        class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-3 w-100"
       >
         <p class="fw-bold text-dark mb-0 fs-5">Personal Information</p>
-        <div>
-          <button
-            class="rounded-3 btn btn-outline-dark d-flex align-items-center gap-2"
-          >
-            <p class="mb-0">Edit</p>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-pencil-square"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"
-              />
-              <path
-                fill-rule="evenodd"
-                d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"
-              />
-            </svg>
-          </button>
-        </div>
+
+        <ProfileEditPersonalInformationModal v-if="user" :user="user" />
       </div>
 
       <div class="d-flex flex-column gap-3">
@@ -85,48 +64,34 @@
         class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-3"
       >
         <p class="fw-bold text-dark mb-0 fs-5">Socials</p>
-        <div>
-          <button
-            class="rounded-3 btn btn-outline-dark d-flex align-items-center gap-2"
-          >
-            <p class="mb-0">Edit</p>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-pencil-square"
-              viewBox="0 0 16 16"
-            >
-              <path
-                d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"
-              />
-              <path
-                fill-rule="evenodd"
-                d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"
-              />
-            </svg>
-          </button>
-        </div>
+        <ProfileEditSocialsModal v-if="user" :user="user" />
       </div>
 
       <div class="d-flex flex-column gap-3">
         <div class="row g-3">
           <div class="col-12 col-sm-6 col-md-4 col-lg-3">
             <p class="mb-0 text-secondary">Twitter</p>
-            <p class="mb-0 text-dark text-truncate">{{ user.twitterUrl }}</p>
+            <p class="mb-0 text-dark text-truncate">
+              {{ user.socials.twitterUrl }}
+            </p>
           </div>
           <div class="col-12 col-sm-6 col-md-4 col-lg-3">
             <p class="mb-0 text-secondary">LinkedIn</p>
-            <p class="mb-0 text-dark text-truncate">{{ user.linkedinUrl }}</p>
+            <p class="mb-0 text-dark text-truncate">
+              {{ user.socials.linkedinUrl }}
+            </p>
           </div>
           <div class="col-12 col-sm-6 col-md-4 col-lg-3">
             <p class="mb-0 text-secondary">Github</p>
-            <p class="mb-0 text-dark text-truncate">{{ user.githubUrl }}</p>
+            <p class="mb-0 text-dark text-truncate">
+              {{ user.socials.githubUrl }}
+            </p>
           </div>
           <div class="col-12 col-sm-6 col-md-4 col-lg-3">
             <p class="mb-0 text-secondary">Behance</p>
-            <p class="mb-0 text-dark text-truncate">{{ user.behanceUrl }}</p>
+            <p class="mb-0 text-dark text-truncate">
+              {{ user.socials.behanceUrl }}
+            </p>
           </div>
         </div>
       </div>
@@ -145,10 +110,12 @@ const user = {
   id: 1,
   location: "Lagos, Nigeria",
   avatar,
-  twitterUrl: "https://x.com/alexandraSeraph",
-  githubUrl: "https://github.com/alexandraSeraph",
-  linkedinUrl: "https://linkedin.com/in/alexandraSeraph",
-  behanceUrl: "",
+  socials: {
+    twitterUrl: "https://x.com/alexandraSeraph",
+    githubUrl: "https://github.com/alexandraSeraph",
+    linkedinUrl: "https://linkedin.com/in/alexandraSeraph",
+    behanceUrl: "",
+  },
 };
 </script>
 

From b4bd0e6929cbf31713b526678aac818b19685c59 Mon Sep 17 00:00:00 2001
From: Johndiddles <johnadepelumi@gmail.com>
Date: Wed, 18 Dec 2024 12:24:19 +0100
Subject: [PATCH 3/7] refactor: refactor the user profile ui breaking the UI
 into smaller easily maintainable components

---
 .../profile/EditPersonalInformationModal.vue  |   1 -
 components/profile/SingleInfoItem.vue         |  17 +++
 components/profile/SingleInfoSection.vue      |  45 ++++++
 pages/community/Profile/index.vue             | 130 ++++++++----------
 4 files changed, 120 insertions(+), 73 deletions(-)
 create mode 100644 components/profile/SingleInfoItem.vue
 create mode 100644 components/profile/SingleInfoSection.vue

diff --git a/components/profile/EditPersonalInformationModal.vue b/components/profile/EditPersonalInformationModal.vue
index a681dd4..d228123 100644
--- a/components/profile/EditPersonalInformationModal.vue
+++ b/components/profile/EditPersonalInformationModal.vue
@@ -106,5 +106,4 @@ const props = defineProps({
   user: Object,
 });
 const userInfo = ref(props.user);
-console.log({ userInfo });
 </script>
diff --git a/components/profile/SingleInfoItem.vue b/components/profile/SingleInfoItem.vue
new file mode 100644
index 0000000..1ce9a5f
--- /dev/null
+++ b/components/profile/SingleInfoItem.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+    <p class="mb-0 text-secondary">{{ label }}</p>
+    <p class="mb-0 text-dark text-truncate">{{ value }}</p>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+  },
+  value: {
+    type: String,
+  },
+});
+</script>
diff --git a/components/profile/SingleInfoSection.vue b/components/profile/SingleInfoSection.vue
new file mode 100644
index 0000000..89644e4
--- /dev/null
+++ b/components/profile/SingleInfoSection.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="bg-white py-4 px-5 rounded-3 mb-3">
+    <div
+      class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-3"
+    >
+      <p class="fw-bold text-dark mb-0 fs-5">{{ sectionTitle }}</p>
+
+      <component
+        :is="editSectionModalComponent"
+        v-bind="editSectionModalProps"
+      ></component>
+    </div>
+
+    <div class="d-flex flex-column gap-3">
+      <div class="row g-3">
+        <ProfileSingleInfoItem
+          v-for="item in data"
+          :key="item.label"
+          :label="item.label"
+          :value="item.value"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  sectionTitle: {
+    type: String,
+    default: "",
+  },
+  editSectionModalComponent: {
+    type: Object,
+  },
+  data: {
+    type: Array,
+    default: [],
+    required: true,
+  },
+  editSectionModalProps: {
+    type: Object,
+  },
+});
+</script>
diff --git a/pages/community/Profile/index.vue b/pages/community/Profile/index.vue
index 161b592..e00a1af 100644
--- a/pages/community/Profile/index.vue
+++ b/pages/community/Profile/index.vue
@@ -24,83 +24,69 @@
       </div>
     </div>
 
-    <div class="bg-white py-4 px-5 rounded-3 mb-3">
-      <div
-        class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-3 w-100"
-      >
-        <p class="fw-bold text-dark mb-0 fs-5">Personal Information</p>
-
-        <ProfileEditPersonalInformationModal v-if="user" :user="user" />
-      </div>
-
-      <div class="d-flex flex-column gap-3">
-        <div class="row g-3">
-          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-            <p class="mb-0 text-secondary">First Name</p>
-            <p class="mb-0 text-dark">{{ user.firstName }}</p>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-            <p class="mb-0 text-secondary">Last Name</p>
-            <p class="mb-0 text-dark">{{ user.lastName }}</p>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-            <p class="mb-0 text-secondary">Email</p>
-            <p class="mb-0 text-dark">{{ user.email }}</p>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-            <p class="mb-0 text-secondary">Phone Number</p>
-            <p class="mb-0 text-dark">{{ user.phone }}</p>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-            <p class="mb-0 text-secondary">User Role</p>
-            <p class="mb-0 text-dark">{{ user.role }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="bg-white py-4 px-5 rounded-3 mb-3">
-      <div
-        class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-3"
-      >
-        <p class="fw-bold text-dark mb-0 fs-5">Socials</p>
-        <ProfileEditSocialsModal v-if="user" :user="user" />
-      </div>
-
-      <div class="d-flex flex-column gap-3">
-        <div class="row g-3">
-          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-            <p class="mb-0 text-secondary">Twitter</p>
-            <p class="mb-0 text-dark text-truncate">
-              {{ user.socials.twitterUrl }}
-            </p>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-            <p class="mb-0 text-secondary">LinkedIn</p>
-            <p class="mb-0 text-dark text-truncate">
-              {{ user.socials.linkedinUrl }}
-            </p>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-            <p class="mb-0 text-secondary">Github</p>
-            <p class="mb-0 text-dark text-truncate">
-              {{ user.socials.githubUrl }}
-            </p>
-          </div>
-          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-            <p class="mb-0 text-secondary">Behance</p>
-            <p class="mb-0 text-dark text-truncate">
-              {{ user.socials.behanceUrl }}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ProfileSingleInfoSection
+      v-if="user"
+      :sectionTitle="'Personal Information'"
+      :editSectionModalComponent="EditPersonalInformationModal"
+      :editSectionModalProps="{
+        user,
+      }"
+      :data="[
+        {
+          label: 'First Name',
+          value: user.firstName,
+        },
+        {
+          label: 'Last Name',
+          value: user.lastName,
+        },
+        {
+          label: 'Email',
+          value: user.email,
+        },
+        {
+          label: 'Phone Number',
+          value: user.phone,
+        },
+        {
+          label: 'User Role',
+          value: user.role,
+        },
+      ]"
+    />
+    <ProfileSingleInfoSection
+      v-if="user"
+      :sectionTitle="'Socials'"
+      :editSectionModalComponent="EditSocialsModal"
+      :editSectionModalProps="{
+        user,
+      }"
+      :data="[
+        {
+          label: 'Twitter',
+          value: user.socials.twitterUrl,
+        },
+        {
+          label: 'LinkedIn',
+          value: user.socials.linkedinUrl,
+        },
+        {
+          label: 'Github',
+          value: user.socials.githubUrl,
+        },
+        {
+          label: 'Behance',
+          value: user.socials.behanceUrl,
+        },
+      ]"
+    />
   </div>
 </template>
 
 <script setup>
 import avatar from "../../../assets/img/avatars/6.png";
+import EditPersonalInformationModal from "~/components/profile/EditPersonalInformationModal.vue";
+import EditSocialsModal from "~/components/profile/EditSocialsModal.vue";
 const user = {
   firstName: "Alexandra",
   lastName: "Seraphinius",

From 9fd229fa6f18a1835a674ffc5eaac58290105652 Mon Sep 17 00:00:00 2001
From: Johndiddles <johnadepelumi@gmail.com>
Date: Wed, 18 Dec 2024 12:28:29 +0100
Subject: [PATCH 4/7] refactor: change user socials edit button to custom
 component

---
 components/profile/EditSocialsModal.vue | 25 +------------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/components/profile/EditSocialsModal.vue b/components/profile/EditSocialsModal.vue
index 641a28d..93305b7 100644
--- a/components/profile/EditSocialsModal.vue
+++ b/components/profile/EditSocialsModal.vue
@@ -1,29 +1,6 @@
 <template>
-  <button
-    data-bs-toggle="modal"
-    data-bs-target="#editSocialsModal"
-    class="rounded-3 btn btn-outline-dark d-flex align-items-center gap-2"
-  >
-    <p class="mb-0">Edit</p>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      fill="currentColor"
-      class="bi bi-pencil-square"
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"
-      />
-      <path
-        fill-rule="evenodd"
-        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"
-      />
-    </svg>
-  </button>
+  <ProfileEditModalToggler target="#editSocialsModal" />
 
-  <!-- Modal -->
   <div class="modal fade" tabindex="-1" id="editSocialsModal">
     <div class="modal-dialog">
       <div class="modal-content" style="border-radius: 14px">

From 9bc63ba0300e33495c02a71554ea72f07e94d02e Mon Sep 17 00:00:00 2001
From: Johndiddles <johnadepelumi@gmail.com>
Date: Wed, 25 Dec 2024 16:27:10 +0100
Subject: [PATCH 5/7] add multi-step form for new company and company stack

---
 components/form/InputField.vue                |  54 ++++++
 components/form/Pagination.vue                |  47 +++++
 .../registerCompany/AddBackendStackForm.vue   |   0
 .../registerCompany/AddFrontendStackForm.vue  |   0
 .../registerCompany/RegisterCompanyForm.vue   |   0
 pages/community/RegisterCompany/index.vue     | 162 ++++++++++++++++++
 6 files changed, 263 insertions(+)
 create mode 100644 components/form/InputField.vue
 create mode 100644 components/form/Pagination.vue
 create mode 100644 components/registerCompany/AddBackendStackForm.vue
 create mode 100644 components/registerCompany/AddFrontendStackForm.vue
 create mode 100644 components/registerCompany/RegisterCompanyForm.vue
 create mode 100644 pages/community/RegisterCompany/index.vue

diff --git a/components/form/InputField.vue b/components/form/InputField.vue
new file mode 100644
index 0000000..b666714
--- /dev/null
+++ b/components/form/InputField.vue
@@ -0,0 +1,54 @@
+<template>
+  <label
+    class="form-label fw-semibold text-secondary text-uppercase mb-1"
+    :for="id"
+    >{{ label }}</label
+  >
+  <input
+    :type="type"
+    class="form-control py-2 text-dark"
+    style="border-radius: 10px; font-size: 0.8rem"
+    :id="id"
+    :value="inputValue"
+  />
+</template>
+<script setup>
+const props = defineProps({
+  id: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: [String, Number],
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String,
+    default: "text",
+    validator: (value) =>
+      ["text", "email", "password", "number", "tel"].includes(value),
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: "",
+  },
+});
+
+const inputValue = ref(props.value);
+</script>
diff --git a/components/form/Pagination.vue b/components/form/Pagination.vue
new file mode 100644
index 0000000..563d1f4
--- /dev/null
+++ b/components/form/Pagination.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="mb-4">
+    <div class="d-flex justify-content-between align-items-center">
+      <template v-for="(step, index) in steps" :key="index">
+        <div class="d-flex align-items-center">
+          <div
+            :class="[
+              'rounded-circle d-flex align-items-center justify-content-center',
+              'border border-2',
+              'text-center',
+              currentStep > index
+                ? 'bg-dark text-white'
+                : currentStep === index
+                ? 'bg-secondary text-white'
+                : 'bg-light',
+              'position-relative',
+            ]"
+            style="width: 40px; height: 40px"
+          >
+            {{ index + 1 }}
+          </div>
+          <span class="ms-2 text-uppercase">{{ step.title }}</span>
+        </div>
+        <div
+          v-if="index < steps.length - 1"
+          :class="['flex-grow-1 mx-4 my-auto', 'progress', 'position-relative']"
+          style="height: 2px"
+        >
+          <div
+            :class="[
+              'progress-bar',
+              currentStep > index ? 'bg-dark' : 'bg-secondary',
+            ]"
+            :style="{ width: currentStep > index ? '100%' : '0%' }"
+          ></div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  steps: Array,
+  currentStep: Number,
+});
+</script>
diff --git a/components/registerCompany/AddBackendStackForm.vue b/components/registerCompany/AddBackendStackForm.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/registerCompany/AddFrontendStackForm.vue b/components/registerCompany/AddFrontendStackForm.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/registerCompany/RegisterCompanyForm.vue b/components/registerCompany/RegisterCompanyForm.vue
new file mode 100644
index 0000000..e69de29
diff --git a/pages/community/RegisterCompany/index.vue b/pages/community/RegisterCompany/index.vue
new file mode 100644
index 0000000..d99bdff
--- /dev/null
+++ b/pages/community/RegisterCompany/index.vue
@@ -0,0 +1,162 @@
+<!-- components/MultiStepForm.vue -->
+<template>
+  <div class="container py-4">
+    <!-- Progress bar -->
+    <FormPagination :steps="steps" :currentStep="currentStep" />
+
+    <!-- Form steps -->
+    <form @submit.prevent="handleSubmit">
+      <!-- Step 1: Personal Information -->
+      <div v-if="currentStep === 0" class="card">
+        <div class="card-body p-4">
+          <h2 class="fw-semibold" style="font-size: 1.5rem">Add Company</h2>
+          <div class="mb-3 row">
+            <div class="col-12 mb-3">
+              <FormInputField
+                :id="'companyName'"
+                :label="'Company Name'"
+                :type="'text'"
+                :value="formData.name"
+              />
+            </div>
+            <div class="col-12 mb-3">
+              <FormInputField
+                :id="'about'"
+                :label="'About'"
+                :type="'text'"
+                :value="formData.name"
+              />
+            </div>
+            <div class="col-12 mb-3">
+              <FormInputField
+                :id="'companyWebsite'"
+                :label="'Company Website'"
+                :type="'text'"
+                :value="formData.name"
+              />
+            </div>
+            <div class="col-12 mb-3">
+              <FormInputField
+                :id="'slug'"
+                :label="'Source Slug'"
+                :type="'text'"
+                :value="formData.name"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 2: Contact Details -->
+      <div v-if="currentStep === 1" class="card">
+        <div class="card-body p-4">
+          <h2 class="fw-bold" style="font-size: 1.5rem">Contact Details</h2>
+          <div class="mb-3">
+            <label class="form-label">Phone Number</label>
+            <input
+              v-model="formData.phone"
+              type="tel"
+              class="form-control"
+              required
+            />
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Address</label>
+            <textarea
+              v-model="formData.address"
+              class="form-control"
+              rows="3"
+              required
+            ></textarea>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 3: Review -->
+      <div v-if="currentStep === 2" class="card">
+        <div class="card-body">
+          <h2 class="card-title mb-4">Review Your Information</h2>
+          <div class="mb-3">
+            <dl class="row">
+              <dt class="col-sm-3">Name</dt>
+              <dd class="col-sm-9">{{ formData.name }}</dd>
+
+              <dt class="col-sm-3">Email</dt>
+              <dd class="col-sm-9">{{ formData.email }}</dd>
+
+              <dt class="col-sm-3">Phone</dt>
+              <dd class="col-sm-9">{{ formData.phone }}</dd>
+
+              <dt class="col-sm-3">Address</dt>
+              <dd class="col-sm-9">{{ formData.address }}</dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+
+      <!-- Navigation buttons -->
+      <div class="mt-4 d-flex justify-content-between">
+        <button
+          v-if="currentStep > 0"
+          type="button"
+          @click="prevStep"
+          class="btn btn-secondary"
+        >
+          Previous
+        </button>
+        <div>
+          <button
+            v-if="currentStep < steps.length - 1"
+            type="button"
+            @click="nextStep"
+            class="btn btn-dark"
+          >
+            Next
+          </button>
+          <button
+            v-if="currentStep === steps.length - 1"
+            type="submit"
+            class="btn btn-success"
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+const steps = [
+  { title: "Personal Info" },
+  { title: "Contact" },
+  { title: "Review" },
+];
+
+const currentStep = ref(0);
+const formData = reactive({
+  name: "",
+  email: "",
+  phone: "",
+  address: "",
+});
+
+const nextStep = () => {
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value++;
+  }
+};
+
+const prevStep = () => {
+  if (currentStep.value > 0) {
+    currentStep.value--;
+  }
+};
+
+const handleSubmit = () => {
+  // Handle form submission
+  console.log("Form submitted:", formData);
+  // You can emit an event or call an API here
+  emit("submit", formData);
+};
+</script>

From b93c74b023a72843b392c6c345ca32ec61da72c8 Mon Sep 17 00:00:00 2001
From: Johndiddles <johnadepelumi@gmail.com>
Date: Mon, 30 Dec 2024 06:57:12 +0100
Subject: [PATCH 6/7] add add-company and add-company-stack forms to the
 multistep form

---
 components/form/InputField.vue                |  56 ++++-
 components/form/MultiSelect.vue               | 204 ++++++++++++++++++
 .../registerCompany/AddBackendStackForm.vue   |   0
 .../registerCompany/AddFrontendStackForm.vue  |   0
 components/registerCompany/AddStackForm.vue   |  56 +++++
 components/registerCompany/Form.vue           |  58 +++++
 .../registerCompany/RegisterCompanyForm.vue   |   0
 pages/community/RegisterCompany/index.vue     | 148 ++++---------
 8 files changed, 407 insertions(+), 115 deletions(-)
 create mode 100644 components/form/MultiSelect.vue
 delete mode 100644 components/registerCompany/AddBackendStackForm.vue
 delete mode 100644 components/registerCompany/AddFrontendStackForm.vue
 create mode 100644 components/registerCompany/AddStackForm.vue
 create mode 100644 components/registerCompany/Form.vue
 delete mode 100644 components/registerCompany/RegisterCompanyForm.vue

diff --git a/components/form/InputField.vue b/components/form/InputField.vue
index b666714..4530889 100644
--- a/components/form/InputField.vue
+++ b/components/form/InputField.vue
@@ -4,22 +4,53 @@
     :for="id"
     >{{ label }}</label
   >
+
   <input
+    v-if="inputTypes.includes(inputType)"
     :type="type"
     class="form-control py-2 text-dark"
-    style="border-radius: 10px; font-size: 0.8rem"
+    style="border-radius: 10px; font-size: 1rem"
+    :id="id"
+    :value="value"
+    :placeholder="placeholder"
+    @input="handleInput"
+  />
+
+  <textarea
+    v-if="inputType === 'textarea'"
+    class="form-control py-2 text-dark"
+    style="border-radius: 10px; font-size: 1rem"
     :id="id"
-    :value="inputValue"
+    :value="value"
+    :placeholder="placeholder"
+    :type="type"
+    @input="handleInput"
+    rows="3"
+  ></textarea>
+
+  <FormMultiSelect
+    v-if="inputType === 'multiselect'"
+    :suggestions="suggestions"
+    :modelValue="value"
+    :placeholder="placeholder"
+    @input="(value) => handleSelection(value)"
   />
+
+  <p v-if="error" class="text-danger">{{ error }}</p>
 </template>
 <script setup>
+const inputTypes = ["text", "email", "password", "number", "tel"];
 const props = defineProps({
+  inputType: {
+    type: String,
+    default: "text",
+  },
   id: {
     type: String,
     default: "",
   },
   value: {
-    type: [String, Number],
+    type: [String, Number, Array],
     default: "",
   },
   label: {
@@ -48,7 +79,24 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  suggestions: {
+    type: Array,
+    default: () => [],
+  },
+  selections: {
+    type: Array,
+    default: () => [],
+  },
 });
 
-const inputValue = ref(props.value);
+const emit = defineEmits(["input"]);
+
+// const inputValue = ref(props.value);
+const handleInput = (event) => {
+  emit("input", event.target.value);
+};
+
+const handleSelection = (value) => {
+  emit("input", value);
+};
 </script>
diff --git a/components/form/MultiSelect.vue b/components/form/MultiSelect.vue
new file mode 100644
index 0000000..cf8f2fa
--- /dev/null
+++ b/components/form/MultiSelect.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="position-relative">
+    <div
+      class="form-control d-flex flex-wrap gap-2 min-h-auto"
+      @click="focusInput"
+    >
+      <span
+        v-for="item in selectedItems"
+        :key="item"
+        class="badge bg-primary d-flex align-items-center gap-2"
+      >
+        {{ item }}
+        <button
+          type="button"
+          class="btn-close btn-close-white"
+          style="font-size: 0.5rem"
+          @click.stop="removeItem(item)"
+          aria-label="Remove"
+        ></button>
+      </span>
+
+      <input
+        ref="inputRef"
+        type="text"
+        class="border-0 flex-grow-1 min-w-50"
+        style="outline: none; background: transparent"
+        v-model="searchQuery"
+        @input="handleInput"
+        @keydown.enter.prevent="handleEnter"
+        @keydown.down.prevent="handleArrowDown"
+        @keydown.up.prevent="handleArrowUp"
+        @keydown.backspace="handleBackspace"
+        @blur="handleBlur"
+        :placeholder="selectedItems.length ? '' : placeholder"
+      />
+    </div>
+
+    <div
+      v-if="showSuggestions && (filteredSuggestions.length > 0 || searchQuery)"
+      class="position-absolute w-100 mt-1 shadow bg-white border rounded-2"
+      style="z-index: 3"
+    >
+      <template v-if="filteredSuggestions.length > 0">
+        <button
+          v-for="(suggestion, index) in filteredSuggestions"
+          :key="suggestion"
+          class="dropdown-item w-100 text-start"
+          :class="{ active: index === selectedIndex }"
+          @mousedown.prevent="selectSuggestion(suggestion)"
+          @mouseover="selectedIndex = index"
+        >
+          {{ suggestion }}
+        </button>
+      </template>
+
+      <button
+        v-if="searchQuery && !exactMatch"
+        class="dropdown-item w-100 text-start"
+        :class="{ active: selectedIndex === filteredSuggestions.length }"
+        @mousedown.prevent="addNewItem"
+      >
+        Add "{{ searchQuery }}"
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  suggestions: {
+    type: Array,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: "Type to search or add new items...",
+  },
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "add", "input"]);
+
+const inputRef = ref(null);
+const searchQuery = ref("");
+const showSuggestions = ref(false);
+const selectedIndex = ref(-1);
+const selectedItems = ref([...props.modelValue]);
+
+const filteredSuggestions = computed(() => {
+  if (!searchQuery.value)
+    return props.suggestions.filter(
+      (item) => !selectedItems.value.includes(item)
+    );
+
+  return props.suggestions.filter(
+    (suggestion) =>
+      suggestion.toLowerCase().includes(searchQuery.value.toLowerCase()) &&
+      !selectedItems.value.includes(suggestion)
+  );
+});
+
+const exactMatch = computed(() => {
+  return props.suggestions.some(
+    (suggestion) => suggestion.toLowerCase() === searchQuery.value.toLowerCase()
+  );
+});
+
+const focusInput = () => {
+  inputRef.value?.focus();
+};
+
+const handleInput = () => {
+  showSuggestions.value = true;
+  selectedIndex.value = -1;
+};
+
+const handleEnter = () => {
+  if (selectedIndex.value >= 0) {
+    if (selectedIndex.value < filteredSuggestions.value.length) {
+      selectSuggestion(filteredSuggestions.value[selectedIndex.value]);
+    } else {
+      addNewItem();
+    }
+  } else if (searchQuery.value && !exactMatch.value) {
+    addNewItem();
+  }
+};
+
+const handleArrowDown = () => {
+  const maxIndex =
+    filteredSuggestions.value.length + (exactMatch.value ? 0 : 1) - 1;
+  selectedIndex.value =
+    selectedIndex.value < maxIndex ? selectedIndex.value + 1 : -1;
+};
+
+const handleArrowUp = () => {
+  const maxIndex =
+    filteredSuggestions.value.length + (exactMatch.value ? 0 : 1) - 1;
+  selectedIndex.value =
+    selectedIndex.value > -1 ? selectedIndex.value - 1 : maxIndex;
+};
+
+const handleBackspace = () => {
+  if (!searchQuery.value && selectedItems.value.length > 0) {
+    removeItem(selectedItems.value[selectedItems.value.length - 1]);
+  }
+};
+
+const handleBlur = () => {
+  setTimeout(() => {
+    showSuggestions.value = false;
+    selectedIndex.value = -1;
+    searchQuery.value = "";
+  }, 200);
+};
+
+const selectSuggestion = (suggestion) => {
+  if (!selectedItems.value.includes(suggestion)) {
+    selectedItems.value = [...selectedItems.value, suggestion];
+    emit("input", selectedItems.value);
+  }
+  searchQuery.value = "";
+  showSuggestions.value = false;
+};
+
+const addNewItem = () => {
+  if (searchQuery.value && !selectedItems.value.includes(searchQuery.value)) {
+    const newItem = searchQuery.value.trim();
+    selectedItems.value = [...selectedItems.value, newItem];
+    emit("add", newItem);
+    emit("input", selectedItems.value);
+    searchQuery.value = "";
+    showSuggestions.value = false;
+  }
+};
+
+const removeItem = (item) => {
+  selectedItems.value = selectedItems.value.filter((i) => i !== item);
+};
+</script>
+
+<style scoped>
+.dropdown-item {
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+}
+
+.dropdown-item:hover,
+.dropdown-item.active {
+  background-color: #e9ecef;
+  color: #16181b;
+}
+
+.min-h-auto {
+  min-height: auto;
+}
+
+.min-w-50 {
+  min-width: 50px;
+}
+</style>
diff --git a/components/registerCompany/AddBackendStackForm.vue b/components/registerCompany/AddBackendStackForm.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/registerCompany/AddFrontendStackForm.vue b/components/registerCompany/AddFrontendStackForm.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/components/registerCompany/AddStackForm.vue b/components/registerCompany/AddStackForm.vue
new file mode 100644
index 0000000..0078355
--- /dev/null
+++ b/components/registerCompany/AddStackForm.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="card">
+    <div class="card-body p-4">
+      <h2 class="fw-semibold" style="font-size: 1.5rem">Add Stack</h2>
+      <div class="mb-3 row">
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'feStack'"
+            :label="'Frontend Stack'"
+            :inputType="'multiselect'"
+            :suggestions="['JavaScript', 'Python', 'Java', 'React', 'Next JS']"
+            :value="modelValue.frontendStack"
+            @input="(value) => $emit('update', 'frontendStack', value)"
+          />
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'beStack'"
+            :label="'Backend Stack'"
+            :inputType="'multiselect'"
+            :suggestions="[
+              'JavaScript',
+              'Python',
+              'Java',
+              'React',
+              'Next JS',
+              'Node JS',
+              '.Net',
+              'Express JS',
+              'Nest JS',
+              'Django',
+              'Fast API',
+              'Flask',
+              'Spring boot',
+              'Ruby',
+              'Go lang',
+            ]"
+            :value="modelValue.backendStack"
+            @input="(value) => $emit('update', 'backendStack', value)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: {},
+  },
+});
+
+const emit = defineEmits(["update"]);
+</script>
diff --git a/components/registerCompany/Form.vue b/components/registerCompany/Form.vue
new file mode 100644
index 0000000..669acd7
--- /dev/null
+++ b/components/registerCompany/Form.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="card">
+    <div class="card-body p-4">
+      <h2 class="fw-semibold" style="font-size: 1.5rem">Add Company</h2>
+      <div class="mb-3 row">
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'companyName'"
+            :label="'Company Name'"
+            :type="'text'"
+            :value="modelValue.name"
+            :placeholder="'John Doe Inc.'"
+            @input="(value) => $emit('update', 'name', value)"
+          />
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'about'"
+            :label="'About'"
+            :inputType="'textarea'"
+            :value="modelValue.about"
+            @input="(value) => $emit('update', 'about', value)"
+          />
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'websiteUrl'"
+            :label="'Company Website'"
+            :type="'text'"
+            :value="modelValue.websiteUrl"
+            :placeholder="'https://www.johndoe.inc'"
+            @input="(value) => $emit('update', 'websiteUrl', value)"
+          />
+        </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'slug'"
+            :label="'Source Slug'"
+            :type="'text'"
+            :value="modelValue.slug"
+            :placeholder="'johndoeinc'"
+            @input="(value) => $emit('update', 'slug', value)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: {},
+  },
+});
+const emit = defineEmits(["update"]);
+</script>
diff --git a/components/registerCompany/RegisterCompanyForm.vue b/components/registerCompany/RegisterCompanyForm.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/pages/community/RegisterCompany/index.vue b/pages/community/RegisterCompany/index.vue
index d99bdff..a434899 100644
--- a/pages/community/RegisterCompany/index.vue
+++ b/pages/community/RegisterCompany/index.vue
@@ -1,126 +1,48 @@
-<!-- components/MultiStepForm.vue -->
 <template>
   <div class="container py-4">
-    <!-- Progress bar -->
     <FormPagination :steps="steps" :currentStep="currentStep" />
 
-    <!-- Form steps -->
     <form @submit.prevent="handleSubmit">
-      <!-- Step 1: Personal Information -->
-      <div v-if="currentStep === 0" class="card">
-        <div class="card-body p-4">
-          <h2 class="fw-semibold" style="font-size: 1.5rem">Add Company</h2>
-          <div class="mb-3 row">
-            <div class="col-12 mb-3">
-              <FormInputField
-                :id="'companyName'"
-                :label="'Company Name'"
-                :type="'text'"
-                :value="formData.name"
-              />
-            </div>
-            <div class="col-12 mb-3">
-              <FormInputField
-                :id="'about'"
-                :label="'About'"
-                :type="'text'"
-                :value="formData.name"
-              />
-            </div>
-            <div class="col-12 mb-3">
-              <FormInputField
-                :id="'companyWebsite'"
-                :label="'Company Website'"
-                :type="'text'"
-                :value="formData.name"
-              />
-            </div>
-            <div class="col-12 mb-3">
-              <FormInputField
-                :id="'slug'"
-                :label="'Source Slug'"
-                :type="'text'"
-                :value="formData.name"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 2: Contact Details -->
-      <div v-if="currentStep === 1" class="card">
-        <div class="card-body p-4">
-          <h2 class="fw-bold" style="font-size: 1.5rem">Contact Details</h2>
-          <div class="mb-3">
-            <label class="form-label">Phone Number</label>
-            <input
-              v-model="formData.phone"
-              type="tel"
-              class="form-control"
-              required
-            />
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Address</label>
-            <textarea
-              v-model="formData.address"
-              class="form-control"
-              rows="3"
-              required
-            ></textarea>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 3: Review -->
-      <div v-if="currentStep === 2" class="card">
-        <div class="card-body">
-          <h2 class="card-title mb-4">Review Your Information</h2>
-          <div class="mb-3">
-            <dl class="row">
-              <dt class="col-sm-3">Name</dt>
-              <dd class="col-sm-9">{{ formData.name }}</dd>
-
-              <dt class="col-sm-3">Email</dt>
-              <dd class="col-sm-9">{{ formData.email }}</dd>
+      <RegisterCompanyForm
+        v-model="formData"
+        @update="updateFormData"
+        v-if="currentStep === 0"
+      />
 
-              <dt class="col-sm-3">Phone</dt>
-              <dd class="col-sm-9">{{ formData.phone }}</dd>
-
-              <dt class="col-sm-3">Address</dt>
-              <dd class="col-sm-9">{{ formData.address }}</dd>
-            </dl>
-          </div>
-        </div>
-      </div>
+      <RegisterCompanyAddStackForm
+        v-model="formData"
+        @update="updateFormData"
+        v-if="currentStep === 1"
+      />
 
       <!-- Navigation buttons -->
-      <div class="mt-4 d-flex justify-content-between">
-        <button
-          v-if="currentStep > 0"
-          type="button"
-          @click="prevStep"
-          class="btn btn-secondary"
-        >
-          Previous
-        </button>
+      <div class="mt-4 d-flex flex-row-reverse justify-content-between">
         <div>
           <button
             v-if="currentStep < steps.length - 1"
             type="button"
             @click="nextStep"
-            class="btn btn-dark"
+            class="btn btn-dark fw-semibold"
           >
             Next
           </button>
           <button
             v-if="currentStep === steps.length - 1"
             type="submit"
-            class="btn btn-success"
+            class="btn btn-dark fw-semibold"
           >
             Submit
           </button>
         </div>
+
+        <button
+          v-if="currentStep > 0"
+          type="button"
+          @click="prevStep"
+          class="btn btn-secondary fw-semibold"
+        >
+          Previous
+        </button>
       </div>
     </form>
   </div>
@@ -128,19 +50,25 @@
 
 <script setup>
 const steps = [
-  { title: "Personal Info" },
-  { title: "Contact" },
-  { title: "Review" },
+  { title: "Add Company" },
+  { title: "Add Stack" },
+  // { title: "Add Backend Stack" },
 ];
 
 const currentStep = ref(0);
-const formData = reactive({
+const formData = ref({
   name: "",
-  email: "",
-  phone: "",
-  address: "",
+  about: "",
+  websiteUrl: "",
+  slug: "",
+  frontendStack: ["JavaScript"],
+  backendStack: [],
 });
 
+const updateFormData = (field, value) => {
+  formData.value[field] = value;
+};
+
 const nextStep = () => {
   if (currentStep.value < steps.length - 1) {
     currentStep.value++;
@@ -154,9 +82,7 @@ const prevStep = () => {
 };
 
 const handleSubmit = () => {
-  // Handle form submission
-  console.log("Form submitted:", formData);
-  // You can emit an event or call an API here
-  emit("submit", formData);
+  // console.log("Form submitted:", formData);
+  // emit("submit", formData);
 };
 </script>

From 487f1a1a5e10af7908c84f151c3b93fc680bf841 Mon Sep 17 00:00:00 2001
From: Johndiddles <johnadepelumi@gmail.com>
Date: Fri, 3 Jan 2025 10:00:53 +0100
Subject: [PATCH 7/7] add more fields to add company form and add mobile stack
 field to company stack form

---
 components/form/InputField.vue              |  4 +-
 components/registerCompany/AddStackForm.vue | 41 ++++++++-
 components/registerCompany/Form.vue         | 92 ++++++++++++++++++++-
 pages/community/RegisterCompany/index.vue   | 16 ++--
 4 files changed, 139 insertions(+), 14 deletions(-)

diff --git a/components/form/InputField.vue b/components/form/InputField.vue
index 4530889..3340e70 100644
--- a/components/form/InputField.vue
+++ b/components/form/InputField.vue
@@ -39,7 +39,7 @@
   <p v-if="error" class="text-danger">{{ error }}</p>
 </template>
 <script setup>
-const inputTypes = ["text", "email", "password", "number", "tel"];
+const inputTypes = ["text", "email", "password", "number", "tel", "file"];
 const props = defineProps({
   inputType: {
     type: String,
@@ -61,7 +61,7 @@ const props = defineProps({
     type: String,
     default: "text",
     validator: (value) =>
-      ["text", "email", "password", "number", "tel"].includes(value),
+      ["text", "email", "password", "number", "tel", "file"].includes(value),
   },
   placeholder: {
     type: String,
diff --git a/components/registerCompany/AddStackForm.vue b/components/registerCompany/AddStackForm.vue
index 0078355..a6bae71 100644
--- a/components/registerCompany/AddStackForm.vue
+++ b/components/registerCompany/AddStackForm.vue
@@ -1,18 +1,53 @@
 <template>
   <div class="card">
     <div class="card-body p-4">
-      <h2 class="fw-semibold" style="font-size: 1.5rem">Add Stack</h2>
+      <h2
+        class="fw-semibold text-dark d-flex align-items-center"
+        style="font-size: 1.25rem"
+      >
+        <span class="me-2">🚀</span>Add Stack
+      </h2>
       <div class="mb-3 row">
         <div class="col-12 mb-3">
           <FormInputField
             :id="'feStack'"
             :label="'Frontend Stack'"
             :inputType="'multiselect'"
-            :suggestions="['JavaScript', 'Python', 'Java', 'React', 'Next JS']"
+            :suggestions="[
+              'JavaScript',
+              'Python',
+              'Java',
+              'React',
+              'Next JS',
+              'Vue JS',
+              'Nuxt JS',
+              'PHP',
+            ]"
             :value="modelValue.frontendStack"
             @input="(value) => $emit('update', 'frontendStack', value)"
           />
         </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'mobileStack'"
+            :label="'Mobile Stack'"
+            :inputType="'multiselect'"
+            :suggestions="[
+              'React Native',
+              'Flutter',
+              'Kotlin',
+              'Ionic',
+              'Swift',
+              'Xamarin',
+              'Appcelerator',
+              'Cordova',
+              'Objective C',
+              'C#',
+            ]"
+            :value="modelValue.mobileStack"
+            @input="(value) => $emit('update', 'mobileStack', value)"
+          />
+        </div>
         <div class="col-12 mb-3">
           <FormInputField
             :id="'beStack'"
@@ -22,8 +57,6 @@
               'JavaScript',
               'Python',
               'Java',
-              'React',
-              'Next JS',
               'Node JS',
               '.Net',
               'Express JS',
diff --git a/components/registerCompany/Form.vue b/components/registerCompany/Form.vue
index 669acd7..85748ac 100644
--- a/components/registerCompany/Form.vue
+++ b/components/registerCompany/Form.vue
@@ -1,8 +1,18 @@
 <template>
   <div class="card">
     <div class="card-body p-4">
-      <h2 class="fw-semibold" style="font-size: 1.5rem">Add Company</h2>
+      <h2
+        class="fw-semibold text-dark d-flex align-items-center"
+        style="font-size: 1.25rem"
+      >
+        <span class="me-2">💼</span>Add Company
+      </h2>
       <div class="mb-3 row">
+        <div
+          class="col-12 fw-bold mt-1 mb-3 border-bottom pb-1 border-light text-dark"
+        >
+          COMPANY INFO<span class="ms-2">ℹ️</span>
+        </div>
         <div class="col-12 mb-3">
           <FormInputField
             :id="'companyName'"
@@ -38,10 +48,88 @@
             :label="'Source Slug'"
             :type="'text'"
             :value="modelValue.slug"
-            :placeholder="'johndoeinc'"
+            :placeholder="'Job source slug'"
             @input="(value) => $emit('update', 'slug', value)"
           />
         </div>
+        <div class="col-12 mb-3">
+          <FormInputField
+            :id="'logo'"
+            :label="'Company Logo'"
+            :type="'file'"
+            :inputType="'file'"
+            :value="modelValue.logo"
+            :placeholder="'+1 (123) 456-7890'"
+            @input="(value) => $emit('update', 'logo', value)"
+          />
+        </div>
+
+        <div
+          class="col-12 fw-bold mt-3 mb-3 border-bottom pb-1 border-light text-dark"
+        >
+          CONTACTS<span class="ms-2">☎️</span>
+        </div>
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'ceoName'"
+            :label="'CEO Name'"
+            :type="'text'"
+            :value="modelValue.ceoName"
+            :placeholder="'John Doe Inc.'"
+            @input="(value) => $emit('update', 'ceoName', value)"
+          />
+        </div>
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'ceoContact'"
+            :label="'CEO Contact'"
+            :inputType="'text'"
+            :value="modelValue.ceoContact"
+            :placeholder="'+1 (123) 456-7890'"
+            @input="(value) => $emit('update', 'ceoContact', value)"
+          />
+        </div>
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'ctoName'"
+            :label="'CTO Name'"
+            :type="'text'"
+            :value="modelValue.ctoName"
+            :placeholder="'Jane Racket'"
+            @input="(value) => $emit('update', 'ctoName', value)"
+          />
+        </div>
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'ctoContact'"
+            :label="'CTO Contact'"
+            :type="'text'"
+            :value="modelValue.ctoContact"
+            :placeholder="'+1 (123) 456-7890'"
+            @input="(value) => $emit('update', 'ctoContact', value)"
+          />
+        </div>
+
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'hrName'"
+            :label="'HR Name'"
+            :inputType="'text'"
+            :value="modelValue.hrName"
+            :placeholder="'Rodri Lei'"
+            @input="(value) => $emit('update', 'hrName', value)"
+          />
+        </div>
+        <div class="col-12 col-md-6 mb-3">
+          <FormInputField
+            :id="'hrContact'"
+            :label="'HR Contact'"
+            :type="'text'"
+            :value="modelValue.hrContact"
+            :placeholder="'+1 (123) 456-7890'"
+            @input="(value) => $emit('update', 'hrContact', value)"
+          />
+        </div>
       </div>
     </div>
   </div>
diff --git a/pages/community/RegisterCompany/index.vue b/pages/community/RegisterCompany/index.vue
index a434899..27eb9a2 100644
--- a/pages/community/RegisterCompany/index.vue
+++ b/pages/community/RegisterCompany/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container py-4">
+  <div class="container py-4 flex-grow-1">
     <FormPagination :steps="steps" :currentStep="currentStep" />
 
     <form @submit.prevent="handleSubmit">
@@ -49,11 +49,7 @@
 </template>
 
 <script setup>
-const steps = [
-  { title: "Add Company" },
-  { title: "Add Stack" },
-  // { title: "Add Backend Stack" },
-];
+const steps = [{ title: "Add Company" }, { title: "Add Stack" }];
 
 const currentStep = ref(0);
 const formData = ref({
@@ -61,8 +57,16 @@ const formData = ref({
   about: "",
   websiteUrl: "",
   slug: "",
+  ceoName: "",
+  ceoContact: "",
+  ctoName: "",
+  ctoContact: "",
+  hrName: "",
+  hrContact: "",
+  logo: "",
   frontendStack: ["JavaScript"],
   backendStack: [],
+  mobileStack: [],
 });
 
 const updateFormData = (field, value) => {