feat: refs #8440 add delete functionality to notes and update required attributes

src/components/ui/VnNotes.vue

@@ -25,13 +25,16 @@ const $attrs = computed(() => {
     return rest;
 });
 
-const isRequired = computed(() => {
+const isRequired = ref(() => {
-    return Object.keys($attrs).includes('required')
+    return Object.keys($attrs).includes('required');
+});
+const isDeletable = ref(() => {
+    return Object.keys($attrs).includes('removable');
 });
 
 const $props = defineProps({
     url: { type: String, default: null },
-    saveUrl: {type: String, default: null},
+    saveUrl: { type: String, default: null },
     filter: { type: Object, default: () => {} },
     body: { type: Object, default: () => {} },
     addNote: { type: Boolean, default: false },
@@ -52,6 +55,11 @@ function handleClick(e) {
     else insert();
 }
 
+async function deleteNote(e) {
+    await axios.delete(`${$props.url}/${e.id}`);
+    await vnPaginateRef.value.fetch();
+}
+
 async function insert() {
     if (!newNote.text || ($props.selectType && !newNote.observationTypeFk)) return;
 
@@ -65,7 +73,7 @@ async function insert() {
 }
 
 function confirmAndUpdate() {
-    if(!newNote.text && originalText)
+    if (!newNote.text && originalText)
         quasar
             .dialog({
                 component: VnConfirm,
@@ -88,11 +96,17 @@ async function update() {
         ...body,
         ...{ notes: newNote.text },
     };
-    await axios.patch(`${$props.saveUrl ?? `${$props.url}/${$props.body.workerFk}`}`, newBody);
+    await axios.patch(
+        `${$props.saveUrl ?? `${$props.url}/${$props.body.workerFk}`}`,
+        newBody,
+    );
 }
 
 onBeforeRouteLeave((to, from, next) => {
-    if ((newNote.text && !$props.justInput) || (newNote.text !== originalText) && $props.justInput)
+    if (
+        (newNote.text && !$props.justInput) ||
+        (newNote.text !== originalText && $props.justInput)
+    )
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
@@ -104,12 +118,11 @@ onBeforeRouteLeave((to, from, next) => {
     else next();
 });
 
-function fetchData([ data ]) {
+function fetchData([data]) {
     newNote.text = data?.notes;
     originalText = data?.notes;
     emit('onFetch', data);
 }
-
 </script>
 <template>
     <FetchData
@@ -126,8 +139,8 @@ function fetchData([ data ]) {
         @on-fetch="fetchData"
         auto-load
     />
-    <QCard 
+    <QCard
-        class="q-pa-xs q-mb-lg full-width" 
+        class="q-pa-xs q-mb-lg full-width"
         :class="{ 'just-input': $props.justInput }"
         v-if="$props.addNote || $props.justInput"
     >
@@ -143,7 +156,7 @@ function fetchData([ data ]) {
                     v-model="newNote.observationTypeFk"
                     option-label="description"
                     style="flex: 0.15"
-                    :required="isRequired"
+                    :required="Object.keys($attrs).includes('required')"
                     @keyup.enter.stop="insert"
                 />
                 <VnInput
@@ -151,10 +164,9 @@ function fetchData([ data ]) {
                     type="textarea"
                     :label="$props.justInput && newNote.text ? '' : t('Add note here...')"
                     filled
-                    size="lg"
                     autogrow
                     @keyup.enter.stop="handleClick"
-                    :required="isRequired"
+                    :required="Object.keys($attrs).includes('required')"
                     clearable
                 >
                     <template #append>
@@ -218,12 +230,27 @@ function fetchData([ data ]) {
                                 >
                                     {{
                                         observationTypes.find(
-                                            (ot) => ot.id === note.observationTypeFk
+                                            (ot) => ot.id === note.observationTypeFk,
                                         )?.description
                                     }}
                                 </QBadge>
                             </div>
                             <span v-text="toDateHourMin(note.created)" />
+                            <div>
+                                <QIcon
+                                    v-if="Object.keys($attrs).includes('deletable')"
+                                    name="delete"
+                                    size="sm"
+                                    class="cursor-pointer"
+                                    color="primary"
+                                    @click="deleteNote(note)"
+                                    data-cy="ticketNotesRemoveNoteBtn"
+                                >
+                                    <QTooltip>
+                                        {{ t('ticketNotes.removeNote') }}
+                                    </QTooltip>
+                                </QIcon>
+                            </div>
                         </div>
                     </QCardSection>
                     <QCardSection class="q-pa-xs q-my-none q-py-none">

src/pages/Route/Vehicle/Card/VehicleNotes.vue

@@ -30,5 +30,6 @@ const body = {
         :body="body"
         style="overflow-y: auto"
         required
+        deletable
     />
-</template>
+</template>