Resolve "Frontend for Models"

Closes #1 (closed)

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

@@ -17,6 +17,7 @@ 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) }}
@@ -65,6 +66,52 @@ import ValidityRangeField from "./ValidityRangeField.vue";</script>
         :rules="required"
       />
     </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('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 +139,7 @@ export default {
         {
           text: this.$t("lesrooster.validity_range.title"),
           value: "validityRange",
+          orderKey: "validity_range__date_start"
         },
         {
           text: this.$t("lesrooster.slot.weekday"),