increase parties limit

app/javascript/template_builder/field_submitter.vue

@@ -143,6 +143,7 @@
       <li
         v-for="(submitter, index) in submitters"
         :key="submitter.uuid"
+        class="w-full"
       >
         <a
           href="#"
@@ -191,7 +192,10 @@
           </div>
         </a>
       </li>
-      <li v-if="submitters.length < names.length && editable && allowAddNew">
+      <li
+        v-if="submitters.length < names.length && editable && allowAddNew"
+        class="w-full"
+      >
         <a
           href="#"
           class="flex px-2"
@@ -308,9 +312,21 @@ export default {
         this.t('seventeenth_party'),
         this.t('eighteenth_party'),
         this.t('nineteenth_party'),
-        this.t('twentieth_party')
+        this.t('twentieth_party'),
+        ...this.generatedNames
       ]
     },
+    generatedNames () {
+      const names = []
+
+      for (let i = 21; i < 101; i++) {
+        const suffix = this.getOrdinalSuffix(i)
+
+        names.push(`${i}${suffix} ${this.t('party')}`)
+      }
+
+      return names
+    },
     lastPartyIndex () {
       const index = Math.max(...this.submitters.map((s) => this.names.indexOf(s.name)))
 
@@ -328,6 +344,13 @@ export default {
     selectSubmitter (submitter) {
       this.$emit('update:model-value', submitter.uuid)
     },
+    getOrdinalSuffix (num) {
+      if (num % 10 === 1 && num % 100 !== 11) return 'st'
+      if (num % 10 === 2 && num % 100 !== 12) return 'nd'
+      if (num % 10 === 3 && num % 100 !== 13) return 'rd'
+
+      return 'th'
+    },
     remove (submitter) {
       if (window.confirm(this.t('are_you_sure_'))) {
         this.$emit('remove', submitter)