refactor: replace custom CRM with Monica fork
Some checks failed
Build & Push Monica Image to Gitea Registry / build-and-push (push) Failing after 9s
Some checks failed
Build & Push Monica Image to Gitea Registry / build-and-push (push) Failing after 9s
This commit is contained in:
Kroonk
294
resources/js/components/people/lifeevent/CreateLifeEvent.vue
Normal file
294
resources/js/components/people/lifeevent/CreateLifeEvent.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<section class="ph3 ph0-ns life-event">
|
||||
<notifications group="main" position="top middle" width="400" />
|
||||
|
||||
<div class="mt4 mw7 center mb3">
|
||||
<!-- Breadcrumb -->
|
||||
<ul v-if="view === 'types' || view === 'add'" class="ba b--gray-monica pa2 mb2">
|
||||
<li class="di">
|
||||
<a class="pointer" href="" @click.prevent="view = 'categories'">
|
||||
{{ $t('people.life_event_create_category') }}
|
||||
</a>
|
||||
</li>
|
||||
<li v-if="view === 'types'" class="di">
|
||||
> {{ $t('people.life_event_category_' + activeCategory.default_life_event_category_key) }}
|
||||
</li>
|
||||
<template v-else-if="view === 'add'">
|
||||
<li class="di">
|
||||
> <a class="pointer" href="" @click.prevent="view = 'types'">
|
||||
{{ $t('people.life_event_category_' + activeCategory.default_life_event_category_key) }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="di">
|
||||
> {{ $t('people.life_event_create_life_event') }}
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
||||
<!-- List of events -->
|
||||
<ul v-if="view !== 'add'" class="ba b--gray-monica br2">
|
||||
<template v-if="view === 'categories'">
|
||||
<!-- CATEGORIES -->
|
||||
<li v-for="category in categories" :key="category.id" class="relative pointer bb b--gray-monica b--gray-monica pa2 life-event-add-row" @click="getType(category)">
|
||||
<div class="dib mr2">
|
||||
<img :src="'img/people/life-events/categories/' + category.default_life_event_category_key + '.svg'" :alt="category.default_life_event_category_key" style="min-width: 12px;" />
|
||||
</div>
|
||||
{{ $t('people.life_event_category_' + category.default_life_event_category_key) }}
|
||||
|
||||
<svg class="absolute life-event-add-arrow" width="10" height="13" viewBox="0 0 10 13" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M8.75071 5.66783C9.34483 6.06361 9.34483 6.93653 8.75072 7.33231L1.80442 11.9598C1.13984 12.4025 0.25 11.9261 0.25 11.1275L0.25 1.87263C0.25 1.07409 1.13984 0.59767 1.80442 1.04039L8.75071 5.66783Z" fill="#C4C4C4" />
|
||||
</svg>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<template v-else-if="view === 'types'">
|
||||
<!-- TYPES -->
|
||||
<li v-for="type in types" :key="type.id" class="relative pointer bb b--gray-monica b--gray-monica pa2 life-event-add-row" @click="displayAddScreen(type)">
|
||||
<div class="dib mr2">
|
||||
<img :src="'img/people/life-events/types/' + type.default_life_event_type_key + '.svg'" :alt="type.default_life_event_type_key" style="min-width: 12px;" />
|
||||
</div>
|
||||
<template v-if="type.name">
|
||||
{{ type.name }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('people.life_event_sentence_' + type.default_life_event_type_key) }}
|
||||
</template>
|
||||
|
||||
<svg class="absolute life-event-add-arrow" width="10" height="13" viewBox="0 0 10 13" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M8.75071 5.66783C9.34483 6.06361 9.34483 6.93653 8.75072 7.33231L1.80442 11.9598C1.13984 12.4025 0.25 11.9261 0.25 11.1275L0.25 1.87263C0.25 1.07409 1.13984 0.59767 1.80442 1.04039L8.75071 5.66783Z" fill="#C4C4C4" />
|
||||
</svg>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
||||
<!-- ADD SCREEN -->
|
||||
<div v-else class="ba b--gray-monica br2 pt4">
|
||||
<div class="life-event-add-icon tc center">
|
||||
<img :src="'img/people/life-events/types/' + activeType.default_life_event_type_key + '.svg'" :alt="activeType.default_life_event_type_key" style="min-width: 17px;" />
|
||||
</div>
|
||||
|
||||
<h3 class="pt3 ph4 f3 fw5 tc">
|
||||
<template v-if="activeType.name">
|
||||
{{ activeType.name }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('people.life_event_sentence_' + activeType.default_life_event_type_key) }}
|
||||
</template>
|
||||
</h3>
|
||||
|
||||
<!-- This field will be the same for every life event type no matter what, as the date is the only required field -->
|
||||
<div class="ph4 pv3 mb3 mb0-ns bb b--gray-monica">
|
||||
<label for="year" class="mr2">
|
||||
{{ $t('people.life_event_date_it_happened') }}
|
||||
</label>
|
||||
<div class="flex mb3">
|
||||
<div class="mr2">
|
||||
<form-select
|
||||
:id="'year'"
|
||||
v-model="selectedYear"
|
||||
:options="years"
|
||||
:title="''"
|
||||
:class="[ dirltr ? 'mr2' : '' ]" @input="updateDate"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr2">
|
||||
<form-select
|
||||
:id="'month'"
|
||||
v-model="selectedMonth"
|
||||
:options="months"
|
||||
:title="''"
|
||||
:class="[ dirltr ? 'mr2' : '' ]" @input="updateDate"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<form-select
|
||||
:id="'day'"
|
||||
v-model="selectedDay"
|
||||
:options="days"
|
||||
:title="''"
|
||||
:class="[ dirltr ? '' : 'mr2' ]" @input="updateDate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="f6">
|
||||
{{ $t('people.life_event_create_date') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<create-default-life-event @contentChange="updateLifeEventContent($event)" />
|
||||
|
||||
<!-- YEARLY REMINDER -->
|
||||
<div class="ph4 pv3 mb3 mb0-ns bb b--gray-monica">
|
||||
<form-checkbox
|
||||
v-model.lazy="newLifeEvent.has_reminder"
|
||||
:name="'addReminder'"
|
||||
:dclass="[ dirltr ? 'mr3' : 'ml3' ]"
|
||||
>
|
||||
{{ $t('people.life_event_create_add_yearly_reminder') }}
|
||||
</form-checkbox>
|
||||
</div>
|
||||
|
||||
<!-- FORM ACTIONS -->
|
||||
<div class="ph4-ns ph3 pv3 bb b--gray-monica">
|
||||
<div class="flex-ns justify-between">
|
||||
<div>
|
||||
<a class="btn btn-secondary tc w-auto-ns w-100 mb2 pb0-ns" href="" @click.prevent="$emit('dismissModal')">
|
||||
{{ $t('app.cancel') }}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary w-auto-ns w-100 mb2 pb0-ns" @click="store()">
|
||||
{{ $t('app.add') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
|
||||
props: {
|
||||
hash: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
years: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
months: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
days: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
selectedDay: 0,
|
||||
selectedMonth: 0,
|
||||
selectedYear: 0,
|
||||
newLifeEvent: {
|
||||
name: '',
|
||||
note: '',
|
||||
happened_at: '',
|
||||
life_event_type_id: 0,
|
||||
happened_at_month_unknown: false,
|
||||
happened_at_day_unknown: false,
|
||||
specific_information: '',
|
||||
has_reminder: false,
|
||||
},
|
||||
categories: [],
|
||||
activeCategory: '',
|
||||
activeType: '',
|
||||
types: [],
|
||||
view: 'categories',
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
dirltr() {
|
||||
return this.$root.htmldir === 'ltr';
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.prepareComponent();
|
||||
},
|
||||
|
||||
methods: {
|
||||
prepareComponent() {
|
||||
this.getCategories();
|
||||
this.newLifeEvent.happened_at = moment().format('YYYY-MM-DD');
|
||||
this.selectedYear = moment().year();
|
||||
this.selectedMonth = moment().month() + 1; // month is zero indexed (O_o) in moments.js
|
||||
this.selectedDay = moment().date();
|
||||
},
|
||||
|
||||
displayAddScreen(type) {
|
||||
this.view = 'add';
|
||||
this.activeType = type;
|
||||
this.newLifeEvent.life_event_type_id = type.id;
|
||||
},
|
||||
|
||||
getCategories() {
|
||||
axios.get('lifeevents/categories')
|
||||
.then(response => {
|
||||
this.categories = response.data.data;
|
||||
});
|
||||
},
|
||||
|
||||
getType(category) {
|
||||
axios.get('lifeevents/categories/' + category.id + '/types')
|
||||
.then(response => {
|
||||
this.types = response.data.data;
|
||||
});
|
||||
|
||||
this.view = 'types';
|
||||
this.activeCategory = category;
|
||||
},
|
||||
|
||||
updateLifeEventContent(lifeEvent) {
|
||||
this.newLifeEvent.note = lifeEvent.note;
|
||||
this.newLifeEvent.name = lifeEvent.name;
|
||||
this.newLifeEvent.specific_information = lifeEvent.specific_information;
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the date when the user chooses either an empty month
|
||||
* or an empty day of the month.
|
||||
* If the user chooses an empty day, the day is set to 1 and we use
|
||||
* a boolean to indicate that the day is unknown.
|
||||
* Same for the month.
|
||||
*/
|
||||
updateDate() {
|
||||
if (this.selectedDay === 0 || this.selectedDay === '0') {
|
||||
this.newLifeEvent.happened_at_day_unknown = true;
|
||||
this.newLifeEvent.happened_at = this.selectedYear + '-' + this.selectedMonth + '-01';
|
||||
} else if (this.selectedMonth === 0 || this.selectedMonth === '0') {
|
||||
this.newLifeEvent.happened_at_month_unknown = true;
|
||||
this.newLifeEvent.happened_at_day_unknown = true;
|
||||
this.newLifeEvent.happened_at = this.selectedYear + '-01-01';
|
||||
this.selectedDay = 0;
|
||||
} else {
|
||||
this.newLifeEvent.happened_at = this.selectedYear + '-' + this.selectedMonth + '-' + this.selectedDay;
|
||||
this.newLifeEvent.happened_at_month_unknown = false;
|
||||
this.newLifeEvent.happened_at_day_unknown = false;
|
||||
}
|
||||
},
|
||||
|
||||
store() {
|
||||
axios.post('people/' + this.hash + '/lifeevents', this.newLifeEvent)
|
||||
.then(response => {
|
||||
this.$emit('updateLifeEventTimeline', response.data);
|
||||
|
||||
this.$notify({
|
||||
group: 'main',
|
||||
title: this.$t('people.life_event_create_success'),
|
||||
text: '',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
649
resources/js/components/people/lifeevent/LifeEventList.vue
Normal file
649
resources/js/components/people/lifeevent/LifeEventList.vue
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="ph4 pv3 mb3 mb0-ns bb b--gray-monica">
|
||||
<label for="event-name" class="mr2">
|
||||
{{ $t('people.life_event_create_default_title') }}
|
||||
</label>
|
||||
<input id="event-name" v-model="defaultEvent.name" autofocus class="br2 f5 w-100 ba b--black-40 pa2 outline-0" @input="broadcastContentChange" />
|
||||
</div>
|
||||
|
||||
<div class="ph4 pv3 mb3 mb0-ns bb b--gray-monica">
|
||||
<label for="description" class="mr2">
|
||||
{{ $t('people.life_event_create_default_story') }}
|
||||
</label>
|
||||
<form-textarea
|
||||
id="description"
|
||||
v-model="defaultEvent.note"
|
||||
:required="false"
|
||||
:no-label="true"
|
||||
:rows="4"
|
||||
:placeholder="$t('people.life_event_create_default_description')"
|
||||
@input="broadcastContentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
defaultEvent: {
|
||||
name: '',
|
||||
note: '',
|
||||
specific_information: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
dirltr() {
|
||||
return this.$root.htmldir === 'ltr';
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.prepareComponent();
|
||||
},
|
||||
|
||||
methods: {
|
||||
prepareComponent() {
|
||||
this.defaultEvent.happened_at = moment().format('YYYY-MM-DD');
|
||||
},
|
||||
|
||||
broadcastContentChange() {
|
||||
this.$emit('contentChange', this.defaultEvent);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user