Add generic edit modal

client/cypress/integration/frontend/school-class.spec.js

@@ -230,7 +230,7 @@ describe('Teacher Class Management', () => {
     cy.visit('/me/my-class');
 
     cy.get('[data-cy=edit-group-name-link]').click();
-    cy.get('[data-cy=edit-class-name-input] input').type('{selectall}{backspace}').type(className);
+    cy.get('[data-cy=edit-name-input] input').type('{selectall}{backspace}').type(className);
     cy.get('[data-cy=modal-save-button]').click();
     cy.get('[data-cy=school-class-name]').should('contain', className);
   });

client/src/components/profile/EditNameWizard.vue

@@ -0,0 +1,46 @@
+<template>
+  <modal
+    :hide-header="false"
+    :small="true">
+    <h4 slot="header">{{ type }} bearbeiten</h4>
+    <modal-input
+      :value="name"
+      placeholder="Klassenname"
+      data-cy="edit-name-input"
+      @input="$emit('input', $event)"
+    />
+    <div slot="footer">
+      <a
+        class="button button--primary"
+        data-cy="modal-save-button"
+        @click="$emit('save')">Speichern</a>
+      <a
+        class="button"
+        @click="$emit('hide')">Abbrechen</a>
+    </div>
+
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+  import ModalInput from '@/components/ModalInput';
+
+  export default {
+    props: {
+      name: {
+        type: String,
+        default: ''
+      },
+      type: {
+        type: String,
+        default: ''
+      }
+    },
+    components: {
+      Modal,
+      ModalInput
+    },
+
+  };
+</script>

client/src/components/school-class/EditClassNameWizard.vue

@@ -1,39 +1,20 @@
 <template>
-  <modal
+  <edit-name-wizard
-    :hide-header="false"
+    :name="name"
-    :small="true"
+    type="Klasse"
-    title="Hello">
+    @input="name = $event"
-    <h4 slot="header">Klasse bearbeiten</h4>
+    @hide="hide"
-    <modal-input
+    @save="save" />
-      :value="name"
-      placeholder="Klassenname"
-      data-cy="edit-class-name-input"
-      @input="name = $event"
-    />
-    <div slot="footer">
-      <a
-        class="button button--primary"
-        data-cy="modal-save-button"
-        @click="save">Speichern</a>
-      <a
-        class="button"
-        @click="hide">Abbrechen</a>
-    </div>
-
-  </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
-  import ModalInput from '@/components/ModalInput';
-
   import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass.gql';
   import UPDATE_SCHOOL_CLASS_MUTATION from '@/graphql/gql/mutations/updateSchoolClass.gql';
+  import EditNameWizard from '@/components/profile/EditNameWizard';
 
   export default {
     components: {
-      Modal,
+      EditNameWizard,
-      ModalInput
     },
 
     data() {

client/src/pages/myClass.vue

@@ -87,7 +87,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
 
   .my-class {
     display: grid;