[events] Structural and minor optical cleanup

src/plugins/schedule/components/management/Job.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card-section class="fit row justify-start content-center items-center">
+  <q-card class="fit row justify-start content-center items-center">
     <q-card-section class="fit row justify-start content-center items-center">
       <IsoDateInput
         v-model="job.start"
@@ -45,8 +45,10 @@
         filled
       />
     </q-card-section>
-    <q-btn label="Schicht löschen" color="negative" :disabled="jobCanDelete" @click="removeJob" />
-  </q-card-section>
+    <q-card-actions>
+      <q-btn label="Schicht löschen" color="negative" :disabled="canDelete" @click="removeJob" />
+    </q-card-actions>
+  </q-card>
 </template>
 
 <script lang="ts">
@@ -63,7 +65,7 @@ export default defineComponent({
       required: true,
       type: Object as PropType<FG.Job>,
     },
-    jobCanDelete: Boolean,
+    canDelete: Boolean,
   },
   emits: {
     'remove-job': () => true,

src/plugins/schedule/pages/Management.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
     <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
       <q-tab
         v-for="(tabindex, index) in tabs"
@@ -24,25 +24,23 @@
         </q-item>
       </q-list>
     </q-drawer>
-    <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
-      <q-tab-panels
-        v-model="tab"
-        style="background-color: transparent"
-        class="q-ma-none q-pa-none fit row justify-center content-start items-start"
-        animated
-      >
-        <q-tab-panel name="create">
-          <EditEvent />
-        </q-tab-panel>
-        <q-tab-panel name="eventtypes">
-          <EventTypes />
-        </q-tab-panel>
-        <q-tab-panel name="jobtypes">
-          <JobTypes v-if="canEditJobTypes" />
-        </q-tab-panel>
-      </q-tab-panels>
-    </q-page>
-  </div>
+    <q-tab-panels
+      v-model="tab"
+      style="background-color: transparent"
+      class="q-ma-none q-pa-none fit row justify-center content-start items-start"
+      animated
+    >
+      <q-tab-panel name="create">
+        <EditEvent />
+      </q-tab-panel>
+      <q-tab-panel name="eventtypes">
+        <EventTypes />
+      </q-tab-panel>
+      <q-tab-panel name="jobtypes">
+        <JobTypes v-if="canEditJobTypes" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page>
 </template>
 
 <script lang="ts">

src/plugins/schedule/store/models.ts

@@ -0,0 +1,27 @@
+import { date } from 'quasar';
+
+/** An new event does not contain an id and the type might be unset */
+export type EditableEvent = Omit<Omit<Omit<FG.Event, 'jobs'>, 'type'>, 'id'> & {
+  type?: FG.EventType | number;
+  id?: number;
+  jobs: EditableJob[];
+};
+
+/** A new job does not have an id or type assigned */
+export type EditableJob = Omit<Omit<FG.Job, 'type'>, 'id'> & {
+  type?: FG.EventType | number;
+  id?: number;
+};
+
+export const emptyJob: EditableJob = {
+  start: new Date(),
+  end: date.addToDate(new Date(), { hours: 1 }),
+  services: [],
+  required_services: 2,
+};
+
+export const emptyEvent: EditableEvent = {
+  start: new Date(),
+  jobs: [Object.assign({}, emptyJob)],
+  is_template: false,
+};