Rework CopyFromTimeGridMenu

aleksis/apps/lesrooster/frontend/components/validity_range/CopyFromRangeMenu.vue → aleksis/apps/lesrooster/frontend/components/validity_range/CopyFromTimeGridMenu.vue

 <script>
 import { defineComponent } from "vue";
+import { timeGrids } from "./validityRange.graphql";
 import ConfirmDialog from "aleksis.core/components/generic/dialogs/ConfirmDialog.vue";
 import PrimaryActionButton from "aleksis.core/components/generic/buttons/PrimaryActionButton.vue";
 
 export default defineComponent({
-  name: "CopyFromRangeMenu",
+  name: "CopyFromTimeGridMenu",
   components: { ConfirmDialog, PrimaryActionButton },
+  apollo: {
+    timeGrids: {
+      query: timeGrids,
+      variables() {
+        return {
+          filters: JSON.stringify({
+            group: this.groupMatch,
+          }),
+          orderBy: ["validity_range__date_start", "validity_range__date_end"],
+        }
+      },
+      update: data => data.items,
+    }
+  },
   computed: {
-    ranges() {
-      return []; // FIXME: Get ranges from backend
+    grids() {
+      return this.timeGrids.filter(grid => !this.denyIds.includes(grid.id));
+    }
+  },
+  props: {
+    groupMatch: {
+      required: false,
+      default: undefined,
     },
+    denyIds: {
+      required: false,
+      default: () => [],
+      type: Array,
+    }
   },
   data() {
     return {
       dialog: false,
-      rangeToCopyFrom: null,
+      gridToCopyFrom: null,
+      timeGrids: [],
     };
   },
   methods: {
-    openConfirmationDialog(range) {
-      this.rangeToCopyFrom = range;
+    openConfirmationDialog(grid) {
+      this.gridToCopyFrom = grid;
       this.dialog = true;
-      console.log("Opening dialog");
-      console.log(!!this.dialog);
     },
     confirm() {
       console.log("Confirmed");
-      this.$emit("confirm", this.rangeToCopyFrom);
+      this.$emit("confirm", this.gridToCopyFrom);
       this.dialog = false;
     },
     cancel() {
       console.log("Cancelled");
       this.dialog = false;
-      this.rangeToCopyFrom = null;
+      this.gridToCopyFrom = null;
+    },
+    formatTimeGrid(item) {
+      if (item.group === null) {
+        return this.$t(
+          "lesrooster.validity_range.time_grid.repr.generic",
+          item.validityRange
+        );
+      }
+      return this.$t("lesrooster.validity_range.time_grid.repr.default", [
+        item.validityRange.name,
+        item.group.name,
+      ]);
     },
   },
 });
@@ -51,10 +88,10 @@ export default defineComponent({
       </template>
       <v-list dense>
         <v-list-item
-          v-for="range in ranges"
-          @click="openConfirmationDialog(range)"
+          v-for="grid in grids"
+          @click="openConfirmationDialog(grid)"
         >
-          <v-list-item-title>{{ range }}</v-list-item-title>
+          <v-list-item-title>{{ formatTimeGrid(grid) }}</v-list-item-title>
         </v-list-item>
       </v-list>
     </v-menu>