Implement sort order for info pages

Fixes #1264

Author: bkis

Tekst-API/openapi.json

@@ -9991,6 +9991,14 @@
             "title": "Title",
             "description": "Title of this segment"
           },
+          "sortOrder": {
+            "type": "integer",
+            "maximum": 1000.0,
+            "minimum": 0.0,
+            "title": "Sortorder",
+            "description": "Sort order for displaying this segment among others (only relevant for non-system segments aka. info pages!)",
+            "default": 10
+          },
           "html": {
             "type": "string",
             "maxLength": 1048576,
@@ -10095,6 +10103,14 @@
             "title": "Title",
             "description": "Title of this segment"
           },
+          "sortOrder": {
+            "type": "integer",
+            "maximum": 1000.0,
+            "minimum": 0.0,
+            "title": "Sortorder",
+            "description": "Sort order for displaying this segment among others (only relevant for non-system segments aka. info pages!)",
+            "default": 10
+          },
           "html": {
             "type": "string",
             "maxLength": 1048576,
@@ -10194,6 +10210,21 @@
             "description": "Title of this segment",
             "optionalNullable": false
           },
+          "sortOrder": {
+            "anyOf": [
+              {
+                "type": "integer",
+                "maximum": 1000.0,
+                "minimum": 0.0
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Sortorder",
+            "description": "Sort order for displaying this segment among others (only relevant for non-system segments aka. info pages!)",
+            "optionalNullable": false
+          },
           "html": {
             "anyOf": [
               {

Tekst-API/tekst/models/segment.py

@@ -27,18 +27,21 @@ class ClientSegment(ModelBase, ModelFactoryMixin):
             ),
         ),
     ]
+
     editor_mode: Annotated[
         Literal["wysiwyg", "html"],
         Field(
             description="Last used editor mode",
         ),
     ] = "wysiwyg"
+
     locale: Annotated[
         TranslationLocaleKey,
         Field(
             description="Locale indicating the translation language of this segment",
         ),
     ]
+
     restriction: Annotated[
         Literal["none", "user", "superuser"],
         Field(
@@ -47,6 +50,7 @@ class ClientSegment(ModelBase, ModelFactoryMixin):
             ),
         ),
     ] = "none"
+
     title: Annotated[
         ConStr(
             max_length=32,
@@ -56,6 +60,19 @@ class ClientSegment(ModelBase, ModelFactoryMixin):
             description="Title of this segment",
         ),
     ]
+
+    sort_order: Annotated[
+        int,
+        Field(
+            description=(
+                "Sort order for displaying this segment among others "
+                "(only relevant for non-system segments aka. info pages!)"
+            ),
+            ge=0,
+            le=1000,
+        ),
+    ] = 10
+
     html: Annotated[
         ConStr(
             max_length=1048576,

Tekst-API/tekst/platform.py

@@ -168,16 +168,21 @@ async def get_segments(
         )
     )
     if not head_projection:
-        return await ClientSegmentDocument.find(
-            *system_segments_queries,
-            *(await _get_segment_restriction_queries(user)),
-        ).to_list()
+        return (
+            await ClientSegmentDocument.find(
+                *system_segments_queries,
+                *(await _get_segment_restriction_queries(user)),
+            )
+            .sort(+ClientSegmentDocument.sort_order)
+            .to_list()
+        )
     else:
         return (
             await ClientSegmentDocument.find(
                 *system_segments_queries,
                 *(await _get_segment_restriction_queries(user)),
             )
+            .sort(+ClientSegmentDocument.sort_order)
             .project(ClientSegmentHead)
             .to_list()
         )

Tekst-Web/src/api/schema.d.ts

@@ -2432,6 +2432,12 @@ export interface components {
        * @description Title of this segment
        */
       title: string;
+      /**
+       * Sortorder
+       * @description Sort order for displaying this segment among others (only relevant for non-system segments aka. info pages!)
+       * @default 10
+       */
+      sortOrder: number;
       /**
        * Html
        * @description HTML content of this segment
@@ -2484,6 +2490,12 @@ export interface components {
        * @description Title of this segment
        */
       title: string;
+      /**
+       * Sortorder
+       * @description Sort order for displaying this segment among others (only relevant for non-system segments aka. info pages!)
+       * @default 10
+       */
+      sortOrder: number;
       /**
        * Html
        * @description HTML content of this segment
@@ -2516,6 +2528,11 @@ export interface components {
        * @description Title of this segment
        */
       title?: string;
+      /**
+       * Sortorder
+       * @description Sort order for displaying this segment among others (only relevant for non-system segments aka. info pages!)
+       */
+      sortOrder?: number;
       /**
        * Html
        * @description HTML content of this segment

Tekst-Web/src/forms/formRules.ts

@@ -273,23 +273,6 @@ export const resourceSettingsFormRules: Record<string, FormItemRule[]> = {
 };
 
 export const commonResourceConfigFormRules: Record<string, FormItemRule[]> = {
-  sortOrder: [
-    {
-      required: true,
-      type: 'number',
-      message: () =>
-        $t('forms.rulesFeedback.isRequired', {
-          x: $t('common.sortOrder'),
-        }),
-      trigger: 'blur',
-    },
-    {
-      validator: (_: FormItemRule, value: number) =>
-        Number.isInteger(value) && value >= 0 && value <= 1000,
-      message: '0-1000',
-      trigger: 'blur',
-    },
-  ],
   itemName: [requiredStringRule(() => $t('common.name')), minMaxCharsRule(1, 32, 'blur')],
   itemGroupNameRequired: [
     requiredStringRule(() => $t('common.group')),

Tekst-Web/src/forms/resources/config/GeneralResourceConfigFormItems.vue

@@ -3,7 +3,6 @@ import { type AnyResourceRead, type GeneralResourceConfig, resourceTypes } from
 import FormSection from '@/components/FormSection.vue';
 import HelpButtonWidget from '@/components/HelpButtonWidget.vue';
 import LabeledSwitch from '@/components/LabeledSwitch.vue';
-import { commonResourceConfigFormRules } from '@/forms/formRules';
 import { $t } from '@/i18n';
 import { useStateStore } from '@/stores';
 import { pickTranslation } from '@/utils';
@@ -113,7 +112,7 @@ function renderCCMark(value: number) {
     </n-form-item>
 
     <!-- SORT ORDER -->
-    <n-form-item path="config.general.sortOrder" :rule="commonResourceConfigFormRules.sortOrder">
+    <n-form-item path="config.general.sortOrder">
       <template #label>
         <n-flex align="center" :wrap="false">
           {{ $t('common.sortOrder') }}

Tekst-Web/src/views/admin/AdminSystemSegmentsView.vue

@@ -21,6 +21,7 @@ import {
   NFormItem,
   NIcon,
   NInput,
+  NInputNumber,
   NSelect,
   useDialog,
   type FormInst,
@@ -328,6 +329,7 @@ watch(
             @keydown.enter.prevent
           />
         </n-form-item>
+
         <!-- KEY -->
         <n-form-item v-if="segmentType === 'info'" path="key" :label="$t('common.key')">
           <n-input
@@ -345,6 +347,7 @@ watch(
             @keydown.enter.prevent
           />
         </n-form-item>
+
         <!-- LOCALE -->
         <n-form-item path="locale" :label="$t('common.language')">
           <n-select
@@ -356,6 +359,7 @@ watch(
             @keydown.enter.prevent
           />
         </n-form-item>
+
         <!-- RESTRICTION -->
         <n-form-item path="restriction" :label="$t('admin.segments.restriction.showTo')" required>
           <n-select
@@ -379,6 +383,17 @@ watch(
             @keydown.enter.prevent
           />
         </n-form-item>
+
+        <!-- SORT ORDER -->
+        <n-form-item v-if="segmentType === 'info'" path="sortOrder" :label="$t('common.sortOrder')">
+          <n-input-number
+            v-model:value="segmentModel.sortOrder"
+            :min="0"
+            :max="1000"
+            style="width: 100%"
+          />
+        </n-form-item>
+
         <!-- HTML -->
         <n-form-item path="html" :label="$t('common.content')">
           <html-editor