Resolve "Frontend for Models"

Closes #1 (closed)

aleksis/apps/lesrooster/frontend/components/LesroosterSlot.vue

@@ -17,30 +17,40 @@ import ValidityRangeField from "./ValidityRangeField.vue";</script>
       :default-item="defaultItem"
       :get-create-data="getCreateData"
       :get-patch-data="getPatchData"
+      filter
   >
     <template #weekday="{ item }">
       {{ $t("weekdays." + item.weekday) }}
     </template>
     <template #weekday.field="{ attrs, on }">
-      <week-day-field v-bind="attrs" v-on="on"/>
+      <div aria-required="true">
+        <week-day-field
+          v-bind="attrs"
+          v-on="on"
+          :rules="required"
+          required
+        />
+      </div>
     </template>
 
     <template #validityRange="{ item }">
       {{ item.validityRange?.name }}
     </template>
     <template #validityRange.field="{ attrs, on }">
-      <validity-range-field
+      <div aria-required="true">
+        <validity-range-field
           v-bind="attrs"
           v-on="on"
           :rules="required"
-      />
+          required
+        />
+      </div>
     </template>
 
     <template #period.field="{ attrs, on }">
       <positive-small-integer-field
           v-bind="attrs"
           v-on="on"
-          :rules="required"
       />
     </template>
 
@@ -48,22 +58,74 @@ import ValidityRangeField from "./ValidityRangeField.vue";</script>
       {{ $d(new Date("1970-01-01T" + item.timeStart), "shortTime") }}
     </template>
     <template #timeStart.field="{ attrs, on }">
-      <time-field
-        v-bind="attrs"
-        v-on="on"
-        :rules="required"
-      />
+      <div aria-required="true">
+        <time-field
+          v-bind="attrs"
+          v-on="on"
+          :rules="required"
+          required
+        />
+      </div>
     </template>
 
     <template #timeEnd="{ item }">
       {{ $d(new Date("1970-01-01T" + item.timeEnd), "shortTime") }}
     </template>
     <template #timeEnd.field="{ attrs, on }">
+      <div aria-required="true">
+        <time-field
+          v-bind="attrs"
+          v-on="on"
+          :rules="required"
+          required
+        />
+      </div>
+    </template>
+
+    <template #filters="{ attrs, on }">
+      <week-day-field
+          v-bind="attrs('weekday')"
+          v-on="on('weekday')"
+          return-int
+          clearable
+          :label="$t('lesrooster.slot.weekday')"
+      />
+
+      <v-row>
+        <v-col>
+          <positive-small-integer-field
+            v-bind="attrs('period__gte')"
+            v-on="on('period__gte')"
+            :label="$t('lesrooster.slot.period_gte')"
+        />
+        </v-col>
+
+        <v-col>
+          <positive-small-integer-field
+            v-bind="attrs('period__lte')"
+            v-on="on('period__lte')"
+            :label="$t('lesrooster.slot.period_lte')"
+        />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <time-field
+        v-bind="attrs('time_end__gte')"
+        v-on="on('time_end__gte')"
+        :label="$t('school_term.after')"
+      />
+        </v-col>
+        <v-col>
+
       <time-field
-        v-bind="attrs"
-        v-on="on"
-        :rules="required"
+        v-bind="attrs('time_start__lte')"
+        v-on="on('time_start__lte')"
+        :label="$t('school_term.before')"
       />
+        </v-col>
+      </v-row>
     </template>
   </inline-c-r-u-d-list>
 </template>
@@ -92,6 +154,7 @@ export default {
         {
           text: this.$t("lesrooster.validity_range.title"),
           value: "validityRange",
+          orderKey: "validity_range__date_start"
         },
         {
           text: this.$t("lesrooster.slot.weekday"),