feat: Improve Invitations API and add new Frontend components

- Improved the `get` method in `InvitationsListAPI` to simplify code and provide a more concise response.
- Added `loads` and `dumps` functions from the `json` module for better serialization of API responses.
- Updated `package-lock.json` and `package.json` in the Frontend to add the new Vue packages `vue-collapsed`.
- Added new SCSS animations for fade, fade-fast, fade-between, collapse, expand, and slide-fade.
- Created a new component `OptionalInput.vue` in the FormKit directory.
- Deleted the `TooltipInput.vue` component.
- Added a new form `InviteForm.vue` with various input fields and advanced options.

backend/api/routes/invitations_api.py

@@ -2,6 +2,7 @@
 from flask_restx import Namespace, Resource
 from flask_jwt_extended import jwt_required
 from playhouse.shortcuts import model_to_dict
+from json import loads, dumps
 
 from app.models.database.invitations import Invitations
 from app.models.wizarr.invitations import InvitationsModel
@@ -18,16 +19,8 @@ class InvitationsListAPI(Resource):
  @api.doc(description="Get all invites")
  @api.response(500, "Internal server error")
  def get(self):
- # Select all invites from the database
- invites = Invitations.select()
-
- # Convert the invites to a list of dictionaries
- response = [
- model_to_dict(invite, exclude=[Invitations.created, Invitations.expires])
- for invite in invites
- ]
-
- return response, 200
+ response = list(Invitations.select().dicts())
+ return loads(dumps(response, indent=4, sort_keys=True, default=str)), 200
 
  @api.doc(description="Create an invite")
  @api.response(500, "Internal server error")

backend/api/routes/mfa_api.py

@@ -46,8 +46,6 @@ def get(self):
  return {"message": "No user found"}, 401
 
  response = list(MFA.select().where(MFA.user_id == current_user["id"]).dicts())
-
- # Return the response
  return loads(dumps(response, indent=4, sort_keys=True, default=str)), 200
 
 

frontend/package.json

@@ -58,6 +58,7 @@
  "vite-plugin-ssr": "^0.4.140",
  "vue": "^3.3.4",
  "vue-3-socket.io": "^1.0.5",
+ "vue-collapsed": "^1.2.7",
  "vue-datepicker-ui": "^3.1.1",
  "vue-router": "^4.2.4",
  "vue-simple-password-meter": "^1.3.4",

frontend/src/assets/scss/animations.scss

@@ -1,3 +1,4 @@
+/* Fade Animation */
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 0.5s ease;
@@ -8,6 +9,7 @@
  opacity: 0;
 }
 
+/* Fade Fast Animation */
 .fade-fast-enter-active,
 .fade-fast-leave-active {
  transition: opacity 0.3s ease;
@@ -18,6 +20,19 @@
  opacity: 0;
 }
 
+/* Fade Between Animation */
+.fade-between-enter-active,
+.fade-between-leave-active {
+ transition: opacity 0.5s ease;
+ position: absolute;
+}
+
+.fade-between-enter-from,
+.fade-between-leave-to {
+ opacity: 0;
+}
+
+/* Collapse Animation */
 .collapse-leave-active {
  transition: max-height 0.5s ease-in-out;
  max-height: 100vh;
@@ -28,6 +43,7 @@
  max-height: 0;
 }
 
+/* Expand Animation */
 .expand-enter-active {
  transition: max-height 0.5s ease-in-out;
  max-height: 0;
@@ -38,6 +54,7 @@
  max-height: 100vh;
 }
 
+/* Slide Fade Animation */
 .slide-fade-enter-active {
  transition: all 0.3s ease-out;
 }

frontend/src/components/FormKit/OptionalInput.vue

@@ -0,0 +1,63 @@
+<template>
+ <label :class="context.classes.label" :for="context.id">
+ <span class="mr-1">{{ context.label }}</span>
+ <span class="mr-1 text-gray-500">(optional)</span>
+ </label>
+ <input type="text" v-bind="attrs" :class="context.classes.input" :id="context.id" />
+</template>
+
+<style lang="scss">
+.formkit-outer[data-type="optionalInput"] > .formkit-wrapper > label {
+ display: none;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+// Define the props type
+interface MyProps {
+ context: {
+ id: string;
+ classes: {
+ input: string;
+ label: string;
+ };
+ label: string;
+ value: string;
+ node: {
+ input: (value: string) => void;
+ };
+ required: boolean;
+ attrs: {
+ [key: string]: string;
+ };
+ };
+}
+
+// Create the component
+export default defineComponent({
+ props: {
+ context: {
+ type: Object as () => MyProps["context"],
+ required: true,
+ },
+ },
+ computed: {
+ attrs() {
+ return Object.keys(this.context.attrs).reduce(
+ (acc, key) => {
+ acc[key] = this.context.attrs[key];
+ return acc;
+ },
+ {} as { [key: string]: string },
+ );
+ },
+ },
+ mounted() {
+ // Set the initial value
+ // this.tmp = this.context.value;
+ console.log("this.context", this.context);
+ },
+});
+</script>