[DOP-25282] Add slug field to Queue

Author: dolfinus

src/entities/queue/api/types.ts

@@ -4,6 +4,7 @@ export interface Queue {
   id: number;
   group_id: number;
   name: string;
+  slug: string;
   description: string;
 }
 

src/features/queue/QueueDetailInfo/index.tsx

@@ -16,6 +16,9 @@ export const QueueDetailInfo = ({ queue, group, ...props }: QueueDetailInfoProps
       <Descriptions.Item label={t('name')} span={3}>
         {queue.name}
       </Descriptions.Item>
+      <Descriptions.Item label={t('slug')} span={3}>
+        {queue.slug}
+      </Descriptions.Item>
       <Descriptions.Item label={t('description')} span={3}>
         {queue.description}
       </Descriptions.Item>

src/features/queue/QueueList/utils/getQueueListColumns/index.tsx

@@ -18,6 +18,10 @@ export const getQueueListColumns = (t: TFunction) => {
       render: (name, record) => <Link to={`/queues/${record.id}`}>{name}</Link>,
       width: 400,
     },
+    {
+      title: t('slug'),
+      dataIndex: 'slug',
+    },
     {
       title: t('description'),
       dataIndex: 'description',

src/features/queue/UpdateQueue/index.tsx

@@ -13,7 +13,7 @@ export const UpdateQueue = ({ queue, group }: UpdateQueueProps) => {
   const navigate = useNavigate();
 
   const handleUpdateQueue = (values: UpdateQueueForm) => {
-    return queueService.updateQueue({ ...values, id: queue.id });
+    return queueService.updateQueue({ name: values.name, description: values.description, id: queue.id });
   };
 
   const onSuccess = (response: Queue) => {
@@ -39,6 +39,10 @@ export const UpdateQueue = ({ queue, group }: UpdateQueueProps) => {
         <FormCurrentGroupDescription groupName={group.name} />
 
         <Form.Item label={t('name')} name="name" rules={[{ required: true, pattern: QUEUE_NAME_REGEXP }]}>
+          <Input size="large" />
+        </Form.Item>
+
+        <Form.Item label={t('slug')} name="slug">
           <Input size="large" disabled />
         </Form.Item>
 

src/features/queue/UpdateQueue/types.ts

@@ -1,7 +1,10 @@
 import { GroupData } from '@entities/group';
 import { Queue, UpdateQueueRequest } from '@entities/queue';
 
-export interface UpdateQueueForm extends Omit<UpdateQueueRequest, 'id'> {}
+export interface UpdateQueueForm extends Omit<UpdateQueueRequest, 'id'> {
+  // Slug is shown, but cannot be changed by user
+  slug: string;
+}
 
 export interface UpdateQueueProps {
   queue: Queue;

src/features/queue/UpdateQueue/utils/getUpdateQueueInitialValues/index.ts

@@ -6,6 +6,7 @@ import { UpdateQueueForm } from '../../types';
 export const getUpdateQueueInitialValues = (queue: Queue): UpdateQueueForm => {
   return {
     name: queue.name,
+    slug: queue.slug,
     description: queue.description,
   };
 };

src/shared/config/i18n/translations/en.json

@@ -263,6 +263,7 @@
       "delete": "Delete",
       "id": "Id",
       "name": "Name",
+      "slug": "Slug",
       "description": "Description",
       "type": "Type",
       "required": "required",

src/shared/config/i18n/translations/ru.json

@@ -257,6 +257,7 @@
       "delete": "Удалить",
       "id": "Идентификатор",
       "name": "Название",
+      "slug": "Краткое имя",
       "description": "Описание",
       "type": "Тип",
       "required": "обязательный",