fix(FE): show forms, luxon dates

resources/js/components/content/Dashboard.vue

@@ -61,7 +61,7 @@ const contextMenuDeleteShow = async (showInstanceId: number) => {
 };
 
 const createShow = () => {
-  showSelected.value = 0;
+  showSelected.value = null;
   showCreateEditMode.value = true;
 };
 

resources/js/components/content/Show.vue

@@ -9,11 +9,13 @@ import {baseShow, type Show} from "@models/show/show";
 const {items, listData, headers, selected, loading, search, getItems, editItem, deleteItem} = show_page()
 
 const showCreateEditMode = ref(false);
-let showSelected = ref<Number>(0);
+let showSelected = ref<Number | null>(null);
+
 const bulk = ref({
   state: false,
   items: [] as Show[],
 })
+
 const dialog = reactive({
   open: false,
   type: '',
@@ -31,10 +33,10 @@ const openDialog = (type, title: string = '', text: string = '') => {
 const edit = (showSelectedFromUser) => {
   showSelected.value = showSelectedFromUser.id
   showCreateEditMode.value = true
-};
+}
 
 const create = () => {
-  showSelected.value = 0
+  showSelected.value = null
   showCreateEditMode.value = true
 }
 
@@ -73,7 +75,7 @@ const updateSearch = (text) => {
 }
 
 const resetItemEdited = () => {
-  showSelected.value = baseShow()
+  showSelected.value = null
 }
 
 watch(search, (newValue, oldValue) => {
@@ -83,7 +85,7 @@ watch(search, (newValue, oldValue) => {
 
 const goBack = () => {
   showCreateEditMode.value = false
-  showSelected.value = 0
+  showSelected.value = null
 }
 </script>
 

resources/js/components/content/partials/fields/misc/ColorPickerButton.vue

@@ -3,12 +3,10 @@ import {ref, watch} from 'vue';
 const externalColor = defineModel<string>();
 
 const menu = ref(false)
-const localColor = ref('#000000');
+const localColor = ref(externalColor.value ? `#${externalColor.value}` : '');
 
 watch(localColor, (newValue) => {
-  if (newValue) {
+    externalColor.value = newValue.split('#')[1];
-    externalColor.value = newValue.replace('#', '');
-  }
 });
 </script>
 

resources/js/components/content/partials/fields/show/ShowStartEndTime.vue

@@ -37,7 +37,7 @@ const props = defineProps({
 const startTime = defineModel({default: '08:00'});
 
 // Data
-const duration = ref('0:0');
+const duration = ref(props.preSetDuration);
 const endTime = ref<string>(props.preSetEndTime);
 const startMenu = ref(false);
 const endMenu = ref(false);
@@ -63,14 +63,14 @@ const checkTime = () => {
 
 onMounted(() => {
   endTime.value = props.preSetEndTime == "" ? startTime.value : props.preSetEndTime
-  if(props.preSetDuration != "" && props.preSetEndTime == ""){
+  if(duration.value != "" && props.preSetEndTime == ""){
     setEndTimeFromDuration()
   }
   checkTime()
 });
 
 const setEndTimeFromDuration = ( ) => {
-  const [hours, minutes] = props.preSetDuration.split(':').map(Number);
+  const [hours, minutes] = duration.value.split(':').map(Number);
   const dt = DateTime.fromFormat(startTime.value, 'HH:mm');
   endTime.value = dt.plus({ hours, minutes }).toFormat('HH:mm');
 }

resources/js/components/content/partials/show/ShowForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref, onMounted} from "vue";;
+import {ref, onMounted, type PropType} from "vue";;
 import ShowScheduleForm from "@partials/show/ShowScheduleForm.vue";
 import {useShowStore} from "@/stores/show.store.ts";
 import {getUser} from "@models/User.ts";
@@ -10,7 +10,7 @@ import {useShowDaysStore} from "@/stores/showDays.store.ts";
 // Props and emits
 const props = defineProps({
   showId: {
-    type: Number,
+    type: Number as PropType<number | null>,
     required: true,
   },
 });
@@ -31,7 +31,7 @@ const showDaysStore = useShowDaysStore()
 // Funcs
 onMounted(async () => {
   loading.value = true
-  if (props.showId === 0 ) {
+  if (props.showId === null ) {
     showStore.resetShow()
   } else {
     const selectedShow = await showStore.getShow(props.showId, {withDjs: true})

resources/js/components/content/partials/show/ShowScheduleForm.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import {onMounted, ref, watch} from 'vue';
+import {onMounted, type PropType, ref, watch} from 'vue';
-import {useShowStore} from "@/stores/show.store.ts";
 import {showRepetitionData} from "@models/show/ShowRepetition.ts";
 import DaysCheckbox from "@partials/fields/show/DaysCheckbox.vue";
 import ShowStartEndTime from "@partials/fields/show/ShowStartEndTime.vue";
@@ -10,9 +9,9 @@ import {useShowDaysStore} from "@/stores/showDays.store.ts";
 const emits = defineEmits(['toggle-show-schedule-form', 'trigger-show-creation'])
 const props = defineProps({
   showId: {
-    type: Number,
+    type: Number as PropType<number | null>,
     required: true,
-    default: 0,
+    default: null,
   }
 })
 // Store
@@ -25,9 +24,10 @@ const checkBoxRepetition = ref(false)
 const isFormValid = ref(false)
 const showDuration = ref("")
 const showStartDate = ref()
+
 // Funcs
 onMounted(async () => {
-  if (props.showId == 0) {
+  if (props.showId == null) {
     showStartDate.value = showDaysStore.currentShowDays.firstShow;
     const startDayShow = showDaysStore.currentShowDays.firstShow.getDay();
     let showDays = checkBoxRepetition.value ? showDaysStore.currentShowDays.day : [];
@@ -59,7 +59,7 @@ const goBack = () => {
 };
 
 const saveShowSchedule = async () => {
-  if (props.showId != 0) {
+  if (props.showId != null) {
     return await showDaysStore.updateShowDays(props.showId);
   }
   emits('trigger-show-creation')

resources/js/composables/content/models/show/show.ts

@@ -31,12 +31,12 @@ export interface Show {
 
 export const baseShow = (): Show => {
     return {
-        id: 0,
+        id: null,
         name: 'Esempio',
         url: '',
         genre: '',
         description: '',
-        backgroundColor: '#21C043',
+        backgroundColor: '',
         liveStreamUsingAirtimeAuth: false,
         liveStreamUser: '',
         liveStreamPass: '',
@@ -77,8 +77,12 @@ export const getShows = async (options: {
 }
 
 export const deleteShow = async (showIds: Number[]) => {
-    for (const showId of showIds) {
+    try {
-        await axios.delete(`/show/${showId}`)
+        for (const showId of showIds) {
+            await axios.delete(`/show/${showId}`)
+        }
+    } catch (error) {
+        console.error('Error deleting show:', error);
     }
 }
 

resources/js/composables/content/models/show/showDays.ts

@@ -27,7 +27,7 @@ export const baseShowDays  = ():ShowDays => {
         day: [],
         repeatType: 'noRepeat',
         nextPopDate: '',
-        showId: 0,
+        showId: null,
         record: 0
     };
 }

resources/js/helpers/DateFormatter.ts

@@ -1,5 +1,5 @@
 import {useAuthStore} from "@/stores/auth.store.ts";
-import { DateTime } from "luxon";
+import {DateTime, Settings} from "luxon";
 
 export function dateFormatter(date: Date = new Date()): string {
     return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
@@ -35,15 +35,13 @@ export function getHoursMinutesFromString(timeString: string): Date {
 
 export function convertToUserTimezoneString(dateString: string): string {
     const auth = useAuthStore();
-    const timezone = auth.userData.timezone;
+    const dateTime = DateTime.fromISO(dateString).setZone(Settings.defaultZone);
-    const dateTime = DateTime.fromISO(dateString).setZone(timezone);
     return dateTime.toISO();
 }
 
 export function convertToUserTimezoneDate(dateString: string): Date {
     const auth = useAuthStore();
-    const timezone = auth.userData.timezone;
+    const dateTime = DateTime.fromISO(dateString).setZone(Settings.defaultZone);
-    const dateTime = DateTime.fromISO(dateString).setZone(timezone);
     return dateTime.toJSDate();
 }
 

resources/js/pages/Login.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import {reactive} from 'vue';
 import axios from "axios";
-import {useAuthStore} from "@/stores/auth.store.ts";
 import {useRouter} from "vue-router";
+import { Settings } from "luxon";
+import {useAuthStore} from "@/stores/auth.store.ts";
 
 const data = reactive({
   'username': null,
@@ -32,7 +33,7 @@ const onSubmit = () => {
         timezone: timezone
       }
       auth.setUserData(userStore);
-
+      Settings.defaultZone = timezone;
       router.push('/');
     } else {
       console.log(response)

resources/js/stores/showDays.store.ts

@@ -3,7 +3,7 @@ import type {ShowDays} from "@models/show/showDays";
 import axios, {type AxiosResponse} from "axios";
 import {camelToSnake, cleanOptions, snakeToCamel} from "@/helpers/AxiosHelper.ts";
 import {extractTime, extractTimeUTC} from "@/helpers/DateFormatter.ts";
-import {DateTime} from "luxon";
+import {DateTime, Settings} from "luxon";
 import {baseShowDays} from "@models/show/showDays.ts";
 
 export const useShowDaysStore = defineStore('showDays', {
@@ -32,7 +32,7 @@ export const useShowDaysStore = defineStore('showDays', {
                     console.error("Error: " + error);
                 })
             showDaysRules.firstShow = new Date(showDaysRules.firstShow);
-            showDaysRules.startTime = extractTime(showDaysRules.startTime, true);
+            showDaysRules.startTime = DateTime.fromISO(showDaysRules.startTime).setZone(Settings.defaultZone).toFormat('HH:mm');
             this.currentShowDays = showDaysRules;
         },
         async updateShowDays(showId: number) {