Merge pull request #54 from CMP26Projects/Alert-Front-End

Alert front end
CMP26Projects · Dec 29, 2023 · ac8e767 · ac8e767
2 parents c914b0f + e2aa216
commit ac8e767
Show file tree

Hide file tree

Showing 15 changed files with 363 additions and 47 deletions.
diff --git a/client/src/assets/styles/components/Alert.scss b/client/src/assets/styles/components/Alert.scss
@@ -4,17 +4,18 @@
     display: flex;
     flex-direction: column;
 
-    width: 340px;
+    width: 100%;
     height: fit-content;
     flex-shrink: 0;
     border-radius: 15px;
     background: $--grey-800;
 
     padding: 15px 15px;
+    margin-block: 1rem;
     justify-content: center;
-    align-items: end;   
+    direction: rtl;   
 
-    gap: 10px;
+    gap: 20px;
 }
 
 .top-bar {
@@ -62,13 +63,6 @@
 }
 
 .title {
-    text-align: right;
-    font-family: Noto Kufi Arabic;
-    font-size: 19.2px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-
     &.main {
         color: $--grey-300;
     }
@@ -88,17 +82,6 @@
     }
 }
 
-.alert-info {
-    height: 65%;
-    text-align: right;
-    color: $--grey-300;
-    font-family: Noto Kufi Arabic;
-    font-size: 13.33px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-}
-
 .alert-btn {
     display: flex;
     width: 100px;
@@ -113,12 +96,6 @@
 
     color: $--grey-800;
 
-    font-family: Noto Kufi Arabic;
-    font-size: 13.33px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-
     &.red {
         background: var(--Red-700, #C81E1E);
     }

diff --git a/client/src/assets/styles/components/Inputs.scss b/client/src/assets/styles/components/Inputs.scss
@@ -7,6 +7,12 @@
   direction: rtl;
   width: 100%;
 
+  textarea {
+    resize: vertical;
+    width: 100%;
+    min-height: 8rem;
+  }
+
   .radio-buttons {
     display: flex;
     flex-direction: row;
@@ -33,6 +39,20 @@
     color: var(--grey-100);
   }
 
+  input[type="radio"] {
+    appearance: none;
+    width: 1rem;
+    height: 1rem;
+    border: 4px solid var(--grey-600);
+    border-radius: 50%;
+    outline: none;
+    margin-inline: 0.5rem;
+}
+
+  input[type="radio"]:checked {
+    border: 6px solid var(--primary-500);
+  }
+
   select {
     direction: rtl;
   }

diff --git a/client/src/assets/styles/components/NotificationBox.scss b/client/src/assets/styles/components/NotificationBox.scss
@@ -1,2 +1,3 @@
 .notificationBox {
+    margin-bottom: 8rem;
 }
diff --git a/client/src/components/common/Alerts.jsx b/client/src/components/common/Alerts.jsx
@@ -5,6 +5,14 @@ const Alert = ({ title, info, buttontext, Onclick, showRightBox, color }) => {
   return (
     <div className="alert-item">
       <div className="top-bar">
+        <div className="title-box">
+          <div
+            className={
+              showRightBox ? "right-box " + color : "right-box hide " + color
+            }
+          />
+          <h6 className={"title " + color}>{title}</h6>
+        </div>
         <svg
           className={"exit-btn " + color}
           xmlns="http://www.w3.org/2000/svg"
@@ -17,17 +25,8 @@ const Alert = ({ title, info, buttontext, Onclick, showRightBox, color }) => {
             fill="#D1D5DB"
           />
         </svg>
-
-        <div className="title-box">
-          <text className={"title " + color}>{title}</text>
-          <div
-            className={
-              showRightBox ? "right-box " + color : "right-box hide " + color
-            }
-          />
-        </div>
       </div>
-      <text className="alert-info">{info}</text>
+      <p>{info}</p>
       <button className={"alert-btn " + color} onClick={Onclick}>
         {buttontext}
       </button>

diff --git a/client/src/components/common/Inputs.jsx b/client/src/components/common/Inputs.jsx
@@ -34,6 +34,40 @@ TextInput.propTypes = {
   placeholder: PropTypes.string,
   required: PropTypes.bool,
 };
+
+function TextArea({
+  label,
+  type,
+  name,
+  value,
+  onChange,
+  placeholder,
+  required,
+}) {
+  return (
+    <label className="input input--text">
+      {label}
+      <textarea
+        type={type}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        required={required}
+      />
+    </label>
+  );
+}
+TextInput.propTypes = {
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+};
+
 function RadioInput({ label, name, required, valuesArr, onChange }) {
   return (
     <label className="input input--radio">
@@ -63,5 +97,5 @@ RadioInput.propTypes = {
   required: PropTypes.bool,
 };
 
-export { RadioInput };
+export { RadioInput, TextArea };
 export default TextInput;
diff --git a/client/src/components/common/NotificationBox.jsx b/client/src/components/common/NotificationBox.jsx
@@ -1,9 +1,35 @@
-import "../../assets/styles/components/NotificationBox.scss";
+import '../../assets/styles/components/NotificationBox.scss'
+import { useGetAllAlertsQuery } from '../../redux/slices/alertApiSlice'
+import Alert from './Alerts'
 
 export default function NotificationBox() {
-  return (
-    <div style={{ textAlign: "center", marginBlock: "1rem" }}>
-      سيتم العمل على هذا القسم قريباً
-    </div>
-  );
+    const { data: alerts, isFetching: isFetchingAlerts } = useGetAllAlertsQuery(
+        { status: 'unread', contentType: 'all' }
+    )
+
+    return (
+        <div className="notificationBox">
+            {isFetchingAlerts
+                ? 'جاري التحميل'
+                : alerts?.body?.length === 0
+                ? 'لا يوجد إشعارات'
+                : alerts?.body?.map((alert) => {
+                      return (
+                          <Alert
+                              key={alert.notificationId}
+                              title={'إشعار ' + alert.notificationId}
+                              info={alert.message}
+                              buttontext={'عرض المزيد'}
+                              Onclick={alert.onClick}
+                              showRightBox={true}
+                              color={
+                                  alert.contentType == 'attendance'
+                                      ? 'red'
+                                      : 'mint-green'
+                              }
+                          />
+                      )
+                  })}
+        </div>
+    )
 }
diff --git a/client/src/components/common/UserActions.jsx b/client/src/components/common/UserActions.jsx
@@ -62,7 +62,6 @@ export default function UserActions() {
           إدارة الماليات
         </Button>
         <Button
-          disabled
           linkTo={ActionRoutes["Send Notification"]}
           className="Button--medium Button--regular"
         >

diff --git a/client/src/components/common/nav.jsx b/client/src/components/common/nav.jsx
@@ -67,8 +67,7 @@ export default function Nav() {
             <Link to="/profile">
               <UserCircleIcon className="Nav__icon" />
             </Link>
-            {/* TODO: add route later */}
-            <Link to="/">
+            <Link to="/notifications">
               <BellIcon className="Nav__icon" />
             </Link>
           </div>

diff --git a/client/src/components/notifications/notificationPage.jsx b/client/src/components/notifications/notificationPage.jsx
@@ -0,0 +1,39 @@
+import PageTitle from '../common/PageTitle'
+import Alert from '../common/Alerts'
+import './notificationPage.scss'
+import { useGetAllAlertsQuery } from '../../redux/slices/alertApiSlice'
+
+export default function SendNotificationPage() {
+    const { data: alerts, isFetching: isFetchingAlerts } = useGetAllAlertsQuery(
+        { status: 'all', contentType: 'all' }
+    )
+
+    return (
+        <div className="notifications container">
+            <PageTitle title="الرسائل الواردة" />
+            <div className="notificationBox">
+                {isFetchingAlerts
+                    ? 'جاري التحميل'
+                    : alerts?.body?.length === 0
+                    ? 'لا يوجد إشعارات'
+                    : alerts?.body?.map((alert) => {
+                          return (
+                              <Alert
+                                  key={alert.notificationId}
+                                  title={'إشعار ' + alert.notificationId}
+                                  info={alert.message}
+                                  buttontext={'عرض المزيد'}
+                                  Onclick={alert.onClick}
+                                  showRightBox={true}
+                                  color={
+                                      alert.contentType == 'attendance'
+                                          ? 'red'
+                                          : 'mint-green'
+                                  }
+                              />
+                          )
+                      })}
+            </div>
+        </div>
+    )
+}
diff --git a/client/src/components/notifications/notificationPage.scss b/client/src/components/notifications/notificationPage.scss
@@ -0,0 +1,5 @@
+.notifications {
+  .notificationBox {
+    margin-bottom: 8rem;
+}
+}