Skip to content

Commit

Permalink
Interfaces visible to collaborators
Browse files Browse the repository at this point in the history
  • Loading branch information
@ln-dev7
ln-dev7 committed Nov 28, 2023
1 parent 7f12cb6 commit 2d30f8e
Show file tree
Hide file tree
Showing 8 changed files with 203 additions and 157 deletions.
4 changes: 2 additions & 2 deletions components/avatar-user.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ export function AvatarUser() {
<SheetTrigger asChild>
<div className="relative">
{data && data.exists && data.data.premium && (
<div className="absolute z-10 rounded-full -bottom-1 -right-1 flex items-center justify-center border-2 border-yellow-500 bg-white dark:bg-slate-800">
<Verified className="shrink-0 h-5 w-5 text-yellow-500 p-1" />
<div className="absolute -bottom-1 -right-1 z-10 flex items-center justify-center rounded-full border-2 border-yellow-500 bg-white dark:bg-slate-800">
<Verified className="h-5 w-5 shrink-0 p-1 text-yellow-500" />
</div>
)}
<Avatar
Expand Down
34 changes: 20 additions & 14 deletions components/form/publish.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,20 +160,26 @@ export default function PublishForms({ dataForm }: { dataForm: any }) {
<Eye className="mr-2 h-4 w-4" />
View form
</Link>
<h3 className="text-md mt-4 font-semibold">
{dataForm.published
? "Your form is currently online and can be viewed and answered by anyone at the link"
: "Your form is not published so can only be seen by you alone"}
</h3>
{isLoadingUpdateForm ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<p
className="mb-4 mt-2 cursor-pointer text-sm font-semibold uppercase text-muted-foreground underline underline-offset-4"
onClick={() => changeStatutOfForm()}
>
{!dataForm?.published ? "Publish" : "Unpublish"} your form
</p>
{dataForm.idAuthor === userPseudo && (
<>
<h3 className="text-md mt-4 font-semibold">
{dataForm.published
? "Your form is currently online and can be viewed and answered by anyone at the link"
: "Your form is not published so can only be seen by you alone"}
</h3>
<>
{isLoadingUpdateForm ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<p
className="mb-4 mt-2 cursor-pointer text-sm font-semibold uppercase text-muted-foreground underline underline-offset-4"
onClick={() => changeStatutOfForm()}
>
{!dataForm?.published ? "Publish" : "Unpublish"} your form
</p>
)}
</>
</>
)}
{isSuccessUpdateForm && (
<div
Expand Down
195 changes: 103 additions & 92 deletions components/form/questions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ export default function QuestionsForms({ dataForm }: { dataForm: any }) {
updateFormDocument,
isLoading: isLoadingUpdateForm,
isError: isErrorUpdateForm,
error: errorUpdateForm,
isSuccess: isSuccessUpdateForm,
reset: resetUpdateForm,
}: any = useUpdateFormDocument("forms")
Expand Down Expand Up @@ -213,79 +214,85 @@ export default function QuestionsForms({ dataForm }: { dataForm: any }) {

return (
<div className="flex w-full flex-col items-start gap-4 sm:flex-row">
<div className="flex w-full shrink-0 flex-col items-start gap-2 rounded-md sm:sticky sm:top-20 sm:w-[250px]">
<button
onClick={() => handleAddField("heading")}
className="flex w-full items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800"
>
<Heading className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Heading</span>
</button>
<button
onClick={() => handleAddField("text")}
className="flex w-full items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800"
>
<Minus className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Short answer</span>
</button>
<button
onClick={() => handleAddField("longtext")}
className="flex w-full items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800"
>
<AlignJustify className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Long answer</span>
</button>
<button
//onClick={() => handleAddField("link")}
className="flex w-full items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800"
>
<LinkIcon className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Link</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<button
//onClick={() => handleAddField("email")}
className="flex w-full items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800"
>
<Mail className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">E-mail</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<button className="flex w-full cursor-default items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800">
<CircleDot className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Unique choice</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<button className="flex w-full cursor-default items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800">
<ListChecks className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Multi choice</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<button className="flex w-full cursor-default items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800">
<List className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">List of choices</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<button className="flex w-full cursor-default items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800">
<Calendar className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Date</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<Separator className="my-2 hidden w-full sm:block" />
</div>
<Separator className="my-2 block w-full sm:hidden" />
{dataForm.idAuthor === userPseudo && (
<>
<div className="flex w-full shrink-0 flex-col items-start gap-2 rounded-md sm:sticky sm:top-20 sm:w-[250px]">
<button
onClick={() => handleAddField("heading")}
className="flex w-full items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800"
>
<Heading className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Heading</span>
</button>
<button
onClick={() => handleAddField("text")}
className="flex w-full items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800"
>
<Minus className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Short answer</span>
</button>
<button
onClick={() => handleAddField("longtext")}
className="flex w-full items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800"
>
<AlignJustify className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Long answer</span>
</button>
<button
//onClick={() => handleAddField("link")}
className="flex w-full items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800"
>
<LinkIcon className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Link</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<button
//onClick={() => handleAddField("email")}
className="flex w-full items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800"
>
<Mail className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">E-mail</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<button className="flex w-full cursor-default items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800">
<CircleDot className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Unique choice</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<button className="flex w-full cursor-default items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800">
<ListChecks className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Multi choice</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<button className="flex w-full cursor-default items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800">
<List className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">
List of choices
</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<button className="flex w-full cursor-default items-center justify-start gap-1 rounded-md px-4 py-2 hover:bg-slate-100 hover:dark:bg-slate-800">
<Calendar className="h-5 w-5" />
<span className="ml-2 text-sm font-semibold">Date</span>
<span className="mr-2 rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
soon
</span>
</button>
<Separator className="my-2 hidden w-full sm:block" />
</div>
<Separator className="my-2 block w-full sm:hidden" />
</>
)}
<div
id="questions"
className="relative flex w-full flex-col items-start gap-4 overflow-hidden rounded-md border px-4 pb-4 pt-7"
Expand Down Expand Up @@ -350,13 +357,15 @@ export default function QuestionsForms({ dataForm }: { dataForm: any }) {
{/* {errors?.questions?.[index]?.text && (
<p>{errors.questions[index].text.message}</p>
)} */}
<Button
variant="destructive"
className="absolute -top-2 right-2 flex h-10 w-10 items-center justify-center rounded-full p-2"
onClick={() => handleRemoveField(index)}
>
<Trash className="h-4 w-4" />
</Button>
{dataForm.idAuthor === userPseudo && (
<Button
variant="destructive"
className="absolute -top-2 right-2 flex h-10 w-10 items-center justify-center rounded-full p-2"
onClick={() => handleRemoveField(index)}
>
<Trash className="h-4 w-4" />
</Button>
)}
</div>
)
})}
Expand Down Expand Up @@ -390,18 +399,20 @@ export default function QuestionsForms({ dataForm }: { dataForm: any }) {
</button>
</div>
)}
<Button
variant="outline"
disabled={isLoadingUpdateForm}
onClick={isLoadingUpdateForm ? undefined : handleSubmit(onSubmit)}
>
{isLoadingUpdateForm ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Save className="mr-2 h-4 w-4" />
)}
Save questions
</Button>
{dataForm.idAuthor === userPseudo && (
<Button
variant="outline"
disabled={isLoadingUpdateForm}
onClick={isLoadingUpdateForm ? undefined : handleSubmit(onSubmit)}
>
{isLoadingUpdateForm ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Save className="mr-2 h-4 w-4" />
)}
Save questions
</Button>
)}
</div>
</div>
)
Expand Down
22 changes: 11 additions & 11 deletions components/form/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,11 +394,11 @@ export default function SettingsForms({ dataForm }: { dataForm: any }) {
<div className="flex w-full flex-col items-start gap-1">
<Label className="text-left">Add people to manage this form.</Label>
<p className="text-left text-sm">
The people you have added will be able to modify and view the
answers to this form.
The added persons will be able to consult the answers to your
form.
</p>
</div>
<div className="w-full flex items-center gap-2 mb-2">
<div className="mb-2 flex w-full items-center gap-2">
<Input
placeholder="Enter username"
onChange={(e) => {
Expand All @@ -425,22 +425,22 @@ export default function SettingsForms({ dataForm }: { dataForm: any }) {
</Button>
</div>
{dataForm.collaborators.length !== 0 && (
<div className="w-full flex flex-col gap-2">
<div className="flex w-full flex-col gap-2">
{dataForm.collaborators.map((collaborator, index) => (
<div
key={collaborator.pseudo}
className="w-full flex items-center bg-slate-50 dark:bg-slate-800 py-3 px-5 rounded-md"
className="flex w-full items-center rounded-md bg-slate-50 px-5 py-3 dark:bg-slate-800"
>
<div className="w-full flex">
<div className="flex w-full">
<a
href={`/user/${collaborator.pseudo}`}
className="text-sm font-semibold underline underline-offset-4 cursor-pointer"
className="cursor-pointer text-sm font-semibold underline underline-offset-4"
>
{collaborator.pseudo}
</a>
</div>
<span
className="shrink-0 block text-sm text-red-600 font-medium underline underline-offset-4 cursor-pointer"
className="block shrink-0 cursor-pointer text-sm font-medium text-red-600 underline underline-offset-4"
onClick={() => {
isLoadingUpdateForm
? undefined
Expand Down Expand Up @@ -534,8 +534,8 @@ export default function SettingsForms({ dataForm }: { dataForm: any }) {
</Label>
</div> */}

<div className="sticky inset-x-0 bottom-0 flex w-full border-t flex-col items-start gap-2 bg-white py-4 dark:bg-slate-900">
<div className="w-full flex items-center justify-between">
<div className="sticky inset-x-0 bottom-0 flex w-full flex-col items-start gap-2 border-t bg-white py-4 dark:bg-slate-900">
<div className="flex w-full items-center justify-between">
<Button
variant="default"
disabled={isLoadingUpdateForm || checkIfUsernameExist}
Expand All @@ -562,7 +562,7 @@ export default function SettingsForms({ dataForm }: { dataForm: any }) {
</AlertDialogTitle>
<AlertDialogDescription className="space-y-3">
<div
className="rounded-lg bg-red-50 p-4 text-sm text-red-800 dark:bg-gray-800 dark:text-red-400 font-semibold"
className="rounded-lg bg-red-50 p-4 text-sm font-semibold text-red-800 dark:bg-gray-800 dark:text-red-400"
role="alert"
>
This action is irreversible, please reflect beforehand.
Expand Down
1 change: 1 addition & 0 deletions firebase/firestore/checkIfIDExistOnCollection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ export async function checkIdAvailability(collectionName, id) {
return false;
}
}

1 change: 1 addition & 0 deletions firebase/firestore/updateFormDocument.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const useUpdateFormDocument = (collectionName) => {
updateFormDocument: mutation.mutate,
isLoading: mutation.isLoading,
isError: mutation.isError,
error: mutation.error,
isSuccess: mutation.isSuccess,
reset: mutation.reset,
}
Expand Down
Loading

0 comments on commit 2d30f8e

Please sign in to comment.