@webitel/ui-sdk 25.6.6 → 25.6.8

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [v25.6.7] - 2025-05-08
+### :sparkles: New Features
+- [`cf7f6a7`](https://github.com/webitel/webitel-ui-sdk/commit/cf7f6a7b15d03779422f0b07ca4a5cc3a6f1acbd) - enhance audit-form components with improved styling and layout [WTEL-5679](https://webitel.atlassian.net/browse/WTEL-5679) *(commit by [@dlohvinov](https://github.com/dlohvinov))*
+- [`4adcd22`](https://github.com/webitel/webitel-ui-sdk/commit/4adcd2287c9cafb043350107b7fb8b9981b15abc) - small audit form result ui improvements and fixes [WTEL-5679](https://webitel.atlassian.net/browse/WTEL-5679) *(commit by [@dlohvinov](https://github.com/dlohvinov))*
+- [`5cf68bf`](https://github.com/webitel/webitel-ui-sdk/commit/5cf68bff9e9601955ad55430de5bdcdf48bde59d) - implemented audit form crud, still needs refactors and minor fixes [WTEL-5679](https://webitel.atlassian.net/browse/WTEL-5679) *(commit by [@dlohvinov](https://github.com/dlohvinov))*
+- [`8dca647`](https://github.com/webitel/webitel-ui-sdk/commit/8dca647d49a8124f837502d1423483c06b45e24d) - audit form editing in progress [WTEL-5679](https://webitel.atlassian.net/browse/WTEL-5679) *(commit by [@dlohvinov](https://github.com/dlohvinov))*
+
+### :recycle: Refactors
+- [`d739383`](https://github.com/webitel/webitel-ui-sdk/commit/d739383afbfd47ec5bfeb2431ae97393921ae758) - refactors and fixes to use audit-form in auditor app [WTEL-5679](https://webitel.atlassian.net/browse/WTEL-5679) *(commit by [@dlohvinov](https://github.com/dlohvinov))*
+- [`0723bf0`](https://github.com/webitel/webitel-ui-sdk/commit/0723bf0229d6981a3f272261a6b7fd178481d758) - audit-related values added WtObject and ScopeClass enums [WTEL-5679](https://webitel.atlassian.net/browse/WTEL-5679) *(commit by [@dlohvinov](https://github.com/dlohvinov))*
+- [`4fc05fe`](https://github.com/webitel/webitel-ui-sdk/commit/4fc05feff5253e44eb57b4d7a5e8bcab98a0bc49) - audit form refactors [WTEL-5679](https://webitel.atlassian.net/browse/WTEL-5679) *(commit by [@dlohvinov](https://github.com/dlohvinov))*
+
+
+## [v25.6.6] - 2025-05-07
+### :bug: Bug Fixes
+- [`0c370cd`](https://github.com/webitel/webitel-ui-sdk/commit/0c370cdfe2543d6fc41c38650bbd4455b263b942) - fixed search for get sys type records list [WTEL-6851](https://webitel.atlassian.net/browse/WTEL-6851) *(commit by [@plnnsimon](https://github.com/plnnsimon))*
+
+
 ## [v25.6.5] - 2025-05-05
 ### :bug: Bug Fixes
 - [`39d99ac`](https://github.com/webitel/webitel-ui-sdk/commit/39d99ac3629658df76536b9d8e6026cb5747d9e1) - fixed styles for select tags line-height [WTEL-6360](https://webitel.atlassian.net/browse/WTEL-6360) *(commit by [@plnnsimon](https://github.com/plnnsimon))*
@@ -2086,3 +2104,5 @@
 [v25.6.3]: https://github.com/webitel/webitel-ui-sdk/compare/v25.6.2...v25.6.3
 [v25.6.4]: https://github.com/webitel/webitel-ui-sdk/compare/v25.6.3...v25.6.4
 [v25.6.5]: https://github.com/webitel/webitel-ui-sdk/compare/v25.6.4...v25.6.5
+[v25.6.6]: https://github.com/webitel/webitel-ui-sdk/compare/v25.6.5...v25.6.6
+[v25.6.7]: https://github.com/webitel/webitel-ui-sdk/compare/v25.6.6...v25.6.7

package/dist/types/enums/WtObject/WtObject.d.ts

@@ -56,5 +56,7 @@ export declare const WtObject: {
     readonly Status: "status";
     readonly Source: "source";
     readonly CustomLookup: "customLookup";
+    readonly AuditForm: "auditForm";
+    readonly AuditRating: "auditRating";
 };
 export type WtObject = (typeof WtObject)[keyof typeof WtObject];

package/dist/types/modules/AuditForm/components/audit-form-question-read-wrapper.vue.d.ts

@@ -1,16 +1,17 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "change:result" | "activate", ...args: any[]) => void;
-    question: Record<string, any>;
-    result: Record<string, any>;
-    disableDragging: boolean;
-    readonly: boolean;
-    first: boolean;
-    $props: {
-        readonly question?: Record<string, any>;
-        readonly result?: Record<string, any>;
-        readonly disableDragging?: boolean;
-        readonly readonly?: boolean;
-        readonly first?: boolean;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import { EngineQuestion, EngineQuestionAnswer } from 'webitel-sdk';
+type __VLS_Props = {
+    question: EngineQuestion;
+    disableDragging?: boolean;
+    first?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'answer'?: EngineQuestionAnswer | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:answer": (value: EngineQuestionAnswer) => any;
+    activate: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:answer"?: (value: EngineQuestionAnswer) => any;
+    onActivate?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/types/modules/AuditForm/components/audit-form-question.vue.d.ts

@@ -1,18 +1,23 @@
-declare const _default: import("vue").DefineComponent<{}, {
+import { EngineQuestion, EngineQuestionAnswer } from "webitel-sdk";
+type __VLS_Props = {
+    question: EngineQuestion;
+    answer: EngineQuestionAnswer | null;
+    first?: boolean;
+};
+declare function activateQuestion(): void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
     activateQuestion: typeof activateQuestion;
-    $emit: (event: "delete" | "copy" | "update:question" | "update:result", ...args: any[]) => void;
-    question: Record<string, any>;
-    readonly: boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
+    copy: () => any;
+    "update:question": (args_0: unknown) => any;
+    "update:answer": (args_0: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: () => any;
+    onCopy?: () => any;
+    "onUpdate:question"?: (args_0: unknown) => any;
+    "onUpdate:answer"?: (args_0: unknown) => any;
+}>, {
     first: boolean;
-    mode?: string;
-    result?: Record<string, any>;
-    $props: {
-        readonly question?: Record<string, any>;
-        readonly readonly?: boolean;
-        readonly first?: boolean;
-        readonly mode?: string;
-        readonly result?: Record<string, any>;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
-declare function activateQuestion(): void;

package/dist/types/modules/AuditForm/components/audit-form.vue.d.ts

@@ -1,14 +1,34 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "update:result" | "update:questions" | "update:validation", ...args: any[]) => void;
-    mode: string;
-    readonly: boolean;
-    questions: unknown[];
-    result?: unknown[];
-    $props: {
-        readonly mode?: string;
-        readonly readonly?: boolean;
-        readonly questions?: unknown[];
-        readonly result?: unknown[];
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import { EngineQuestion, EngineQuestionAnswer } from 'webitel-sdk';
+declare const AuditFormMode: {
+    readonly Create: "create";
+    readonly Fill: "fill";
+};
+type AuditFormMode = typeof AuditFormMode[keyof typeof AuditFormMode];
+type __VLS_Props = {
+    mode: AuditFormMode;
+    readonly?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'answers'?: EngineQuestionAnswer[];
+    /**
+     * todo: rename to questionsModel and use instead of 'update:questions' event
+     */
+    'questions'?: EngineQuestion[];
+    'resultComment'?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:questions": (...args: any[]) => void;
+    "update:validation": (...args: any[]) => void;
+    "save:evaluation": (...args: any[]) => void;
+    "cancel:evaluation": (...args: any[]) => void;
+    "update:answers": (value: EngineQuestionAnswer[]) => void;
+    "update:resultComment": (value: string) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:questions"?: (...args: any[]) => any;
+    "onUpdate:validation"?: (...args: any[]) => any;
+    "onSave:evaluation"?: (...args: any[]) => any;
+    "onCancel:evaluation"?: (...args: any[]) => any;
+    "onUpdate:answers"?: (value: EngineQuestionAnswer[]) => any;
+    "onUpdate:resultComment"?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/types/modules/AuditForm/components/form/form-footer/audit-form-footer.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    invalid: boolean;
+    disabledSave?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "fill:save": () => any;
+    "fill:cancel": () => any;
+    "create:add": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onFill:save"?: () => any;
+    "onFill:cancel"?: () => any;
+    "onCreate:add"?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/modules/AuditForm/components/form-answers/answer-editing-info/audit-form-answer-editing-info.vue.d.ts

@@ -0,0 +1,9 @@
+import { EngineQuestionAnswer } from "webitel-sdk";
+type __VLS_Props = {
+    answer: EngineQuestionAnswer;
+    collapsible?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    collapsible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/modules/AuditForm/components/{questions → form-questions}/options/audit-form-question-options-write-row.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "delete" | "change:option", ...args: any[]) => void;
+    $emit: (event: "delete" | "update:option", ...args: any[]) => void;
     option: Record<string, any>;
     first: boolean;
     $props: {

package/dist/types/modules/AuditForm/components/form-questions/options/audit-form-question-options.vue.d.ts

@@ -0,0 +1,19 @@
+import { EngineQuestion, EngineQuestionAnswer } from "webitel-sdk";
+type __VLS_Props = {
+    /**
+     * question mode, NOT audit form mode
+     */
+    mode: 'read' | 'write';
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'question'?: EngineQuestion;
+    'answer'?: EngineQuestionAnswer | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:question": (value: EngineQuestion) => any;
+    "update:answer": (value: EngineQuestionAnswer) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:question"?: (value: EngineQuestion) => any;
+    "onUpdate:answer"?: (value: EngineQuestionAnswer) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/modules/AuditForm/components/{questions → form-questions}/score/audit-form-question-score.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "change:result" | "change:question", ...args: any[]) => void;
+    $emit: (event: "change:question" | "change:result", ...args: any[]) => void;
     mode: string;
     question: Record<string, any>;
     result?: Record<string, any>;

package/dist/types/modules/Userinfo/v2/enums/ScopeClass/ScopeClass.d.ts

@@ -41,5 +41,7 @@ export declare const ScopeClass: {
     readonly ChatBots: "chat_bots";
     readonly Cases: "cases";
     readonly CaseComments: "case_comments";
+    readonly AuditForm: "cc_audit_form";
+    readonly AuditRating: "rating";
 };
 export type ScopeClass = (typeof ScopeClass)[keyof typeof ScopeClass];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.6.6",
+  "version": "25.6.8",
   "private": false,
   "scripts": {
     "dev": "npm run docs:dev",
@@ -16,7 +16,7 @@
     "orval": "orval",
     "utils:link": "npm link",
     "utils:update-node": "nvm install --lts && nvm alias default node",
-    "utils:i": "npm install"
+    "utils:i": "npm install --install-links"
   },
   "main": "./dist/ui-sdk.js",
   "type": "module",
@@ -108,7 +108,7 @@
     "vue-multiselect": "^3.1.0",
     "vue-observe-visibility": "^2.0.0-alpha.1",
     "vue-router": "^4.5.0",
-    "webitel-sdk": "^25.2.19",
+    "webitel-sdk": "^25.4.3",
     "xlsx": "0.18.5",
     "zod": "^3.24.2"
   },

package/src/enums/WtObject/WtObject.ts

@@ -56,6 +56,8 @@ export const WtObject = {
   Status: 'status',
   Source: 'source',
   CustomLookup: 'customLookup',
+  AuditForm: 'auditForm',
+  AuditRating: 'auditRating',
 } as const;
 
 export type WtObject = (typeof WtObject)[keyof typeof WtObject];

package/src/locale/en/en.js

@@ -23,6 +23,7 @@ import { snakeToCamel } from '../../scripts';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    comment: 'Comment',
     replace: 'Replace',
     download: 'Download',
     history: 'History',
@@ -88,6 +89,9 @@ export default {
     unassigned: 'Unassigned',
     showUnassigned: 'Show unassigned',
     group: 'Group',
+    updatedBy: (/*{ named }*/) => {
+      return 'Edited';
+    },
   },
   // yak zhe ya zaebalsya povtoriaty odni i ti sami slova!!!!
   vocabulary: {

package/src/locale/ru/ru.js

@@ -23,6 +23,7 @@ import { snakeToCamel } from '../../scripts';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    comment: 'Коментарий',
     replace: 'Заменить',
     download: 'Скачать',
     history: 'История',
@@ -88,6 +89,9 @@ export default {
     unassigned: 'Неназначенные',
     showUnassigned: 'Показать неназначенные',
     group: 'Группа',
+    updatedBy: (/*{ named }*/) => {
+      return 'Редактировано';
+    },
   },
   vocabulary: {
     apply: 'Применить',

package/src/locale/ua/ua.js

@@ -23,6 +23,7 @@ import { snakeToCamel } from '../../scripts';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    comment: 'Коментар',
     replace: 'Замінити',
     download: 'Завантажити',
     history: 'Історія',
@@ -89,6 +90,9 @@ export default {
     unassigned: 'Непризначені',
     showUnassigned: 'Показати непризначені',
     group: 'Група',
+    updatedBy: (/*{ named }*/) => {
+      return 'Редаговано';
+    },
   },
   vocabulary: {
     apply: 'Застосувати',

package/src/modules/AuditForm/components/audit-form-question-read-wrapper.vue

@@ -1,7 +1,7 @@
 <template>
   <article
     :class="{
-      'audit-form-question-read--filled': isResult && result.score != null,
+      'audit-form-question-read--filled': isAnswer && answerModel.score != null,
       'audit-form-question-read--readonly': readonly,
     }"
     class="audit-form-question-read"
@@ -26,55 +26,61 @@
     <section class="audit-form-question-read-content">
       <component
         :is="QuestionTypeComponent"
+        v-model:answer="answerModel"
         :question="question"
-        :result="result"
+        :result="answerModel /* compat, should use 'answer' */"
         mode="read"
-        @change:result="!readonly && emit('change:result', $event)"
+        @change:result="updateAnswer  /* compat, should use 'answer' */"
       />
       <div
-        v-show="isResult"
+        v-show="isAnswer"
         class="audit-form-question--clear"
-        @click="emit('change:result', {})"
+        @click="resetAnswer"
       >
-        {{ $t('webitelUI.auditForm.clearSelection') }}
+        {{ t('webitelUI.auditForm.clearSelection') }}
       </div>
+      <wt-input
+        v-if="answerModel?.createdAt"
+        v-model="answerModel.comment"
+        :label="t('reusable.comment')"
+      />
     </section>
+
+    <template v-if="answerModel?.updatedAt">
+      <wt-divider />
+      <audit-form-answer-editing-info
+        :answer="answerModel"
+      />
+    </template>
   </article>
 </template>
 
-<script setup>
-import { computed } from 'vue';
-import { EngineAuditQuestionType } from 'webitel-sdk';
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import {useI18n} from "vue-i18n";
+import {EngineAuditQuestionType, EngineQuestion, EngineQuestionAnswer} from 'webitel-sdk';
 
-import WtIcon from '../../../components/wt-icon/wt-icon.vue';
+import { WtDivider,WtIcon, WtInput } from '../../../components';
 import isEmpty from '../../../scripts/isEmpty.js';
-import AuditFormQuestionOptions from './questions/options/audit-form-question-options.vue';
-import AuditFormQuestionScore from './questions/score/audit-form-question-score.vue';
-
-const props = defineProps({
-  question: {
-    type: Object,
-    required: true,
-  },
-  result: {
-    type: [Object, null],
-    required: true,
-  },
-  disableDragging: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  first: {
-    type: Boolean,
-    default: false,
-  },
-});
+import AuditFormAnswerEditingInfo from "./form-answers/answer-editing-info/audit-form-answer-editing-info.vue";
+import AuditFormQuestionOptions from './form-questions/options/audit-form-question-options.vue';
+import AuditFormQuestionScore from './form-questions/score/audit-form-question-score.vue';
+
+const readonly = inject('readonly');
+
+const answerModel = defineModel<EngineQuestionAnswer | null>('answer');
+
+const props = defineProps<{
+  question: EngineQuestion;
+  disableDragging?: boolean;
+  first?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'activate': [];
+}>();
 
-const emit = defineEmits(['change:result', 'activate']);
+const { t } = useI18n();
 
 const QuestionTypeComponent = computed(() => {
   if (props.question.type === EngineAuditQuestionType.Option)
@@ -84,7 +90,22 @@ const QuestionTypeComponent = computed(() => {
   return null;
 });
 
-const isResult = computed(() => !isEmpty(props.result));
+const isAnswer = computed(() => !isEmpty(answerModel.value));
+
+const updateAnswer = (value: EngineQuestionAnswer) => {
+  if (readonly.value) return; // if ... then in preview mode
+
+  // coz only some properties of answer may be patched
+  const newAnswer = Object.assign(answerModel.value, value);
+  answerModel.value = newAnswer;
+};
+
+const resetAnswer = () => {
+  answerModel.value = {
+    ...answerModel.value,
+    score: null, // reset only score field
+  };
+};
 </script>
 
 <style lang="scss" scoped>
@@ -128,6 +149,12 @@ const isResult = computed(() => !isEmpty(props.result));
   }
 }
 
+.audit-form-question-read-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
 .audit-form-question--clear {
   cursor: pointer;
   margin-top: var(--spacing-sm);

package/src/modules/AuditForm/components/audit-form-question-write-wrapper.vue

@@ -71,8 +71,8 @@ import WtSwitcher from '../../../components/wt-switcher/wt-switcher.vue';
 import WtTooltip from '../../../components/wt-tooltip/wt-tooltip.vue';
 import { generateQuestionOptionsSchema } from '../schemas/AuditFormQuestionOptionsSchema.js';
 import { generateQuestionScoreSchema } from '../schemas/AuditFormQuestionScoreSchema.js';
-import AuditFormQuestionOptions from './questions/options/audit-form-question-options.vue';
-import AuditFormQuestionScore from './questions/score/audit-form-question-score.vue';
+import AuditFormQuestionOptions from './form-questions/options/audit-form-question-options.vue';
+import AuditFormQuestionScore from './form-questions/score/audit-form-question-score.vue';
 
 const props = defineProps({
   question: {

package/src/modules/AuditForm/components/audit-form-question.vue

@@ -5,7 +5,7 @@
     :class="[
       `audit-form-question--mode-${mode}`,
       {
-        'audit-form-question--answered': isResult,
+        'audit-form-question--answered': isAnswer,
       },
       {
         'audit-form-question--sort-ignore': first && mode === 'fill',
@@ -15,54 +15,48 @@
     :first="first"
     :question="question"
     :readonly="readonly"
-    :result="result"
+    :result="answer /* compat, should be ':answer' */"
+    :answer="answer"
     :v="v$"
     class="audit-form-question"
     @activate="activateQuestion"
-    @copy="emits('copy')"
-    @delete="emits('delete')"
-    @change:question="emits('update:question', $event)"
-    @change:result="emits('update:result', $event)"
+    @copy="emit('copy')"
+    @delete="emit('delete')"
+    @change:question="emit('update:question', $event) /* compat, should be removed */"
+    @update:question="emit('update:question', $event)"
+    @change:result="emit('update:answer', $event) /* compat, should be ':answer' */"
+    @update:answer="emit('update:answer', $event)"
   />
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { computed, onMounted, ref, toRefs } from 'vue';
+import { computed, inject,onMounted, ref, toRefs } from 'vue';
+import { EngineQuestion, EngineQuestionAnswer } from "webitel-sdk";
 
 import vClickaway from '../../../directives/clickaway/clickaway.js';
 import isEmpty from '../../../scripts/isEmpty.js';
 import QuestionRead from './audit-form-question-read-wrapper.vue';
 import QuestionWrite from './audit-form-question-write-wrapper.vue';
 
-const props = defineProps({
-  question: {
-    type: Object,
-    required: true,
-  },
-  result: {
-    type: Object,
-  },
-  mode: {
-    type: String,
-  },
-  first: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
+const mode = inject('mode');
+const readonly = inject('readonly');
+
+const props = withDefaults(defineProps<{
+  question: EngineQuestion;
+  answer: EngineQuestionAnswer | null;
+  first?: boolean;
+}>(), {
+  first: false,
 });
 
-const emits = defineEmits([
-  'copy',
-  'delete',
-  'update:question',
-  'update:result',
-]);
+const emit = defineEmits<{
+  'copy': [];
+  'delete': [];
+  'update:question': [unknown]; // todo
+  'update:answer': [unknown]; // todo
+}>();
 
 const QuestionState = {
   SAVED: 'saved',
@@ -72,44 +66,50 @@ const QuestionState = {
 const state = ref(QuestionState.SAVED);
 
 // is needed for useVuelidate, because props.question/props.result isn't reactive
-const { question, result } = toRefs(props);
+const { question, answer } = toRefs(props);
 
 const v$ = useVuelidate(
   computed(() =>
-    props.mode === 'create'
+    mode === 'create'
       ? {
           question: {
             question: { required },
           },
         }
       : {
-          result: {
-            required: (value) =>
-              question.value.required ? !isEmpty(value) : true,
+          answer: {
+            required: (value) => {
+              // if not required, no need to validate
+              if (!props.question.required) return true;
+
+              if (value && value?.score != null) {
+                return true;
+              }
+            },
           },
         },
   ),
-  { question, result },
+  { question, answer },
   { $autoDirty: true },
 );
 
 const component = computed(() => {
-  if (props.readonly) return QuestionRead;
-  if (props.mode === 'create') {
+  if (readonly) return QuestionRead;
+  if (mode === 'create') {
     if (state.value === QuestionState.SAVED) return QuestionRead;
     return QuestionWrite;
   }
   return QuestionRead;
 });
 
-const isResult = computed(() => !isEmpty(props.result));
+const isAnswer = computed(() => !isEmpty(props.answer));
 
 function saveQuestion() {
   state.value = QuestionState.SAVED;
 }
 
 function activateQuestion() {
-  if (props.mode !== 'create') return;
+  if (mode !== 'create') return;
   state.value = QuestionState.EDIT;
 }
 

package/src/modules/AuditForm/components/audit-form.vue

@@ -10,78 +10,96 @@
         :key="key"
         ref="auditQuestions"
         :first="key === 0"
-        :mode="mode"
         :question="question"
-        :readonly="readonly"
-        :result="result && result[key] ? result[key] : null"
+        :answer="answers && answers[key] ? answers[key] : null"
         @copy="copyQuestion({ question, key })"
         @delete="deleteQuestion({ question, key })"
         @update:question="handleQuestionUpdate({ key, value: $event })"
-        @update:result="handleResultUpdate({ key, value: $event })"
+        @update:answer="handleAnswerUpdate({ key, value: $event })"
       />
     </div>
-    <wt-button
-      v-if="mode === 'create' && !readonly"
-      :disabled="isInvalidForm"
-      class="audit-form__add-button"
-      @click="addQuestion"
-    >
-      {{ $t('webitelUI.auditForm.addQuestion') }}
-    </wt-button>
+
+    <wt-textarea
+      v-if="mode === AuditFormMode.Fill"
+      :value="resultCommentModel"
+      class="call-evaluation-form__comment"
+      :label="$t('reusable.comment')"
+      @input="handleResultCommentUpdate"
+    />
+
+    <audit-form-footer
+      :invalid="isInvalidForm"
+      :disabled-save="!isAnswersTouched"
+      @fill:save="saveEvaluation"
+      @fill:cancel="cancelEvaluation"
+      @create:add="addQuestion"
+    />
   </section>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import cloneDeep from 'lodash/cloneDeep.js';
 import {
   computed,
   nextTick,
   onMounted,
+  provide,
   reactive,
   ref,
+  useTemplateRef,
   watch,
-  watchEffect,
 } from 'vue';
+import {EngineQuestion, EngineQuestionAnswer} from 'webitel-sdk';
 
-import WtButton from '../../../components/wt-button/wt-button.vue';
+import { WtTextarea } from '../../../components';
 import { useDestroyableSortable } from '../../../composables/useDestroyableSortable/useDestroyableSortable.js';
 import { generateQuestionSchema } from '../schemas/AuditFormQuestionSchema.js';
 import AuditFormQuestion from './audit-form-question.vue';
+import AuditFormFooter from "./form/form-footer/audit-form-footer.vue";
 
-const props = defineProps({
-  mode: {
-    type: String,
-    required: true,
-    /*
-     * Available options: ['create', 'fill']
-     *  */
-  },
-  questions: {
-    type: Array,
-    required: true,
-  },
-  result: {
-    type: Array,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-});
+const answersModel = defineModel<EngineQuestionAnswer[]>('answers');
+
+/**
+ * todo: rename to questionsModel and use instead of 'update:questions' event
+ */
+const questions = defineModel<EngineQuestion[]>('questions', {});
+const resultCommentModel = defineModel<string>('resultComment');
+
+const AuditFormMode = {
+  Create: 'create',
+  Fill: 'fill',
+} as const;
+
+type AuditFormMode = typeof AuditFormMode[keyof typeof AuditFormMode];
+
+const props = defineProps<{
+  mode: AuditFormMode;
+  readonly?: boolean;
+}>();
 
 const emit = defineEmits([
+  /**
+   * todo: remove and use questions model
+   */
   'update:questions',
-  'update:result',
   'update:validation',
+  'save:evaluation',
+  'cancel:evaluation',
 ]);
 
 const v$ = useVuelidate();
 
-const isInvalidForm = computed(() => !!v$.value.$errors.length);
-const auditQuestions = ref(null);
+const auditQuestions = useTemplateRef('auditQuestions');
 const isQuestionAdded = reactive({ value: false, index: null });
 
+const isAnswersTouched = ref(false);
+
+provide('readonly', props.readonly);
+provide('mode', props.mode);
+
+const isInvalidForm = computed(() => !!v$.value.$errors.length);
+
 async function addQuestion({ index, question } = {}) {
   const questions = [...(props.questions || [])];
   const newQuestion = question || generateQuestionSchema();
@@ -89,7 +107,7 @@ async function addQuestion({ index, question } = {}) {
   else questions.push(newQuestion);
   isQuestionAdded.value = true;
   isQuestionAdded.index = index || 'last';
-  await emit('update:questions', questions);
+  emit('update:questions', questions);
 }
 
 function handleQuestionUpdate({ key, value }) {
@@ -118,24 +136,35 @@ function changeQuestionsOrder({ oldIndex, newIndex }) {
   emit('update:questions', questions);
 }
 
-function handleResultUpdate({ key, value }) {
-  const result = [...props.result];
-  result[key] = value;
-  emit('update:result', result);
+function handleAnswerUpdate({ key, value }) {
+  const answer = [...answersModel.value];
+  answer[key] = value;
+  answersModel.value = answer;
+
+  isAnswersTouched.value = true;
 }
 
-function initResult() {
-  const result = props.questions?.map(() => ({}));
-  emit('update:result', result);
+function initAnswers() {
+  if (!answersModel.value || !answersModel.value.length) {
+    answersModel.value = props.questions.map(() => ({}));
+  }
 }
 
 function initQuestions() {
-  if (props.mode === 'create' && !props.questions?.length) {
+  if (!props.questions?.length) {
     addQuestion({ question: generateQuestionSchema({ required: true }) });
   } else if (props.questions.length)
     auditQuestions.value.at(0).activateQuestion();
 }
 
+function saveEvaluation() {
+  emit('save:evaluation');
+}
+
+function cancelEvaluation() {
+  emit('cancel:evaluation');
+}
+
 // https://my.webitel.com/browse/WTEL-3451, https://my.webitel.com/browse/WTEL-3436
 // at new question added, activate this question
 async function atQuestionAdded() {
@@ -151,7 +180,12 @@ async function atQuestionAdded() {
   isQuestionAdded.index = null;
 }
 
-const sortableWrapper = ref(null);
+function handleResultCommentUpdate(value) {
+  resultCommentModel.value = value;
+  isAnswersTouched.value = true;
+}
+
+const sortableWrapper = useTemplateRef('sortableWrapper');
 
 const { reloadSortable } = useDestroyableSortable(sortableWrapper, {
   handle: '.audit-form-question-read__drag-icon',
@@ -166,7 +200,7 @@ const { reloadSortable } = useDestroyableSortable(sortableWrapper, {
 watch(v$, () =>
   emit('update:validation', { invalid: isInvalidForm.value, v$: v$.value }),
 );
-watchEffect(initResult);
+
 watch(
   () => props.questions,
   () => {
@@ -176,7 +210,11 @@ watch(
 );
 
 onMounted(() => {
-  initQuestions();
+  if (props.mode === AuditFormMode.Create) {
+    initQuestions();
+  } else if (props.mode === AuditFormMode.Fill) {
+    initAnswers();
+  }
 });
 </script>
 
@@ -190,8 +228,4 @@ onMounted(() => {
     display: contents;
   }
 }
-
-.audit-form__add-button {
-  align-self: flex-end;
-}
 </style>

package/src/modules/AuditForm/components/form/form-footer/audit-form-footer.vue

@@ -0,0 +1,66 @@
+<template>
+  <footer class="audit-form-footer">
+    <template
+      v-if="mode === 'fill'"
+    >
+      <wt-button
+        :disabled="props.invalid || disabledSave"
+        @click="emit('fill:save')"
+      >
+        {{ t('reusable.save') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="emit('fill:cancel')"
+      >
+        {{ t('reusable.cancel') }}
+      </wt-button>
+    </template>
+
+
+    <wt-button
+      v-else-if="mode === 'create' && !readonly"
+      class="audit-form-footer-create-question-action"
+      :disabled="props.invalid"
+      @click="emit('create:add')"
+    >
+      {{ t('webitelUI.auditForm.addQuestion') }}
+    </wt-button>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue";
+import { useI18n } from "vue-i18n";
+
+import WtButton from "../../../../../components/wt-button/wt-button.vue";
+
+const mode = inject('mode');
+const readonly = inject('readonly');
+
+const props = defineProps<{
+  invalid: boolean;
+  disabledSave?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'fill:save': [];
+  'fill:cancel': [];
+  'create:add': [];
+}>();
+
+const { t } = useI18n();
+
+</script>
+
+<style scoped lang="scss">
+.audit-form-footer {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-sm);
+}
+
+.audit-form-footer-create-question-action {
+  margin-left: auto;
+}
+</style>

package/src/modules/AuditForm/components/form-answers/answer-editing-info/audit-form-answer-editing-info.vue

@@ -0,0 +1,106 @@
+<template>
+  <section class="audit-form-answer-editing-info">
+    <header class="audit-form-answer-editing-info-header">
+      <span>{{ t('reusable.updatedBy') }}</span>
+      <span>{{ answer.updatedBy.name }}</span>
+      <span>{{ updateTime }}</span>
+    </header>
+    <p
+      v-if="initialComment"
+      ref="answer-editing-comment"
+      class="audit-form-answer-editing-info-comment"
+      :class="{
+        'audit-form-answer-editing-info-comment--collapsed': collapsed,
+      }"
+    >
+      {{ initialComment }}
+    </p>
+    <footer
+      v-if="collapsed && isCommentClamped"
+      class="audit-form-answer-editing-info-footer"
+    >
+      <button
+        class="audit-form-answer-editing-info-expand-action"
+        type="button"
+        @click="collapsed = false"
+      >
+        {{ t('reusable.more') }}
+      </button>
+    </footer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useTemplateRef } from "vue";
+import { useI18n } from 'vue-i18n';
+import {EngineQuestionAnswer} from "webitel-sdk";
+
+const props = withDefaults(defineProps<{
+  answer: EngineQuestionAnswer;
+  collapsible?: boolean;
+}>(), {
+  collapsible: false,
+});
+
+const commentElRef = useTemplateRef('answer-editing-comment');
+
+const collapsed = ref(props.collapsible);
+
+const { t } = useI18n();
+
+const initialComment = props.answer.comment; /* prevent editing-info change if comment is changing  */
+
+const updateTime = computed(() => {
+  return new Date(+props.answer.updatedAt).toLocaleString();
+});
+
+const isCommentClamped = props.collapsible && computed(() => {
+  // https://stackoverflow.com/a/67455839
+  return commentElRef.value?.clientHeight !== commentElRef.value?.scrollHeight;
+});
+
+</script>
+
+<style scoped lang="scss">
+@use '@webitel/styleguide/typography' as *;
+
+.audit-form-answer-editing-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.audit-form-answer-editing-info-header {
+  @extend %typo-caption;
+  display: flex;
+  gap: var(--spacing-xs);
+}
+
+.audit-form-answer-editing-info-comment {
+  @extend %typo-body-1;
+
+  &--collapsed {
+    line-clamp: 2;
+    -webkit-line-clamp: 2; /* coz autoprefixer wont write "-webkit" for us https://github.com/postcss/autoprefixer/issues/1322 */
+    -webkit-box-orient: vertical; /* is needed for line-clamp */
+    display: -webkit-box;
+    overflow: hidden;
+  }
+}
+
+.audit-form-answer-editing-info-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.audit-form-answer-editing-info-expand-action {
+  @extend %typo-body-1;
+  color: var(--text-link-color);
+  cursor: pointer;
+  transition: var(--transition);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>

package/src/modules/AuditForm/components/{questions → form-questions}/options/audit-form-question-options-write-row.vue

@@ -48,7 +48,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['change:option', 'delete']);
+const emit = defineEmits(['update:option', 'delete']);
 
 // is needed for useVuelidate, because props.question/props.result isn't reactive
 const { option } = toRefs(props);

package/src/modules/AuditForm/components/{questions → form-questions}/options/audit-form-question-options.vue

@@ -5,7 +5,7 @@
       class="audit-form-question-options-write"
     >
       <options-write-row
-        v-for="(option, key) of question.options"
+        v-for="(option, key) of questionModel.options"
         :key="key"
         :first="key === 0"
         :option="option"
@@ -26,56 +26,62 @@
       class="audit-form-question-options-read"
     >
       <wt-radio
-        v-for="opt of question.options"
+        v-for="opt of questionModel.options"
         :key="opt.score + opt.name"
         :label="opt.name"
-        :selected="result"
-        :value="opt"
-        @input="emit('change:result', $event)"
+        :selected="answerModel?.score"
+        :value="opt.score"
+        @input="updateAnswer"
       />
     </div>
     <div v-else>Unknown mode: {{ mode }}</div>
   </article>
 </template>
 
-<script setup>
-import WtButton from '../../../../../components/wt-button/wt-button.vue';
-import WtRadio from '../../../../../components/wt-radio/wt-radio.vue';
+<script lang="ts" setup>
+import {EngineQuestion, EngineQuestionAnswer} from "webitel-sdk";
+
+import { WtButton, WtRadio } from '../../../../../components';
 import updateObject from '../../../../../scripts/updateObject.js';
 import { generateOption } from '../../../schemas/AuditFormQuestionOptionsSchema.js';
 import OptionsWriteRow from './audit-form-question-options-write-row.vue';
 
-const props = defineProps({
-  question: {
-    type: Object,
-    required: true,
-  },
-  result: {
-    type: Object,
-  },
-  mode: {
-    // options: ['read', 'write']
-    type: String,
-    default: 'read',
-  },
-});
+const questionModel = defineModel<EngineQuestion>('question');
+const answerModel = defineModel<EngineQuestionAnswer | null>('answer');
 
-const emit = defineEmits(['change:question', 'change:result']);
+const props = defineProps<{
+  /**
+   * question mode, NOT audit form mode
+   */
+  mode: 'read' | 'write';
+}>();
 
 function updateQuestion({ path, value }) {
-  emit('change:question', updateObject({ obj: props.question, path, value }));
+  questionModel.value = updateObject({
+    obj: questionModel.value,
+    path,
+    value,
+  });
 }
 
 function addQuestionOption() {
-  const options = [...props.question.options, generateOption()];
+  const options = [...questionModel.value.options, generateOption()];
   return updateQuestion({ path: 'options', value: options });
 }
 
 function deleteQuestionOption({ key }) {
-  const options = [...props.question.options];
+  const options = [...questionModel.value.options];
   options.splice(key, 1);
   return updateQuestion({ path: 'options', value: options });
 }
+
+function updateAnswer(score) {
+  answerModel.value = answerModel.value ? {
+    ...answerModel.value,
+    score,
+  } : { score };
+}
+
 </script>
 
 <style lang="scss" scoped>

package/src/modules/Userinfo/v2/enums/ScopeClass/ScopeClass.ts

@@ -42,6 +42,8 @@ export const ScopeClass = {
   ChatBots: 'chat_bots',
   Cases: 'cases',
   CaseComments: 'case_comments',
+  AuditForm: 'cc_audit_form',
+  AuditRating: 'rating',
 } as const;
 
 export type ScopeClass = (typeof ScopeClass)[keyof typeof ScopeClass];

package/src/modules/Userinfo/v2/mappings/mappings.ts

@@ -65,6 +65,8 @@ export const mapScopeClassToWtObjects: Record<ScopeClass, WtObject[]> = {
   [ScopeClass.ChatBots]: [WtObject.ChatBot], // routing cht_gateway
   [ScopeClass.Cases]: [WtObject.Case], // CRM
   [ScopeClass.CaseComments]: [WtObject.CaseComment],
+  [ScopeClass.AuditForm]: [WtObject.AuditForm],
+  [ScopeClass.AuditRating]: [WtObject.AuditRating],
 };
 
 export const mapScopeClassAccessTokenToCrudAction = {

package/dist/types/modules/AuditForm/components/questions/options/audit-form-question-options.vue.d.ts

@@ -1,12 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "change:result" | "change:question", ...args: any[]) => void;
-    mode: string;
-    question: Record<string, any>;
-    result?: Record<string, any>;
-    $props: {
-        readonly mode?: string;
-        readonly question?: Record<string, any>;
-        readonly result?: Record<string, any>;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;