1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <template>
- <div v-if="permission">
- <div class="med-container">
- <label class="med-item">Assigned</label>
- <span class="med-item">
- <span class="med-state">{{ assignTo }}</span>
- <button class="btn btn-primary btn-xs" @click="toggleForm()">
- Reassign ✔
- </button>
- </span>
- </div>
- <div v-if="show" class="med-container">
- <form class="med-row">
- <select class="form-control" required>
- <option value="">---Choose---</option>
- <option value="1">(None)</option>
- </select>
- <button class="btn btn-lg btn-primary btn-block">
- Click to confirm
- </button>
- </form>
- </div>
- </div>
- <div v-else>
- <p>Assigned: {{ assignTo }}</p>
- </div>
- </template>
- <script>
- export default {
- name: "Reassign",
- props: ["assignTo", "permission"],
- data() {
- return {
- show: false
- };
- },
- methods: {
- toggleForm: function() {
- if (this.show) {
- this.show = false;
- } else {
- this.show = true;
- }
- }
- }
- };
- </script>
- <style scoped>
- .med-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- background-color: #eeeeee;
- }
- .med-item {
- width: 40%;
- margin-bottom: 2%;
- }
- .med-item + .med-item,
- .med-state + button {
- margin-left: 2%;
- }
- select {
- margin-bottom: 2%;
- }
- .med-row {
- width: 100%;
- margin-bottom: 2%;
- }
- </style>
|