web/src/components/NewTaskDialog.vue - develop - wax_boy/semaphore_custom

web/src/components/NewTaskDialog.vue

90 строк2 KB

Denis Gukov

feat(ui): crop temlate title in task title

23 май 2025, 11:18

23 май 2025, 11:18777e535

<template>
  <EditDialog
    v-model="dialog"
    :save-button-text="$t(TEMPLATE_TYPE_ACTION_TITLES[template?.type || ''])"
    :title="$t('newTask')"
    @save="closeDialog"
    @close="closeDialog"
    test-id="newTaskDialog"
  >
    <template v-slot:title={}>
      <v-icon small class="mr-4">{{ TEMPLATE_TYPE_ICONS[template?.type || ''] }}</v-icon>
      <span class="breadcrumbs__item">{{ templateTitle }}</span>
      <v-icon>mdi-chevron-right</v-icon>
      <span class="breadcrumbs__item">{{ $t('newTask') }}</span>
    </template>

    <template v-slot:form="{ onSave, onError, needSave, needReset }">
      <TaskForm
        :project-id="projectId"
        item-id="new"
        :template="template"
        @save="onSave"
        @error="onError"
        :need-save="needSave"
        :need-reset="needReset"
        :source-task="sourceTask"
      />
    </template>
  </EditDialog>
</template>
<script>
import { TEMPLATE_TYPE_ACTION_TITLES, TEMPLATE_TYPE_ICONS } from '@/lib/constants';
import TaskForm from './TaskForm.vue';
import EditDialog from './EditDialog.vue';

import EventBus from '../event-bus';

export default {
  components: {
    TaskForm,
    EditDialog,
  },
  props: {
    value: Boolean,
    projectId: Number,
    template: Object,
    sourceTask: Object,
  },
  data() {
    return {
      dialog: false,
      TEMPLATE_TYPE_ACTION_TITLES,
      TEMPLATE_TYPE_ICONS,
    };
  },
  watch: {
    async dialog(val) {
      this.$emit('input', val);
    },

    async value(val) {
      this.dialog = val;
    },
  },

  computed: {
    templateTitle() {
      let res = this.template?.name || '';
      if (res.length > 16) {
        res = `${res.substring(0, 14)}...`;
      }

      return res;
    },
  },

  methods: {
    closeDialog(e) {
      this.dialog = false;
      if (e) {
        EventBus.$emit('i-show-task', {
          taskId: e.item.id,
        });
        this.$emit('save', e);
      }
      this.$emit('close');
    },
  },
};
</script>