Merge branch 'master' of github.com:ANALOGUESHIFTS/forms.analogueshif…

…ts.com
analogueshifts · May 21, 2024 · 1e4665c · 1e4665c
2 parents 548bd72 + 8f19c31
commit 1e4665c
Show file tree

Hide file tree

Showing 20 changed files with 460 additions and 92 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
  "@radix-ui/react-label": "^2.0.2",
  "@radix-ui/react-popover": "^1.0.7",
  "@radix-ui/react-radio-group": "^1.1.3",
+ "@radix-ui/react-select": "^2.0.0",
  "@radix-ui/react-slot": "^1.0.2",
  "@radix-ui/react-switch": "^1.0.3",
  "@radix-ui/react-tabs": "^1.0.4",

diff --git a/src/app/forms/[uuid]/components/add-question-form.tsx b/src/app/forms/[uuid]/components/add-question-form.tsx
@@ -6,6 +6,15 @@ import { Button } from "@/components/ui/button";
 import FileInput from "@/components/application/file-input";
 import { DialogClose } from "@/components/ui/dialog";
 
+// Select
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+
 interface AddQuestionFormProps {
  questionNumber: string;
  submitQuestion: (data: any) => void;
@@ -76,21 +85,31 @@ const AddQuestionForm: React.FC<AddQuestionFormProps> = ({
  </div>
  <div className="w-full md:w-[calc(35%-10px)] flex flex-col gap-3">
  <p className="text-sm font-normal text-primary-boulder400">TYPE</p>
- <select
- value={type}
- onChange={(e) => setType(e.target.value)}
- className="max-w-full w-full h-14 rounded-2xl px-5 border border-primary-boulder200 text-[13px] font-light placeholder:text-primary-boulder300 text-primary-boulder950 outline-none"
- >
- {["short_text", "long_text", "radio", "checkbox", "file"].map(
- (option) => {
+ <Select value={type} onValueChange={(value: string) => setType(value)}>
+ <SelectTrigger className="max-w-full w-full h-14 rounded-2xl px-5 border border-primary-boulder200 text-[13px] font-light placeholder:text-primary-boulder300 text-primary-boulder950 outline-none">
+ <SelectValue placeholder="TYPE" />
+ </SelectTrigger>
+ <SelectContent>
+ {[
+ "short_text",
+ "long_text",
+ "radio",
+ "checkbox",
+ "image",
+ "pdf",
+ ].map((option) => {
  return (
- <option value={option} key={option}>
- {option}
- </option>
+ <SelectItem
+ className="focus:bg-background-lightYellow/10 py-2 text-xs text-primary-boulder900"
+ key={option}
+ value={option}
+ >
+ {option.toUpperCase()}
+ </SelectItem>
  );
- }
- )}
- </select>
+ })}
+ </SelectContent>
+ </Select>
  </div>
 
  {(type === "short_text" || type === "long_text") && (
@@ -115,9 +134,9 @@ const AddQuestionForm: React.FC<AddQuestionFormProps> = ({
  )}
  </div>
  )}
- {type === "file" && (
+ {(type === "image" || type === "pdf") && (
  <div className="w-full flex flex-col gap-3 -z-10">
- <FileInput />
+ <FileInput fileType={type} />
  </div>
  )}
  {(type === "radio" || type === "checkbox") && (

diff --git a/src/app/forms/[uuid]/components/edit-question-form.tsx b/src/app/forms/[uuid]/components/edit-question-form.tsx
@@ -1,11 +1,19 @@
 "use client";
-import { useState, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
 import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
 import FileInput from "@/components/application/file-input";
 import { DialogClose } from "@/components/ui/dialog";
 
+// Select
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+
 interface EditQuestionFormProps {
  questionData: any;
  submit: any;
@@ -85,21 +93,31 @@ const EditQuestionForm: React.FC<EditQuestionFormProps> = ({
  </div>
  <div className="w-full md:w-[calc(35%-10px)] flex flex-col gap-3">
  <p className="text-sm font-normal text-primary-boulder400">TYPE</p>
- <select
- value={type}
- onChange={(e) => setType(e.target.value)}
- className="max-w-full w-full h-14 rounded-2xl px-5 border border-primary-boulder200 text-[13px] font-light placeholder:text-primary-boulder300 text-primary-boulder950 outline-none"
- >
- {["short_text", "long_text", "radio", "checkbox", "file"].map(
- (option) => {
+ <Select value={type} onValueChange={(value: string) => setType(value)}>
+ <SelectTrigger className="max-w-full w-full h-14 rounded-2xl px-5 border border-primary-boulder200 text-[13px] font-light placeholder:text-primary-boulder300 text-primary-boulder950 outline-none">
+ <SelectValue placeholder="TYPE" />
+ </SelectTrigger>
+ <SelectContent>
+ {[
+ "short_text",
+ "long_text",
+ "radio",
+ "checkbox",
+ "image",
+ "pdf",
+ ].map((option) => {
  return (
- <option value={option} key={crypto.randomUUID()}>
- {option}
- </option>
+ <SelectItem
+ className="focus:bg-background-lightYellow/10 py-2 text-xs text-primary-boulder900"
+ key={option}
+ value={option}
+ >
+ {option.toUpperCase()}
+ </SelectItem>
  );
- }
- )}
- </select>
+ })}
+ </SelectContent>
+ </Select>
  </div>
 
  {(type === "short_text" || type === "long_text") && (
@@ -124,9 +142,9 @@ const EditQuestionForm: React.FC<EditQuestionFormProps> = ({
  )}
  </div>
  )}
- {type === "file" && (
+ {(type === "image" || type === "pdf") && (
  <div className="w-full flex flex-col gap-3 -z-10">
- <FileInput />
+ <FileInput fileType={type} />
  </div>
  )}
  {(type === "radio" || type === "checkbox") && (

diff --git a/src/app/forms/[uuid]/components/form-questions.tsx b/src/app/forms/[uuid]/components/form-questions.tsx
@@ -116,36 +116,49 @@ const FormQuestions: React.FC<FormQuestionsProps> = ({
  };
 
  return (
- <main className="w-full">
+ <main className="w-full py-10">
  {loading && <FormFallbackLoading />}
- <div className="w-full mt-6 flex-wrap gap-5 flex justify-center md:justify-between items-center h-max py-5 ">
+ <div
+ style={{ background: "rgb(243 244 246/1)" }}
+ className="w-full z-30 sticky top-[76px] backdrop-blur-lg mt-6 flex-wrap gap-5 flex justify-center md:justify-between items-center h-max py-5 "
+ >
  <span className="font-medium md:text-lg text-base text-primary-boulder950">
  Questions
  </span>
 
- <Dialog>
- <DialogTrigger>
- <span className="h-10 cursor-pointer rounded-full px-8 flex justify-center items-center gap-3 border border-background-lightYellow font-normal md:text-base text-sm bg-transparent text-background-lightYellow">
- Add question
- <i className="fas fa-plus"></i>
- </span>
- </DialogTrigger>
- <DialogContent className="w-[90%] duration-300 max-w-[1000px] h-max max-h-[80dvh] overflow-y-auto">
- <DialogHeader>
- <DialogTitle className="text-primary-boulder950">
- Create new question
- </DialogTitle>
- </DialogHeader>
- <AddQuestionForm
- questionNumber={String(vetQuestions.length + 1)}
- submitQuestion={(data) => {
- setVetQuestions((prev: any) => [data, ...prev]);
- }}
- />
- </DialogContent>
- </Dialog>
+ <div className="flex items-center gap-3">
+ <Dialog>
+ <DialogTrigger>
+ <span className="py-2 min-h-10 h-max cursor-pointer rounded-full px-4 md:px-8 flex justify-center items-center gap-3 border border-background-lightYellow font-normal md:text-base text-sm bg-transparent text-background-lightYellow">
+ Add question
+ <i className="fas fa-plus"></i>
+ </span>
+ </DialogTrigger>
+ <DialogContent className="w-[90%] duration-300 max-w-[1000px] h-max max-h-[80dvh] overflow-y-auto">
+ <DialogHeader>
+ <DialogTitle className="text-primary-boulder950">
+ Create new question
+ </DialogTitle>
+ </DialogHeader>
+ <AddQuestionForm
+ questionNumber={String(vetQuestions.length + 1)}
+ submitQuestion={(data) => {
+ setVetQuestions((prev: any) => [data, ...prev]);
+ }}
+ />
+ </DialogContent>
+ </Dialog>
+ {vetQuestions[0] && (
+ <button
+ onClick={uploadQuestions}
+ className={`px-4 md:px-8 text-[#FEFEFE] text-base font-normal flex items-center gap-2 py-2 min-h-10 h-max bg-background-lightYellow rounded-full border-none cursor-pointer`}
+ >
+ Update Questions
+ </button>
+ )}
+ </div>
  </div>
- <div className="w-full mt-5">
+ <div className="w-full mt-5 z-20">
  <Reorder.Group onReorder={setVetQuestions} values={vetQuestions}>
  {vetQuestions.map((item: any) => (
  <QuestionSection
@@ -157,16 +170,6 @@ const FormQuestions: React.FC<FormQuestionsProps> = ({
  ))}
  </Reorder.Group>
  </div>
- {vetQuestions[0] && (
- <div className="w-full mt-5 pb-12 flex justify-end">
- <button
- onClick={uploadQuestions}
- className={`px-10 text-[#FEFEFE] text-base duration-300 hover:scale-105 font-normal flex items-center gap-2 h-12 bg-background-lightYellow rounded-full border-none cursor-pointer`}
- >
- Update Questions
- </button>
- </div>
- )}
  </main>
  );
 };

diff --git a/src/app/forms/[uuid]/components/question-section.tsx b/src/app/forms/[uuid]/components/question-section.tsx
@@ -16,9 +16,8 @@ import {
 import { Switch } from "@/components/ui/switch";
 import EditQuestionForm from "./edit-question-form";
 import FileInput from "@/components/application/file-input";
-import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/use-toast";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import LoadingSpinner from "@/components/application/loading-spinner";
 
 interface QuestionSectionProps {
@@ -113,7 +112,14 @@ const QuestionSection: React.FC<QuestionSectionProps> = ({
  value={data.type}
  className="max-w-full w-full h-14 rounded-2xl px-5 border border-primary-boulder200 text-[13px] font-light placeholder:text-primary-boulder300 text-primary-boulder950 outline-none"
  >
- {["short_text", "long_text", "radio", "checkbox"].map((option) => {
+ {[
+ "short_text",
+ "long_text",
+ "radio",
+ "checkbox",
+ "image",
+ "pdf",
+ ].map((option) => {
  return (
  <option value={option} key={crypto.randomUUID()}>
  {option}
@@ -150,10 +156,10 @@ const QuestionSection: React.FC<QuestionSectionProps> = ({
  )}
 
  {/* IF TYPE IS A FILE */}
- {data.type === "file" && (
+ {(data.type === "image" || data.type === "pdf") && (
  <div className="w-full flex flex-col gap-3 relative">
  <div className="absolute top-0 left-0 w-full h-full bg-transparent"></div>
- <FileInput />
+ <FileInput fileType={data.type} />
  </div>
  )}
 
@@ -225,13 +231,13 @@ const QuestionSection: React.FC<QuestionSectionProps> = ({
  </Dialog>
 
  {/* DUPLICATE ACTION BUTTON */}
- <button
+ {/* <button
  onClick={duplicateVetQuestion}
  type="button"
  className="text-xs font-normal hover:text-primary-boulder950 text-primary-boulder400 border-none bg-transparent outline-none flex items-center gap-1"
  >
  <i className="fa-regular fa-copy text-sm"></i> DUPLICATE
- </button>
+ </button> */}
 
  {/* DELETE ACTION BUTTON */}
  <Dialog>

diff --git a/src/app/forms/components/form-grid-tile.tsx b/src/app/forms/components/form-grid-tile.tsx
@@ -31,7 +31,7 @@ const FormGridTile: React.FC<FormGridTileProps> = ({ item, deleteForm }) => {
  await navigator.share({
  title: item.title,
  text: "",
- url: "https://forms.analogueshifts.com/forms/show/" + item.uuid,
+ url: window.location.href + "/" + item.uuid,
  });
  } catch (error) {
  toast({