Add button to edit tools in course home

assets/css/scss/atoms/_buttons.scss

@@ -567,3 +567,15 @@ $border-color_12: #9333EA;
     }
   }
 }
+
+// toggle button
+.p-togglebutton{
+  &.p-button {
+    &.p-highlight {
+
+      &.p-button-plain {
+        @apply bg-support-1 text-primary;
+      }
+    }
+  }
+}

assets/vue/components/course/CourseToolList.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="course-tool">
     <a
+      :aria-labelledby="`course-tool-${tool.ctool.iid}`"
       :href="goToCourseTool(course, tool)"
       class="course-tool__link"
-      :aria-labelledby="`course-tool-${tool.ctool.iid}`"
     >
       <span
         :class="tool.tool.icon"
-        class="course-tool__icon mdi"
         aria-hidden="true"
+        class="course-tool__icon mdi"
       />
     </a>
 
@@ -21,7 +21,7 @@
 
     <div class="course-tool__options">
       <button
-        v-if="isCurrentTeacher && changeVisibility"
+        v-if="isCurrentTeacher && !isSorting && !isCustomizing"
         @click="changeVisibility(course, tool)"
       >
         <v-icon
@@ -37,6 +37,16 @@
       </button>
 
       <a
+        v-if="isCurrentTeacher && isCustomizing"
+        href="#"
+      >
+        <v-icon
+          icon="mdi-pencil"
+          size="lg"
+        />
+      </a>
+
+      <!-- a
         v-if="isCurrentTeacher"
         :href="goToSettingCourseTool(course, tool)"
       >
@@ -44,39 +54,42 @@
           icon="mdi-cog"
           size="lg"
         />
-      </a>
+      </a -->
     </div>
   </div>
 </template>
 
 <script setup>
-import { useStore } from 'vuex'
-import { computed } from 'vue'
+import { useStore } from 'vuex';
+import { computed, inject } from 'vue';
 
 const store = useStore();
 
+const isSorting = inject('isSorting');
+const isCustomizing = inject('isCustomizing');
+
 // eslint-disable-next-line no-undef
 defineProps({
-    course: {
-        type: Object,
-        required: true,
-    },
-    tool: {
-        type: Object,
-        required: true,
-    },
-    goToCourseTool: {
-        type: Function,
-        required: true,
-    },
-    changeVisibility: {
-        type: Function,
-        required: true,
-    },
-    goToSettingCourseTool: {
-        type: Function,
-        required: true,
-    },
+  course: {
+    type: Object,
+    required: true,
+  },
+  tool: {
+    type: Object,
+    required: true,
+  },
+  goToCourseTool: {
+    type: Function,
+    required: true,
+  },
+  changeVisibility: {
+    type: Function,
+    required: true,
+  },
+  goToSettingCourseTool: {
+    type: Function,
+    required: true,
+  },
 });
 
 const isCurrentTeacher = computed(() => store.getters['security/isCurrentTeacher']);

assets/vue/components/course/Layout.vue

@@ -1,9 +1,6 @@
 <template>
-  <router-view></router-view>
+  <router-view />
 </template>
 
-<script>
-  export default {
-      name: 'CourseLayout'
-  }
+<script setup>
 </script>

assets/vue/components/course/ShortCutList.vue

@@ -1,22 +1,20 @@
 <template>
   <div
-      class="bg-gray-100 rounded-xl p-2 shadow-md"
+    class="bg-gray-100 rounded-xl p-2 shadow-md"
   >
     <div class="flex flex-col flex-center">
       <div class="mx-auto">
         <a :href="goToShortCut(shortcut)">
           <img
-              :alt="shortcut.name"
-              :src="'/img/tools/' + shortcut.type + '.png'"
-              class="w-32 h-32 object-contain"
-          />
+            :alt="shortcut.name"
+            :src="'/img/tools/' + shortcut.type + '.png'"
+            class="w-32 h-32 object-contain"
+          >
         </a>
       </div>
 
       <div class="flex flex-row gap-2 text-gray-500 pt-3">
-        <a
-
-        >
+        <a>
           {{ shortcut.name }}
         </a>
       </div>
@@ -24,27 +22,17 @@
   </div>
 </template>
 
-<script>
-
-import {mapGetters} from "vuex";
+<script setup>
 
-export default {
-  name: 'ShortCutList',
-  props: {
-    shortcut: Object,
-    goToShortCut: {
-      type: Function,
-      required: true
-    },
-    changeVisibility: {
-      type: Function,
-      required: false
-    },
+// eslint-disable-next-line no-undef
+defineProps({
+  shortcut: {
+    type: Object,
+    required: true,
   },
-  computed: {
-    ...mapGetters({
-      'isCurrentTeacher': 'security/isCurrentTeacher',
-    }),
+  goToShortCut: {
+    type: Function,
+    required: true
   },
-};
+});
 </script>

assets/vue/views/course/Home.vue

@@ -94,7 +94,69 @@
       v-html="intro.introText"
     />
 
-    <h6 v-t="'Tools'" />
+    <div class="flex items-center gap-6">
+      <h6 v-t="'Tools'" />
+
+      <Skeleton
+        v-if="!course"
+        height="2rem"
+        width="6rem"
+        class="ml-auto aspect-square"
+      />
+      <Skeleton
+        v-if="!course"
+        height="2rem"
+        width="6rem"
+        class="aspect-square"
+      />
+      <Skeleton
+        v-if="!course"
+        height="2rem"
+        width="6rem"
+        class="aspect-square"
+      />
+      <Skeleton
+        v-if="!course"
+        height="2rem"
+        width="6rem"
+        class="aspect-square"
+      />
+
+      <Button
+        v-if="course && isCurrentTeacher"
+        icon="mdi mdi-eye"
+        :label="t('Show all')"
+        class="p-button-text p-button-plain p-button-sm ml-auto"
+        :disabled="isSorting || isCustomizing"
+      />
+      <Button
+        v-if="course && isCurrentTeacher"
+        icon="mdi mdi-eye-off"
+        :label="t('Hide all')"
+        class="p-button-text p-button-plain p-button-sm"
+        :disabled="isSorting || isCustomizing"
+      />
+      <ToggleButton
+        v-if="course && isCurrentTeacher"
+        v-model="isSorting"
+        on-icon="mdi mdi-swap-vertical"
+        off-icon="mdi mdi-swap-vertical"
+        :on-label="t('Sort')"
+        :off-label="t('Sort')"
+        class="p-button-text p-button-plain p-button-sm"
+        :disabled="isCustomizing"
+      />
+      <ToggleButton
+        v-if="course && isCurrentTeacher"
+        v-model="isCustomizing"
+        on-icon="mdi mdi-format-paint"
+        off-icon="mdi mdi-format-paint"
+        :on-label="t('Customize')"
+        :off-label="t('Customize')"
+        class="p-button-text p-button-plain p-button-sm"
+        :disabled="isSorting"
+      />
+    </div>
     <hr class="mt-0 mb-4">
 
     <div
@@ -155,13 +217,14 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, provide, ref } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { ENTRYPOINT } from '../../config/entrypoint';
 import Button from 'primevue/button';
+import ToggleButton from 'primevue/togglebutton';
 import TieredMenu from 'primevue/tieredmenu';
 import CourseToolList from '../../components/course/CourseToolList.vue';
 import ShortCutList from '../../components/course/ShortCutList.vue';
@@ -187,6 +250,12 @@ let sessionId = route.query.sid ?? 0;
 
 const isCurrentTeacher = computed(() => store.getters['security/isCurrentTeacher']);
 
+const isSorting = ref(false);
+const isCustomizing = ref(false);
+
+provide('isSorting', isSorting);
+provide('isCustomizing', isCustomizing);
+
 // Remove the course session state.
 store.dispatch('session/cleanSession');