Enhance Form Visibility Logic and UI Components

- Updated the `getIsClosedAttribute` method in `Form.php` to include a check for the form's visibility status, ensuring that forms marked as 'closed' are accurately reflected in their state.
- Modified `QuillyEditor.vue` to import additional Quill patches for improved functionality.
- Changed the alert color from yellow to amber in `OpenCompleteForm.vue` for better visual consistency.
- Refactored the form status display in `OpenCompleteForm.vue` and `show.vue` to utilize the new `FormStatusBadges` component, streamlining the UI and improving maintainability.
- Enhanced the `FormEditorNavbar.vue` to include icons for better user experience and clarity.

These changes aim to improve the accuracy of form visibility handling and enhance the overall user interface across various components.

client/components/forms/components/QuillyEditor.vue

@@ -8,6 +8,7 @@
 <script setup>
 import Quill from 'quill'
 import 'quill/dist/quill.snow.css'
+import '../../../lib/quill/quillPatches'
 import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
 
 const props = defineProps({

client/components/open/forms/OpenCompleteForm.vue

@@ -55,7 +55,7 @@
           class="m-2 my-4">
           <UAlert
             :close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'gray', variant: 'link', padded: false }"
-            color="yellow"
+            color="amber"
             variant="subtle"
             icon="i-material-symbols-info-outline"
             @close="hidePasswordDisabledMsg = true"
@@ -64,29 +64,35 @@
         </div>
 
 
-        <div
+        <UAlert
           v-if="isPublicFormPage && (form.is_closed || form.visibility=='closed')"
-          class="border shadow-sm p-2 my-4 flex items-center rounded-md bg-yellow-100 dark:bg-yellow-600/20 border-yellow-500 dark:border-yellow-500/20"
+          icon="i-heroicons-lock-closed-20-solid"
+          color="amber"
+          variant="subtle"
+          class="m-2 my-4"
         >
-          <div class="flex-grow">
+          <template #description>
             <div
-              class="mb-0 py-2 px-4 text-yellow-600"
+              class="py-2"
               v-html="form.closed_text"
             />
-          </div>
-        </div>
+          </template>
+        </UAlert>
 
-        <div
+        <UAlert
           v-else-if="isPublicFormPage && form.max_number_of_submissions_reached"
-          class="border shadow-sm p-2 my-4 flex items-center rounded-md bg-yellow-100 dark:bg-yellow-600/20 border-yellow-500 dark:border-yellow-500/20"
+          icon="i-heroicons-lock-closed-20-solid"
+          color="amber"
+          variant="subtle"
+          class="m-2 my-4"
         >
-          <div class="flex-grow">
+          <template #description>
             <div
-              class="mb-0 py-2 px-4 text-yellow-600 dark:text-yellow-600"
+              class="py-2"
               v-html="form.max_submissions_reached_text"
             />
-          </div>
-        </div>
+          </template>
+        </UAlert>
 
         <form-cleanings
           v-if="showFormCleanings"

client/components/open/forms/components/FormEditorNavbar.vue

@@ -23,7 +23,7 @@
       ]"
     />
 
-    <div class="flex-grow flex justify-center">
+    <div class="flex-grow flex justify-center gap-2">
       <EditableTag
         id="form-editor-title"
         v-model="form.title"
@@ -34,12 +34,14 @@
         v-if="form.visibility == 'draft'"
         color="yellow"
         variant="soft"
+        icon="i-heroicons-pencil-square"
         label="Draft"
       />
       <UBadge
         v-else-if="form.visibility == 'closed'"
         color="gray"
         variant="soft"
+        icon="i-heroicons-lock-closed-20-solid"
         label="Closed"
       />
     </div>

client/components/open/forms/components/FormStatusBadges.vue

@@ -0,0 +1,110 @@
+<template>
+  <div 
+    v-if="shouldDisplayBadges" 
+    class="flex items-center flex-wrap gap-1"
+  >
+    <!-- Draft Badge -->
+    <UTooltip v-if="form.visibility === 'draft'" text="Not publicly accessible">
+      <UBadge
+        color="amber"
+        variant="subtle"
+        icon="i-heroicons-exclamation-triangle"
+        :size="size"
+      >
+        Draft
+      </UBadge>
+    </UTooltip>
+    
+    <!-- Closed Badge -->
+    <UTooltip v-else-if="form.visibility === 'closed'" text="Won't accept new submissions">
+      <UBadge
+        color="gray"
+        variant="subtle"
+        icon="i-heroicons-lock-closed"
+        :size="size"
+      >
+        Closed
+      </UBadge>
+    </UTooltip>
+    
+    <!-- Time Limited Badge -->
+    <UTooltip v-if="form.closes_at && !form.is_closed" :text="`Will close on ${closesDate}`">
+      <UBadge
+        color="amber"
+        variant="subtle"
+        icon="i-heroicons-clock"
+        :size="size"
+      >
+        Time limited
+      </UBadge>
+    </UTooltip>
+    
+    <!-- Submission Limited Badge -->
+    <UTooltip 
+      v-if="form.max_submissions_count > 0 && !form.max_number_of_submissions_reached" 
+      :text="`Limited to ${form.max_submissions_count} submissions`"
+    >
+      <UBadge
+        color="amber"
+        variant="subtle"
+        icon="i-heroicons-chart-bar"
+        :size="size"
+      >
+        Submission limited
+      </UBadge>
+    </UTooltip>
+    
+    <!-- Tags Badges -->
+    <UBadge
+      v-for="tag in form.tags"
+      :key="tag"
+      color="white"
+      variant="solid"
+      class="capitalize"
+      :size="size"
+    >
+      {{ tag }}
+    </UBadge>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  form: {
+    type: Object,
+    required: true
+  },
+  size: {
+    type: String,
+    default: 'sm',
+    validator: (value) => ['xs', 'sm', 'md', 'lg'].includes(value)
+  }
+})
+
+const closesDate = computed(() => {
+  if (props.form && props.form.closes_at) {
+    try {
+      const dateObj = new Date(props.form.closes_at)
+      return dateObj.getFullYear() + '-' +
+        String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
+        String(dateObj.getDate()).padStart(2, '0') + ' ' +
+        String(dateObj.getHours()).padStart(2, '0') + ':' +
+        String(dateObj.getMinutes()).padStart(2, '0')
+    } catch (e) {
+      console.error(e)
+      return null
+    }
+  }
+  return null
+})
+
+// Conditional to determine if badges should be displayed
+const shouldDisplayBadges = computed(() => {
+  return ['draft', 'closed'].includes(props.form.visibility) || 
+         (props.form.tags && props.form.tags.length > 0) || 
+         props.form.closes_at || 
+         (props.form.max_submissions_count > 0)
+})
+</script>