Поддержка тегов для форм и обработка close события

resources/js/Pages/Index.vue

@@ -8,7 +8,7 @@ import PageBody from "../Components/Page/PageBody.vue";
 import Badge from "../Components/Badge/Badge.vue";
 import {Link, router} from "@inertiajs/vue3"
 import AnimateSearch from "../Components/Input/Search/AnimateSearch.vue";
-import {ref, watch} from "vue";
+import {nextTick, ref, watch} from "vue";
 import Button from "../Components/Button/Button.vue";
 import ImportDocumentModal from "./Parts/ImportDocumentModal.vue";
 import EditDocumentModal from "./Parts/EditDocumentModal.vue";
@@ -27,12 +27,16 @@ const showModalEdit = ref(false)
 const editTemplateId = ref(null)
 const vertical = ref(true)
 
-watch(() => searchValue.value, (search) => {
-    axios.post('/api/templates/search', {
+const getTemplates = async (search) => {
+    await axios.post('/api/templates/search', {
         search
     }).then(res => {
         workTemplates.value = res.data.templates
     })
+}
+
+watch(() => searchValue.value, async (search) => {
+    await getTemplates()
 })
 
 const onChangeLayoutList = () => {
@@ -42,10 +46,27 @@ const onShowModalEdit = (template) => {
     showModalEdit.value = true
     editTemplateId.value = template.id
 }
-const onCloseModalEdit = () => {
+const onCloseModalEdit = async () => {
+    router.reload({
+        only: ['templates'],
+        onSuccess: () => {
+            console.log(props)
+            workTemplates.value = [...props.templates]
+        }
+    })
     showModalEdit.value = false
     editTemplateId.value = null
 }
+const onCloseModalImport = async () => {
+    showModalImport.value = false
+    router.reload({
+        only: ['templates'],
+        onSuccess: () => {
+            console.log(props)
+            workTemplates.value = [...props.templates]
+        }
+    })
+}
 </script>
 
 <template>
@@ -137,11 +158,14 @@ const onCloseModalEdit = () => {
                                     <!--                                    </Button>-->
                                     <!--                                </template>-->
                                     <template v-slot:footer>
-                                        <div class="flex gap-x-1.5">
+                                        <div v-if="template.tags.length > 0" v-for="tag in template.tags" class="flex gap-x-1.5">
                                             <Badge variant="primary">
-                                                Экономический отдел
+                                                {{ tag }}
                                             </Badge>
                                         </div>
+                                        <div v-else class="h-[24px]">
+
+                                        </div>
                                     </template>
                                 </ListItem>
                             </Link>
@@ -159,7 +183,7 @@ const onCloseModalEdit = () => {
                 </div>
             </PageBody>
         </Page>
-        <ImportDocumentModal v-model:open="showModalImport" @close="showModalImport = false" />
+        <ImportDocumentModal v-model:open="showModalImport" @close="onCloseModalImport" />
         <EditDocumentModal v-model:open="showModalEdit" :templateId="editTemplateId" @close="onCloseModalEdit" />
     </Workspace>
 </template>