feat(FE): webstreams and menu

resources/js/components/content/Webstream.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import {onBeforeMount, reactive, ref, watch} from "vue";
+import Table from "@partials/Table.vue";
+import ConfirmDelete from "@partials/dialogs/ConfirmDelete.vue";
+import {webstream_page} from "@/composables/content/webstream_page.ts";
+import {baseWebstream, type Webstream} from "@models/webstream.ts";
+import WebstreamForm from "@partials/WebstreamForm.vue";
+
+const {items, listData, headers, selected, loading, search, getItems, editItem, deleteItem} = webstream_page()
+
+const props = defineProps({
+  hideColumns: {
+    type: Array,
+    required: false
+  },
+  isDraggable: {
+    type: Boolean,
+    required: false
+  }
+});
+
+const webstreamCreateEditMode = ref(false);
+let webstreamSelected = ref<Number | null>(null);
+
+const visibleHeaders = ref(headers)
+
+const bulk = ref({
+  state: false,
+  items: [] as Webstream[],
+})
+
+const dialog = reactive({
+  open: false,
+  type: '',
+  title: '',
+  text: ''
+})
+
+const openDialog = (type, title: string = '', text: string = '') => {
+  dialog.open = true
+  dialog.type = type
+  dialog.title = title
+  dialog.text = text
+}
+
+const edit = (webstreamSelectedFromUser) => {
+  webstreamSelected.value = webstreamSelectedFromUser.id
+  webstreamCreateEditMode.value = true
+}
+
+const create = () => {
+  webstreamSelected.value = null
+  webstreamCreateEditMode.value = true
+}
+
+const saveItem = (item) => {
+  const saved = editItem(item)
+  closeDialog()
+}
+
+const cancel = (item) => {
+  let deleteMessage = 'Vuoi cancellare il webstream  selezionato?'
+  if(bulk.value.state)  deleteMessage = 'Vuoi cancellare i webstream selezionati?'
+  bulk.value.items = item
+  webstreamSelected.value = item?.id
+  openDialog(
+      'delete',
+      'Cancella',
+      deleteMessage
+  )
+}
+
+const confirmDelete = (confirm) => {
+  if (confirm) {
+    const webstreamId = webstreamSelected.value == 0 ? null : webstreamSelected.value ;
+    deleteItem(webstreamId)
+  }
+  closeDialog()
+}
+
+const closeDialog = () => {
+  dialog.open = false
+  resetItemEdited()
+}
+
+const updateSearch = (text) => {
+  search.value = text
+}
+
+onBeforeMount(() => {
+  if(props.hideColumns != undefined) {
+    visibleHeaders.value = headers.filter(el => {
+      return !props.hideColumns.includes(el.value)
+    });
+  }
+})
+
+const resetItemEdited = () => {
+  webstreamSelected.value = null
+}
+
+watch(search, (newValue, oldValue) => {
+  const options = {...listData};
+  getItems(options)
+})
+
+const goBack = () => {
+  webstreamCreateEditMode.value = false
+  webstreamSelected.value = null
+}
+</script>
+
+<template>
+  <WebstreamForm v-if="webstreamCreateEditMode" :webstreamId="webstreamSelected" @go-back="goBack"/>
+  <Table
+      v-else
+      :headers="visibleHeaders"
+      v-model:selected="selected"
+      v-model:search="search"
+      :list-data="listData"
+      :items="items"
+      :loading="loading"
+      :get-items="getItems"
+      :actions="true"
+      :show-select="true"
+      :is-draggable="isDraggable"
+      @update-table="getItems"
+      @update-search="updateSearch"
+      @delete-item="cancel"
+      @edit-item="edit"
+  >
+    <template v-slot:header-buttons>
+      <v-btn color="primary" @click="create">
+        Crea un nuovo webstream
+      </v-btn>
+    </template>
+    <template v-slot:dialog>
+      <v-dialog v-model="dialog.open">
+        <ConfirmDelete
+            v-if="dialog.type === 'delete'"
+            :title="dialog.title"
+            :text="dialog.text"
+            :bulk="bulk.state"
+            @confirm="confirmDelete"
+            @after-leave="closeDialog"
+        />
+      </v-dialog>
+    </template>
+  </Table>
+</template>