⚡ linked things

src/app/config/PollConfig.ts

@@ -44,6 +44,7 @@ export const defaultAnswers = [{
  * configuration of the poll, add new fields at will
  */
 export class PollConfig {
+    expiracyDateDefaultInDays = 60;
     step = 0;
     stepMax = 3;
     pollType = 'classic';// classic or date
@@ -56,11 +57,12 @@ export class PollConfig {
     // access
     visibility = 'link_only'; // visible to anyone with the link:
     voteChoices = 'only_yes'; // possible answers to a vote choice: only "yes", "yes, maybe, no"
-    expirationDate = new Date().toString().substr(0, 10); // expiracy date
+    expirationDate = ''; // expiracy date
     passwordAccess = 0;
     password = '';
     customUrl = '';
-    canModifyAnswers = "self";// everybody, self, nobody (= just admin)
+    canModifyAnswers = 1;// everybody, self, nobody (= just admin)
+    whoModifiesAnswers = "self";// everybody, self, nobody (= just admin)
     whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
     dateList: DateOption[] = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll
     timeList: DateOption[] = timeOfDay; // ranges of time expressed as strings

src/app/pages/kind/kind.component.scss

@@ -1,22 +1,23 @@
 @charset "UTF-8";
 
 section {
-  &:not(:last-of-type) {
-    border-bottom: 6px solid #000;
-  }
+    &:not(:last-of-type) {
+        border-bottom: 6px solid #000;
+    }
+
+    + section {
+        margin: 0 !important;
+    }
 
-  & + & {
-      margin-top: 3rem;
-  }
 }
 
 article {
-  padding: 2rem 0;
-  border-top: 3px solid #ffb92c;
+    padding: 2rem 0;
+    border-top: 3px solid #ffb92c;
 
-  h3 {
-    &:not(:first-of-type) {
-      margin-top: 2rem;
+    h3 {
+        &:not(:first-of-type) {
+            margin-top: 2rem;
+        }
     }
-  }
 }

src/app/pages/visibility/visibility.component.html

@@ -79,7 +79,8 @@
         <select
             name="modificationScope"
             id="modificationScope"
-            [(ngModel)]="config.canModifyAnswers">
+            [(ngModel)]="config.whoModifiesAnswers"
+            [disabled]="!config.canModifyAnswers">
             <option value="self">
                 {{"visibility.modfiy_their"|translate}}
             </option>
@@ -101,7 +102,9 @@
         <br>
         {{"visibility.access_url_key"|translate}}
     </label>
+    <br>
     <input type="text"
+           class="input-lg"
            name="url"
            id="url"
            [(ngModel)]="config.customUrl">

src/app/pages/visibility/visibility.component.ts

@@ -16,6 +16,7 @@ export class VisibilityComponent extends BaseComponent implements OnInit {
 
     ngOnInit() {
         this.config.customUrl = this.makeUuid();
+        this.config.expirationDate = (this.addDaysToDate(this.config.expiracyDateDefaultInDays, new Date())).toISOString().substring(0, 10);
     }
 
     /**
@@ -28,4 +29,15 @@ export class VisibilityComponent extends BaseComponent implements OnInit {
         });
     }
 
+    /**
+     * add some days to a date, to compute intervals
+     * @param days
+     * @param date
+     */
+    addDaysToDate(days: number, date: Date) {
+        date = new Date(date.valueOf());
+        date.setDate(date.getDate() + days);
+        return date;
+    };
+
 }

src/assets/scss/atoms/_forms.scss

@@ -1,63 +1,70 @@
 @charset "UTF-8";
-input[type="date"]::after{
-  content:"au format JJ/MM/AAAA";
-  display: inline-block;
-  position: relative;
+
+.input-lg {
+    display: block;
+    width: 100%;
 }
+
+input[type="date"]::after {
+    content: "au format JJ/MM/AAAA";
+    display: inline-block;
+    position: relative;
+}
+
 input,
 select,
 textarea {
-  padding: 1rem;
-  border: 1px solid $secondary_color;
-  border-bottom: 3px solid $primary_color;
+    padding: 1rem;
+    border: 1px solid $secondary_color;
+    border-bottom: 3px solid $primary_color;
 
 }
 
 input,
 select {
-  display: inline-block;
-  margin-bottom:10px;
-  margin-left:5px;
+    display: inline-block;
+    margin-bottom: 10px;
+    margin-left: 5px;
 }
 
 textarea {
-  width: 100%;
-  border-left: 3px solid $primary_color;
+    width: 100%;
+    border-left: 3px solid $primary_color;
 }
 
 select,
 option {
-  // delete default display
-  -webkit-appearance : none;
-  -moz-appearance : none;
+    // delete default display
+    -webkit-appearance: none;
+    -moz-appearance: none;
 
-  background: none;
-  border-radius: 0;
+    background: none;
+    border-radius: 0;
 
-  background-color: transparent;
-  background-image: url("./assets/img/fleche_bas.svg");
-  padding-right:1.5rem;
+    background-color: transparent;
+    background-image: url("./assets/img/fleche_bas.svg");
+    padding-right: 1.5rem;
 
-  background-repeat: no-repeat;
-  background-size: 9px 8px;
-  background-position: right 1rem center;
+    background-repeat: no-repeat;
+    background-size: 9px 8px;
+    background-position: right 1rem center;
 
-  background-clip: border-box;
+    background-clip: border-box;
 
-  // TODO -> check what angular can do
+    // TODO -> check what angular can do
 }
 
 label {
-  &[for] {
-    cursor: pointer;
-  }
-
-  &:not([for]) {
-    color: $dusty-orange;
-
-    &:before {
-      content: "ce label n'a pas d'attribut for, c'est mal.";
-      color: $violet;
+    &[for] {
+        cursor: pointer;
+    }
+
+    &:not([for]) {
+        color: $dusty-orange;
+
+        &:before {
+            content: "ce label n'a pas d'attribut for, c'est mal.";
+            color: $violet;
+        }
     }
-  }
 }

src/assets/scss/useful_classes.scss

@@ -3,4 +3,8 @@
 .align-right {
     display: flex;
     justify-content: flex-end;
-}
+}
+
+.pull-right {
+    float: right;
+}